/* ============================================================================
 * LEGACY FROZEN FILE
 *
 * Do not add new feature logic here.
 * Before editing, read:
 * docs/legacy-file-maps/spectrum-editor-css.map.md
 *
 * Allowed:
 * - minimal bug fixes
 * - compatibility patches
 * - tiny bridge hooks only
 *
 * Not allowed:
 * - new feature implementation
 * - full-file rewrite or reformat
 * - formatting-only rewrite
 * - public contract rename without explicit request
 *
 * New feature logic must live in a new file and connect through a bridge.
 * ============================================================================
 */

:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --text: #111827;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.12);
  --line-soft: rgba(15, 23, 42, 0.07);
  --accent: #34d399;
  --accent-dark: #15976d;
  --accent-rgb: 52, 211, 153;
  --accent-contrast: #063f35;
  --blue: #4f6fe5;
  --danger: #ef5b73;
  --shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
  --radius: 8px;
  --ui-font: "Segoe UI Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono-font: "SF Mono", "Cascadia Mono", "Segoe UI Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --control-border: rgba(148, 163, 184, 0.28);
  --control-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 20px rgba(15, 23, 42, 0.04);
  --timeline-zoom-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ffffff' fill-opacity='.94'/%3E%3Cpath d='M4.5 12h5M4.5 12l3.5-3.5M4.5 12l3.5 3.5M19.5 12h-5M19.5 12l-3.5-3.5M19.5 12l-3.5 3.5' fill='none' stroke='%230f172a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, ew-resize;
  font-family: var(--ui-font);
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.03), transparent 24%),
    var(--bg);
  color: var(--text);
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: default;
}

.editorBootLoader {
  --boot-primary: #2563eb;
  --boot-primary-rgb: 37, 99, 235;
  --boot-secondary: #7c3aed;
  --boot-secondary-rgb: 124, 58, 237;
  --boot-success: #10b981;
  --boot-success-rgb: 16, 185, 129;
  --boot-ink: #172033;
  --boot-muted: #65758d;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--boot-ink);
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.74) 43%, transparent 54%) -46vw 0 / 42vw 100% no-repeat,
    radial-gradient(circle at 18% 14%, rgba(var(--boot-primary-rgb), 0.16), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(var(--boot-secondary-rgb), 0.13), transparent 30%),
    radial-gradient(circle at 52% 88%, rgba(var(--boot-success-rgb), 0.1), transparent 32%),
    linear-gradient(180deg, #fbfdff, #eef4ff);
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 220ms ease;
  animation: editorBootPageShimmer 1800ms cubic-bezier(0.33, 0, 0.2, 1) infinite;
}

.editorBootLoader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.editorBootPanel {
  width: min(560px, 92vw);
  padding: 30px 32px 28px;
  border: 1px solid rgba(125, 148, 171, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, 0.74) 43%, transparent 57%) -130% 0 / 82% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.9));
  box-shadow:
    0 28px 90px rgba(15, 23, 42, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  animation: editorBootPanelShimmer 2100ms cubic-bezier(0.33, 0, 0.2, 1) infinite;
  backdrop-filter: blur(14px);
}

.editorBootBrand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.editorBootLogoText {
  color: #111827;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.editorBootMark {
  display: inline-flex;
  align-items: end;
  gap: 4px;
  height: 26px;
  color: var(--boot-primary);
}

.editorBootMark span {
  width: 5px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 18px rgba(var(--boot-primary-rgb), 0.34);
  animation: editorBootPulse 780ms ease-in-out infinite;
}

.editorBootMark span:nth-child(2) {
  height: 22px;
  animation-delay: 90ms;
}

.editorBootMark span:nth-child(3) {
  height: 17px;
  animation-delay: 180ms;
}

.editorBootText {
  display: grid;
  gap: 6px;
}

.editorBootText strong {
  font-size: 22px;
  font-weight: 850;
  line-height: 1.1;
}

.editorBootText span {
  color: var(--boot-muted);
  font-size: 13px;
  font-weight: 650;
}

.editorBootLog {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 188px;
  margin-top: 22px;
  padding: 16px 17px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.72) 42%, transparent 56%) -90% 0 / 72% 100% no-repeat,
    rgba(248, 250, 252, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  animation: editorBootLogShimmer 2200ms cubic-bezier(0.33, 0, 0.2, 1) infinite;
}

.editorBootLogLine {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  min-height: 20px;
  color: #526178;
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.1;
  font-family: var(--mono-font);
  opacity: 0;
  transform: translateY(7px);
  animation: editorBootLogLine 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.editorBootLogLine::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--boot-primary), var(--boot-secondary));
  box-shadow: 0 0 11px rgba(var(--boot-primary-rgb), 0.34);
  flex: 0 0 auto;
}

.editorBootLogLine span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editorBootLogLine i {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(100, 116, 139, 0.2);
  border-top-color: #111827;
  background: #ffffff;
  animation: editorBootTinySpin 780ms linear infinite;
}

.editorBootLogLine.is-done {
  color: #263244;
}

.editorBootLogLine.is-done i {
  border-color: #172033;
  background: linear-gradient(180deg, #253149, #111827);
  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.18);
  animation: editorBootTickPop 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.editorBootLogLine.is-done i::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.editorBootStatusRail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.editorBootStatusRail span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: #53637a;
  background: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  font-weight: 780;
  animation: editorBootStatusPulse 1800ms ease-in-out infinite;
}

.editorBootStatusRail span:nth-child(2) {
  animation-delay: 180ms;
}

.editorBootStatusRail span:nth-child(3) {
  animation-delay: 360ms;
}

.editorBootStatusRail span:nth-child(4) {
  animation-delay: 540ms;
}

.editorBootStatusRail i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--boot-primary), var(--boot-secondary));
  box-shadow: 0 0 12px rgba(var(--boot-primary-rgb), 0.34);
}

@keyframes editorBootPageShimmer {
  from {
    background-position: -46vw 0, 50% 32%, 0 0;
  }
  to {
    background-position: 118vw 0, 50% 32%, 0 0;
  }
}

@keyframes editorBootPanelShimmer {
  from {
    background-position: -130% 0, 0 0;
  }
  to {
    background-position: 220% 0, 0 0;
  }
}

@keyframes editorBootLogShimmer {
  from {
    background-position: -90% 0, 0 0;
  }
  to {
    background-position: 190% 0, 0 0;
  }
}

@keyframes editorBootLogLine {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes editorBootTinySpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes editorBootTickPop {
  from {
    transform: scale(0.72);
    box-shadow: 0 0 0 0 rgba(var(--boot-success-rgb), 0.34);
  }
  to {
    transform: scale(1);
    box-shadow: 0 0 0 5px transparent;
  }
}

@keyframes editorBootPulse {
  0%,
  100% {
    transform: scaleY(0.62);
    opacity: 0.58;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes editorBootStatusPulse {
  0%,
  100% {
    transform: translateY(0);
    border-color: rgba(148, 163, 184, 0.2);
  }
  50% {
    transform: translateY(-1px);
    border-color: rgba(var(--boot-primary-rgb), 0.32);
  }
}

body.is-resizing-timeline,
body.is-resizing-timeline * {
  cursor: ns-resize !important;
  user-select: none !important;
}

body.is-resizing-timeline .previewFrame,
body.is-resizing-timeline .timelineDock,
body.is-resizing-timeline .timelineTracks,
body.is-resizing-timeline .timelineDropZone {
  will-change: height, transform;
}

body.is-resizing-timeline .timelineTracks,
body.is-resizing-timeline .clipThumbStrip,
body.is-resizing-timeline .clipThumbCanvas {
  transition: none !important;
  animation: none !important;
}

body.is-resizing-side-panel,
body.is-resizing-side-panel * {
  cursor: ew-resize !important;
  user-select: none !important;
}

body.is-cropping-stage,
body.is-cropping-stage * {
  user-select: none !important;
}

body.is-cropping-stage {
  cursor: grabbing;
}

.editorApp {
  --timeline-height: 326px;
  --side-panel-width: 420px;
  --rail-width: 64px;
  --topbar-height: 56px;
  --side-column-width: clamp(300px, var(--side-panel-width), 680px);
  --inspector-panel-width: clamp(300px, 17vw, 344px);
  --project-aspect-w: 16;
  --project-aspect-h: 9;
  --project-aspect-ratio: 1.777778;
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-width) var(--side-column-width) minmax(0, 1fr);
  grid-template-rows: var(--topbar-height) minmax(0, 1fr) var(--timeline-height);
  grid-template-areas:
    "topbar topbar topbar"
    "rail side workspace"
    "timeline timeline timeline";
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  transition: grid-template-columns 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.editorApp.is-left-panel-collapsed {
  --side-column-width: 0px;
}

.editorApp.is-right-panel-collapsed {
  --inspector-panel-width: 0px;
}

body[data-editor-theme="dark"] {
  background: #151820;
  color: #e5ebf4;
}

body[data-editor-theme="night"] {
  background: #080a0f;
  color: #eef2f7;
}

.editorApp[data-theme="dark"] {
  --bg: #171b22;
  --panel: #202630;
  --panel-2: #242b36;
  --text: #e8eef7;
  --muted: #94a3b8;
  --line: rgba(226, 232, 240, 0.14);
  --line-soft: rgba(226, 232, 240, 0.08);
  background: var(--bg);
}

.editorApp[data-theme="night"] {
  --bg: #090c12;
  --panel: #111722;
  --panel-2: #151d2a;
  --text: #eef2f7;
  --muted: #8fa1b7;
  --line: rgba(226, 232, 240, 0.16);
  --line-soft: rgba(226, 232, 240, 0.08);
  background: var(--bg);
}

.editorApp:fullscreen,
.editorApp.is-editor-fullscreen,
.editorApp.is-editor-fullscreen-fallback {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background: var(--bg);
}

.editorApp.is-editor-fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.rail {
  grid-area: rail;
  overflow-y: auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(7, auto) 1fr;
  align-items: start;
  justify-items: center;
  gap: 6px;
  padding: 16px 0;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-right: 1px solid var(--line);
}

.brandMark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff6b63, #ff4d74);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(255, 79, 99, 0.22);
}

.railButton {
  width: 56px;
  height: 72px;
  border: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  gap: 5px;
  background: transparent;
  color: #475569;
  font-weight: 800;
  font-size: 11px;
  transition: color 150ms ease, background 150ms ease;
}

.railButton > span:not(.railIcon) {
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.railIcon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e5e7eb;
  color: #64748b;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.railButton:hover {
  color: #111827;
}

.railButton:hover .railIcon {
  background: #eef2f7;
  color: #111827;
}

.railButton.is-active {
  color: #ff4f63;
}

.railButton.is-active .railIcon {
  background: linear-gradient(135deg, #ff706b, #ff4e70);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(255, 79, 99, 0.24);
}

.sidePanel {
  grid-area: side;
  position: relative;
  min-width: 0;
  background: #f1f3f6;
  border-right: 1px solid rgba(15, 23, 42, 0.18);
  overflow: hidden;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease;
}

.editorApp.is-left-panel-collapsed .sidePanel {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
  border-right-color: transparent;
}

.editorApp.is-left-panel-collapsed .sidePanelResizeHandle {
  display: none;
}

.panelPane {
  display: none;
  height: 100%;
  padding: 26px 20px 24px;
  overflow: auto;
}

.panelPane.is-active {
  display: block;
}

.panelPane[data-tab-panel="media"] {
  padding: 0;
  background: #f5f7fb;
  color: #172033;
  scrollbar-color: rgba(148, 163, 184, 0.76) #edf2f7;
}

.panelPane[data-tab-panel="media"].is-active {
  display: flex;
  flex-direction: column;
}

.panelPane[data-tab-panel="transitions"] {
  background:
    radial-gradient(circle at 70% 0%, rgba(var(--accent-rgb), 0.12), transparent 30%),
    #111827;
  color: #dbe4f2;
}

.panelPane[data-tab-panel="transitions"] h1 {
  color: #f8fafc;
}

.panelPane[data-tab-panel="projects"] {
  position: relative;
  padding: 0;
  background: #0a0c0d;
  color: #dbe4f0;
  scrollbar-color: rgba(148, 163, 184, 0.48) rgba(255, 255, 255, 0.05);
}

.panelPane[data-tab-panel="projects"].is-active {
  display: flex;
  flex-direction: column;
}

h1 {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #06111f;
}

.paneHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.paneHeader span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.mediaLibraryHeader {
  position: sticky;
  top: 0;
  z-index: 35;
  display: grid;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.9)),
    rgba(248, 250, 252, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.mediaTitleRow {
  display: grid;
  grid-template-columns: auto minmax(132px, 1fr);
  align-items: center;
  gap: 12px;
}

.mediaTitleRow h1 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.mediaSearch {
  min-width: 0;
  height: 34px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 5px;
  background: #ffffff;
  color: #64748b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mediaSearch:focus-within {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mediaSearchIcon {
  width: 28px;
  height: 100%;
  display: grid;
  place-items: center;
}

.mediaSearchIcon .uiIcon {
  width: 15px;
  height: 15px;
}

.mediaSearch input {
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font-size: 12px;
  font-weight: 720;
}

.mediaSearch input::placeholder {
  color: #8b98aa;
}

.mediaToolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mediaToolbarSpacer {
  flex: 1 1 auto;
  min-width: 4px;
}

.mediaActionButton,
.mediaIconButton {
  height: 28px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.86);
  color: #334155;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms ease;
}

.mediaActionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
}

.mediaActionButton-secondary {
  max-width: 132px;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
}

.mediaActionButton .uiIcon {
  width: 14px;
  height: 14px;
}

.mediaIconButton {
  width: 28px;
  display: grid;
  place-items: center;
  padding: 0;
}

.mediaIconButton .uiIcon {
  width: 15px;
  height: 15px;
}

.mediaActionButton:hover,
.mediaIconButton:hover,
.mediaIconButton.is-active {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-dark);
}

.mediaActionButton:disabled,
.mediaIconButton:disabled {
  cursor: default;
  opacity: 0.45;
  transform: none;
}

.mediaIconButton.is-danger:not(:disabled):hover {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(248, 113, 113, 0.14);
  color: #dc2626;
}

.mediaActionButton:active,
.mediaIconButton:active {
  transform: translateY(1px);
}

.mediaShelfBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-size: 12px;
  font-weight: 780;
}

.mediaShelfBar small {
  color: #708096;
  font-size: 11px;
  font-weight: 760;
}

.assetList {
  display: grid;
  /* CT-55 FIXEDGRID: fixed small thumbnails, always 3 columns by default,
     never 2, never rubber/stretch. */
  --asset-card-w: 118px;
  grid-template-columns: repeat(3, var(--asset-card-w));
  justify-content: start;
  align-content: start;
  gap: 14px;
  margin: 0;
  padding: 14px;
}

/* CT-55 FIXEDGRID: make the media panel a size container so the asset grid
   can switch between exactly 3 and 4 fixed columns based on panel width. */
.panelPane[data-tab-panel="media"] {
  container-type: inline-size;
  container-name: mediaPanel;
}

/* CT-55 FIXEDGRID: widen to 4 columns only when the panel is wide enough;
   thumbnails keep the same fixed size (no stretching). */
@container mediaPanel (min-width: 540px) {
  .assetList:not(.is-list-view) {
    grid-template-columns: repeat(4, var(--asset-card-w));
  }
}

/* CT-55 FIXEDGRID: empty/status placeholders should span the whole row. */
.assetList > .assetEmpty,
.assetList > .statusBox {
  grid-column: 1 / -1;
}

.assetList.is-list-view {
  grid-template-columns: 1fr;
  gap: 9px;
}

.assetItem,
.assetEmpty,
.statusBox {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.statusBox strong {
  display: block;
  margin-bottom: 4px;
  color: #334155;
  font-size: 12px;
}

.statusBox .featureGateLine {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
}

.assetItem {
  position: relative;
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  padding: 0;
  background: transparent;
  text-align: left;
  color: #172033;
  font-weight: 760;
}

.assetItem.is-import-reveal::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 5;
  border-radius: 8px;
  background:
    linear-gradient(105deg, transparent 26%, rgba(255, 255, 255, 0.68) 45%, rgba(94, 234, 212, 0.28) 55%, transparent 74%);
  opacity: 0;
  pointer-events: none;
  animation: assetImportRevealSweep 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes assetImportRevealSweep {
  0% {
    opacity: 0;
    transform: translateX(-34%) skewX(-14deg);
  }
  22% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: translateX(34%) skewX(-14deg);
  }
}

.assetItem:hover {
  background: rgba(255, 255, 255, 0.78);
}

.assetItem:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.72);
  outline-offset: 3px;
}

.assetItem.is-selected .assetPreview {
  border-color: rgba(var(--accent-rgb), 0.76);
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb), 0.22),
    0 12px 22px rgba(var(--accent-rgb), 0.16);
}

.assetItem.is-selected .assetPreview::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 2px solid rgba(var(--accent-rgb), 0.92);
  border-radius: inherit;
  pointer-events: none;
}

.assetPlaybackShade {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: var(--media-preview-progress, 0%);
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: width 80ms linear, opacity 120ms ease;
}

.assetScrubRail {
  position: absolute;
  z-index: 4;
  left: 9px;
  right: 9px;
  top: 9px;
  height: 8px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.24);
  box-shadow: 0 1px 5px rgba(2, 6, 23, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 110ms ease, transform 110ms ease;
}

.assetScrubRail b {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--media-preview-progress, 0%);
  border-radius: inherit;
  background: #f8fafc;
}

.assetScrubRail i {
  position: absolute;
  left: var(--media-preview-progress, 0%);
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.42),
    0 5px 12px rgba(2, 6, 23, 0.36);
  transform: translate(-50%, -50%);
}

.assetItem.is-preview-playing .assetScrubRail {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-1px);
}

.assetItem.is-preview-playing .assetPlaybackShade {
  opacity: 1;
}

.assetItem.is-selected .assetMeta strong {
  color: var(--accent-dark);
}

.assetItem-static {
  opacity: 0.86;
}

.assetImportPending {
  cursor: default;
  pointer-events: none;
}

.assetImportPending .assetPreview {
  border-color: rgba(56, 189, 248, 0.26);
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.18), transparent 58%),
    #dbeafe;
}

/* CT-18 CAPCUT-LOADER: full-screen dimmed backdrop, panel centered on screen. */
.importBatchPopup {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #eef6ff;
  pointer-events: auto;
  background: rgba(2, 6, 16, 0.55);
  backdrop-filter: blur(3px) saturate(1.02);
  animation: importBatchBackdropIn 200ms ease both;
}

@keyframes importBatchBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.importBatchPopup[hidden] {
  display: none;
}

.importBatchPanel {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(420px, calc(100vw - 48px));
  padding: 16px 18px 15px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(20, 26, 38, 0.98), rgba(12, 16, 26, 0.99));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  pointer-events: auto;
  overflow: hidden;
  transform: scale(1);
  opacity: 1;
  animation: importBatchModalIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  will-change: transform, opacity;
}

@keyframes importBatchModalIn {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}


.importBatchPanel.is-hiding {
  pointer-events: none;
  animation: importBatchSlideDown 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes importBatchSlideUp {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes importBatchSlideDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(28px) scale(0.975);
  }
}

.importBatchPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% -12%, rgba(94, 234, 212, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 38%);
}

.importBatchPanel.is-finished {
  border-color: rgba(94, 234, 212, 0.18);
}

.importBatchHeader,
.importBatchProgressWrap,
.importBatchStats,
.importBatchRows {
  position: relative;
  z-index: 1;
}

.importBatchHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.importBatchHeader strong {
  display: block;
  color: rgba(248, 250, 252, 0.96);
  font-size: 13.5px;
  font-weight: 720;
  line-height: 1.16;
  letter-spacing: -0.015em;
}

.importBatchHeader span {
  display: block;
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(148, 163, 184, 0.78);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CT-18 CAPCUT-LOADER modal parts */
.importBatchClose {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(148, 163, 184, 0.85);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.importBatchClose:hover {
  background: rgba(148, 163, 184, 0.14);
  color: rgba(248, 250, 252, 0.98);
}

.importBatchBody {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
}

.importBatchTitle {
  color: rgba(129, 176, 255, 0.95);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.importBatchDivider {
  position: relative;
  z-index: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.16);
  margin: 2px -18px 0;
}

.importBatchFooter {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}

.importBatchButton {
  height: 29px;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: rgba(226, 232, 240, 0.9);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.importBatchButton:hover {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(30, 41, 59, 0.74);
  color: #ffffff;
}

.importBatchButton:active {
  transform: translateY(1px) scale(0.985);
}

.importBatchProgressWrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 3px 0;
}

.importBatchProgressWrap > span {
  min-width: 58px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 10.5px;
  font-weight: 680;
  text-align: right;
}

.importBatchProgress {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(30, 41, 59, 0.74);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.075);
}

.importBatchProgress i {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #2dd4bf 58%, #86efac);
  box-shadow: none;
  transition: width 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.importBatchStats {
  color: rgba(148, 163, 184, 0.72);
  font-size: 10.5px;
  font-weight: 560;
  letter-spacing: 0.01em;
}

.importBatchRows {
  display: grid;
  gap: 6px;
  max-height: 188px;
  overflow: auto;
  padding: 1px 3px 1px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.importBatchRows::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.importBatchRow {
  display: grid;
  grid-template-columns: 7px 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, 0.075);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.28);
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.importBatchRow:hover {
  border-color: rgba(148, 163, 184, 0.15);
  background: rgba(30, 41, 59, 0.32);
}

.importBatchStatusDot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.72);
  box-shadow: none;
}

.importBatchKind {
  justify-self: start;
  color: rgba(125, 211, 252, 0.9);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.importBatchName {
  min-width: 0;
  overflow: hidden;
  color: rgba(241, 245, 249, 0.92);
  font-size: 11px;
  font-weight: 590;
  letter-spacing: -0.006em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.importBatchStatus {
  min-width: 48px;
  color: rgba(148, 163, 184, 0.78);
  font-size: 10px;
  font-weight: 650;
  text-align: right;
}

.importBatchRow.is-ready .importBatchStatusDot {
  background: rgba(74, 222, 128, 0.92);
}

.importBatchRow.is-ready .importBatchStatus {
  color: rgba(187, 247, 208, 0.9);
}

.importBatchRow.is-failed .importBatchStatusDot,
.importBatchRow.is-cancelled .importBatchStatusDot {
  background: rgba(248, 113, 113, 0.92);
}

.importBatchRow.is-failed .importBatchKind,
.importBatchRow.is-cancelled .importBatchKind {
  color: rgba(252, 165, 165, 0.9);
}

.importBatchRow.is-failed .importBatchStatus,
.importBatchRow.is-cancelled .importBatchStatus {
  color: rgba(252, 165, 165, 0.92);
}

.importBatchRow.is-active {
  border-color: rgba(94, 234, 212, 0.16);
  background: rgba(20, 184, 166, 0.065);
}

.importBatchRow.is-active .importBatchStatusDot {
  background: rgba(45, 212, 191, 0.95);
}


.assetImportProgress {
  bottom: 7px;
}

.assetList.is-list-view .assetItem {
  min-height: 58px;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.assetPreview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 6px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent),
    #e8eef5;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
}

.assetPreview.is-media-loading::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 12%;
  right: 12%;
  bottom: 12px;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(217, 249, 104, 0.98), rgba(74, 222, 128, 0.96), rgba(16, 185, 129, 0.94)) 0 0 / 46% 100% no-repeat,
    rgba(3, 7, 18, 0.82);
  border: 1px solid rgba(52, 211, 153, 0.7);
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.18);
  opacity: 0.95;
  animation: assetPreviewLoadingSweep 1450ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
}

.mediaDragGhost {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 118px;
  padding: 9px 12px 9px 9px;
  border: 1px solid rgba(45, 212, 191, 0.54);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(20, 83, 95, 0.94));
  color: #ffffff;
  box-shadow:
    0 16px 34px rgba(2, 6, 23, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  pointer-events: none;
}

.mediaDragGhostBadge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #34d399, #22d3ee);
  color: #04111d;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(34, 211, 238, 0.24);
}

.mediaDragGhostText {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}

.mediaDragGhostText strong {
  font-size: 12px;
  font-weight: 950;
}

.mediaDragGhostText small {
  color: rgba(226, 232, 240, 0.76);
  font-size: 10px;
  font-weight: 800;
}

.assetList.is-list-view .assetPreview {
  aspect-ratio: 16 / 9;
}

.assetThumb {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #edf2f7, #dbe5ef);
  color: #52647f;
  font-size: 13px;
  font-weight: 950;
}

.assetThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.assetThumb-audio,
.assetThumb-wave {
  background:
    repeating-linear-gradient(90deg, rgba(56, 189, 248, 0.2) 0 2px, transparent 2px 5px),
    linear-gradient(135deg, #10263f, #07121f);
}

.assetThumb-video {
  background:
    radial-gradient(circle at 50% 48%, rgba(148, 163, 184, 0.18) 0 18%, transparent 38%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(8, 15, 26, 0.94));
}

.assetThumb-loading::before {
  content: "";
  width: 62%;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.62);
  background:
    linear-gradient(90deg, rgba(217, 249, 104, 0.96), rgba(74, 222, 128, 0.94), rgba(16, 185, 129, 0.9)) 0 0 / 42% 100% no-repeat,
    rgba(3, 7, 18, 0.72);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.2);
  animation: assetPreviewLoadingSweep 1450ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.assetThumb-text {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.24), rgba(219, 39, 119, 0.24));
}

.projectsHeader {
  position: sticky;
  top: 0;
  z-index: 42;
  display: grid;
  gap: 10px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(9, 11, 12, 0.98);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}

.projectsTitleRow {
  display: grid;
  grid-template-columns: auto minmax(128px, 1fr);
  align-items: center;
  gap: 12px;
}

.projectsTitleRow h1 {
  margin: 0;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}

.projectSearch {
  min-width: 0;
  height: 32px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.075);
  color: #aeb8c7;
}

.projectSearch:focus-within {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.14);
}

.projectSearchIcon {
  width: 28px;
  height: 100%;
  display: grid;
  place-items: center;
}

.projectSearchIcon .uiIcon {
  width: 15px;
  height: 15px;
}

.projectSearch input {
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 720;
}

.projectSearch input::placeholder {
  color: #7d8795;
}

.projectToolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.projectToolbarSpacer {
  flex: 1 1 auto;
  min-width: 4px;
}

.projectIconButton,
.projectActionButton {
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #e5edf8;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms ease;
}

.projectIconButton {
  width: 28px;
  display: grid;
  place-items: center;
  padding: 0;
}

.projectIconButton .uiIcon {
  width: 15px;
  height: 15px;
}

.projectActionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.projectActionButton .uiIcon {
  width: 14px;
  height: 14px;
}

.projectIconButton:hover,
.projectIconButton.is-active,
.projectActionButton:hover,
.projectActionButton.is-active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: rgba(var(--accent-rgb), 0.15);
  color: #ffffff;
}

.projectIconButton:active,
.projectActionButton:active {
  transform: translateY(1px);
}

.projectShelfBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #c8d2df;
  font-size: 12px;
  font-weight: 780;
}

.projectShelfBar small {
  color: #7f8998;
  font-size: 11px;
  font-weight: 760;
}

.projectList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  align-content: start;
  gap: 16px;
  margin: 0;
  padding: 16px 14px 96px;
}

.projectList.is-list-view {
  grid-template-columns: 1fr;
  gap: 10px;
}

.projectCard {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 7px;
  background: transparent;
  color: #dbe4f0;
  text-align: left;
  font-weight: 650;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.projectCard:hover {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  transform: translateY(-1px);
}

.projectCard:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.54);
  outline-offset: 2px;
}

.projectCard.is-active {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(var(--accent-rgb), 0.075);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08) inset;
}

.projectCard.is-active .projectThumb {
  border-color: rgba(var(--accent-rgb), 0.34);
}

.projectCard.is-active .projectName {
  color: #eef7ff;
}

.projectList.is-list-view .projectCard {
  min-height: 76px;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.projectCreateCard {
  display: none;
}

.projectThumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(20, 28, 42, 0.96), rgba(7, 11, 18, 0.98));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.projectThumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.38), transparent 46%);
  pointer-events: none;
}

.projectThumbImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #05070c;
  transform: scale(1.001);
}

.projectThumbFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(226, 232, 240, 0.38);
  background:
    radial-gradient(circle at 52% 42%, rgba(var(--accent-rgb), 0.11), transparent 42%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 12, 0.96));
}

.projectThumbFallback svg {
  width: 26px;
  height: 26px;
  opacity: 0.72;
}

.projectDuration {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 3;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(2, 6, 12, 0.72);
  color: #f8fafc;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.projectMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 0 2px 2px;
}

.projectName {
  min-width: 0;
  overflow: hidden;
  color: #e6edf7;
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectInfo,
.projectSaved {
  min-width: 0;
  overflow: hidden;
  color: #8d98a8;
  font-size: 10.5px;
  font-weight: 580;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectSaved {
  color: #6f7b8c;
}

.projectEmpty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #7f8998;
  font-size: 12px;
  font-weight: 800;
}

.projectContextMenu {
  position: fixed;
  z-index: 260;
  width: 152px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(47, 47, 48, 0.98);
  color: #ffffff;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.projectContextMenu button {
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8px;
  background: transparent;
  color: #ffffff;
  font-size: 11px;
  font-weight: 820;
  text-align: left;
}

.projectContextMenu button:hover,
.projectContextMenu button:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.08);
}

.projectContextMenu button.is-danger:hover,
.projectContextMenu button.is-danger:focus-visible {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

.projectNewButton {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  min-width: 128px;
  height: 44px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 14px;
  display: inline-grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 14px 0 10px;
  background: rgba(17, 24, 36, 0.84);
  color: #e6edf7;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset;
  backdrop-filter: blur(18px);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.projectNewButton::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 58%);
  pointer-events: none;
}

.projectNewButton span {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  font-size: 22px;
  font-weight: 850;
  line-height: 1;
}

.projectNewButton strong {
  min-width: 0;
  color: #edf4ff;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.1;
  white-space: nowrap;
}

.projectNewButton:hover,
.projectNewButton:focus-visible {
  outline: 0;
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(22, 31, 46, 0.92);
  transform: translateY(-1px);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(var(--accent-rgb), 0.08) inset;
}

.projectNewButton:active {
  transform: translateY(0);
}

.panelPane[data-tab-panel="projects"]:has(.projectList.is-list-view) .projectNewButton {
  min-width: 124px;
}

.editorApp[data-theme="dark"] .sidePanel {
  background: #1f2023;
}

.editorApp[data-theme="night"] .sidePanel {
  background: #0b0f16;
}

.editorApp[data-theme="dark"] .panelPane[data-tab-panel="media"],
.editorApp[data-theme="night"] .panelPane[data-tab-panel="media"] {
  background: #202123;
  color: #d7dce4;
  scrollbar-color: rgba(148, 163, 184, 0.58) rgba(255, 255, 255, 0.08);
}

.editorApp[data-theme="night"] .panelPane[data-tab-panel="media"] {
  background: #0f131a;
}

.editorApp[data-theme="dark"] .mediaLibraryHeader,
.editorApp[data-theme="night"] .mediaLibraryHeader {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(32, 33, 35, 0.98);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.editorApp[data-theme="night"] .mediaLibraryHeader {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(12, 16, 23, 0.98);
}

.editorApp[data-theme="dark"] .mediaTitleRow h1,
.editorApp[data-theme="night"] .mediaTitleRow h1 {
  color: #f8fafc;
}

.editorApp[data-theme="dark"] .mediaSearch,
.editorApp[data-theme="night"] .mediaSearch {
  border-color: rgba(255, 255, 255, 0.1);
  background: #151618;
  color: #94a3b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.editorApp[data-theme="night"] .mediaSearch {
  background: #070a0f;
}

.editorApp[data-theme="dark"] .mediaSearch input,
.editorApp[data-theme="night"] .mediaSearch input {
  color: #eef2f7;
}

.editorApp[data-theme="dark"] .mediaSearch input::placeholder,
.editorApp[data-theme="night"] .mediaSearch input::placeholder {
  color: #6f7886;
}

.editorApp[data-theme="dark"] .mediaActionButton,
.editorApp[data-theme="dark"] .mediaIconButton,
.editorApp[data-theme="night"] .mediaActionButton,
.editorApp[data-theme="night"] .mediaIconButton {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.07);
  color: #e7edf5;
}

.editorApp[data-theme="dark"] .mediaActionButton:hover,
.editorApp[data-theme="dark"] .mediaIconButton:hover,
.editorApp[data-theme="dark"] .mediaIconButton.is-active,
.editorApp[data-theme="night"] .mediaActionButton:hover,
.editorApp[data-theme="night"] .mediaIconButton:hover,
.editorApp[data-theme="night"] .mediaIconButton.is-active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: rgba(var(--accent-rgb), 0.13);
  color: var(--accent);
}

.editorApp[data-theme="dark"] .mediaIconButton.is-danger:not(:disabled):hover,
.editorApp[data-theme="night"] .mediaIconButton.is-danger:not(:disabled):hover {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

.editorApp[data-theme="dark"] .mediaShelfBar,
.editorApp[data-theme="night"] .mediaShelfBar {
  color: #c8d0dc;
}

.editorApp[data-theme="dark"] .mediaShelfBar small,
.editorApp[data-theme="night"] .mediaShelfBar small {
  color: #818b9a;
}

.editorApp[data-theme="dark"] .assetItem,
.editorApp[data-theme="night"] .assetItem {
  color: #d9dee7;
}

.editorApp[data-theme="dark"] .assetItem:hover,
.editorApp[data-theme="night"] .assetItem:hover {
  background: rgba(255, 255, 255, 0.045);
}

.editorApp[data-theme="dark"] .assetItem.is-selected,
.editorApp[data-theme="night"] .assetItem.is-selected {
  color: #e8fff7;
}

.editorApp[data-theme="dark"] .assetItem.is-selected .assetPreview,
.editorApp[data-theme="night"] .assetItem.is-selected .assetPreview {
  border-color: rgba(var(--accent-rgb), 0.78);
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb), 0.18),
    0 12px 22px rgba(0, 0, 0, 0.24);
}

.editorApp[data-theme="dark"] .assetPreview,
.editorApp[data-theme="night"] .assetPreview {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent),
    #15171a;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.editorApp[data-theme="night"] .assetPreview {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent),
    #080b10;
}

.editorApp[data-theme="dark"] .assetThumb,
.editorApp[data-theme="night"] .assetThumb {
  background: linear-gradient(135deg, #252932, #14161a);
  color: #d8dee8;
}

.editorApp[data-theme="dark"] .assetThumb-video,
.editorApp[data-theme="night"] .assetThumb-video {
  background:
    radial-gradient(circle at 50% 48%, rgba(148, 163, 184, 0.16) 0 18%, transparent 38%),
    linear-gradient(135deg, rgba(20, 31, 45, 0.92), rgba(7, 12, 22, 0.98));
  color: transparent;
}

.editorApp[data-theme="dark"] .assetMeta strong,
.editorApp[data-theme="night"] .assetMeta strong {
  color: #dbe2ec;
}

.editorApp[data-theme="dark"] .assetItem.is-selected .assetMeta strong,
.editorApp[data-theme="night"] .assetItem.is-selected .assetMeta strong {
  color: var(--accent);
}

.editorApp[data-theme="dark"] .assetMeta small,
.editorApp[data-theme="night"] .assetMeta small {
  color: #858e9c;
}

.editorApp[data-theme="dark"] .assetEmpty,
.editorApp[data-theme="night"] .assetEmpty {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: #8d97a6;
}

.assetDuration,
.assetKindPill,
.assetAddedBadge,
.assetProxyBadge,
.assetProBadge {
  position: absolute;
  z-index: 2;
  border-radius: 4px;
  color: #f8fafc;
  line-height: 1;
  pointer-events: none;
}

.assetDuration {
  right: 4px;
  top: 4px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.54);
  font-size: 10px;
  font-weight: 840;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.assetDuration.is-loading {
  min-width: 48px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7)),
    rgba(0, 0, 0, 0.62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 10px rgba(2, 6, 23, 0.26);
}

.assetDuration.is-loading::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80%;
  bottom: -80%;
  left: -55%;
  width: 54%;
  border-radius: 999px;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0.88;
  transform: translateX(-120%) rotate(18deg);
  animation: assetDurationLoadingSweep 920ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
}

@keyframes assetDurationLoadingSweep {
  0% {
    transform: translateX(-130%) rotate(18deg);
  }
  100% {
    transform: translateX(285%) rotate(18deg);
  }
}

@keyframes assetPreviewLoadingSweep {
  0% {
    background-position: -70% 0, 0 0;
  }
  100% {
    background-position: 170% 0, 0 0;
  }
}

.assetKindPill,
.assetAddedBadge {
  left: 4px;
  top: 4px;
  padding: 2px 5px;
  border: 1px solid rgba(226, 232, 240, 0.16);
  background: rgba(15, 23, 42, 0.46);
  color: rgba(248, 250, 252, 0.88);
  font-size: 9px;
  font-weight: 620;
  text-transform: none;
  text-shadow: none;
}

.assetAddedBadge {
  background: rgba(15, 23, 42, 0.46);
}

.assetProxyBadge {
  left: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border: 1px solid rgba(226, 232, 240, 0.14);
  background: rgba(15, 23, 42, 0.48);
  color: rgba(248, 250, 252, 0.82);
  font-size: 9px;
  font-weight: 620;
  text-transform: none;
  text-shadow: none;
}

.assetProxyBadge.is-loading {
  background: rgba(15, 23, 42, 0.5);
}

.assetProxyBadge.is-unavailable {
  right: 72px;
  max-width: calc(100% - 80px);
  background: rgba(15, 23, 42, 0.82);
  color: #fef3c7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assetProBadge {
  left: 4px;
  bottom: 4px;
  padding: 2px 5px;
  border: 1px solid rgba(226, 232, 240, 0.14);
  background: rgba(15, 23, 42, 0.48);
  color: rgba(248, 250, 252, 0.82);
  font-size: 9px;
  font-weight: 620;
  text-transform: none;
  text-shadow: none;
}

.assetProBadge.is-limited {
  background: rgba(244, 63, 94, 0.78);
}

.assetProBadge.is-original {
  background: rgba(15, 23, 42, 0.78);
  color: #dbeafe;
}

.assetProxyProgress {
  position: absolute;
  z-index: 2;
  left: 4px;
  right: 4px;
  bottom: 18px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.52);
  pointer-events: none;
}

.assetProxyProgress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5eead4, #38bdf8);
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.36);
}

.assetProxyAction {
  position: absolute;
  z-index: 3;
  right: 4px;
  bottom: 4px;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(2, 6, 23, 0.76);
  color: #ecfeff;
  font-size: 9px;
  font-weight: 820;
  line-height: 1;
  pointer-events: auto;
}

.assetProxyAction:hover {
  background: rgba(8, 47, 73, 0.92);
}

.assetPreview .clipWaveform {
  position: static;
  width: 100%;
  height: 100%;
  padding: 7px 4px;
  opacity: 0.98;
}

.assetPreview .clipWaveformSvg {
  color: #36a9ff;
  filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.16));
}

.assetMeta {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.assetMeta strong,
.assetMeta small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assetMeta strong {
  color: #172033;
  font-size: 11px;
  font-weight: 780;
  line-height: 1.15;
}

.assetMeta small {
  color: #6f7f95;
  font-size: 10px;
  font-weight: 560;
}

.assetEmpty {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 168px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), 0.34);
  border-radius: 14px;
  background: rgb(13, 107, 84);
  color: #ecfdf5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(6, 95, 70, 0.12);
}

.assetEmptyButton {
  appearance: none;
  grid-template-columns: 62px minmax(0, 1fr);
  justify-content: center;
  gap: 16px;
  padding: 30px 28px;
  font: inherit;
  font-weight: 820;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.assetEmptyButton:hover,
.assetEmptyButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.52);
  background: rgb(14, 121, 94);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 24px rgba(6, 95, 70, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.assetEmptyButton:active {
  background: rgb(11, 101, 79);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 14px rgba(6, 95, 70, 0.16);
  transform: translateY(1px) scale(0.996);
}

.assetEmptyIcon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 160ms ease, background 160ms ease;
}

.assetEmptyButton:hover .assetEmptyIcon,
.assetEmptyButton:focus-visible .assetEmptyIcon {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.025);
}

.assetEmptyText {
  display: grid;
  gap: 6px;
}

.assetEmptyText strong {
  color: inherit;
  font-size: 15px;
  line-height: 1.1;
}

.assetEmptyText small {
  color: rgba(236, 253, 245, 0.82);
  font-size: 12px;
  font-weight: 760;
}

.sidePanelResizeHandle {
  position: absolute;
  top: 0;
  right: -5px;
  z-index: 70;
  width: 10px;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: ew-resize;
}

.sidePanelResizeHandle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: rgba(148, 163, 184, 0.26);
  transition: width 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.sidePanelResizeHandle:hover::after,
body.is-resizing-side-panel .sidePanelResizeHandle::after {
  width: 2px;
  background: rgba(var(--accent-rgb), 0.74);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.panelToggle {
  position: absolute;
  top: 10px;
  z-index: 220;
  width: 28px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.86)),
    rgba(248, 250, 252, 0.9);
  color: #64748b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(15, 23, 42, 0.1);
  transition:
    left 90ms cubic-bezier(0.2, 0.8, 0.2, 1),
    right 90ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.panelToggle:hover,
.panelToggle:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--accent-rgb), 0.12)),
    rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 24px rgba(var(--accent-rgb), 0.18);
  outline: none;
  transform: translateY(-1px);
}

.panelToggle:active {
  transform: translateY(0) scale(0.98);
}

.editorApp > .panelToggle-left {
  position: absolute !important;
  top: calc(var(--topbar-height) + 6px) !important;
  bottom: auto !important;
  left: calc(var(--rail-width) + var(--side-column-width) - 4px) !important;
  right: auto !important;
  width: 26px !important;
  height: 34px !important;
  border-radius: 9px !important;
  z-index: 10030 !important;
}

.editorApp.is-left-panel-collapsed > .panelToggle-left {
  left: calc(var(--rail-width) + 6px) !important;
}

.editorApp > .panelToggle-right {
  position: absolute !important;
  top: calc(var(--topbar-height) + 6px) !important;
  bottom: auto !important;
  right: calc(var(--inspector-panel-width) - 4px) !important;
  left: auto !important;
  width: 26px !important;
  height: 34px !important;
  border-radius: 9px !important;
  z-index: 10030 !important;
}

.editorApp.is-right-panel-collapsed > .panelToggle-right {
  right: 6px !important;
}

.panelExpandBtn {
  position: fixed;
  top: 64px;
  z-index: 10030;
  display: none;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 9px;
  place-items: center;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.86)),
    rgba(248, 250, 252, 0.9);
  color: var(--muted);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, color 150ms ease;
}

.panelExpandBtn:hover,
.panelExpandBtn:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.48);
  color: var(--accent-dark);
  transform: translateY(-1px);
  outline: none;
}

.panelExpandBtn .uiIcon { width: 17px; height: 17px; }

#leftPanelExpand { left: 72px; }
#rightPanelExpand { right: 12px; }

.editorApp.is-left-panel-collapsed #leftPanelExpand { display: grid; }
.editorApp.is-right-panel-collapsed #rightPanelExpand { display: grid; }

.panelToggle .uiIcon {
  width: 17px;
  height: 17px;
  stroke-width: 2.08;
}

.spectrumList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.spectrumCard {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px 14px;
  background: #ffffff;
  color: #111827;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.spectrumCard:hover {
  background: #eef3ff;
  border-color: rgba(79, 111, 229, 0.35);
  transform: translateY(-1px);
}

.spectrumCard.is-active {
  background: linear-gradient(135deg, #5b7cf0, #385bd6);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.spectrumCard strong {
  font-size: 13px;
  line-height: 1.15;
}

.spectrumCard span {
  color: inherit;
  opacity: 0.76;
  font-size: 11px;
  line-height: 1.25;
}

.fieldLabel {
  display: block;
  margin: 8px 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.textInput {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  background: #ffffff;
  color: var(--text);
  outline: none;
}

.primaryWide {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--radius);
  margin-top: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.textPresetGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.textPreset {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.textPreset.is-active {
  background: #101827;
  color: #ffffff;
}

.transitionTargetBox {
  display: grid;
  gap: 5px;
  min-height: 70px;
  margin: 8px 0 14px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(15, 23, 42, 0.02)),
    rgba(255, 255, 255, 0.82);
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.transitionTargetBox strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 950;
}

.transitionTargetBox span {
  color: #64748b;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.transitionPresetGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
}

.transitionPreset {
  position: relative;
  min-height: 116px;
  border: 0;
  border-radius: 8px;
  display: grid;
  grid-template-rows: 74px auto auto;
  gap: 5px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: #dbe4f2;
  text-align: left;
  transition: transform 150ms ease, filter 150ms ease;
}

.transitionPreset i {
  position: relative;
  display: block;
  width: 100%;
  height: 74px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  overflow: hidden;
  background:
    var(--transition-preview-overlay, linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent)),
    linear-gradient(135deg, #22344f 0%, #8fb7d4 52%, #f4d18d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(15, 23, 42, 0.16);
}


.transitionPreviewFallback {
  position: relative;
  display: block;
  width: 100%;
  height: 74px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 52%, rgba(34, 211, 238, 0.95), transparent 22%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(20, 184, 166, 0.72) 48%, rgba(168, 85, 247, 0.82));
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.22), 0 8px 18px rgba(15, 23, 42, 0.18);
}

.transitionPreviewFallback span {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 0 30%, rgba(255,255,255,0.34) 42%, transparent 58% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 1px, transparent 1px 14px);
  opacity: 0.82;
}

.transitionPreviewCanvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #101827;
}

.transitionTimeBadge,
.transitionSceneBadge {
  position: absolute;
  z-index: 6;
  bottom: 6px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  background: rgba(2, 6, 23, 0.72);
  color: #f8fafc;
  box-shadow: 0 7px 18px rgba(2, 6, 23, 0.28);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.transitionTimeBadge {
  left: 6px;
}

.transitionSceneBadge {
  right: 6px;
  color: rgba(var(--accent-rgb), 0.96);
}

.transitionPreset:hover .transitionTimeBadge,
.transitionPreset:hover .transitionSceneBadge,
.transitionPreset.is-active .transitionTimeBadge {
  opacity: 1;
  transform: translateY(0);
}

.transitionPreset i::before,
.transitionPreset i::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.82) 0 5%, transparent 6%),
    linear-gradient(135deg, #2b314f 0%, #cfc7bb 54%, #111827 100%);
  transition: opacity 180ms ease, transform 360ms cubic-bezier(0.2, 0.84, 0.24, 1), filter 360ms ease;
}

.transitionPreset i::after {
  opacity: 0;
  transform: translateX(28%) scale(1.08);
  background:
    radial-gradient(circle at 36% 70%, #fff7ad 0 9%, transparent 10%),
    linear-gradient(135deg, #f9a34a 0%, #ec4899 52%, #161827 100%);
}

.transitionPreset:hover,
.transitionPreset.is-active {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.transitionPreset.is-active {
  color: var(--accent);
}

.transitionPreset:hover i::after {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.transitionPreset[data-transition-preset="pushleft"]:hover i::before,
.transitionPreset[data-transition-preset="zoomswipe"]:hover i::before,
.transitionPreset[data-transition-preset="dynamicsmear"]:hover i::before,
.transitionPreset[data-transition-preset="whip"]:hover i::before {
  transform: translateX(-42%) scale(1.04);
  filter: blur(2px);
}

.transitionPreset[data-transition-preset="rightpan"]:hover i::before {
  transform: translateX(42%) scale(1.04);
  filter: blur(2px);
}

.transitionPreset[data-transition-preset="slideup"]:hover i::before {
  transform: translateY(-36%) scale(1.04);
}

.transitionPreset[data-transition-preset="slidedown"]:hover i::before {
  transform: translateY(36%) scale(1.04);
}

.transitionPreset[data-transition-preset="zoom"],
.transitionPreset[data-transition-preset="delayzoom"],
.transitionPreset[data-transition-preset="zoomsnap"],
.transitionPreset[data-transition-preset="flashzoom"],
.transitionPreset[data-transition-preset="zoomshake"] {
  --transition-preview-overlay: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.34), transparent 38%);
}

.transitionPreset[data-transition-preset="zoom"]:hover i::before,
.transitionPreset[data-transition-preset="delayzoom"]:hover i::before,
.transitionPreset[data-transition-preset="zoomsnap"]:hover i::before,
.transitionPreset[data-transition-preset="flashzoom"]:hover i::before,
.transitionPreset[data-transition-preset="zoomshake"]:hover i::before {
  transform: scale(1.22);
  filter: saturate(1.1);
}

.transitionPreset[data-transition-preset="filmerase"],
.transitionPreset[data-transition-preset="cutoutscan"],
.transitionPreset[data-transition-preset="glitchslice"],
.transitionPreset[data-transition-preset="luma"] {
  --transition-preview-overlay: linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.92) 48%, transparent 54%);
}

.transitionPreset[data-transition-preset="shakeflash"]:hover i::before,
.transitionPreset[data-transition-preset="zoomshake"]:hover i::before {
  animation: transitionThumbShake 460ms linear infinite;
}

.transitionPreset[data-transition-preset="spinbox"]:hover i::after {
  transform: rotate(0deg) scale(1);
}

.transitionPreset[data-transition-preset="spinbox"] i::after {
  transform: rotate(-16deg) scale(0.88);
}

.transitionPreset[data-transition-preset="flash"]:hover i,
.transitionPreset[data-transition-preset="flashzoom"]:hover i,
.transitionPreset[data-transition-preset="shakeflash"]:hover i {
  animation: transitionThumbFlash 620ms ease-in-out infinite;
}

@keyframes transitionThumbShake {
  0%, 100% { transform: translateX(0) scale(1.12); }
  25% { transform: translateX(-5px) scale(1.12); }
  50% { transform: translateX(5px) scale(1.12); }
  75% { transform: translateX(-3px) scale(1.12); }
}

@keyframes transitionThumbFlash {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.45) saturate(1.18); }
}

.transitionPreset i::before {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.28)),
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.78) 0 5%, transparent 6%),
    linear-gradient(135deg, #17243c 0%, #526d91 42%, #d5d1bf 100%);
}

.transitionPreset i::after {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
  background:
    linear-gradient(180deg, rgba(20, 11, 16, 0.04), rgba(20, 11, 16, 0.22)),
    radial-gradient(circle at 34% 68%, #fff4a1 0 10%, rgba(255, 214, 92, 0.2) 10.5% 15%, transparent 16%),
    linear-gradient(135deg, #ffb151 0%, #f05f67 52%, #22243d 100%);
}

.transitionPreset:hover i::before,
.transitionPreset:hover i::after {
  transition: none;
  will-change: transform, opacity, filter, clip-path;
}

.transitionPreset:hover i::before {
  animation: transitionPreviewCrossA 1180ms cubic-bezier(0.2, 0.82, 0.2, 1) infinite;
}

.transitionPreset:hover i::after {
  animation: transitionPreviewCrossB 1180ms cubic-bezier(0.2, 0.82, 0.2, 1) infinite;
}

.transitionPreset[data-transition-preset="pushleft"]:hover i::before,
.transitionPreset[data-transition-preset="zoomswipe"]:hover i::before,
.transitionPreset[data-transition-preset="dynamicsmear"]:hover i::before,
.transitionPreset[data-transition-preset="whip"]:hover i::before,
.transitionPreset[data-transition-preset="cinematicwhip"]:hover i::before,
.transitionPreset[data-transition-preset="bassshockwave"]:hover i::before,
.transitionPreset[data-transition-preset="prismwhip3d"]:hover i::before,
.transitionPreset[data-transition-preset="beatshatter"]:hover i::before,
.transitionPreset[data-transition-preset="velocityeditultra"]:hover i::before,
.transitionPreset[data-transition-preset="cyberpunkwarp"]:hover i::before,
.transitionPreset[data-transition-preset="bassdropimpact"]:hover i::before,
.transitionPreset[data-transition-preset="speedramp"]:hover i::before,
.transitionPreset[data-transition-preset="prismwarp"]:hover i::before,
.transitionPreset[data-transition-preset="neonwarp"]:hover i::before {
  animation-name: transitionPreviewPushA;
}

.transitionPreset[data-transition-preset="pushleft"]:hover i::after,
.transitionPreset[data-transition-preset="zoomswipe"]:hover i::after,
.transitionPreset[data-transition-preset="dynamicsmear"]:hover i::after,
.transitionPreset[data-transition-preset="whip"]:hover i::after,
.transitionPreset[data-transition-preset="cinematicwhip"]:hover i::after,
.transitionPreset[data-transition-preset="bassshockwave"]:hover i::after,
.transitionPreset[data-transition-preset="prismwhip3d"]:hover i::after,
.transitionPreset[data-transition-preset="beatshatter"]:hover i::after,
.transitionPreset[data-transition-preset="velocityeditultra"]:hover i::after,
.transitionPreset[data-transition-preset="cyberpunkwarp"]:hover i::after,
.transitionPreset[data-transition-preset="bassdropimpact"]:hover i::after,
.transitionPreset[data-transition-preset="speedramp"]:hover i::after,
.transitionPreset[data-transition-preset="prismwarp"]:hover i::after,
.transitionPreset[data-transition-preset="neonwarp"]:hover i::after {
  animation-name: transitionPreviewPushB;
}

.transitionPreset[data-transition-preset="rightpan"]:hover i::before {
  animation-name: transitionPreviewRightA;
}

.transitionPreset[data-transition-preset="rightpan"]:hover i::after {
  animation-name: transitionPreviewRightB;
}

.transitionPreset[data-transition-preset="slideup"]:hover i::before {
  animation-name: transitionPreviewUpA;
}

.transitionPreset[data-transition-preset="slideup"]:hover i::after {
  animation-name: transitionPreviewUpB;
}

.transitionPreset[data-transition-preset="slidedown"]:hover i::before {
  animation-name: transitionPreviewDownA;
}

.transitionPreset[data-transition-preset="slidedown"]:hover i::after {
  animation-name: transitionPreviewDownB;
}

.transitionPreset[data-transition-preset="zoom"]:hover i::before,
.transitionPreset[data-transition-preset="delayzoom"]:hover i::before,
.transitionPreset[data-transition-preset="zoomsnap"]:hover i::before,
.transitionPreset[data-transition-preset="flashzoom"]:hover i::before,
.transitionPreset[data-transition-preset="zoomshake"]:hover i::before,
.transitionPreset[data-transition-preset="particledissolve"]:hover i::before,
.transitionPreset[data-transition-preset="cubeflip3d"]:hover i::before,
.transitionPreset[data-transition-preset="burnbloom"]:hover i::before,
.transitionPreset[data-transition-preset="liquidglassluxe"]:hover i::before,
.transitionPreset[data-transition-preset="zoomblur"]:hover i::before {
  animation-name: transitionPreviewZoomA;
}

.transitionPreset[data-transition-preset="zoom"]:hover i::after,
.transitionPreset[data-transition-preset="delayzoom"]:hover i::after,
.transitionPreset[data-transition-preset="zoomsnap"]:hover i::after,
.transitionPreset[data-transition-preset="flashzoom"]:hover i::after,
.transitionPreset[data-transition-preset="zoomshake"]:hover i::after,
.transitionPreset[data-transition-preset="particledissolve"]:hover i::after,
.transitionPreset[data-transition-preset="cubeflip3d"]:hover i::after,
.transitionPreset[data-transition-preset="burnbloom"]:hover i::after,
.transitionPreset[data-transition-preset="liquidglassluxe"]:hover i::after,
.transitionPreset[data-transition-preset="zoomblur"]:hover i::after {
  animation-name: transitionPreviewZoomB;
}

.transitionPreset[data-transition-preset="filmerase"]:hover i::after,
.transitionPreset[data-transition-preset="glitchslice"]:hover i::after,
.transitionPreset[data-transition-preset="luma"]:hover i::after,
.transitionPreset[data-transition-preset="wipeflash"]:hover i::after {
  animation-name: transitionPreviewWipeB;
}

.transitionPreset[data-transition-preset="cutoutscan"]:hover i::after {
  animation-name: transitionPreviewScanB;
}

.transitionPreset[data-transition-preset="spotlight"]:hover i::after,
.transitionPreset[data-transition-preset="clockwipe"]:hover i::after {
  animation-name: transitionPreviewSpotlightB;
}

.transitionPreset[data-transition-preset="spinbox"]:hover i::before,
.transitionPreset[data-transition-preset="spinzoom"]:hover i::before {
  animation-name: transitionPreviewSpinA;
}

.transitionPreset[data-transition-preset="spinbox"]:hover i::after,
.transitionPreset[data-transition-preset="spinzoom"]:hover i::after {
  animation-name: transitionPreviewSpinB;
}

.transitionPreset[data-transition-preset="shakeflash"]:hover i::before,
.transitionPreset[data-transition-preset="zoomshake"]:hover i::before,
.transitionPreset[data-transition-preset="rgbsplit"]:hover i::before,
.transitionPreset[data-transition-preset="datamosh"]:hover i::before {
  animation-name: transitionPreviewShakeA;
}

.transitionPreset[data-transition-preset="shakeflash"]:hover i::after {
  animation-name: transitionPreviewShakeB;
}

.transitionPreset[data-transition-preset="flash"]:hover i::after,
.transitionPreset[data-transition-preset="flashzoom"]:hover i::after,
.transitionPreset[data-transition-preset="lightdistortion"]:hover i::after,
.transitionPreset[data-transition-preset="filmburn"]:hover i::after,
.transitionPreset[data-transition-preset="lightleak"]:hover i::after {
  animation-name: transitionPreviewFlashB;
}

.transitionPreset[data-transition-preset="rgbsplit"]:hover i::after,
.transitionPreset[data-transition-preset="datamosh"]:hover i::after,
.transitionPreset[data-transition-preset="glitchslice"]:hover i::after {
  animation-name: transitionPreviewGlitchB;
}

.transitionPreset[data-transition-preset="splitwipe"]:hover i::after {
  animation-name: transitionPreviewSplitB;
}

.transitionPreset[data-transition-preset="pagecurl"]:hover i::after {
  animation-name: transitionPreviewPageB;
}

@keyframes transitionPreviewCrossA {
  0%, 18% { opacity: 1; transform: scale(1); filter: none; }
  72%, 100% { opacity: 0; transform: scale(1.04); filter: blur(1px); }
}

@keyframes transitionPreviewCrossB {
  0%, 18% { opacity: 0; transform: scale(1.04); filter: blur(1px); }
  72%, 100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes transitionPreviewPushA {
  0%, 18% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
  72%, 100% { opacity: 0.25; transform: translateX(-82%) scale(1.04); filter: blur(2px); }
}

@keyframes transitionPreviewPushB {
  0%, 18% { opacity: 1; transform: translateX(88%) scale(1.04); filter: blur(2px); }
  72%, 100% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
}

@keyframes transitionPreviewRightA {
  0%, 18% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
  72%, 100% { opacity: 0.25; transform: translateX(82%) scale(1.04); filter: blur(2px); }
}

@keyframes transitionPreviewRightB {
  0%, 18% { opacity: 1; transform: translateX(-88%) scale(1.04); filter: blur(2px); }
  72%, 100% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
}

@keyframes transitionPreviewUpA {
  0%, 18% { opacity: 1; transform: translateY(0) scale(1); }
  72%, 100% { opacity: 0.2; transform: translateY(-78%) scale(1.04); }
}

@keyframes transitionPreviewUpB {
  0%, 18% { opacity: 1; transform: translateY(82%) scale(1.04); }
  72%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes transitionPreviewDownA {
  0%, 18% { opacity: 1; transform: translateY(0) scale(1); }
  72%, 100% { opacity: 0.2; transform: translateY(78%) scale(1.04); }
}

@keyframes transitionPreviewDownB {
  0%, 18% { opacity: 1; transform: translateY(-82%) scale(1.04); }
  72%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes transitionPreviewZoomA {
  0%, 18% { opacity: 1; transform: scale(1); filter: none; }
  72%, 100% { opacity: 0; transform: scale(1.34); filter: blur(2px) brightness(1.12); }
}

@keyframes transitionPreviewZoomB {
  0%, 18% { opacity: 0; transform: scale(0.74); filter: blur(2px); }
  72%, 100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes transitionPreviewWipeB {
  0%, 18% { opacity: 1; clip-path: inset(0 100% 0 0); transform: scale(1.02); }
  72%, 100% { opacity: 1; clip-path: inset(0); transform: scale(1); }
}

@keyframes transitionPreviewScanB {
  0%, 18% { opacity: 1; clip-path: polygon(0 0, 18% 0, 0 100%, 0 100%); }
  72%, 100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
}

@keyframes transitionPreviewSpotlightB {
  0%, 18% { opacity: 1; clip-path: circle(0% at 50% 50%); }
  72%, 100% { opacity: 1; clip-path: circle(78% at 50% 50%); }
}

@keyframes transitionPreviewSpinA {
  0%, 18% { opacity: 1; transform: rotate(0deg) scale(1); }
  72%, 100% { opacity: 0; transform: rotate(-18deg) scale(0.62); }
}

@keyframes transitionPreviewSpinB {
  0%, 18% { opacity: 0; transform: rotate(24deg) scale(0.72); }
  72%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes transitionPreviewShakeA {
  0%, 18% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
  34% { transform: translateX(-7px) scale(1.08); filter: brightness(1.35); }
  48% { transform: translateX(6px) scale(1.08); }
  72%, 100% { opacity: 0; transform: translateX(-12px) scale(1.16); filter: blur(2px) brightness(1.35); }
}

@keyframes transitionPreviewShakeB {
  0%, 24% { opacity: 0; transform: translateX(10px) scale(0.94); filter: blur(2px); }
  44% { opacity: 1; transform: translateX(-6px) scale(1.08); filter: brightness(1.38); }
  72%, 100% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
}

@keyframes transitionPreviewFlashB {
  0%, 18% { opacity: 0; transform: scale(1.02); filter: brightness(1.9) saturate(0.8); }
  42% { opacity: 1; filter: brightness(2.35) saturate(0.9); }
  72%, 100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes transitionPreviewGlitchB {
  0%, 18% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(12%) scale(1.04); filter: hue-rotate(120deg) saturate(2); }
  32% { opacity: 0.9; clip-path: inset(0 40% 62% 0); transform: translateX(-6%) scale(1.06); }
  46% { opacity: 1; clip-path: inset(28% 0 34% 0); transform: translateX(5%) scale(1.03); filter: hue-rotate(-90deg) saturate(2.2); }
  72%, 100% { opacity: 1; clip-path: inset(0); transform: translateX(0) scale(1); filter: none; }
}

@keyframes transitionPreviewSplitB {
  0%, 18% { opacity: 1; clip-path: inset(0 50% 0 50%); transform: scale(1.04); }
  72%, 100% { opacity: 1; clip-path: inset(0); transform: scale(1); }
}

@keyframes transitionPreviewPageB {
  0%, 18% { opacity: 1; clip-path: polygon(0 0, 0 0, 0 0); transform: scale(1.03); }
  72%, 100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 0 100%); transform: scale(1); }
}

.transitionPreset strong {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
}

.transitionPreset span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8b98aa;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}

.transitionDurationControl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
}

.transitionDurationControl input {
  width: 100%;
  accent-color: var(--accent);
}

.transitionDurationControl span {
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
}

.transitionActionRow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.transitionApplyButton {
  height: 38px;
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08)),
    rgba(255, 255, 255, 0.84);
  color: var(--accent-contrast);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.transitionApplyButton:hover {
  border-color: rgba(var(--accent-rgb), 0.48);
  background: rgba(var(--accent-rgb), 0.2);
}

.transitionApplyButton:disabled {
  cursor: default;
  opacity: 0.48;
}

.transitionApplyButton.is-muted {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
}

.toggleRow {
  height: 52px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #334155;
  font-weight: 780;
}

.settingGroup {
  display: grid;
  gap: 10px;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 2px;
}

.settingTitle {
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.themeSegment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #e9eef5;
}

.themeSegment button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #52647f;
  font-size: 12px;
  font-weight: 900;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.themeSegment button:hover {
  color: #111827;
}

.themeSegment button.is-active {
  background: #ffffff;
  color: var(--accent-dark);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1), inset 0 -2px 0 rgba(var(--accent-rgb), 0.32);
}

.accentSwatchGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.accentSwatchGrid button {
  position: relative;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.78), transparent 24%),
    linear-gradient(135deg, var(--swatch), color-mix(in srgb, var(--swatch) 62%, #0f172a));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 16px rgba(15, 23, 42, 0.08);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.accentSwatchGrid button:hover,
.accentSwatchGrid button:focus-visible {
  border-color: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 2px color-mix(in srgb, var(--swatch) 42%, transparent),
    0 10px 20px color-mix(in srgb, var(--swatch) 24%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.accentSwatchGrid button.is-active {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(15, 23, 42, 0.28),
    0 0 0 2px color-mix(in srgb, var(--swatch) 68%, transparent),
    0 12px 22px color-mix(in srgb, var(--swatch) 26%, transparent);
}

.accentSwatchGrid button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 7px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: translate(-50%, -62%) rotate(-45deg);
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.45));
}

.editorApp[data-theme="dark"] .rail,
.editorApp[data-theme="night"] .rail {
  border-right-color: var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
}

.editorApp[data-theme="dark"] .railButton,
.editorApp[data-theme="night"] .railButton {
  color: #a8b4c7;
}

.editorApp[data-theme="dark"] .railIcon,
.editorApp[data-theme="night"] .railIcon {
  background: rgba(226, 232, 240, 0.09);
  color: #a8b4c7;
}

.editorApp[data-theme="dark"] .panelPane:not([data-tab-panel="media"]),
.editorApp[data-theme="night"] .panelPane:not([data-tab-panel="media"]) {
  background: var(--panel);
  color: var(--text);
}

.editorApp[data-theme="dark"] .panelPane[data-tab-panel="projects"],
.editorApp[data-theme="night"] .panelPane[data-tab-panel="projects"] {
  background: #0a0c0d;
  color: #dbe4f0;
}

.editorApp[data-theme="dark"] .projectsTitleRow h1,
.editorApp[data-theme="night"] .projectsTitleRow h1 {
  color: #f8fafc;
}

.editorApp[data-theme="dark"] h1,
.editorApp[data-theme="dark"] .toggleRow,
.editorApp[data-theme="dark"] .settingTitle,
.editorApp[data-theme="dark"] .controlRow,
.editorApp[data-theme="night"] h1,
.editorApp[data-theme="night"] .toggleRow,
.editorApp[data-theme="night"] .settingTitle,
.editorApp[data-theme="night"] .controlRow {
  color: var(--text);
}

.editorApp[data-theme="dark"] .themeSegment,
.editorApp[data-theme="night"] .themeSegment {
  border-color: var(--line);
  background: rgba(226, 232, 240, 0.08);
}

.editorApp[data-theme="dark"] .themeSegment button,
.editorApp[data-theme="night"] .themeSegment button {
  color: #a8b4c7;
}

.editorApp[data-theme="dark"] .themeSegment button.is-active,
.editorApp[data-theme="night"] .themeSegment button.is-active {
  background: rgba(var(--accent-rgb), 0.16);
  color: #e9fff7;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.24);
}

.editorApp[data-theme="dark"] .transitionTargetBox,
.editorApp[data-theme="night"] .transitionTargetBox,
.editorApp[data-theme="dark"] .transitionPreset,
.editorApp[data-theme="night"] .transitionPreset,
.editorApp[data-theme="dark"] .transitionApplyButton,
.editorApp[data-theme="night"] .transitionApplyButton {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(226, 232, 240, 0.04)),
    rgba(15, 23, 42, 0.42);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.editorApp[data-theme="dark"] .transitionTargetBox span,
.editorApp[data-theme="night"] .transitionTargetBox span,
.editorApp[data-theme="dark"] .transitionPreset span,
.editorApp[data-theme="night"] .transitionPreset span {
  color: #94a3b8;
}

.editorApp[data-theme="dark"] .transitionPreset.is-active,
.editorApp[data-theme="night"] .transitionPreset.is-active {
  border-color: rgba(var(--accent-rgb), 0.48);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(15, 23, 42, 0.32)),
    rgba(15, 23, 42, 0.62);
}

.editorApp[data-theme="dark"] .transitionApplyButton.is-muted,
.editorApp[data-theme="night"] .transitionApplyButton.is-muted {
  color: #a8b4c7;
  background: rgba(15, 23, 42, 0.32);
}

.editorApp[data-theme="dark"] .workspace,
.editorApp[data-theme="night"] .workspace,
.editorApp[data-theme="dark"] .timelineDock,
.editorApp[data-theme="night"] .timelineDock {
  background: var(--bg);
}

.editorApp[data-theme="dark"] .topBar,
.editorApp[data-theme="night"] .topBar,
.editorApp[data-theme="dark"] .editToolbar,
.editorApp[data-theme="night"] .editToolbar {
  border-color: var(--line-soft);
  background: var(--panel);
}

.editorApp[data-theme="dark"] .titleInput,
.editorApp[data-theme="night"] .titleInput,
.editorApp[data-theme="dark"] .toolButton,
.editorApp[data-theme="night"] .toolButton,
.editorApp[data-theme="dark"] .timelineAdd,
.editorApp[data-theme="night"] .timelineAdd {
  color: #cbd5e1;
}

.editorApp[data-theme="dark"] .timelineTools,
.editorApp[data-theme="night"] .timelineTools,
.editorApp[data-theme="dark"] .spectrumLiveToggle,
.editorApp[data-theme="night"] .spectrumLiveToggle,
.editorApp[data-theme="dark"] .controlRow select,
.editorApp[data-theme="dark"] .controlRow input[type="number"],
.editorApp[data-theme="dark"] .secondaryWide,
.editorApp[data-theme="night"] .controlRow select,
.editorApp[data-theme="night"] .controlRow input[type="number"],
.editorApp[data-theme="night"] .secondaryWide {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.editorApp[data-theme="dark"] .audioInspectorSummary,
.editorApp[data-theme="night"] .audioInspectorSummary {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--panel-2), rgba(15, 23, 42, 0.28));
}

.editorApp[data-theme="dark"] .audioInspectorSummary strong,
.editorApp[data-theme="night"] .audioInspectorSummary strong {
  color: var(--text);
}

.editorApp[data-theme="dark"] .audioInspectorSummary span,
.editorApp[data-theme="dark"] .audioInspectorSummary em,
.editorApp[data-theme="night"] .audioInspectorSummary span,
.editorApp[data-theme="night"] .audioInspectorSummary em,
.editorApp[data-theme="dark"] .controlRow output,
.editorApp[data-theme="night"] .controlRow output {
  color: var(--muted);
}

.editorApp[data-theme="dark"] .assetDetailsPane,
.editorApp[data-theme="night"] .assetDetailsPane {
  color: var(--text);
}

.editorApp[data-theme="dark"] .assetDetailsTitle,
.editorApp[data-theme="night"] .assetDetailsTitle {
  border-bottom-color: var(--line-soft);
  color: var(--accent);
}

.editorApp[data-theme="dark"] .assetDetailsPreview,
.editorApp[data-theme="night"] .assetDetailsPreview {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--panel-2), rgba(15, 23, 42, 0.28));
}

.editorApp[data-theme="dark"] .assetDetailsPreview strong,
.editorApp[data-theme="dark"] .assetDetailsRow strong,
.editorApp[data-theme="night"] .assetDetailsPreview strong,
.editorApp[data-theme="night"] .assetDetailsRow strong {
  color: var(--text);
}

.editorApp[data-theme="dark"] .assetDetailsPreview span,
.editorApp[data-theme="dark"] .assetDetailsRow span,
.editorApp[data-theme="night"] .assetDetailsPreview span,
.editorApp[data-theme="night"] .assetDetailsRow span {
  color: var(--muted);
}

.editorApp[data-theme="dark"] .assetDetailsRow,
.editorApp[data-theme="night"] .assetDetailsRow {
  border-top-color: var(--line-soft);
}

.editorApp[data-theme="dark"] .spectrumLiveToggle,
.editorApp[data-theme="night"] .spectrumLiveToggle {
  border-color: rgba(var(--accent-rgb), 0.48);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), 0 0 18px rgba(var(--accent-rgb), 0.08);
}

.editorApp[data-theme="dark"] .spectrumLiveToggle.is-off,
.editorApp[data-theme="night"] .spectrumLiveToggle.is-off {
  border-color: rgba(148, 163, 184, 0.22);
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.editorApp[data-theme="dark"] .panelToggle,
.editorApp[data-theme="night"] .panelToggle {
  border-color: rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.82)),
    var(--panel-2);
  color: #a8b4c7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.22);
}

.editorApp[data-theme="dark"] .panelToggle:hover,
.editorApp[data-theme="dark"] .panelToggle:focus-visible,
.editorApp[data-theme="night"] .panelToggle:hover,
.editorApp[data-theme="night"] .panelToggle:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.46);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.editorApp[data-theme="dark"] .cutToolGroup,
.editorApp[data-theme="night"] .cutToolGroup {
  border-color: rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.74)),
    var(--panel-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.16);
}

.editorApp[data-theme="dark"] .cutToolGroup .toolButton:hover,
.editorApp[data-theme="night"] .cutToolGroup .toolButton:hover {
  border-color: rgba(var(--accent-rgb), 0.26);
  background: rgba(var(--accent-rgb), 0.13);
  color: var(--accent);
}

.editorApp[data-theme="dark"] .cutToolGroup [data-editor-action="delete-left"]:hover,
.editorApp[data-theme="dark"] .cutToolGroup [data-editor-action="delete-right"]:hover,
.editorApp[data-theme="night"] .cutToolGroup [data-editor-action="delete-left"]:hover,
.editorApp[data-theme="night"] .cutToolGroup [data-editor-action="delete-right"]:hover {
  border-color: rgba(251, 113, 133, 0.28);
  background: rgba(244, 63, 94, 0.12);
  color: #fb7185;
}

.editorApp[data-theme="dark"] .timelineResizeHandle,
.editorApp[data-theme="night"] .timelineResizeHandle,
.editorApp[data-theme="dark"] .timelineCanvas,
.editorApp[data-theme="night"] .timelineCanvas {
  background: var(--panel-2);
}

.editorApp[data-theme="dark"] .timelineRuler,
.editorApp[data-theme="night"] .timelineRuler {
  border-color: rgba(148, 163, 184, 0.16);
  --timeline-ruler-surface-top: rgba(15, 23, 42, 0.36);
  --timeline-ruler-surface-bottom: rgba(15, 23, 42, 0.36);
  --timeline-ruler-major-alpha: 0.32;
  background-color: transparent;
}

.editorApp[data-theme="dark"] .timelineRuler:hover,
.editorApp[data-theme="night"] .timelineRuler:hover {
  --timeline-ruler-surface-top: rgba(15, 23, 42, 0.44);
  --timeline-ruler-surface-bottom: rgba(15, 23, 42, 0.44);
  --timeline-ruler-major-alpha: 0.42;
}

.editorApp[data-theme="dark"] .timelineCanvas::before,
.editorApp[data-theme="night"] .timelineCanvas::before {
  border-right-color: var(--line);
  border-bottom-color: var(--line-soft);
  background: var(--panel);
}

.editorApp[data-theme="dark"] .timelineDropZone,
.editorApp[data-theme="night"] .timelineDropZone {
  background: var(--bg);
  scrollbar-color: #64748b #1e293b;
}

.editorApp[data-theme="dark"] .timelineTick span,
.editorApp[data-theme="night"] .timelineTick span {
  color: rgba(226, 232, 240, 0.82);
  text-shadow: none;
}

.editorApp[data-theme="dark"] .timelineRuler:hover .timelineTick span,
.editorApp[data-theme="night"] .timelineRuler:hover .timelineTick span {
  color: #d3deec;
}

.editorApp[data-theme="dark"] .timelineHScroll,
.editorApp[data-theme="night"] .timelineHScroll {
  border-top-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, #222b37, #181f29);
}

.editorApp[data-theme="dark"] .timelineHScroll::before,
.editorApp[data-theme="night"] .timelineHScroll::before {
  background: rgba(148, 163, 184, 0.16);
}

.editorApp[data-theme="dark"] .timelineHScrollThumb,
.editorApp[data-theme="night"] .timelineHScrollThumb {
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(180deg, #8da0b8, #61758c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(2, 6, 23, 0.32);
}

.editorApp[data-theme="dark"] .timelineHScroll:hover .timelineHScrollThumb,
.editorApp[data-theme="dark"] .is-dragging-timeline-scroll .timelineHScrollThumb,
.editorApp[data-theme="night"] .timelineHScroll:hover .timelineHScrollThumb,
.editorApp[data-theme="night"] .is-dragging-timeline-scroll .timelineHScrollThumb {
  background: linear-gradient(180deg, #9eb0c7, #74879d);
}

.editorApp[data-theme="dark"] .timelineTrack,
.editorApp[data-theme="night"] .timelineTrack {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 34%, #020617);
  background:
    linear-gradient(
      90deg,
      rgba(13, 21, 33, 0.96) 0,
      rgba(13, 21, 33, 0.96) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 10%, #020617) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 6%, #020617) 52%,
      color-mix(in srgb, var(--track-accent, #38bdf8) 4%, #020617) 100%
    ),
    #020617;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 60%, #020617);
}

.editorApp[data-theme="dark"] .timelineTrack:hover,
.editorApp[data-theme="night"] .timelineTrack:hover {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 48%, #020617);
  background:
    linear-gradient(
      90deg,
      rgba(18, 28, 43, 0.98) 0,
      rgba(18, 28, 43, 0.98) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 15%, #020617) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 9%, #020617) 52%,
      color-mix(in srgb, var(--track-accent, #38bdf8) 6%, #020617) 100%
    ),
    #020617;
}

.editorApp[data-theme="dark"] .timelineTrackLabel,
.editorApp[data-theme="dark"] .timelineTrack::before,
.editorApp[data-theme="night"] .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack::before {
  border-right-color: var(--track-accent-soft, var(--line));
  background:
    linear-gradient(90deg, var(--track-accent-label, rgba(56, 189, 248, 0.18)), rgba(27, 38, 53, 0.92)),
    linear-gradient(180deg, #202b3b, #182231);
  color: var(--track-accent, #a8d8ff);
}

.editorApp[data-theme="dark"] .timelineTrack.is-track-selected,
.editorApp[data-theme="night"] .timelineTrack.is-track-selected {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 52%, #020617);
  background:
    linear-gradient(
      90deg,
      rgba(16, 25, 39, 0.98) 0,
      rgba(16, 25, 39, 0.98) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 13%, #020617) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 8%, #020617) 52%,
      color-mix(in srgb, var(--track-accent, #38bdf8) 5%, #020617) 100%
    ),
    #020617;
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 82%, #020617),
    inset 0 1px 0 color-mix(in srgb, var(--track-accent, #38bdf8) 24%, #020617),
    inset 0 -1px 0 color-mix(in srgb, var(--track-accent, #38bdf8) 24%, #020617),
    0 0 0 1px rgba(255, 255, 255, 0.025);
}

.editorApp[data-theme="dark"] .inspectorPanel,
.editorApp[data-theme="night"] .inspectorPanel {
  border-left-color: var(--line);
  background: var(--panel);
  color: var(--text);
}

.editorApp[data-theme="dark"] .inspectorTabs,
.editorApp[data-theme="night"] .inspectorTabs,
.editorApp[data-theme="dark"] .inspectorTab,
.editorApp[data-theme="night"] .inspectorTab {
  border-color: var(--line-soft);
  background: var(--panel);
  color: #a8b4c7;
}

.editorApp[data-theme="dark"] .inspectorTab.is-active,
.editorApp[data-theme="night"] .inspectorTab.is-active {
  background: var(--panel-2);
  color: var(--accent);
}

.editorApp[data-theme="dark"] .topIconButton,
.editorApp[data-theme="night"] .topIconButton,
.editorApp[data-theme="dark"] .miniControl,
.editorApp[data-theme="night"] .miniControl,
.editorApp[data-theme="dark"] .controlPill,
.editorApp[data-theme="night"] .controlPill {
  border-color: var(--line);
  background: var(--panel-2);
  color: #cbd5e1;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .previewFrame,
.editorApp[data-theme="night"] .previewFrame {
  border-color: rgba(226, 232, 240, 0.14);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

.editorApp.is-spectrum-off .previewFrame {
  background: #000000;
  border-color: rgba(148, 163, 184, 0.22);
}

.workspace {
  grid-area: workspace;
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: var(--bg);
  padding-right: var(--inspector-panel-width);
}

.topBar {
  grid-area: topbar;
  position: relative;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(242, 246, 252, 0.68)),
    rgba(248, 250, 252, 0.78);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.titleInput {
  min-width: 180px;
  max-width: min(34vw, 360px);
  border: 0;
  background: transparent;
  color: #273449;
  outline: none;
  font-size: 15px;
  font-weight: 750;
  text-overflow: ellipsis;
}

.topActions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.58)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px);
}

.planStatusPill {
  height: 34px;
  min-width: 132px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.76);
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.planStatusPill[data-mode^="pro"] {
  border-color: rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.13);
  color: var(--accent-dark);
}

.planDot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #94a3b8;
}

.planStatusPill[data-mode^="pro"] .planDot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);
}

.topTextButton {
  height: 38px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(241, 245, 249, 0.72)),
    rgba(255, 255, 255, 0.72);
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.topTextButton:hover,
.topTextButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent-dark);
  box-shadow:
    0 12px 24px rgba(var(--accent-rgb), 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transform: translateY(-1px);
  outline: none;
}

.topTextButton-primary {
  border-color: rgba(var(--accent-rgb), 0.28);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(37, 99, 235, 0.9)),
    var(--accent);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(2, 6, 23, 0.22);
  box-shadow:
    0 12px 28px rgba(16, 185, 129, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.topTextButton-primary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(135deg, #fef08a, #ffffff 48%, #7dd3fc);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
  transform: rotate(45deg);
}

.topTextButton-primary:hover,
.topTextButton-primary:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(5, 150, 105, 0.98), rgba(59, 130, 246, 0.98)),
    var(--accent);
  color: #ffffff;
  box-shadow:
    0 16px 34px rgba(37, 99, 235, 0.26),
    0 6px 18px rgba(16, 185, 129, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.topTextButton[hidden] {
  display: none;
}

.topIconButton {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(79, 111, 229, 0.18);
  border-radius: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.72)),
    rgba(255, 255, 255, 0.72);
  color: #42506a;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.topIconButton:hover,
.topIconButton:focus-visible {
  border-color: rgba(79, 111, 229, 0.32);
  background: #ffffff;
  color: #3155d4;
  box-shadow: 0 14px 30px rgba(49, 85, 212, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.topIconButton[data-active="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, #4f6fe5, #24b083);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.2);
}

.topIconButton .uiIcon {
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
}

.resolutionWrap {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resolutionSelect {
  height: 30px;
  min-width: 88px;
  border: 0;
  border-radius: 999px;
  padding: 0 26px 0 12px;
  background: #111827;
  color: #ffffff;
  outline: none;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.cloudIcon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(241, 245, 249, 0.66)),
    rgba(255, 255, 255, 0.7);
  color: #64748b;
  position: relative;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.cloudIcon::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}

.cloudIcon .uiIcon {
  width: 20px;
  height: 20px;
  stroke-width: 2.15;
}

.exportButton {
  min-width: 180px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 22px 0 18px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(135deg, #ff7a66 0%, #ff9b86 44%, #ffd1a3 100%),
    #ff927f;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(117, 38, 26, 0.28);
  box-shadow:
    0 16px 34px rgba(255, 122, 102, 0.28),
    0 5px 14px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition:
    transform 160ms ease,
    filter 160ms ease,
    box-shadow 160ms ease;
}

.exportButton::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.exportButton::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  transform: translate(-35%, -50%);
}

.exportButton span {
  position: relative;
  z-index: 1;
}

.exportButton .chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.9;
  transform: translateY(-2px) rotate(45deg);
}

.exportButton:hover,
.exportButton:focus-visible {
  filter: saturate(1.05) brightness(1.02);
  box-shadow:
    0 18px 40px rgba(255, 122, 102, 0.34),
    0 8px 22px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  transform: translateY(-1px);
  outline: none;
}

.exportButton:disabled {
  cursor: progress;
  filter: grayscale(0.1) saturate(0.78);
  opacity: 0.82;
  transform: none;
}

.editorApp[data-theme="dark"] .topActions,
.editorApp[data-theme="night"] .topActions {
  border-color: rgba(226, 232, 240, 0.1);
  background:
    linear-gradient(180deg, rgba(30, 39, 52, 0.92), rgba(14, 19, 29, 0.78)),
    rgba(15, 23, 42, 0.62);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.editorApp[data-theme="dark"] .topTextButton,
.editorApp[data-theme="night"] .topTextButton,
.editorApp[data-theme="dark"] .topIconButton,
.editorApp[data-theme="night"] .topIconButton,
.editorApp[data-theme="dark"] .cloudIcon,
.editorApp[data-theme="night"] .cloudIcon {
  border-color: rgba(226, 232, 240, 0.12);
  background:
    linear-gradient(180deg, rgba(37, 47, 62, 0.94), rgba(22, 29, 41, 0.86)),
    rgba(30, 41, 59, 0.72);
  color: #d8e2f0;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.editorApp[data-theme="dark"] .topTextButton-primary,
.editorApp[data-theme="night"] .topTextButton-primary {
  border-color: rgba(var(--accent-rgb), 0.34);
  background:
    linear-gradient(135deg, rgba(14, 165, 141, 0.96), rgba(59, 130, 246, 0.94)),
    var(--accent);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(14, 165, 141, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.editorApp[data-theme="dark"] .exportButton,
.editorApp[data-theme="night"] .exportButton {
  background:
    linear-gradient(135deg, #ff6f61 0%, #ff9b86 42%, #ffc482 100%),
    #ff927f;
  box-shadow:
    0 17px 36px rgba(255, 111, 97, 0.28),
    0 7px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.stageWrap {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 48px;
  place-items: center;
  padding: 18px 36px 10px;
  min-width: 0;
  min-height: 0;
  background: transparent;
}

.previewFrame {
  width: min(100%, 1120px, calc((100vh - var(--timeline-height) - 132px) * var(--project-aspect-ratio)));
  max-width: 100%;
  max-height: calc(100vh - var(--timeline-height) - 132px);
  aspect-ratio: var(--project-aspect-w) / var(--project-aspect-h);
  position: relative;
  justify-self: center;
  overflow: hidden;
  border-radius: 12px;
  background: #050505;
  border: 1px solid rgba(15, 23, 42, 0.26);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
  contain: layout paint;
}

.previewFrame.is-spectrum-backgroundless {
  background: transparent !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

.previewFrame.is-spectrum-backgroundless::before {
  content: none !important;
}

#spectrumCanvas {
  background: transparent !important;
}

.editorApp:fullscreen .previewFrame,
.editorApp.is-editor-fullscreen .previewFrame,
.editorApp.is-editor-fullscreen-fallback .previewFrame {
  width: min(100%, 1320px, calc((100vh - var(--timeline-height) - 132px) * var(--project-aspect-ratio)));
  max-width: 100%;
  max-height: calc(100vh - var(--timeline-height) - 132px);
}

.stageWrap:fullscreen {
  grid-template-rows: minmax(0, 1fr) 58px;
  place-items: center;
  width: 100vw;
  height: 100vh;
  padding: 22px 26px 12px;
  background: #171d27;
}

.stageWrap:fullscreen .previewFrame {
  width: min(calc(100vw - 52px), calc((100vh - 98px) * var(--project-aspect-ratio)));
  max-width: calc(100vw - 52px);
  max-height: calc(100vh - 98px);
  box-shadow:
    0 0 0 1px rgba(226, 232, 240, 0.16),
    0 26px 58px rgba(0, 0, 0, 0.34);
}

.stageWrap:fullscreen .playerControls {
  align-self: start;
}

#spectrumCanvas,
.emptyPreview {
  position: absolute;
  inset: 0;
}

#previewVideo,
#standbyPreviewVideo,
#nativePreviewCanvas,
#scrubPreviewCanvas,
#previewFallbackImage,
#previewImage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
  background: #000000;
  user-select: none;
  transform-origin: 50% 50%;
  transform: translateZ(0);
  transition: transform 160ms cubic-bezier(0.2, 0.78, 0.28, 1);
}

#standbyPreviewVideo {
  pointer-events: none;
}

#nativePreviewCanvas {
  pointer-events: none;
  z-index: 0;
}

#scrubPreviewCanvas {
  pointer-events: none;
  z-index: 2;
}

#previewFallbackImage {
  z-index: 1;
  pointer-events: none;
}

#previewVideo,
#standbyPreviewVideo {
  z-index: 0;
}

.proPreviewGate {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 18px;
  width: min(420px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 12px 14px;
  border: 1px solid rgba(226, 232, 240, 0.22);
  border-radius: 10px;
  background: rgba(8, 13, 22, 0.76);
  color: #f8fafc;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}

.proPreviewGate[hidden] {
  display: none !important;
}

.proPreviewGate strong {
  display: block;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
}

.proPreviewGate span {
  display: block;
  margin-top: 4px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.proPreviewGateActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.proPreviewGateActions button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  background: rgba(248, 250, 252, 0.94);
  color: #0f172a;
  font-size: 11px;
  font-weight: 680;
}

.proPreviewGateActions button + button {
  background: rgba(15, 23, 42, 0.86);
  color: #e2e8f0;
}

.previewFrame.is-native-previewing #previewVideo,
.previewFrame.is-native-previewing #standbyPreviewVideo {
  opacity: 0 !important;
  visibility: hidden;
}

#spectrumCanvas {
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  opacity: 1;
  z-index: 12;
  mix-blend-mode: normal;
  transform: translateZ(0);
  will-change: contents, opacity;
}

.editorApp.is-spectrum-off #spectrumCanvas {
  opacity: 0;
}
.editorApp.is-spectrum-off.is-transition-demo-previewing #spectrumCanvas {
  opacity: 1;
}

.textOverlay {
  position: absolute;
  left: 20%;
  top: 38%;
  width: 60%;
  height: 20%;
  display: none;
  place-items: center;
  padding: 2%;
  text-align: center;
  color: #ffffff;
  font-size: clamp(34px, 5vw, 74px);
  font-weight: 950;
  line-height: 0.98;
  text-shadow: 0 4px 0 rgba(15, 23, 42, 0.82), 0 18px 28px rgba(0, 0, 0, 0.34);
  cursor: move;
  user-select: none;
}

.textOverlay[data-style="glass"] {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 30px rgba(34, 197, 94, 0.22);
}

.textOverlay[data-style="chrome"] {
  color: #eef2ff;
  text-shadow: 0 2px 0 #94a3b8, 0 5px 0 #334155, 0 18px 28px rgba(0, 0, 0, 0.36);
}

.emptyPreview {
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(52, 211, 153, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.03), transparent 42%);
}

.previewFrame.is-drop-target {
  outline: 2px solid rgba(var(--accent-rgb), 0.72);
  outline-offset: 4px;
}

.stageLayerBox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.72), 0 0 0 9999px rgba(15, 23, 42, 0.01);
  display: none;
  pointer-events: auto;
  cursor: move;
  z-index: 6;
}

.stageLayerBox.is-visible {
  display: block;
}

.stageLayerBox.is-crop-active {
  border-color: rgba(255, 255, 255, 0.94);
  border-style: dashed;
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.18) 1px, transparent 1px) 0 0 / 33.333% 100%,
    linear-gradient(0deg, rgba(245, 158, 11, 0.18) 1px, transparent 1px) 0 0 / 100% 33.333%;
  box-shadow:
    0 0 0 1px rgba(17, 24, 39, 0.52),
    0 0 0 9999px rgba(0, 0, 0, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.18);
}

.stageLayerBox.is-crop-active::before {
  content: "Free crop";
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(3, 7, 18, 0.74);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

.stageHandle {
  width: 13px;
  height: 13px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.28);
  position: absolute;
}

.stageLayerBox.is-crop-active .stageHandle {
  width: 14px;
  height: 14px;
  border-width: 2px;
  background: #0ea5e9;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.54),
    0 0 0 5px rgba(14, 165, 233, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.28);
}

#mediaLayerBox:not(.is-crop-active) .stageHandle-n,
#mediaLayerBox:not(.is-crop-active) .stageHandle-e,
#mediaLayerBox:not(.is-crop-active) .stageHandle-s,
#mediaLayerBox:not(.is-crop-active) .stageHandle-w {
  display: none;
}

.stageHandle-nw {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}

.stageHandle-ne {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}

.stageHandle-sw {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}

.stageHandle-se {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.stageHandle-n,
.stageHandle-s {
  left: 50%;
  width: 38px;
  height: 7px;
  border-radius: 999px;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.stageHandle-n {
  top: -4px;
}

.stageHandle-s {
  bottom: -4px;
}

.stageHandle-e,
.stageHandle-w {
  top: 50%;
  width: 7px;
  height: 38px;
  border-radius: 999px;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.stageHandle-e {
  right: -4px;
}

.stageHandle-w {
  left: -4px;
}

.playerControls {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
}

.miniControl,
.controlPill {
  height: 34px;
  border: 1px solid rgba(15, 23, 42, 0.13);
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 0;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.miniControl {
  width: 36px;
  position: relative;
}

.miniControl::before {
  font-size: 11px;
  line-height: 1;
}

#jumpBackButton::before {
  content: "|<";
}

#stepBackButton::before {
  content: "<";
}

.ratioControlWrap {
  position: relative;
  z-index: 22;
}

.ratioMenuButton {
  height: 34px;
  min-width: 176px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: #162235;
  color: #eaf2ff;
  box-shadow:
    0 8px 18px rgba(2, 6, 23, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 11px;
  line-height: 1;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.ratioMenuButton:hover,
.ratioMenuButton:focus-visible,
.ratioControlWrap.is-open .ratioMenuButton {
  background: #1a2a40;
  border-color: rgba(56, 189, 248, 0.42);
  outline: none;
  transform: translateY(-1px);
}

.ratioMenuIcon {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(56, 189, 248, 0.34);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  flex: 0 0 auto;
}

.ratioMenuIcon::before {
  content: "";
  width: 9px;
  height: 6px;
  border: 1.5px solid #5eead4;
  border-radius: 2px;
}

.ratioMenuEyebrow {
  color: #dbeafe;
  font-size: 11px;
  font-weight: 500;
}

.ratioMenuButton strong {
  min-width: 0;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ratioMenuChevron {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid rgba(226, 232, 240, 0.9);
  border-bottom: 1.5px solid rgba(226, 232, 240, 0.9);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 130ms ease;
}

.ratioControlWrap.is-open .ratioMenuChevron {
  transform: translateY(1px) rotate(225deg);
}

.ratioMenu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 292px;
  max-height: min(392px, calc(100vh - 170px));
  padding: 7px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(11, 18, 30, 0.985)),
    #0f1724;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}.ratioMenu::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.ratioControlWrap.is-drop-down .ratioMenu {
  top: calc(100% + 9px);
  bottom: auto;
}

.ratioMenu[hidden] {
  display: none !important;
}

.ratioMenuItem {
  width: 100%;
  min-height: 47px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #dbeafe;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 120ms ease;
}

.ratioMenuItem:hover,
.ratioMenuItem:focus-visible {
  background: rgba(148, 163, 184, 0.085);
  border-color: rgba(148, 163, 184, 0.14);
  outline: none;
}

.ratioMenuItem:active {
  transform: scale(0.992);
}

.ratioMenuItem.is-active {
  background: rgba(226, 232, 240, 0.075);
  border-color: rgba(226, 232, 240, 0.16);
}

.ratioMenuItem.is-active:hover,
.ratioMenuItem.is-active:focus-visible {
  background: rgba(226, 232, 240, 0.105);
  border-color: rgba(226, 232, 240, 0.2);
}

.ratioMenuItemIcon {
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.12);
  overflow: hidden;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.ratioMenuItemLogo {
  width: 17px;
  height: 17px;
  display: block;
  object-fit: contain;
  filter: saturate(0.94) brightness(0.96);
}

.ratioMenuItem:hover .ratioMenuItemIcon,
.ratioMenuItem:focus-visible .ratioMenuItemIcon {
  background: rgba(30, 41, 59, 0.72);
  border-color: rgba(203, 213, 225, 0.18);
  transform: translateY(-1px);
}

.ratioMenuItem.is-active .ratioMenuItemIcon {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(226, 232, 240, 0.22);
}

.ratioMenuItem.is-active .ratioMenuItemLogo {
  filter: saturate(1.06) brightness(1.04);
}

.ratioMenuItemText {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ratioMenuItemText strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ratioMenuItemText em {
  color: #9aa8bb;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 520;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.ratioMenuItemCheck {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  opacity: 0;
  background: #dbeafe;
  box-shadow: none;
}

.ratioMenuItem.is-active .ratioMenuItemCheck {
  opacity: 1;
  background: #dbeafe;
  box-shadow: none;
}

#playerPlayButton::before {
  content: "P";
}

#playerPlayButton.is-playing::before {
  content: "II";
}

#playerPlayButton.is-preparing {
  animation: previewPreparePulse 920ms ease-in-out infinite;
}

#stopButton::before {
  content: "S";
}

#snapshotButton::before {
  content: "C";
}

#muteButton::before {
  content: "V";
}

#muteButton.is-muted::before {
  content: "M";
}

#fullscreenButton::before {
  content: "F";
}

.controlPill {
  min-width: 112px;
  padding: 0 15px;
  font-size: 12px;
}

.inspectorPanel {
  position: absolute;
  top: var(--topbar-height);
  right: 0;
  bottom: var(--timeline-height);
  width: var(--inspector-panel-width);
  z-index: 80;
  min-width: 0;
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-rows: 50px 1fr;
  overflow: hidden;
  box-shadow: -16px 0 38px rgba(0, 0, 0, 0.12);
  transition: opacity 80ms ease, transform 90ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 80ms ease;
}

.editorApp.is-media-details-mode .inspectorPanel {
  grid-template-rows: minmax(0, 1fr);
}

.editorApp.is-right-panel-collapsed .inspectorPanel {
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  border-left-color: transparent;
}

.inspectorTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-soft);
}

.editorApp.is-media-details-mode .inspectorTabs,
.editorApp.is-media-details-mode .inspectorPane {
  display: none !important;
}

.assetDetailsPane {
  min-height: 0;
  overflow: auto;
  display: none;
  color: #334155;
}

.assetDetailsPane:not([hidden]) {
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr);
}

.assetDetailsTitle {
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 950;
}

.assetDetailsContent {
  min-height: 0;
  overflow: auto;
  padding: 12px 12px 30px;
  scrollbar-color: rgba(148, 163, 184, 0.56) rgba(15, 23, 42, 0.22);
  scrollbar-width: thin;
}

.assetDetailsContent::-webkit-scrollbar {
  width: 9px;
}

.assetDetailsContent::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.2);
}

.assetDetailsContent::-webkit-scrollbar-thumb {
  border: 2px solid rgba(15, 23, 42, 0.2);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.62);
}

.assetDetailsPreview {
  min-height: 92px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.72));
}

.assetDetailsPreview .assetThumb,
.assetDetailsPreview img {
  width: 104px;
  height: 62px;
  border-radius: 10px;
  object-fit: cover;
}

.assetDetailsHeaderText {
  min-width: 0;
}

.assetDetailsPreview strong,
.assetDetailsPreview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assetDetailsPreview strong {
  display: block;
  color: #111827;
  font-size: 13.5px;
  font-weight: 720;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.assetDetailsPreview span {
  display: block;
  margin-top: 7px;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 620;
}

.assetDetailsRows {
  display: grid;
  gap: 10px;
}

.assetDetailsSection {
  display: grid;
  gap: 0;
  padding: 9px 0 2px;
  border: 1px solid rgba(100, 116, 139, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.42);
  overflow: hidden;
}

.assetDetailsSectionTitle {
  padding: 0 12px 8px;
  color: #64748b;
  font-size: 9.5px;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.assetDetailsRow {
  display: grid;
  grid-template-columns: minmax(88px, 0.4fr) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid rgba(100, 116, 139, 0.075);
  border-radius: 0;
  background: transparent;
  font-size: 12.25px;
  line-height: 1.34;
}

.assetDetailsRow.is-highlight {
  border-color: rgba(100, 116, 139, 0.075);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.055), transparent 72%);
}

.assetDetailsRow span {
  color: #64748b;
  font-weight: 520;
}

.assetDetailsRow strong {
  min-width: 0;
  color: #1f2937;
  font-size: 12.35px;
  font-weight: 650;
  letter-spacing: -0.006em;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.editorApp[data-theme="dark"] .assetDetailsSection,
.editorApp[data-theme="night"] .assetDetailsSection {
  border-color: rgba(148, 163, 184, 0.105);
  background: rgba(15, 23, 42, 0.22);
  box-shadow: none;
}

.editorApp[data-theme="dark"] .assetDetailsSectionTitle,
.editorApp[data-theme="night"] .assetDetailsSectionTitle {
  color: rgba(203, 213, 225, 0.58);
}

.editorApp[data-theme="dark"] .assetDetailsRow,
.editorApp[data-theme="night"] .assetDetailsRow {
  border-color: rgba(148, 163, 184, 0.075);
  background: transparent;
}

.editorApp[data-theme="dark"] .assetDetailsRow span,
.editorApp[data-theme="night"] .assetDetailsRow span {
  color: rgba(148, 163, 184, 0.82);
}

.editorApp[data-theme="dark"] .assetDetailsRow strong,
.editorApp[data-theme="night"] .assetDetailsRow strong {
  color: rgba(241, 245, 249, 0.92);
}

.editorApp[data-theme="dark"] .assetDetailsRow.is-highlight,
.editorApp[data-theme="night"] .assetDetailsRow.is-highlight {
  border-color: rgba(148, 163, 184, 0.075);
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.07), transparent 74%);
}
.inspectorTab {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.inspectorTab.is-active {
  background: #ffffff;
  color: var(--accent-dark);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.inspectorPane {
  display: none;
  padding: 18px 16px;
  overflow: auto;
}

.inspectorPane.is-active {
  display: grid;
  align-content: start;
  gap: 15px;
}

.controlRow {
  display: grid;
  gap: 9px;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.controlRowHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.controlRow output {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.controlRow select,
.controlRow input[type="number"] {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 0 10px;
  outline: none;
}

.controlRow input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.secondaryWide {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-weight: 900;
}

.secondaryWide:disabled {
  opacity: 0.48;
  cursor: default;
}

.colorInspectorHeader {
  min-height: 72px;
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 8px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px 14px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), transparent 44%),
    linear-gradient(180deg, #ffffff, rgba(241, 245, 249, 0.88));
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.colorInspectorHeader span {
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.colorInspectorHeader strong {
  min-width: 0;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colorPresetGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.colorPresetGrid button {
  height: 34px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.76)),
    #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 950;
  box-shadow:
    0 8px 16px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.colorPresetGrid button:hover,
.colorPresetGrid button:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.38);
  color: var(--accent-dark);
  box-shadow:
    0 10px 22px rgba(var(--accent-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
  outline: none;
}

.colorControlList {
  display: grid;
  gap: 10px;
}

.colorSectionDivider {
  height: 1px;
  margin: 2px 0;
  background: linear-gradient(90deg, transparent, rgba(100, 116, 139, 0.28), transparent);
}

.colorControl {
  --color-track: linear-gradient(90deg, var(--accent) 0 var(--range-fill, 50%), rgba(148, 163, 184, 0.26) var(--range-fill, 50%) 100%);
  display: grid;
  gap: 7px;
}

.colorControlTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-size: 11.5px;
  font-weight: 950;
}

.colorControlTop output {
  min-width: 34px;
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.colorControlBody {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) 58px 28px;
  align-items: center;
  gap: 8px;
}

.colorControl input[type="range"] {
  width: 100%;
  height: 22px;
  appearance: none;
  background: transparent;
}

.colorControl input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: var(--color-track);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.colorControl input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6.5px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  appearance: none;
  background: var(--accent);
  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.22),
    0 0 0 5px rgba(var(--accent-rgb), 0.12);
}

.colorControl input[type="range"]::-moz-range-track {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.26);
}

.colorControl input[type="range"]::-moz-range-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.colorControl input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.22),
    0 0 0 5px rgba(var(--accent-rgb), 0.12);
}

.colorNumber {
  height: 30px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 8px;
  padding: 0 6px;
  background: #ffffff;
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.colorNumber:focus {
  border-color: rgba(var(--accent-rgb), 0.46);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.colorMiniButton {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.76)),
    #ffffff;
  color: #64748b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.colorMiniButton::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}

.colorMiniButton:hover,
.colorMiniButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.42);
  color: var(--accent-dark);
  box-shadow: 0 7px 16px rgba(var(--accent-rgb), 0.12);
  transform: translateY(-1px);
  outline: none;
}

.colorControl-temp {
  --color-track: linear-gradient(90deg, #2563eb 0%, #f8fafc 50%, #facc15 100%);
}

.colorControl-tint {
  --color-track: linear-gradient(90deg, #22c55e 0%, #f8fafc 50%, #d946ef 100%);
}

.colorControl-saturation {
  --color-track: linear-gradient(90deg, #94a3b8 0%, #f8fafc 50%, #ef4444 100%);
}

.colorControl-lightness,
.colorControl-exposure,
.colorControl-highlight,
.colorControl-whites,
.colorControl-brilliance {
  --color-track: linear-gradient(90deg, #475569 0%, #e2e8f0 50%, #ffffff 100%);
}

.colorControl-contrast,
.colorControl-shadow,
.colorControl-blacks {
  --color-track: linear-gradient(90deg, #020617 0%, #94a3b8 50%, #ffffff 100%);
}

.colorResetButton {
  height: 42px;
  border-color: rgba(var(--accent-rgb), 0.24);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(37, 99, 235, 0.07)),
    #ffffff;
  color: var(--accent-contrast);
  box-shadow:
    0 12px 24px rgba(var(--accent-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.colorResetButton:hover,
.colorResetButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.46);
  color: var(--accent-dark);
  outline: none;
}

.inspectorPane[data-inspector-panel="color"].is-color-disabled .colorControl,
.inspectorPane[data-inspector-panel="color"].is-color-disabled .colorPresetGrid,
.inspectorPane[data-inspector-panel="color"].is-color-disabled .colorResetButton {
  opacity: 0.56;
}

.editorApp[data-theme="dark"] .colorInspectorHeader,
.editorApp[data-theme="night"] .colorInspectorHeader {
  border-color: rgba(226, 232, 240, 0.12);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(37, 99, 235, 0.08) 44%, transparent),
    linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.78));
  box-shadow:
    0 14px 28px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.editorApp[data-theme="dark"] .colorInspectorHeader span,
.editorApp[data-theme="night"] .colorInspectorHeader span,
.editorApp[data-theme="dark"] .colorControlTop output,
.editorApp[data-theme="night"] .colorControlTop output {
  color: #93a4b8;
}

.editorApp[data-theme="dark"] .colorInspectorHeader strong,
.editorApp[data-theme="night"] .colorInspectorHeader strong,
.editorApp[data-theme="dark"] .colorControlTop,
.editorApp[data-theme="night"] .colorControlTop {
  color: #e8eef7;
}

.editorApp[data-theme="dark"] .colorPresetGrid button,
.editorApp[data-theme="night"] .colorPresetGrid button,
.editorApp[data-theme="dark"] .colorNumber,
.editorApp[data-theme="night"] .colorNumber,
.editorApp[data-theme="dark"] .colorMiniButton,
.editorApp[data-theme="night"] .colorMiniButton {
  border-color: rgba(226, 232, 240, 0.12);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.86)),
    rgba(15, 23, 42, 0.76);
  color: #dbe5f1;
  box-shadow:
    0 8px 18px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.editorApp[data-theme="dark"] .colorControl input[type="range"]::-webkit-slider-runnable-track,
.editorApp[data-theme="night"] .colorControl input[type="range"]::-webkit-slider-runnable-track {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.42);
}

.editorApp[data-theme="dark"] .colorControl input[type="range"]::-webkit-slider-thumb,
.editorApp[data-theme="night"] .colorControl input[type="range"]::-webkit-slider-thumb,
.editorApp[data-theme="dark"] .colorControl input[type="range"]::-moz-range-thumb,
.editorApp[data-theme="night"] .colorControl input[type="range"]::-moz-range-thumb {
  border-color: #111827;
  box-shadow:
    0 4px 12px rgba(2, 6, 23, 0.42),
    0 0 0 5px rgba(var(--accent-rgb), 0.14);
}

.editorApp[data-theme="dark"] .colorResetButton,
.editorApp[data-theme="night"] .colorResetButton {
  border-color: rgba(var(--accent-rgb), 0.3);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(37, 99, 235, 0.1)),
    rgba(15, 23, 42, 0.88);
  color: #e8fff6;
  box-shadow:
    0 14px 28px rgba(2, 6, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.audioInspectorSummary {
  min-height: 78px;
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 8px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px 14px;
  background: linear-gradient(180deg, #ffffff, rgba(241, 245, 249, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.audioInspectorSummary span {
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audioInspectorSummary strong {
  color: #111827;
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audioInspectorSummary em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.audioModeTabs {
  height: 34px;
  border: 0;
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  overflow: visible;
  background: #e9eff7;
  box-shadow: none;
}

.audioModeButton {
  border: 0;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  color: #5f7085;
  font-size: 11px;
  font-weight: 660;
  transition:
    transform 140ms ease,
    background 160ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.audioModeButton > span {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  display: inline-block;
  position: relative;
  background: rgba(100, 116, 139, 0.14);
}

.audioModeButton > span::before,
.audioModeButton > span::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}

.audioModeButton[data-audio-mode="basic"] > span::before {
  width: 9px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  box-shadow:
    0 -4px 0 currentColor,
    0 4px 0 currentColor;
}

.audioModeButton[data-audio-mode="speed"] > span::before {
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 999px;
  transform: rotate(45deg);
}

.audioModeButton[data-audio-mode="speed"] > span::after {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

.audioModeButton:hover,
.audioModeButton:focus-visible {
  color: var(--accent-dark);
  transform: translateY(-1px);
  outline: none;
}

.audioModeButton.is-active {
  background: #f7fffc;
  color: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
}

.audioModeButton.is-active > span {
  background: rgba(var(--accent-rgb), 0.15);
}

.audioModePane {
  display: grid;
  gap: 14px;
}

.audioModePane[hidden] {
  display: none;
}

.audioControlList {
  display: grid;
  gap: 14px;
}

.audioControl {
  display: grid;
  gap: 8px;
}

.audioControlTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

.audioControlTop output {
  min-width: 64px;
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.audioControlBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
}

.audioControlBody-number {
  grid-template-columns: minmax(0, 1fr) 68px;
}

.audioControlBody-duration {
  grid-template-columns: minmax(0, 1fr);
}

.audioRange {
  --range-empty: rgba(148, 163, 184, 0.26);
  --range-track: linear-gradient(90deg, #67e8c6 0 var(--range-fill, 50%), var(--range-empty) var(--range-fill, 50%) 100%);
  width: 100%;
  height: 24px;
  appearance: none;
  background: transparent;
}

.audioRange::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: var(--range-track);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.audioRange::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -5.5px;
  border: 4px solid #ffffff;
  border-radius: 999px;
  appearance: none;
  background: var(--accent);
  box-shadow:
    0 0 0 5px rgba(var(--accent-rgb), 0.13),
    0 10px 20px rgba(15, 23, 42, 0.12);
}

.audioRange::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: var(--range-empty);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.audioRange::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: #67e8c6;
}

.audioRange::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 4px solid #ffffff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow:
    0 0 0 5px rgba(var(--accent-rgb), 0.13),
    0 10px 20px rgba(15, 23, 42, 0.12);
}

.audioNumber {
  width: 100%;
  height: 32px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 8px;
  background: #ffffff;
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.audioNumber-wide {
  text-align: left;
  padding: 0 10px;
}

.audioMiniButton {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 8px;
  position: relative;
  background:
    linear-gradient(180deg, #ffffff, rgba(241, 245, 249, 0.86)),
    #ffffff;
  box-shadow:
    0 8px 16px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.audioMiniButton::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-radius: 999px;
  position: absolute;
  inset: 0;
  margin: auto;
}

.audioFeatureList {
  display: grid;
  gap: 9px;
}

.audioFeature {
  min-height: 56px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.76)),
    #ffffff;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.audioFeature-compact {
  margin-top: 2px;
  grid-template-columns: 44px minmax(0, 1fr);
}

.audioFeature input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.audioFeatureCheck,
.audioFeatureSwitch {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 6px;
  display: block;
  position: relative;
  background: rgba(15, 23, 42, 0.05);
}

.audioFeatureSwitch {
  width: 38px;
  height: 20px;
  border-radius: 999px;
}

.audioFeatureSwitch::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.22);
  transition: transform 140ms ease;
}

.audioFeature input:checked + .audioFeatureCheck,
.audioFeature input:checked + .audioFeatureSwitch {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: linear-gradient(135deg, var(--accent), #67e8c6);
}

.audioFeature input:checked + .audioFeatureCheck::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  position: absolute;
  left: 4px;
  top: 5px;
  transform: rotate(-45deg);
}

.audioFeature input:checked + .audioFeatureSwitch::before {
  transform: translateX(18px);
}

.audioFeatureText {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.audioFeatureText strong {
  min-width: 0;
  color: #1e293b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
}

.audioFeatureText strong b {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.4;
}

.audioFeatureText em {
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.25;
}

.inspectorPane[data-inspector-panel="audio"].is-audio-disabled .audioModePane,
.inspectorPane[data-inspector-panel="audio"].is-audio-disabled .audioActionGrid,
.inspectorPane[data-inspector-panel="audio"].is-audio-disabled #detachAudioButton {
  opacity: 0.58;
}

.audioMeter {
  min-height: 28px;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 2px 0 0;
  background: transparent;
  overflow: visible;
}

.audioMeter span {
  --bar-color: #34d399;
  min-width: 0;
  display: grid;
  gap: 5px;
  position: relative;
  color: #6b7d92;
  font-size: 8.5px;
  font-weight: 620;
  line-height: 1;
  text-align: center;
  transition:
    color 120ms ease,
    opacity 140ms ease;
}

.audioMeter span::before {
  content: "";
  height: 7px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.25);
}

.audioMeter span i {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--bar-color);
  opacity: 0.95;
  transform: scaleX(var(--bar-fill, 0));
  transform-origin: left center;
  transition:
    transform 70ms linear,
    box-shadow 120ms ease,
    opacity 120ms ease;
}

.audioMeter span b {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audioMeter span:nth-child(2) {
  --bar-color: #22d3ee;
}

.audioMeter span:nth-child(3) {
  --bar-color: #f4d03f;
}

.audioMeter span:nth-child(4) {
  --bar-color: #fb9b2f;
}

.audioMeter span:nth-child(5) {
  --bar-color: #ff6b7a;
}

.audioMeter span.is-active {
  color: #243248;
}

.audioMeter span.is-active i {
  box-shadow: 0 0 12px color-mix(in srgb, var(--bar-color) 48%, transparent);
}

.audioMeter span.is-hot i {
  opacity: 1;
  box-shadow: 0 0 16px color-mix(in srgb, var(--bar-color) 62%, transparent);
}

.audioActionGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.audioToggleButton.is-active {
  border-color: rgba(var(--accent-rgb), 0.52);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-dark);
}

.editorApp[data-theme="dark"] .audioModeTabs,
.editorApp[data-theme="night"] .audioModeTabs {
  background: rgba(15, 23, 42, 0.82);
  box-shadow: none;
}

.editorApp[data-theme="dark"] .audioModeButton,
.editorApp[data-theme="night"] .audioModeButton {
  color: #9aacc1;
}

.editorApp[data-theme="dark"] .audioModeButton > span,
.editorApp[data-theme="night"] .audioModeButton > span {
  background: rgba(148, 163, 184, 0.12);
}

.editorApp[data-theme="dark"] .audioModeButton.is-active,
.editorApp[data-theme="night"] .audioModeButton.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  color: #e8fff6;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.18);
}

.editorApp[data-theme="dark"] .audioModeButton.is-active > span,
.editorApp[data-theme="night"] .audioModeButton.is-active > span {
  background: rgba(var(--accent-rgb), 0.18);
}

.editorApp[data-theme="dark"] .audioMeter span,
.editorApp[data-theme="night"] .audioMeter span {
  color: #8ca0b7;
}

.editorApp[data-theme="dark"] .audioMeter span::before,
.editorApp[data-theme="night"] .audioMeter span::before {
  background: rgba(148, 163, 184, 0.18);
}

.editorApp[data-theme="dark"] .audioMeter span.is-active,
.editorApp[data-theme="night"] .audioMeter span.is-active {
  color: #dce8f7;
}

.editorApp[data-theme="dark"] .audioControlTop,
.editorApp[data-theme="night"] .audioControlTop,
.editorApp[data-theme="dark"] .audioFeatureText strong,
.editorApp[data-theme="night"] .audioFeatureText strong {
  color: #e8eef7;
}

.editorApp[data-theme="dark"] .audioControlTop output,
.editorApp[data-theme="night"] .audioControlTop output,
.editorApp[data-theme="dark"] .audioFeatureText em,
.editorApp[data-theme="night"] .audioFeatureText em {
  color: #93a4b8;
}

.editorApp[data-theme="dark"] .audioNumber,
.editorApp[data-theme="night"] .audioNumber,
.editorApp[data-theme="dark"] .audioMiniButton,
.editorApp[data-theme="night"] .audioMiniButton,
.editorApp[data-theme="dark"] .audioFeature,
.editorApp[data-theme="night"] .audioFeature {
  border-color: rgba(226, 232, 240, 0.12);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.84)),
    rgba(15, 23, 42, 0.78);
  color: #dbe5f1;
  box-shadow:
    0 8px 18px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.editorApp[data-theme="dark"] .audioRange,
.editorApp[data-theme="night"] .audioRange {
  --range-empty: rgba(71, 85, 105, 0.66);
}

.editorApp[data-theme="dark"] .audioRange::-webkit-slider-runnable-track,
.editorApp[data-theme="night"] .audioRange::-webkit-slider-runnable-track,
.editorApp[data-theme="dark"] .audioRange::-moz-range-track,
.editorApp[data-theme="night"] .audioRange::-moz-range-track {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.44);
}

.editorApp[data-theme="dark"] .audioRange::-webkit-slider-thumb,
.editorApp[data-theme="night"] .audioRange::-webkit-slider-thumb,
.editorApp[data-theme="dark"] .audioRange::-moz-range-thumb,
.editorApp[data-theme="night"] .audioRange::-moz-range-thumb {
  border-color: #111827;
  box-shadow:
    0 0 0 5px rgba(var(--accent-rgb), 0.14),
    0 8px 16px rgba(2, 6, 23, 0.34);
}

.editorApp[data-theme="dark"] .audioFeatureCheck,
.editorApp[data-theme="dark"] .audioFeatureSwitch,
.editorApp[data-theme="night"] .audioFeatureCheck,
.editorApp[data-theme="night"] .audioFeatureSwitch {
  border-color: rgba(226, 232, 240, 0.16);
  background: rgba(2, 6, 23, 0.34);
}

.editorApp[data-theme="dark"] .audioToggleButton.is-active,
.editorApp[data-theme="night"] .audioToggleButton.is-active {
  color: #e8fff6;
}

.timelineDock {
  grid-area: timeline;
  min-width: 0;
  min-height: 0;
  display: grid;
  position: relative;
  grid-template-rows: 40px minmax(0, 1fr);
  background: #f8fafc;
  border-top: 1px solid rgba(15, 23, 42, 0.11);
  box-shadow: 0 -8px 26px rgba(15, 23, 42, 0.05);
}

.timelineResizeHandle {
  width: 100%;
  height: 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  cursor: ns-resize;
  position: relative;
}

.timelineResizeHandle::before {
  content: "";
  width: 74px;
  height: 4px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.28);
}

.timelineResizeHandle:hover::before {
  background: rgba(79, 111, 229, 0.52);
}

.editToolbar {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 20px;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.editToolbarTools {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: auto hidden;
  scrollbar-width: none;
}

.editToolbarTools::-webkit-scrollbar {
  display: none;
}

.editToolbarRightCluster {
  justify-self: end;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow: auto hidden;
  scrollbar-width: none;
}

.editToolbarRightCluster::-webkit-scrollbar {
  display: none;
}

.editToolbarZoomCenter {
  justify-self: center;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.editToolbarRightTools {
  min-width: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.82)),
    rgba(15, 23, 42, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(15, 23, 42, 0.12);
}

.rightToolButton {
  position: relative;
  width: 31px;
  min-width: 31px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #c7d2e1;
  font-size: 0;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.rightToolButton .uiIcon {
  width: 20px;
  height: 20px;
  stroke-width: 1.95;
}

.rightToolButton:hover,
.rightToolButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
  outline: none;
  transform: translateY(-1px);
}

.rightToolButton.is-active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.1)),
    rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.2),
    0 0 14px rgba(var(--accent-rgb), 0.16);
}

.rightToolButton.is-active:hover,
.rightToolButton.is-active:focus-visible {
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.42), rgba(var(--accent-rgb), 0.2)),
    rgba(var(--accent-rgb), 0.18);
}

.spectrumLiveToggle {
  position: relative;
  z-index: 1;
  height: 32px;
  min-width: 164px;
  border: 1px solid rgba(var(--accent-rgb), 0.38);
  border-radius: 999px;
  padding: 0 9px 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent-contrast);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(var(--accent-rgb), 0.12)),
    rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 10px 22px rgba(var(--accent-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transform: translateY(0);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.spectrumLiveToggle:hover {
  border-color: rgba(var(--accent-rgb), 0.62);
  box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}

.spectrumLiveToggle:active {
  transform: translateY(0) scale(0.98);
}

.spectrumPulseIcon {
  width: 22px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--accent-dark);
}

.spectrumPulseIcon span {
  width: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.36);
  animation: spectrumToggleBars 920ms ease-in-out infinite;
}

.spectrumPulseIcon span:nth-child(1) {
  height: 9px;
  animation-delay: -180ms;
}

.spectrumPulseIcon span:nth-child(2) {
  height: 16px;
  animation-delay: -60ms;
}

.spectrumPulseIcon span:nth-child(3) {
  height: 11px;
  animation-delay: -300ms;
}

.spectrumLiveLabel,
.spectrumLiveState {
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.spectrumLiveState {
  min-width: 20px;
  color: var(--accent-dark);
  text-align: left;
}

.spectrumSwitch {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22), inset 0 1px 4px rgba(2, 44, 34, 0.24);
  flex: 0 0 auto;
}

.spectrumSwitch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 20px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(var(--accent-rgb), 0.32);
  transition: left 170ms cubic-bezier(0.22, 0.61, 0.36, 1), background 170ms ease, box-shadow 170ms ease;
}

.spectrumLiveToggle.is-off {
  border-color: rgba(148, 163, 184, 0.32);
  color: #64748b;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.82));
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.spectrumLiveToggle.is-off .spectrumPulseIcon {
  color: #94a3b8;
}

.spectrumLiveToggle.is-off .spectrumPulseIcon span {
  animation-play-state: paused;
  box-shadow: none;
}

.spectrumLiveToggle.is-off .spectrumLiveState {
  color: #64748b;
}

.spectrumLiveToggle.is-off .spectrumSwitch {
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.18);
}

.spectrumLiveToggle.is-off .spectrumSwitch::after {
  left: 4px;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
}

@keyframes spectrumToggleBars {
  0%,
  100% {
    transform: scaleY(0.62);
    opacity: 0.72;
  }
  45% {
    transform: scaleY(1.06);
    opacity: 1;
  }
}

.toolButton {
  height: 32px;
  min-width: 32px;
  width: 32px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #263348;
  padding: 0;
  font-size: 0;
  font-weight: 900;
  white-space: nowrap;
  display: grid;
  place-items: center;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.toolButton:hover {
  border-color: rgba(37, 99, 235, 0.15);
  background: #f5f8ff;
  color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.toolButton.is-active {
  border-color: rgba(37, 99, 235, 0.22);
  background: #eef4ff;
  color: #000000;
  box-shadow: inset 0 -2px 0 rgba(37, 99, 235, 0.42), 0 1px 2px rgba(37, 99, 235, 0.12);
}

.toolButton.is-active:hover {
  background: rgba(79, 111, 229, 0.045);
}

.toolButton.danger:hover {
  border-color: rgba(239, 91, 115, 0.18);
  background: rgba(244, 63, 94, 0.09);
  color: #be123c;
}

.cutToolGroup {
  height: 32px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
  padding: 2px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.72)),
    rgba(248, 250, 252, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 4px 12px rgba(15, 23, 42, 0.06);
}

.cutToolGroup .toolButton {
  width: 30px;
  min-width: 30px;
  height: 28px;
  border-radius: 8px;
  color: #475569;
}

.cutToolGroup .toolButton + .toolButton {
  margin-left: 1px;
}

.cutToolGroup .toolButton:hover {
  z-index: 1;
  border-color: rgba(var(--accent-rgb), 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(var(--accent-rgb), 0.12));
  color: var(--accent-dark);
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.18),
    0 5px 14px rgba(var(--accent-rgb), 0.12);
}

.cutToolGroup [data-editor-action="delete-left"]:hover,
.cutToolGroup [data-editor-action="delete-right"]:hover {
  border-color: rgba(251, 113, 133, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 241, 242, 0.9));
  color: #e11d48;
  box-shadow:
    inset 0 0 0 1px rgba(251, 113, 133, 0.16),
    0 5px 14px rgba(225, 29, 72, 0.1);
}

.editToolbar .toolButton:hover,
.editToolbar .toolButton:focus-visible,
.editToolbar .toolButton.is-active,
.editToolbar .toolButton:active,
.editorApp[data-theme="dark"] .editToolbar .toolButton:hover,
.editorApp[data-theme="dark"] .editToolbar .toolButton:focus-visible,
.editorApp[data-theme="dark"] .editToolbar .toolButton.is-active,
.editorApp[data-theme="dark"] .editToolbar .toolButton:active,
.editorApp[data-theme="night"] .editToolbar .toolButton:hover,
.editorApp[data-theme="night"] .editToolbar .toolButton:focus-visible,
.editorApp[data-theme="night"] .editToolbar .toolButton.is-active,
.editorApp[data-theme="night"] .editToolbar .toolButton:active,
.editToolbar .cutToolGroup .toolButton:hover,
.editToolbar .cutToolGroup .toolButton:focus-visible,
.editToolbar .cutToolGroup .toolButton.is-active,
.editToolbar .cutToolGroup .toolButton:active,
.editToolbar .cutToolGroup [data-editor-action="delete-left"]:hover,
.editToolbar .cutToolGroup [data-editor-action="delete-left"]:focus-visible,
.editToolbar .cutToolGroup [data-editor-action="delete-right"]:hover,
.editToolbar .cutToolGroup [data-editor-action="delete-right"]:focus-visible {
  color: #000000;
}

.editToolbar .toolButton.is-active:hover,
.editToolbar .toolButton.is-active:focus-visible,
.editorApp[data-theme="dark"] .editToolbar .toolButton.is-active:hover,
.editorApp[data-theme="dark"] .editToolbar .toolButton.is-active:focus-visible,
.editorApp[data-theme="night"] .editToolbar .toolButton.is-active:hover,
.editorApp[data-theme="night"] .editToolbar .toolButton.is-active:focus-visible {
  color: #ffffff;
}

.editToolbar .cutToolGroup .toolButton:hover,
.editToolbar .cutToolGroup .toolButton:focus-visible,
.editToolbar .cutToolGroup .toolButton.is-active,
.editToolbar .cutToolGroup .toolButton:active,
.editorApp[data-theme="dark"] .editToolbar .cutToolGroup .toolButton:hover,
.editorApp[data-theme="dark"] .editToolbar .cutToolGroup .toolButton:focus-visible,
.editorApp[data-theme="dark"] .editToolbar .cutToolGroup .toolButton.is-active,
.editorApp[data-theme="dark"] .editToolbar .cutToolGroup .toolButton:active,
.editorApp[data-theme="night"] .editToolbar .cutToolGroup .toolButton:hover,
.editorApp[data-theme="night"] .editToolbar .cutToolGroup .toolButton:focus-visible,
.editorApp[data-theme="night"] .editToolbar .cutToolGroup .toolButton.is-active,
.editorApp[data-theme="night"] .editToolbar .cutToolGroup .toolButton:active {
  color: #ffffff;
}

.toolDivider {
  width: 1px;
  height: 20px;
  background: rgba(148, 163, 184, 0.22);
  flex: 0 0 auto;
}

.timelineAdd {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #3b4f6c;
  font-weight: 800;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.timelineAdd:hover {
  border-color: rgba(37, 99, 235, 0.16);
  background: #f5f8ff;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.timelineTrackAdd {
  justify-content: center;
  gap: 6px;
}

.timelineTrackCanvasAdd {
  position: absolute;
  left: 54px;
  top: 3px;
  z-index: 26;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  transform: none;
}

.timelineTrackCanvasAdd:hover,
.timelineTrackCanvasAdd:focus-visible {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  outline: none;
  box-shadow: none;
  transform: none;
}

.timelineAdd.timelineTrackCanvasAdd.has-icon {
  width: 26px;
  height: 26px;
}

.timelineTrackCanvasAdd .uiIcon {
  width: 17px;
  height: 17px;
  stroke-width: 2.3;
}

.timelineAdd span:first-child {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 780;
}

.timelineTimeGroup {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(var(--accent-rgb), 0.08)),
    rgba(255, 255, 255, 0.92);
  color: #172033;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  font-family: "Segoe UI", "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 880;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.timelineTimeCurrent {
  color: var(--accent);
}

.timelineTimeDivider {
  color: rgba(100, 116, 139, 0.72);
}

.timelineTimeTotal {
  color: #1f2937;
}

.timelineTimeRemaining {
  color: #64748b;
  font-weight: 780;
}

.timelineTools {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}

.timelineTools::before {
  content: none;
}

.timelineTools > * {
  position: relative;
  z-index: 1;
}

.timelineToolsSep {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  background: rgba(148, 163, 184, 0.28);
  border-radius: 1px;
}

.editorApp[data-theme="dark"] .timelineToolsSep,
.editorApp[data-theme="night"] .timelineToolsSep {
  background: var(--line);
}

.timelineTools .iconButton {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: #52647f;
  box-shadow: none;
}

.timelineTools .iconButton .uiIcon {
  width: 20.5px;
  height: 20.5px;
  stroke-width: 1.95;
}

.timelineTools .iconButton:hover {
  border-color: transparent;
  background: transparent;
  color: #2563eb;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.timelineTools .iconButton:active {
  transform: translateY(0) scale(0.96);
}

.zoomRange {
  width: clamp(120px, 10vw, 176px);
  min-width: 120px;
  height: 28px;
  flex: 0 0 auto;
  accent-color: var(--blue);
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.zoomRange:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.24);
  outline-offset: 3px;
  border-radius: 999px;
}

.zoomValue {
  min-width: 92px;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: #52647f;
  font-family: "Segoe UI", "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.zoomValue strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1;
}

.zoomValue small {
  color: #64748b;
  font-size: 10px;
  line-height: 1.05;
  white-space: nowrap;
}

.editToolbar .timelineTools {
  height: 34px;
  gap: 2px;
  padding: 0;
  border-radius: 0;
}

.editToolbar .timelineTools .iconButton {
  width: 28px;
  min-width: 28px;
  height: 28px;
}

.editToolbar .timelineTools .iconButton .uiIcon {
  width: 18px;
  height: 18px;
}

.editToolbar .zoomRange {
  width: clamp(64px, 4.4vw, 96px);
  min-width: 60px;
  height: 24px;
  --range-track-height: 4px;
  --range-thumb-size: 13px;
  --range-thumb-margin: -4.5px;
}

.editToolbar .zoomValue {
  min-width: 54px;
  height: 26px;
  place-items: center;
  padding: 0 7px;
  border-radius: 10px;
}

.editToolbar .zoomValue strong {
  font-size: 12px;
}

.iconButton {
  width: 34px;
  height: 34px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: #ffffff;
  color: #52647f;
  font-weight: 900;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.iconButton:hover,
.ghostButton:hover {
  border-color: rgba(79, 111, 229, 0.28);
  background: #f5f8ff;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.timelineCanvas {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 28px minmax(0, 1fr) 18px;
  overflow: hidden;
  background: #fbfcfe;
}

.timelineCanvas::before {
  content: "";
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 18;
  width: var(--track-label-width, 108px);
  height: 28px;
  border-right: 1px solid rgba(100, 116, 139, 0.28);
  border-bottom: 1px solid var(--line-soft);
  background: #ffffff;
  pointer-events: none;
}

.timelineRuler {
  position: relative;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 28px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  overflow: visible;
  --timeline-ruler-step: 78px;
  --timeline-ruler-surface-top: rgba(15, 23, 42, 0.38);
  --timeline-ruler-surface-bottom: rgba(15, 23, 42, 0.38);
  --timeline-ruler-major-alpha: 0.32;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, var(--timeline-ruler-grid-alpha, 0.08)) 0 1px, transparent 1px) var(--timeline-ruler-offset, 108px) 4px / var(--timeline-ruler-step, 78px) 6px repeat-x,
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 44%),
    linear-gradient(180deg, var(--timeline-ruler-surface-top), var(--timeline-ruler-surface-bottom));
  background-repeat: repeat-x, no-repeat, no-repeat;
  transform-origin: 0 0;
  will-change: transform;
  z-index: 1;
  cursor: var(--timeline-zoom-cursor);
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.timelineRuler:hover {
  --timeline-ruler-surface-top: rgba(15, 23, 42, 0.46);
  --timeline-ruler-surface-bottom: rgba(15, 23, 42, 0.46);
  --timeline-ruler-major-alpha: 0.42;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.timelineTick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

.timelineTick.is-major {
  background: transparent;
}

.timelineTick.is-major::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 6px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
  opacity: var(--timeline-ruler-major-alpha, 0.32);
}

.timelineTick.is-major::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  opacity: 0.52;
}

.timelineTick span {
  position: absolute;
  top: 8px;
  left: 8px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 10px;
  font-weight: 740;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  font-family: "Segoe UI", "Inter", "Noto Sans", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  text-shadow: none;
  transition: color 120ms ease;
}

.timelineTick.is-edge-hidden span {
  visibility: hidden;
}

.timelineRuler:hover .timelineTick span {
  color: #ffffff;
}

.timelineDropZone {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-gutter: stable;
  --track-label-width: 108px;
  background: #ffffff;
  scrollbar-color: #8fa1b8 #eef3f8;
  scrollbar-width: auto;
  overscroll-behavior: contain;
  transition: scrollbar-color 140ms ease, background-color 140ms ease;
}

.timelineDropZone::-webkit-scrollbar {
  width: 16px;
  height: 0;
}

.timelineDropZone::-webkit-scrollbar-track {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #eef3f8;
}

.timelineDropZone::-webkit-scrollbar-thumb {
  min-width: 50px;
  min-height: 50px;
  border: 4px solid #eef3f8;
  border-radius: 999px;
  background: linear-gradient(180deg, #9aabc1, #718399);
}

.timelineDropZone::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8395ad, #5f7188);
}

.timelineDropZone::-webkit-scrollbar-corner {
  background: #eef3f8;
}

.timelineHScroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  --timeline-hscroll-left: var(--track-label-width, 108px);
  --timeline-hscroll-right: 8px;
  height: 22px;
  padding: 4px 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, #eef3f8, #e1e9f2);
  cursor: pointer;
  user-select: none;
  overflow: visible;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.timelineHScroll::before {
  content: "";
  position: absolute;
  left: var(--timeline-hscroll-left);
  right: var(--timeline-hscroll-right, 8px);
  top: 50%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(207, 217, 229, 0.9), rgba(190, 202, 216, 0.9));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -1px 1px rgba(15,23,42,0.06);
  transform: translateY(-50%);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.timelineHScrollThumb {
  position: absolute;
  left: var(--timeline-hscroll-left);
  top: 50%;
  height: 14px;
  width: 200px;
  min-width: 200px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: linear-gradient(180deg, #9fb1c6, #6f8399);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 5px rgba(15, 23, 42, 0.16);
  transform: translateY(-50%);
  transition: background 120ms ease, height 120ms ease, width 80ms ease, box-shadow 120ms ease, border-color 120ms ease;
  will-change: left, width;
}

.timelineHScrollButton {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.55);
  box-shadow: 0 2px 4px rgba(2, 6, 23, 0.22);
  cursor: pointer;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 120ms ease,
    opacity 120ms ease;
}

.timelineHScroll:hover .timelineHScrollButton,
.timelineHScrollButton.is-pressing,
.is-dragging-timeline-scroll .timelineHScrollButton {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.timelineHScrollButtonLeft {
  left: calc(var(--timeline-hscroll-left) - 9px);
}

.timelineHScrollButtonRight {
  left: calc(var(--timeline-hscroll-left) + 120px - 9px);
}

.timelineHScrollButton:hover,
.timelineHScrollButton.is-pressing {
  color: #ffffff;
  border-color: rgba(125, 211, 252, 0.48);
  background: rgba(59, 130, 246, 0.30);
  transform: translateY(-50%) scale(1.04);
}

.timelineHScrollButton:active {
  transform: translateY(-50%) scale(0.96);
}

.timelineHScrollButton:disabled {
  opacity: 0.32;
  cursor: default;
  color: #64748b;
  border-color: rgba(100, 116, 139, 0.18);
  background: rgba(15, 23, 42, 0.18);
  box-shadow: none;
  transform: translateY(-50%);
}

.timelineHScroll:hover .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 15px;
  background: linear-gradient(180deg, #8aa1ba, #5c728b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 2px 6px rgba(15, 23, 42, 0.22);
}

.is-dragging-timeline-scroll .timelineHScrollThumb {
  transition: none;
}

.timelineDropZone.is-drop-target {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #34d399) 8%, transparent), transparent);
}

.timelineSnapGuide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 66;
  width: 1px;
  height: calc(100% - 18px);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe27a, #facc15);
  box-shadow:
    0 0 0 1px rgba(24, 18, 0, 0.10),
    0 0 5px rgba(250, 204, 21, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-0.5px);
}

.timelineSnapGuide.is-visible {
  opacity: 1;
}

.timelineTracks {
  position: relative;
  min-width: 100%;
  height: 100%;
  padding: 0 18px 0 0;
  transform: translateX(0);
  will-change: transform;
}



body.is-timeline-instant-zooming .timelineTracks,
body.is-timeline-instant-zooming .timelineRuler,
.editorApp.is-timeline-instant-zooming .timelineTracks,
.editorApp.is-timeline-instant-zooming .timelineRuler {
  will-change: transform;
  transition: none !important;
}

body.is-timeline-instant-zooming .timelineTrack,
body.is-timeline-instant-zooming .timelineClip,
body.is-timeline-instant-zooming .clipThumbStrip,
body.is-timeline-instant-zooming .clipThumbCanvas,
.editorApp.is-timeline-instant-zooming .timelineTrack,
.editorApp.is-timeline-instant-zooming .timelineClip,
.editorApp.is-timeline-instant-zooming .clipThumbStrip,
.editorApp.is-timeline-instant-zooming .clipThumbCanvas {
  transition: none !important;
  animation: none !important;
  contain: layout paint style;
}

/* Phase 0T: per-frame rasterization of the clip thumbnail canvas was the main
   browser PAINT cost during zoom (the timeline JS was already cheap: ~10ms,
   while longFrame hit ~100ms). Skip painting the thumbnail canvas while actively
   zooming so frames stop overrunning -> zoom feels fast, and the reduced frame
   pressure also stops the engine from skipping geometry passes (which caused the
   clip/row-control drift). The filmstrip repaints instantly when zoom settles. */
body.is-timeline-instant-zooming .clipThumbCanvas,
.editorApp.is-timeline-instant-zooming .clipThumbCanvas {
  visibility: hidden !important;
}

.timelineScrollSpacer {
  width: var(--timeline-scroll-width, 100%);
  min-width: var(--timeline-scroll-width, 100%);
  height: 1px;
  pointer-events: none;
  opacity: 0;
}

.timelineTrack {
  position: relative;
  height: 88px;
  margin-bottom: 4px;
  border: none;
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--track-accent-surface, rgba(56, 189, 248, 0.12)), rgba(248, 250, 252, 0.88) 48%, rgba(248, 250, 252, 0.76)),
    #f8fafc;
  box-shadow: inset 2px 0 0 var(--track-accent, #38bdf8);
  overflow: hidden;
}

.timelineDropInsertSpacer, 
.timelineDropTopSpacer, 
.timelineDropBottomSpacer {
  height: var(--track-height, 72px);
  min-height: 64px;
  border-style: dashed;
  border-color: rgba(56, 189, 248, 0.22);
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.18) 0, rgba(15, 23, 42, 0.12) var(--track-label-width, 108px), rgba(56, 189, 248, 0.045) var(--track-label-width, 108px), rgba(56, 189, 248, 0.025) 100%),
    transparent;
  box-shadow: inset 4px 0 0 rgba(56, 189, 248, 0.18);
  opacity: 0.74;
}

.timelineDropInsertSpacer .timelineTrackLabel,
.timelineDropTopSpacer .timelineTrackLabel,
.timelineDropBottomSpacer .timelineTrackLabel {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.06));
  color: rgba(148, 163, 184, 0.82);
}

.timelineDropInsertSpacer .trackName span:not(.trackIcon),
.timelineDropInsertSpacer .trackName small,
.timelineDropTopSpacer .trackName span:not(.trackIcon),
.timelineDropTopSpacer .trackName small,
.timelineDropBottomSpacer .trackName span:not(.trackIcon),
.timelineDropBottomSpacer .trackName small {
  color: rgba(148, 163, 184, 0.78);
}

.timelineDropInsertSpacer::after,
.timelineDropTopSpacer::after,
.timelineDropBottomSpacer::after {
  content: "";
  position: absolute;
  left: calc(var(--track-label-width, 108px) + 18px);
  right: 18px;
  top: 50%;
  border-top: 1px dashed rgba(56, 189, 248, 0.26);
  transform: translateY(-50%);
  pointer-events: none;
}

.timelineDropInsertSpacer:hover,
.timelineDropTopSpacer:hover,
.timelineDropBottomSpacer:hover,
body.is-dragging-media .timelineDropInsertSpacer,
body.is-dragging-media .timelineDropTopSpacer,
body.is-dragging-media .timelineDropBottomSpacer,
body.is-media-dragging .timelineDropInsertSpacer,
body.is-media-dragging .timelineDropTopSpacer,
body.is-media-dragging .timelineDropBottomSpacer,
body.is-dragging-clip .timelineDropInsertSpacer,
body.is-dragging-clip .timelineDropTopSpacer,
body.is-dragging-clip .timelineDropBottomSpacer {
  opacity: 1;
  border-color: rgba(56, 189, 248, 0.42);
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.26) 0, rgba(15, 23, 42, 0.16) var(--track-label-width, 108px), rgba(56, 189, 248, 0.09) var(--track-label-width, 108px), rgba(56, 189, 248, 0.05) 100%),
    transparent;
}

.timelineTrack::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: var(--track-label-width, 108px);
  height: 100%;
  border-right: 1px solid var(--track-accent-soft, rgba(100, 116, 139, 0.28));
  background:
    linear-gradient(90deg, var(--track-accent-label, rgba(56, 189, 248, 0.18)), rgba(238, 243, 249, 0.92)),
    linear-gradient(180deg, #eef3f9, #e7edf5);
  box-shadow: 7px 0 14px rgba(15, 23, 42, 0.04);
  pointer-events: none;
  transform: translateX(var(--timeline-scroll-left, 0px));
  will-change: transform;
}

.timelineTrack.is-track-added {
  animation: timelineTrackAddPulse 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.timelineTrack.is-track-added::after,
.timelineTrack.is-track-deleting::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 45;
  border-radius: inherit;
  pointer-events: none;
}

.timelineTrack.is-track-added::after {
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(255, 255, 255, 0.1) 29%, rgba(255, 255, 255, 0.96) 39%, var(--track-accent, #38bdf8) 50%, rgba(255, 255, 255, 0.72) 58%, transparent 72%),
    linear-gradient(90deg, var(--track-accent-surface, rgba(56, 189, 248, 0.18)), transparent 42%, var(--track-accent-surface, rgba(56, 189, 248, 0.16)));
  mix-blend-mode: screen;
  animation: timelineTrackAddSweep 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.timelineTrack.is-track-deleting {
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: timelineTrackDeleteFlash 300ms cubic-bezier(0.36, 0, 0.2, 1) both;
}

.timelineTrack.is-track-deleting::after {
  background:
    linear-gradient(96deg, transparent 0 13%, rgba(255, 255, 255, 0.88) 28%, rgba(244, 63, 94, 0.92) 42%, rgba(255, 255, 255, 0.72) 52%, rgba(244, 63, 94, 0.3) 66%, transparent 82%),
    linear-gradient(90deg, rgba(244, 63, 94, 0.42), rgba(244, 63, 94, 0.18));
  mix-blend-mode: screen;
  animation: timelineTrackDeleteSweep 300ms cubic-bezier(0.36, 0, 0.2, 1) both;
}

@keyframes timelineTrackAddPulse {
  0% {
    opacity: 0.86;
    filter: brightness(1.38) saturate(1.24);
    transform: scaleY(0.96);
  }
  45% {
    opacity: 1;
    filter: brightness(1.14) saturate(1.16);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: scaleY(1);
  }
}

@keyframes timelineTrackAddSweep {
  0% {
    opacity: 0;
    transform: translateX(-115%) skewX(-14deg);
  }
  14% {
    opacity: 1;
  }
  48% {
    opacity: 0.94;
  }
  100% {
    opacity: 0;
    transform: translateX(106%) skewX(-14deg);
  }
}

@keyframes timelineTrackDeleteFlash {
  0% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scaleY(1);
  }
  38% {
    opacity: 1;
    filter: brightness(1.45) saturate(1.35);
  }
  100% {
    opacity: 0;
    filter: brightness(0.65) saturate(0.8);
    transform: scaleY(0.72);
  }
}

@keyframes timelineTrackDeleteSweep {
  0% {
    opacity: 0;
    transform: translateX(-105%) skewX(-12deg);
  }
  16% {
    opacity: 1;
  }
  54% {
    opacity: 0.96;
  }
  100% {
    opacity: 0;
    transform: translateX(104%) skewX(-12deg);
  }
}

.timelineTrack.is-track-selected {
  border-style: solid;
  border-color: var(--track-accent, rgba(79, 111, 229, 0.44));
  background:
    linear-gradient(90deg, var(--track-accent-surface, rgba(79, 111, 229, 0.12)), rgba(245, 248, 255, 0.9) 48%, rgba(245, 248, 255, 0.78)),
    #f5f8ff;
}

.timelineTrack.is-drop-hover {
  border-color: var(--track-accent, #34d399);
  background:
    linear-gradient(90deg, var(--track-accent-surface, rgba(52, 211, 153, 0.18)), rgba(236, 253, 245, 0.94) 46%, rgba(240, 253, 250, 0.82)),
    #ecfdf5;
  box-shadow:
    inset 4px 0 0 var(--track-accent, #34d399),
    0 0 0 2px rgba(255, 255, 255, 0.84),
    0 0 0 4px color-mix(in srgb, var(--track-accent, #34d399) 42%, transparent),
    0 14px 26px rgba(15, 23, 42, 0.12);
}

.timelineTrack.is-drop-hover::after {
  content: "";
  position: absolute;
  z-index: 18;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--track-accent, #34d399) 14%, transparent);
  pointer-events: none;
}

.timelineTrack.is-drop-hover .timelineTrackLabel {
  color: #ffffff;
  background:
    linear-gradient(90deg, var(--track-accent, #34d399), color-mix(in srgb, var(--track-accent, #34d399) 56%, #0f172a)),
    var(--track-accent, #34d399);
}



.timelineDropGhostRow {
  border-style: dashed;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 72%, rgba(255, 255, 255, 0.28));
  background:
    linear-gradient(
      90deg,
      rgba(8, 14, 24, 0.92) 0,
      rgba(8, 14, 24, 0.92) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 18%, rgba(2, 6, 23, 0.76)) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 10%, rgba(2, 6, 23, 0.72)) 100%
    ),
    rgba(2, 6, 23, 0.72);
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 82%, #020617),
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 26%, transparent),
    0 12px 26px rgba(2, 6, 23, 0.24);
  opacity: 0.96;
  animation: timelineDropGhostIn 120ms ease-out;
}

.timelineDropGhostRow .timelineTrackLabel {
  color: rgba(240, 253, 250, 0.96);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 28%, rgba(15, 23, 42, 0.82)), rgba(15, 23, 42, 0.72));
}

.timelineDropGhostRow .trackName span:not(.trackIcon) {
  color: rgba(248, 250, 252, 0.98);
}

.timelineDropGhostRow .trackName small {
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 62%, rgba(226, 232, 240, 0.84));
}

@keyframes timelineDropGhostIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scaleY(0.96);
  }
  to {
    opacity: 0.96;
    transform: translateY(0) scaleY(1);
  }
}

.timelineDropPreview {
  position: absolute;
  z-index: 26;
  top: 8px;
  height: calc(100% - 16px);
  min-width: 34px;
  border: 1px solid color-mix(in srgb, var(--track-accent, #34d399) 72%, rgba(255, 255, 255, 0.52));
  border-radius: 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #34d399) 26%, rgba(15, 23, 42, 0.74)), color-mix(in srgb, var(--track-accent, #34d399) 12%, rgba(15, 23, 42, 0.52))),
    rgba(15, 23, 42, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 28px color-mix(in srgb, var(--track-accent, #34d399) 18%, transparent),
    0 10px 28px rgba(0, 0, 0, 0.22),
    0 0 18px color-mix(in srgb, var(--track-accent, #34d399) 24%, transparent);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: rgba(240, 253, 250, 0.96);
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  transform: translateZ(0);
}

.timelineDropPreview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, 0.16) 52%, transparent 64%);
  opacity: 0.3;
}

.timelineDropPreview span,
.timelineDropPreview small {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(3, 7, 18, 0.48);
}

.timelineDropPreview small {
  color: rgba(203, 213, 225, 0.82);
  font-size: 10px;
}

.timelineTrack.is-snap-joining {
  border-color: var(--track-accent, #34d399);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #34d399) 58%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--track-accent, #34d399) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--track-accent, #34d399) 22%, transparent);
}

.timelineTrack.is-snap-joining::after {
  content: "";
  position: absolute;
  z-index: 19;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(255, 255, 255, 0.32) 48%, transparent 62%),
    color-mix(in srgb, var(--track-accent, #34d399) 10%, transparent);
  pointer-events: none;
  animation: timelineTrackDropGlow 760ms ease-in-out infinite alternate;
}

.timelineTrack.is-left-limit {
  border-color: var(--track-accent, rgba(56, 189, 248, 0.72));
  box-shadow:
    inset 4px 0 0 var(--track-accent, #38bdf8),
    0 0 0 2px color-mix(in srgb, var(--track-accent, #38bdf8) 22%, transparent),
    0 12px 24px color-mix(in srgb, var(--track-accent, #38bdf8) 18%, transparent);
  animation: timelineLeftLimitBump 260ms cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.timelineTrack.is-left-limit .timelineTrackLabel {
  color: #ffffff;
  background:
    linear-gradient(90deg, var(--track-accent, #38bdf8), color-mix(in srgb, var(--track-accent, #38bdf8) 62%, #0f172a)),
    var(--track-accent, #38bdf8);
  box-shadow: 10px 0 22px color-mix(in srgb, var(--track-accent, #38bdf8) 30%, transparent);
}

.timelineTrack.is-left-limit .timelineTrackLabel::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 7px;
  bottom: 7px;
  width: 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.8),
    0 0 22px color-mix(in srgb, var(--track-accent, #38bdf8) 74%, transparent);
  animation: timelineLeftLimitPulse 520ms ease-in-out infinite alternate;
}

@keyframes timelineLeftLimitBump {
  0% {
    filter: brightness(1);
  }
  42% {
    filter: brightness(1.18) saturate(1.18);
  }
  100% {
    filter: brightness(1.04);
  }
}

@keyframes timelineLeftLimitPulse {
  from {
    opacity: 0.48;
    transform: scaleY(0.72);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes timelineTrackDropGlow {
  from {
    opacity: 0.38;
  }
  to {
    opacity: 0.74;
  }
}

.timelineTrackLabel {
  position: sticky;
  left: 0;
  z-index: 30;
  width: 108px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 8px;
  border-right: 1px solid var(--track-accent-soft, rgba(100, 116, 139, 0.28));
  background:
    linear-gradient(90deg, var(--track-accent-label, rgba(56, 189, 248, 0.18)), rgba(238, 243, 249, 0.92)),
    linear-gradient(180deg, #eef3f9, #e7edf5);
  color: var(--track-accent, #52647f);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 7px 0 14px rgba(15, 23, 42, 0.04);
  transform: translateX(var(--timeline-scroll-left, 0px));
  will-change: transform;
}

.trackName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trackControls {
  display: flex;
  gap: 4px;
  pointer-events: auto;
}

.trackControl {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--track-accent-surface, transparent);
  color: var(--track-accent, #64748b);
  font-size: 10px;
  font-weight: 900;
}

.trackControl:hover {
  background: var(--track-accent-soft, rgba(79, 111, 229, 0.1));
  color: var(--track-accent, #2346c5);
}

.trackControl.is-off {
  opacity: 0.58;
}

/* Quiet premium bottom-panel polish. */
.timelineRuler {
  --timeline-ruler-surface-top: rgba(20, 28, 40, 0.3);
  --timeline-ruler-surface-bottom: rgba(20, 28, 40, 0.3);
  --timeline-ruler-major-alpha: 0.26;
  border-bottom-color: rgba(148, 163, 184, 0.12);
}

.timelineRuler:hover {
  --timeline-ruler-surface-top: rgba(20, 28, 40, 0.34);
  --timeline-ruler-surface-bottom: rgba(20, 28, 40, 0.34);
  --timeline-ruler-major-alpha: 0.32;
  box-shadow: none;
}

.timelineTick.is-major::before {
  height: 5px;
  background: rgba(203, 213, 225, 0.72);
}

.timelineTick.is-major::after {
  background: rgba(148, 163, 184, 0.11);
  opacity: 0.42;
}

.timelineTick span {
  color: rgba(203, 213, 225, 0.72);
  font-weight: 600;
}

.timelineRuler:hover .timelineTick span {
  color: rgba(226, 232, 240, 0.86);
}

.timelineTrack {
  border-color: rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 4%, #f8fafc), #f8fafc 48%, #f5f7fb),
    #f8fafc;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 46%, transparent);
}

.timelineTrack::before,
.timelineTrackLabel {
  border-right-color: rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 8%, #f1f5f9), #eef3f8);
  color: color-mix(in srgb, var(--track-accent, #52647f) 54%, #64748b);
  box-shadow: 5px 0 12px rgba(15, 23, 42, 0.035);
}

.timelineTrack.is-track-selected {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 34%, rgba(148, 163, 184, 0.42));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 7%, #f8fafc), #f8fafc 48%, #f5f7fb),
    #f8fafc;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 58%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 10%, transparent);
}

.timelineTrack.is-drop-hover {
  border-color: color-mix(in srgb, var(--track-accent, #34d399) 46%, rgba(148, 163, 184, 0.38));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #34d399) 10%, #f8fafc), #f8fafc 48%, #f5f7fb),
    #f8fafc;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #34d399) 62%, transparent),
    0 0 0 2px color-mix(in srgb, var(--track-accent, #34d399) 18%, transparent);
}

.timelineTrack.is-drop-hover::after,
.timelineTrack.is-snap-joining::after {
  background: color-mix(in srgb, var(--track-accent, #34d399) 8%, transparent);
}

.timelineTrack.is-drop-hover .timelineTrackLabel,
.timelineTrack.is-left-limit .timelineTrackLabel {
  color: color-mix(in srgb, var(--track-accent, #34d399) 64%, #334155);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #34d399) 12%, #eef3f8), #eef3f8);
  box-shadow: 5px 0 12px rgba(15, 23, 42, 0.035);
}

.timelineTrack.is-snap-joining,
.timelineTrack.is-left-limit {
  border-color: color-mix(in srgb, var(--track-accent, #34d399) 42%, rgba(148, 163, 184, 0.38));
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #34d399) 62%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--track-accent, #34d399) 8%, transparent);
}

.timelineHScroll {
  height: 18px;
  padding: 5px 8px;
  border-top-color: rgba(148, 163, 184, 0.14);
  background: #edf2f7;
  box-shadow: none;
}

.timelineHScroll::before {
  height: 7px;
  background: rgba(148, 163, 184, 0.2);
}

.timelineHScrollThumb {
  height: 7px;
  border: 0;
  background: #8fa0b5;
  box-shadow: none;
}

.timelineHScroll:hover .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 8px;
  background: #7d8fa6;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .editToolbar,
.editorApp[data-theme="night"] .editToolbar {
  border-color: rgba(148, 163, 184, 0.12);
  background: #151c26;
}

.editorApp[data-theme="dark"] .cutToolGroup,
.editorApp[data-theme="night"] .cutToolGroup,
.editorApp[data-theme="dark"] .editToolbarRightTools,
.editorApp[data-theme="night"] .editToolbarRightTools,
.editorApp[data-theme="dark"] .timelineTools,
.editorApp[data-theme="night"] .timelineTools,
.editorApp[data-theme="dark"] .spectrumLiveToggle,
.editorApp[data-theme="night"] .spectrumLiveToggle,
.editorApp[data-theme="dark"] .editToolbar .zoomValue,
.editorApp[data-theme="night"] .editToolbar .zoomValue {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(20, 28, 40, 0.82);
  color: rgba(226, 232, 240, 0.84);
  box-shadow: none;
}

.editorApp[data-theme="dark"] .toolButton,
.editorApp[data-theme="night"] .toolButton,
.editorApp[data-theme="dark"] .rightToolButton,
.editorApp[data-theme="night"] .rightToolButton {
  color: rgba(203, 213, 225, 0.78);
}

.editorApp[data-theme="dark"] .editToolbar .toolButton:hover,
.editorApp[data-theme="dark"] .editToolbar .toolButton:focus-visible,
.editorApp[data-theme="dark"] .editToolbar .cutToolGroup .toolButton:hover,
.editorApp[data-theme="dark"] .editToolbar .cutToolGroup .toolButton:focus-visible,
.editorApp[data-theme="dark"] .rightToolButton:hover,
.editorApp[data-theme="dark"] .rightToolButton:focus-visible,
.editorApp[data-theme="night"] .editToolbar .toolButton:hover,
.editorApp[data-theme="night"] .editToolbar .toolButton:focus-visible,
.editorApp[data-theme="night"] .editToolbar .cutToolGroup .toolButton:hover,
.editorApp[data-theme="night"] .editToolbar .cutToolGroup .toolButton:focus-visible,
.editorApp[data-theme="night"] .rightToolButton:hover,
.editorApp[data-theme="night"] .rightToolButton:focus-visible {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.1);
  color: rgba(248, 250, 252, 0.94);
  box-shadow: none;
  transform: none;
}

.editorApp[data-theme="dark"] .editToolbar .toolButton.is-active,
.editorApp[data-theme="dark"] .rightToolButton.is-active,
.editorApp[data-theme="night"] .editToolbar .toolButton.is-active,
.editorApp[data-theme="night"] .rightToolButton.is-active {
  border-color: rgba(var(--accent-rgb), 0.26);
  background: rgba(var(--accent-rgb), 0.11);
  color: color-mix(in srgb, var(--accent, #22d3ee) 76%, #e2e8f0);
  box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), 0.18);
}

.editorApp[data-theme="dark"] .spectrumLiveToggle,
.editorApp[data-theme="night"] .spectrumLiveToggle {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(20, 28, 40, 0.82);
  color: rgba(226, 232, 240, 0.86);
  transform: none;
}

.editorApp[data-theme="dark"] .spectrumLiveToggle:hover,
.editorApp[data-theme="night"] .spectrumLiveToggle:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(24, 34, 48, 0.9);
  box-shadow: none;
  transform: none;
}

.editorApp[data-theme="dark"] .spectrumPulseIcon,
.editorApp[data-theme="dark"] .spectrumLiveState,
.editorApp[data-theme="night"] .spectrumPulseIcon,
.editorApp[data-theme="night"] .spectrumLiveState {
  color: color-mix(in srgb, var(--accent, #22d3ee) 72%, #cbd5e1);
}

.editorApp[data-theme="dark"] .spectrumPulseIcon span,
.editorApp[data-theme="night"] .spectrumPulseIcon span {
  box-shadow: none;
}

.editorApp[data-theme="dark"] .spectrumSwitch,
.editorApp[data-theme="night"] .spectrumSwitch {
  background: rgba(var(--accent-rgb), 0.46);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.16);
}

.editorApp[data-theme="dark"] .spectrumLiveToggle.is-off,
.editorApp[data-theme="night"] .spectrumLiveToggle.is-off {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(20, 28, 40, 0.78);
  color: rgba(148, 163, 184, 0.76);
  box-shadow: none;
}

.editorApp[data-theme="dark"] .zoomValue strong,
.editorApp[data-theme="night"] .zoomValue strong {
  color: rgba(248, 250, 252, 0.9);
}

.editorApp[data-theme="dark"] .zoomValue small,
.editorApp[data-theme="night"] .zoomValue small,
.editorApp[data-theme="dark"] .toolDivider,
.editorApp[data-theme="night"] .toolDivider {
  color: rgba(148, 163, 184, 0.72);
  background: rgba(148, 163, 184, 0.14);
}

.editorApp[data-theme="dark"] .timelineCanvas,
.editorApp[data-theme="night"] .timelineCanvas {
  background: #101720;
}

.editorApp[data-theme="dark"] .timelineRuler,
.editorApp[data-theme="night"] .timelineRuler {
  border-color: rgba(148, 163, 184, 0.1);
  --timeline-ruler-surface-top: rgba(18, 25, 35, 0.78);
  --timeline-ruler-surface-bottom: rgba(18, 25, 35, 0.78);
  --timeline-ruler-major-alpha: 0.22;
}

.editorApp[data-theme="dark"] .timelineRuler:hover,
.editorApp[data-theme="night"] .timelineRuler:hover {
  --timeline-ruler-surface-top: rgba(21, 30, 42, 0.82);
  --timeline-ruler-surface-bottom: rgba(21, 30, 42, 0.82);
  --timeline-ruler-major-alpha: 0.28;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .timelineTick.is-major::before,
.editorApp[data-theme="night"] .timelineTick.is-major::before {
  background: rgba(203, 213, 225, 0.52);
}

.editorApp[data-theme="dark"] .timelineTick.is-major::after,
.editorApp[data-theme="night"] .timelineTick.is-major::after {
  background: rgba(148, 163, 184, 0.08);
  opacity: 0.36;
}

.editorApp[data-theme="dark"] .timelineTick span,
.editorApp[data-theme="night"] .timelineTick span {
  color: rgba(203, 213, 225, 0.66);
  font-weight: 600;
}

.editorApp[data-theme="dark"] .timelineRuler:hover .timelineTick span,
.editorApp[data-theme="night"] .timelineRuler:hover .timelineTick span {
  color: rgba(226, 232, 240, 0.82);
}

.editorApp[data-theme="dark"] .timelineDropZone,
.editorApp[data-theme="night"] .timelineDropZone {
  background: #0f1620;
  scrollbar-color: #647386 #121a25;
}

.editorApp[data-theme="dark"] .timelineTrack,
.editorApp[data-theme="night"] .timelineTrack {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(
      90deg,
      #111a26 0,
      #111a26 var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 3%, #07111d) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 2%, #07111d) 52%,
      #07111d 100%
    ),
    #07111d;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 46%, transparent),
    inset 0 1px 0 rgba(148, 163, 184, 0.055),
    inset 0 -1px 0 rgba(148, 163, 184, 0.055);
}

.editorApp[data-theme="dark"] .timelineTrack:hover,
.editorApp[data-theme="night"] .timelineTrack:hover {
  border-color: rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(
      90deg,
      #131d2a 0,
      #131d2a var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 4%, #08131f) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 3%, #08131f) 52%,
      #08131f 100%
    ),
    #08131f;
}

.editorApp[data-theme="dark"] .timelineTrack::before,
.editorApp[data-theme="dark"] .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack::before,
.editorApp[data-theme="night"] .timelineTrackLabel {
  border-right-color: rgba(148, 163, 184, 0.12);
  background: linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 6%, #131d2a), #111a26);
  color: color-mix(in srgb, var(--track-accent, #a8d8ff) 54%, #94a3b8);
  box-shadow: 5px 0 12px rgba(2, 6, 23, 0.16);
}

.editorApp[data-theme="dark"] .timelineTrack.is-track-selected,
.editorApp[data-theme="night"] .timelineTrack.is-track-selected {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 34%, rgba(148, 163, 184, 0.18));
  background:
    linear-gradient(
      90deg,
      #131d2a 0,
      #131d2a var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 5%, #08131f) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 4%, #08131f) 52%,
      #08131f 100%
    ),
    #08131f;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 62%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 10%, transparent);
}

.editorApp[data-theme="dark"] .timelineTrack.is-drop-hover,
.editorApp[data-theme="night"] .timelineTrack.is-drop-hover {
  border-color: color-mix(in srgb, var(--track-accent, #34d399) 42%, rgba(148, 163, 184, 0.18));
  background:
    linear-gradient(
      90deg,
      #131d2a 0,
      #131d2a var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #34d399) 7%, #08131f) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #34d399) 5%, #08131f) 52%,
      #08131f 100%
    ),
    #08131f;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #34d399) 68%, transparent),
    0 0 0 2px color-mix(in srgb, var(--track-accent, #34d399) 12%, transparent);
}

.editorApp[data-theme="dark"] .timelineTrack.is-drop-hover .timelineTrackLabel,
.editorApp[data-theme="dark"] .timelineTrack.is-left-limit .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack.is-drop-hover .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack.is-left-limit .timelineTrackLabel {
  color: color-mix(in srgb, var(--track-accent, #34d399) 66%, #dbeafe);
  background: linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #34d399) 8%, #131d2a), #111a26);
  box-shadow: 5px 0 12px rgba(2, 6, 23, 0.16);
}

.editorApp[data-theme="dark"] .timelineTrack.is-snap-joining,
.editorApp[data-theme="dark"] .timelineTrack.is-left-limit,
.editorApp[data-theme="night"] .timelineTrack.is-snap-joining,
.editorApp[data-theme="night"] .timelineTrack.is-left-limit {
  border-color: color-mix(in srgb, var(--track-accent, #34d399) 42%, rgba(148, 163, 184, 0.18));
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #34d399) 66%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--track-accent, #34d399) 7%, transparent);
}

.editorApp[data-theme="dark"] .trackControl,
.editorApp[data-theme="night"] .trackControl {
  background: color-mix(in srgb, var(--track-accent, #38bdf8) 10%, rgba(148, 163, 184, 0.08));
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 52%, #94a3b8);
}

.editorApp[data-theme="dark"] .trackControl:hover,
.editorApp[data-theme="night"] .trackControl:hover {
  background: color-mix(in srgb, var(--track-accent, #38bdf8) 16%, rgba(148, 163, 184, 0.1));
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 66%, #cbd5e1);
}

.editorApp[data-theme="dark"] .timelineHScroll,
.editorApp[data-theme="night"] .timelineHScroll {
  border-top-color: rgba(148, 163, 184, 0.1);
  background: #121a25;
}

.editorApp[data-theme="dark"] .timelineHScroll::before,
.editorApp[data-theme="night"] .timelineHScroll::before {
  height: 7px;
  background: rgba(148, 163, 184, 0.14);
}

.editorApp[data-theme="dark"] .timelineHScrollThumb,
.editorApp[data-theme="night"] .timelineHScrollThumb {
  height: 7px;
  border: 0;
  background: #637083;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .timelineHScroll:hover .timelineHScrollThumb,
.editorApp[data-theme="dark"] .is-dragging-timeline-scroll .timelineHScrollThumb,
.editorApp[data-theme="night"] .timelineHScroll:hover .timelineHScrollThumb,
.editorApp[data-theme="night"] .is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 8px;
  background: #748197;
  box-shadow: none;
}

.timelineClip {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  min-width: 34px;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.1) 0 16px, rgba(5, 25, 27, 0.02) 16px 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #2dd4bf) 13%, #123534), #173d38 46%, #102d2d);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.18);
  user-select: none;
  cursor: grab;
  will-change: left, width, transform, opacity, filter;
  transition:
    left 72ms linear,
    width 72ms linear,
    box-shadow 120ms ease,
    opacity 120ms ease,
    filter 120ms ease,
    transform 120ms ease;
  contain: paint;
  transform: translateZ(0);
}

.timelineClip.is-muted {
  filter: grayscale(0.36);
  opacity: 0.7;
}

.timelineClip.is-light-render {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.16);
}

.clipLightFill {
  position: absolute;
  inset: 17px 0 18px;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(236, 253, 245, 0.045), rgba(236, 253, 245, 0.012)),
    rgba(9, 29, 30, 0.4);
  opacity: 0.42;
  pointer-events: none;
}

.timelineClip:active {
  cursor: grabbing;
}

.timelineClip.is-selected {
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--accent, #2dd4bf),
    0 2px 8px rgba(2, 6, 23, 0.2);
}

.clipSelectionOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: rgba(236, 253, 245, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.timelineClip.is-selected .clipSelectionOverlay {
  opacity: 0.08;
}

.clipLinkBadge {
  position: absolute;
  right: 8px;
  bottom: 20px;
  z-index: 6;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #ecfeff;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--track-accent, #34d399) 78%, #0f172a), color-mix(in srgb, var(--track-accent, #34d399) 46%, #0f172a)),
    rgba(15, 23, 42, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 10px color-mix(in srgb, var(--track-accent, #34d399) 34%, transparent);
  pointer-events: none;
}

.clipLinkBadge .uiIcon {
  width: 12px;
  height: 12px;
  stroke-width: 2.1;
}

.timelineClip.is-snap-edge-left,
.timelineClip.is-snap-edge-right,
.timelineClip.is-snap-target-left,
.timelineClip.is-snap-target-right {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.96),
    0 0 0 1px var(--track-accent, #34d399),
    0 0 16px var(--track-accent-soft, rgba(52, 211, 153, 0.28)),
    0 8px 18px rgba(15, 23, 42, 0.18);
}

.timelineClip.is-snap-edge-left::before,
.timelineClip.is-snap-edge-right::before,
.timelineClip.is-snap-target-left::before,
.timelineClip.is-snap-target-right::before {
  content: none;
}

.is-dragging-clip .timelineClip.is-selected {
  opacity: 0.9;
  filter: saturate(1.08) brightness(1.04);
  transform: translateY(-2px) scale(0.998);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.86),
    0 6px 14px rgba(15, 23, 42, 0.14);
}

.timelineClip.is-drag-source-hidden,
.is-dragging-clip .timelineClip.is-drag-source-hidden {
  /* Legacy fallback: hidden source mode. New professional clip move uses
     is-drag-source-placeholder so users can still see where the clip came from. */
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
  transform: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.timelineClip.is-drag-source-placeholder,
.is-dragging-clip .timelineClip.is-drag-source-placeholder {
  opacity: 0.42 !important;
  filter: saturate(0.72) brightness(0.9) !important;
  border-style: dashed !important;
  border-color: rgba(148, 163, 184, 0.48) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.64), rgba(30, 41, 59, 0.34)),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0 10px, transparent 10px 20px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(15, 23, 42, 0.12) !important;
  transform: none !important;
  pointer-events: none !important;
}

.timelineClip.is-floating-drag-preview {
  position: fixed !important;
  margin: 0 !important;
  z-index: 10040 !important;
  pointer-events: none !important;
  transition: none !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  will-change: transform;
  transform: translate3d(var(--floating-drag-x, -10000px), var(--floating-drag-y, -10000px), 0) !important;
  contain: layout paint style;
  opacity: 0.96 !important;
  cursor: grabbing;
  overflow: hidden !important;
  min-width: 112px !important;
  max-width: 260px !important;
  min-height: 38px !important;
  max-height: 72px !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(45, 212, 191, 0.24),
    0 18px 40px rgba(2, 6, 23, 0.32) !important;
}

.timelineClip.is-floating-drag-preview,
.timelineClip.is-floating-drag-preview * {
  user-select: none !important;
  pointer-events: none !important;
}

.timelineClip.is-floating-drag-preview .clipThumbStrip,
.timelineClip.is-floating-drag-preview .clipThumbStrip-canvas,
.timelineClip.is-floating-drag-preview .clipThumbCanvas,
.timelineClip.is-floating-drag-preview canvas,
.timelineClip.is-floating-drag-preview img,
.timelineClip.is-floating-drag-preview video {
  max-height: 100% !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

.timelineClip.is-floating-drag-preview .clipLightFill {
  inset: 17px 0 8px !important;
}

.timelineClip.is-live-drag {
  transition: none !important;
  z-index: 28;
  opacity: 0.94;
  filter: saturate(1.08) brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(45, 212, 191, 0.28),
    0 10px 22px rgba(15, 23, 42, 0.18) !important;
  pointer-events: none;
  will-change: transform;
}

.timelineClip.is-drag-preview {
  cursor: grabbing;
}

@keyframes clipDragSourceShimmer {
  0% {
    background-position: -240px 0, 0 0, 0 0;
  }
  100% {
    background-position: calc(100% + 240px) 0, 0 0, 0 0;
  }
}

.timelineSelectionBox {
  position: fixed;
  z-index: 9997;
  border: 1px solid rgba(45, 212, 191, 0.92);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(56, 189, 248, 0.12)),
    rgba(15, 23, 42, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    0 10px 24px rgba(8, 47, 73, 0.16);
  pointer-events: none;
}

.is-selecting-timeline-clips,
.is-selecting-timeline-clips * {
  cursor: crosshair !important;
  user-select: none;
}

.timelineClip.is-added-shimmer::before {
  content: "";
  position: absolute;
  inset: -32% -18%;
  z-index: 7;
  border-radius: inherit;
  background:
    linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, 0.5) 44%, rgba(209, 250, 229, 0.32) 54%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 48%);
  filter: blur(0.2px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: clipAddedShimmer 920ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes clipAddedShimmer {
  0% {
    opacity: 0;
    transform: translateX(-42%) skewX(-14deg);
  }
  22% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateX(48%) skewX(-14deg);
  }
}

.timelineClip.is-split-left::after,
.timelineClip.is-split-right::before {
  content: "";
  position: absolute;
  top: 2px;
  width: 2px;
  height: calc(100% - 4px);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16);
  animation: clipCrackFlash 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  z-index: 8;
}

.timelineClip.is-split-left::after {
  right: 0;
}

.timelineClip.is-split-right::before {
  left: 0;
}

@keyframes clipCrackFlash {
  0% {
    opacity: 0;
    transform: scaleY(0.18);
  }
  26% {
    opacity: 1;
    transform: scaleY(1.14);
  }
  58% {
    opacity: 0.82;
    transform: scaleY(0.92);
  }
  100% {
    opacity: 0;
    transform: scaleY(0.76);
  }
}

.clipCutShimmer {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), rgba(209, 250, 229, 0.28), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
  mix-blend-mode: screen;
  animation: clipCutShimmer 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.timelineClip.is-cut-head .clipCutShimmer {
  left: 0;
  width: min(44%, 180px);
  border-radius: 8px 0 0 8px;
}

.timelineClip.is-cut-tail .clipCutShimmer {
  right: 0;
  width: min(44%, 180px);
  border-radius: 0 8px 8px 0;
}

.timelineClip.is-cut-full .clipCutShimmer {
  inset-inline: 0;
  border-radius: inherit;
}

@keyframes clipCutShimmer {
  0% {
    opacity: 0;
    transform: translateX(-48%) scaleX(0.35);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(48%) scaleX(1.35);
  }
}

.timelineClip[data-kind="audio"] {
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.09) 0 16px, rgba(5, 28, 33, 0.03) 16px 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #2dd4bf) 12%, #143a36), #193b36);
  border-color: rgba(157, 216, 207, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(2, 6, 23, 0.16);
}

.timelineClip[data-kind="image"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%),
    #7c3aed;
  border-color: rgba(232, 225, 255, 0.78);
}

.timelineClip[data-kind="video"],
.timelineClip[data-kind="recording"] {
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.1) 0 16px, rgba(5, 28, 33, 0.02) 16px 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #2dd4bf) 14%, #113635), #153f3a 44%, #102f2f);
  border-color: rgba(157, 216, 207, 0.56);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(2, 6, 23, 0.16);
}

.timelineClip[data-kind="text"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03)),
    radial-gradient(circle at 18% 22%, rgba(253, 186, 116, 0.22), transparent 35%),
    linear-gradient(135deg, #be123c 0%, #9d174d 48%, #6d28d9 100%);
  border-color: rgba(251, 207, 232, 0.72);
}

.timelineClip.is-selected {
  border-color: transparent;
  box-shadow:
    0 0 0 2px var(--accent, #2dd4bf),
    0 2px 8px rgba(2, 6, 23, 0.2);
}

.clipWaveform {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 16px;
  display: block;
  opacity: 1;
  pointer-events: none;
  z-index: 4;
  border-radius: 0 0 3px 3px;
  background:
    linear-gradient(180deg, rgba(5, 46, 44, 0.04), rgba(2, 26, 29, 0.34)),
    rgba(2, 37, 41, 0.22);
  overflow: hidden;
}

.clipWaveform-pending,
.clipWaveform-unavailable {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(3, 7, 18, 0.22)),
    rgba(8, 15, 24, 0.18);
}

.clipWaveform-pending::before,
.clipWaveform-unavailable::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.18);
  transform: translateY(-50%);
}

.clipWaveform-pending::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.08), transparent);
  animation: waveformPendingSweep 1.8s linear infinite;
}

.clipWaveform-unavailable::before {
  background: rgba(226, 232, 240, 0.1);
}

.clipWaveformSvg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.16));
  transform: scaleY(var(--clip-waveform-live-scale, 1));
  transform-origin: 50% 50%;
}

.clipWaveformCanvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.clipThumbCanvas {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  height: 100%;
  pointer-events: none;
}

.clipWaveform-canvas {
  transform: translateZ(0);
}

.clipWaveformSvg-bars,
.clipWaveformSvg-envelope,
.clipWaveformSvg-stems {
  color: rgba(106, 252, 244, 0.82);
  filter: none;
}

.clipWaveformSvg path,
.clipWaveformSvg rect {
  fill: currentColor;
}

.clipWaveformSvg-stems path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 0.72px;
  opacity: 0.88;
  vector-effect: non-scaling-stroke;
}

.clipWaveformSvg-bars rect {
  shape-rendering: crispEdges;
}

.clipWaveformSvg-envelope path {
  opacity: 0.82;
}

.clipWaveform i {
  flex: 1 1 0;
  width: auto;
  min-width: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.16);
}

.timelineClip[data-kind="audio"] .clipWaveform {
  left: 6px;
  right: 6px;
  top: 18px;
  bottom: 7px;
  height: auto;
  opacity: 1;
}

.timelineClip[data-kind="audio"] .clipWaveform::before {
  display: none;
}

.clipGainLine {
  content: "";
  position: absolute;
  display: block;
  left: 7px;
  right: 7px;
  z-index: 7;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  transform: translateY(-50%);
  pointer-events: auto;
  opacity: 0.42;
  transition: opacity 120ms ease;
}

.clipGainLine::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  transform: translateY(-50%);
}

.clipGainLine span {
  position: absolute;
  right: 0;
  bottom: 6px;
  min-width: 54px;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(3, 7, 18, 0.68);
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  font-weight: 550;
  line-height: 1.05;
  text-align: center;
  box-shadow: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.timelineClip:hover .clipGainLine,
.is-dragging-clip-gain .clipGainLine {
  opacity: 1;
}

.is-dragging-clip .timelineClip .clipGainLine {
  opacity: 0.2;
}

.is-dragging-clip-gain .clipGainLine span {
  opacity: 1;
  transform: translateY(0);
}

.clipGainTooltip {
  position: fixed;
  z-index: 160;
  min-width: 58px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  display: grid;
  gap: 2px;
  background: rgba(3, 7, 18, 0.72);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  box-shadow: none;
  pointer-events: none;
}

.clipGainTooltip[hidden] {
  display: none;
}

.clipGainTooltip strong {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

.clipGainTooltip span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
}

.timelineClip[data-kind="audio"] .clipWaveform i {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(190, 255, 246, 0.76));
}

.timelineClip[data-kind="audio"] .clipWaveformSvg {
  color: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.14));
}

.timelineClip.waveform-pending[data-kind="audio"],
.timelineClip.waveform-pending[data-kind="video"],
.timelineClip.waveform-pending[data-kind="recording"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 18%, rgba(5, 28, 33, 0.03) 18% 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #2dd4bf) 18%, #0f172a), #102126 44%, #111827);
  animation: none;
}

.timelineClip.waveform-deferred[data-kind="video"],
.timelineClip.waveform-deferred[data-kind="recording"],
.timelineClip.waveform-fallback[data-kind="video"],
.timelineClip.waveform-fallback[data-kind="recording"] {
  animation: none;
}

.timelineClip.waveform-pending .clipWaveformSvg {
  animation: waveformReveal 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-dragging-clip .timelineClip.waveform-pending .clipWaveformSvg {
  animation: none;
}

.is-dragging-playhead .clipWaveform-pending::after,
.is-dragging-clip .clipWaveform-pending::after,
.is-dragging-timeline-zoom .clipWaveform-pending::after {
  animation: none;
  opacity: 0;
}

.clipWaveform-loading {
  justify-content: flex-start;
  gap: 5px;
  opacity: 0.55;
}

.clipWaveform-loading i {
  flex: 0 0 4px;
  min-width: 4px;
  height: 56% !important;
}

@keyframes timelineWaveformScan {
  to {
    background-position: 180px 0, 0 0, 0 0;
  }
}

@keyframes waveformReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0.62;
  }
  100% {
    clip-path: inset(0);
    opacity: 1;
  }
}

@keyframes waveformPendingSweep {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(420%);
  }
}

.assetThumb .clipWaveform {
  position: static;
  width: 100%;
  height: 100%;
  padding: 7px 4px;
  opacity: 0.98;
  justify-content: center;
}

.assetThumb .clipWaveform i {
  background: #2dd4bf;
}

.assetThumb .clipWaveformSvg {
  color: #2dd4bf;
}

.clipThumb {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.timelineClip[data-kind="video"] > .clipThumb,
.timelineClip[data-kind="recording"] > .clipThumb {
  display: none;
}

.clipThumbStrip {
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  bottom: 19px;
  z-index: 1;
  border-radius: 0;
  opacity: 1;
  filter: saturate(1.05) contrast(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(15, 23, 42, 0.28);
  pointer-events: none;
  overflow: hidden;
  background-color: rgba(7, 13, 22, 0.48);
}

.clipThumbStrip.is-repeat {
  background-image: var(--clip-thumb-image);
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-size: 68px 100%;
}

.clipThumbStrip.is-poster {
  background-image: var(--clip-thumb-image);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 100%;
}

.clipThumbStrip.is-thumb-loading {
  background:
    linear-gradient(90deg, rgba(236, 253, 245, 0.032), transparent 18%, rgba(236, 253, 245, 0.02) 46%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(190, 242, 230, 0.035) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, rgba(11, 34, 34, 0.34), rgba(5, 18, 20, 0.44));
  opacity: 0.5;
}

.clipThumbStrip.has-frames {
  display: flex;
  align-items: stretch;
}

.clipThumbStrip.has-frames i {
  min-width: var(--clip-thumb-tile-width, 84px);
  width: var(--clip-thumb-tile-width, 84px);
  flex: 0 0 var(--clip-thumb-tile-width, 84px);
  background-image: var(--clip-thumb-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.12);
}

.clipThumbStrip.is-light-strip {
  opacity: 0.96;
  filter: saturate(0.92) contrast(1.01);
  background-color: rgba(9, 29, 30, 0.42);
}

.timelineClip.is-light-render .clipThumbStrip {
  top: 17px;
  bottom: 19px;
}

.clipThumbStrip.has-frames.is-virtual {
  display: block;
  background:
    linear-gradient(90deg, rgba(236, 253, 245, 0.025), transparent 18%, rgba(236, 253, 245, 0.016) 48%, transparent),
    rgba(9, 29, 30, 0.34);
}

.clipThumbStrip.is-overview-base {
  z-index: 1;
}

.clipThumbStrip.is-overview-placeholder {
  opacity: 0.72;
  filter: saturate(0.86) contrast(0.94);
  background-size: 84px 100%;
}

.clipThumbStrip.is-overview-tiled-single {
  opacity: 0.86;
  filter: saturate(0.92) contrast(0.98);
  background-size: 78px 100%;
}

.clipThumbStrip.is-overview-provisional {
  opacity: 0.9;
  filter: saturate(0.94) contrast(0.98);
}

.clipThumbStrip.has-frames.is-virtual i {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 0;
  width: auto;
  flex: none;
  background-position: center;
  background-size: cover;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.11),
    inset 1px 0 0 rgba(0, 0, 0, 0.22);
}

.clipThumbStrip.has-frames.is-virtual i.is-thumb-pending {
  opacity: 0.86;
  background-image:
    linear-gradient(90deg, rgba(236, 253, 245, 0.09), transparent 26%, rgba(236, 253, 245, 0.055) 58%, transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 16px),
    var(--clip-thumb-image, linear-gradient(180deg, rgba(17, 54, 52, 0.72), rgba(6, 25, 29, 0.82)));
  background-color: rgba(9, 35, 34, 0.66);
  filter: saturate(0.9) contrast(0.98) brightness(1);
}

.clipThumbStrip.has-frames.is-virtual i.is-thumb-real-pending {
  opacity: 0.72;
  background-image:
    linear-gradient(135deg, rgba(148, 163, 184, 0.08), transparent 42%, rgba(236, 253, 245, 0.055)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 20px);
  background-color: rgba(5, 22, 26, 0.74);
  filter: none;
}

.clipThumbStrip.has-frames.is-virtual {
  contain: strict;
}

.clipThumbStrip.has-frames.is-virtual i {
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: opacity 80ms linear;
}

.clipThumbStrip.has-frames.is-virtual i.is-thumb-near,
.clipThumbStrip.has-frames.is-virtual i.is-thumb-overview {
  opacity: 0.96;
  filter: saturate(0.96) contrast(1.01);
}

.clipThumbStrip.has-frames.is-virtual i.is-thumb-poster {
  opacity: 0.88;
  filter: saturate(0.9) contrast(0.96);
}

.clipThumbStrip-canvas {
  display: block;
  z-index: 2;
  background: transparent;
  contain: strict;
}

.timelineClip.is-mirrored .clipThumbStrip {
  transform: scaleX(-1);
}

.timelineClip[data-kind="image"] .clipThumbStrip {
  top: 17px;
  bottom: 3px;
  background-size: 72px 100%;
}

.clipThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clipLabel {
  position: absolute;
  z-index: 6;
  top: 2px;
  left: 5px;
  right: 5px;
  height: 14px;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 4px;
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 14px;
  font-weight: 650;
  color: rgba(240, 253, 250, 0.94);
  background: rgba(3, 20, 22, 0.28);
  text-shadow: 0 1px 1px rgba(3, 7, 18, 0.28);
}

.clipTransitionBadge {
  position: absolute;
  top: 17px;
  bottom: 19px;
  width: min(var(--transition-duration-width, 26px), 48%);
  z-index: 4;
  pointer-events: auto;
  opacity: 0.92;
  cursor: ew-resize;
  touch-action: none;
}

.clipTransitionBadge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08)),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.52), rgba(var(--accent-rgb), 0.04));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 14px rgba(var(--accent-rgb), 0.2);
}

.clipTransitionBadge-in {
  left: 0;
}

.clipTransitionBadge-out {
  right: 0;
}

.clipTransitionBadge-out::before {
  transform: scaleX(-1);
}

.timelineClip.is-transition-drop-target-left,
.timelineClip.is-transition-drop-target-right {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 1px var(--accent, #34d399),
    0 0 18px rgba(var(--accent-rgb), 0.3),
    0 8px 18px rgba(15, 23, 42, 0.18);
}

.timelineClip.is-transition-drop-target-left .clipResize-left::before,
.timelineClip.is-transition-drop-target-right .clipResize-right::before {
  width: 2px;
  background: var(--accent, #34d399);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.78),
    0 0 12px rgba(var(--accent-rgb), 0.52);
}

.timelineTransitionDropGuide {
  position: absolute;
  z-index: 66;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.8),
    0 0 14px rgba(var(--accent-rgb), 0.5),
    0 0 28px rgba(var(--accent-rgb), 0.24);
  pointer-events: none;
}

.timelineTransitionDropGuide.is-junction {
  width: auto;
  margin-left: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.28) 50%, rgba(var(--accent-rgb), 0.05));
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
    inset 14px 0 20px -12px rgba(15, 23, 42, 0.6),
    inset -14px 0 20px -12px rgba(15, 23, 42, 0.6),
    0 0 0 1px rgba(var(--accent-rgb), 0.9),
    0 12px 28px rgba(15, 23, 42, 0.38);
}

.timelineTransitionDropGuide.is-junction::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
}

.timelineTransitionDropGuide::after {
  content: attr(data-label);
  position: absolute;
  left: 7px;
  top: 9px;
  max-width: 150px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.24);
}

.clipResize {
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  z-index: 5;
  background: transparent;
  pointer-events: auto;
}

.clipResize::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.18);
  opacity: 0.88;
  transition: width 120ms ease, opacity 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.timelineClip:hover .clipResize::before,
.timelineClip.is-selected .clipResize::before {
  width: 1px;
  opacity: 1;
  box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.16), 0 0 5px rgba(255, 255, 255, 0.34);
}

.timelineClip.is-snap-edge-left .clipResize-left::before,
.timelineClip.is-snap-edge-right .clipResize-right::before,
.timelineClip.is-snap-target-left .clipResize-left::before,
.timelineClip.is-snap-target-right .clipResize-right::before {
  width: 2px;
  background: var(--track-accent, #34d399);
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.76),
    0 0 10px var(--track-accent, #34d399),
    0 0 18px var(--track-accent-soft, rgba(52, 211, 153, 0.26));
}

.timelineClip.is-snap-edge-left .clipResize-left,
.timelineClip.is-snap-target-left .clipResize-left {
  background: linear-gradient(90deg, var(--track-accent-soft, rgba(52, 211, 153, 0.24)), transparent);
}

.timelineClip.is-snap-edge-right .clipResize-right,
.timelineClip.is-snap-target-right .clipResize-right {
  background: linear-gradient(270deg, var(--track-accent-soft, rgba(52, 211, 153, 0.24)), transparent);
}

.clipResize::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  opacity: 0;
  transform: translateY(-50%) scaleY(0.72);
  transition: opacity 120ms ease, transform 120ms ease;
}

.timelineClip:hover .clipResize::after,
.timelineClip.is-selected .clipResize::after {
  opacity: 0.54;
  transform: translateY(-50%) scaleY(1);
}

.timelineClip.is-snap-edge-left .clipResize-left::after,
.timelineClip.is-snap-edge-right .clipResize-right::after,
.timelineClip.is-snap-target-left .clipResize-left::after,
.timelineClip.is-snap-target-right .clipResize-right::after {
  background: var(--track-accent, #34d399);
  opacity: 0.9;
  transform: translateY(-50%) scaleY(1.12);
}

.clipResize-left {
  left: -1px;
  cursor: ew-resize;
}

.clipResize-left::before {
  left: 0;
}

.clipResize-left::after {
  left: 0;
}

.clipResize-right {
  right: -1px;
  cursor: ew-resize;
}

.clipResize-right::before {
  right: 0;
}

.clipResize-right::after {
  right: 0;
}

.timelinePlayhead {
  position: absolute;
  top: 0;
  left: 108px;
  width: 16px;
  height: calc(100% - 18px);
  margin-left: -8px;
  background: transparent;
  z-index: 70;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
  filter: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  overflow: visible;
  contain: none;
  --playhead-time-y: 28px;
  --playhead-time-x: 0px;
  --playhead-time-anchor: -100%;
  --playhead-time-gap: -8px;
}

.timelinePlayhead::before,
.timelinePlayhead::after {
  content: none;
}

.timelinePlayheadTime,
.timelinePlayheadHandle,
.timelinePlayheadLine {
  position: absolute;
  pointer-events: none;
}

.timelinePlayheadTime {
  left: 50%;
  top: calc(var(--playhead-time-y, 28px) + var(--playhead-time-gap, -6px));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 52px;
  padding: 3px 10px 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  background: #020617;
  color: #ffffff;
  font-family: "Segoe UI", "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate(calc(-50% + var(--playhead-time-x, 0px)), var(--playhead-time-anchor, -100%));
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.30);
  transition: opacity 90ms linear;
}

.timelinePlayheadHandle {
  left: 50%;
  top: 4px;
  z-index: 3;
  width: 12px;
  height: 19px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px 999px 999px 999px;
  background: #ffffff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.36), 0 2px 5px rgba(2, 6, 23, 0.22);
}

.timelinePlayheadLine {
  left: 50%;
  top: 21px;
  z-index: 2;
  width: 1px;
  height: calc(100% - 21px);
  border-radius: 999px;
  background: #020617;
  transform: none;
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.04);
}

.timelinePlayhead:hover .timelinePlayheadTime,
.timelinePlayhead.is-time-visible .timelinePlayheadTime,
.is-dragging-playhead .timelinePlayhead .timelinePlayheadTime {
  opacity: 1;
}

.timelinePlayhead:hover .timelinePlayheadHandle,
.timelinePlayhead.is-time-visible .timelinePlayheadHandle,
.is-dragging-playhead .timelinePlayhead .timelinePlayheadHandle {
  border-color: rgba(255, 255, 255, 0.98);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.48), 0 1px 3px rgba(2, 6, 23, 0.30);
}

.timelinePlayhead:hover .timelinePlayheadLine,
.timelinePlayhead.is-time-visible .timelinePlayheadLine,
.is-dragging-playhead .timelinePlayhead .timelinePlayheadLine {
  background: #000000;
}

.editorApp[data-theme="dark"] .timelinePlayheadTime,
.editorApp[data-theme="night"] .timelinePlayheadTime {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.editorApp[data-theme="dark"] .timelinePlayheadHandle,
.editorApp[data-theme="night"] .timelinePlayheadHandle {
  border-color: rgba(255, 255, 255, 0.78);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.editorApp[data-theme="dark"] .timelinePlayheadLine,
.editorApp[data-theme="night"] .timelinePlayheadLine {
  background: #ffffff;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .timelinePlayhead:hover .timelinePlayheadHandle,
.editorApp[data-theme="dark"] .timelinePlayhead.is-time-visible .timelinePlayheadHandle,
.editorApp[data-theme="dark"] .is-dragging-playhead .timelinePlayhead .timelinePlayheadHandle,
.editorApp[data-theme="night"] .timelinePlayhead:hover .timelinePlayheadHandle,
.editorApp[data-theme="night"] .timelinePlayhead.is-time-visible .timelinePlayheadHandle,
.editorApp[data-theme="night"] .is-dragging-playhead .timelinePlayhead .timelinePlayheadHandle {
  border-color: rgba(255, 255, 255, 0.92);
  background: #ffffff;
}

.editorApp[data-theme="dark"] .timelinePlayhead:hover .timelinePlayheadLine,
.editorApp[data-theme="dark"] .timelinePlayhead.is-time-visible .timelinePlayheadLine,
.editorApp[data-theme="dark"] .is-dragging-playhead .timelinePlayhead .timelinePlayheadLine,
.editorApp[data-theme="night"] .timelinePlayhead:hover .timelinePlayheadLine,
.editorApp[data-theme="night"] .timelinePlayhead.is-time-visible .timelinePlayheadLine,
.editorApp[data-theme="night"] .is-dragging-playhead .timelinePlayhead .timelinePlayheadLine {
  background: #ffffff;
}

.is-dragging-playhead .timelinePlayhead,
.is-dragging-playhead .timelinePlayheadTime {
  transition: none;
}

.is-dragging-playhead,
.is-dragging-playhead * {
  cursor: ew-resize !important;
}

.is-dragging-timeline-zoom,
.is-dragging-timeline-zoom * {
  cursor: var(--timeline-zoom-cursor) !important;
}

.is-dragging-clip-gain,
.is-dragging-clip-gain * {
  cursor: ns-resize !important;
}

.is-dragging-clip,
.is-dragging-clip * {
  cursor: grabbing !important;
}

.is-dragging-timeline-scroll,
.is-dragging-timeline-scroll * {
  cursor: grabbing !important;
}

.timelineBar {
  display: grid;
  grid-template-columns: 50px 90px minmax(180px, 1fr) 80px 54px;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  background: rgba(255, 255, 255, 0.86);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.05);
}

.roundPlay {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff6369, #f43f5e);
  color: #ffffff;
  font-size: 0;
  position: relative;
  box-shadow: 0 10px 22px rgba(244, 63, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.roundPlay:hover {
  filter: saturate(1.06);
  transform: translateY(-1px);
  box-shadow: 0 13px 26px rgba(244, 63, 94, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.roundPlay .uiIcon {
  width: 22px;
  height: 22px;
  stroke-width: 0;
  fill: currentColor;
}

.roundPlay::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 13px;
  border-left: 13px solid #ffffff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.roundPlay.is-playing::before {
  left: 14px;
  top: 13px;
  width: 5px;
  height: 18px;
  border: 0;
  background: #ffffff;
  box-shadow: 10px 0 0 #ffffff;
}

.roundPlay.is-preparing {
  animation: previewPreparePulse 920ms ease-in-out infinite;
}

@keyframes previewPreparePulse {
  0%, 100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.2) brightness(1.08);
  }
}

.roundPlay[hidden],
.timelineRangeHidden {
  display: none !important;
}

.timePill {
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eef2f7;
  color: #111827;
  font-family: "Segoe UI", "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 880;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.timeText {
  color: #64748b;
  font-family: "Segoe UI", "Inter", "Noto Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.timelineRange {
  width: 100%;
  height: 22px;
  accent-color: var(--accent);
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.timelineRange::-webkit-slider-runnable-track,
.zoomRange::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.timelineRange::-webkit-slider-thumb,
.zoomRange::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.22);
  appearance: none;
}

.zoomRange::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--zoom-fill, 0%), rgba(148, 163, 184, 0.24) var(--zoom-fill, 0%) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.zoomRange::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -5.5px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--accent) 20%, #ffffff));
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18), 0 0 0 4px rgba(var(--accent-rgb), 0.1);
}

.zoomRange::-moz-range-track {
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.zoomRange::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

.zoomRange::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--accent) 20%, #ffffff));
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18), 0 0 0 4px rgba(var(--accent-rgb), 0.1);
}

.editorApp[data-theme="dark"] .timelineTools,
.editorApp[data-theme="night"] .timelineTools {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .timelineTools::before,
.editorApp[data-theme="night"] .timelineTools::before {
  background: none;
  opacity: 0;
}

.editorApp[data-theme="dark"] .timelineTools .iconButton,
.editorApp[data-theme="night"] .timelineTools .iconButton {
  border-color: transparent;
  background: transparent;
  color: #d9e3ef;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .timelineTools .iconButton:hover,
.editorApp[data-theme="night"] .timelineTools .iconButton:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .zoomRange::-webkit-slider-runnable-track,
.editorApp[data-theme="night"] .zoomRange::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--accent) 0 var(--zoom-fill, 0%), rgba(71, 85, 105, 0.56) var(--zoom-fill, 0%) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(15, 23, 42, 0.24);
}

.editorApp[data-theme="dark"] .zoomRange::-webkit-slider-thumb,
.editorApp[data-theme="night"] .zoomRange::-webkit-slider-thumb,
.editorApp[data-theme="dark"] .zoomRange::-moz-range-thumb,
.editorApp[data-theme="night"] .zoomRange::-moz-range-thumb {
  border-color: rgba(15, 23, 42, 0.9);
  background: linear-gradient(180deg, #f8fafc, #dbe4f0);
  box-shadow: 0 4px 10px rgba(2, 6, 23, 0.42), 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}

.editorApp[data-theme="dark"] .zoomRange::-moz-range-track,
.editorApp[data-theme="night"] .zoomRange::-moz-range-track {
  background: rgba(71, 85, 105, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(15, 23, 42, 0.24);
}

.editorApp[data-theme="dark"] .zoomRange::-moz-range-progress,
.editorApp[data-theme="night"] .zoomRange::-moz-range-progress {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

.editorApp[data-theme="dark"] .zoomValue,
.editorApp[data-theme="night"] .zoomValue {
  background: rgba(15, 23, 42, 0.58);
  border-color: rgba(148, 163, 184, 0.14);
  color: #a8b4c7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.editorApp[data-theme="dark"] .zoomValue strong,
.editorApp[data-theme="night"] .zoomValue strong {
  color: #f8fafc;
}

.editorApp[data-theme="dark"] .zoomValue small,
.editorApp[data-theme="night"] .zoomValue small {
  color: #94a3b8;
}

.controlRow input[type="range"],
.timelineRange,
.zoomRange {
  --range-fill: 0%;
  --range-empty: rgba(100, 116, 139, 0.22);
  --range-border: rgba(148, 163, 184, 0.16);
  --range-track-height: 10px;
  --range-thumb-size: 22px;
  --range-thumb-margin: -7px;
  --range-thumb-border: rgba(255, 255, 255, 0.96);
  --range-thumb-surface: radial-gradient(circle at 50% 50%, var(--accent) 0 26%, #ffffff 29% 100%);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  outline: none;
  cursor: pointer;
  touch-action: pan-y;
}

.controlRow input[type="range"] {
  height: 32px;
  padding: 0;
}

.timelineRange {
  height: 32px;
  --range-track-height: 7px;
  --range-thumb-size: 20px;
  --range-thumb-margin: -6.5px;
}

.zoomRange {
  height: 32px;
  --range-track-height: 9px;
  --range-thumb-size: 22px;
  --range-thumb-margin: -7.5px;
}

.timelineTools {
  border-color: rgba(var(--accent-rgb), 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(var(--accent-rgb), 0.06)),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.timelineTools .iconButton {
  border-color: rgba(var(--accent-rgb), 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--accent-rgb), 0.08)),
    #ffffff;
  color: var(--accent-dark);
}

.controlRow input[type="range"]::-webkit-slider-runnable-track,
.timelineRange::-webkit-slider-runnable-track,
.zoomRange::-webkit-slider-runnable-track {
  height: var(--range-track-height);
  border: 1px solid var(--range-border);
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 82%, #ffffff) 0,
      var(--accent) var(--range-fill),
      var(--range-empty) var(--range-fill),
      var(--range-empty) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(15, 23, 42, 0.07),
    0 0 16px rgba(var(--accent-rgb), 0.08);
}

.zoomRange::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 84%, #ffffff) 0,
      var(--accent) var(--zoom-fill, 0%),
      var(--range-empty) var(--zoom-fill, 0%),
      var(--range-empty) 100%);
}

.controlRow input[type="range"]::-webkit-slider-thumb,
.timelineRange::-webkit-slider-thumb,
.zoomRange::-webkit-slider-thumb {
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  margin-top: var(--range-thumb-margin);
  border: 2px solid var(--range-thumb-border);
  border-radius: 999px;
  background: var(--range-thumb-surface);
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.24),
    0 0 0 5px rgba(var(--accent-rgb), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow 140ms ease, filter 140ms ease, transform 140ms ease;
}

.controlRow input[type="range"]:hover::-webkit-slider-thumb,
.timelineRange:hover::-webkit-slider-thumb,
.zoomRange:hover::-webkit-slider-thumb {
  filter: saturate(1.12) brightness(1.04);
  box-shadow:
    0 7px 18px rgba(15, 23, 42, 0.28),
    0 0 0 7px rgba(var(--accent-rgb), 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.controlRow input[type="range"]:active::-webkit-slider-thumb,
.timelineRange:active::-webkit-slider-thumb,
.zoomRange:active::-webkit-slider-thumb {
  transform: scale(1.08);
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.3),
    0 0 0 9px rgba(var(--accent-rgb), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.controlRow input[type="range"]::-moz-range-track,
.timelineRange::-moz-range-track,
.zoomRange::-moz-range-track {
  height: var(--range-track-height);
  border: 1px solid var(--range-border);
  border-radius: 999px;
  background: var(--range-empty);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.controlRow input[type="range"]::-moz-range-progress,
.timelineRange::-moz-range-progress,
.zoomRange::-moz-range-progress {
  height: var(--range-track-height);
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 82%, #ffffff), var(--accent));
}

.controlRow input[type="range"]::-moz-range-thumb,
.timelineRange::-moz-range-thumb,
.zoomRange::-moz-range-thumb {
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border: 2px solid var(--range-thumb-border);
  border-radius: 999px;
  background: var(--range-thumb-surface);
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.24),
    0 0 0 5px rgba(var(--accent-rgb), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transition: box-shadow 140ms ease, filter 140ms ease, transform 140ms ease;
}

.controlRow input[type="range"]:focus-visible,
.timelineRange:focus-visible,
.zoomRange:focus-visible {
  outline: none;
}

.controlRow input[type="range"]:focus-visible::-webkit-slider-runnable-track,
.timelineRange:focus-visible::-webkit-slider-runnable-track,
.zoomRange:focus-visible::-webkit-slider-runnable-track {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 0 4px rgba(var(--accent-rgb), 0.16),
    0 0 20px rgba(var(--accent-rgb), 0.12);
}

.editorApp[data-theme="dark"] .controlRow input[type="range"],
.editorApp[data-theme="night"] .controlRow input[type="range"],
.editorApp[data-theme="dark"] .timelineRange,
.editorApp[data-theme="night"] .timelineRange,
.editorApp[data-theme="dark"] .zoomRange,
.editorApp[data-theme="night"] .zoomRange {
  --range-empty: rgba(71, 85, 105, 0.6);
  --range-border: rgba(148, 163, 184, 0.16);
  --range-thumb-border: rgba(15, 23, 42, 0.92);
  --range-thumb-surface: radial-gradient(circle at 50% 50%, var(--accent) 0 26%, #f8fafc 30% 100%);
}

#volumeRange {
  --range-empty: rgba(226, 232, 240, 0.24);
  --range-border: rgba(226, 232, 240, 0.12);
  --range-track-height: 4px;
  --range-thumb-size: 14px;
  --range-thumb-margin: -5px;
  --range-thumb-border: rgba(15, 23, 42, 0.7);
  --range-thumb-surface: #f8fafc;
  height: 24px;
}

.controlRow #volumeRange::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0 var(--range-fill), var(--range-empty) var(--range-fill) 100%);
  box-shadow: none;
}

.controlRow #volumeRange::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid rgba(15, 23, 42, 0.7);
  background: #f8fafc;
  box-shadow: none;
}

.controlRow #volumeRange:hover::-webkit-slider-thumb,
.controlRow #volumeRange:active::-webkit-slider-thumb {
  filter: none;
  transform: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.controlRow #volumeRange::-moz-range-track {
  height: 4px;
  border: 0;
  background: var(--range-empty);
  box-shadow: none;
}

.controlRow #volumeRange::-moz-range-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.96);
}

.controlRow #volumeRange::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 23, 42, 0.7);
  background: #f8fafc;
  box-shadow: none;
}

.editorApp[data-theme="dark"] #volumeRange,
.editorApp[data-theme="night"] #volumeRange {
  --range-empty: rgba(148, 163, 184, 0.18);
  --range-border: transparent;
  --range-thumb-border: rgba(15, 23, 42, 0.84);
  --range-thumb-surface: #f8fafc;
}

.editorApp[data-theme="dark"] .timelineTools,
.editorApp[data-theme="night"] .timelineTools {
  border-color: rgba(var(--accent-rgb), 0.24);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(var(--accent-rgb), 0.08)),
    rgba(15, 23, 42, 0.82);
  box-shadow:
    0 18px 34px rgba(2, 6, 23, 0.36),
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.editorApp[data-theme="dark"] .timelineTimeGroup,
.editorApp[data-theme="night"] .timelineTimeGroup {
  border-color: rgba(var(--accent-rgb), 0.24);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(var(--accent-rgb), 0.08)),
    rgba(15, 23, 42, 0.88);
  color: #e5eefb;
  box-shadow:
    0 14px 28px rgba(2, 6, 23, 0.28),
    0 0 0 1px rgba(var(--accent-rgb), 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.editorApp[data-theme="dark"] .timelineTimeTotal,
.editorApp[data-theme="night"] .timelineTimeTotal {
  color: #f8fafc;
}

.editorApp[data-theme="dark"] .timelineTimeRemaining,
.editorApp[data-theme="night"] .timelineTimeRemaining {
  color: #94a3b8;
}

.editorApp[data-theme="dark"] .timelineTools .iconButton,
.editorApp[data-theme="night"] .timelineTools .iconButton {
  border-color: rgba(var(--accent-rgb), 0.22);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(var(--accent-rgb), 0.08)),
    rgba(15, 23, 42, 0.92);
  color: #f8fafc;
}

.ghostButton {
  height: 34px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: #ffffff;
  color: #52647f;
  font-weight: 850;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.uiIcon {
  width: 19px;
  height: 19px;
  display: block;
  color: currentColor;
  stroke-width: 1.74;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.trackControl .uiIcon {
  width: 15px;
  height: 15px;
  stroke-width: 1.82;
}

.toolButton .uiIcon {
  width: 20.5px;
  height: 20.5px;
  stroke-width: 1.92;
}

.iconButton .uiIcon,
.ghostButton .uiIcon,
.miniControl .uiIcon,
.topIconButton .uiIcon {
  width: 19px;
  height: 19px;
}

.has-icon::before {
  content: none !important;
}

.toolButton.has-icon,
.miniControl.has-icon,
.iconButton.has-icon,
.ghostButton.has-icon,
.topIconButton.has-icon,
.trackControl.has-icon {
  display: grid;
  place-items: center;
}

.miniControl.has-icon,
.iconButton.has-icon,
.ghostButton.has-icon,
.topIconButton.has-icon {
  position: relative;
  font-size: 0;
}

.controlPill.has-icon,
.timelineAdd.has-icon:not(.timelineTrackCanvasAdd) {
  position: relative;
  font-size: 0;
}

.editorApp[data-theme="dark"] .topActions .topIconButton,
.editorApp[data-theme="night"] .topActions .topIconButton {
  color: #d8e2f0;
}

.controlPill.has-icon {
  min-width: 42px;
  width: 42px;
  padding: 0;
  display: grid;
  place-items: center;
}

.timelineAdd.has-icon:not(.timelineTrackCanvasAdd) {
  width: 36px;
  height: 36px;
  padding: 0;
}

.timelineAdd.timelineTrackCanvasAdd.has-icon {
  position: absolute;
  left: 54px;
  top: 3px;
  z-index: 26;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 0;
}

/* Minimal timeline command bar polish. */
.editToolbar {
  padding: 3px 14px;
}

.editToolbarTools {
  gap: 4px;
}

.editToolbarRightCluster {
  gap: 6px;
}

.editToolbar .toolButton,
.editToolbar .timelineTools .iconButton,
.editToolbarRightTools .rightToolButton {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.editToolbar .toolButton .uiIcon,
.editToolbar .timelineTools .iconButton .uiIcon,
.editToolbarRightTools .rightToolButton .uiIcon {
  width: 19px;
  height: 19px;
  stroke-width: 2.18;
}

.editToolbar .toolButton:hover,
.editToolbar .toolButton:focus-visible,
.editToolbar .timelineTools .iconButton:hover,
.editToolbar .timelineTools .iconButton:focus-visible,
.editToolbarRightTools .rightToolButton:hover,
.editToolbarRightTools .rightToolButton:focus-visible {
  border-color: transparent;
  background: rgba(148, 163, 184, 0.12);
  box-shadow: none;
  transform: none;
}

.cutToolGroup,
.editToolbarRightTools,
.timelineTools {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.timelineTools::before {
  content: none;
}

.spectrumLiveToggle {
  min-width: 142px;
  height: 30px;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
  box-shadow: none;
}

.spectrumLiveToggle:hover {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(148, 163, 184, 0.12);
  box-shadow: none;
  transform: none;
}

.spectrumPulseIcon span {
  box-shadow: none;
}

.timelineTimeGroup,
.editToolbar .zoomValue {
  height: 28px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.timelineTimeGroup {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 650;
}

.timelineTimeCurrent {
  color: color-mix(in srgb, var(--accent, #22d3ee) 62%, #0f172a);
}

.timelineTimeTotal,
.timelineTimeDivider {
  color: rgba(100, 116, 139, 0.72);
}

.editToolbar .zoomRange {
  min-width: 112px;
  height: 26px;
  --range-track-height: 4px;
  --range-thumb-size: 14px;
  --range-thumb-margin: -5px;
}

.editToolbar .zoomRange::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent, #22d3ee) 72%, #e2e8f0) 0 var(--zoom-fill, 0%), transparent var(--zoom-fill, 0%) 100%),
    repeating-linear-gradient(90deg, rgba(100, 116, 139, 0.42) 0 1px, transparent 1px 8px),
    rgba(148, 163, 184, 0.22);
  box-shadow: none;
}

.editToolbar .zoomRange::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid rgba(15, 23, 42, 0.78);
  background: #f8fafc;
  box-shadow: none;
}

.editToolbar .zoomRange:hover::-webkit-slider-thumb,
.editToolbar .zoomRange:active::-webkit-slider-thumb {
  filter: none;
  transform: none;
  box-shadow: none;
}

.editToolbar .zoomRange::-moz-range-track {
  height: 4px;
  border: 0;
  background:
    repeating-linear-gradient(90deg, rgba(100, 116, 139, 0.42) 0 1px, transparent 1px 8px),
    rgba(148, 163, 184, 0.22);
  box-shadow: none;
}

.editToolbar .zoomRange::-moz-range-progress {
  height: 4px;
  background: color-mix(in srgb, var(--accent, #22d3ee) 72%, #e2e8f0);
}

.editToolbar .zoomRange::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 23, 42, 0.78);
  background: #f8fafc;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .editToolbar,
.editorApp[data-theme="night"] .editToolbar {
  background: #181b21;
  border-color: rgba(255, 255, 255, 0.055);
}

.editorApp[data-theme="dark"] .editToolbar .toolButton,
.editorApp[data-theme="night"] .editToolbar .toolButton,
.editorApp[data-theme="dark"] .editToolbar .timelineTools .iconButton,
.editorApp[data-theme="night"] .editToolbar .timelineTools .iconButton,
.editorApp[data-theme="dark"] .editToolbarRightTools .rightToolButton,
.editorApp[data-theme="night"] .editToolbarRightTools .rightToolButton {
  color: rgba(214, 221, 232, 0.74);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .editToolbar .toolButton:hover,
.editorApp[data-theme="dark"] .editToolbar .toolButton:focus-visible,
.editorApp[data-theme="dark"] .editToolbar .timelineTools .iconButton:hover,
.editorApp[data-theme="dark"] .editToolbar .timelineTools .iconButton:focus-visible,
.editorApp[data-theme="dark"] .editToolbarRightTools .rightToolButton:hover,
.editorApp[data-theme="dark"] .editToolbarRightTools .rightToolButton:focus-visible,
.editorApp[data-theme="night"] .editToolbar .toolButton:hover,
.editorApp[data-theme="night"] .editToolbar .toolButton:focus-visible,
.editorApp[data-theme="night"] .editToolbar .timelineTools .iconButton:hover,
.editorApp[data-theme="night"] .editToolbar .timelineTools .iconButton:focus-visible,
.editorApp[data-theme="night"] .editToolbarRightTools .rightToolButton:hover,
.editorApp[data-theme="night"] .editToolbarRightTools .rightToolButton:focus-visible {
  color: rgba(248, 250, 252, 0.94);
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .editToolbar .toolButton.is-active,
.editorApp[data-theme="dark"] .editToolbarRightTools .rightToolButton.is-active,
.editorApp[data-theme="night"] .editToolbar .toolButton.is-active,
.editorApp[data-theme="night"] .editToolbarRightTools .rightToolButton.is-active {
  color: rgba(248, 250, 252, 0.96);
  background: rgba(255, 255, 255, 0.09);
  border-color: transparent;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
}

.editorApp[data-theme="dark"] .cutToolGroup,
.editorApp[data-theme="dark"] .editToolbarRightTools,
.editorApp[data-theme="dark"] .timelineTools,
.editorApp[data-theme="night"] .cutToolGroup,
.editorApp[data-theme="night"] .editToolbarRightTools,
.editorApp[data-theme="night"] .timelineTools {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .timelineTimeGroup,
.editorApp[data-theme="night"] .timelineTimeGroup {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .timelineTimeCurrent,
.editorApp[data-theme="night"] .timelineTimeCurrent {
  color: rgba(248, 250, 252, 0.92);
}

.editorApp[data-theme="dark"] .timelineTimeTotal,
.editorApp[data-theme="dark"] .timelineTimeDivider,
.editorApp[data-theme="night"] .timelineTimeTotal,
.editorApp[data-theme="night"] .timelineTimeDivider {
  color: rgba(148, 154, 166, 0.82);
}

.editorApp[data-theme="dark"] .spectrumLiveToggle,
.editorApp[data-theme="night"] .spectrumLiveToggle {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(214, 221, 232, 0.78);
}

.editorApp[data-theme="dark"] .spectrumLiveToggle:hover,
.editorApp[data-theme="night"] .spectrumLiveToggle:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.065);
}

.editorApp[data-theme="dark"] .spectrumSwitch,
.editorApp[data-theme="night"] .spectrumSwitch {
  background: rgba(92, 204, 222, 0.64);
  box-shadow: none;
}

.editorApp[data-theme="dark"] .editToolbar .zoomValue,
.editorApp[data-theme="night"] .editToolbar .zoomValue {
  color: rgba(214, 221, 232, 0.76);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .editToolbar .zoomValue strong,
.editorApp[data-theme="night"] .editToolbar .zoomValue strong {
  color: rgba(248, 250, 252, 0.9);
}

.editorApp[data-theme="dark"] .editToolbar .zoomRange::-webkit-slider-runnable-track,
.editorApp[data-theme="night"] .editToolbar .zoomRange::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, rgba(98, 216, 235, 0.76) 0 var(--zoom-fill, 0%), transparent var(--zoom-fill, 0%) 100%),
    repeating-linear-gradient(90deg, rgba(148, 154, 166, 0.36) 0 1px, transparent 1px 8px),
    rgba(76, 84, 98, 0.48);
  box-shadow: none;
}

.editorApp[data-theme="dark"] .editToolbar .zoomRange::-webkit-slider-thumb,
.editorApp[data-theme="night"] .editToolbar .zoomRange::-webkit-slider-thumb,
.editorApp[data-theme="dark"] .editToolbar .zoomRange::-moz-range-thumb,
.editorApp[data-theme="night"] .editToolbar .zoomRange::-moz-range-thumb {
  border-color: #181b21;
  background: rgba(236, 242, 248, 0.94);
  box-shadow: none;
}

.editorApp[data-theme="dark"] .editToolbar .zoomRange::-moz-range-track,
.editorApp[data-theme="night"] .editToolbar .zoomRange::-moz-range-track {
  background:
    repeating-linear-gradient(90deg, rgba(148, 154, 166, 0.36) 0 1px, transparent 1px 8px),
    rgba(76, 84, 98, 0.48);
}

.editorApp[data-theme="dark"] .editToolbar .zoomRange::-moz-range-progress,
.editorApp[data-theme="night"] .editToolbar .zoomRange::-moz-range-progress {
  background: rgba(98, 216, 235, 0.76);
}

/* Minimal timeline ruler strip. */
.timelineCanvas {
  grid-template-rows: 22px minmax(0, 1fr) 18px;
}

.timelineCanvas::before {
  height: 22px;
}

.timelineRuler {
  height: 22px;
  border-bottom-color: rgba(148, 163, 184, 0.09);
  --timeline-ruler-major-alpha: 0.38;
  background:
    linear-gradient(90deg, rgba(168, 178, 192, var(--timeline-ruler-grid-alpha, 0.11)) 0 1px, transparent 1px) var(--timeline-ruler-offset, 108px) 3px / var(--timeline-ruler-step, 78px) 7px repeat-x,
    #1d1f24;
  background-repeat: repeat-x, no-repeat;
  box-shadow: none;
}

.timelineRuler:hover {
  --timeline-ruler-major-alpha: 0.42;
  background:
    linear-gradient(90deg, rgba(168, 178, 192, var(--timeline-ruler-grid-alpha, 0.12)) 0 1px, transparent 1px) var(--timeline-ruler-offset, 108px) 3px / var(--timeline-ruler-step, 78px) 7px repeat-x,
    #1f2228;
  box-shadow: none;
}

.timelineTick.is-major::before {
  top: 3px;
  height: 7px;
  background: rgba(188, 197, 210, 0.68);
  opacity: var(--timeline-ruler-major-alpha, 0.38);
}

.timelineTick.is-major::after {
  top: 0;
  height: 100%;
  background: rgba(148, 163, 184, 0.045);
  opacity: 1;
}

.timelineTick span {
  top: 10px;
  left: 6px;
  color: rgba(185, 193, 206, 0.62);
  font-size: 9.5px;
  font-weight: 520;
  line-height: 1;
}

.timelineRuler:hover .timelineTick span {
  color: rgba(205, 213, 224, 0.74);
}

.editorApp[data-theme="dark"] .timelineRuler,
.editorApp[data-theme="night"] .timelineRuler {
  border-color: rgba(148, 163, 184, 0.08);
  background:
    linear-gradient(90deg, rgba(168, 178, 192, var(--timeline-ruler-grid-alpha, 0.105)) 0 1px, transparent 1px) var(--timeline-ruler-offset, 108px) 3px / var(--timeline-ruler-step, 78px) 7px repeat-x,
    #1d1f24;
}

.editorApp[data-theme="dark"] .timelineRuler:hover,
.editorApp[data-theme="night"] .timelineRuler:hover {
  background:
    linear-gradient(90deg, rgba(168, 178, 192, var(--timeline-ruler-grid-alpha, 0.12)) 0 1px, transparent 1px) var(--timeline-ruler-offset, 108px) 3px / var(--timeline-ruler-step, 78px) 7px repeat-x,
    #202329;
}

.editorApp[data-theme="dark"] .timelineTick.is-major::before,
.editorApp[data-theme="night"] .timelineTick.is-major::before {
  background: rgba(188, 197, 210, 0.66);
}

.editorApp[data-theme="dark"] .timelineTick.is-major::after,
.editorApp[data-theme="night"] .timelineTick.is-major::after {
  background: rgba(148, 163, 184, 0.045);
  opacity: 1;
}

.editorApp[data-theme="dark"] .timelineTick span,
.editorApp[data-theme="night"] .timelineTick span {
  color: rgba(185, 193, 206, 0.6);
  font-weight: 520;
}

.editorApp[data-theme="dark"] .timelineRuler:hover .timelineTick span,
.editorApp[data-theme="night"] .timelineRuler:hover .timelineTick span {
  color: rgba(205, 213, 224, 0.74);
}

/* CT-268: professional neutral context menu (single column, light + dark). */
.clipContextMenu {
  position: fixed;
  z-index: 120;
  width: min(268px, calc(100vw - 20px));
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  padding: 6px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 28px -8px rgba(16, 24, 40, 0.22);
  overflow: auto;
  animation: clipMenuPop 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes clipMenuPop {
  from { opacity: 0; transform: translateY(-4px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.clipContextMenu[hidden] { display: none; }

.clipMenuHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px 8px;
  margin: 0 0 4px;
  border-bottom: 1px solid #f0f1f4;
}
.clipMenuTitle {
  min-width: 0;
  overflow: hidden;
  color: #2b3038;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clipMenuDur {
  flex: 0 0 auto;
  color: #98a1b0;
  font: 600 10.5px/1 var(--mono-font, ui-monospace, monospace);
}

.clipMenuList { display: block; }

.clipMenuSep {
  height: 1px;
  margin: 5px 6px;
  background: #eef0f3;
}

.clipContextMenu button,
.clipMenuButton {
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #2b3038;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms ease;
}
.clipMenuButton:hover { background: #f3f5f9; }
.clipMenuButton:focus-visible {
  outline: none;
  background: #eef2f8;
  box-shadow: 0 0 0 2px rgba(79, 111, 229, 0.28) inset;
}
.clipMenuButton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

.clipMenuIcon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #525c6b;
}
.clipMenuIcon .uiIcon { width: 17px; height: 17px; }

.clipMenuText {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clipMenuKeys { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.clipMenuKey {
  padding: 1.5px 5px;
  border: 1px solid #e6e9ee;
  border-radius: 4px;
  background: #f2f4f7;
  color: #8b93a1;
  font: 600 9.5px/1 var(--mono-font, ui-monospace, monospace);
}

.clipMenuButton.is-danger { color: #c92a2a; }
.clipMenuButton.is-danger .clipMenuIcon { color: #d13636; }
.clipMenuButton.is-danger:hover { background: #fdf0f0; }

@media (max-width: 620px) {
  .clipContextMenu { width: min(268px, calc(100vw - 16px)); }
}

/* CT-268: dark / night variants. */
.editorApp[data-theme="dark"] .clipContextMenu,
.editorApp[data-theme="night"] .clipContextMenu {
  border-color: #33363c;
  background: #212327;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
}
.editorApp[data-theme="dark"] .clipMenuHeader,
.editorApp[data-theme="night"] .clipMenuHeader { border-color: #2c2f35; }
.editorApp[data-theme="dark"] .clipMenuTitle,
.editorApp[data-theme="night"] .clipMenuTitle { color: #e7e9ee; }
.editorApp[data-theme="dark"] .clipMenuDur,
.editorApp[data-theme="night"] .clipMenuDur { color: #7f8896; }
.editorApp[data-theme="dark"] .clipMenuSep,
.editorApp[data-theme="night"] .clipMenuSep { background: #2c2f35; }
.editorApp[data-theme="dark"] .clipMenuButton,
.editorApp[data-theme="night"] .clipMenuButton { color: #dfe3ea; }
.editorApp[data-theme="dark"] .clipMenuButton:hover,
.editorApp[data-theme="night"] .clipMenuButton:hover { background: #2b2e34; }
.editorApp[data-theme="dark"] .clipMenuButton:focus-visible,
.editorApp[data-theme="night"] .clipMenuButton:focus-visible {
  background: #2b2e34;
  box-shadow: 0 0 0 2px rgba(99, 132, 255, 0.4) inset;
}
.editorApp[data-theme="dark"] .clipMenuIcon,
.editorApp[data-theme="night"] .clipMenuIcon { color: #a3adba; }
.editorApp[data-theme="dark"] .clipMenuKey,
.editorApp[data-theme="night"] .clipMenuKey {
  border-color: #3a3e45;
  background: #2b2e34;
  color: #8b94a2;
}
.editorApp[data-theme="dark"] .clipMenuButton.is-danger,
.editorApp[data-theme="night"] .clipMenuButton.is-danger { color: #f87171; }
.editorApp[data-theme="dark"] .clipMenuButton.is-danger .clipMenuIcon,
.editorApp[data-theme="night"] .clipMenuButton.is-danger .clipMenuIcon { color: #f87171; }
.editorApp[data-theme="dark"] .clipMenuButton.is-danger:hover,
.editorApp[data-theme="night"] .clipMenuButton.is-danger:hover { background: #3a2526; }

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: none;
}

.editorTooltip {
  position: fixed;
  z-index: 500;
  width: max-content;
  max-width: min(260px, calc(100vw - 16px));
  padding: 6px 9px;
  border: 1px solid rgba(15, 23, 42, 0.13);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.98);
  color: rgba(17, 24, 39, 0.92);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
  font: 500 11px/1.15 "Segoe UI", "Inter", "Noto Sans", Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px) scale(0.985);
  transform-origin: 50% 100%;
  transition:
    opacity 95ms ease,
    transform 95ms ease;
}

.editorTooltip::before {
  content: "";
  position: absolute;
  left: var(--tooltip-arrow-x, 50%);
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(15, 23, 42, 0.13);
  border-bottom: 1px solid rgba(15, 23, 42, 0.13);
  background: rgba(255, 255, 255, 0.98);
  transform: translateX(-50%) rotate(45deg);
}

.editorTooltip[data-placement="bottom"] {
  transform: translateY(-3px) scale(0.985);
  transform-origin: 50% 0;
}

.editorTooltip[data-placement="bottom"]::before {
  top: -5px;
  bottom: auto;
  border: 0;
  border-left: 1px solid rgba(15, 23, 42, 0.13);
  border-top: 1px solid rgba(15, 23, 42, 0.13);
}

.editorTooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.editorTooltip[hidden] {
  display: none;
}


@media (max-width: 1040px) {
  .editorApp {
    --rail-width: 58px;
    --side-column-width: clamp(260px, var(--side-panel-width), 420px);
    --inspector-panel-width: 0px;
    grid-template-columns: var(--rail-width) var(--side-column-width) minmax(360px, 1fr);
    grid-template-rows: var(--topbar-height) minmax(300px, 1fr) var(--timeline-height);
    grid-template-areas:
      "topbar topbar topbar"
      "rail side workspace"
      "timeline timeline timeline";
  }

  .editorApp.is-left-panel-collapsed {
    --side-column-width: 0px;
  }

  .inspectorPanel {
    position: fixed;
    top: var(--topbar-height);
    right: 0;
    bottom: var(--timeline-height);
    z-index: 170;
    width: min(320px, 84vw);
    display: grid;
    transform: translateX(0);
    box-shadow: -16px 0 38px rgba(15, 23, 42, 0.16);
  }

  .editorApp.is-right-panel-collapsed .inspectorPanel {
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
  }

  .stageWrap {
    padding: 14px 20px;
  }

  .previewFrame {
    width: min(92vw, 820px);
  }

  .timelineTimeGroup {
    padding-inline: 10px;
    gap: 5px;
    font-size: 11px;
  }

  .editToolbarRightCluster {
    gap: 6px;
  }

  .editToolbar .zoomRange {
    width: 108px;
    min-width: 86px;
  }

  .editToolbar .zoomValue {
    min-width: 48px;
  }

  .spectrumLiveToggle {
    position: relative;
    min-width: 152px;
    margin-left: 0;
    transform: none;
  }

  .spectrumLiveToggle:hover,
  .spectrumLiveToggle:active {
    transform: none;
  }
}


/* Zed custom polish: professional left rail + cleaner left panels */
.editorApp {
  --rail-width: 80px;
}

.rail {
  grid-template-rows: 68px repeat(6, 78px) 1fr;
  padding: 14px 8px;
  gap: 6px;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(16, 24, 39, 0.98), rgba(10, 14, 22, 0.98)),
    #0b1019;
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.025);
}

.brandMark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff5c7c 0%, #f43f5e 52%, #fb7185 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 26px rgba(244, 63, 94, 0.22);
}

.railButton {
  position: relative;
  width: 100%;
  max-width: 64px;
  justify-self: center;
  height: 72px;
  padding: 8px 4px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: rgba(203, 213, 225, 0.78);
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: -0.015em;
  cursor: pointer;
  outline: none;
  transition:
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.railButton::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 17px;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #34d399);
  opacity: 0;
  transition: height 160ms ease, opacity 160ms ease;
}

.railButton > span:not(.railIcon) {
  display: block;
  width: 100%;
  max-width: 100%;
  color: inherit;
  font-weight: 800;
  font-size: 10px;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  overflow-wrap: break-word;
}

.railIcon {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  transition:
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 150ms ease,
    filter 150ms ease;
}

.railIcon svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.35;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18));
}

.railButton:hover {
  color: #f8fafc;
  background: rgba(148, 163, 184, 0.075);
  border-color: rgba(148, 163, 184, 0.12);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.railButton:hover .railIcon {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 4px 10px rgba(45, 212, 191, 0.18));
}

.railButton:active {
  transform: translateY(0) scale(0.975);
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(45, 212, 191, 0.26);
}

.railButton.is-active {
  color: #ecfeff;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(59, 130, 246, 0.12)),
    rgba(15, 23, 42, 0.72);
  border-color: rgba(45, 212, 191, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(2, 6, 23, 0.28);
}

.railButton.is-active::before {
  height: 34px;
  opacity: 1;
}

.railButton.is-active .railIcon {
  background: transparent;
  color: #67e8f9;
  box-shadow: none;
  transform: none;
  filter: drop-shadow(0 6px 14px rgba(34, 211, 238, 0.18));
}

.editorApp[data-theme="dark"] .rail,
.editorApp[data-theme="night"] .rail {
  background:
    linear-gradient(180deg, rgba(16, 24, 39, 0.98), rgba(10, 14, 22, 0.98)),
    #0b1019;
  border-right-color: rgba(148, 163, 184, 0.14);
}

.editorApp[data-theme="dark"] .railButton,
.editorApp[data-theme="night"] .railButton {
  color: rgba(203, 213, 225, 0.78);
}

.editorApp[data-theme="dark"] .railIcon,
.editorApp[data-theme="night"] .railIcon {
  background: transparent;
  color: currentColor;
  box-shadow: none;
}

.editorApp[data-theme="dark"] .railButton:hover,
.editorApp[data-theme="night"] .railButton:hover {
  color: #f8fafc;
  background: rgba(148, 163, 184, 0.075);
}

.editorApp[data-theme="dark"] .railButton.is-active,
.editorApp[data-theme="night"] .railButton.is-active {
  color: #ecfeff;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(59, 130, 246, 0.12)),
    rgba(15, 23, 42, 0.72);
  border-color: rgba(45, 212, 191, 0.34);
}

.editorApp[data-theme="dark"] .railButton.is-active .railIcon,
.editorApp[data-theme="night"] .railButton.is-active .railIcon {
  background: transparent;
  color: #67e8f9;
  box-shadow: none;
}

/* Cleaner left transition panel: remove the busy lower cards and keep controls premium. */
.panelPane[data-tab-panel="transitions"] {
  background:
    radial-gradient(circle at 74% 0%, rgba(45, 212, 191, 0.09), transparent 28%),
    linear-gradient(180deg, #101722 0%, #0b111b 100%);
  color: #dbeafe;
}

.panelPane[data-tab-panel="transitions"] .paneHeader {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.panelPane[data-tab-panel="transitions"] .paneHeader h1 {
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.panelPane[data-tab-panel="transitions"] .paneHeader span {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.58);
  color: #e2e8f0;
}

.transitionHero,
.transitionPresetGrid {
  display: none !important;
}

/* Phase 11: restore visible transition preset cards.
   Earlier dark Motion Studio styling accidentally hid the library globally:
   `.transitionHero, .transitionPresetGrid { display: none !important; }`.
   Keep the decorative hero hidden, but force the active transitions pane's
   preset grid back to a scrollable card grid. */
.panelPane[data-tab-panel="transitions"].is-active .transitionPresetGrid,
.panelPane[data-tab-panel="transitions"] .transitionPresetGrid[data-rendered],
.panelPane[data-tab-panel="transitions"] .transitionPresetGrid:not(:empty) {
  display: grid !important;
}


.transitionTargetBox {
  margin-top: 18px;
  border-radius: 16px;
  border: 1px solid rgba(45, 212, 191, 0.18);
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(59, 130, 246, 0.06)),
    rgba(15, 23, 42, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.transitionTargetBox strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
}

.transitionTargetBox span {
  color: #9fb0c6;
  font-weight: 720;
}

.transitionDurationControl,
.transitionActionRow {
  border-radius: 16px;
}

.transitionApplyButton {
  cursor: pointer;
  border-radius: 12px;
  transition:
    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.transitionApplyButton:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.16);
}

.transitionApplyButton:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}


/* User requested refinement: keep left rail behaviour tied to the active theme accent and make icons 2px smaller. */
.railButton {
  color: rgba(203, 213, 225, 0.78);
  transition:
    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.railButton::before {
  background: linear-gradient(180deg, var(--accent, #22d3ee), var(--accent-dark, #0f766e));
}

.railIcon {
  width: 28px;
  height: 28px;
}

.railIcon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.28;
}

.railButton:hover {
  color: color-mix(in srgb, var(--accent, #22d3ee) 74%, #f8fafc);
  background: rgba(var(--accent-rgb, 34, 211, 238), 0.075);
  border-color: rgba(var(--accent-rgb, 34, 211, 238), 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.railButton:hover .railIcon {
  transform: translateY(-1px) scale(1.025);
  filter: drop-shadow(0 3px 8px rgba(var(--accent-rgb, 34, 211, 238), 0.12));
}

.railButton:active {
  transform: translateY(0) scale(0.982);
  background: rgba(var(--accent-rgb, 34, 211, 238), 0.105);
  border-color: rgba(var(--accent-rgb, 34, 211, 238), 0.22);
}

.railButton.is-active {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb, 34, 211, 238), 0.22), rgba(var(--accent-rgb, 34, 211, 238), 0.08)),
    rgba(15, 23, 42, 0.72);
  border-color: rgba(var(--accent-rgb, 34, 211, 238), 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(2, 6, 23, 0.24);
}

.railButton.is-active .railIcon {
  color: color-mix(in srgb, var(--accent, #22d3ee) 82%, #ffffff);
  filter: drop-shadow(0 5px 12px rgba(var(--accent-rgb, 34, 211, 238), 0.14));
}

.editorApp[data-theme="dark"] .railButton:hover,
.editorApp[data-theme="night"] .railButton:hover {
  color: color-mix(in srgb, var(--accent, #22d3ee) 74%, #f8fafc);
  background: rgba(var(--accent-rgb, 34, 211, 238), 0.075);
  border-color: rgba(var(--accent-rgb, 34, 211, 238), 0.16);
}

.editorApp[data-theme="dark"] .railButton.is-active,
.editorApp[data-theme="night"] .railButton.is-active {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb, 34, 211, 238), 0.22), rgba(var(--accent-rgb, 34, 211, 238), 0.08)),
    rgba(15, 23, 42, 0.72);
  border-color: rgba(var(--accent-rgb, 34, 211, 238), 0.32);
}

.editorApp[data-theme="dark"] .railButton.is-active .railIcon,
.editorApp[data-theme="night"] .railButton.is-active .railIcon {
  color: color-mix(in srgb, var(--accent, #22d3ee) 82%, #ffffff);
}


/* Sidebar refinement: no icon/text card; only icon and label color use the active theme accent. */
.railButton,
.editorApp[data-theme="dark"] .railButton,
.editorApp[data-theme="night"] .railButton {
  width: 62px;
  height: 70px;
  padding: 7px 5px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(203, 213, 225, 0.78);
}

.railButton::before {
  left: 0;
  top: 18px;
  width: 2px;
  height: 0;
  opacity: 0;
  background: var(--accent, #22d3ee);
}

.railIcon,
.editorApp[data-theme="dark"] .railIcon,
.editorApp[data-theme="night"] .railIcon {
  width: 28px;
  height: 28px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: currentColor;
}

.railButton > span:not(.railIcon) {
  color: currentColor;
}

.railButton:hover,
.editorApp[data-theme="dark"] .railButton:hover,
.editorApp[data-theme="night"] .railButton:hover {
  color: color-mix(in srgb, var(--accent, #22d3ee) 78%, #ffffff);
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.railButton:hover .railIcon {
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 2px 6px rgba(var(--accent-rgb, 34, 211, 238), 0.10));
}

.railButton:active {
  transform: translateY(0) scale(0.985);
  background: transparent !important;
  box-shadow: none !important;
}

.railButton.is-active,
.editorApp[data-theme="dark"] .railButton.is-active,
.editorApp[data-theme="night"] .railButton.is-active {
  color: color-mix(in srgb, var(--accent, #22d3ee) 86%, #ffffff);
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.railButton.is-active::before {
  height: 32px;
  opacity: 0.95;
}

.railButton.is-active .railIcon,
.editorApp[data-theme="dark"] .railButton.is-active .railIcon,
.editorApp[data-theme="night"] .railButton.is-active .railIcon {
  color: color-mix(in srgb, var(--accent, #22d3ee) 86%, #ffffff);
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 8px rgba(var(--accent-rgb, 34, 211, 238), 0.12));
}

/* Compact timeline polish: keep the Spectrum toggle inside the toolbar when the timeline is short. */
.editorApp.is-timeline-compact .timelineDock {
  grid-template-rows: 36px minmax(0, 1fr);
}

.editorApp.is-timeline-compact .editToolbar {
  padding-block: 4px;
  overflow: hidden;
}

.editorApp.is-timeline-compact .spectrumLiveToggle {
  height: 28px;
  min-width: 116px;
  padding-inline: 8px;
  gap: 6px;
  box-shadow: none;
  transform: none;
}

.editorApp.is-timeline-compact .spectrumLiveToggle:hover {
  transform: none;
  box-shadow: none;
}

.editorApp.is-timeline-compact .spectrumPulseIcon {
  width: 18px;
  height: 16px;
}

.editorApp.is-timeline-compact .spectrumSwitch {
  width: 32px;
  height: 18px;
}

.editorApp.is-timeline-compact .spectrumSwitch::after {
  top: 3px;
  left: 17px;
  width: 12px;
  height: 12px;
}

.editorApp.is-timeline-compact .spectrumLiveToggle.is-off .spectrumSwitch::after {
  left: 3px;
}

.editorApp.is-timeline-compact .spectrumLiveLabel {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-height: 720px) {
  .spectrumLiveToggle {
    height: 28px;
    min-width: 118px;
    box-shadow: none;
  }

  .spectrumLiveLabel {
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* Polished player control rail: ratio first, no Step Back button.
   Keeps the control strip lower than the preview with a calmer professional style. */
.stageWrap {
  grid-template-rows: minmax(0, 1fr) 58px;
  row-gap: 16px;
  padding-bottom: 14px;
}

.previewFrame {
  max-height: calc(100vh - var(--timeline-height) - 154px);
}

.editorApp:fullscreen .previewFrame,
.editorApp.is-editor-fullscreen .previewFrame,
.editorApp.is-editor-fullscreen-fallback .previewFrame {
  max-height: calc(100vh - var(--timeline-height) - 154px);
}

.playerControls {
  height: 46px;
  gap: 10px;
  align-self: start;
  padding-top: 4px;
  overflow: visible;
}

.playerControls .ratioControlWrap {
  order: -10;
}

.playerControls #stepBackButton {
  display: none !important;
}

.playerControls .miniControl,
.playerControls .controlPill,
.playerControls .ratioMenuButton {
  border-color: rgba(148, 163, 184, 0.24);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
  color: rgba(226, 232, 240, 0.92);
  box-shadow:
    0 10px 22px rgba(2, 6, 23, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.playerControls .miniControl {
  width: 38px;
  height: 38px;
}

.playerControls .controlPill {
  height: 38px;
  min-width: 42px;
  padding: 0 12px;
}

.playerControls .ratioMenuButton {
  height: 38px;
  min-width: 186px;
  padding-inline: 12px 13px;
}

.playerControls .miniControl:hover,
.playerControls .controlPill:hover,
.playerControls .ratioMenuButton:hover,
.playerControls .ratioMenuButton:focus-visible,
.playerControls .ratioControlWrap.is-open .ratioMenuButton {
  background:
    linear-gradient(180deg, rgba(39, 52, 72, 0.98), rgba(18, 28, 45, 0.98));
  border-color: rgba(125, 211, 252, 0.34);
  color: #f8fafc;
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(2, 6, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.playerControls .miniControl:active,
.playerControls .controlPill:active,
.playerControls .ratioMenuButton:active {
  transform: translateY(0) scale(0.97);
  box-shadow:
    0 6px 14px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.playerControls .uiIcon,
.playerControls svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.1px;
}

.playerControls #playerPlayButton {
  border-color: rgba(var(--accent-rgb), 0.48);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.15)),
    linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
  color: #ffffff;
}

.playerControls #playerPlayButton:hover {
  border-color: rgba(var(--accent-rgb), 0.58);
  box-shadow:
    0 13px 24px rgba(2, 6, 23, 0.25),
    0 0 0 3px rgba(var(--accent-rgb), 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ratioMenu {
  bottom: calc(100% + 12px);
}

/* Keep the ratio menu clean when opened above the lower control row. */
.ratioMenuButton strong {
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ratioMenuIcon {
  width: 18px;
  height: 18px;
}


/* Media library typography polish */
.assetItem {
  font-weight: 500;
}

.assetItem .assetMeta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.assetMeta strong,
.editorApp[data-theme="dark"] .assetMeta strong,
.editorApp[data-theme="night"] .assetMeta strong {
  color: rgba(226, 232, 240, 0.92);
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.assetMeta small,
.editorApp[data-theme="dark"] .assetMeta small,
.editorApp[data-theme="night"] .assetMeta small {
  color: rgba(148, 163, 184, 0.82);
  font-size: 11px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.25;
}

.assetItem.is-selected .assetMeta strong,
.editorApp[data-theme="dark"] .assetItem.is-selected .assetMeta strong,
.editorApp[data-theme="night"] .assetItem.is-selected .assetMeta strong {
  color: rgba(var(--accent-rgb), 0.96);
  font-weight: 620;
}

.assetItem:hover .assetMeta strong {
  color: rgba(248, 250, 252, 0.96);
}

/* Cleaner media details panel */
.assetDetailsTitle {
  min-height: 42px;
  padding: 0 18px;
  color: rgba(226, 232, 240, 0.88);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assetDetailsContent {
  padding: 14px 14px 28px;
  scrollbar-width: none;
}

.assetDetailsContent::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.assetDetailsPreview {
  min-height: 88px;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 13px;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 14px;
  border-color: rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.assetDetailsPreview .assetThumb,
.assetDetailsPreview img {
  width: 92px;
  height: 56px;
  border-radius: 10px;
}

.assetDetailsPreview strong,
.editorApp[data-theme="dark"] .assetDetailsPreview strong,
.editorApp[data-theme="night"] .assetDetailsPreview strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.assetDetailsPreview span,
.editorApp[data-theme="dark"] .assetDetailsPreview span,
.editorApp[data-theme="night"] .assetDetailsPreview span {
  margin-top: 6px;
  color: rgba(148, 163, 184, 0.86);
  font-size: 11px;
  font-weight: 450;
}

.assetDetailsRows {
  gap: 6px;
}

.assetDetailsRow {
  grid-template-columns: minmax(78px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.22);
  font-size: 12px;
}

.assetDetailsRow:first-child {
  border-top: 1px solid transparent;
}

.assetDetailsRow.is-spaced {
  margin-top: 2px;
  padding-top: 8px;
  border-top-color: transparent;
}

.assetDetailsRow span,
.editorApp[data-theme="dark"] .assetDetailsRow span,
.editorApp[data-theme="night"] .assetDetailsRow span {
  color: rgba(148, 163, 184, 0.78);
  font-size: 11px;
  font-weight: 500;
}

.assetDetailsRow strong,
.editorApp[data-theme="dark"] .assetDetailsRow strong,
.editorApp[data-theme="night"] .assetDetailsRow strong {
  color: rgba(226, 232, 240, 0.9);
  font-size: 11.5px;
  font-weight: 540;
  letter-spacing: -0.005em;
}

.assetDetailsRow:hover {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(30, 41, 59, 0.34);
}


.editorApp[data-theme="dark"] .assetDetailsPreview,
.editorApp[data-theme="night"] .assetDetailsPreview {
  border-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.76), rgba(15, 23, 42, 0.46));
}

.editorApp[data-theme="dark"] .assetDetailsRow,
.editorApp[data-theme="night"] .assetDetailsRow {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.34);
}

.editorApp[data-theme="dark"] .assetDetailsRow.is-spaced,
.editorApp[data-theme="night"] .assetDetailsRow.is-spaced {
  border-color: rgba(148, 163, 184, 0.18);
}

.editorApp[data-theme="dark"] .assetDetailsPreview strong,
.editorApp[data-theme="night"] .assetDetailsPreview strong,
.editorApp[data-theme="dark"] .assetDetailsRow strong,
.editorApp[data-theme="night"] .assetDetailsRow strong {
  font-weight: 680;
}

.editorApp[data-theme="dark"] .assetDetailsPreview span,
.editorApp[data-theme="night"] .assetDetailsPreview span,
.editorApp[data-theme="dark"] .assetDetailsRow span,
.editorApp[data-theme="night"] .assetDetailsRow span {
  font-weight: 620;
}


/* Selection guard: prevent accidental blue text highlights across the editor chrome.
   Keep real text-entry controls selectable/editable. */
.editorApp,
.editorApp *:not(input):not(textarea):not([contenteditable="true"]):not([contenteditable=""]):not(.allowTextSelect):not(.allowTextSelect *) {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}

.editorApp ::selection {
  background: transparent;
}

.editorApp input,
.editorApp textarea,
.editorApp [contenteditable="true"],
.editorApp [contenteditable=""] {
  -webkit-user-select: text !important;
  user-select: text !important;
}

.mediaInfoPanel,
.mediaInfoPanel *,
.mediaInspector,
.mediaInspector *,
.media-detail-panel,
.media-detail-panel *,
.media-meta-panel,
.media-meta-panel *,
.inspectorPanel,
.inspectorPanel *,
.rightPanel,
.rightPanel *,
.propertiesPanel,
.propertiesPanel *,
.editorSidebar,
.editorSidebar *,
.mediaGrid,
.mediaGrid *,
.timelineShell,
.timelineShell *,
.transportControls,
.transportControls * {
  -webkit-user-select: none !important;
  user-select: none !important;
}


/* Topbar button polish v2: smaller premium pills, calmer export color. */
.topActions {
  gap: 7px !important;
  padding: 4px !important;
  border-radius: 22px !important;
}

.topTextButton.topTextButton-primary {
  height: 34px !important;
  min-width: 104px !important;
  padding: 0 14px !important;
  gap: 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(45, 112, 255, 0.92)) !important;
  box-shadow:
    0 8px 18px rgba(var(--accent-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.topTextButton.topTextButton-primary::before {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12) !important;
  transform: none !important;
}

.exportButton {
  height: 34px !important;
  min-width: 136px !important;
  padding: 0 14px 0 12px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  background:
    linear-gradient(135deg, #5b6cff 0%, #7c5cff 48%, #a35cff 100%) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow:
    0 10px 22px rgba(91, 108, 255, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.exportButton::before {
  width: 20px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.exportButton::after {
  left: 22px !important;
  border-top-width: 4px !important;
  border-bottom-width: 4px !important;
  border-left-width: 6px !important;
}

.exportButton .chevron {
  width: 6px !important;
  height: 6px !important;
  border-right-width: 1.8px !important;
  border-bottom-width: 1.8px !important;
  opacity: 0.75 !important;
}

.exportButton:hover,
.exportButton:focus-visible {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) saturate(1.02) !important;
  box-shadow:
    0 12px 26px rgba(124, 92, 255, 0.26),
    0 5px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.exportButton:active,
.topTextButton.topTextButton-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

.editorApp[data-theme="dark"] .topTextButton.topTextButton-primary,
.editorApp[data-theme="night"] .topTextButton.topTextButton-primary {
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.92), rgba(45, 112, 255, 0.86)) !important;
  box-shadow:
    0 9px 20px rgba(var(--accent-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.editorApp[data-theme="dark"] .exportButton,
.editorApp[data-theme="night"] .exportButton {
  background:
    linear-gradient(135deg, #5468ff 0%, #7357f5 50%, #9b5cf6 100%) !important;
  box-shadow:
    0 11px 24px rgba(115, 87, 245, 0.24),
    0 5px 14px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Polished theme-aware media toolbar controls */
.editorApp[data-theme="dark"] .mediaActionButton,
.editorApp[data-theme="dark"] .mediaIconButton,
.editorApp[data-theme="night"] .mediaActionButton,
.editorApp[data-theme="night"] .mediaIconButton {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.62);
  color: rgba(226, 232, 240, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.editorApp[data-theme="dark"] .mediaActionButton:hover,
.editorApp[data-theme="dark"] .mediaIconButton:hover,
.editorApp[data-theme="night"] .mediaActionButton:hover,
.editorApp[data-theme="night"] .mediaIconButton:hover {
  border-color: rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.11);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.editorApp[data-theme="dark"] .mediaIconButton.is-active,
.editorApp[data-theme="night"] .mediaIconButton.is-active {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}

.toolButtonRecord {
  min-width: 58px;
  padding-inline: 11px;
  color: rgba(226, 232, 240, 0.88);
}

.editorApp[data-theme="dark"] .toolButtonRecord:hover,
.editorApp[data-theme="night"] .toolButtonRecord:hover {
  border-color: rgba(var(--accent-rgb), 0.34);
  background: rgba(var(--accent-rgb), 0.11);
  color: var(--accent);
}


/* === ChatGPT real UI polish: media toolbar / filter tabs / record pill === */
.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mediaLibraryHeader {
  gap: 12px;
}

.mediaTitleRow {
  gap: 12px;
}

.mediaToolbar {
  gap: 8px !important;
  align-items: center;
}

.mediaActionButton {
  height: 34px !important;
  min-width: 118px;
  padding: 0 16px !important;
  border-radius: 15px !important;
  border-color: rgba(var(--accent-rgb), 0.36) !important;
  color: #f8fbff !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(124, 92, 255, 0.92)) !important;
  box-shadow:
    0 12px 26px rgba(var(--accent-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.mediaActionButton:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.56) !important;
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 14px 28px rgba(var(--accent-rgb), 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.mediaActionButton:active {
  transform: translateY(0) scale(0.985);
}

.mediaActionButton .uiIcon {
  width: 15px;
  height: 15px;
  stroke-width: 2.25;
}

.mediaIconButton {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  background: rgba(15, 23, 42, 0.44) !important;
  color: rgba(226, 232, 240, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

.mediaIconButton:hover {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.34) !important;
  background: rgba(var(--accent-rgb), 0.10) !important;
  transform: translateY(-1px);
}

.mediaIconButton.is-active {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.44) !important;
  background: rgba(var(--accent-rgb), 0.14) !important;
}

.mediaIconButton.is-danger {
  color: rgba(248,113,113,0.72) !important;
}

.mediaIconButton.is-danger:disabled {
  display: none !important;
}

.mediaShelfBar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 34px;
  padding-top: 2px;
}

.mediaFilterTabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.mediaFilterTab {
  height: 27px;
  padding: 0 11px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(203, 213, 225, 0.72);
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color 150ms ease,
    background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.mediaFilterTab:hover {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.085);
}

.mediaFilterTab:active {
  transform: scale(0.975);
}

.mediaFilterTab.is-active {
  color: #f8fbff;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.88), rgba(124, 92, 255, 0.72));
  box-shadow:
    0 8px 18px rgba(var(--accent-rgb), 0.14),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

#mediaCountLabel {
  margin-left: auto;
  color: rgba(203, 213, 225, 0.68) !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

.toolButtonRecord {
  min-width: 76px !important;
  height: 34px !important;
  padding-inline: 15px !important;
  border-radius: 999px !important;
  gap: 7px !important;
  color: #f8fbff !important;
  border-color: rgba(var(--accent-rgb), 0.48) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.76), rgba(var(--accent-rgb), 0.18)) !important;
  box-shadow:
    0 10px 24px rgba(var(--accent-rgb), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.toolButtonRecord .uiIcon {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.3 !important;
}

.toolButtonRecord:hover {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.62) !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.20), rgba(124, 92, 255, 0.16)) !important;
  transform: translateY(-1px);
}

.toolButtonRecord:active {
  transform: scale(0.985);
}

@media (max-width: 1120px) {
  .mediaFilterTabs {
    gap: 2px;
  }

  .mediaFilterTab {
    padding-inline: 8px;
    font-size: 11px;
  }

  .mediaActionButton {
    min-width: 94px;
  }
}


/* === Global neutral + single accent UI system pass (ChatGPT real code) === */
:root {
  --surface-neutral-0: rgba(11, 16, 25, 0.72);
  --surface-neutral-1: rgba(15, 23, 42, 0.70);
  --surface-neutral-2: rgba(30, 41, 59, 0.54);
  --surface-neutral-hover: rgba(51, 65, 85, 0.42);
  --surface-neutral-active: rgba(var(--accent-rgb), 0.105);
  --border-neutral: rgba(148, 163, 184, 0.14);
  --border-neutral-strong: rgba(203, 213, 225, 0.18);
  --text-neutral: rgba(226, 232, 240, 0.82);
  --text-neutral-soft: rgba(148, 163, 184, 0.76);
}

/* Media header controls: keep surfaces neutral; accent is only a state signal. */
.editorApp[data-theme="dark"] .mediaToolbar,
.editorApp[data-theme="night"] .mediaToolbar {
  gap: 8px !important;
}

.editorApp[data-theme="dark"] .mediaActionButton,
.editorApp[data-theme="night"] .mediaActionButton {
  height: 32px !important;
  min-width: 104px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(var(--accent-rgb), 0.26) !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.105)),
    var(--surface-neutral-1) !important;
  color: rgba(248, 250, 252, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 8px 18px rgba(0,0,0,0.13) !important;
  filter: none !important;
}

.editorApp[data-theme="dark"] .mediaActionButton:hover,
.editorApp[data-theme="night"] .mediaActionButton:hover {
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.23), rgba(var(--accent-rgb), 0.13)),
    rgba(17, 24, 39, 0.78) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 22px rgba(0,0,0,0.16) !important;
}

.editorApp[data-theme="dark"] .mediaIconButton,
.editorApp[data-theme="night"] .mediaIconButton {
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-neutral) !important;
  background: var(--surface-neutral-1) !important;
  color: var(--text-neutral-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

.editorApp[data-theme="dark"] .mediaIconButton:hover,
.editorApp[data-theme="night"] .mediaIconButton:hover {
  color: rgba(226, 232, 240, 0.94) !important;
  border-color: var(--border-neutral-strong) !important;
  background: var(--surface-neutral-hover) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.editorApp[data-theme="dark"] .mediaIconButton.is-active,
.editorApp[data-theme="night"] .mediaIconButton.is-active,
.editorApp[data-theme="dark"] .mediaIconButton[aria-pressed="true"],
.editorApp[data-theme="night"] .mediaIconButton[aria-pressed="true"] {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.38) !important;
  background: var(--surface-neutral-active) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 0 0 1px rgba(var(--accent-rgb),0.035) !important;
}

/* Segmented media tabs: quiet by default; active uses one clean accent. */
.editorApp[data-theme="dark"] .mediaFilterTabs,
.editorApp[data-theme="night"] .mediaFilterTabs {
  padding: 3px !important;
  gap: 2px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.11) !important;
  background: rgba(15, 23, 42, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.editorApp[data-theme="dark"] .mediaFilterTab,
.editorApp[data-theme="night"] .mediaFilterTab {
  height: 25px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: rgba(203, 213, 225, 0.70) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 680 !important;
}

.editorApp[data-theme="dark"] .mediaFilterTab:hover,
.editorApp[data-theme="night"] .mediaFilterTab:hover {
  color: rgba(241, 245, 249, 0.92) !important;
  background: rgba(148, 163, 184, 0.10) !important;
}

.editorApp[data-theme="dark"] .mediaFilterTab.is-active,
.editorApp[data-theme="night"] .mediaFilterTab.is-active {
  color: #fff !important;
  background: rgba(var(--accent-rgb), 0.20) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* Bottom record control: premium but compact, not a bright distraction. */
.editorApp[data-theme="dark"] .toolButtonRecord,
.editorApp[data-theme="night"] .toolButtonRecord {
  min-width: 74px !important;
  height: 32px !important;
  padding-inline: 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--accent-rgb), 0.32) !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0.075)),
    rgba(15, 23, 42, 0.74) !important;
  color: rgba(241, 245, 249, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 7px 16px rgba(0,0,0,0.13) !important;
}

.editorApp[data-theme="dark"] .toolButtonRecord:hover,
.editorApp[data-theme="night"] .toolButtonRecord:hover {
  color: #fff !important;
  border-color: rgba(var(--accent-rgb), 0.48) !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.10)),
    rgba(17, 24, 39, 0.80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 9px 20px rgba(0,0,0,0.16) !important;
}

/* Top CTAs: Upgrade remains premium; Export stays the main action but still cohesive. */
.editorApp[data-theme="dark"] .topTextButton.topTextButton-primary,
.editorApp[data-theme="night"] .topTextButton.topTextButton-primary {
  height: 32px !important;
  min-width: 104px !important;
  border-radius: 999px !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  color: rgba(248,250,252,0.92) !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb),0.22), rgba(124,92,255,0.18)),
    rgba(15,23,42,0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 9px 18px rgba(0,0,0,0.16) !important;
}

.editorApp[data-theme="dark"] .topTextButton.topTextButton-primary:hover,
.editorApp[data-theme="night"] .topTextButton.topTextButton-primary:hover {
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb),0.28), rgba(124,92,255,0.22)),
    rgba(15,23,42,0.82) !important;
}

.editorApp[data-theme="dark"] .exportButton,
.editorApp[data-theme="night"] .exportButton {
  height: 34px !important;
  min-width: 132px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--accent-rgb), 0.30) !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.74), rgba(124, 92, 255, 0.70)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 22px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.025) !important;
}

.editorApp[data-theme="dark"] .exportButton:hover,
.editorApp[data-theme="night"] .exportButton:hover {
  filter: brightness(1.04) saturate(1.04);
  transform: translateY(-1px);
}

/* Keep toolbar filters from looking like danger/red buttons unless truly active. */
.mediaIconButton#mediaFilterButton:not(.is-active) {
  color: var(--text-neutral-soft) !important;
  border-color: var(--border-neutral) !important;
  background: var(--surface-neutral-1) !important;
}


/* Light mode visual cleanup
   Keeps the preview stage dark while giving the editor shell, panels,
   inspector, and timeline stronger separation in the default light theme. */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) {
  --bg: #eef3f8;
  --panel: #ffffff;
  --panel-2: #f7fafc;
  --text: #0f172a;
  --muted: #5f6f85;
  --line: rgba(96, 111, 132, 0.24);
  --line-soft: rgba(96, 111, 132, 0.14);
  --control-border: rgba(96, 111, 132, 0.22);
  --control-shadow: 0 8px 22px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background:
    radial-gradient(circle at 50% -18%, rgba(var(--accent-rgb), 0.12), transparent 32%),
    linear-gradient(180deg, #f7fafc 0%, #edf3f8 52%, #e6edf5 100%);
  color: var(--text);
}

/* Main editor surfaces */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .workspace {
  background:
    radial-gradient(circle at 50% 18%, rgba(14, 165, 233, 0.08), transparent 34%),
    linear-gradient(180deg, #f7fafc 0%, #edf3f8 100%);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .topBar {
  border-bottom-color: rgba(96, 111, 132, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 253, 0.9)),
    #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(15, 23, 42, 0.06);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .stageWrap {
  position: relative;
  background:
    radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.1), transparent 32%),
    linear-gradient(180deg, #f4f8fc, #eaf1f8);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .stageWrap::before {
  content: "";
  position: absolute;
  inset: 12px 24px 8px;
  border: 1px solid rgba(96, 111, 132, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 38px rgba(15, 23, 42, 0.06);
  pointer-events: none;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .previewFrame {
  z-index: 1;
  border-color: rgba(10, 18, 32, 0.2);
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.7);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .playerControls {
  z-index: 1;
}

/* Left media panel */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .sidePanel {
  border-right-color: rgba(96, 111, 132, 0.2);
  background:
    linear-gradient(180deg, #f8fbfe, #edf3f8),
    #f4f7fb;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="media"] {
  background:
    linear-gradient(180deg, #f8fbfe 0%, #eef4fa 100%);
  color: #172033;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaLibraryHeader {
  border-bottom-color: rgba(96, 111, 132, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 253, 0.92)),
    #ffffff;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.72);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaSearch,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaActionButton,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton {
  border-color: rgba(96, 111, 132, 0.22);
  background:
    linear-gradient(180deg, #ffffff, #f6f9fc);
  box-shadow: var(--control-shadow);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetList {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(238, 244, 250, 0.44));
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmpty,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .statusBox {
  border-color: rgba(96, 111, 132, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 253, 0.84));
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* Top actions and toolbar controls */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .topActions,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTools,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .cutToolGroup,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbarRightTools,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .spectrumLiveToggle,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .zoomValue {
  border-color: rgba(96, 111, 132, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.88)),
    #ffffff;
  color: #334155;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar {
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(96, 111, 132, 0.18);
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.04);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButton,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .rightToolButton,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTools .iconButton,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .iconButton {
  color: #40516a;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .rightToolButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .rightToolButton:focus-visible,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.28);
  background:
    linear-gradient(180deg, #ffffff, rgba(var(--accent-rgb), 0.1));
  color: var(--accent-dark);
  box-shadow: 0 6px 14px rgba(var(--accent-rgb), 0.12);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButton.is-active,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .rightToolButton.is-active {
  border-color: rgba(var(--accent-rgb), 0.34);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08)),
    #ffffff;
  color: var(--accent-dark);
  box-shadow:
    inset 0 -2px 0 rgba(var(--accent-rgb), 0.44),
    0 6px 16px rgba(var(--accent-rgb), 0.1);
}

/* Timeline contrast */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDock {
  border-top-color: rgba(96, 111, 132, 0.22);
  background:
    linear-gradient(180deg, #f7fafc 0%, #eaf1f8 100%);
  box-shadow:
    0 -12px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineResizeHandle {
  border-bottom-color: rgba(96, 111, 132, 0.18);
  background:
    linear-gradient(180deg, #ffffff, #f3f7fb);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineCanvas {
  background:
    linear-gradient(180deg, #f4f8fc 0 28px, #edf4fa 28px 100%);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineRuler {
  border-bottom-color: rgba(71, 85, 105, 0.18);
  --timeline-ruler-surface-top: #253144;
  --timeline-ruler-surface-bottom: #202b3d;
  --timeline-ruler-major-alpha: 0.36;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineRuler:hover {
  --timeline-ruler-surface-top: #2b374a;
  --timeline-ruler-surface-bottom: #253144;
  --timeline-ruler-major-alpha: 0.46;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTick span {
  color: rgba(241, 245, 249, 0.84);
  font-weight: 700;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineRuler:hover .timelineTick span {
  color: #ffffff;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTick.is-major::before {
  background: rgba(241, 245, 249, 0.82);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTick.is-major::after {
  background: rgba(148, 163, 184, 0.2);
  opacity: 0.58;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropZone {
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%);
  scrollbar-color: #8394aa #e3ebf3;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 14%, rgba(96, 111, 132, 0.24));
  background: #f5f5f5;
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 62%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(148, 163, 184, 0.10);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack:hover {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 24%, rgba(71, 85, 105, 0.28));
  background: color-mix(in srgb, var(--track-accent, #38bdf8) 3%, #f5f5f5);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-track-selected {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 42%, rgba(71, 85, 105, 0.28));
  background: color-mix(in srgb, var(--track-accent, #38bdf8) 4%, #f5f5f5);
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 76%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 14%, transparent),
    0 4px 10px rgba(15, 23, 42, 0.04);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack::before,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrackLabel {
  border-right-color: color-mix(in srgb, var(--track-accent, #38bdf8) 18%, rgba(96, 111, 132, 0.22));
  background: color-mix(in srgb, var(--track-accent, #38bdf8) 6%, #f5f5f5);
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 58%, #34445b);
  box-shadow: 4px 0 10px rgba(15, 23, 42, 0.04);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl {
  background: rgba(255, 255, 255, 0.68);
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 58%, #52647f);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineHScroll {
  border-top-color: rgba(96, 111, 132, 0.18);
  background: linear-gradient(180deg, #e9f0f7, #dce7f1);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineHScroll::before {
  background: rgba(96, 111, 132, 0.22);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineHScrollThumb {
  background: linear-gradient(180deg, #97a9bf, #64778f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 1px 3px rgba(15, 23, 42, 0.18);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineHScrollButton {
  color: #475569;
  border-color: rgba(96, 111, 132, 0.20);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 2px rgba(15, 23, 42, 0.10);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineHScrollButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineHScrollButton.is-pressing {
  color: #0f172a;
  border-color: rgba(56, 189, 248, 0.38);
  background: rgba(255, 255, 255, 0.96);
}

/* Right inspector */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .inspectorPanel {
  border-left-color: rgba(96, 111, 132, 0.2);
  background:
    linear-gradient(180deg, #f8fbfe, #eef4fa);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.72);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .inspectorTabs {
  border-bottom-color: rgba(96, 111, 132, 0.16);
  background:
    linear-gradient(180deg, #ffffff, #f6f9fc);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .inspectorTab {
  color: #43536b;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .inspectorTab.is-active {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), #ffffff);
  color: var(--accent-dark);
  box-shadow:
    inset 0 -3px 0 var(--accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .inspectorPane {
  padding: 18px 16px 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(238, 244, 250, 0.42));
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .controlRow,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .colorControl,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .audioControl,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .audioFeature {
  border: 1px solid rgba(96, 111, 132, 0.14);
  border-radius: 12px;
  padding: 11px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 253, 0.86));
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .colorControl {
  gap: 9px;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .controlRow select,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .controlRow input[type="number"],
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .secondaryWide,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .colorNumber,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .audioNumber {
  border-color: rgba(96, 111, 132, 0.22);
  background:
    linear-gradient(180deg, #ffffff, #f7fafc);
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .colorInspectorHeader,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .audioInspectorSummary {
  border-color: rgba(96, 111, 132, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), 0.18), transparent 38%),
    linear-gradient(180deg, #ffffff, #f3f8fc);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* Prevent the existing force-black toolbar icon overrides from making light mode look harsh. */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .toolButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .toolButton:focus-visible,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .toolButton.is-active,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .toolButton:active,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .cutToolGroup .toolButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .cutToolGroup .toolButton:focus-visible,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .cutToolGroup .toolButton.is-active,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .cutToolGroup .toolButton:active {
  color: var(--accent-dark);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .cutToolGroup .toolButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .cutToolGroup .toolButton:focus-visible,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .cutToolGroup .toolButton.is-active,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .editToolbar .cutToolGroup .toolButton:active {
  color: var(--accent-dark);
}


/* Light mode media-panel contrast repair
   Fixes the empty import card and segmented filter/readout controls after the
   light shell cleanup so they stay readable on white surfaces. */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTabs {
  border-color: rgba(96, 111, 132, 0.20) !important;
  background:
    linear-gradient(180deg, rgba(226, 232, 240, 0.92), rgba(203, 213, 225, 0.76)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab {
  color: #64748b !important;
  background: transparent !important;
  font-weight: 780 !important;
  text-shadow: none !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab:hover {
  color: #0f766e !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab.is-active {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.92), rgba(124, 92, 255, 0.78)) !important;
  box-shadow:
    0 8px 18px rgba(var(--accent-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) #mediaCountLabel {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmpty {
  border: 1px solid rgba(96, 111, 132, 0.20) !important;
  background:
    radial-gradient(circle at 14% 22%, rgba(45, 212, 191, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%) !important;
  color: #172033 !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton {
  min-height: 168px;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyIcon {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.92), rgba(14, 165, 233, 0.76)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 12px 24px rgba(20, 184, 166, 0.22) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyText strong {
  color: #0f172a !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyText small {
  color: #0f766e !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  background:
    radial-gradient(circle at 14% 22%, rgba(45, 212, 191, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #edfdf8 100%) !important;
  color: #0f172a !important;
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.10),
    0 0 0 3px rgba(var(--accent-rgb), 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:hover .assetEmptyIcon,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:focus-visible .assetEmptyIcon {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.96), rgba(6, 182, 212, 0.86)) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .statusBox strong {
  color: #172033 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .statusBox,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .statusBox .featureGateLine {
  color: #5f6f85 !important;
}


/* === Codex patch: recording pill, timeline control polish, strong locked-track states === */
.trackControls {
  gap: 6px;
}

.trackControl {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0.9;
  transition:
    color 140ms ease,
    opacity 140ms ease,
    transform 140ms ease,
    filter 140ms ease;
}

.trackControl .uiIcon {
  width: 15px;
  height: 15px;
  stroke-width: 2.05;
}

.trackControl:hover,
.trackControl:focus-visible {
  background: transparent !important;
  opacity: 1;
  transform: translateY(-1px) scale(1.04);
}

.trackControl.is-off {
  opacity: 0.42;
}

.trackControl[data-track-action="lock"] {
  position: relative;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl {
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 70%, #475569) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl:focus-visible {
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 85%, #0f172a) !important;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12));
}

.editorApp[data-theme="dark"] .trackControl,
.editorApp[data-theme="night"] .trackControl {
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 52%, rgba(226, 232, 240, 0.92)) !important;
}

.editorApp[data-theme="dark"] .trackControl:hover,
.editorApp[data-theme="dark"] .trackControl:focus-visible,
.editorApp[data-theme="night"] .trackControl:hover,
.editorApp[data-theme="night"] .trackControl:focus-visible {
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 68%, #ffffff) !important;
  filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.12));
}

.timelineTrack.is-locked {
  border-style: solid;
}

.timelineTrack.is-locked .timelineClip {
  opacity: 0.92;
}

.timelineTrack.is-locked .timelineTrackLabel,
.timelineTrack.is-locked::before {
  border-right-width: 1px;
}

.timelineTrack.is-locked .trackControl[data-track-action="lock"] {
  opacity: 1;
}

.timelineTrack.is-locked .trackControl:not([data-track-action="lock"]) {
  opacity: 0.62;
}

.timelineTrack.is-locked .trackName {
  text-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 34%, rgba(51, 65, 85, 0.28));
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(15, 23, 42, 0.115) 0 8px,
      rgba(15, 23, 42, 0.02) 8px 16px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent-surface, rgba(56, 189, 248, 0.12)) 92%, rgba(15, 23, 42, 0.04)),
      rgba(248, 250, 252, 0.94) 48%,
      rgba(241, 245, 249, 0.90)
    ),
    #f4f7fb;
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 76%, #0f172a),
    inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked::before,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked .timelineTrackLabel {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(15, 23, 42, 0.13) 0 8px,
      rgba(15, 23, 42, 0.03) 8px 16px
    ),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 16%, #ecf3fa), #f4f8fc);
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 48%, #243043);
  box-shadow: 7px 0 16px rgba(15, 23, 42, 0.08);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked .trackControl[data-track-action="lock"] {
  color: #0f172a !important;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.2));
}

.editorApp[data-theme="dark"] .timelineTrack.is-locked,
.editorApp[data-theme="night"] .timelineTrack.is-locked {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 28%, rgba(226, 232, 240, 0.22));
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.11) 0 8px,
      rgba(255, 255, 255, 0.022) 8px 16px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent, #38bdf8) 10%, rgba(2, 6, 23, 0.98)) 0,
      rgba(12, 18, 29, 0.98) var(--track-label-width, 108px),
      rgba(8, 15, 25, 0.98) 52%,
      rgba(5, 10, 18, 0.98) 100%
    );
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 74%, #e2e8f0),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

.editorApp[data-theme="dark"] .timelineTrack.is-locked::before,
.editorApp[data-theme="dark"] .timelineTrack.is-locked .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack.is-locked::before,
.editorApp[data-theme="night"] .timelineTrack.is-locked .timelineTrackLabel {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.115) 0 8px,
      rgba(255, 255, 255, 0.025) 8px 16px
    ),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 20%, rgba(15, 23, 42, 0.98)), rgba(15, 23, 42, 0.94));
  color: rgba(241, 245, 249, 0.96);
  box-shadow: 7px 0 16px rgba(0, 0, 0, 0.24);
}

.editorApp[data-theme="dark"] .timelineTrack.is-locked .trackControl[data-track-action="lock"],
.editorApp[data-theme="night"] .timelineTrack.is-locked .trackControl[data-track-action="lock"] {
  color: #ffffff !important;
  filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.16));
}

/* Recording pill cleanup */
.toolButtonRecord {
  min-width: 84px !important;
  height: 36px !important;
  padding-inline: 16px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease !important;
}

.toolButtonRecord .uiIcon {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.2 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButtonRecord {
  color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239, 249, 243, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    0 10px 20px rgba(15, 23, 42, 0.08) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButtonRecord .uiIcon {
  color: color-mix(in srgb, var(--accent, #34d399) 72%, #0f172a) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButtonRecord:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButtonRecord:focus-visible {
  color: #0b1324 !important;
  border-color: rgba(var(--accent-rgb), 0.46) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,1), rgba(226, 252, 236, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 12px 24px rgba(15, 23, 42, 0.10) !important;
  transform: translateY(-1px);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .toolButtonRecord:active {
  transform: translateY(0) scale(0.985);
}


/* === Codex repair: locked track should keep media visible with ultra-thin overlay ===
   Keep this at the end so it softens the earlier strong locked-track pattern.
   The pattern is static CSS only: no animation, no layout work, no performance cost. */
.timelineTrack.is-locked .timelineClip {
  opacity: 1 !important;
  filter: none !important;
}

.timelineTrack.is-locked .clipThumbStrip,
.timelineTrack.is-locked .clipThumbStrip.has-frames i,
.timelineTrack.is-locked .clipThumb {
  opacity: 1 !important;
  filter: saturate(1.02) contrast(1.02);
}

.timelineTrack.is-locked .clipSelectionOverlay {
  opacity: 1 !important;
  pointer-events: none;
  transition: none;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 30%, rgba(96, 111, 132, 0.22)) !important;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(15, 23, 42, 0.035) 0 1px,
      transparent 1px 12px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent-surface, rgba(56, 189, 248, 0.12)) 88%, rgba(255, 255, 255, 0.72)),
      rgba(250, 252, 255, 0.96) 48%,
      rgba(244, 248, 252, 0.94)
    ),
    #f8fafc !important;
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(96, 111, 132, 0.10) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked .clipSelectionOverlay {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(15, 23, 42, 0.085) 0 1px,
      transparent 1px 13px
    ) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked::before,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked .timelineTrackLabel {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(15, 23, 42, 0.045) 0 1px,
      transparent 1px 12px
    ),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 14%, #edf4fa), #f6f9fc) !important;
  color: color-mix(in srgb, var(--track-accent, #38bdf8) 54%, #334155) !important;
}

.editorApp[data-theme="dark"] .timelineTrack.is-locked,
.editorApp[data-theme="night"] .timelineTrack.is-locked {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 28%, rgba(226, 232, 240, 0.16)) !important;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 12px
    ),
    linear-gradient(
      90deg,
      rgba(13, 21, 33, 0.96) 0,
      rgba(13, 21, 33, 0.96) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 10%, #020617) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 6%, #020617) 52%,
      color-mix(in srgb, var(--track-accent, #38bdf8) 4%, #020617) 100%
    ),
    #020617 !important;
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--track-accent, #38bdf8) 70%, #020617),
    inset 0 1px 0 color-mix(in srgb, var(--track-accent, #38bdf8) 16%, #020617),
    inset 0 -1px 0 color-mix(in srgb, var(--track-accent, #38bdf8) 16%, #020617) !important;
}

.editorApp[data-theme="dark"] .timelineTrack.is-locked .clipSelectionOverlay,
.editorApp[data-theme="night"] .timelineTrack.is-locked .clipSelectionOverlay {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.10) 0 1px,
      transparent 1px 13px
    ) !important;
}

.editorApp[data-theme="dark"] .timelineTrack.is-locked::before,
.editorApp[data-theme="dark"] .timelineTrack.is-locked .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack.is-locked::before,
.editorApp[data-theme="night"] .timelineTrack.is-locked .timelineTrackLabel {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 12px
    ),
    linear-gradient(90deg, var(--track-accent-label, rgba(56, 189, 248, 0.18)), rgba(27, 38, 53, 0.92)),
    linear-gradient(180deg, #202b3b, #182231) !important;
  color: var(--track-accent, #a8d8ff) !important;
}


/* === Codex patch: soft accurate timeline media-drop preview ===
   The track hover glow must stay subtle; the duration-sized preview box is the
   only element that shows where the media will land. This prevents a full-row
   shadow from looking longer than the media being dropped. */
.timelineTrack.is-drop-hover {
  border-color: color-mix(in srgb, var(--track-accent, #22d3ee) 34%, rgba(148, 163, 184, 0.30)) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 5%, #f8fafc), #f8fafc 52%, #f5f7fb),
    #f8fafc !important;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #22d3ee) 54%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #22d3ee) 8%, transparent) !important;
}

.timelineTrack.is-drop-hover::after {
  content: none !important;
}

.timelineTrack.is-drop-hover .timelineTrackLabel {
  color: color-mix(in srgb, var(--track-accent, #22d3ee) 58%, #334155) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #22d3ee) 10%, #eef3f8), #eef3f8) !important;
  box-shadow: 5px 0 12px rgba(15, 23, 42, 0.035) !important;
}

.timelineDropPreview {
  top: 10px !important;
  height: calc(100% - 20px) !important;
  min-width: 42px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--track-accent, #22d3ee) 58%, rgba(255,255,255,0.48)) !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--track-accent, #22d3ee) 28%, rgba(9, 18, 31, 0.58)),
      color-mix(in srgb, var(--track-accent, #22d3ee) 11%, rgba(9, 18, 31, 0.34))
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.13),
    inset 0 0 18px color-mix(in srgb, var(--track-accent, #22d3ee) 10%, transparent),
    0 7px 14px rgba(2, 6, 23, 0.14) !important;
  color: rgba(248, 250, 252, 0.96) !important;
  opacity: 0.96;
}

.timelineDropPreview::before {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.13) 0,
      rgba(255,255,255,0.07) 14%,
      transparent 46%,
      rgba(255,255,255,0.05) 100%
    ) !important;
  opacity: 0.46 !important;
}

.timelineDropPreview span,
.timelineDropPreview small {
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.34) !important;
}

.timelineDropPreview span {
  font-size: 11px !important;
  font-weight: 900 !important;
}

.timelineDropPreview small {
  color: rgba(226, 232, 240, 0.82) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.editorApp[data-theme="dark"] .timelineTrack.is-drop-hover,
.editorApp[data-theme="night"] .timelineTrack.is-drop-hover {
  border-color: color-mix(in srgb, var(--track-accent, #22d3ee) 28%, rgba(148, 163, 184, 0.14)) !important;
  background:
    linear-gradient(
      90deg,
      #131d2a 0,
      #131d2a var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #22d3ee) 4%, #08131f) var(--track-label-width, 108px),
      #08131f 100%
    ),
    #08131f !important;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #22d3ee) 48%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #22d3ee) 7%, transparent) !important;
}

.editorApp[data-theme="dark"] .timelineTrack.is-drop-hover .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack.is-drop-hover .timelineTrackLabel {
  color: color-mix(in srgb, var(--track-accent, #22d3ee) 52%, #dbeafe) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #22d3ee) 7%, #131d2a), #111a26) !important;
}

.editorApp[data-theme="dark"] .timelineDropPreview,
.editorApp[data-theme="night"] .timelineDropPreview {
  border-color: color-mix(in srgb, var(--track-accent, #22d3ee) 54%, rgba(148, 163, 184, 0.28)) !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--track-accent, #22d3ee) 22%, rgba(8, 16, 29, 0.82)),
      color-mix(in srgb, var(--track-accent, #22d3ee) 9%, rgba(8, 16, 29, 0.58))
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 16px color-mix(in srgb, var(--track-accent, #22d3ee) 8%, transparent),
    0 7px 14px rgba(0, 0, 0, 0.16) !important;
}


/* === Codex patch: professional single timeline drop ghost ===
   The timeline should show one duration-accurate placement ghost only. The
   browser drag image is hidden so users do not see a second floating card. */
.mediaDragGhost-transparent {
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.timelineDropPreview {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  padding-inline: 14px !important;
}

.timelineDropPreview span {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.timelineDropPreview small {
  flex: 0 0 auto !important;
  opacity: 0.78 !important;
}

.timelineDropPreview[style*="width: 34px"],
.timelineDropPreview[style*="width: 35px"],
.timelineDropPreview[style*="width: 36px"],
.timelineDropPreview[style*="width: 37px"],
.timelineDropPreview[style*="width: 38px"],
.timelineDropPreview[style*="width: 39px"],
.timelineDropPreview[style*="width: 40px"],
.timelineDropPreview[style*="width: 41px"],
.timelineDropPreview[style*="width: 42px"],
.timelineDropPreview[style*="width: 43px"],
.timelineDropPreview[style*="width: 44px"],
.timelineDropPreview[style*="width: 45px"],
.timelineDropPreview[style*="width: 46px"],
.timelineDropPreview[style*="width: 47px"],
.timelineDropPreview[style*="width: 48px"],
.timelineDropPreview[style*="width: 49px"],
.timelineDropPreview[style*="width: 50px"],
.timelineDropPreview[style*="width: 51px"],
.timelineDropPreview[style*="width: 52px"],
.timelineDropPreview[style*="width: 53px"],
.timelineDropPreview[style*="width: 54px"],
.timelineDropPreview[style*="width: 55px"],
.timelineDropPreview[style*="width: 56px"],
.timelineDropPreview[style*="width: 57px"],
.timelineDropPreview[style*="width: 58px"],
.timelineDropPreview[style*="width: 59px"],
.timelineDropPreview[style*="width: 60px"],
.timelineDropPreview[style*="width: 61px"],
.timelineDropPreview[style*="width: 62px"],
.timelineDropPreview[style*="width: 63px"],
.timelineDropPreview[style*="width: 64px"],
.timelineDropPreview[style*="width: 65px"],
.timelineDropPreview[style*="width: 66px"],
.timelineDropPreview[style*="width: 67px"],
.timelineDropPreview[style*="width: 68px"],
.timelineDropPreview[style*="width: 69px"] {
  justify-content: center !important;
  padding-inline: 0 !important;
}

.timelineDropPreview[style*="width: 34px"] small,
.timelineDropPreview[style*="width: 35px"] small,
.timelineDropPreview[style*="width: 36px"] small,
.timelineDropPreview[style*="width: 37px"] small,
.timelineDropPreview[style*="width: 38px"] small,
.timelineDropPreview[style*="width: 39px"] small,
.timelineDropPreview[style*="width: 40px"] small,
.timelineDropPreview[style*="width: 41px"] small,
.timelineDropPreview[style*="width: 42px"] small,
.timelineDropPreview[style*="width: 43px"] small,
.timelineDropPreview[style*="width: 44px"] small,
.timelineDropPreview[style*="width: 45px"] small,
.timelineDropPreview[style*="width: 46px"] small,
.timelineDropPreview[style*="width: 47px"] small,
.timelineDropPreview[style*="width: 48px"] small,
.timelineDropPreview[style*="width: 49px"] small,
.timelineDropPreview[style*="width: 50px"] small,
.timelineDropPreview[style*="width: 51px"] small,
.timelineDropPreview[style*="width: 52px"] small,
.timelineDropPreview[style*="width: 53px"] small,
.timelineDropPreview[style*="width: 54px"] small,
.timelineDropPreview[style*="width: 55px"] small,
.timelineDropPreview[style*="width: 56px"] small,
.timelineDropPreview[style*="width: 57px"] small,
.timelineDropPreview[style*="width: 58px"] small,
.timelineDropPreview[style*="width: 59px"] small,
.timelineDropPreview[style*="width: 60px"] small,
.timelineDropPreview[style*="width: 61px"] small,
.timelineDropPreview[style*="width: 62px"] small,
.timelineDropPreview[style*="width: 63px"] small,
.timelineDropPreview[style*="width: 64px"] small,
.timelineDropPreview[style*="width: 65px"] small,
.timelineDropPreview[style*="width: 66px"] small,
.timelineDropPreview[style*="width: 67px"] small,
.timelineDropPreview[style*="width: 68px"] small,
.timelineDropPreview[style*="width: 69px"] small {
  display: none !important;
}


/* === Codex repair: first-drag reliability + record pill vertical alignment ===
   Keep these final overrides at the end so the bottom toolbar record button
   stays centered even after earlier generic toolButton grid styles. */
.toolButtonRecord,
.toolButton.toolButtonRecord,
.toolButtonRecord.has-labeled-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  place-items: unset !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

.toolButtonRecord .uiIcon,
.toolButton.toolButtonRecord .uiIcon {
  position: static !important;
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
}

.toolButtonRecord > span:not(.srOnly),
.toolButton.toolButtonRecord > span:not(.srOnly) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  white-space: nowrap !important;
}

.mediaDragGhost-transparent {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* === Codex repair: light media panel contrast + record pill hard-center ===
   Final overrides keep light mode readable and keep the recorder icon centered. */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton {
  color: #111827 !important;
  border-color: rgba(51, 65, 85, 0.30) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #eef3f8 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.96),
    0 7px 16px rgba(15, 23, 42, 0.10) !important;
  opacity: 1 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton .uiIcon,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton svg {
  color: #111827 !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  stroke-width: 2.35 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton:focus-visible {
  color: #020617 !important;
  border-color: rgba(15, 23, 42, 0.42) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #e7edf5 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 9px 18px rgba(15, 23, 42, 0.13) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton.is-active,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton[aria-pressed="true"] {
  color: #0f172a !important;
  border-color: rgba(var(--accent-rgb), 0.46) !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(255,255,255,0.96)) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem {
  color: #0f172a !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetMeta strong,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem .assetMeta strong {
  color: #0f172a !important;
  font-weight: 820 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetMeta small,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem .assetMeta small {
  color: #334155 !important;
  font-weight: 690 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem:hover .assetMeta strong,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem:focus-visible .assetMeta strong,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem.is-selected .assetMeta strong {
  color: #020617 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem:hover .assetMeta small,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem:focus-visible .assetMeta small,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetItem.is-selected .assetMeta small {
  color: #1f2937 !important;
}

/* Recorder/voice pill: hard-center icon and label against generic .toolButton rules. */
.toolButtonRecord,
.toolButton.toolButtonRecord,
.toolButtonRecord.has-labeled-icon,
.toolButton.toolButtonRecord.has-labeled-icon {
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  align-items: center !important;
  justify-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  place-content: center !important;
  gap: 8px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding-block: 0 !important;
  padding-inline: 15px !important;
  line-height: 1 !important;
  font-size: 12px !important;
  overflow: hidden !important;
}

.toolButtonRecord > .uiIcon,
.toolButton.toolButtonRecord > .uiIcon,
.toolButtonRecord > svg,
.toolButton.toolButtonRecord > svg {
  position: relative !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  translate: 0 0 !important;
  transform: translateY(0) !important;
  vertical-align: middle !important;
}

.toolButtonRecord > span:not(.srOnly),
.toolButton.toolButtonRecord > span:not(.srOnly) {
  align-self: center !important;
  justify-self: center !important;
  display: inline-block !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  translate: 0 0 !important;
  transform: translateY(0) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}


/* === Codex patch: professional left rail hover, no harsh dark state ===
   The rail sits on a dark shell in both light and dark editor themes, so hover
   states must brighten with the active accent instead of turning black/dark. */
.editorApp .railButton,
.editorApp[data-theme="dark"] .railButton,
.editorApp[data-theme="night"] .railButton {
  isolation: isolate;
}

.editorApp .railButton:hover,
.editorApp .railButton:focus-visible,
.editorApp[data-theme="dark"] .railButton:hover,
.editorApp[data-theme="dark"] .railButton:focus-visible,
.editorApp[data-theme="night"] .railButton:hover,
.editorApp[data-theme="night"] .railButton:focus-visible {
  color: color-mix(in srgb, var(--accent, #22d3ee) 64%, #f8fafc) !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--accent-rgb, 34, 211, 238), 0.13), transparent 58%),
    linear-gradient(90deg, rgba(var(--accent-rgb, 34, 211, 238), 0.09), transparent 82%) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.editorApp .railButton:hover::before,
.editorApp .railButton:focus-visible::before,
.editorApp[data-theme="dark"] .railButton:hover::before,
.editorApp[data-theme="dark"] .railButton:focus-visible::before,
.editorApp[data-theme="night"] .railButton:hover::before,
.editorApp[data-theme="night"] .railButton:focus-visible::before {
  height: 22px;
  opacity: 0.52;
  background: linear-gradient(180deg, var(--accent, #22d3ee), color-mix(in srgb, var(--accent, #22d3ee) 55%, #34d399));
}

.editorApp .railButton:hover .railIcon,
.editorApp .railButton:focus-visible .railIcon,
.editorApp[data-theme="dark"] .railButton:hover .railIcon,
.editorApp[data-theme="dark"] .railButton:focus-visible .railIcon,
.editorApp[data-theme="night"] .railButton:hover .railIcon,
.editorApp[data-theme="night"] .railButton:focus-visible .railIcon {
  color: color-mix(in srgb, var(--accent, #22d3ee) 74%, #ffffff) !important;
  background: transparent !important;
  transform: translateY(-1px) scale(1.035);
  filter:
    drop-shadow(0 2px 5px rgba(var(--accent-rgb, 34, 211, 238), 0.18))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08)) !important;
}

.editorApp .railButton:hover > span:not(.railIcon),
.editorApp .railButton:focus-visible > span:not(.railIcon),
.editorApp[data-theme="dark"] .railButton:hover > span:not(.railIcon),
.editorApp[data-theme="dark"] .railButton:focus-visible > span:not(.railIcon),
.editorApp[data-theme="night"] .railButton:hover > span:not(.railIcon),
.editorApp[data-theme="night"] .railButton:focus-visible > span:not(.railIcon) {
  color: color-mix(in srgb, var(--accent, #22d3ee) 54%, #f8fafc) !important;
  text-shadow: 0 0 10px rgba(var(--accent-rgb, 34, 211, 238), 0.12);
}

.editorApp .railButton.is-active,
.editorApp[data-theme="dark"] .railButton.is-active,
.editorApp[data-theme="night"] .railButton.is-active,
.editorApp .railButton.is-active:hover,
.editorApp .railButton.is-active:focus-visible,
.editorApp[data-theme="dark"] .railButton.is-active:hover,
.editorApp[data-theme="dark"] .railButton.is-active:focus-visible,
.editorApp[data-theme="night"] .railButton.is-active:hover,
.editorApp[data-theme="night"] .railButton.is-active:focus-visible {
  color: color-mix(in srgb, var(--accent, #22d3ee) 82%, #ffffff) !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--accent-rgb, 34, 211, 238), 0.16), transparent 62%),
    linear-gradient(90deg, rgba(var(--accent-rgb, 34, 211, 238), 0.105), transparent 86%) !important;
}

.editorApp .railButton.is-active::before,
.editorApp .railButton.is-active:hover::before,
.editorApp .railButton.is-active:focus-visible::before {
  height: 32px;
  opacity: 0.95;
}

.editorApp .railButton.is-active .railIcon,
.editorApp .railButton.is-active:hover .railIcon,
.editorApp .railButton.is-active:focus-visible .railIcon,
.editorApp[data-theme="dark"] .railButton.is-active .railIcon,
.editorApp[data-theme="dark"] .railButton.is-active:hover .railIcon,
.editorApp[data-theme="dark"] .railButton.is-active:focus-visible .railIcon,
.editorApp[data-theme="night"] .railButton.is-active .railIcon,
.editorApp[data-theme="night"] .railButton.is-active:hover .railIcon,
.editorApp[data-theme="night"] .railButton.is-active:focus-visible .railIcon {
  color: color-mix(in srgb, var(--accent, #22d3ee) 86%, #ffffff) !important;
  transform: none;
  filter: drop-shadow(0 3px 8px rgba(var(--accent-rgb, 34, 211, 238), 0.16)) !important;
}


/* === ChatGPT patch: simple timeline rows, no strong colored strokes ===
   User requested the solid color lines/strokes to be removed in both light and dark modes.
   Keep rows clean and readable without heavy separators. */
.timelineTrack {
  border-color: transparent !important;
  box-shadow: none !important;
}

.timelineTrack:hover,
.timelineTrack.is-track-selected,
.timelineTrack.is-drop-hover,
.timelineTrack.is-snap-joining,
.timelineTrack.is-left-limit,
.timelineTrack.is-locked {
  border-color: transparent !important;
  box-shadow: none !important;
}

.timelineTrack::before,
.timelineTrackLabel {
  border-right-color: transparent !important;
  box-shadow: none !important;
}

.timelineTrack.is-left-limit .timelineTrackLabel::after {
  content: none !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropZone {
  background: #eef3f4 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-track-selected {
  background: #f5f5f5 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack::before,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrackLabel {
  background: #eef3f4 !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack + .timelineTrack {
  margin-top: 2px;
}

.editorApp[data-theme="dark"] .timelineTrack,
.editorApp[data-theme="dark"] .timelineTrack:hover,
.editorApp[data-theme="dark"] .timelineTrack.is-track-selected,
.editorApp[data-theme="night"] .timelineTrack,
.editorApp[data-theme="night"] .timelineTrack:hover,
.editorApp[data-theme="night"] .timelineTrack.is-track-selected {
  background: rgba(15, 23, 42, 0.72) !important;
}

.editorApp[data-theme="dark"] .timelineTrack::before,
.editorApp[data-theme="dark"] .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack::before,
.editorApp[data-theme="night"] .timelineTrackLabel {
  background: rgba(15, 23, 42, 0.78) !important;
}

.editorApp[data-theme="dark"] .timelineTrack + .timelineTrack,
.editorApp[data-theme="night"] .timelineTrack + .timelineTrack {
  margin-top: 2px;
}

/* Keep locked tracks visible but do not use hard stroke lines. */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-locked {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(15, 23, 42, 0.035) 0 5px,
      rgba(15, 23, 42, 0.000) 5px 14px
    ),
    #f5f5f5 !important;
}

.editorApp[data-theme="dark"] .timelineTrack.is-locked,
.editorApp[data-theme="night"] .timelineTrack.is-locked {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.042) 0 5px,
      rgba(255, 255, 255, 0.000) 5px 14px
    ),
    rgba(15, 23, 42, 0.72) !important;
}


/* === Codex patch: professional editor boot/loading screen === */
.editorBootLoader {
  --boot-primary: #4f7cff;
  --boot-primary-rgb: 79, 124, 255;
  --boot-secondary: #6d5df6;
  --boot-secondary-rgb: 109, 93, 246;
  --boot-success: #14b87a;
  --boot-success-rgb: 20, 184, 122;
  --boot-ink: #182235;
  --boot-muted: #6a768c;
  background:
    radial-gradient(circle at 16% 18%, rgba(var(--boot-primary-rgb), 0.09), transparent 25%),
    radial-gradient(circle at 82% 20%, rgba(var(--boot-secondary-rgb), 0.08), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(var(--boot-success-rgb), 0.06), transparent 26%),
    linear-gradient(135deg, #edf2f8 0%, #e7edf6 42%, #eef3f8 100%);
  animation: none;
}

.editorBootLoader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.editorBootPanel {
  position: relative;
  overflow: hidden;
  width: min(540px, 92vw);
  padding: 32px 30px 26px;
  border: 1px solid rgba(166, 177, 196, 0.28);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,253,0.94));
  box-shadow:
    0 26px 80px rgba(15, 23, 42, 0.12),
    0 4px 18px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  animation: none;
}

.editorBootPanel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--boot-primary), var(--boot-secondary), #2dd4bf);
  opacity: 0.92;
}

.editorBootBrand {
  gap: 10px;
  margin-bottom: 20px;
}

.editorBootLogoText {
  color: #0f172a;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.editorBootMark {
  gap: 3px;
  height: 22px;
  color: var(--boot-primary);
}

.editorBootMark span {
  width: 4px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(var(--boot-primary-rgb), 0.18);
}

.editorBootText {
  gap: 8px;
}

.editorBootText strong {
  font-size: 20px;
  font-weight: 850;
  color: #162033;
}

.editorBootText span {
  color: var(--boot-muted);
  font-size: 13px;
  font-weight: 650;
}

.editorBootLog {
  gap: 8px;
  height: 188px;
  margin-top: 20px;
  padding: 16px 16px;
  border: 1px solid rgba(166, 177, 196, 0.24);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(249, 251, 253, 0.96), rgba(244, 247, 251, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    0 1px 0 rgba(255,255,255,0.66);
  animation: none;
}

.editorBootLogLine {
  grid-template-columns: auto minmax(0, 1fr) 20px;
  gap: 10px;
  min-height: 22px;
  padding: 1px 0;
  color: #5b6880;
  font-size: 11.5px;
  font-weight: 760;
}

.editorBootLogLine::before {
  width: 6px;
  height: 6px;
  background: linear-gradient(180deg, var(--boot-primary), var(--boot-secondary));
  box-shadow: 0 0 0 3px rgba(var(--boot-primary-rgb), 0.10);
}

.editorBootLogLine i {
  width: 16px;
  height: 16px;
  border-width: 1.6px;
  border-color: rgba(100, 116, 139, 0.24);
  border-top-color: rgba(15, 23, 42, 0.9);
  background: rgba(255, 255, 255, 0.96);
}

.editorBootLogLine.is-done {
  color: #29354a;
}

.editorBootLogLine.is-done i {
  border-color: #1f2937;
  background: linear-gradient(180deg, #243246, #101828);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.14);
}

.editorBootStatusRail {
  gap: 10px;
  margin-top: 18px;
}

.editorBootStatusRail span {
  height: 34px;
  border: 1px solid rgba(166, 177, 196, 0.28);
  border-radius: 999px;
  color: #4f5e75;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 780;
  animation: none;
}

.editorBootStatusRail i {
  width: 7px;
  height: 7px;
  background: linear-gradient(180deg, var(--boot-primary), var(--boot-secondary));
  box-shadow: 0 0 0 4px rgba(var(--boot-primary-rgb), 0.08);
}

@media (max-width: 640px) {
  .editorBootPanel {
    width: min(94vw, 540px);
    padding: 26px 20px 22px;
    border-radius: 18px;
  }

  .editorBootStatusRail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}




body.is-custom-media-asset-dragging,
body.is-custom-media-asset-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

body.is-custom-media-asset-dragging .assetItem {
  cursor: grabbing;
}

/* === Codex patch: persistent drag box + cleaner timeline drop preview === */
.mediaDragCursorGhost {
  position: fixed;
  left: -10000px;
  top: -10000px;
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  min-width: 186px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(17, 24, 39, 0.94)),
    rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
  opacity: 0;
  transform: translate3d(0, 4px, 0) scale(0.985);
  transition: opacity 110ms ease, transform 110ms ease, box-shadow 120ms ease, border-color 120ms ease;
  pointer-events: none;
  /* Phase 2.1 stability: backdrop-filter removed — a cursor-following blurred
     element forced a full backdrop re-sample + repaint every move (the "mouse lag"). */
  will-change: transform, left, top;
}

.mediaDragCursorGhost.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

body.is-custom-media-asset-dragging .mediaDragCursorGhost {
  transition: none !important;
  will-change: left, top, opacity;
}

body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline {
  transform: translate3d(0, -50%, 0) scale(1);
}

body.is-custom-media-asset-dragging .timelineDropPreview {
  transition: none !important;
  will-change: left, width;
}

body.is-custom-media-asset-dragging .timelineDropGhostRow {
  animation-duration: 70ms;
}

.mediaDragCursorGhost.is-over-timeline {
  border-color: rgba(125, 211, 252, 0.34);
  box-shadow:
    0 14px 28px rgba(2, 6, 23, 0.24),
    0 0 0 1px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.mediaDragCursorThumb {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.92), rgba(96, 165, 250, 0.86));
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18);
}

.mediaDragCursorThumb .assetThumb {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.mediaDragCursorThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mediaDragCursorText {
  min-width: 0;
  display: grid;
  gap: 3px;
  line-height: 1.1;
}

.mediaDragCursorText strong {
  max-width: 215px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 850;
}

.mediaDragCursorText small {
  color: rgba(203, 213, 225, 0.84);
  font-size: 10.5px;
  font-weight: 720;
}

/* Phase 2 (DnD Pro): pro drag-card -- count badge, thumb anchor, multi stack */
.mediaDragCursorThumb {
  position: relative;
}

.mediaDragCursorCount {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: var(--accent-contrast, #04261d);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.4), 0 0 0 2px rgba(15, 23, 42, 0.6);
}

.mediaDragCursorGhost[data-drag-count]:not([data-drag-count="1"])::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(17, 24, 39, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.2);
  transform: translate(5px, 6px);
  z-index: -1;
}

.timelineDropPreview {
  top: 4px;
  bottom: 4px;
  height: auto;
  min-width: 34px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--track-accent, #34d399) 44%, rgba(255,255,255,0.16));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--track-accent, #34d399) 12%, rgba(15, 23, 42, 0.44)),
      color-mix(in srgb, var(--track-accent, #34d399) 8%, rgba(15, 23, 42, 0.32))
    ),
    rgba(15, 23, 42, 0.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 18px color-mix(in srgb, var(--track-accent, #34d399) 8%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 0;
  overflow: hidden;
}

.timelineDropPreview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0.01)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 64px);
  opacity: 0.92;
}

.timelineDropPreview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: color-mix(in srgb, var(--track-accent, #34d399) 46%, rgba(255,255,255,0.24));
  opacity: 0.72;
}

.timelineDropPreview span,
.timelineDropPreview small {
  display: none !important;
}

.editorApp[data-theme="dark"] .timelineDropPreview,
.editorApp[data-theme="night"] .timelineDropPreview {
  border-color: color-mix(in srgb, var(--track-accent, #22d3ee) 36%, rgba(148, 163, 184, 0.22));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--track-accent, #22d3ee) 10%, rgba(8, 16, 29, 0.44)),
      color-mix(in srgb, var(--track-accent, #22d3ee) 7%, rgba(8, 16, 29, 0.28))
    ),
    rgba(8, 16, 29, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 16px color-mix(in srgb, var(--track-accent, #22d3ee) 7%, transparent),
    0 3px 10px rgba(0, 0, 0, 0.10);
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropPreview {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 28%, rgba(71, 85, 105, 0.20));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--track-accent, #38bdf8) 7%, rgba(255, 255, 255, 0.92)),
      rgba(255,255,255,0.74)
    ),
    rgba(255,255,255,0.64);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 0 14px color-mix(in srgb, var(--track-accent, #38bdf8) 6%, transparent),
    0 2px 8px rgba(15, 23, 42, 0.08);
}


.timelineTimeCurrent.is-live-drag-time {
  color: #facc15 !important;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.18);
}

.editorApp[data-theme="dark"] .timelineTimeCurrent.is-live-drag-time,
.editorApp[data-theme="night"] .timelineTimeCurrent.is-live-drag-time {
  color: #fde047 !important;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.24);
}


/* === Codex patch: lighter global-style timeline clip drag === */
body.is-dragging-clip .timelineTrack,
body.is-dragging-clip .timelineTrack::before,
body.is-dragging-clip .timelineTrackLabel,
body.is-dragging-clip .timelineClip {
  transition: none !important;
  animation: none !important;
}

body.is-dragging-clip .timelineTrack.is-drop-hover,
body.is-dragging-clip .timelineTrack.is-clip-drag-hover,
body.is-dragging-clip .timelineTrack.is-track-selected,
body.is-dragging-clip .timelineTrack.is-snap-joining {
  transform: none !important;
  filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.is-dragging-clip .timelineTrack.is-drop-hover::after,
body.is-dragging-clip .timelineTrack.is-snap-joining::after,
body.is-dragging-clip .timelineTrack.is-left-limit::after,
body.is-dragging-clip .timelineTrack.is-left-limit .timelineTrackLabel::after {
  content: none !important;
  animation: none !important;
}

body.is-dragging-clip .timelineTrack.is-drop-hover .timelineTrackLabel,
body.is-dragging-clip .timelineTrack.is-clip-drag-hover .timelineTrackLabel,
body.is-dragging-clip .timelineTrack.is-snap-joining .timelineTrackLabel {
  box-shadow: none !important;
}

body.is-dragging-clip .timelineClip.is-live-drag,
body.is-dragging-clip .timelineClip.is-live-drag.is-selected,
body.is-dragging-clip .timelineClip.is-drag-preview {
  opacity: 0.88 !important;
  filter: none !important;
  transform-origin: center center !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.34),
    0 4px 10px rgba(2, 6, 23, 0.12) !important;
}

body.is-dragging-clip .timelineClip.is-live-drag .clipSelectionOverlay {
  opacity: 0.03 !important;
}

body.is-dragging-clip .timelineSnapGuide,
body.is-dragging-media-asset .timelineSnapGuide {
  width: 1px;
  background: linear-gradient(180deg, #ffe27a, #facc15);
  box-shadow:
    0 0 0 1px rgba(24, 18, 0, 0.08),
    0 0 4px rgba(250, 204, 21, 0.16);
}

body.is-dragging-clip .timelineTrack.is-drop-hover {
  background: inherit !important;
}

body.is-dragging-clip .timelineTrack.is-clip-drag-hover {
  background:
    linear-gradient(90deg, rgba(250, 204, 21, 0.035), rgba(250, 204, 21, 0.012)),
    transparent !important;
}

body.is-dragging-clip .editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack.is-clip-drag-hover {
  background:
    linear-gradient(90deg, rgba(250, 204, 21, 0.035), rgba(250, 204, 21, 0.012)),
    #f5f5f5 !important;
}

body.is-dragging-clip .editorApp[data-theme="dark"] .timelineTrack.is-clip-drag-hover,
body.is-dragging-clip .editorApp[data-theme="night"] .timelineTrack.is-clip-drag-hover {
  background:
    linear-gradient(90deg, rgba(250, 204, 21, 0.045), rgba(250, 204, 21, 0.015)),
    rgba(15, 23, 42, 0.72) !important;
}

body.is-dragging-clip .timelineTrack.is-left-limit {
  animation: none !important;
  filter: none !important;
}


.timelineTrack.is-drop-snap-joining {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 20%, transparent);
}

.timelineTrack.is-drop-snap-joining::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0 42%, rgba(255,255,255,0.12) 50%, transparent 58%);
  opacity: 0.45;
  pointer-events: none;
}

.timelineClip.is-drop-snap-target-left,
.timelineClip.is-drop-snap-target-right {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.70),
    0 0 0 1px color-mix(in srgb, var(--track-accent, #34d399) 52%, transparent),
    0 0 10px color-mix(in srgb, var(--track-accent, #34d399) 16%, transparent),
    0 4px 10px rgba(15, 23, 42, 0.10);
}

.timelineClip.is-drop-snap-target-left::after,
.timelineClip.is-drop-snap-target-right::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 1px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe27a, #facc15);
  box-shadow: 0 0 5px rgba(250, 204, 21, 0.22);
  pointer-events: none;
}

.timelineClip.is-drop-snap-target-left::after { left: -1px; }
.timelineClip.is-drop-snap-target-right::after { right: -1px; }

.timelineTimeCurrent.is-live-drag-time {
  color: #ffd84d !important;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.12);
}


/* Phase 1: CapCut-style typed timeline tracks and professional solid clips. */
.timelineTrack {
  height: var(--track-height, 60px) !important;
  min-height: var(--track-height, 60px);
  margin-bottom: 4px;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--track-accent, #475569) 24%, rgba(148, 163, 184, 0.18)) !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent, #475569) 10%, rgba(15, 23, 42, 0.82)) 0,
      color-mix(in srgb, var(--track-accent, #475569) 7%, rgba(15, 23, 42, 0.74)) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #475569) 6%, rgba(15, 23, 42, 0.36)) var(--track-label-width, 108px),
      rgba(15, 23, 42, 0.08) 100%
    ) !important;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #475569) 72%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(2, 6, 23, 0.16) !important;
}

.timelineTrack[data-track-type="video"] { --track-height: 72px; }
.timelineTrack[data-track-type="image"] { --track-height: 52px; }
.timelineTrack[data-track-type="audio"] { --track-height: 56px; }
.timelineTrack[data-track-type="sfx"] { --track-height: 40px; }
.timelineTrack[data-track-type="text"],
.timelineTrack[data-track-type="effect"] { --track-height: 34px; }

.timelineTrack::before,
.timelineTrackLabel {
  border-right-color: color-mix(in srgb, var(--track-accent, #475569) 26%, rgba(148, 163, 184, 0.16)) !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent, #475569) 20%, rgba(15, 23, 42, 0.88)),
      color-mix(in srgb, var(--track-accent, #475569) 10%, rgba(15, 23, 42, 0.82))
    ) !important;
  color: color-mix(in srgb, var(--track-accent, #94a3b8) 62%, #e2e8f0) !important;
  box-shadow: 6px 0 14px rgba(2, 6, 23, 0.12) !important;
}

.timelineTrackLabel {
  padding: 0 7px;
  gap: 6px;
}

.trackName {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.05;
}

.trackIcon {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--track-accent, #475569) 22%, rgba(255, 255, 255, 0.08));
  color: #f8fafc;
  font-size: 10px;
  font-weight: 950;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #475569) 34%, rgba(255, 255, 255, 0.08)),
    0 2px 5px rgba(2, 6, 23, 0.12);
}

.trackName > span:not(.trackIcon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trackName small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(226, 232, 240, 0.58);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.trackControls {
  flex-shrink: 0;
  margin-left: auto;
}

.trackControl {
  background: color-mix(in srgb, var(--track-accent, #475569) 16%, rgba(255, 255, 255, 0.04)) !important;
  color: color-mix(in srgb, var(--track-accent, #94a3b8) 58%, #e2e8f0) !important;
}

.trackControl:hover {
  background: color-mix(in srgb, var(--track-accent, #475569) 28%, rgba(255, 255, 255, 0.08)) !important;
  color: #ffffff !important;
}

.timelineClip {
  top: 5px;
  height: calc(100% - 10px);
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(2, 6, 23, 0.2),
    0 2px 7px rgba(2, 6, 23, 0.16) !important;
}

.timelineClip[data-kind="video"],
.timelineClip[data-kind="recording"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.015) 28%),
    linear-gradient(90deg, #0f766e, #115e59) !important;
  border-color: rgba(153, 246, 228, 0.42) !important;
}

.timelineClip[data-kind="image"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.018) 30%),
    linear-gradient(90deg, #2563eb, #1d4ed8) !important;
  border-color: rgba(191, 219, 254, 0.48) !important;
}

.timelineClip[data-kind="audio"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.018) 28%),
    linear-gradient(90deg, #1d4ed8, #1e40af) !important;
  border-color: rgba(191, 219, 254, 0.44) !important;
}

.timelineClip[data-kind="text"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.018) 30%),
    linear-gradient(90deg, #c05621, #9a3412) !important;
  border-color: rgba(254, 215, 170, 0.48) !important;
}

.timelineClip[data-kind="effect"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 30%),
    linear-gradient(90deg, #7e22ce, #6b21a8) !important;
  border-color: rgba(233, 213, 255, 0.48) !important;
}

.timelineTrack[data-track-type="text"] .timelineClip,
.timelineTrack[data-track-type="effect"] .timelineClip {
  top: 4px;
  height: calc(100% - 8px);
  min-height: 22px;
}

.timelineTrack[data-track-type="text"] .clipThumb,
.timelineTrack[data-track-type="text"] .clipThumbStrip,
.timelineTrack[data-track-type="effect"] .clipThumb,
.timelineTrack[data-track-type="effect"] .clipThumbStrip {
  display: none !important;
}

.timelineTrack[data-track-type="text"] .clipLabel,
.timelineTrack[data-track-type="effect"] .clipLabel {
  top: 50%;
  height: 16px;
  line-height: 16px;
  transform: translateY(-50%);
  background: rgba(2, 6, 23, 0.18);
}

.timelineTrack[data-track-type="audio"] .clipWaveform,
.timelineTrack[data-track-type="sfx"] .clipWaveform {
  left: 5px;
  right: 5px;
  bottom: 4px;
  height: min(24px, calc(100% - 22px));
  background:
    linear-gradient(180deg, rgba(219, 234, 254, 0.08), rgba(30, 64, 175, 0.22)),
    rgba(15, 23, 42, 0.18);
}

.timelineTrack[data-track-type="video"] .clipWaveform {
  height: 13px;
  bottom: 3px;
  opacity: 0.86;
}

.timelineTrack[data-track-type="image"] .clipWaveform,
.timelineTrack[data-track-type="text"] .clipWaveform,
.timelineTrack[data-track-type="effect"] .clipWaveform {
  display: none !important;
}

.timelineClip.is-selected {
  border-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.52),
    0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 56%, rgba(255, 255, 255, 0.22)),
    0 0 16px color-mix(in srgb, var(--track-accent, #38bdf8) 26%, transparent),
    0 5px 14px rgba(2, 6, 23, 0.24) !important;
}

.timelineTrack.is-drop-hover,
.timelineTrack.is-clip-drag-hover {
  border-color: color-mix(in srgb, var(--track-accent, #34d399) 58%, rgba(255, 255, 255, 0.2)) !important;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--track-accent, #34d399) 78%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--track-accent, #34d399) 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--track-accent, #34d399) 14%, transparent) !important;
}

.timelineDropPreview {
  top: 5px;
  height: calc(100% - 10px);
  border-radius: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #34d399) 34%, rgba(15, 23, 42, 0.84)), color-mix(in srgb, var(--track-accent, #34d399) 16%, rgba(15, 23, 42, 0.58))),
    rgba(15, 23, 42, 0.44) !important;
}

.timelineClip.is-muted {
  opacity: 0.62;
  filter: saturate(0.72) grayscale(0.16);
}


/* Phase 2: CapCut-inspired clear automated timeline rows. */
.timelineTrackCanvasAdd,
#addTrackButton {
  display: none !important;
}

.timelineTrack {
  height: var(--track-height, 58px) !important;
  min-height: var(--track-height, 58px) !important;
  margin-bottom: 5px !important;
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--track-accent, #64748b) 34%, rgba(148, 163, 184, 0.15)) !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent, #64748b) 14%, #121a25) 0,
      color-mix(in srgb, var(--track-accent, #64748b) 10%, #121a25) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #64748b) 8%, #0f1724) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #64748b) 4%, #0b1220) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

.timelineTrack[data-track-type="video"] { --track-height: 78px; }
.timelineTrack[data-track-type="image"] { --track-height: 58px; }
.timelineTrack[data-track-type="audio"] { --track-height: 60px; }
.timelineTrack[data-track-type="sfx"] { --track-height: 44px; }
.timelineTrack[data-track-type="text"],
.timelineTrack[data-track-type="effect"] { --track-height: 38px; }

.timelineTrack::before,
.timelineTrackLabel {
  border-right-color: color-mix(in srgb, var(--track-accent, #64748b) 34%, rgba(148, 163, 184, 0.12)) !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent, #64748b) 28%, #151f2d),
      color-mix(in srgb, var(--track-accent, #64748b) 16%, #111a26)
    ) !important;
  color: color-mix(in srgb, var(--track-accent, #94a3b8) 70%, #f8fafc) !important;
  box-shadow: 8px 0 16px rgba(2, 6, 23, 0.18) !important;
}

.timelineTrack.is-track-selected,
.timelineTrack.is-drop-hover,
.timelineTrack.is-clip-drag-hover {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 58%, rgba(255, 255, 255, 0.18)) !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent, #38bdf8) 18%, #131d2a) 0,
      color-mix(in srgb, var(--track-accent, #38bdf8) 13%, #131d2a) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 10%, #0f1724) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #38bdf8) 5%, #0b1220) 100%
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 16%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--track-accent, #38bdf8) 8%, transparent) !important;
}

.timelineClip,
.timelineDropPreview {
  top: 3px !important;
  height: calc(100% - 6px) !important;
  border-radius: 5px !important;
}

.timelineTrack[data-track-type="text"] .timelineClip,
.timelineTrack[data-track-type="effect"] .timelineClip,
.timelineTrack[data-track-type="sfx"] .timelineClip {
  top: 2px !important;
  height: calc(100% - 4px) !important;
  min-height: 0 !important;
}

.timelineClip {
  border-width: 1px !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(2, 6, 23, 0.24),
    0 2px 7px rgba(2, 6, 23, 0.18) !important;
}

.timelineClip[data-kind="video"],
.timelineClip[data-kind="recording"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 30%),
    linear-gradient(90deg, #00a88f 0%, #008d7b 100%) !important;
  border-color: rgba(94, 234, 212, 0.58) !important;
}

.timelineClip[data-kind="image"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 30%),
    linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important;
  border-color: rgba(191, 219, 254, 0.62) !important;
}

.timelineClip[data-kind="audio"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.02) 30%),
    linear-gradient(90deg, #2f6fed 0%, #1f56d8 100%) !important;
  border-color: rgba(191, 219, 254, 0.58) !important;
}

.timelineClip[data-kind="text"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 30%),
    linear-gradient(90deg, #d86b43 0%, #bd5534 100%) !important;
  border-color: rgba(254, 215, 170, 0.62) !important;
}

.timelineClip[data-kind="effect"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.17), rgba(255,255,255,0.02) 30%),
    linear-gradient(90deg, #9b5de5 0%, #7d3fc7 100%) !important;
  border-color: rgba(233, 213, 255, 0.62) !important;
}

.timelineClip.is-selected {
  border-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    0 0 0 1px color-mix(in srgb, var(--track-accent, #38bdf8) 64%, rgba(255,255,255,0.24)),
    0 0 18px color-mix(in srgb, var(--track-accent, #38bdf8) 30%, transparent),
    0 5px 14px rgba(2, 6, 23, 0.28) !important;
}

.timelineDropPreview {
  border-color: color-mix(in srgb, var(--track-accent, #38bdf8) 70%, rgba(255,255,255,0.28)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 30%),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #38bdf8) 78%, #0f172a), color-mix(in srgb, var(--track-accent, #38bdf8) 58%, #0f172a)) !important;
}

.timelineTrack[data-track-type="video"] .clipThumbStrip,
.timelineTrack[data-track-type="video"] .timelineClip.is-light-render .clipThumbStrip {
  top: 18px !important;
  bottom: 17px !important;
}

.timelineTrack[data-track-type="image"] .clipThumbStrip,
.timelineTrack[data-track-type="image"] .timelineClip.is-light-render .clipThumbStrip {
  top: 18px !important;
  bottom: 4px !important;
}

.timelineTrack[data-track-type="audio"] .clipWaveform,
.timelineTrack[data-track-type="sfx"] .clipWaveform {
  left: 6px !important;
  right: 6px !important;
  top: 20px !important;
  bottom: 5px !important;
  height: auto !important;
  background:
    linear-gradient(180deg, rgba(219, 234, 254, 0.1), rgba(30, 64, 175, 0.28)),
    rgba(15, 23, 42, 0.2) !important;
}

.timelineTrack[data-track-type="sfx"] .clipWaveform {
  top: 17px !important;
  bottom: 4px !important;
}

.timelineTrack[data-track-type="video"] .clipWaveform {
  height: 13px !important;
  bottom: 3px !important;
}

.timelineTrack[data-track-type="text"] .clipThumb,
.timelineTrack[data-track-type="text"] .clipThumbStrip,
.timelineTrack[data-track-type="effect"] .clipThumb,
.timelineTrack[data-track-type="effect"] .clipThumbStrip {
  display: none !important;
}

.timelineTrack[data-track-type="text"] .clipLabel,
.timelineTrack[data-track-type="effect"] .clipLabel,
.timelineTrack[data-track-type="sfx"] .clipLabel {
  top: 50% !important;
  height: 17px !important;
  line-height: 17px !important;
  transform: translateY(-50%) !important;
  border-radius: 3px !important;
  background: rgba(2, 6, 23, 0.18) !important;
}

.clipLightFill {
  inset: 18px 0 17px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(2, 6, 23, 0.24) !important;
}

.timelineTrack[data-track-type="text"] .clipLightFill,
.timelineTrack[data-track-type="effect"] .clipLightFill,
.timelineTrack[data-track-type="sfx"] .clipLightFill {
  display: none !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent, #64748b) 16%, #eef3f8) 0,
      color-mix(in srgb, var(--track-accent, #64748b) 9%, #eef3f8) var(--track-label-width, 108px),
      color-mix(in srgb, var(--track-accent, #64748b) 7%, #f7f9fc) var(--track-label-width, 108px),
      #f7f9fc 100%
    ) !important;
}

.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack::before,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrackLabel {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--track-accent, #64748b) 18%, #e8eef5),
      color-mix(in srgb, var(--track-accent, #64748b) 9%, #eef3f8)
    ) !important;
  color: color-mix(in srgb, var(--track-accent, #64748b) 76%, #172033) !important;
}


/* Phase 3: clean theme-aware timeline rows, subtle dividers, and solid CapCut-style clips. */
.editorApp {
  --timeline-row-bg: #f8fafc;
  --timeline-row-bg-alt: #f5f7fb;
  --timeline-row-hover-bg: #eef3f9;
  --timeline-row-bg-active: #e9f1fb;
  --timeline-row-label-bg: #eef2f7;
  --timeline-row-label-bg-alt: #e9eef5;
  --timeline-row-stroke: rgba(15, 23, 42, 0.075);
  --timeline-row-divider: rgba(15, 23, 42, 0.08);
  --timeline-row-active-stroke: rgba(15, 23, 42, 0.13);
  --timeline-row-muted: rgba(100, 116, 139, 0.68);
  --timeline-clip-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
  --timeline-clip-inner: rgba(255, 255, 255, 0.18);
}

body[data-editor-theme="dark"] .editorApp,
body[data-editor-theme="night"] .editorApp,
.editorApp[data-theme="dark"],
.editorApp[data-theme="night"] {
  --timeline-row-bg: #0b1220;
  --timeline-row-bg-alt: #0d1525;
  --timeline-row-hover-bg: #111b2f;
  --timeline-row-bg-active: #132038;
  --timeline-row-label-bg: #0d1627;
  --timeline-row-label-bg-alt: #101a2d;
  --timeline-row-stroke: rgba(226, 232, 240, 0.055);
  --timeline-row-divider: rgba(226, 232, 240, 0.07);
  --timeline-row-active-stroke: rgba(226, 232, 240, 0.12);
  --timeline-row-muted: rgba(148, 163, 184, 0.72);
  --timeline-clip-shadow: 0 2px 7px rgba(2, 6, 23, 0.28);
  --timeline-clip-inner: rgba(255, 255, 255, 0.16);
}

body[data-editor-theme="night"] .editorApp,
.editorApp[data-theme="night"] {
  --timeline-row-bg: #080d17;
  --timeline-row-bg-alt: #0a111e;
  --timeline-row-hover-bg: #0f192b;
  --timeline-row-bg-active: #111f35;
  --timeline-row-label-bg: #0a111e;
  --timeline-row-label-bg-alt: #0d1728;
  --timeline-row-stroke: rgba(226, 232, 240, 0.05);
  --timeline-row-divider: rgba(226, 232, 240, 0.065);
  --timeline-row-active-stroke: rgba(226, 232, 240, 0.115);
}

.timelineTrackCanvasAdd,
#addTrackButton,
button#addTrackButton,
[data-action="add-track"],
[data-track-action="add"],
.timelineTrackAdd,
.timelineAddTrack,
.addTrackButton {
  display: none !important;
}

.timelineTrack {
  height: var(--track-height, 58px) !important;
  min-height: var(--track-height, 58px) !important;
  margin-bottom: 3px !important;
  border-radius: 4px !important;
  border: 0.5px solid var(--timeline-row-stroke) !important;
  background: var(--timeline-row-bg) !important;
  box-shadow: inset 0 -0.5px 0 var(--timeline-row-divider) !important;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease !important;
}

.timelineTrack:nth-child(even) {
  background: var(--timeline-row-bg-alt) !important;
}

.timelineTrack:hover {
  background: var(--timeline-row-hover-bg) !important;
  border-color: var(--timeline-row-active-stroke) !important;
}

.timelineTrack.is-track-selected,
.timelineTrack.is-drop-hover,
.timelineTrack.is-clip-drag-hover,
.timelineTrack.is-drop-snap-joining {
  background: var(--timeline-row-bg-active) !important;
  border-color: var(--timeline-row-active-stroke) !important;
  box-shadow:
    inset 0 0 0 0.5px var(--timeline-row-active-stroke),
    inset 0 -0.5px 0 var(--timeline-row-divider) !important;
}

.timelineTrack::before,
.timelineTrackLabel {
  background: var(--timeline-row-label-bg) !important;
  border-right: 0.5px solid var(--timeline-row-divider) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.timelineTrack:nth-child(even)::before,
.timelineTrack:nth-child(even) .timelineTrackLabel {
  background: var(--timeline-row-label-bg-alt) !important;
}

.timelineTrack:hover::before,
.timelineTrack:hover .timelineTrackLabel,
.timelineTrack.is-track-selected::before,
.timelineTrack.is-track-selected .timelineTrackLabel,
.timelineTrack.is-drop-hover::before,
.timelineTrack.is-drop-hover .timelineTrackLabel,
.timelineTrack.is-clip-drag-hover::before,
.timelineTrack.is-clip-drag-hover .timelineTrackLabel {
  background: var(--timeline-row-hover-bg) !important;
}

.trackIcon {
  background: color-mix(in srgb, var(--track-accent, #64748b) 38%, transparent) !important;
  color: color-mix(in srgb, var(--track-accent, #94a3b8) 45%, #ffffff) !important;
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--track-accent, #64748b) 34%, rgba(255, 255, 255, 0.10)) !important;
}

.trackName small,
.trackControl {
  color: var(--timeline-row-muted) !important;
}

.trackControl {
  background: transparent !important;
  box-shadow: none !important;
}

.trackControl:hover {
  background: color-mix(in srgb, var(--track-accent, #64748b) 16%, transparent) !important;
  color: var(--text) !important;
}

.timelineClip,
.timelineDropPreview {
  top: 4px !important;
  height: calc(100% - 8px) !important;
  border-radius: 5px !important;
}

.timelineTrack[data-track-type="text"] .timelineClip,
.timelineTrack[data-track-type="effect"] .timelineClip,
.timelineTrack[data-track-type="sfx"] .timelineClip,
.timelineTrack[data-track-type="text"] .timelineDropPreview,
.timelineTrack[data-track-type="effect"] .timelineDropPreview,
.timelineTrack[data-track-type="sfx"] .timelineDropPreview {
  top: 3px !important;
  height: calc(100% - 6px) !important;
  min-height: 0 !important;
}

.timelineClip {
  border-width: 0.8px !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0.5px 0 var(--timeline-clip-inner),
    var(--timeline-clip-shadow) !important;
}

.timelineClip[data-kind="video"],
.timelineClip[data-kind="recording"] {
  background: #138f83 !important;
  border-color: #35c9b9 !important;
}

.timelineClip[data-kind="image"] {
  background: #2f6edb !important;
  border-color: #80aef8 !important;
}

.timelineClip[data-kind="audio"] {
  background: #245fd6 !important;
  border-color: #6fa3ff !important;
}

.timelineClip[data-kind="text"] {
  background: #c45b39 !important;
  border-color: #f0a484 !important;
}

.timelineClip[data-kind="effect"] {
  background: #8151d1 !important;
  border-color: #c7a6ff !important;
}

.timelineClip[data-kind="sfx"] {
  background: #0f8fb8 !important;
  border-color: #66d7f7 !important;
}

.timelineClip:hover {
  filter: brightness(1.045) saturate(1.03) !important;
}

.timelineClip.is-selected {
  border-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    inset 0 0 0 0.8px rgba(255, 255, 255, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 12px color-mix(in srgb, var(--track-accent, #38bdf8) 24%, transparent),
    var(--timeline-clip-shadow) !important;
}

.timelineDropPreview {
  background: color-mix(in srgb, var(--track-accent, #38bdf8) 46%, var(--timeline-row-bg-active)) !important;
  border: 0.8px dashed color-mix(in srgb, var(--track-accent, #38bdf8) 58%, rgba(255, 255, 255, 0.20)) !important;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12) !important;
}

.timelineTrack[data-track-type="video"] { --track-height: 78px; }
.timelineTrack[data-track-type="image"] { --track-height: 58px; }
.timelineTrack[data-track-type="audio"] { --track-height: 60px; }
.timelineTrack[data-track-type="sfx"] { --track-height: 44px; }
.timelineTrack[data-track-type="text"],
.timelineTrack[data-track-type="effect"] { --track-height: 38px; }

.timelineTrack[data-track-type="video"] .clipThumbStrip,
.timelineTrack[data-track-type="video"] .timelineClip.is-light-render .clipThumbStrip {
  top: 18px !important;
  bottom: 17px !important;
}

.timelineTrack[data-track-type="image"] .clipThumbStrip,
.timelineTrack[data-track-type="image"] .timelineClip.is-light-render .clipThumbStrip {
  top: 18px !important;
  bottom: 5px !important;
}

.timelineTrack[data-track-type="audio"] .clipWaveform,
.timelineTrack[data-track-type="sfx"] .clipWaveform {
  left: 7px !important;
  right: 7px !important;
  top: 22px !important;
  bottom: 6px !important;
  height: auto !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

.timelineTrack[data-track-type="sfx"] .clipWaveform {
  top: 18px !important;
  bottom: 5px !important;
}

.timelineTrack[data-track-type="video"] .clipWaveform {
  height: 13px !important;
  bottom: 4px !important;
  background: rgba(255, 255, 255, 0.11) !important;
}

.timelineTrack[data-track-type="text"] .clipLabel,
.timelineTrack[data-track-type="effect"] .clipLabel,
.timelineTrack[data-track-type="sfx"] .clipLabel {
  background: rgba(2, 6, 23, 0.16) !important;
}

.clipLightFill {
  background: rgba(2, 6, 23, 0.18) !important;
}

body.is-dragging-clip .timelineTrack.is-drop-hover,
body.is-dragging-clip .timelineTrack.is-clip-drag-hover,
body.is-dragging-media-asset .timelineTrack.is-drop-hover {
  background: var(--timeline-row-bg-active) !important;
  border-color: var(--timeline-row-active-stroke) !important;
  box-shadow:
    inset 0 0 0 0.5px var(--timeline-row-active-stroke),
    inset 0 -0.5px 0 var(--timeline-row-divider) !important;
}


/* Phase 5: neutral dark timeline rows and lighter, flatter media clips. */
.editorApp {
  --timeline-canvas-bg: #eef1f5;
  --timeline-row-bg-odd: #f6f7f9;
  --timeline-row-bg-even: #eceff3;
  --timeline-row-bg-hover: #e4e8ee;
  --timeline-row-bg-active: #dde5ee;
  --timeline-row-label-bg: #f1f4f8;
  --timeline-row-label-bg-hover: #e8edf4;
  --timeline-row-stroke: rgba(51, 65, 85, 0.08);
  --timeline-row-hover-stroke: rgba(51, 65, 85, 0.12);
  --timeline-row-active-stroke: rgba(var(--accent-rgb), 0.18);
  --timeline-row-divider: rgba(51, 65, 85, 0.06);
  --timeline-clip-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  --timeline-clip-inner: rgba(255, 255, 255, 0.12);
  --timeline-clip-border: rgba(255, 255, 255, 0.18);
}

.editorApp[data-theme="dark"],
.editorApp[data-theme="night"] {
  --timeline-canvas-bg: #252525;
  --timeline-row-bg-odd: #323232;
  --timeline-row-bg-even: #414141;
  --timeline-row-bg-hover: #525252;
  --timeline-row-bg-active: #4a4a4a;
  --timeline-row-label-bg: #2b2b2b;
  --timeline-row-label-bg-hover: #363636;
  --timeline-row-stroke: rgba(255, 255, 255, 0.06);
  --timeline-row-hover-stroke: rgba(255, 255, 255, 0.10);
  --timeline-row-active-stroke: rgba(255, 255, 255, 0.12);
  --timeline-row-divider: rgba(255, 255, 255, 0.04);
  --timeline-clip-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  --timeline-clip-inner: rgba(255, 255, 255, 0.10);
  --timeline-clip-border: rgba(255, 255, 255, 0.16);
}

.timelineCanvas,
.timelineDropZone,
.editorApp[data-theme="dark"] .timelineCanvas,
.editorApp[data-theme="dark"] .timelineDropZone,
.editorApp[data-theme="night"] .timelineCanvas,
.editorApp[data-theme="night"] .timelineDropZone {
  background: var(--timeline-canvas-bg) !important;
}

.timelineTrack {
  margin-bottom: 4px !important;
  border-radius: 6px !important;
  border: 0.8px solid var(--timeline-row-stroke) !important;
  background: var(--timeline-row-bg-even) !important;
  box-shadow: inset 0 -0.5px 0 var(--timeline-row-divider) !important;
}

.timelineTrack:nth-child(odd) {
  background: var(--timeline-row-bg-odd) !important;
}

.timelineTrack:nth-child(even) {
  background: var(--timeline-row-bg-even) !important;
}

.timelineTrack::before,
.timelineTrackLabel {
  border-right: 0.8px solid var(--timeline-row-stroke) !important;
  background: var(--timeline-row-label-bg) !important;
  box-shadow: none !important;
}

.editorApp[data-theme="dark"] .timelineTrackLabel,
.editorApp[data-theme="dark"] .timelineTrack::before,
.editorApp[data-theme="night"] .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack::before {
  color: rgba(226, 232, 240, 0.88) !important;
}

.timelineTrack:hover {
  border-color: var(--timeline-row-hover-stroke) !important;
  background: var(--timeline-row-bg-hover) !important;
}

.timelineTrack:hover::before,
.timelineTrack:hover .timelineTrackLabel {
  background: var(--timeline-row-label-bg-hover) !important;
}

.timelineTrack.is-track-selected,
.timelineTrack.is-drop-hover,
.timelineTrack.is-clip-drag-hover,
body.is-dragging-clip .timelineTrack.is-drop-hover,
body.is-dragging-clip .timelineTrack.is-clip-drag-hover,
body.is-dragging-media-asset .timelineTrack.is-drop-hover {
  border-color: var(--timeline-row-active-stroke) !important;
  background: var(--timeline-row-bg-active) !important;
  box-shadow:
    inset 0 0 0 0.5px var(--timeline-row-active-stroke),
    inset 0 -0.5px 0 var(--timeline-row-divider) !important;
}

.timelineTrack.is-track-selected::before,
.timelineTrack.is-track-selected .timelineTrackLabel,
.timelineTrack.is-drop-hover::before,
.timelineTrack.is-drop-hover .timelineTrackLabel,
.timelineTrack.is-clip-drag-hover::before,
.timelineTrack.is-clip-drag-hover .timelineTrackLabel,
body.is-dragging-clip .timelineTrack.is-drop-hover::before,
body.is-dragging-clip .timelineTrack.is-drop-hover .timelineTrackLabel,
body.is-dragging-clip .timelineTrack.is-clip-drag-hover::before,
body.is-dragging-clip .timelineTrack.is-clip-drag-hover .timelineTrackLabel,
body.is-dragging-media-asset .timelineTrack.is-drop-hover::before,
body.is-dragging-media-asset .timelineTrack.is-drop-hover .timelineTrackLabel {
  background: var(--timeline-row-label-bg-hover) !important;
}

.trackIcon,
.trackControl {
  box-shadow: none !important;
}

.timelineClip,
.timelineDropPreview {
  top: 3px !important;
  height: calc(100% - 6px) !important;
  border-radius: 5px !important;
}

.timelineTrack[data-track-type="text"] .timelineClip,
.timelineTrack[data-track-type="effect"] .timelineClip,
.timelineTrack[data-track-type="sfx"] .timelineClip {
  top: 2px !important;
  height: calc(100% - 4px) !important;
}

.timelineClip {
  border-width: 0.8px !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 0.5px 0 var(--timeline-clip-inner),
    var(--timeline-clip-shadow) !important;
}

.timelineClip[data-kind="video"],
.timelineClip[data-kind="recording"] {
  background: #138f83 !important;
  border-color: #35c9b9 !important;
}

.timelineClip[data-kind="image"] {
  background: #2f6edb !important;
  border-color: #80aef8 !important;
}

.timelineClip[data-kind="audio"] {
  background: #245fd6 !important;
  border-color: #6fa3ff !important;
}

.timelineClip[data-kind="text"] {
  background: #c45b39 !important;
  border-color: #f0a484 !important;
}

.timelineClip[data-kind="effect"] {
  background: #8151d1 !important;
  border-color: #c7a6ff !important;
}

.timelineClip[data-kind="sfx"] {
  background: #0f8fb8 !important;
  border-color: #66d7f7 !important;
}

.timelineClip:hover {
  filter: brightness(1.045) saturate(1.03) !important;
}

.timelineClip.is-selected {
  border-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    inset 0 0 0 0.8px rgba(255, 255, 255, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 12px color-mix(in srgb, var(--track-accent, #38bdf8) 24%, transparent),
    var(--timeline-clip-shadow) !important;
}

.timelineDropPreview {
  background: color-mix(in srgb, var(--track-accent, #38bdf8) 46%, var(--timeline-row-bg-active)) !important;
  border: 0.8px dashed color-mix(in srgb, var(--track-accent, #38bdf8) 58%, rgba(255, 255, 255, 0.20)) !important;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12) !important;
}

.timelineTrack[data-track-type="video"] { --track-height: 78px; }
.timelineTrack[data-track-type="image"] { --track-height: 58px; }
.timelineTrack[data-track-type="audio"] { --track-height: 60px; }
.timelineTrack[data-track-type="sfx"] { --track-height: 44px; }
.timelineTrack[data-track-type="text"],
.timelineTrack[data-track-type="effect"] { --track-height: 38px; }

.timelineTrack[data-track-type="video"] .clipThumbStrip,
.timelineTrack[data-track-type="video"] .timelineClip.is-light-render .clipThumbStrip {
  top: 18px !important;
  bottom: 17px !important;
}

.timelineTrack[data-track-type="image"] .clipThumbStrip,
.timelineTrack[data-track-type="image"] .timelineClip.is-light-render .clipThumbStrip {
  top: 18px !important;
  bottom: 5px !important;
}

.timelineTrack[data-track-type="audio"] .clipWaveform,
.timelineTrack[data-track-type="sfx"] .clipWaveform {
  left: 7px !important;
  right: 7px !important;
  top: 22px !important;
  bottom: 6px !important;
  height: auto !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

.timelineTrack[data-track-type="sfx"] .clipWaveform {
  top: 18px !important;
  bottom: 5px !important;
}

.timelineTrack[data-track-type="video"] .clipWaveform {
  height: 13px !important;
  bottom: 4px !important;
  background: rgba(255, 255, 255, 0.11) !important;
}

.timelineTrack[data-track-type="text"] .clipLabel,
.timelineTrack[data-track-type="effect"] .clipLabel,
.timelineTrack[data-track-type="sfx"] .clipLabel {
  background: rgba(2, 6, 23, 0.16) !important;
}

.clipLightFill {
  background: rgba(2, 6, 23, 0.18) !important;
}

body.is-dragging-clip .timelineTrack.is-drop-hover,
body.is-dragging-clip .timelineTrack.is-clip-drag-hover,
body.is-dragging-media-asset .timelineTrack.is-drop-hover {
  background: var(--timeline-row-bg-active) !important;
  border-color: var(--timeline-row-active-stroke) !important;
  box-shadow:
    inset 0 0 0 0.5px var(--timeline-row-active-stroke),
    inset 0 -0.5px 0 var(--timeline-row-divider) !important;
}

/* Phase 5.1: neutralize remaining heavy clip gradients and glossy overlays. */
.timelineClip[data-kind="video"],
.timelineClip[data-kind="recording"],
.timelineClip[data-kind="image"],
.timelineClip[data-kind="audio"],
.timelineClip[data-kind="text"],
.timelineClip[data-kind="effect"],
.timelineClip[data-kind="sfx"] {
  background-image: none !important;
}

.clipLabel {
  background: rgba(2, 6, 23, 0.14) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

.clipWaveform {
  border-radius: 3px !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

.clipWaveformSvg {
  filter: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.timelineClip[data-kind="audio"] .clipWaveform i,
.timelineClip[data-kind="audio"] .clipWaveformSvg,
.timelineClip[data-kind="sfx"] .clipWaveform i,
.timelineClip[data-kind="sfx"] .clipWaveformSvg {
  filter: none !important;
}

.timelineClip[data-kind="audio"] .clipWaveform i,
.timelineClip[data-kind="sfx"] .clipWaveform i {
  background: rgba(255, 255, 255, 0.88) !important;
}

/* V-Thumb-1: professional filmstrip - crisp frame separators + vibrancy + subtle rounding */
.clipThumbStrip,
.clipThumbStrip.is-light-strip,
.clipThumbStrip.has-frames.is-virtual {
  box-shadow: none !important;
  filter: saturate(1.05) contrast(1.05) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.clipThumbStrip.has-frames.is-virtual i,
.clipThumbStrip.has-frames i {
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.30), inset 0 0 0 0.5px rgba(255, 255, 255, 0.045) !important;
  filter: none !important;
}

.clipLightFill {
  opacity: 0.22 !important;
}


/* Phase 5.2: apply neutral row colors to the actual media lane area. */
.editorApp[data-theme="dark"],
.editorApp[data-theme="night"] {
  --timeline-row-lane-odd: #323232;
  --timeline-row-lane-even: #414141;
  --timeline-row-lane-hover: #525252;
  --timeline-row-lane-active: #484848;
  --timeline-row-head: #2b2b2b;
  --timeline-row-head-hover: #363636;
  --timeline-row-soft-line: rgba(255, 255, 255, 0.055);
  --timeline-row-soft-line-hover: rgba(255, 255, 255, 0.085);
}

.editorApp[data-theme="dark"] .timelineTrack,
.editorApp[data-theme="night"] .timelineTrack {
  border: 0.8px solid var(--timeline-row-soft-line) !important;
  background:
    linear-gradient(
      90deg,
      var(--timeline-row-head) 0,
      var(--timeline-row-head) var(--track-label-width, 108px),
      var(--timeline-row-lane-even) var(--track-label-width, 108px),
      var(--timeline-row-lane-even) 100%
    ) !important;
  box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.035) !important;
}

.editorApp[data-theme="dark"] .timelineTrack:nth-child(odd),
.editorApp[data-theme="night"] .timelineTrack:nth-child(odd) {
  background:
    linear-gradient(
      90deg,
      var(--timeline-row-head) 0,
      var(--timeline-row-head) var(--track-label-width, 108px),
      var(--timeline-row-lane-odd) var(--track-label-width, 108px),
      var(--timeline-row-lane-odd) 100%
    ) !important;
}

.editorApp[data-theme="dark"] .timelineTrack:nth-child(even),
.editorApp[data-theme="night"] .timelineTrack:nth-child(even) {
  background:
    linear-gradient(
      90deg,
      var(--timeline-row-head) 0,
      var(--timeline-row-head) var(--track-label-width, 108px),
      var(--timeline-row-lane-even) var(--track-label-width, 108px),
      var(--timeline-row-lane-even) 100%
    ) !important;
}

.editorApp[data-theme="dark"] .timelineTrack:hover,
.editorApp[data-theme="night"] .timelineTrack:hover {
  border-color: var(--timeline-row-soft-line-hover) !important;
  background:
    linear-gradient(
      90deg,
      var(--timeline-row-head-hover) 0,
      var(--timeline-row-head-hover) var(--track-label-width, 108px),
      var(--timeline-row-lane-hover) var(--track-label-width, 108px),
      var(--timeline-row-lane-hover) 100%
    ) !important;
  box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.045) !important;
}

.editorApp[data-theme="dark"] .timelineTrack.is-track-selected,
.editorApp[data-theme="dark"] .timelineTrack.is-drop-hover,
.editorApp[data-theme="dark"] .timelineTrack.is-clip-drag-hover,
.editorApp[data-theme="night"] .timelineTrack.is-track-selected,
.editorApp[data-theme="night"] .timelineTrack.is-drop-hover,
.editorApp[data-theme="night"] .timelineTrack.is-clip-drag-hover,
body.is-dragging-clip .editorApp[data-theme="dark"] .timelineTrack.is-drop-hover,
body.is-dragging-clip .editorApp[data-theme="dark"] .timelineTrack.is-clip-drag-hover,
body.is-dragging-clip .editorApp[data-theme="night"] .timelineTrack.is-drop-hover,
body.is-dragging-clip .editorApp[data-theme="night"] .timelineTrack.is-clip-drag-hover,
body.is-dragging-media-asset .editorApp[data-theme="dark"] .timelineTrack.is-drop-hover,
body.is-dragging-media-asset .editorApp[data-theme="night"] .timelineTrack.is-drop-hover {
  border-color: rgba(255, 255, 255, 0.105) !important;
  background:
    linear-gradient(
      90deg,
      var(--timeline-row-head-hover) 0,
      var(--timeline-row-head-hover) var(--track-label-width, 108px),
      var(--timeline-row-lane-active) var(--track-label-width, 108px),
      var(--timeline-row-lane-active) 100%
    ) !important;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.055),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.035) !important;
}

.editorApp[data-theme="dark"] .timelineTrack::before,
.editorApp[data-theme="dark"] .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack::before,
.editorApp[data-theme="night"] .timelineTrackLabel {
  border-right: 0.8px solid var(--timeline-row-soft-line) !important;
  background: var(--timeline-row-head) !important;
  color: rgba(226, 232, 240, 0.84) !important;
  box-shadow: none !important;
}

.editorApp[data-theme="dark"] .timelineTrack:hover::before,
.editorApp[data-theme="dark"] .timelineTrack:hover .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack:hover::before,
.editorApp[data-theme="night"] .timelineTrack:hover .timelineTrackLabel,
.editorApp[data-theme="dark"] .timelineTrack.is-track-selected::before,
.editorApp[data-theme="dark"] .timelineTrack.is-track-selected .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack.is-track-selected::before,
.editorApp[data-theme="night"] .timelineTrack.is-track-selected .timelineTrackLabel {
  background: var(--timeline-row-head-hover) !important;
}

/* Phase 5.2: flatten media clips so they sit light on the row, not heavy/glossy. */
.editorApp .timelineClip {
  border-width: 0.75px !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.14) !important;
}

.editorApp .timelineClip[data-kind="video"],
.editorApp .timelineClip[data-kind="recording"] {
  background: #147d75 !important;
  background-image: none !important;
  border-color: rgba(94, 234, 212, 0.34) !important;
}

.editorApp .timelineClip[data-kind="image"] {
  background: #2f67c6 !important;
  background-image: none !important;
  border-color: rgba(147, 197, 253, 0.34) !important;
}

.editorApp .timelineClip[data-kind="audio"] {
  background: #285fbd !important;
  background-image: none !important;
  border-color: rgba(147, 197, 253, 0.32) !important;
}

.editorApp .timelineClip[data-kind="text"] {
  background: #ad5a3c !important;
  background-image: none !important;
  border-color: rgba(253, 186, 116, 0.32) !important;
}

.editorApp .timelineClip[data-kind="effect"] {
  background: #7552b8 !important;
  background-image: none !important;
  border-color: rgba(196, 181, 253, 0.32) !important;
}

.editorApp .timelineClip[data-kind="sfx"] {
  background: #247f9a !important;
  background-image: none !important;
  border-color: rgba(103, 232, 249, 0.32) !important;
}

.editorApp .clipLabel {
  background: rgba(0, 0, 0, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: none !important;
}

.editorApp .clipWaveform,
.editorApp .timelineTrack[data-track-type="audio"] .clipWaveform,
.editorApp .timelineTrack[data-track-type="sfx"] .clipWaveform,
.editorApp .timelineTrack[data-track-type="video"] .clipWaveform {
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow: none !important;
}

.editorApp .clipWaveformSvg,
.editorApp .timelineClip[data-kind="audio"] .clipWaveformSvg,
.editorApp .timelineClip[data-kind="sfx"] .clipWaveformSvg {
  color: rgba(255, 255, 255, 0.82) !important;
  filter: none !important;
}


/* Phase 7: darker neutral media lane colors and subtler hover. */
.editorApp[data-theme="dark"],
.editorApp[data-theme="night"] {
  --timeline-row-lane-odd: #202020;
  --timeline-row-lane-even: #252525;
  --timeline-row-lane-hover: #303030;
  --timeline-row-lane-active: #2d2d2d;
  --timeline-row-head: #1d1d1d;
  --timeline-row-head-hover: #252525;
  --timeline-row-soft-line: rgba(255, 255, 255, 0.038);
  --timeline-row-soft-line-hover: rgba(255, 255, 255, 0.060);
}

.editorApp[data-theme="dark"] .timelineTrack,
.editorApp[data-theme="night"] .timelineTrack {
  border-color: var(--timeline-row-soft-line) !important;
  box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.026) !important;
}

.editorApp[data-theme="dark"] .timelineTrack:hover,
.editorApp[data-theme="night"] .timelineTrack:hover {
  border-color: var(--timeline-row-soft-line-hover) !important;
  box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.032) !important;
}

.editorApp[data-theme="dark"] .timelineTrack.is-track-selected,
.editorApp[data-theme="dark"] .timelineTrack.is-drop-hover,
.editorApp[data-theme="dark"] .timelineTrack.is-clip-drag-hover,
.editorApp[data-theme="night"] .timelineTrack.is-track-selected,
.editorApp[data-theme="night"] .timelineTrack.is-drop-hover,
.editorApp[data-theme="night"] .timelineTrack.is-clip-drag-hover,
body.is-dragging-clip .editorApp[data-theme="dark"] .timelineTrack.is-drop-hover,
body.is-dragging-clip .editorApp[data-theme="dark"] .timelineTrack.is-clip-drag-hover,
body.is-dragging-clip .editorApp[data-theme="night"] .timelineTrack.is-drop-hover,
body.is-dragging-clip .editorApp[data-theme="night"] .timelineTrack.is-clip-drag-hover,
body.is-dragging-media-asset .editorApp[data-theme="dark"] .timelineTrack.is-drop-hover,
body.is-dragging-media-asset .editorApp[data-theme="night"] .timelineTrack.is-drop-hover {
  border-color: rgba(255, 255, 255, 0.075) !important;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.035),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.026) !important;
}

.editorApp[data-theme="dark"] .timelineTrack::before,
.editorApp[data-theme="dark"] .timelineTrackLabel,
.editorApp[data-theme="night"] .timelineTrack::before,
.editorApp[data-theme="night"] .timelineTrackLabel {
  border-right-color: var(--timeline-row-soft-line) !important;
}

/* Phase 7.1: make timeline lanes a bit darker on user request. */
.editorApp[data-theme="dark"],
.editorApp[data-theme="night"] {
  --timeline-canvas-bg: #1b1b1b;
  --timeline-row-bg-odd: #262626;
  --timeline-row-bg-even: #2c2c2c;
  --timeline-row-bg-hover: #343434;
  --timeline-row-bg-active: #303030;
  --timeline-row-label-bg: #202020;
  --timeline-row-label-bg-hover: #2a2a2a;
  --timeline-row-stroke: rgba(255, 255, 255, 0.05);
  --timeline-row-hover-stroke: rgba(255, 255, 255, 0.08);
  --timeline-row-active-stroke: rgba(255, 255, 255, 0.10);
  --timeline-row-divider: rgba(255, 255, 255, 0.035);
}


/* Phase 8: professional trim/resize reveal — clips act as masks, content never squeezes. */
body.is-resizing-clip,
body.is-resizing-clip * {
  user-select: none !important;
}

.timelineClip.is-live-resize {
  overflow: hidden !important;
  transition: none !important;
  contain: paint;
}

.timelineClip.is-live-resize .clipThumbStrip,
.timelineClip.is-live-resize .clipLightFill {
  left: var(--clip-content-left, 0px) !important;
  right: auto !important;
  width: var(--clip-content-width, 100%) !important;
  max-width: none !important;
  transform: none !important;
  transform-origin: left center !important;
}

.timelineClip.is-live-resize .clipWaveform {
  left: calc(var(--clip-content-left, 0px) + 7px) !important;
  right: auto !important;
  width: max(1px, calc(var(--clip-content-width, 100%) - 14px)) !important;
  max-width: none !important;
  transform: none !important;
  transform-origin: left center !important;
}

.timelineClip.is-live-resize .clipThumbStrip-canvas,
.timelineClip.is-live-resize .clipThumbStrip.has-frames.is-virtual {
  overflow: hidden !important;
}

.timelineClip.is-live-resize .clipThumbStrip-canvas .clipThumbCanvas {
  left: 0 !important;
  width: 100% !important;
  transform: none !important;
}

.timelineClip.is-live-resize .clipThumbStrip.is-repeat,
.timelineClip.is-live-resize .clipThumbStrip.is-overview-tiled-single {
  background-size: var(--clip-thumb-tile-width, 72px) 100% !important;
  background-position: left center !important;
}

.timelineClip.is-live-resize .clipThumbStrip.is-poster {
  background-size: auto 100% !important;
  background-position: left center !important;
}

.timelineClip.is-live-resize .clipThumbStrip.has-frames i {
  transform: none !important;
  transform-origin: left center !important;
}

.timelineClip.is-live-resize .clipLabel {
  max-width: calc(100% - 10px) !important;
  transform: none !important;
}

.timelineClip.is-live-resize.is-resizing-left .clipLabel {
  left: max(5px, calc(5px - var(--clip-content-left, 0px))) !important;
}

.timelineClip.is-live-resize .clipSelectionOverlay {
  opacity: 0.04 !important;
}

.timelineClip.is-live-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9;
  width: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.timelineClip.is-live-resize.is-resizing-left::after {
  left: 0;
}

.timelineClip.is-live-resize.is-resizing-right::after {
  right: 0;
}

.timelineClip.is-live-resize .clipResize::before {
  opacity: 0.98 !important;
}


/* Professional left panel refresh: Text, Effects, and Transitions */
.panelPane-pro {
  padding: 18px 16px 22px;
  scrollbar-color: rgba(148, 163, 184, 0.55) rgba(15, 23, 42, 0.08);
}

.panelPane[data-tab-panel="text"],
.panelPane[data-tab-panel="effects"] {
  background:
    radial-gradient(circle at 12% -4%, rgba(var(--accent-rgb), 0.16), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  color: #172033;
}

.panelPane[data-tab-panel="effects"],
.panelPane[data-tab-panel="transitions"] {
  background:
    radial-gradient(circle at 76% 2%, rgba(var(--accent-rgb), 0.2), transparent 30%),
    radial-gradient(circle at 12% 92%, rgba(59, 130, 246, 0.14), transparent 28%),
    #101827;
  color: #dbe4f2;
}

.professionalPanelIntro {
  position: sticky;
  top: -18px;
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin: -18px -16px 14px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.78)),
    rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.panelPane[data-tab-panel="effects"] .professionalPanelIntro,
.panelPane[data-tab-panel="transitions"] .professionalPanelIntro {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.78)),
    rgba(15, 23, 42, 0.84);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.25);
}

.professionalPanelIntro h1 {
  margin: 3px 0 6px;
  color: #0f172a;
  font-size: 25px;
  letter-spacing: -0.04em;
}

.panelPane[data-tab-panel="effects"] .professionalPanelIntro h1,
.panelPane[data-tab-panel="transitions"] .professionalPanelIntro h1 {
  color: #f8fafc;
}

.professionalPanelIntro p {
  margin: 0;
  max-width: 265px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 720;
}

.panelPane[data-tab-panel="effects"] .professionalPanelIntro p,
.panelPane[data-tab-panel="transitions"] .professionalPanelIntro p {
  color: #94a3b8;
}

.panelKicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--accent-rgb), 0.98);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panelKicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);
}

.panelProBadge,
.paneHeader span#transitionCount,
#effectsCount {
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.26);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(var(--accent-rgb), 1);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.panelStatStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}

.panelStatStrip span {
  min-height: 48px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  display: grid;
  place-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.06);
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.panelStatStrip strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
  text-transform: none;
}

.textComposerCard,
.effectsTargetBox,
.transitionTargetBox {
  position: relative;
  margin: 0 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 28px rgba(15, 23, 42, 0.08);
}

.effectsTargetBox,
.panelPane[data-tab-panel="transitions"] .transitionTargetBox {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 23, 42, 0.58);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 36px rgba(2, 6, 23, 0.24);
}

.effectsTargetBox strong,
.transitionTargetBox strong {
  display: block;
  margin-bottom: 4px;
  color: inherit;
  font-size: 13px;
  font-weight: 950;
}

.effectsTargetBox span,
.transitionTargetBox span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 760;
}

.textInput {
  height: 44px;
  border-radius: 13px;
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 16px rgba(15, 23, 42, 0.06);
}

.textInput:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow:
    0 0 0 3px rgba(var(--accent-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.textAddButton,
.secondaryWide {
  height: 44px;
  border-radius: 13px;
  font-weight: 950;
  box-shadow: 0 14px 24px rgba(var(--accent-rgb), 0.18);
}

.secondaryWide {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.secondaryWide:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.panelSectionHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
}

.panelSectionHeader strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.panelSectionHeader small {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.panelPane[data-tab-panel="effects"] .panelSectionHeader strong,
.panelPane[data-tab-panel="transitions"] .panelSectionHeader strong,
.panelPane[data-tab-panel="effects"] .panelSectionHeader small,
.panelPane[data-tab-panel="transitions"] .panelSectionHeader small {
  color: #e2e8f0;
}

.textPresetGrid-pro {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.textPresetGrid-pro .textPreset {
  position: relative;
  min-height: 78px;
  height: auto;
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 13px;
  overflow: hidden;
  border-color: rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb), 0.16), transparent 34%),
    #ffffff;
  text-align: left;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.textPresetGrid-pro .textPreset::before {
  content: "Aa";
  position: absolute;
  top: 10px;
  left: 12px;
  color: rgba(15, 23, 42, 0.16);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.textPresetGrid-pro .textPreset strong {
  position: relative;
  z-index: 1;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.textPresetGrid-pro .textPreset span {
  position: relative;
  z-index: 1;
  color: #64748b;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 780;
}

.textPresetGrid-pro .textPreset:hover,
.textPresetGrid-pro .textPreset.is-active {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow:
    0 16px 30px rgba(15, 23, 42, 0.1),
    0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.textPresetGrid-pro .textPreset.is-active {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(135deg, rgba(var(--accent-rgb), 1), #111827);
}

.textPresetGrid-pro .textPreset.is-active strong,
.textPresetGrid-pro .textPreset.is-active span {
  color: #ffffff;
}

.effectsPresetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.editorEffectPreset {
  position: relative;
  min-height: 142px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  display: grid;
  grid-template-rows: 56px 1fr;
  gap: 10px;
  padding: 11px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 23, 42, 0.74);
  color: #f8fafc;
  text-align: left;
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.editorEffectPreset:hover:not(:disabled),
.editorEffectPreset.is-active {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow:
    0 22px 42px rgba(2, 6, 23, 0.32),
    0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.editorEffectPreset:disabled {
  opacity: 0.54;
  cursor: not-allowed;
}

.editorEffectPreview {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 30%, var(--effect-a, #f8fafc), transparent 26%),
    linear-gradient(135deg, var(--effect-b, #64748b), var(--effect-c, #0f172a));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.editorEffectPreview::before,
.editorEffectPreview::after,
.editorEffectPreview i {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.editorEffectPreview::before {
  background:
    linear-gradient(90deg, transparent 0 26%, rgba(255, 255, 255, 0.3) 38%, transparent 50%),
    radial-gradient(circle at 70% 36%, rgba(255, 255, 255, 0.32), transparent 12%);
  mix-blend-mode: screen;
}

.editorEffectPreview::after {
  inset: auto 12% 14% 10%;
  height: 22%;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.46);
  filter: blur(9px);
}

.editorEffectBody {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.editorEffectBody strong {
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.editorEffectBody small {
  color: #94a3b8;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 760;
}

.editorEffectPreset em {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 36px;
  height: 19px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  background: rgba(2, 6, 23, 0.68);
  color: #f8fafc;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.effectTone-clarity { --effect-a: #e0f2fe; --effect-b: #0f172a; --effect-c: #38bdf8; }
.effectTone-teal { --effect-a: #fed7aa; --effect-b: #0f766e; --effect-c: #f97316; }
.effectTone-gold { --effect-a: #fde68a; --effect-b: #713f12; --effect-c: #f59e0b; }
.effectTone-neon { --effect-a: #e879f9; --effect-b: #0f172a; --effect-c: #22d3ee; }
.effectTone-clean { --effect-a: #ffffff; --effect-b: #e2e8f0; --effect-c: #38bdf8; }
.effectTone-vintage { --effect-a: #fed7aa; --effect-b: #78350f; --effect-c: #a16207; }
.effectTone-mono { --effect-a: #f8fafc; --effect-b: #020617; --effect-c: #64748b; }
.effectTone-dream { --effect-a: #fbcfe8; --effect-b: #7c3aed; --effect-c: #38bdf8; }
.effectTone-sports { --effect-a: #bbf7d0; --effect-b: #111827; --effect-c: #84cc16; }

.panelPane[data-tab-panel="transitions"] .transitionHero {
  height: 124px;
  margin-top: 0;
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 22px 42px rgba(2, 6, 23, 0.28);
}

.panelPane[data-tab-panel="transitions"] .transitionPresetGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.panelPane[data-tab-panel="transitions"] .transitionPreset {
  min-height: 148px;
  grid-template-rows: 82px auto auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(15, 23, 42, 0.64);
  box-shadow: 0 18px 34px rgba(2, 6, 23, 0.22);
}

.panelPane[data-tab-panel="transitions"] .transitionPreset i {
  height: 82px;
  border-radius: 14px;
}

.panelPane[data-tab-panel="transitions"] .transitionPreset strong {
  padding: 0 2px;
  color: #f8fafc;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 950;
}

.panelPane[data-tab-panel="transitions"] .transitionPreset span {
  padding: 0 2px 2px;
  color: #94a3b8;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 760;
}

.panelPane[data-tab-panel="transitions"] .transitionPreset:hover,
.panelPane[data-tab-panel="transitions"] .transitionPreset.is-active {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow:
    0 22px 42px rgba(2, 6, 23, 0.34),
    0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.panelPane[data-tab-panel="transitions"] .transitionDurationControl {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.55);
}

.panelPane[data-tab-panel="transitions"] .transitionActionRow {
  gap: 8px;
}

.panelPane[data-tab-panel="transitions"] .transitionApplyButton {
  border-radius: 13px;
  font-weight: 950;
}

.textOverlay[data-style="broadcast"] {
  width: min(68%, 720px);
  height: 16%;
  padding: 1.4% 3%;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.72));
  color: #f8fafc;
  font-size: clamp(22px, 3.6vw, 48px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  box-shadow: inset 4px 0 0 rgba(var(--accent-rgb), 0.98), 0 18px 34px rgba(0, 0, 0, 0.3);
}

.textOverlay[data-style="cinema"] {
  color: #fef3c7;
  letter-spacing: -0.06em;
  text-shadow:
    0 3px 0 rgba(68, 64, 60, 0.6),
    0 18px 32px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(245, 158, 11, 0.24);
}

.textOverlay[data-style="caption"] {
  top: 74%;
  height: 12%;
  width: min(72%, 760px);
  padding: 1.2% 2.6%;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.58);
  color: #ffffff;
  font-size: clamp(20px, 3vw, 42px);
  line-height: 1.08;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
}

@media (max-width: 1180px) {
  .textPresetGrid-pro,
  .effectsPresetGrid,
  .panelPane[data-tab-panel="transitions"] .transitionPresetGrid {
    grid-template-columns: 1fr;
  }
}


/* Beat Sync: audio-detected timeline markers */
.beatSyncToolButton.is-loading::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(37, 99, 235, 0.16);
  border-top-color: rgba(37, 99, 235, 0.78);
  border-radius: 999px;
  animation: beatSyncSpin 760ms linear infinite;
}

.beatSyncPopover {
  position: fixed;
  z-index: 3200;
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 16px;
  color: #e5f1ff;
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.24), transparent 34%),
    radial-gradient(circle at 82% 6%, rgba(168, 85, 247, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 13, 24, 0.97));
  box-shadow:
    0 26px 70px rgba(2, 6, 23, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.beatSyncPopover[hidden] {
  display: none;
}

.beatSyncPopoverHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.beatSyncPopoverHeader strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.beatSyncKicker {
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.beatSyncClose {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.66);
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
}

.beatSyncClose:hover,
.beatSyncClose:focus-visible {
  border-color: rgba(103, 232, 249, 0.38);
  color: #ffffff;
  background: rgba(30, 41, 59, 0.88);
  outline: none;
}

.beatSyncHint {
  margin: -2px 0 0;
  color: rgba(226, 232, 240, 0.76);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.beatSyncBandGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.beatSyncBandButton {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  display: grid;
  align-content: center;
  gap: 4px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(15, 23, 42, 0.68);
  color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.beatSyncBandButton strong {
  font-size: 13px;
  font-weight: 900;
}

.beatSyncBandButton span {
  color: rgba(203, 213, 225, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.beatSyncBandButton:hover,
.beatSyncBandButton:focus-visible,
.beatSyncBandButton.is-active {
  transform: translateY(-1px);
  outline: none;
}

.beatSyncBandButton-low:hover,
.beatSyncBandButton-low:focus-visible,
.beatSyncBandButton-low.is-active {
  border-color: rgba(56, 189, 248, 0.52);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.08)), rgba(15, 23, 42, 0.76);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.beatSyncBandButton-mid:hover,
.beatSyncBandButton-mid:focus-visible,
.beatSyncBandButton-mid.is-active {
  border-color: rgba(168, 85, 247, 0.54);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0.08)), rgba(15, 23, 42, 0.76);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.beatSyncBandButton-high:hover,
.beatSyncBandButton-high:focus-visible,
.beatSyncBandButton-high.is-active {
  border-color: rgba(250, 204, 21, 0.56);
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.22), rgba(250, 204, 21, 0.07)), rgba(15, 23, 42, 0.76);
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.beatSyncBandButton-all:hover,
.beatSyncBandButton-all:focus-visible,
.beatSyncBandButton-all.is-active {
  border-color: rgba(45, 212, 191, 0.54);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0.07)), rgba(15, 23, 42, 0.76);
  box-shadow: 0 0 24px rgba(45, 212, 191, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.beatSyncBandButton:disabled {
  opacity: 0.58;
  pointer-events: none;
}

.beatSyncSensitivity {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.5);
}

.beatSyncSensitivity span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 850;
}

.beatSyncSensitivity output {
  color: #67e8f9;
  font-variant-numeric: tabular-nums;
}

.beatSyncSensitivity input {
  width: 100%;
  accent-color: #38bdf8;
}

.beatSyncSummary {
  padding: 10px 11px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 13px;
  color: rgba(226, 232, 240, 0.82);
  background: rgba(8, 13, 24, 0.52);
  font-size: 12px;
  font-weight: 750;
}

.beatSyncActions {
  display: flex;
  gap: 8px;
}

.beatSyncActions button {
  flex: 1;
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.58);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 850;
}

.beatSyncActions button:hover,
.beatSyncActions button:focus-visible {
  border-color: rgba(103, 232, 249, 0.34);
  background: rgba(30, 41, 59, 0.82);
  outline: none;
}

.beatSyncMarkerLayer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 14;
  width: 100%;
  min-height: 100%;
  pointer-events: none;
}

.beatSyncMarker {
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 999px;
  opacity: calc(0.58 + (var(--beat-power, 0.6) * 0.34));
  background: var(--beat-marker-color, #38bdf8);
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.18),
    0 0 calc(10px + (var(--beat-power, 0.5) * 16px)) var(--beat-marker-glow, rgba(56, 189, 248, 0.26));
}

.beatSyncMarker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(2, 6, 23, 0.28);
  border-radius: 999px;
  background: var(--beat-marker-color, #38bdf8);
  transform: translateX(-50%) scale(calc(0.72 + var(--beat-power, 0.5) * 0.42));
  box-shadow: 0 0 18px var(--beat-marker-glow, rgba(56, 189, 248, 0.32));
}

.beatSyncMarker i {
  position: absolute;
  left: 7px;
  top: 3px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--beat-marker-color, #38bdf8) 48%, rgba(15, 23, 42, 0.9));
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.78);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.timelineCanvas:hover .beatSyncMarker i {
  opacity: 0.86;
  transform: translateY(0);
}

.beatSyncMarker-low {
  --beat-marker-color: #38bdf8;
  --beat-marker-glow: rgba(56, 189, 248, 0.32);
}

.beatSyncMarker-mid {
  --beat-marker-color: #a855f7;
  --beat-marker-glow: rgba(168, 85, 247, 0.3);
}

.beatSyncMarker-high {
  --beat-marker-color: #facc15;
  --beat-marker-glow: rgba(250, 204, 21, 0.28);
}

@keyframes beatSyncSpin {
  to {
    transform: rotate(360deg);
  }
}



/* Beat Sync Step 2: professional preview woofer pulse */
.beatSyncPulsePanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.64), rgba(8, 13, 24, 0.76));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.beatSyncPulseToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #eaf6ff;
  font-size: 12px;
  font-weight: 850;
}

.beatSyncPulseToggle span {
  display: grid;
  gap: 2px;
}

.beatSyncPulseToggle small {
  color: rgba(203, 213, 225, 0.68);
  font-size: 11px;
  font-weight: 700;
}

.beatSyncPulseToggle input {
  width: 36px;
  height: 20px;
  accent-color: #38bdf8;
  cursor: pointer;
}

.beatSyncPulseIntensity {
  margin-top: 0;
}

.beatSyncPreviewPulseButton {
  min-height: 36px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 12px;
  color: #e0f7ff;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(14, 116, 144, 0.42), rgba(15, 23, 42, 0.86));
  box-shadow:
    0 12px 24px rgba(14, 165, 233, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.beatSyncPreviewPulseButton:hover,
.beatSyncPreviewPulseButton:focus-visible {
  border-color: rgba(125, 211, 252, 0.58);
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.34), transparent 58%),
    linear-gradient(180deg, rgba(14, 116, 144, 0.54), rgba(15, 23, 42, 0.9));
  outline: none;
}

.beatSyncPopover.is-pulse-off .beatSyncPulseIntensity,
.beatSyncPopover.is-pulse-off .beatSyncPreviewPulseButton {
  opacity: 0.52;
}



/* Beat Sync Step 5: spectrum reactor controls */
.beatSyncSpectrumReactor {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 13px;
  background:
    radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.16), transparent 44%),
    radial-gradient(circle at 92% 16%, rgba(250, 204, 21, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(2, 6, 23, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(2, 6, 23, 0.12);
}

.beatSyncSpectrumToggle input {
  accent-color: #a855f7;
}

.beatSyncSpectrumIntensity {
  margin: 0;
}

.beatSyncSpectrumLegend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.beatSyncSpectrumLegend span {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.76);
  background: rgba(15, 23, 42, 0.42);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beatSyncSpectrumLegend .is-low {
  border-color: rgba(56, 189, 248, 0.34);
  color: rgba(186, 230, 253, 0.94);
  box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.08);
}

.beatSyncSpectrumLegend .is-mid {
  border-color: rgba(168, 85, 247, 0.34);
  color: rgba(221, 214, 254, 0.94);
  box-shadow: inset 0 0 18px rgba(168, 85, 247, 0.08);
}

.beatSyncSpectrumLegend .is-high {
  border-color: rgba(250, 204, 21, 0.32);
  color: rgba(254, 240, 138, 0.94);
  box-shadow: inset 0 0 18px rgba(250, 204, 21, 0.07);
}

.beatSyncPopover.is-spectrum-reactor-off .beatSyncSpectrumIntensity,
.beatSyncPopover.is-spectrum-reactor-off .beatSyncSpectrumLegend {
  opacity: 0.5;
}


.beatSyncPulseOverlay {
  --beat-pulse-accent: rgba(56, 189, 248, 0.82);
  --beat-pulse-glow: rgba(56, 189, 248, 0.26);
  position: absolute;
  inset: 0;
  z-index: 28;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  border-radius: inherit;
  mix-blend-mode: screen;
}

.previewFrame.is-beat-woofer-low .beatSyncPulseOverlay {
  --beat-pulse-accent: rgba(56, 189, 248, 0.9);
  --beat-pulse-glow: rgba(56, 189, 248, 0.28);
}

.previewFrame.is-beat-woofer-mid .beatSyncPulseOverlay {
  --beat-pulse-accent: rgba(168, 85, 247, 0.9);
  --beat-pulse-glow: rgba(168, 85, 247, 0.26);
}

.previewFrame.is-beat-woofer-high .beatSyncPulseOverlay {
  --beat-pulse-accent: rgba(250, 204, 21, 0.9);
  --beat-pulse-glow: rgba(250, 204, 21, 0.22);
}

.beatSyncPulseOverlay.is-active {
  animation: beatWooferOverlay var(--beat-pulse-duration, 560ms) cubic-bezier(0.18, 0.78, 0.28, 1) both;
}

.beatSyncPulseRing,
.beatSyncPulseCore {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.beatSyncPulseRing {
  width: 24%;
  aspect-ratio: 1;
  border: max(2px, calc(var(--beat-pulse-power, 0.7) * 4px)) solid var(--beat-pulse-accent);
  box-shadow:
    0 0 30px var(--beat-pulse-glow),
    inset 0 0 34px rgba(255, 255, 255, 0.08);
  opacity: 0;
}

.beatSyncPulseRing-a {
  animation: beatWooferRingA var(--beat-pulse-duration, 560ms) cubic-bezier(0.12, 0.74, 0.22, 1) both;
}

.beatSyncPulseRing-b {
  width: 12%;
  animation: beatWooferRingB var(--beat-pulse-duration, 560ms) cubic-bezier(0.16, 0.72, 0.24, 1) both;
  animation-delay: 26ms;
}

.beatSyncPulseCore {
  width: calc(110px + (var(--beat-pulse-power, 0.7) * 70px));
  aspect-ratio: 1;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, var(--beat-pulse-accent) 16%, transparent 66%);
  filter: blur(2px);
  animation: beatWooferCore 420ms cubic-bezier(0.16, 0.72, 0.24, 1) both;
}

.previewFrame.is-beat-woofer #previewVideo,
.previewFrame.is-beat-woofer #standbyPreviewVideo,
.previewFrame.is-beat-woofer #nativePreviewCanvas,
.previewFrame.is-beat-woofer #scrubPreviewCanvas,
.previewFrame.is-beat-woofer #previewFallbackImage,
.previewFrame.is-beat-woofer #previewImage,
.previewFrame.is-beat-woofer #spectrumCanvas,
.previewFrame.is-beat-woofer #textOverlay {
  transform-origin: center center;
  animation: beatWooferMediaPunch var(--beat-pulse-duration, 560ms) cubic-bezier(0.18, 0.82, 0.26, 1) both;
  will-change: transform, filter;
}

.previewFrame.is-beat-woofer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 27;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 28%),
    radial-gradient(circle at 50% 50%, var(--beat-pulse-glow), transparent 58%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.06));
  animation: beatWooferFlash var(--beat-pulse-duration, 560ms) ease-out both;
  mix-blend-mode: screen;
}

@keyframes beatWooferMediaPunch {
  0% {
    transform: scale(1);
    filter: saturate(1) contrast(1);
  }
  12% {
    transform: translateX(calc(var(--beat-pulse-shake, 6px) * -0.42)) scale(var(--beat-pulse-scale, 1.025));
    filter: saturate(calc(1.04 + var(--beat-pulse-power, 0.7) * 0.16)) contrast(calc(1.02 + var(--beat-pulse-power, 0.7) * 0.08));
  }
  22% {
    transform: translateX(calc(var(--beat-pulse-shake, 6px) * 0.28)) scale(calc(1 + (var(--beat-pulse-scale, 1.025) - 1) * 0.66));
  }
  42% {
    transform: translateX(calc(var(--beat-pulse-shake, 6px) * -0.12)) scale(calc(1 + (var(--beat-pulse-scale, 1.025) - 1) * 0.28));
  }
  100% {
    transform: scale(1);
    filter: saturate(1) contrast(1);
  }
}

@keyframes beatWooferOverlay {
  0% {
    opacity: 0;
  }
  10% {
    opacity: calc(0.36 + var(--beat-pulse-power, 0.7) * 0.18);
  }
  100% {
    opacity: 0;
  }
}

@keyframes beatWooferRingA {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
  }
  12% {
    opacity: calc(0.42 + var(--beat-pulse-power, 0.7) * 0.24);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(4.2 + var(--beat-pulse-power, 0.7) * 1.65));
  }
}

@keyframes beatWooferRingB {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  16% {
    opacity: calc(0.32 + var(--beat-pulse-power, 0.7) * 0.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(6 + var(--beat-pulse-power, 0.7) * 1.85));
  }
}

@keyframes beatWooferCore {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.36);
  }
  12% {
    opacity: calc(0.34 + var(--beat-pulse-power, 0.7) * 0.16);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

@keyframes beatWooferFlash {
  0% {
    opacity: 0;
  }
  11% {
    opacity: calc(0.18 + var(--beat-pulse-power, 0.7) * 0.12);
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .previewFrame.is-beat-woofer #previewVideo,
  .previewFrame.is-beat-woofer #standbyPreviewVideo,
  .previewFrame.is-beat-woofer #nativePreviewCanvas,
  .previewFrame.is-beat-woofer #scrubPreviewCanvas,
  .previewFrame.is-beat-woofer #previewFallbackImage,
  .previewFrame.is-beat-woofer #previewImage,
  .previewFrame.is-beat-woofer #spectrumCanvas,
  .previewFrame.is-beat-woofer #textOverlay,
  .beatSyncPulseOverlay.is-active,
  .beatSyncPulseRing,
  .beatSyncPulseCore,
  .previewFrame.is-beat-woofer::after {
    animation-duration: 1ms !important;
  }
}


/* Beat Sync Step 3: export-safe boom presets */
.beatSyncPulsePresetPanel {
  display: grid;
  gap: 8px;
}

.beatSyncPulsePresetTitle {
  color: rgba(226, 232, 240, 0.72);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.beatSyncPulsePresetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.beatSyncPulsePresetButton {
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  display: grid;
  gap: 3px;
  text-align: left;
  color: #e5f6ff;
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.1), transparent 52%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(8, 13, 24, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.beatSyncPulsePresetButton strong {
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
}

.beatSyncPulsePresetButton span {
  color: rgba(203, 213, 225, 0.68);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.2;
}

.beatSyncPulsePresetButton:hover,
.beatSyncPulsePresetButton:focus-visible,
.beatSyncPulsePresetButton.is-active {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.48);
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.2), transparent 52%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(8, 13, 24, 0.96));
  box-shadow:
    0 10px 24px rgba(14, 165, 233, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  outline: none;
}

.beatSyncPulsePresetButton.is-active {
  border-color: rgba(34, 211, 238, 0.72);
}

.beatSyncPulsePresetButton:disabled {
  cursor: default;
  opacity: 0.55;
  transform: none;
}

.beatSyncPopover.is-pulse-off .beatSyncPulsePresetPanel {
  opacity: 0.54;
}

.previewFrame.is-beat-preset-camerashake #previewVideo,
.previewFrame.is-beat-preset-camerashake #standbyPreviewVideo,
.previewFrame.is-beat-preset-camerashake #nativePreviewCanvas,
.previewFrame.is-beat-preset-camerashake #scrubPreviewCanvas,
.previewFrame.is-beat-preset-camerashake #previewFallbackImage,
.previewFrame.is-beat-preset-camerashake #previewImage,
.previewFrame.is-beat-preset-camerashake #spectrumCanvas,
.previewFrame.is-beat-preset-camerashake #textOverlay {
  animation-name: beatWooferCameraShake;
}

.previewFrame.is-beat-preset-glowburst .beatSyncPulseRing {
  width: 32%;
  filter: blur(0.2px);
}

.previewFrame.is-beat-preset-glowburst::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, calc(0.22 * var(--beat-pulse-flash, 1))), transparent 22%),
    radial-gradient(circle at 50% 50%, var(--beat-pulse-glow), transparent 70%);
}

.previewFrame.is-beat-preset-rgbhit::before,
.previewFrame.is-beat-preset-clubflash::before,
.previewFrame.is-beat-preset-cinematic::before {
  content: "";
  position: absolute;
  inset: -3%;
  z-index: 26;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(239, 68, 68, 0.22), transparent 28%, transparent 72%, rgba(59, 130, 246, 0.24)),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.14), transparent 45%);
  mix-blend-mode: screen;
  animation: beatWooferRgbHit var(--beat-pulse-duration, 560ms) ease-out both;
}

.previewFrame.is-beat-preset-clubflash::after {
  animation-name: beatWooferClubFlash;
}

.previewFrame.is-beat-preset-cinematic #previewVideo,
.previewFrame.is-beat-preset-cinematic #standbyPreviewVideo,
.previewFrame.is-beat-preset-cinematic #nativePreviewCanvas,
.previewFrame.is-beat-preset-cinematic #scrubPreviewCanvas,
.previewFrame.is-beat-preset-cinematic #previewFallbackImage,
.previewFrame.is-beat-preset-cinematic #previewImage,
.previewFrame.is-beat-preset-cinematic #spectrumCanvas,
.previewFrame.is-beat-preset-cinematic #textOverlay {
  animation-name: beatWooferCinematicImpact;
}

@keyframes beatWooferCameraShake {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1) contrast(1);
  }
  10% {
    transform: translate3d(calc(var(--beat-pulse-shake, 8px) * -0.72), calc(var(--beat-pulse-shake, 8px) * 0.32), 0) scale(var(--beat-pulse-scale, 1.022));
    filter: saturate(calc(1.04 + var(--beat-pulse-power, 0.7) * 0.12)) contrast(calc(1.02 + var(--beat-pulse-power, 0.7) * 0.08));
  }
  19% {
    transform: translate3d(calc(var(--beat-pulse-shake, 8px) * 0.62), calc(var(--beat-pulse-shake, 8px) * -0.2), 0) scale(calc(1 + (var(--beat-pulse-scale, 1.022) - 1) * 0.72));
  }
  34% {
    transform: translate3d(calc(var(--beat-pulse-shake, 8px) * -0.38), calc(var(--beat-pulse-shake, 8px) * 0.14), 0) scale(calc(1 + (var(--beat-pulse-scale, 1.022) - 1) * 0.42));
  }
  56% {
    transform: translate3d(calc(var(--beat-pulse-shake, 8px) * 0.14), 0, 0) scale(calc(1 + (var(--beat-pulse-scale, 1.022) - 1) * 0.16));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1) contrast(1);
  }
}

@keyframes beatWooferRgbHit {
  0% {
    opacity: 0;
    transform: translateX(0) scale(1);
  }
  11% {
    opacity: calc(0.18 + var(--beat-pulse-rgb, 0.5) * 0.28);
    transform: translateX(calc(var(--beat-pulse-shake, 6px) * -0.32)) scale(calc(1 + var(--beat-pulse-power, 0.7) * 0.02));
  }
  22% {
    opacity: calc(0.12 + var(--beat-pulse-rgb, 0.5) * 0.2);
    transform: translateX(calc(var(--beat-pulse-shake, 6px) * 0.24));
  }
  100% {
    opacity: 0;
    transform: translateX(0) scale(1.02);
  }
}

@keyframes beatWooferClubFlash {
  0%,
  100% {
    opacity: 0;
  }
  8% {
    opacity: calc(0.3 + var(--beat-pulse-power, 0.7) * 0.22);
  }
  15% {
    opacity: 0.04;
  }
  23% {
    opacity: calc(0.16 + var(--beat-pulse-power, 0.7) * 0.16);
  }
  38% {
    opacity: 0;
  }
}

@keyframes beatWooferCinematicImpact {
  0% {
    transform: scale(1);
    filter: saturate(1) contrast(1);
  }
  12% {
    transform: translateY(calc(var(--beat-pulse-shake, 6px) * -0.18)) scale(var(--beat-pulse-scale, 1.03));
    filter: saturate(calc(1.06 + var(--beat-pulse-power, 0.7) * 0.16)) contrast(calc(1.04 + var(--beat-pulse-power, 0.7) * 0.12));
  }
  26% {
    transform: translateY(calc(var(--beat-pulse-shake, 6px) * 0.1)) scale(calc(1 + (var(--beat-pulse-scale, 1.03) - 1) * 0.56));
  }
  52% {
    transform: scale(calc(1 + (var(--beat-pulse-scale, 1.03) - 1) * 0.18));
  }
  100% {
    transform: scale(1);
    filter: saturate(1) contrast(1);
  }
}

@media (max-width: 1380px) {
  .beatSyncPulsePresetGrid {
    grid-template-columns: 1fr;
  }
}


/* Beat Sync Step 4: marker editor, filters, and accuracy polish */
.beatSyncAccuracyPanel,
.beatSyncMarkerEditor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, 0.15), transparent 42%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.66), rgba(8, 13, 24, 0.76));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.beatSyncPanelTitle,
.beatSyncMarkerEditor > div:first-child {
  display: grid;
  gap: 3px;
}

.beatSyncPanelTitle strong,
.beatSyncMarkerEditor strong {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 950;
}

.beatSyncPanelTitle span,
.beatSyncMarkerEditor small {
  color: rgba(203, 213, 225, 0.68);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

.beatSyncFilterRow,
.beatSyncMarkerBandSwitch,
.beatSyncInlineActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.beatSyncFilterRow label {
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(226, 232, 240, 0.86);
  background: rgba(15, 23, 42, 0.58);
  font-size: 11px;
  font-weight: 850;
}

.beatSyncFilterRow input {
  width: 14px;
  height: 14px;
  accent-color: #38bdf8;
}

.beatSyncInlineActions button,
.beatSyncMarkerBandSwitch button {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  color: rgba(226, 232, 240, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(15, 23, 42, 0.66);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.beatSyncInlineActions button:hover,
.beatSyncInlineActions button:focus-visible,
.beatSyncMarkerBandSwitch button:hover,
.beatSyncMarkerBandSwitch button:focus-visible,
.beatSyncMarkerBandSwitch button.is-active {
  border-color: rgba(103, 232, 249, 0.44);
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.18), transparent 58%),
    rgba(15, 23, 42, 0.82);
  outline: none;
}

.beatSyncInlineActions button:disabled,
.beatSyncMarkerBandSwitch button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.beatSyncMarkerEditor {
  border-color: rgba(168, 85, 247, 0.16);
}

.beatSyncMarkerEditor.has-marker {
  border-color: rgba(103, 232, 249, 0.28);
  box-shadow:
    0 0 28px rgba(56, 189, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.beatSyncMarkerEditorKicker {
  color: #67e8f9;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.beatSyncMarkerLayer {
  pointer-events: none;
}

.beatSyncMarker {
  pointer-events: auto;
  cursor: ew-resize;
}

.beatSyncMarker:hover,
.beatSyncMarker.is-selected {
  opacity: 1;
  z-index: 3;
  width: 3px;
  margin-left: -1.5px;
  box-shadow:
    0 0 0 1px rgba(248, 250, 252, 0.72),
    0 0 20px var(--beat-marker-glow, rgba(56, 189, 248, 0.38)),
    0 0 42px var(--beat-marker-glow, rgba(56, 189, 248, 0.26));
}

.beatSyncMarker.is-selected::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--beat-marker-color, #38bdf8) 78%, #ffffff);
  border-radius: 999px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--beat-marker-color, #38bdf8) 24%, transparent);
  box-shadow: 0 0 18px var(--beat-marker-glow, rgba(56, 189, 248, 0.3));
}

.beatSyncMarker:hover i,
.beatSyncMarker.is-selected i,
.isDraggingBeatMarker .beatSyncMarker i {
  opacity: 1;
  transform: translateY(0);
}

.isDraggingBeatMarker,
.isDraggingBeatMarker * {
  cursor: ew-resize !important;
  user-select: none !important;
}


/* Beat Sync Step 6: final QA and responsive polish */
.beatSyncPopover {
  max-height: calc(100vh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 211, 252, 0.44) rgba(15, 23, 42, 0.38);
}

.beatSyncPopover::-webkit-scrollbar {
  width: 8px;
}

.beatSyncPopover::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.38);
  border-radius: 999px;
}

.beatSyncPopover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.58), rgba(168, 85, 247, 0.42));
  border-radius: 999px;
}

.beatSyncQaPanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.16), transparent 42%),
    radial-gradient(circle at 92% 10%, rgba(56, 189, 248, 0.13), transparent 44%),
    linear-gradient(180deg, rgba(8, 47, 73, 0.35), rgba(8, 13, 24, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 12px 28px rgba(2, 6, 23, 0.12);
}

.beatSyncQaPanel.is-ready {
  border-color: rgba(45, 212, 191, 0.36);
  box-shadow:
    0 0 28px rgba(20, 184, 166, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.beatSyncQaPanel.is-warning {
  border-color: rgba(250, 204, 21, 0.22);
}

.beatSyncQaStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.beatSyncQaStats span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  display: grid;
  gap: 1px;
  background: rgba(15, 23, 42, 0.52);
}

.beatSyncQaStats b {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.beatSyncQaStats small {
  color: rgba(203, 213, 225, 0.68);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.beatSyncQaChecklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.beatSyncQaChecklist span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 7px;
  row-gap: 1px;
  align-items: center;
  background: rgba(15, 23, 42, 0.48);
}

.beatSyncQaChecklist i {
  grid-row: span 2;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #031420;
  background: rgba(45, 212, 191, 0.9);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.beatSyncQaChecklist strong {
  min-width: 0;
  color: rgba(248, 250, 252, 0.92);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.05;
}

.beatSyncQaChecklist small {
  min-width: 0;
  color: rgba(203, 213, 225, 0.68);
  font-size: 9px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beatSyncQaChecklist .is-warn {
  border-color: rgba(250, 204, 21, 0.22);
  background: rgba(113, 63, 18, 0.14);
}

.beatSyncQaChecklist .is-warn i {
  background: rgba(250, 204, 21, 0.92);
  color: #422006;
}

.beatSyncQaButton {
  min-height: 34px;
  border: 1px solid rgba(45, 212, 191, 0.34);
  border-radius: 12px;
  color: #ecfeff;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(15, 118, 110, 0.38), rgba(15, 23, 42, 0.84));
  box-shadow:
    0 10px 22px rgba(20, 184, 166, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.beatSyncQaButton:hover,
.beatSyncQaButton:focus-visible {
  border-color: rgba(94, 234, 212, 0.58);
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.3), transparent 58%),
    linear-gradient(180deg, rgba(15, 118, 110, 0.5), rgba(15, 23, 42, 0.88));
  outline: none;
}

.beatSyncQaButton:disabled {
  cursor: default;
  opacity: 0.55;
}

@media (max-height: 720px) {
  .beatSyncPopover {
    gap: 10px;
    padding: 12px;
  }

  .beatSyncBandButton {
    min-height: 58px;
  }

  .beatSyncQaChecklist {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .beatSyncBandGrid,
  .beatSyncPulsePresetGrid,
  .beatSyncQaStats,
  .beatSyncQaChecklist {
    grid-template-columns: 1fr;
  }
}

/* Beat Sync refinement: simplified global popup + compact row markers */
.beatSyncPopover {
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(9, 14, 24, 0.985), rgba(8, 12, 20, 0.975));
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.46);
  backdrop-filter: blur(14px);
}

.beatSyncPopoverHeader {
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.beatSyncPopoverHeader strong {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 850;
}

.beatSyncKicker {
  color: #8cc8ff;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.beatSyncHint {
  margin: 0;
  color: rgba(226, 232, 240, 0.68);
  font-size: 11px;
  font-weight: 600;
}

.beatSyncBandGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.beatSyncBandButton {
  min-height: 54px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.42);
  box-shadow: none;
}

.beatSyncSensitivity,
.beatSyncAccuracyPanel,
.beatSyncMarkerEditor,
.beatSyncPulsePanel,
.beatSyncSpectrumReactor,
.beatSyncPulsePresetPanel,
.beatSyncQaPanel,
.beatSyncSummary {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.beatSyncAccuracyPanel,
.beatSyncMarkerEditor,
.beatSyncPulsePanel,
.beatSyncQaPanel,
.beatSyncSummary,
.beatSyncActions {
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.beatSyncSensitivity {
  gap: 6px;
}

.beatSyncSensitivity span,
.beatSyncPanelTitle strong,
.beatSyncMarkerEditor strong,
.beatSyncPulsePresetTitle {
  font-size: 11px;
}

.beatSyncPanelTitle span,
.beatSyncMarkerEditor small,
.beatSyncSpectrumLegend span {
  font-size: 10px;
}

.beatSyncFilterRow label,
.beatSyncInlineActions button,
.beatSyncMarkerBandSwitch button,
.beatSyncActions button,
.beatSyncPreviewPulseButton,
.beatSyncQaButton {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
}

.beatSyncPulseToggle {
  padding: 0 0 6px;
}

.beatSyncPulsePresetGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.beatSyncPulsePresetButton {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
}

.beatSyncPulsePresetButton span {
  display: none;
}

.beatSyncQaStats {
  gap: 8px;
}

.beatSyncQaStats span {
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
}

.beatSyncActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.beatSyncMarkerLayer {
  overflow: visible;
  pointer-events: none;
}

.beatSyncMarker {
  position: absolute;
  top: 0;
  bottom: auto;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border: 1.5px solid rgba(2, 6, 23, 0.78);
  border-radius: 999px;
  opacity: 0.96;
  background: var(--beat-marker-color, #38bdf8);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 calc(6px + (var(--beat-power, 0.5) * 8px)) var(--beat-marker-glow, rgba(56, 189, 248, 0.24));
  pointer-events: auto;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

.beatSyncMarker::before,
.beatSyncMarker i {
  content: none;
  display: none;
}

.beatSyncMarker:hover,
.beatSyncMarker:focus-visible {
  transform: scale(1.12);
}

.beatSyncMarker.is-selected {
  transform: scale(1.18);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.16),
    0 0 0 4px color-mix(in srgb, var(--beat-marker-color, #38bdf8) 28%, transparent),
    0 0 16px var(--beat-marker-glow, rgba(56, 189, 248, 0.3));
}

@media (max-width: 1100px) {
  .beatSyncBandGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Beat Sync refinement v2: tiny white markers + stronger distinct boom styles */
.beatSyncMarkerLayer {
  contain: layout paint style;
  transform: translateZ(0);
  will-change: transform;
}

.beatSyncMarker,
.beatSyncMarker.beatSyncMarker-low,
.beatSyncMarker.beatSyncMarker-mid,
.beatSyncMarker.beatSyncMarker-high {
  --beat-marker-color: rgba(255, 255, 255, 0.98);
  --beat-marker-glow: rgba(255, 255, 255, 0.18);
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-width: 1px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 0 6px rgba(255,255,255,0.12);
  opacity: 0.95;
  transition: transform 90ms ease, opacity 90ms ease;
}

.beatSyncMarker:hover,
.beatSyncMarker:focus-visible,
.beatSyncMarker.is-selected {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.16), 0 0 10px rgba(255,255,255,0.2);
}

.beatSyncMarker.is-selected {
  transform: scale(1.22);
}

.beatSyncPulsePresetGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.beatSyncPulsePresetButton {
  min-height: 34px;
  justify-content: flex-start;
}

.previewFrame.is-beat-preset-subdrop .beatSyncPulseRing {
  width: 38%;
  filter: blur(0.6px);
}

.previewFrame.is-beat-preset-subdrop::after,
.previewFrame.is-beat-preset-shockwave::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,calc(0.14 * var(--beat-pulse-flash, 1))), transparent 20%),
    radial-gradient(circle at 50% 50%, var(--beat-pulse-glow), transparent 76%);
}

.previewFrame.is-beat-preset-shockwave .beatSyncPulseRing {
  width: 36%;
}

.previewFrame.is-beat-preset-hyperzoom #previewVideo,
.previewFrame.is-beat-preset-hyperzoom #standbyPreviewVideo,
.previewFrame.is-beat-preset-hyperzoom #nativePreviewCanvas,
.previewFrame.is-beat-preset-hyperzoom #scrubPreviewCanvas,
.previewFrame.is-beat-preset-hyperzoom #previewFallbackImage,
.previewFrame.is-beat-preset-hyperzoom #previewImage,
.previewFrame.is-beat-preset-hyperzoom #spectrumCanvas,
.previewFrame.is-beat-preset-hyperzoom #textOverlay {
  animation-name: beatWooferHyperZoom;
}

.previewFrame.is-beat-preset-glitchslam::before,
.previewFrame.is-beat-preset-glitchslam::after {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 26;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
}

.previewFrame.is-beat-preset-glitchslam::before {
  background: linear-gradient(90deg, rgba(255, 0, 76, 0.18), transparent 30%, transparent 70%, rgba(0, 204, 255, 0.18));
  animation: beatWooferGlitchSlam var(--beat-pulse-duration, 460ms) steps(4, end) both;
}

.previewFrame.is-beat-preset-glitchslam::after {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 48%);
  animation: beatWooferClubFlash var(--beat-pulse-duration, 460ms) ease-out both;
}

@keyframes beatWooferHyperZoom {
  0% { transform: scale(1); filter: saturate(1) contrast(1); }
  12% { transform: scale(calc(1 + (var(--beat-pulse-scale, 1.08) - 1) * 1.12)); filter: saturate(calc(1.08 + var(--beat-pulse-power, 1) * 0.18)) contrast(calc(1.06 + var(--beat-pulse-power, 1) * 0.12)); }
  28% { transform: scale(calc(1 - ((var(--beat-pulse-scale, 1.08) - 1) * 0.2))); }
  100% { transform: scale(1); filter: saturate(1) contrast(1); }
}

@keyframes beatWooferGlitchSlam {
  0% { opacity: 0; transform: translateX(0); }
  14% { opacity: calc(0.26 + var(--beat-pulse-rgb, 1) * 0.16); transform: translateX(calc(var(--beat-pulse-shake, 10px) * -0.4)); }
  20% { opacity: 0.05; transform: translateX(calc(var(--beat-pulse-shake, 10px) * 0.28)); }
  28% { opacity: calc(0.18 + var(--beat-pulse-rgb, 1) * 0.14); transform: translateX(calc(var(--beat-pulse-shake, 10px) * -0.2)); }
  100% { opacity: 0; transform: translateX(0); }
}

/* Beat Sync premium preset expansion */
.previewFrame.is-beat-preset-firestorm::before,
.previewFrame.is-beat-preset-neonplasma::before,
.previewFrame.is-beat-preset-prismblast::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 26;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  mix-blend-mode: screen;
}

.previewFrame.is-beat-preset-firestorm::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 235, 180, 0.22), transparent 16%),
    radial-gradient(circle at 50% 58%, rgba(255, 104, 0, 0.24), transparent 44%),
    radial-gradient(circle at 50% 50%, rgba(255, 32, 32, 0.16), transparent 68%);
  animation: beatWooferFireStorm var(--beat-pulse-duration, 720ms) ease-out both;
}

.previewFrame.is-beat-preset-smokesurge::after {
  content: "";
  position: absolute;
  inset: -2%;
  z-index: 24;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 42% 55%, rgba(255,255,255,0.12), transparent 16%),
    radial-gradient(circle at 56% 44%, rgba(203,213,225,0.14), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(148,163,184,0.16), transparent 48%);
  animation: beatWooferSmokeSurge var(--beat-pulse-duration, 860ms) ease-out both;
}

.previewFrame.is-beat-preset-neonplasma::before {
  background:
    linear-gradient(90deg, rgba(34,211,238,0.18), transparent 26%, rgba(236,72,153,0.16) 56%, transparent 74%, rgba(167,139,250,0.18)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 38%);
  animation: beatWooferNeonPlasma var(--beat-pulse-duration, 690ms) ease-out both;
}

.previewFrame.is-beat-preset-prismblast::before {
  background:
    linear-gradient(90deg, rgba(255,0,128,0.16), rgba(255,196,0,0.14), rgba(0,214,255,0.16), rgba(124,58,237,0.16), rgba(34,197,94,0.14)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.14), transparent 42%);
  animation: beatWooferPrismBlast var(--beat-pulse-duration, 640ms) ease-out both;
}

@keyframes beatWooferFireStorm {
  0% { opacity: 0; transform: scale(0.92); }
  14% { opacity: calc(0.26 + var(--beat-pulse-flash, 1) * 0.08); transform: scale(1.04); }
  36% { opacity: 0.14; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.16); }
}

@keyframes beatWooferSmokeSurge {
  0% { opacity: 0; transform: scale(0.96); filter: blur(0px); }
  18% { opacity: 0.22; transform: scale(1.01); filter: blur(1px); }
  56% { opacity: 0.12; transform: scale(1.08); filter: blur(2px); }
  100% { opacity: 0; transform: scale(1.14); filter: blur(3px); }
}

@keyframes beatWooferNeonPlasma {
  0% { opacity: 0; transform: translateX(0) scale(0.98); }
  12% { opacity: calc(0.16 + var(--beat-pulse-rgb, 1) * 0.1); transform: translateX(calc(var(--beat-pulse-shake, 8px) * -0.28)) scale(1.03); }
  28% { opacity: 0.14; transform: translateX(calc(var(--beat-pulse-shake, 8px) * 0.18)) scale(1.06); }
  100% { opacity: 0; transform: translateX(0) scale(1.12); }
}

@keyframes beatWooferPrismBlast {
  0% { opacity: 0; transform: scale(0.98); }
  10% { opacity: calc(0.18 + var(--beat-pulse-rgb, 1) * 0.1); transform: scale(1.02); }
  22% { opacity: 0.14; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.14); }
}

/* Beat Sync Band Effects: per Low / Mid / High professional effect picker */
.beatSyncBandEffectPanel {
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.beatSyncBandEffectRow {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 8px;
}

.beatSyncBandEffectName {
  color: rgba(226, 232, 240, 0.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.beatSyncBandEffectGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.beatSyncBandEffectButton {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.82);
  background: rgba(15, 23, 42, 0.38);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 100ms ease, border-color 100ms ease, background 100ms ease, color 100ms ease;
}

.beatSyncBandEffectButton:hover,
.beatSyncBandEffectButton:focus-visible,
.beatSyncBandEffectButton.is-active {
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.beatSyncBandEffectRow[data-band-effect-row="low"] .beatSyncBandEffectButton.is-active {
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.16), 0 0 14px rgba(125, 211, 252, 0.12);
}

.beatSyncBandEffectRow[data-band-effect-row="mid"] .beatSyncBandEffectButton.is-active {
  box-shadow: 0 0 0 1px rgba(216, 180, 254, 0.16), 0 0 14px rgba(216, 180, 254, 0.12);
}

.beatSyncBandEffectRow[data-band-effect-row="high"] .beatSyncBandEffectButton.is-active {
  box-shadow: 0 0 0 1px rgba(254, 240, 138, 0.16), 0 0 14px rgba(254, 240, 138, 0.12);
}

/* Preview-only band effect overlays. Export path draws equivalent canvas effects. */
.previewFrame.is-beat-band-effect-glow .beatSyncPulseCore,
.previewFrame.is-beat-band-effect-pulse .beatSyncPulseCore {
  filter: blur(1px) saturate(1.2);
}

.previewFrame.is-beat-band-effect-fire::after,
.previewFrame.is-beat-band-effect-embers::after {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 25;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 226, 120, calc(0.2 * var(--beat-band-fire, 1))), transparent 17%),
    radial-gradient(circle at 50% 54%, rgba(255, 95, 0, calc(0.28 * var(--beat-band-fire, 1))), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 28, 28, calc(0.15 * var(--beat-band-fire, 1))), transparent 66%);
  mix-blend-mode: screen;
  animation: beatBandFireEffect var(--beat-pulse-duration, 700ms) ease-out both;
}

.previewFrame.is-beat-band-effect-smoke::after {
  content: "";
  position: absolute;
  inset: -5%;
  z-index: 25;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(circle at 42% 54%, rgba(255,255,255,calc(0.12 * var(--beat-band-smoke, 1))), transparent 17%),
    radial-gradient(circle at 56% 46%, rgba(203,213,225,calc(0.14 * var(--beat-band-smoke, 1))), transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(148,163,184,calc(0.14 * var(--beat-band-smoke, 1))), transparent 58%);
  mix-blend-mode: screen;
  animation: beatBandSmokeEffect var(--beat-pulse-duration, 820ms) ease-out both;
}

.previewFrame.is-beat-band-effect-particles::before,
.previewFrame.is-beat-band-effect-prism::before,
.previewFrame.is-beat-band-effect-shock::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 26;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  mix-blend-mode: screen;
}

.previewFrame.is-beat-band-effect-particles::before {
  background:
    radial-gradient(circle at 34% 42%, rgba(255,255,255,calc(0.18 * var(--beat-band-particles, 1))), transparent 2%),
    radial-gradient(circle at 64% 40%, rgba(255,255,255,calc(0.16 * var(--beat-band-particles, 1))), transparent 2%),
    radial-gradient(circle at 48% 68%, rgba(255,255,255,calc(0.15 * var(--beat-band-particles, 1))), transparent 2%),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,calc(0.12 * var(--beat-band-particles, 1))), transparent 2%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 44%);
  animation: beatBandParticleEffect var(--beat-pulse-duration, 640ms) ease-out both;
}

.previewFrame.is-beat-band-effect-prism::before {
  background:
    linear-gradient(90deg, rgba(255,0,128,calc(0.16 * var(--beat-band-prism, 1))), rgba(255,196,0,calc(0.14 * var(--beat-band-prism, 1))), rgba(0,214,255,calc(0.16 * var(--beat-band-prism, 1))), rgba(124,58,237,calc(0.16 * var(--beat-band-prism, 1)))),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 46%);
  animation: beatBandPrismEffect var(--beat-pulse-duration, 660ms) ease-out both;
}

.previewFrame.is-beat-band-effect-shock::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3), transparent 15%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 54%);
  animation: beatBandShockEffect var(--beat-pulse-duration, 560ms) ease-out both;
}

@keyframes beatBandFireEffect {
  0% { opacity: 0; transform: scale(0.94); }
  15% { opacity: 0.95; transform: scale(1.04); }
  42% { opacity: 0.28; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes beatBandSmokeEffect {
  0% { opacity: 0; transform: scale(0.96); filter: blur(0px); }
  18% { opacity: 0.72; transform: scale(1.02); filter: blur(1px); }
  56% { opacity: 0.22; transform: scale(1.12); filter: blur(2px); }
  100% { opacity: 0; transform: scale(1.18); filter: blur(3px); }
}

@keyframes beatBandParticleEffect {
  0% { opacity: 0; transform: scale(0.72) rotate(0deg); }
  12% { opacity: 0.95; transform: scale(1.05) rotate(2deg); }
  52% { opacity: 0.28; transform: scale(1.38) rotate(6deg); }
  100% { opacity: 0; transform: scale(1.62) rotate(10deg); }
}

@keyframes beatBandPrismEffect {
  0% { opacity: 0; transform: translateX(0) scale(0.98); }
  12% { opacity: 0.78; transform: translateX(calc(var(--beat-pulse-shake, 10px) * -0.22)) scale(1.03); }
  28% { opacity: 0.24; transform: translateX(calc(var(--beat-pulse-shake, 10px) * 0.18)) scale(1.08); }
  100% { opacity: 0; transform: translateX(0) scale(1.16); }
}

@keyframes beatBandShockEffect {
  0% { opacity: 0; transform: scale(0.82); }
  10% { opacity: 0.9; transform: scale(1.02); }
  30% { opacity: 0.16; transform: scale(1.32); }
  100% { opacity: 0; transform: scale(1.55); }
}

@media (max-width: 1380px) {
  .beatSyncBandEffectRow {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}


/* Beat Sync Band Effects v2: dedicated visible premium overlay layers */
.beatSyncPulseOverlay .beatSyncBandLayer {
  position: absolute;
  inset: -6%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
  transform-origin: center;
}

.beatSyncPulseOverlay .beatSyncBandGlow {
  z-index: 2;
  inset: -8%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.22), transparent 12%),
    radial-gradient(circle at 50% 50%, var(--beat-pulse-accent, rgba(56,189,248,0.82)), transparent 46%);
  filter: blur(1px);
}

.beatSyncPulseOverlay .beatSyncBandFire {
  background:
    radial-gradient(circle at 50% 56%, rgba(255,244,176,calc(0.42 * var(--beat-band-fire, 0))), transparent 14%),
    radial-gradient(circle at 50% 58%, rgba(255,111,0,calc(0.38 * var(--beat-band-fire, 0))), transparent 36%),
    radial-gradient(circle at 50% 48%, rgba(255,25,25,calc(0.24 * var(--beat-band-fire, 0))), transparent 66%);
  filter: saturate(1.25) contrast(1.06);
}

.beatSyncPulseOverlay .beatSyncBandSmoke {
  inset: -10%;
  background:
    radial-gradient(circle at 38% 54%, rgba(255,255,255,calc(0.17 * var(--beat-band-smoke, 0))), transparent 14%),
    radial-gradient(circle at 58% 42%, rgba(226,232,240,calc(0.18 * var(--beat-band-smoke, 0))), transparent 22%),
    radial-gradient(circle at 51% 55%, rgba(148,163,184,calc(0.2 * var(--beat-band-smoke, 0))), transparent 52%);
  filter: blur(1.6px);
}

.beatSyncPulseOverlay .beatSyncBandParticles {
  background:
    radial-gradient(circle at 24% 38%, rgba(255,255,255,calc(0.44 * var(--beat-band-particles, 0))), transparent 1.7%),
    radial-gradient(circle at 37% 62%, rgba(255,255,255,calc(0.36 * var(--beat-band-particles, 0))), transparent 1.5%),
    radial-gradient(circle at 51% 34%, rgba(255,255,255,calc(0.4 * var(--beat-band-particles, 0))), transparent 1.6%),
    radial-gradient(circle at 64% 66%, rgba(255,255,255,calc(0.34 * var(--beat-band-particles, 0))), transparent 1.5%),
    radial-gradient(circle at 78% 44%, rgba(255,255,255,calc(0.38 * var(--beat-band-particles, 0))), transparent 1.7%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 42%);
}

.beatSyncPulseOverlay .beatSyncBandPrism {
  background:
    linear-gradient(90deg,
      rgba(255,0,128,calc(0.18 * var(--beat-band-prism, 0))),
      rgba(255,196,0,calc(0.16 * var(--beat-band-prism, 0))),
      rgba(0,214,255,calc(0.18 * var(--beat-band-prism, 0))),
      rgba(124,58,237,calc(0.18 * var(--beat-band-prism, 0))),
      rgba(34,197,94,calc(0.16 * var(--beat-band-prism, 0)))),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 42%);
  filter: saturate(1.35);
}

.beatSyncPulseOverlay .beatSyncBandShock {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,calc(0.4 * var(--beat-band-shock, 0))), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,calc(0.26 * var(--beat-band-shock, 0))), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,calc(0.16 * var(--beat-band-shock, 0))), transparent 68%);
}

.beatSyncPulseOverlay.is-active .beatSyncBandGlow {
  animation: beatBandLayerGlow var(--beat-pulse-duration, 640ms) cubic-bezier(0.12, 0.74, 0.2, 1) both;
}

.previewFrame.is-beat-band-effect-glow .beatSyncPulseOverlay.is-active .beatSyncBandGlow,
.previewFrame.is-beat-band-effect-pulse .beatSyncPulseOverlay.is-active .beatSyncBandGlow {
  opacity: 1;
}

.previewFrame.is-beat-band-effect-smoke .beatSyncPulseOverlay.is-active .beatSyncBandSmoke,
.previewFrame.is-beat-band-effect-heavysmoke .beatSyncPulseOverlay.is-active .beatSyncBandSmoke {
  animation: beatBandLayerSmoke var(--beat-pulse-duration, 820ms) ease-out both;
}

.previewFrame.is-beat-band-effect-fire .beatSyncPulseOverlay.is-active .beatSyncBandFire,
.previewFrame.is-beat-band-effect-inferno .beatSyncPulseOverlay.is-active .beatSyncBandFire,
.previewFrame.is-beat-band-effect-embers .beatSyncPulseOverlay.is-active .beatSyncBandFire {
  animation: beatBandLayerFire var(--beat-pulse-duration, 700ms) ease-out both;
}

.previewFrame.is-beat-band-effect-embers .beatSyncPulseOverlay.is-active .beatSyncBandParticles,
.previewFrame.is-beat-band-effect-particles .beatSyncPulseOverlay.is-active .beatSyncBandParticles,
.previewFrame.is-beat-band-effect-sparkrain .beatSyncPulseOverlay.is-active .beatSyncBandParticles {
  animation: beatBandLayerParticles var(--beat-pulse-duration, 650ms) ease-out both;
}

.previewFrame.is-beat-band-effect-prism .beatSyncPulseOverlay.is-active .beatSyncBandPrism,
.previewFrame.is-beat-band-effect-colorburst .beatSyncPulseOverlay.is-active .beatSyncBandPrism,
.previewFrame.is-beat-band-effect-sparkrain .beatSyncPulseOverlay.is-active .beatSyncBandPrism {
  animation: beatBandLayerPrism var(--beat-pulse-duration, 660ms) ease-out both;
}

.previewFrame.is-beat-band-effect-shock .beatSyncPulseOverlay.is-active .beatSyncBandShock,
.previewFrame.is-beat-band-effect-pulse .beatSyncPulseOverlay.is-active .beatSyncBandShock,
.previewFrame.is-beat-band-effect-colorburst .beatSyncPulseOverlay.is-active .beatSyncBandShock {
  animation: beatBandLayerShock var(--beat-pulse-duration, 560ms) ease-out both;
}

.previewFrame.is-beat-band-effect-heavysmoke .beatSyncPulseOverlay .beatSyncBandSmoke {
  filter: blur(2.5px) saturate(1.06);
}

.previewFrame.is-beat-band-effect-inferno .beatSyncPulseOverlay .beatSyncBandFire {
  filter: saturate(1.45) contrast(1.12);
}

.previewFrame.is-beat-band-effect-colorburst .beatSyncPulseOverlay .beatSyncBandPrism {
  filter: saturate(1.6) contrast(1.08);
}

@keyframes beatBandLayerGlow {
  0% { opacity: 0; transform: scale(0.82); }
  13% { opacity: calc(0.5 + var(--beat-pulse-power, 1) * 0.08); transform: scale(1.02); }
  42% { opacity: 0.2; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes beatBandLayerSmoke {
  0% { opacity: 0; transform: scale(0.9) translateY(0); }
  16% { opacity: calc(0.55 + var(--beat-band-smoke, 1) * 0.1); transform: scale(1.02) translateY(-1%); }
  58% { opacity: 0.28; transform: scale(1.22) translateY(-3%); }
  100% { opacity: 0; transform: scale(1.4) translateY(-6%); }
}

@keyframes beatBandLayerFire {
  0% { opacity: 0; transform: scale(0.86) translateY(2%); }
  12% { opacity: calc(0.62 + var(--beat-band-fire, 1) * 0.08); transform: scale(1.03) translateY(0); }
  36% { opacity: 0.32; transform: scale(1.12) translateY(-2%); }
  100% { opacity: 0; transform: scale(1.28) translateY(-5%); }
}

@keyframes beatBandLayerParticles {
  0% { opacity: 0; transform: scale(0.52) rotate(0deg); }
  10% { opacity: calc(0.72 + var(--beat-band-particles, 1) * 0.06); transform: scale(1.06) rotate(2deg); }
  52% { opacity: 0.3; transform: scale(1.55) rotate(9deg); }
  100% { opacity: 0; transform: scale(1.95) rotate(16deg); }
}

@keyframes beatBandLayerPrism {
  0% { opacity: 0; transform: translateX(0) scale(0.96); }
  12% { opacity: calc(0.64 + var(--beat-band-prism, 1) * 0.06); transform: translateX(calc(var(--beat-pulse-shake, 10px) * -0.28)) scale(1.04); }
  30% { opacity: 0.28; transform: translateX(calc(var(--beat-pulse-shake, 10px) * 0.2)) scale(1.12); }
  100% { opacity: 0; transform: translateX(0) scale(1.24); }
}

@keyframes beatBandLayerShock {
  0% { opacity: 0; transform: scale(0.72); filter: blur(0px); }
  8% { opacity: calc(0.68 + var(--beat-band-shock, 1) * 0.1); transform: scale(1.02); }
  28% { opacity: 0.2; transform: scale(1.42); filter: blur(0.4px); }
  100% { opacity: 0; transform: scale(1.85); filter: blur(1px); }
}

.beatSyncBandEffectPanel {
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
}

.beatSyncBandEffectButton.is-active {
  color: #fff;
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.42);
}

.beatSyncBandEffectButton[data-beat-sync-band-effect="fire"].is-active,
.beatSyncBandEffectButton[data-beat-sync-band-effect="inferno"].is-active,
.beatSyncBandEffectButton[data-beat-sync-band-effect="embers"].is-active {
  box-shadow: 0 0 0 1px rgba(251,146,60,0.18), 0 0 18px rgba(249,115,22,0.18);
}

.beatSyncBandEffectButton[data-beat-sync-band-effect="smoke"].is-active,
.beatSyncBandEffectButton[data-beat-sync-band-effect="heavysmoke"].is-active {
  box-shadow: 0 0 0 1px rgba(226,232,240,0.16), 0 0 18px rgba(148,163,184,0.16);
}

.beatSyncBandEffectButton[data-beat-sync-band-effect="particles"].is-active,
.beatSyncBandEffectButton[data-beat-sync-band-effect="sparkrain"].is-active,
.beatSyncBandEffectButton[data-beat-sync-band-effect="colorburst"].is-active,
.beatSyncBandEffectButton[data-beat-sync-band-effect="prism"].is-active {
  box-shadow: 0 0 0 1px rgba(125,211,252,0.18), 0 0 18px rgba(236,72,153,0.16);
}


/* Beat Sync Band Effects v2.1: valid alpha variables for reliable visibility */
.beatSyncPulseOverlay .beatSyncBandGlow {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,var(--beat-band-glow-alpha, 0.26)), transparent 12%),
    radial-gradient(circle at 50% 50%, var(--beat-pulse-accent, rgba(56,189,248,0.82)), transparent 46%);
}

.beatSyncPulseOverlay .beatSyncBandFire {
  background:
    radial-gradient(circle at 50% 56%, rgba(255,244,176,var(--beat-band-fire-alpha, 0)), transparent 14%),
    radial-gradient(circle at 50% 58%, rgba(255,111,0,var(--beat-band-fire-alpha, 0)), transparent 36%),
    radial-gradient(circle at 50% 48%, rgba(255,25,25,var(--beat-band-fire-alpha, 0)), transparent 66%);
}

.beatSyncPulseOverlay .beatSyncBandSmoke {
  background:
    radial-gradient(circle at 38% 54%, rgba(255,255,255,var(--beat-band-smoke-alpha, 0)), transparent 14%),
    radial-gradient(circle at 58% 42%, rgba(226,232,240,var(--beat-band-smoke-alpha, 0)), transparent 22%),
    radial-gradient(circle at 51% 55%, rgba(148,163,184,var(--beat-band-smoke-alpha, 0)), transparent 52%);
}

.beatSyncPulseOverlay .beatSyncBandParticles {
  background:
    radial-gradient(circle at 24% 38%, rgba(255,255,255,var(--beat-band-particle-alpha, 0)), transparent 1.7%),
    radial-gradient(circle at 37% 62%, rgba(255,255,255,var(--beat-band-particle-alpha, 0)), transparent 1.5%),
    radial-gradient(circle at 51% 34%, rgba(255,255,255,var(--beat-band-particle-alpha, 0)), transparent 1.6%),
    radial-gradient(circle at 64% 66%, rgba(255,255,255,var(--beat-band-particle-alpha, 0)), transparent 1.5%),
    radial-gradient(circle at 78% 44%, rgba(255,255,255,var(--beat-band-particle-alpha, 0)), transparent 1.7%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1), transparent 42%);
}

.beatSyncPulseOverlay .beatSyncBandPrism {
  background:
    linear-gradient(90deg,
      rgba(255,0,128,var(--beat-band-prism-alpha, 0)),
      rgba(255,196,0,var(--beat-band-prism-alpha, 0)),
      rgba(0,214,255,var(--beat-band-prism-alpha, 0)),
      rgba(124,58,237,var(--beat-band-prism-alpha, 0)),
      rgba(34,197,94,var(--beat-band-prism-alpha, 0))),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.14), transparent 42%);
}

.beatSyncPulseOverlay .beatSyncBandShock {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,var(--beat-band-shock-alpha, 0)), transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,var(--beat-band-shock-alpha, 0)), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,var(--beat-band-shock-alpha, 0)), transparent 68%);
}

/* Media drag cleanup hardening: stale cursor ghosts must never block the editor. */
.mediaDragCursorGhost {
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.mediaDragCursorGhost:not(.is-visible) {
  left: -10000px !important;
  top: -10000px !important;
}


/* Beat Sync compact paged popup: clean Apple/Figma style */
.beatSyncPopover {
  width: 600px;
  height: 350px;
  max-height: 350px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  color: rgba(248, 250, 252, 0.96);
  background:
    linear-gradient(180deg, rgba(18, 24, 38, 0.98), rgba(11, 15, 24, 0.985));
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(1.08);
  overflow: hidden;
}

.beatSyncPopoverHeader {
  min-height: 34px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  align-items: center;
}

.beatSyncPopoverHeader strong {
  font-size: 16px;
  letter-spacing: -0.02em;
}

.beatSyncClose {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.beatSyncPageTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.beatSyncPageTab {
  min-width: 0;
  min-height: 45px;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(226, 232, 240, 0.78);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.beatSyncPageTab:hover,
.beatSyncPageTab:focus-visible,
.beatSyncPageTab.is-active {
  color: #ffffff;
  border-color: rgba(125, 211, 252, 0.28);
  background: rgba(96, 165, 250, 0.13);
  outline: none;
}

.beatSyncPageTab.is-active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(2, 6, 23, 0.18);
}

.beatSyncTabIcon {
  width: 22px;
  height: 22px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #bae6fd;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px;
  line-height: 1;
}

.beatSyncPageTab span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.beatSyncPageTab strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.beatSyncPageTab small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(203, 213, 225, 0.58);
  font-size: 9px;
  font-weight: 650;
}

.beatSyncPages {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.beatSyncPage {
  height: 100%;
  min-height: 0;
  display: none;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
}

.beatSyncPage.is-active {
  display: grid;
}

.beatSyncPage[hidden] {
  display: none !important;
}

.beatSyncPageBody {
  min-height: 0;
  display: grid;
  gap: 9px;
  align-content: start;
  overflow: auto;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}

.beatSyncPageBody::-webkit-scrollbar {
  width: 7px;
}

.beatSyncPageBody::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
}

.beatSyncPageTitle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 0 1px;
}

.beatSyncPageIcon {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #e0f2fe;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.24), rgba(59, 130, 246, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.beatSyncPageTitle strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.beatSyncPageTitle small {
  display: block;
  margin-top: 2px;
  color: rgba(203, 213, 225, 0.64);
  font-size: 10px;
  font-weight: 650;
}

.beatSyncPageFooter {
  min-height: 38px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.beatSyncFooterButton {
  min-width: 82px;
  min-height: 30px;
  padding: 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.beatSyncFooterButton:hover,
.beatSyncFooterButton:focus-visible {
  border-color: rgba(125, 211, 252, 0.34);
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
  outline: none;
}

.beatSyncFooterButton.is-primary {
  border-color: rgba(56, 189, 248, 0.34);
  color: #f8fafc;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.34), rgba(37, 99, 235, 0.28));
}

.beatSyncPage .beatSyncBandGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.beatSyncPage .beatSyncBandButton {
  min-height: 52px;
  padding: 8px;
  border-radius: 13px;
}

.beatSyncPage .beatSyncAccuracyPanel,
.beatSyncPage .beatSyncMarkerEditor,
.beatSyncPage .beatSyncPulsePanel,
.beatSyncPage .beatSyncSpectrumReactor,
.beatSyncPage .beatSyncBandEffectPanel,
.beatSyncPage .beatSyncQaPanel,
.beatSyncPage .beatSyncSummary {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.beatSyncPage .beatSyncAccuracyPanel,
.beatSyncPage .beatSyncMarkerEditor,
.beatSyncPage .beatSyncPulsePanel,
.beatSyncPage .beatSyncSpectrumReactor,
.beatSyncPage .beatSyncBandEffectPanel,
.beatSyncPage .beatSyncQaPanel,
.beatSyncPage .beatSyncActions {
  display: grid;
  gap: 8px;
}

.beatSyncPage .beatSyncPulsePresetGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.beatSyncPage .beatSyncPulsePresetButton {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 12px;
}

.beatSyncPage .beatSyncPulsePresetButton span {
  display: none;
}

.beatSyncPage .beatSyncBandEffectRow {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.beatSyncPage .beatSyncBandEffectName {
  padding-top: 6px;
  color: rgba(226, 232, 240, 0.76);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.beatSyncPage .beatSyncBandEffectGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.beatSyncPage .beatSyncBandEffectButton {
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
}

.beatSyncPage .beatSyncQaStats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.beatSyncPage .beatSyncActions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .beatSyncPopover {
    width: calc(100vw - 24px) !important;
    height: min(420px, calc(100vh - 24px)) !important;
    max-height: calc(100vh - 24px) !important;
  }

  .beatSyncPageTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .beatSyncPage .beatSyncBandGrid,
  .beatSyncPage .beatSyncPulsePresetGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Beat Sync smooth preview / fullscreen performance polish */
.previewFrame,
.previewFrame.is-beat-woofer {
  contain: paint;
}

.previewFrame.is-beat-woofer #previewVideo,
.previewFrame.is-beat-woofer #standbyPreviewVideo,
.previewFrame.is-beat-woofer #nativePreviewCanvas,
.previewFrame.is-beat-woofer #scrubPreviewCanvas,
.previewFrame.is-beat-woofer #previewFallbackImage,
.previewFrame.is-beat-woofer #previewImage,
.previewFrame.is-beat-woofer #spectrumCanvas,
.previewFrame.is-beat-woofer #textOverlay {
  will-change: transform, filter;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.beatSyncPulseOverlay,
.beatSyncPulseOverlay *,
.previewFrame.is-beat-woofer::before,
.previewFrame.is-beat-woofer::after {
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.previewFrame:fullscreen,
.previewFrame:-webkit-full-screen {
  background: #000;
  contain: paint;
}

.previewFrame:fullscreen .beatSyncPulseOverlay,
.previewFrame:-webkit-full-screen .beatSyncPulseOverlay {
  transform: translateZ(0);
}

.beatSyncPopover {
  contain: layout paint style;
}


/* Timeline instant-zoom performance polish */
.timelineTracks {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.timelineTrack {
  contain: layout paint style;
}

.timelineClip {
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.clipThumbStrip,
.clipThumbStrip-canvas,
.clipThumbCanvas {
  contain: layout paint style;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.clipThumbStrip-canvas {
  pointer-events: none;
  isolation: isolate;
}

body.is-timeline-instant-zooming .clipThumbStrip,
body.is-timeline-instant-zooming .clipThumbStrip-canvas,
body.is-timeline-instant-zooming .clipThumbCanvas,
.editorApp.is-timeline-instant-zooming .clipThumbStrip,
.editorApp.is-timeline-instant-zooming .clipThumbStrip-canvas,
.editorApp.is-timeline-instant-zooming .clipThumbCanvas {
  filter: none;
  image-rendering: auto;
}


/* === Codex patch: polished yellow playback clock === */
.timelineTimeGroup {
  --clock-current-yellow: #ffd84d;
  --clock-current-yellow-strong: #ffef8a;
  --clock-current-glow: rgba(250, 204, 21, 0.28);
  position: relative;
  isolation: isolate;
  font-variant-numeric: tabular-nums;
}

.timelineTimeCurrent {
  display: inline-block;
  min-width: 7.2ch;
  color: var(--clock-current-yellow) !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
  text-shadow:
    0 0 7px rgba(250, 204, 21, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.32);
  transition:
    color 140ms ease,
    text-shadow 140ms ease,
    transform 140ms ease,
    filter 140ms ease;
  will-change: transform, filter;
}

.timelineTimeCurrent.is-clock-playing,
.timelineTimeGroup.is-clock-active .timelineTimeCurrent {
  color: var(--clock-current-yellow-strong) !important;
  text-shadow:
    0 0 10px rgba(250, 204, 21, 0.34),
    0 0 20px rgba(250, 204, 21, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.38);
  filter: saturate(1.06);
}

.timelineTimeGroup.is-clock-active::before {
  content: "";
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 7.9ch;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.16), transparent 68%),
    linear-gradient(180deg, rgba(250, 204, 21, 0.11), rgba(250, 204, 21, 0.025));
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}

.timelineTimeCurrent.is-clock-tick {
  animation: timelineClockSoftTick 170ms cubic-bezier(0.22, 0.9, 0.28, 1);
}

.timelineTimeDivider {
  color: rgba(148, 154, 166, 0.72) !important;
  transition: color 140ms ease;
}

.timelineTimeTotal {
  color: rgba(167, 183, 204, 0.88) !important;
  font-weight: 760;
  transition: color 140ms ease;
}

.editorApp[data-theme="dark"] .timelineTimeCurrent,
.editorApp[data-theme="night"] .timelineTimeCurrent {
  color: var(--clock-current-yellow) !important;
}

.editorApp[data-theme="dark"] .timelineTimeCurrent.is-clock-playing,
.editorApp[data-theme="night"] .timelineTimeCurrent.is-clock-playing,
.editorApp[data-theme="dark"] .timelineTimeGroup.is-clock-active .timelineTimeCurrent,
.editorApp[data-theme="night"] .timelineTimeGroup.is-clock-active .timelineTimeCurrent {
  color: var(--clock-current-yellow-strong) !important;
}

@keyframes timelineClockSoftTick {
  0% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-0.6px) scale(1.028);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timelineTimeCurrent.is-clock-tick {
    animation: none;
  }

  .timelineTimeCurrent {
    transition: color 120ms ease, text-shadow 120ms ease;
  }
}


/* Batch 1: spectrum is backgroundless.
   The preview player stays black; spectrum is transparent overlay only. */
.previewFrame,
.editorApp[data-theme="dark"] .previewFrame,
.editorApp[data-theme="night"] .previewFrame,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .previewFrame,
.editorApp.is-spectrum-off .previewFrame {
  background: #000000 !important;
}

#spectrumCanvas {
  background: transparent !important;
}


/* Export settings modal — professional Batch 2 */
.exportSettingsModalOpen {
  overflow: hidden;
}

.exportSettingsOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.16), transparent 30%),
    rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.exportSettingsOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.exportSettingsOverlay[hidden] {
  display: none !important;
}

.exportSettingsDialog {
  width: min(1080px, calc(100vw - 44px));
  max-height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  color: #e5f0ff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92)),
    rgba(15, 23, 42, 0.98);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(18px) scale(0.985);
  transition: transform 150ms ease;
}

.exportSettingsOverlay.is-open .exportSettingsDialog {
  transform: translateY(0) scale(1);
}

.exportSettingsHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.14), transparent 45%),
    rgba(15, 23, 42, 0.72);
}

.exportSettingsEyebrow {
  margin: 0 0 6px;
  color: #67e8f9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.exportSettingsHeader h2 {
  margin: 0;
  color: #f8fbff;
  font-size: 24px;
  line-height: 1.15;
}

.exportSettingsSubtitle {
  margin: 8px 0 0;
  color: #94a3b8;
  font-size: 13px;
}

.exportSettingsClose {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.72);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.exportSettingsClose:hover {
  color: #fff;
  border-color: rgba(125, 211, 252, 0.45);
  background: rgba(30, 41, 59, 0.9);
}

.exportSettingsBody {
  min-height: 0;
  display: grid;
  grid-template-columns: 250px 1fr;
  overflow: hidden;
}

.exportSettingsTabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-right: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(2, 6, 23, 0.22);
}

.exportSettingsTabs button {
  display: grid;
  gap: 4px;
  padding: 15px 16px;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.68);
  cursor: pointer;
}

.exportSettingsTabs button:hover,
.exportSettingsTabs button.is-active {
  border-color: rgba(103, 232, 249, 0.48);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(20, 184, 166, 0.13)),
    rgba(15, 23, 42, 0.88);
  box-shadow: 0 14px 34px rgba(14, 165, 233, 0.12);
}

.exportSettingsTabs span {
  font-size: 15px;
  font-weight: 850;
}

.exportSettingsTabs small {
  color: #94a3b8;
  font-size: 11px;
}

.exportSettingsPages {
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.exportSettingsPage {
  display: none;
}

.exportSettingsPage.is-active {
  display: block;
}

.exportSettingsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.exportSettingCard,
.exportSettingSwitch {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.64));
}

.exportSettingCard > span,
.exportSettingSwitch > span {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.02em;
}

.exportSettingCard select,
.exportSettingCard input[type="number"],
.exportSettingCard input[type="range"] {
  width: 100%;
  min-height: 38px;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 13px;
  background: rgba(2, 6, 23, 0.56);
  outline: none;
}

.exportSettingCard select,
.exportSettingCard input[type="number"] {
  padding: 0 12px;
}

.exportSettingCard input[type="range"] {
  min-height: 24px;
  accent-color: #22d3ee;
}

.exportSettingCard output {
  color: #facc15;
  font-weight: 900;
  font-size: 12px;
}

.exportSettingSwitch {
  min-height: 70px;
  grid-template-columns: auto 1fr;
  align-items: center;
  align-content: center;
}

.exportSettingSwitch input {
  width: 18px;
  height: 18px;
  accent-color: #22d3ee;
}

.exportSettingsNotice {
  margin: 0 0 14px;
  padding: 14px 16px;
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 18px;
  background: rgba(5, 46, 22, 0.28);
  font-size: 13px;
  font-weight: 700;
}

.exportSettingsFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.82);
}

.exportSettingsFooterActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exportSettingsGhost,
.exportSettingsSecondary,
.exportSettingsPrimary {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 15px;
  font-weight: 900;
  cursor: pointer;
}

.exportSettingsGhost {
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.68);
}

.exportSettingsSecondary {
  color: #dbeafe;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(30, 41, 59, 0.76);
}

.exportSettingsPrimary {
  color: #042f2e;
  border: 0;
  background:
    linear-gradient(135deg, #67e8f9, #22d3ee 44%, #34d399);
  box-shadow: 0 16px 32px rgba(34, 211, 238, 0.2);
}

.exportSettingsGhost:hover,
.exportSettingsSecondary:hover,
.exportSettingsPrimary:hover {
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .exportSettingsDialog {
    max-height: calc(100vh - 24px);
  }

  .exportSettingsBody {
    grid-template-columns: 1fr;
  }

  .exportSettingsTabs {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  }

  .exportSettingsTabs button {
    min-width: 170px;
  }

  .exportSettingsGrid {
    grid-template-columns: 1fr;
  }
}


/* Export progress modal — Batch 3 */
.exportProgressModalOpen {
  overflow: hidden;
}

.exportProgressOverlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.16), transparent 32%),
    rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.exportProgressOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.exportProgressOverlay[hidden] {
  display: none !important;
}

.exportProgressDialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 16px;
  padding: 22px;
  color: #e5f0ff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 13, 28, 0.96)),
    rgba(15, 23, 42, 0.98);
  box-shadow:
    0 30px 92px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(18px) scale(0.985);
  transition: transform 160ms ease;
}

.exportProgressOverlay.is-open .exportProgressDialog {
  transform: translateY(0) scale(1);
}

.exportProgressHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.exportProgressEyebrow {
  margin: 0 0 5px;
  color: #86efac;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.exportProgressHeader h2 {
  margin: 0;
  color: #f8fbff;
  font-size: 24px;
  line-height: 1.12;
}

.exportProgressSubtitle {
  margin: 8px 0 0;
  color: #94a3b8;
  font-size: 13px;
  word-break: break-word;
}

.exportProgressBadge {
  min-width: 74px;
  padding: 12px 14px;
  text-align: center;
  color: #052e16;
  border-radius: 18px;
  background: linear-gradient(135deg, #bbf7d0, #22c55e);
  box-shadow: 0 14px 34px rgba(34, 197, 94, 0.24);
  font-size: 20px;
  font-weight: 950;
}

.exportProgressPreviewShell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.exportProgressPreviewFrame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.exportProgressLiveCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
  background: #000;
}

.exportProgressPreviewLabel {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 6px 10px;
  color: #dbeafe;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 800;
}

.exportProgressStripShell {
  display: grid;
  gap: 8px;
}

.exportProgressStrip {
  --export-progress: 0%;
  position: relative;
  min-height: 86px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  background: rgba(2, 6, 23, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.exportProgressThumbs {
  position: absolute;
  inset: 0;
  display: flex;
}

.exportProgressThumb {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  border-right: 1px solid rgba(15, 23, 42, 0.8);
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.92));
  background-size: cover;
  background-position: center;
  filter: saturate(0.82) brightness(0.72);
}

.exportProgressThumb.has-image {
  filter: saturate(0.95) brightness(0.74);
}

.exportProgressGreenOverlay {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--export-progress);
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.56), rgba(16, 185, 129, 0.42)),
    rgba(34, 197, 94, 0.22);
  box-shadow: 8px 0 24px rgba(34, 197, 94, 0.24);
  transition: width 160ms linear;
  mix-blend-mode: screen;
  pointer-events: none;
}

.exportProgressPercent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f8fafc;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.8),
    0 0 18px rgba(34, 197, 94, 0.55);
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.exportProgressStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.exportProgressStats span {
  min-width: 0;
  padding: 10px 12px;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 15px;
  background: rgba(15, 23, 42, 0.62);
  font-size: 11px;
  font-weight: 800;
}

.exportProgressStats b {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.exportProgressFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.exportProgressActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exportProgressGhost,
.exportProgressSecondary,
.exportProgressPrimary {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 15px;
  font-weight: 950;
  cursor: pointer;
}

.exportProgressGhost {
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.28);
  background: rgba(69, 10, 10, 0.32);
}

.exportProgressSecondary {
  color: #dbeafe;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(30, 41, 59, 0.78);
}

.exportProgressPrimary {
  color: #052e16;
  border: 0;
  background: linear-gradient(135deg, #bbf7d0, #22c55e);
  box-shadow: 0 16px 32px rgba(34, 197, 94, 0.18);
}

.exportProgressPrimary:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.54;
}

.exportProgressOverlay.is-complete .exportProgressEyebrow {
  color: #bbf7d0;
}

.exportProgressOverlay.is-complete .exportProgressHeader h2::after {
  content: " Complete";
  color: #86efac;
}

.exportProgressOverlay.is-error .exportProgressBadge,
.exportProgressOverlay.is-cancelled .exportProgressBadge {
  color: #450a0a;
  background: linear-gradient(135deg, #fecaca, #fb7185);
}

@media (max-width: 720px) {
  .exportProgressDialog {
    padding: 16px;
  }

  .exportProgressStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exportProgressFooter {
    align-items: stretch;
    flex-direction: column;
  }

  .exportProgressActions {
    justify-content: flex-end;
  }
}


/* Export settings modal — CapCut-style minimal sheet */
.exportSettingsOverlay {
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(10px);
}

.exportSettingsDialog--capcut {
  width: min(760px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 24px));
  border-radius: 10px;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #202124;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.exportSettingsHeader--compact {
  min-height: 50px;
  padding: 13px 16px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #202124;
}

.exportSettingsHeader--compact h2 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #f8fafc;
}

.exportSettingsHeader--compact .exportSettingsSubtitle {
  margin-top: 3px;
  color: #8d929b;
  font-size: 11px;
}

.exportSettingsDialog--capcut .exportSettingsClose {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border-color: transparent;
  color: #aeb4bd;
  background: transparent;
  font-size: 18px;
}

.exportSettingsDialog--capcut .exportSettingsClose:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.exportSettingsBody.exportSettingsSheet {
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  padding: 16px;
  overflow: auto;
  background: #202124;
}

.exportCoverPane {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.exportCoverPreview {
  --export-preview-progress: 0%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent),
    #101114;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.exportCoverPreview img {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
}

.exportCoverPreview.has-cover img {
  display: block;
}

.exportCoverPlaceholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #747b86;
  font-size: 12px;
}

.exportCoverPreview.has-cover .exportCoverPlaceholder {
  display: none;
}

.exportCoverEdit {
  position: absolute;
  top: 9px;
  left: 9px;
  border: 0;
  border-radius: 5px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.48);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

.exportCoverLiveCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  display: none;
  object-fit: contain;
  background: #05070b;
}

.exportCoverPreview.has-live-render .exportCoverLiveCanvas {
  display: block;
}

.exportCoverRenderWash {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 3;
  width: var(--export-preview-progress);
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.58), rgba(14, 165, 233, 0.34)),
    rgba(29, 78, 216, 0.22);
  box-shadow:
    10px 0 26px rgba(59, 130, 246, 0.28),
    inset -1px 0 0 rgba(191, 219, 254, 0.46);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: width 160ms linear, opacity 160ms ease;
}

.exportCoverRenderPercent {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  place-items: center;
  color: #f8fbff;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.055em;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.88),
    0 0 24px rgba(59, 130, 246, 0.75);
  pointer-events: none;
}

.exportCoverRenderStatus {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  display: none;
  max-width: calc(100% - 20px);
  padding: 5px 8px;
  overflow: hidden;
  color: #dbeafe;
  border: 1px solid rgba(147, 197, 253, 0.25);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.exportCoverPreview.has-live-render img,
.exportCoverPreview.has-live-render .exportCoverPlaceholder,
.exportCoverPreview.has-live-render .exportCoverEdit {
  display: none !important;
}

.exportCoverPreview.is-rendering .exportCoverRenderWash,
.exportCoverPreview.is-complete .exportCoverRenderWash,
.exportCoverPreview.is-error .exportCoverRenderWash,
.exportCoverPreview.is-cancelled .exportCoverRenderWash {
  opacity: 1;
}

.exportCoverPreview.is-rendering .exportCoverRenderPercent,
.exportCoverPreview.is-complete .exportCoverRenderPercent,
.exportCoverPreview.is-error .exportCoverRenderPercent,
.exportCoverPreview.is-cancelled .exportCoverRenderPercent {
  display: grid;
}

.exportCoverPreview.is-rendering .exportCoverRenderStatus,
.exportCoverPreview.is-complete .exportCoverRenderStatus,
.exportCoverPreview.is-error .exportCoverRenderStatus,
.exportCoverPreview.is-cancelled .exportCoverRenderStatus {
  display: inline-flex;
}

.exportCoverPreview.is-complete .exportCoverRenderWash {
  background:
    linear-gradient(90deg, rgba(14, 165, 233, 0.58), rgba(34, 211, 238, 0.34)),
    rgba(37, 99, 235, 0.22);
}

.exportCoverPreview.is-error .exportCoverRenderWash,
.exportCoverPreview.is-cancelled .exportCoverRenderWash {
  background:
    linear-gradient(90deg, rgba(239, 68, 68, 0.48), rgba(248, 113, 113, 0.28)),
    rgba(127, 29, 29, 0.2);
}

.exportSettingsDialog--capcut .exportSettingsClose:disabled,
.exportSettingsDialog--capcut .exportSettingsGhost:disabled,
.exportSettingsDialog--capcut .exportSettingsSecondary:disabled,
.exportSettingsDialog--capcut .exportSettingsPrimary:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.exportCoverMeta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 7px;
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
}

.exportCoverMeta strong {
  color: #e5e7eb;
  font-weight: 800;
}

.exportRenderProgressPanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  color: #dbeafe;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), transparent 62%),
    rgba(15, 23, 42, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.exportRenderProgressPanel[hidden],
.exportRenderCompletePanel[hidden] {
  display: none !important;
}

.exportRenderProgressHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.exportRenderProgressHeader strong {
  display: block;
  color: #eff6ff;
  font-size: 13px;
  font-weight: 950;
}

.exportRenderProgressHeader small,
.exportRenderCompletePanel small {
  display: block;
  margin-top: 3px;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 700;
}

.exportRenderProgressHeader > span {
  flex: 0 0 auto;
  color: #bfdbfe;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.32);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 950;
}

.exportRenderProgressStats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
}

.exportRenderProgressStats span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.exportRenderProgressStats strong {
  color: #e0f2fe;
  font-weight: 950;
  text-align: right;
}

.exportRenderCompletePanel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.15), transparent 70%),
    rgba(6, 78, 59, 0.28);
}

.exportRenderCompletePanel > div:first-child > strong {
  display: block;
  color: #bbf7d0;
  font-size: 13px;
  font-weight: 950;
}

.exportRenderCompleteActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exportRenderCompleteActions button {
  min-height: 32px;
  border: 1px solid rgba(134, 239, 172, 0.25);
  border-radius: 10px;
  color: #dcfce7;
  background: rgba(15, 23, 42, 0.54);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.exportRenderCompleteActions button:hover {
  transform: translateY(-1px);
  background: rgba(22, 101, 52, 0.36);
}

.exportRenderCompleteActions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}


.exportSettingsControls {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.exportIdentityGrid {
  display: grid;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}


.exportRenderModeCard {
  display: grid;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(32, 212, 223, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(32, 212, 223, 0.12), rgba(59, 130, 246, 0.08)),
    rgba(15, 23, 42, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.exportRenderModeCard h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.15;
}

.exportRenderModeCard p {
  margin: 3px 0 0;
  color: #aab4c2;
  font-size: 12px;
  line-height: 1.45;
}

.exportRenderModeEyebrow {
  margin: 0 !important;
  color: #67e8f9 !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.exportRenderModeBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exportRenderModeBadges span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  padding: 3px 8px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.58);
  font-size: 11px;
  font-weight: 800;
}

.exportRenderModeCard small {
  color: #8fb8c7;
  font-size: 11px;
  line-height: 1.35;
}

.exportRenderModeGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1180px) {
  .exportRenderModeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .exportRenderModeGrid {
    grid-template-columns: 1fr;
  }
}

.exportRenderModeCard[role="button"] {
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.exportRenderModeCard[role="button"]:hover,
.exportRenderModeCard[role="button"]:focus-visible {
  border-color: rgba(103, 232, 249, 0.6);
  box-shadow:
    0 16px 34px rgba(34, 211, 238, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.exportRenderModeCard.is-selected {
  border-color: rgba(52, 211, 153, 0.62);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(52, 211, 153, 0.1)),
    rgba(15, 23, 42, 0.58);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.exportRenderModeCard--browserpro {
  border-color: rgba(56, 189, 248, 0.28);
}

.exportRenderModeCard--browserpro.is-selected {
  border-color: rgba(56, 189, 248, 0.62);
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(34, 211, 238, 0.12)),
    rgba(15, 23, 42, 0.62);
}

.exportRenderModeCard--local.is-not-ready {
  border-color: rgba(251, 191, 36, 0.34);
}

.exportRenderModeCard--local.is-ready {
  border-color: rgba(34, 197, 94, 0.5);
}

.exportRenderModeCard--local.is-checking {
  border-color: rgba(96, 165, 250, 0.48);
}

.exportLocalHealthGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.22);
}

.exportLocalHealthGrid span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 11px;
  font-weight: 800;
}

.exportLocalHealthGrid strong {
  max-width: 180px;
  color: #fbbf24;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exportLocalHealthGrid strong.is-good {
  color: #86efac;
}

.exportLocalHealthGrid strong.is-bad {
  color: #fca5a5;
}

.exportLocalHealthActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exportLocalHealthActions button {
  min-height: 28px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 0 10px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.62);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.exportLocalHealthActions button:hover {
  border-color: rgba(103, 232, 249, 0.5);
}

.exportLocalHealthActions button[hidden] {
  display: none !important;
}

.exportSettingsPrimary.is-install-engine {
  color: #111827;
  background:
    linear-gradient(135deg, #fde68a, #fbbf24 52%, #f59e0b);
  box-shadow: 0 16px 32px rgba(245, 158, 11, 0.22);
}

@media (max-width: 780px) {
  .exportRenderModeGrid {
    grid-template-columns: 1fr;
  }

  .exportLocalHealthGrid strong {
    max-width: 140px;
  }
}



.exportSettingLine {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #cbd5e1;
  font-size: 12px;
}

.exportSettingLine input,
.exportCompactGrid select,
.exportCompactGrid input[type="number"] {
  min-width: 0;
  height: 30px;
  border: 0;
  border-radius: 5px;
  color: #f8fafc;
  background: #34343a;
  padding: 0 10px;
  font-size: 12px;
  outline: none;
}

.exportSettingLine input:focus,
.exportCompactGrid select:focus,
.exportCompactGrid input[type="number"]:focus {
  box-shadow: 0 0 0 1px #23d3df;
}

.exportSettingPath {
  grid-template-columns: 92px minmax(0, 1fr) 31px;
}

.exportFolderButton {
  width: 31px;
  height: 30px;
  border: 0;
  border-radius: 5px;
  color: #d1d5db;
  background: #34343a;
}

.exportAccordion {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.exportAccordion header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.exportAccordion header small {
  color: #8b949e;
  font-size: 11px;
}

.exportCheckLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f4f7fb;
  font-size: 13px;
  font-weight: 800;
}

.exportCheckLabel input {
  width: 13px;
  height: 13px;
  accent-color: #19d3d8;
}

.exportCompactGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.exportCompactGrid label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #9ca3af;
  font-size: 12px;
}

.exportRangeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.exportRangeRow input[type="range"] {
  width: 100%;
  accent-color: #20d4df;
}

.exportRangeRow output {
  text-align: right;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 800;
}

.exportAdvanced {
  padding: 11px 0 0;
  color: #cbd5e1;
}

.exportAdvanced summary {
  width: max-content;
  cursor: pointer;
  color: #9aa3ae;
  font-size: 12px;
  font-weight: 750;
}

.exportAdvanced[open] summary {
  margin-bottom: 10px;
  color: #e5e7eb;
}

.exportSettingsFooter--capcut {
  min-height: 58px;
  padding: 11px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #202124;
}

.exportFooterStats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #cbd5e1;
  font-size: 12px;
}

.exportFooterStats strong {
  color: #f8fafc;
  font-weight: 800;
}

.exportSettingsDialog--capcut .exportSettingsFooterActions {
  align-items: center;
}

.exportSettingsDialog--capcut .exportSettingsGhost,
.exportSettingsDialog--capcut .exportSettingsSecondary,
.exportSettingsDialog--capcut .exportSettingsPrimary {
  min-width: 72px;
  height: 34px;
  border-radius: 5px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 850;
  box-shadow: none;
}

.exportSettingsDialog--capcut .exportSettingsGhost {
  color: #ffffff;
  background: #4b4b52;
  border-color: transparent;
}

.exportSettingsDialog--capcut .exportSettingsSecondary {
  color: #dbe4ec;
  background: #34343a;
  border-color: transparent;
}

.exportSettingsDialog--capcut .exportSettingsPrimary {
  color: #062225;
  background: #20d4df;
  border-color: transparent;
}

.exportSettingsDialog--capcut .exportSettingsPrimary:hover {
  background: #31e6ef;
  transform: translateY(-1px);
}

@media (max-width: 780px) {
  .exportSettingsBody.exportSettingsSheet {
    grid-template-columns: 1fr;
  }

  .exportCoverPane {
    max-width: 360px;
  }

  .exportSettingLine,
  .exportSettingPath {
    grid-template-columns: 1fr;
  }

  .exportCompactGrid {
    grid-template-columns: 1fr;
  }

  .exportSettingsFooter--capcut {
    align-items: stretch;
  }
}


/* Universal drag/drop ghost polish: valid drop targets should feel gentle and
   readable without pretending an incompatible row body can accept the media. */
.timelineDropGhostRow {
  min-height: var(--track-height, 60px);
  opacity: 0.9;
  transition:
    opacity 110ms ease,
    transform 110ms ease,
    border-color 110ms ease,
    box-shadow 110ms ease;
}

.timelineDropGhostRow .timelineTrackLabel {
  pointer-events: none;
}

.timelineDropPreview {
  transition:
    left 90ms linear,
    width 90ms linear,
    opacity 90ms ease,
    transform 90ms ease;
  opacity: 0.94;
}

.timelineTrack.is-drop-hover .timelineDropPreview {
  opacity: 0.98;
}

.timelineTracks .timelineTrack:not(.is-drop-hover) .timelineDropPreview {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 8px 22px rgba(0, 0, 0, 0.20),
    0 0 14px color-mix(in srgb, var(--track-accent, #34d399) 18%, transparent);
}

body.is-dragging-clip .timelineDropGhostRow,
body.is-media-dragging .timelineDropGhostRow,
body.is-dragging-media .timelineDropGhostRow {
  animation-duration: 90ms;
}


/* Professional timeline clip dragging: the cursor carries only a compact badge;
   the timeline itself owns placement/row ghosts. */
.mediaDragCursorGhost.is-timeline-clip-drag {
  max-width: 180px;
  min-width: 128px;
  min-height: 44px;
  padding: 6px 9px;
  border-color: rgba(45, 212, 191, 0.82);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.9)),
    linear-gradient(90deg, rgba(45, 212, 191, 0.16), rgba(96, 165, 250, 0.12));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(2, 6, 23, 0.36),
    0 0 0 4px rgba(45, 212, 191, 0.12);
  transform: translate3d(0, 0, 0) scale(0.98);
}

.mediaDragCursorGhost.is-timeline-clip-drag .mediaDragCursorThumb {
  width: 42px;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
}

.mediaDragCursorGhost.is-timeline-clip-drag .mediaDragCursorText strong {
  max-width: 112px;
}

.mediaDragCursorFallbackIcon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #67e8f9;
  font-size: 14px;
  font-weight: 800;
  background: rgba(8, 47, 73, 0.72);
}

/* === Codex Step 1 patch: media-panel drag badge stays thumbnail-sized === */
.mediaDragCursorGhost.is-over-media-panel:not(.is-over-timeline) {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: 14px;
  gap: 0;
}

.mediaDragCursorGhost.is-over-media-panel:not(.is-over-timeline) .mediaDragCursorThumb {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.mediaDragCursorGhost.is-over-media-panel:not(.is-over-timeline) .mediaDragCursorText {
  display: none;
}

.mediaDragCursorGhost.is-over-timeline {
  min-width: 186px;
  width: auto;
  height: auto;
}


/* Phase 1 professional selection: selected timeline clips use a yellow editor stroke. */
.timelineClip.is-selected {
  border-color: #facc15 !important;
  box-shadow:
    inset 0 0 0 1px rgba(250, 204, 21, 0.78),
    0 0 0 1px rgba(250, 204, 21, 0.72),
    0 0 16px rgba(250, 204, 21, 0.34),
    var(--timeline-clip-shadow) !important;
}

.timelineClip.is-selected .clipSelectionOverlay {
  background:
    linear-gradient(180deg, rgba(250, 204, 21, 0.16), rgba(250, 204, 21, 0.04)) !important;
  opacity: 1 !important;
}


/* === Codex phase 2: no-jump insert ghosts + professional media drag badge === */
.timelineDropGhostRow.is-overlay-ghost-row {
  position: absolute !important;
  z-index: 18;
  min-height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  contain: layout paint style;
  opacity: 0.96;
  transform: translate3d(0, 0, 0);
}

.timelineDropGhostRow.is-overlay-ghost-row .timelineTrackLabel {
  pointer-events: none;
}

.mediaDragCursorGhost.is-over-media-panel:not(.is-over-timeline) {
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  height: 62px;
  padding: 6px;
  gap: 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.92)),
    rgba(15, 23, 42, 0.9);
  box-shadow:
    0 12px 24px rgba(2, 6, 23, 0.24),
    0 0 0 1px rgba(148, 163, 184, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.09);
}

.mediaDragCursorGhost.is-over-media-panel:not(.is-over-timeline) .mediaDragCursorThumb {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}

.mediaDragCursorGhost.is-over-media-panel:not(.is-over-timeline) .mediaDragCursorText {
  display: none !important;
}

.mediaDragCursorGhost.is-over-timeline {
  min-width: 160px;
  max-width: 260px;
  border-color: rgba(250, 204, 21, 0.34);
}

body.is-custom-media-asset-dragging .timelineTrack:not(.is-drop-hover) {
  transition: none !important;
}

body.is-custom-media-asset-dragging .timelineTrack.is-drop-hover {
  transform: none !important;
}

body.is-custom-media-asset-dragging .timelineTrack.is-drop-hover::after {
  animation: none !important;
}


/* === Codex premium empty-lane hover fix ===
   Empty timeline space should stay calm. It should not glow, open, or feel like
   a drop target just because the mouse is hovering there. Drop/row ghosts are
   only interactive while a real media/clip drag session is active. */
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .timelineDropInsertSpacer,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .timelineDropTopSpacer,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .timelineDropBottomSpacer {
  pointer-events: none !important;
  opacity: 0.54 !important;
  border-color: rgba(56, 189, 248, 0.12) !important;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.14) 0, rgba(15, 23, 42, 0.08) var(--track-label-width, 108px), rgba(56, 189, 248, 0.025) var(--track-label-width, 108px), rgba(56, 189, 248, 0.012) 100%),
    transparent !important;
  box-shadow: none !important;
}

body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .timelineDropInsertSpacer:hover,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .timelineDropTopSpacer:hover,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .timelineDropBottomSpacer:hover {
  opacity: 0.54 !important;
  border-color: rgba(56, 189, 248, 0.12) !important;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.14) 0, rgba(15, 23, 42, 0.08) var(--track-label-width, 108px), rgba(56, 189, 248, 0.025) var(--track-label-width, 108px), rgba(56, 189, 248, 0.012) 100%),
    transparent !important;
  box-shadow: none !important;
}

body.is-custom-media-asset-dragging .timelineDropInsertSpacer,
body.is-custom-media-asset-dragging .timelineDropTopSpacer,
body.is-custom-media-asset-dragging .timelineDropBottomSpacer,
body.is-dragging-clip .timelineDropInsertSpacer,
body.is-dragging-clip .timelineDropTopSpacer,
body.is-dragging-clip .timelineDropBottomSpacer {
  pointer-events: auto !important;
}

body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover {
  border-color: var(--timeline-row-stroke) !important;
  background: var(--timeline-row-bg-even) !important;
  box-shadow: inset 0 -0.5px 0 var(--timeline-row-divider) !important;
}

body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack:nth-child(odd):not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover {
  background: var(--timeline-row-bg-odd) !important;
}

body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover::before,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover .timelineTrackLabel {
  background: var(--timeline-row-label-bg) !important;
}

body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp[data-theme="dark"] .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp[data-theme="night"] .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover {
  border-color: var(--timeline-row-soft-line) !important;
  background:
    linear-gradient(
      90deg,
      var(--timeline-row-head) 0,
      var(--timeline-row-head) var(--track-label-width, 108px),
      var(--timeline-row-lane-even) var(--track-label-width, 108px),
      var(--timeline-row-lane-even) 100%
    ) !important;
  box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.026) !important;
}

body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp[data-theme="dark"] .timelineTrack:nth-child(odd):not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp[data-theme="night"] .timelineTrack:nth-child(odd):not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover {
  background:
    linear-gradient(
      90deg,
      var(--timeline-row-head) 0,
      var(--timeline-row-head) var(--track-label-width, 108px),
      var(--timeline-row-lane-odd) var(--track-label-width, 108px),
      var(--timeline-row-lane-odd) 100%
    ) !important;
}

body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp[data-theme="dark"] .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover::before,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp[data-theme="dark"] .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover .timelineTrackLabel,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp[data-theme="night"] .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover::before,
body:not(.is-custom-media-asset-dragging):not(.is-dragging-clip):not(.is-media-dragging):not(.is-dragging-media) .editorApp[data-theme="night"] .timelineTrack:not(.is-track-selected):not(.is-drop-hover):not(.is-clip-drag-hover):hover .timelineTrackLabel {
  background: var(--timeline-row-head) !important;
}


/* Final custom timeline horizontal scrollbar redesign.
   Integrated arrows are attached to the scroll thumb and only reveal on hover/hold. */
.timelineHScroll {
  height: 27px !important;
  padding: 5px 8px !important;
  border-top-color: rgba(96, 111, 132, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.16), rgba(15, 23, 42, 0.08)),
    linear-gradient(180deg, #e9f0f7, #dce7f1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -5px 8px rgba(15, 23, 42, 0.10) !important;
  overflow: visible !important;
}

.timelineHScroll::before {
  left: var(--timeline-hscroll-left) !important;
  right: var(--timeline-hscroll-right, 8px) !important;
  height: 18px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(180deg, rgba(202, 213, 226, 0.96), rgba(179, 193, 209, 0.96)) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(15, 23, 42, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

.timelineHScroll:hover::before,
.is-dragging-timeline-scroll .timelineHScroll::before {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.50),
    inset 0 -1px 1px rgba(15, 23, 42, 0.10),
    0 0 10px rgba(125, 211, 252, 0.16) !important;
}

.timelineHScrollThumb {
  height: 18px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  background: linear-gradient(180deg, #94a8bf, #60758e) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(15, 23, 42, 0.10),
    0 2px 5px rgba(15, 23, 42, 0.16) !important;
  transition:
    left 115ms cubic-bezier(.2,.8,.2,1),
    width 115ms cubic-bezier(.2,.8,.2,1),
    background 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    height 140ms ease !important;
}

.timelineHScroll:hover .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 18px !important;
  border-color: rgba(255, 255, 255, 0.52) !important;
  background: linear-gradient(180deg, #9eb0c7, #6c829a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(15, 23, 42, 0.12),
    0 0 12px rgba(125, 211, 252, 0.20),
    0 2px 7px rgba(15, 23, 42, 0.18) !important;
}

.is-dragging-timeline-scroll .timelineHScrollThumb {
  transition: none !important;
}

.timelineHScrollButton {
  top: 50% !important;
  z-index: 5 !important;
  width: 24px !important;
  height: 18px !important;
  border-radius: 0 !important;
  border: 0 !important;
  color: rgba(241, 245, 249, 0.96) !important;
  background: linear-gradient(180deg, #879bb3, #566b83) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(15, 23, 42, 0.12) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scaleX(0.94) !important;
  transition:
    left 115ms cubic-bezier(.2,.8,.2,1),
    opacity 120ms ease,
    color 120ms ease,
    background 120ms ease,
    filter 120ms ease,
    transform 120ms ease !important;
}

.timelineHScroll:hover .timelineHScrollButton,
.timelineHScrollButton.is-pressing,
.is-dragging-timeline-scroll .timelineHScrollButton {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) scaleX(1) !important;
}

.timelineHScrollButton:hover {
  color: #ffffff !important;
  background: linear-gradient(180deg, #7e96b2, #4f667f) !important;
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.22)) !important;
}

.timelineHScrollButton.is-pressing,
.timelineHScrollButton:active {
  color: #ffffff !important;
  background: linear-gradient(180deg, #52667d, #33485f) !important;
  filter: none !important;
  transform: translateY(-50%) scaleX(0.98) !important;
}

.timelineHScrollButton:disabled {
  opacity: 0.22 !important;
  color: rgba(148, 163, 184, 0.62) !important;
  background: linear-gradient(180deg, rgba(100, 116, 139, 0.38), rgba(71, 85, 105, 0.34)) !important;
  box-shadow: none !important;
  cursor: default !important;
}

.timelineHScrollButtonLeft {
  border-right: 1px solid rgba(15, 23, 42, 0.14) !important;
}

.timelineHScrollButtonRight {
  border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.editorApp[data-theme="dark"] .timelineHScroll,
.editorApp[data-theme="night"] .timelineHScroll {
  border-top-color: rgba(148, 163, 184, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(51, 65, 85, 0.20), rgba(2, 6, 23, 0.10)),
    #121a25 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -5px 8px rgba(2, 6, 23, 0.22) !important;
}

.editorApp[data-theme="dark"] .timelineHScroll::before,
.editorApp[data-theme="night"] .timelineHScroll::before {
  height: 18px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(35, 48, 64, 0.96), rgba(23, 32, 45, 0.96)) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px 1px rgba(2, 6, 23, 0.30),
    0 1px 4px rgba(2, 6, 23, 0.20) !important;
}

.editorApp[data-theme="dark"] .timelineHScroll:hover::before,
.editorApp[data-theme="night"] .timelineHScroll:hover::before,
.editorApp[data-theme="dark"] .is-dragging-timeline-scroll .timelineHScroll::before,
.editorApp[data-theme="night"] .is-dragging-timeline-scroll .timelineHScroll::before {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(2, 6, 23, 0.34),
    0 0 12px rgba(125, 211, 252, 0.12) !important;
}

.editorApp[data-theme="dark"] .timelineHScrollThumb,
.editorApp[data-theme="night"] .timelineHScrollThumb {
  height: 18px !important;
  border-radius: 3px !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  background: linear-gradient(180deg, #8da0b8, #61758c) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(2, 6, 23, 0.22),
    0 2px 6px rgba(2, 6, 23, 0.32) !important;
}

.editorApp[data-theme="dark"] .timelineHScroll:hover .timelineHScrollThumb,
.editorApp[data-theme="dark"] .is-dragging-timeline-scroll .timelineHScrollThumb,
.editorApp[data-theme="night"] .timelineHScroll:hover .timelineHScrollThumb,
.editorApp[data-theme="night"] .is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 18px !important;
  background: linear-gradient(180deg, #9eb0c7, #74879d) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(2, 6, 23, 0.24),
    0 0 13px rgba(125, 211, 252, 0.18),
    0 2px 7px rgba(2, 6, 23, 0.36) !important;
}

.editorApp[data-theme="dark"] .timelineHScrollButton,
.editorApp[data-theme="night"] .timelineHScrollButton {
  color: rgba(241, 245, 249, 0.95) !important;
  background: linear-gradient(180deg, #7b8fa7, #52667d) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(2, 6, 23, 0.22) !important;
}

.editorApp[data-theme="dark"] .timelineHScrollButton:hover,
.editorApp[data-theme="night"] .timelineHScrollButton:hover {
  background: linear-gradient(180deg, #8da3bd, #627890) !important;
  filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.18)) !important;
}

.editorApp[data-theme="dark"] .timelineHScrollButton.is-pressing,
.editorApp[data-theme="dark"] .timelineHScrollButton:active,
.editorApp[data-theme="night"] .timelineHScrollButton.is-pressing,
.editorApp[data-theme="night"] .timelineHScrollButton:active {
  background: linear-gradient(180deg, #4a5f76, #2f4358) !important;
  filter: none !important;
}


/* Final scrollbar vertical lift fix: reserve enough grid space and raise the custom bar
   so the thicker thumb/attached arrows are no longer clipped at the bottom edge. */
.timelineCanvas {
  grid-template-rows: 22px minmax(0, 1fr) 31px !important;
}

.timelineHScroll {
  align-self: start !important;
  margin-top: -5px !important;
}

/* Final unified premium scrollbar system: applies the same thicker flat-thumb style
   to the editor's visible native scrollbars, with integrated arrow buttons. */
.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
) {
  scrollbar-width: auto !important;
  scrollbar-color: #6f8399 rgba(15, 23, 42, 0.26) !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar {
  width: 18px !important;
  height: 18px !important;
  background: rgba(15, 23, 42, 0.20) !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-track {
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(31, 41, 55, 0.28), rgba(15, 23, 42, 0.28)),
    rgba(15, 23, 42, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(2, 6, 23, 0.20) !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-thumb {
  min-height: 54px !important;
  min-width: 54px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.24) !important;
  background:
    linear-gradient(180deg, #98aabe, #61758c) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 1px 2px rgba(2, 6, 23, 0.24) !important;
  transition: background 140ms ease, box-shadow 140ms ease, border-color 140ms ease !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-thumb:hover {
  border-color: rgba(226, 232, 240, 0.34) !important;
  background:
    linear-gradient(180deg, #a9bad0, #72879f) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 8px rgba(125, 211, 252, 0.18),
    0 2px 4px rgba(2, 6, 23, 0.24) !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-thumb:active {
  border-color: rgba(226, 232, 240, 0.26) !important;
  background:
    linear-gradient(180deg, #556a82, #34485f) !important;
  box-shadow:
    inset 0 1px 2px rgba(2, 6, 23, 0.34),
    0 0 4px rgba(125, 211, 252, 0.10) !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-button {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.14) !important;
  background-color: #5f748d !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 15px 15px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(2, 6, 23, 0.20) !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-button:hover {
  background-color: #788ea6 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 7px rgba(125, 211, 252, 0.16) !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-button:active {
  background-color: #33485f !important;
  box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.38) !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-button:disabled {
  opacity: 0.35 !important;
  background-color: rgba(71, 85, 105, 0.44) !important;
  box-shadow: none !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 5.8 5.2 10h7.6L9 5.8Z' fill='%23e2e8f0'/%3E%3C/svg%3E") !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 12.2 5.2 8h7.6L9 12.2Z' fill='%23e2e8f0'/%3E%3C/svg%3E") !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5.8 9 10 5.2v7.6L5.8 9Z' fill='%23e2e8f0'/%3E%3C/svg%3E") !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M12.2 9 8 5.2v7.6L12.2 9Z' fill='%23e2e8f0'/%3E%3C/svg%3E") !important;
}

.editorApp :where(
  .panelPane,
  .assetDetailsPane,
  .assetDetailsContent,
  .inspectorPane,
  .timelineDropZone,
  .ratioMenu,
  .beatSyncPopover,
  .beatSyncPageBody,
  .exportSettingsPages,
  .exportSettingsTabs,
  .exportSettingsBody.exportSettingsSheet
)::-webkit-scrollbar-corner {
  background: rgba(15, 23, 42, 0.32) !important;
}

/* Keep the custom timeline bottom scrollbar visually aligned with the unified native style. */
.timelineHScroll {
  height: 29px !important;
  padding: 6px 8px !important;
}

.timelineHScroll::before {
  height: 16px !important;
  border-radius: 0 !important;
}

.timelineHScrollThumb {
  height: 16px !important;
  border-radius: 0 !important;
  transition:
    left 120ms ease,
    width 120ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease !important;
}

.timelineHScroll:hover .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 17px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 9px rgba(125, 211, 252, 0.16),
    0 2px 5px rgba(2, 6, 23, 0.20) !important;
}

.timelineHScrollButton {
  height: 17px !important;
  border-radius: 0 !important;
  transition:
    left 120ms ease,
    opacity 120ms ease,
    background 120ms ease,
    filter 120ms ease,
    transform 120ms ease !important;
}

.timelineHScrollButton:hover {
  filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.20)) !important;
}

.timelineHScrollButton.is-pressing,
.timelineHScrollButton:active {
  background: linear-gradient(180deg, #4d627a, #2f4358) !important;
  filter: none !important;
}

.timelineHScrollButton:disabled {
  opacity: 0.34 !important;
  filter: none !important;
}



/* Final native scrollbar coverage pass:
   use explicit selectors (not :where) so WebKit applies the design to every visible editor scrollbar. */
.panelPane,
.panelPane[data-tab-panel="media"],
.panelPane[data-tab-panel="projects"],
.assetDetailsPane,
.assetDetailsContent,
.inspectorPane,
.timelineDropZone,
.ratioMenu,
.clipContextMenu,
.beatSyncPopover,
.beatSyncPageBody,
.exportSettingsPages,
.exportSettingsTabs,
.exportSettingsBody.exportSettingsSheet {
  scrollbar-width: auto !important;
  scrollbar-color: #6f8399 rgba(15, 23, 42, 0.28) !important;
}

.panelPane::-webkit-scrollbar,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar,
.assetDetailsPane::-webkit-scrollbar,
.assetDetailsContent::-webkit-scrollbar,
.inspectorPane::-webkit-scrollbar,
.timelineDropZone::-webkit-scrollbar,
.ratioMenu::-webkit-scrollbar,
.clipContextMenu::-webkit-scrollbar,
.beatSyncPopover::-webkit-scrollbar,
.beatSyncPageBody::-webkit-scrollbar,
.exportSettingsPages::-webkit-scrollbar,
.exportSettingsTabs::-webkit-scrollbar,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar {
  width: 16px !important;
  height: 16px !important;
  background: rgba(15, 23, 42, 0.20) !important;
}

.panelPane::-webkit-scrollbar-track,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-track,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-track,
.assetDetailsPane::-webkit-scrollbar-track,
.assetDetailsContent::-webkit-scrollbar-track,
.inspectorPane::-webkit-scrollbar-track,
.timelineDropZone::-webkit-scrollbar-track,
.ratioMenu::-webkit-scrollbar-track,
.clipContextMenu::-webkit-scrollbar-track,
.beatSyncPopover::-webkit-scrollbar-track,
.beatSyncPageBody::-webkit-scrollbar-track,
.exportSettingsPages::-webkit-scrollbar-track,
.exportSettingsTabs::-webkit-scrollbar-track,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-track {
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(31, 41, 55, 0.30), rgba(15, 23, 42, 0.30)),
    rgba(15, 23, 42, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(2, 6, 23, 0.20) !important;
}

.panelPane::-webkit-scrollbar-thumb,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-thumb,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-thumb,
.assetDetailsPane::-webkit-scrollbar-thumb,
.assetDetailsContent::-webkit-scrollbar-thumb,
.inspectorPane::-webkit-scrollbar-thumb,
.timelineDropZone::-webkit-scrollbar-thumb,
.ratioMenu::-webkit-scrollbar-thumb,
.clipContextMenu::-webkit-scrollbar-thumb,
.beatSyncPopover::-webkit-scrollbar-thumb,
.beatSyncPageBody::-webkit-scrollbar-thumb,
.exportSettingsPages::-webkit-scrollbar-thumb,
.exportSettingsTabs::-webkit-scrollbar-thumb,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-thumb {
  min-height: 52px !important;
  min-width: 52px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.24) !important;
  background: linear-gradient(180deg, #98aabe, #61758c) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 1px 2px rgba(2, 6, 23, 0.24) !important;
}

.panelPane::-webkit-scrollbar-thumb:hover,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-thumb:hover,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-thumb:hover,
.assetDetailsPane::-webkit-scrollbar-thumb:hover,
.assetDetailsContent::-webkit-scrollbar-thumb:hover,
.inspectorPane::-webkit-scrollbar-thumb:hover,
.timelineDropZone::-webkit-scrollbar-thumb:hover,
.ratioMenu::-webkit-scrollbar-thumb:hover,
.clipContextMenu::-webkit-scrollbar-thumb:hover,
.beatSyncPopover::-webkit-scrollbar-thumb:hover,
.beatSyncPageBody::-webkit-scrollbar-thumb:hover,
.exportSettingsPages::-webkit-scrollbar-thumb:hover,
.exportSettingsTabs::-webkit-scrollbar-thumb:hover,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-thumb:hover {
  border-color: rgba(226, 232, 240, 0.34) !important;
  background: linear-gradient(180deg, #a9bad0, #72879f) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 8px rgba(125, 211, 252, 0.18),
    0 2px 4px rgba(2, 6, 23, 0.24) !important;
}

.panelPane::-webkit-scrollbar-thumb:active,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-thumb:active,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-thumb:active,
.assetDetailsPane::-webkit-scrollbar-thumb:active,
.assetDetailsContent::-webkit-scrollbar-thumb:active,
.inspectorPane::-webkit-scrollbar-thumb:active,
.timelineDropZone::-webkit-scrollbar-thumb:active,
.ratioMenu::-webkit-scrollbar-thumb:active,
.clipContextMenu::-webkit-scrollbar-thumb:active,
.beatSyncPopover::-webkit-scrollbar-thumb:active,
.beatSyncPageBody::-webkit-scrollbar-thumb:active,
.exportSettingsPages::-webkit-scrollbar-thumb:active,
.exportSettingsTabs::-webkit-scrollbar-thumb:active,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #6f8399, #40566f) !important;
  box-shadow:
    inset 0 1px 2px rgba(2, 6, 23, 0.34),
    0 0 4px rgba(125, 211, 252, 0.10) !important;
}

.panelPane::-webkit-scrollbar-button,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-button,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-button,
.assetDetailsPane::-webkit-scrollbar-button,
.assetDetailsContent::-webkit-scrollbar-button,
.inspectorPane::-webkit-scrollbar-button,
.timelineDropZone::-webkit-scrollbar-button,
.ratioMenu::-webkit-scrollbar-button,
.clipContextMenu::-webkit-scrollbar-button,
.beatSyncPopover::-webkit-scrollbar-button,
.beatSyncPageBody::-webkit-scrollbar-button,
.exportSettingsPages::-webkit-scrollbar-button,
.exportSettingsTabs::-webkit-scrollbar-button,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-button {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 0 !important;
  background-color: #5f748d !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 14px 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(2, 6, 23, 0.20) !important;
}

.panelPane::-webkit-scrollbar-button:hover,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-button:hover,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-button:hover,
.assetDetailsPane::-webkit-scrollbar-button:hover,
.assetDetailsContent::-webkit-scrollbar-button:hover,
.inspectorPane::-webkit-scrollbar-button:hover,
.timelineDropZone::-webkit-scrollbar-button:hover,
.ratioMenu::-webkit-scrollbar-button:hover,
.clipContextMenu::-webkit-scrollbar-button:hover,
.beatSyncPopover::-webkit-scrollbar-button:hover,
.beatSyncPageBody::-webkit-scrollbar-button:hover,
.exportSettingsPages::-webkit-scrollbar-button:hover,
.exportSettingsTabs::-webkit-scrollbar-button:hover,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-button:hover {
  background-color: #788ea6 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 0 7px rgba(125, 211, 252, 0.16) !important;
}

.panelPane::-webkit-scrollbar-button:active,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-button:active,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-button:active,
.assetDetailsPane::-webkit-scrollbar-button:active,
.assetDetailsContent::-webkit-scrollbar-button:active,
.inspectorPane::-webkit-scrollbar-button:active,
.timelineDropZone::-webkit-scrollbar-button:active,
.ratioMenu::-webkit-scrollbar-button:active,
.clipContextMenu::-webkit-scrollbar-button:active,
.beatSyncPopover::-webkit-scrollbar-button:active,
.beatSyncPageBody::-webkit-scrollbar-button:active,
.exportSettingsPages::-webkit-scrollbar-button:active,
.exportSettingsTabs::-webkit-scrollbar-button:active,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-button:active {
  background-color: #33485f !important;
  box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.38) !important;
}

.panelPane::-webkit-scrollbar-button:vertical:decrement,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-button:vertical:decrement,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-button:vertical:decrement,
.assetDetailsPane::-webkit-scrollbar-button:vertical:decrement,
.assetDetailsContent::-webkit-scrollbar-button:vertical:decrement,
.inspectorPane::-webkit-scrollbar-button:vertical:decrement,
.timelineDropZone::-webkit-scrollbar-button:vertical:decrement,
.ratioMenu::-webkit-scrollbar-button:vertical:decrement,
.clipContextMenu::-webkit-scrollbar-button:vertical:decrement,
.beatSyncPopover::-webkit-scrollbar-button:vertical:decrement,
.beatSyncPageBody::-webkit-scrollbar-button:vertical:decrement,
.exportSettingsPages::-webkit-scrollbar-button:vertical:decrement,
.exportSettingsTabs::-webkit-scrollbar-button:vertical:decrement,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.2 4.7 9h6.6L8 5.2Z' fill='%23e2e8f0'/%3E%3C/svg%3E") !important;
}

.panelPane::-webkit-scrollbar-button:vertical:increment,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-button:vertical:increment,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-button:vertical:increment,
.assetDetailsPane::-webkit-scrollbar-button:vertical:increment,
.assetDetailsContent::-webkit-scrollbar-button:vertical:increment,
.inspectorPane::-webkit-scrollbar-button:vertical:increment,
.timelineDropZone::-webkit-scrollbar-button:vertical:increment,
.ratioMenu::-webkit-scrollbar-button:vertical:increment,
.clipContextMenu::-webkit-scrollbar-button:vertical:increment,
.beatSyncPopover::-webkit-scrollbar-button:vertical:increment,
.beatSyncPageBody::-webkit-scrollbar-button:vertical:increment,
.exportSettingsPages::-webkit-scrollbar-button:vertical:increment,
.exportSettingsTabs::-webkit-scrollbar-button:vertical:increment,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 10.8 4.7 7h6.6L8 10.8Z' fill='%23e2e8f0'/%3E%3C/svg%3E") !important;
}

.panelPane::-webkit-scrollbar-corner,
.panelPane[data-tab-panel="media"]::-webkit-scrollbar-corner,
.panelPane[data-tab-panel="projects"]::-webkit-scrollbar-corner,
.assetDetailsPane::-webkit-scrollbar-corner,
.assetDetailsContent::-webkit-scrollbar-corner,
.inspectorPane::-webkit-scrollbar-corner,
.timelineDropZone::-webkit-scrollbar-corner,
.ratioMenu::-webkit-scrollbar-corner,
.clipContextMenu::-webkit-scrollbar-corner,
.beatSyncPopover::-webkit-scrollbar-corner,
.beatSyncPageBody::-webkit-scrollbar-corner,
.exportSettingsPages::-webkit-scrollbar-corner,
.exportSettingsTabs::-webkit-scrollbar-corner,
.exportSettingsBody.exportSettingsSheet::-webkit-scrollbar-corner {
  background: rgba(15, 23, 42, 0.30) !important;
}

/* Bottom timeline scrollbar: keep the custom design but reduce the height by 2px. */
.timelineCanvas {
  grid-template-rows: 22px minmax(0, 1fr) 29px !important;
}

.timelineHScroll {
  height: 27px !important;
  padding: 5px 8px !important;
}

.timelineHScroll::before {
  height: 14px !important;
  border-radius: 0 !important;
}

.timelineHScrollThumb {
  height: 14px !important;
  border-radius: 0 !important;
}

.timelineHScroll:hover .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 15px !important;
}

.timelineHScrollButton {
  height: 15px !important;
  border-radius: 0 !important;
}



/* === Codex final premium overlay scrollbars ===
   Native ::-webkit scrollbar buttons can be ignored by overlay-scrollbar engines,
   so visible editor panels get a real custom rail with integrated arrows. */
.zedPremiumScrollbarTarget {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.zedPremiumScrollbarTarget::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
.zedPremiumScrollbarLayer {
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: none;
  contain: layout style;
}
.zedPremiumScrollbar {
  position: absolute;
  pointer-events: auto;
  opacity: 0.72;
  transition: opacity 120ms ease, filter 120ms ease;
}
.zedPremiumScrollbar.is-idle:not(:hover):not(.is-active) {
  opacity: 0.58;
}
.zedPremiumScrollbar:hover,
.zedPremiumScrollbar.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.15));
}
.zedPremiumScrollbar.is-vertical {
  width: 17px;
  min-height: 52px;
}
.zedPremiumScrollbarRail {
  position: absolute;
  inset: 17px 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(11, 18, 29, 0.18), rgba(148, 163, 184, 0.16), rgba(11, 18, 29, 0.12));
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.04),
    inset -1px 0 0 rgba(2,6,23,0.28);
}
.zedPremiumScrollbarThumb {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 34px;
  border-radius: 0;
  border: 1px solid rgba(226, 232, 240, 0.28);
  background: linear-gradient(180deg, #8fa3bb, #5f748d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 1px 3px rgba(2, 6, 23, 0.22);
  cursor: grab;
  transition:
    top 80ms linear,
    height 80ms linear,
    background 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease;
}
.zedPremiumScrollbarThumb:hover {
  border-color: rgba(226, 232, 240, 0.38);
  background: linear-gradient(180deg, #a9bad0, #72879f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 8px rgba(125, 211, 252, 0.20),
    0 2px 4px rgba(2, 6, 23, 0.24);
}
.zedPremiumScrollbar.is-active .zedPremiumScrollbarThumb {
  cursor: grabbing;
  background: linear-gradient(180deg, #6f8399, #40566f);
  box-shadow:
    inset 0 1px 2px rgba(2, 6, 23, 0.34),
    0 0 4px rgba(125, 211, 252, 0.10);
}
.zedPremiumScrollbarButton {
  position: absolute;
  left: 0;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 0;
  display: grid;
  place-items: center;
  color: #e2e8f0;
  background: linear-gradient(180deg, #647892, #4a5f77);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(2, 6, 23, 0.22);
  cursor: pointer;
  opacity: 0.86;
  transition: opacity 120ms ease, background 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.zedPremiumScrollbarButton svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
}
.zedPremiumScrollbarButton.is-decrement {
  top: 0;
}
.zedPremiumScrollbarButton.is-increment {
  bottom: 0;
}
.zedPremiumScrollbarButton:hover {
  opacity: 1;
  background: linear-gradient(180deg, #8295ad, #60748d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 7px rgba(125, 211, 252, 0.18);
}
.zedPremiumScrollbarButton.is-pressing,
.zedPremiumScrollbarButton:active {
  background: linear-gradient(180deg, #33485f, #24364c);
  box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.42);
}
.zedPremiumScrollbarButton:disabled,
.zedPremiumScrollbarButton.is-disabled {
  opacity: 0.24;
  color: #94a3b8;
  cursor: default;
  box-shadow: none;
  filter: grayscale(0.35);
}
.zedPremiumScrollbarTarget[data-scrollbar-side="left"] + .zedPremiumScrollbar {
  left: auto;
}

/* Bottom timeline custom scrollbar: keep the final design but make it 2px slimmer. */
.timelineCanvas {
  grid-template-rows: 22px minmax(0, 1fr) 27px !important;
}
.timelineHScroll {
  height: 25px !important;
  padding: 4px 8px !important;
}
.timelineHScroll::before {
  height: 12px !important;
  border-radius: 0 !important;
}
.timelineHScrollThumb {
  height: 12px !important;
  border-radius: 0 !important;
}
.timelineHScroll:hover .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 13px !important;
}
.timelineHScrollButton {
  height: 13px !important;
  border-radius: 0 !important;
}


/* === Codex scrollbar polish final pass ===
   Real overlay scrollbars stay fast, flat-ended, and consistent across panels. */
.panelPane,
.inspectorPane,
.assetDetailsPane,
.assetDetailsContent,
.timelineDropZone,
.ratioMenu,
.clipContextMenu,
.beatSyncPopover,
.beatSyncPageBody,
.exportSettingsPages,
.exportSettingsTabs,
.exportSettingsBody {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.panelPane::-webkit-scrollbar,
.inspectorPane::-webkit-scrollbar,
.assetDetailsPane::-webkit-scrollbar,
.assetDetailsContent::-webkit-scrollbar,
.timelineDropZone::-webkit-scrollbar,
.ratioMenu::-webkit-scrollbar,
.clipContextMenu::-webkit-scrollbar,
.beatSyncPopover::-webkit-scrollbar,
.beatSyncPageBody::-webkit-scrollbar,
.exportSettingsPages::-webkit-scrollbar,
.exportSettingsTabs::-webkit-scrollbar,
.exportSettingsBody::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.zedPremiumScrollbarLayer {
  z-index: 9200 !important;
  pointer-events: none !important;
}
.zedPremiumScrollbar {
  width: 15px !important;
  opacity: 0.74 !important;
  filter: none;
  transition: opacity 110ms ease, filter 110ms ease !important;
}
.zedPremiumScrollbar.is-idle:not(:hover):not(.is-active) {
  opacity: 0.56 !important;
}
.zedPremiumScrollbar:hover,
.zedPremiumScrollbar.is-active {
  opacity: 1 !important;
  filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.18)) !important;
}
.zedPremiumScrollbarRail {
  inset: 15px 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, 0.22), rgba(120, 139, 162, 0.18), rgba(3, 7, 18, 0.16)) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.035),
    inset -1px 0 0 rgba(2, 6, 23, 0.30) !important;
}
.zedPremiumScrollbarThumb {
  left: 2px !important;
  right: 2px !important;
  min-height: 32px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.24) !important;
  background: linear-gradient(180deg, #8fa3bb, #5f748d) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(2, 6, 23, 0.18),
    0 1px 3px rgba(2, 6, 23, 0.24) !important;
  transition:
    background 110ms ease,
    box-shadow 110ms ease,
    border-color 110ms ease !important;
  will-change: top, height;
}
.zedPremiumScrollbarThumb:hover {
  border-color: rgba(226, 232, 240, 0.38) !important;
  background: linear-gradient(180deg, #a5b7cd, #71869e) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 9px rgba(125, 211, 252, 0.20),
    0 2px 5px rgba(2, 6, 23, 0.26) !important;
}
.zedPremiumScrollbar.is-active .zedPremiumScrollbarThumb {
  background: linear-gradient(180deg, #6d8098, #3f546c) !important;
  box-shadow:
    inset 0 1px 2px rgba(2, 6, 23, 0.38),
    0 0 5px rgba(125, 211, 252, 0.14) !important;
}
.zedPremiumScrollbarButton {
  width: 15px !important;
  height: 15px !important;
  border-radius: 0 !important;
  border-color: rgba(226, 232, 240, 0.14) !important;
  background: linear-gradient(180deg, #667a93, #4b6078) !important;
  color: #e2e8f0 !important;
  opacity: 0.88 !important;
  transition: opacity 110ms ease, background 110ms ease, box-shadow 110ms ease, filter 110ms ease !important;
}
.zedPremiumScrollbarButton svg {
  width: 12px !important;
  height: 12px !important;
}
.zedPremiumScrollbarButton:hover {
  opacity: 1 !important;
  background: linear-gradient(180deg, #8094ad, #60758e) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 7px rgba(125, 211, 252, 0.18) !important;
}
.zedPremiumScrollbarButton.is-pressing,
.zedPremiumScrollbarButton:active {
  background: linear-gradient(180deg, #32475e, #223449) !important;
  box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.48) !important;
}
.zedPremiumScrollbarButton:disabled,
.zedPremiumScrollbarButton.is-disabled {
  opacity: 0.22 !important;
  color: #94a3b8 !important;
  cursor: default !important;
  filter: grayscale(0.42) !important;
}

/* Bottom timeline horizontal scrollbar: 2px slimmer, raised, and flat-ended. */
.timelineCanvas {
  grid-template-rows: 22px minmax(0, 1fr) 25px !important;
}
.timelineHScroll {
  height: 23px !important;
  padding: 4px 8px !important;
  margin-top: -5px !important;
  border-top-color: rgba(148, 163, 184, 0.10) !important;
  overflow: visible !important;
}
.timelineHScroll::before {
  height: 10px !important;
  border-radius: 0 !important;
}
.timelineHScrollThumb {
  height: 10px !important;
  border-radius: 0 !important;
  transition:
    left 105ms cubic-bezier(.2,.8,.2,1),
    width 105ms cubic-bezier(.2,.8,.2,1),
    background 110ms ease,
    box-shadow 110ms ease,
    border-color 110ms ease !important;
}
.timelineHScroll:hover .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScrollThumb {
  height: 11px !important;
}
.timelineHScrollButton {
  width: 17px !important;
  height: 11px !important;
  border-radius: 0 !important;
}


/* Final timeline scrollbar stability pass:
   Keep the integrated arrow buttons locked to the thumb during scroll/drag.
   Left-position transitions made arrows lag behind the thumb while scrolling. */
.timelineHScroll .timelineHScrollThumb {
  transition:
    width 90ms cubic-bezier(.2,.8,.2,1),
    background 110ms ease,
    box-shadow 110ms ease,
    border-color 110ms ease,
    height 110ms ease !important;
}

.timelineHScroll .timelineHScrollButton {
  transition:
    opacity 100ms ease,
    background 100ms ease,
    color 100ms ease,
    filter 100ms ease,
    transform 100ms ease !important;
  will-change: left, opacity, transform;
}

.is-dragging-timeline-scroll .timelineHScroll .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScroll .timelineHScrollButton,
.timelineHScrollButton.is-pressing,
.timelineHScrollButton.is-pressing ~ .timelineHScrollThumb {
  transition: none !important;
}

.timelineHScroll .timelineHScrollButtonLeft,
.timelineHScroll .timelineHScrollButtonRight {
  top: 50% !important;
  margin: 0 !important;
}


/* === Phase 1 stability fixes: integrated timeline scrollbar + scoped premium overlays === */
.timelineCanvas {
  --timeline-scrollbar-area-height: 25px;
  --timeline-scrollbar-thumb-height: 10px;
  --timeline-scrollbar-button-width: 17px;
  --timeline-scrollbar-button-height: 11px;
  grid-template-rows: 22px minmax(0, 1fr) var(--timeline-scrollbar-area-height) !important;
}

.timelineHScroll {
  height: calc(var(--timeline-scrollbar-area-height) - 2px) !important;
  padding: 4px 8px !important;
  margin-top: -5px !important;
  overflow: visible !important;
}

.timelineHScrollPill {
  position: absolute;
  left: var(--timeline-hscroll-pill-left, var(--timeline-hscroll-left, 0px));
  top: 50%;
  width: var(--timeline-hscroll-pill-width, 200px);
  min-width: var(--timeline-hscroll-button-width);
  height: var(--timeline-scrollbar-button-height);
  transform: translateY(-50%);
  will-change: left, width;
  z-index: 4;
}

.timelineHScrollThumb {
  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  min-width: 100% !important;
  height: var(--timeline-scrollbar-thumb-height) !important;
  transform: translateY(-50%) !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}

.timelineHScroll:hover .timelineHScrollThumb,
.is-dragging-timeline-scroll .timelineHScrollThumb {
  height: calc(var(--timeline-scrollbar-thumb-height) + 1px) !important;
}

.timelineHScrollButton {
  top: 50% !important;
  width: var(--timeline-scrollbar-button-width) !important;
  height: var(--timeline-scrollbar-button-height) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%) scale(0.92) !important;
  z-index: 3 !important;
}

.timelineHScroll:hover .timelineHScrollButton,
.timelineHScrollButton.is-pressing,
.is-dragging-timeline-scroll .timelineHScrollButton {
  transform: translateY(-50%) scale(1) !important;
}

.timelineHScrollButtonLeft {
  left: 0 !important;
  right: auto !important;
}

.timelineHScrollButtonRight {
  left: auto !important;
  right: 0 !important;
}

.timelineHScroll .timelineHScrollPill,
.timelineHScroll .timelineHScrollButton,
.timelineHScroll .timelineHScrollThumb {
  transition:
    opacity 100ms ease,
    background 110ms ease,
    color 100ms ease,
    filter 100ms ease,
    transform 100ms ease,
    width 90ms cubic-bezier(.2,.8,.2,1),
    height 110ms ease !important;
}

.is-dragging-timeline-scroll .timelineHScrollPill,
.is-dragging-timeline-scroll .timelineHScrollButton,
.is-dragging-timeline-scroll .timelineHScrollThumb,
.timelineHScrollButton.is-pressing {
  transition: none !important;
}

.timelineDropZone {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.timelineDropZone::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.zedPremiumScrollbarButton {
  user-select: none;
}

.zedPremiumScrollbarButton:focus {
  outline: none !important;
}


/* Phase 10I: stable ruler labels + high-zoom frame ticks */
.timelineTick.is-minor::before,
.timelineTick.is-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 1px;
  border-radius: 999px;
  pointer-events: none;
}

.timelineTick.is-minor::before {
  height: 4px;
  background: rgba(148, 163, 184, 0.32);
}

.timelineTick.is-frame::before {
  height: 8px;
  background: rgba(125, 211, 252, 0.42);
}

.timelineTick.is-frame.has-label span {
  top: 18px;
  left: 4px;
  color: rgba(125, 211, 252, 0.72);
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.timelineTick.is-anchor-label span {
  visibility: visible;
  color: rgba(248, 250, 252, 0.92);
}

.timelineTick.is-minor span:not(:empty) {
  display: none;
}


/* Phase 10K: timeline clip drag destination preview must follow the real drop target. */
body.is-dragging-clip .timelineDropPreview.is-timeline-clip-destination {
  z-index: 42;
  opacity: 0.98;
  border: 2px solid rgba(45, 212, 191, 0.92);
  border-style: solid;
  background:
    linear-gradient(180deg, rgba(20, 184, 166, 0.24), rgba(14, 116, 144, 0.18)),
    repeating-linear-gradient(90deg, rgba(103, 232, 249, 0.18) 0 8px, rgba(103, 232, 249, 0.04) 8px 16px),
    rgba(15, 23, 42, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 3px rgba(45, 212, 191, 0.18),
    0 14px 34px rgba(2, 6, 23, 0.34),
    0 0 28px rgba(45, 212, 191, 0.28);
  transform: translateZ(0);
}

body.is-dragging-clip .timelineDropPreview.is-timeline-clip-destination::after {
  content: "DROP HERE";
  position: absolute;
  right: 8px;
  bottom: 5px;
  z-index: 2;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(8, 47, 73, 0.76);
  color: rgba(207, 250, 254, 0.96);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.04em;
  pointer-events: none;
}

body.is-dragging-clip .timelineClip.is-drag-source-placeholder,
body.is-dragging-clip .timelineClip[data-phase10k-source-placeholder="true"] {
  opacity: var(--phase10k-source-placeholder-opacity, 0.18) !important;
  filter: grayscale(0.8) saturate(0.55) brightness(0.72) !important;
  border-color: rgba(100, 116, 139, 0.36) !important;
  border-style: dashed !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.44), rgba(30, 41, 59, 0.18)),
    repeating-linear-gradient(90deg, rgba(100, 116, 139, 0.06) 0 10px, transparent 10px 20px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(148, 163, 184, 0.08),
    0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}

body.is-dragging-clip .timelineClip[data-phase10k-source-placeholder="true"]::after {
  content: "ORIGINAL";
  position: absolute;
  left: 6px;
  bottom: 5px;
  z-index: 4;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  color: rgba(203, 213, 225, 0.68);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  pointer-events: none;
}

body.is-dragging-clip .mediaDragCursorGhost.is-timeline-clip-drag {
  transform: translate3d(0, -50%, 0) scale(1);
  transition: none !important;
  will-change: left, top;
}


/* Render Phase 8C: visible export render/cancel state. */
.exportButton.is-cancel-render,
.exportSettingsPrimary.is-cancel-render {
  position: relative;
}

.exportButton.is-loading span,
.exportSettingsPrimary.is-loading span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.exportButton.is-loading span::before,
.exportSettingsPrimary.is-loading span::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: exportRenderSpin 0.8s linear infinite;
}

@keyframes exportRenderSpin {
  to { transform: rotate(360deg); }
}


/* Render Production Hotfix: top-bar Export popup activation hardening. */
.topActions {
  position: relative;
  z-index: 120;
  pointer-events: auto;
}

.exportButton[data-action="open-export-popup"] {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.exportButton[data-action="open-export-popup"] span,
.exportButton[data-action="open-export-popup"]::before,
.exportButton[data-action="open-export-popup"]::after {
  pointer-events: none;
}

.exportSettingsOverlay.is-export-popup-recovered .exportSettingsDialog {
  border-color: rgba(251, 191, 36, 0.34);
}

.exportRecoveryNotice,
.exportRecoveryError {
  margin: 0;
  color: rgba(226, 232, 240, 0.82);
  font-size: 13px;
  line-height: 1.5;
}

.exportRecoveryError {
  margin-top: 10px;
  color: rgba(251, 191, 36, 0.92);
  word-break: break-word;
}


/* Export Start Final Hardfix: modal primary button must always receive and acknowledge input immediately. */
.exportSettingsFooter,
.exportSettingsFooterActions,
.exportSettingsPrimary[data-export-settings-start] {
  position: relative;
  z-index: 8;
  pointer-events: auto;
}

.exportSettingsPrimary[data-export-settings-start] {
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.exportSettingsPrimary[data-export-settings-start] span,
.exportSettingsPrimary[data-export-settings-start]::before,
.exportSettingsPrimary[data-export-settings-start]::after {
  pointer-events: none;
}

.exportSettingsPrimary[data-export-settings-start].is-loading {
  opacity: 1 !important;
  cursor: progress !important;
}


/* Export Modal Coordinate Guard Fix: keep the footer/button above every scroll/blur layer. */
.exportSettingsDialog,
.exportSettingsDialog--capcut {
  pointer-events: auto;
}

.exportSettingsFooter,
.exportSettingsFooterActions {
  z-index: 20002;
}

.exportSettingsPrimary[data-export-settings-start] {
  z-index: 20003;
  pointer-events: auto !important;
}


/* Inline Render Hotfix: make popup Cancel Render state unmistakable and keep progress visible. */
.exportSettingsPrimary[data-export-settings-start].is-cancel-render,
.exportSettingsPrimary.is-cancel-render {
  color: #fff !important;
  background: linear-gradient(135deg, #fb7185, #ef4444 52%, #b91c1c) !important;
  box-shadow: 0 16px 32px rgba(239, 68, 68, 0.28), inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}

.exportSettingsPrimary[data-export-settings-start].is-cancel-render:hover,
.exportSettingsPrimary.is-cancel-render:hover {
  background: linear-gradient(135deg, #fda4af, #ef4444 50%, #991b1b) !important;
}

.exportCoverPreview.is-rendering .exportCoverRenderWash {
  opacity: 1 !important;
}

.exportCoverPreview.is-error .exportCoverRenderStatus {
  color: #fecaca !important;
  background: rgba(127, 29, 29, 0.72) !important;
  max-width: calc(100% - 24px);
  white-space: normal;
  text-align: center;
}


/* Phase 5: Cloud Render Pro System */
.cloudRenderButton {
  min-width: 168px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 0 8px;
  padding: 6px 12px 6px 16px;
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.98), rgba(14, 165, 233, 0.94) 52%, rgba(34, 211, 238, 0.96)),
    #0ea5e9;
  color: #eff6ff;
  box-shadow:
    0 16px 32px rgba(14, 165, 233, 0.24),
    0 5px 14px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.cloudRenderButton::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.34), transparent 32%);
  opacity: 0.8;
  pointer-events: none;
}

.cloudRenderButtonMain,
.cloudRenderButtonSub,
.cloudRenderButtonPro {
  position: relative;
  z-index: 1;
}

.cloudRenderButtonMain {
  align-self: end;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.01em;
}

.cloudRenderButtonSub {
  align-self: start;
  color: rgba(239, 246, 255, 0.84);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.03em;
  line-height: 1;
}

.cloudRenderButtonPro {
  grid-row: 1 / span 2;
  align-self: center;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.26);
  color: #ffffff;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cloudRenderButton:hover,
.cloudRenderButton:focus-visible {
  filter: saturate(1.08) brightness(1.03);
  transform: translateY(-1px);
  outline: none;
  box-shadow:
    0 18px 38px rgba(14, 165, 233, 0.32),
    0 8px 22px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.cloudRenderButton[data-cloud-status="pro-required"] .cloudRenderButtonPro {
  background: rgba(251, 191, 36, 0.26);
  color: #fffbeb;
}

.cloudRenderButton[data-cloud-status="needs-backend"] {
  filter: saturate(0.82);
}

.cloudRenderButton.is-cloud-active .cloudRenderButtonSub {
  animation: cloudRenderPulse 1s ease-in-out infinite;
}

@keyframes cloudRenderPulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

.editorApp[data-theme="dark"] .cloudRenderButton,
.editorApp[data-theme="night"] .cloudRenderButton {
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.96), rgba(37, 99, 235, 0.94) 46%, rgba(14, 165, 233, 0.92)),
    #2563eb;
  box-shadow:
    0 16px 34px rgba(14, 165, 233, 0.22),
    0 7px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.cloudRenderOverlay {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.24), transparent 32%),
    radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.18), transparent 34%),
    rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.cloudRenderOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cloudRenderOverlay[hidden] {
  display: none !important;
}

.cloudRenderDialog {
  width: min(760px, calc(100vw - 44px));
  max-height: min(720px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  color: #e5f0ff;
  border: 1px solid rgba(125, 211, 252, 0.24);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92)),
    rgba(15, 23, 42, 0.98);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(18px) scale(0.985);
  transition: transform 150ms ease;
}

.cloudRenderOverlay.is-open .cloudRenderDialog {
  transform: translateY(0) scale(1);
}

.cloudRenderHeader,
.cloudRenderFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  background:
    linear-gradient(90deg, rgba(59, 130, 246, 0.14), transparent 46%),
    rgba(15, 23, 42, 0.72);
}

.cloudRenderFooter {
  justify-content: flex-end;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  border-bottom: 0;
  background: rgba(2, 6, 23, 0.28);
  flex-wrap: wrap;
}

.cloudRenderEyebrow {
  margin: 0 0 6px;
  color: #67e8f9;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cloudRenderHeader h2,
.cloudRenderHero h3,
.cloudRenderHistory h3 {
  margin: 0;
  color: #f8fbff;
}

.cloudRenderHeader p,
.cloudRenderHero p,
.cloudRenderPrivacy p,
.cloudRenderMessage {
  margin: 7px 0 0;
  color: #aab7c8;
  font-size: 13px;
  line-height: 1.45;
}

.cloudRenderClose,
.cloudRenderGhost,
.cloudRenderSecondary,
.cloudRenderPrimary {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.68);
  font-weight: 850;
  cursor: pointer;
}

.cloudRenderClose {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}

.cloudRenderGhost,
.cloudRenderSecondary,
.cloudRenderPrimary {
  min-height: 38px;
  padding: 0 14px;
}

.cloudRenderPrimary {
  border: 0;
  color: #ffffff;
  background:
    linear-gradient(135deg, #2563eb, #0ea5e9 48%, #22d3ee),
    #0ea5e9;
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.2);
}

.cloudRenderSecondary {
  border-color: rgba(251, 191, 36, 0.34);
  color: #fffbeb;
  background: rgba(251, 191, 36, 0.14);
}

.cloudRenderBody {
  min-height: 0;
  display: grid;
  gap: 14px;
  padding: 18px 22px 20px;
  overflow: auto;
}

.cloudRenderHero,
.cloudRenderStatusCard,
.cloudRenderPrivacy,
.cloudRenderProgress,
.cloudRenderHistory {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(30, 64, 175, 0.16), rgba(14, 165, 233, 0.08)),
    rgba(15, 23, 42, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cloudRenderSpeedBadge {
  width: max-content;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #cffafe;
  background: rgba(8, 145, 178, 0.22);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cloudRenderPillRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.cloudRenderPillRow span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.12);
  font-size: 11px;
  font-weight: 850;
}

.cloudRenderStatusCard {
  display: grid;
  gap: 10px;
}

.cloudRenderStatusLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #94a3b8;
  font-size: 12px;
}

.cloudRenderStatusLine strong {
  color: #e0f2fe;
  text-align: right;
}

.cloudRenderPrivacy {
  border-color: rgba(251, 191, 36, 0.24);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.13), rgba(30, 64, 175, 0.08)),
    rgba(15, 23, 42, 0.58);
}

.cloudRenderPrivacy strong {
  color: #fde68a;
}

.cloudRenderProgressTrack {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.42);
}

.cloudRenderProgressTrack span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #22d3ee);
  transition: width 180ms ease;
}

.cloudRenderProgressMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: #94a3b8;
  font-size: 12px;
}

.cloudRenderProgressMeta strong {
  color: #f8fafc;
}

.cloudRenderHistoryRow {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.cloudRenderHistoryRow:first-child {
  border-top: 0;
}

.cloudRenderHistoryRow strong {
  color: #f8fafc;
  font-size: 13px;
}

.cloudRenderHistoryRow span {
  color: #94a3b8;
  font-size: 12px;
}

.cloudRenderMessage {
  min-height: 20px;
}

@media (max-width: 960px) {
  .cloudRenderButton {
    min-width: 130px;
    padding-inline: 12px;
  }

  .cloudRenderButtonSub {
    display: none;
  }

  .cloudRenderButtonMain {
    grid-row: 1 / span 2;
    align-self: center;
  }
}



/* Phase 8: Render Error Recovery + Logs */
.exportErrorRecoveryPanel {
  display: grid;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(248, 113, 113, 0.34);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(127, 29, 29, 0.28), rgba(30, 41, 59, 0.62)),
    rgba(15, 23, 42, 0.72);
  box-shadow:
    0 16px 34px rgba(127, 29, 29, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.exportErrorRecoveryPanel[hidden] {
  display: none !important;
}

.exportErrorRecoveryCopy {
  display: grid;
  gap: 5px;
}

.exportErrorRecoveryCopy strong {
  color: #fee2e2;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.exportErrorRecoveryCopy span {
  color: #fecaca;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.exportErrorRecoveryCopy small {
  display: block;
  max-height: 42px;
  overflow: hidden;
  color: #fca5a5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.exportErrorRecoveryActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exportErrorRecoveryActions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(252, 165, 165, 0.26);
  border-radius: 999px;
  color: #fee2e2;
  background: rgba(127, 29, 29, 0.32);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.exportErrorRecoveryActions button:hover {
  border-color: rgba(254, 202, 202, 0.55);
  background: rgba(153, 27, 27, 0.52);
  transform: translateY(-1px);
}


/* Phase 9: Render quality benchmark */
.cloudRenderBenchmark {
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(59, 130, 246, 0.06)),
    rgba(15, 23, 42, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cloudRenderBenchmarkHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.cloudRenderBenchmarkHeader strong {
  color: #e0f2fe;
  font-size: 13px;
}

.cloudRenderBenchmarkHeader p {
  margin: 5px 0 0;
  color: #9fb1c7;
  font-size: 12px;
  line-height: 1.45;
}

.cloudRenderBenchmarkHeader [data-cloud-benchmark-status] {
  min-width: 180px;
  max-width: 270px;
  padding: 6px 9px;
  border-radius: 12px;
  color: #cffafe;
  background: rgba(8, 145, 178, 0.14);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.cloudRenderBenchmarkGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.cloudBenchmarkMetric {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.52);
}

.cloudBenchmarkMetric span {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 850;
}

.cloudBenchmarkMetric strong {
  color: #f8fafc;
  font-size: 19px;
  line-height: 1;
}

.cloudBenchmarkMetric small {
  min-height: 28px;
  color: #94a3b8;
  font-size: 10px;
  line-height: 1.25;
}

.cloudBenchmarkMetric.is-good {
  border-color: rgba(34, 211, 238, 0.28);
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(34, 211, 238, 0.06)),
    rgba(15, 23, 42, 0.52);
}

.cloudBenchmarkMetric.is-muted {
  opacity: 0.74;
}

.cloudRenderBenchmarkScenarios {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.cloudBenchmarkScenarioRow {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(4, minmax(64px, 0.7fr));
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.28);
  color: #cbd5e1;
  font-size: 11px;
}

.cloudBenchmarkScenarioRow strong {
  color: #e2e8f0;
  font-size: 11px;
}

.cloudBenchmarkScenarioRow span {
  color: #93c5fd;
  text-align: right;
  font-weight: 800;
}

@media (max-width: 860px) {
  .cloudRenderBenchmarkHeader {
    display: grid;
  }

  .cloudRenderBenchmarkHeader [data-cloud-benchmark-status] {
    max-width: none;
    text-align: left;
  }

  .cloudRenderBenchmarkGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cloudBenchmarkScenarioRow {
    grid-template-columns: 1fr 1fr;
  }

  .cloudBenchmarkScenarioRow span {
    text-align: left;
  }
}



.exportBrowserProTargetGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 6px 10px;
  padding: 10px;
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(34, 197, 94, 0.08)),
    rgba(15, 23, 42, 0.3);
}

.exportBrowserProTargetGrid span {
  min-width: 0;
  color: #9fb5c9;
  font-size: 11px;
  line-height: 1.25;
}

.exportBrowserProTargetGrid strong {
  min-width: 0;
  color: #bbf7d0;
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}

.exportBrowserProTargetGrid.is-browser-pro-2k {
  border-color: rgba(56, 189, 248, 0.32);
}

.exportBrowserProTargetGrid.is-pro-recommended {
  border-color: rgba(251, 191, 36, 0.26);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(14, 165, 233, 0.08)),
    rgba(15, 23, 42, 0.32);
}

@media (max-width: 760px) {
  .exportBrowserProTargetGrid {
    grid-template-columns: 1fr;
  }

  .exportBrowserProTargetGrid strong {
    text-align: left;
  }
}

.exportBrowserProQualityControl {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.34);
}

.exportBrowserProQualityHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
}

.exportBrowserProQualityHeader strong {
  color: #bfdbfe;
  font-size: 11px;
  text-align: right;
}

.exportBrowserProQualityButtons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.exportBrowserProQualityButtons button {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 11px;
  padding: 8px 9px;
  color: #dbeafe;
  background: rgba(2, 6, 23, 0.26);
  text-align: left;
  cursor: pointer;
}

.exportBrowserProQualityButtons button strong {
  color: #e0f2fe;
  font-size: 11px;
  line-height: 1.1;
}

.exportBrowserProQualityButtons button small {
  color: #94a3b8;
  font-size: 10px;
  line-height: 1.25;
}

.exportBrowserProQualityButtons button:hover,
.exportBrowserProQualityButtons button:focus-visible {
  border-color: rgba(96, 165, 250, 0.62);
  background: rgba(37, 99, 235, 0.18);
  outline: none;
}

.exportBrowserProQualityButtons button.is-selected {
  border-color: rgba(56, 189, 248, 0.74);
  background: rgba(14, 165, 233, 0.2);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12);
}

.exportBrowserProQualityButtons button.is-disabled,
.exportBrowserProQualityButtons button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.35);
}

[data-browser-pro-quality-note].is-warning {
  color: #fde68a;
}

.exportRenderModeCard--browserpro.is-quality-fast {
  border-color: rgba(34, 197, 94, 0.42);
}

.exportRenderModeCard--browserpro.is-quality-high {
  border-color: rgba(59, 130, 246, 0.5);
}

.exportRenderModeCard--browserpro.is-weak-2k {
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.12),
    0 14px 30px rgba(251, 191, 36, 0.08);
}

@media (max-width: 760px) {
  .exportBrowserProQualityButtons {
    grid-template-columns: 1fr;
  }

  .exportBrowserProQualityHeader {
    display: grid;
  }

  .exportBrowserProQualityHeader strong {
    text-align: left;
  }
}


.exportBrowserProPreflightGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 10px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.32);
}

.exportBrowserProPreflightGrid span {
  min-width: 0;
  color: #9fb5c9;
  font-size: 11px;
  line-height: 1.25;
}

.exportBrowserProPreflightGrid strong {
  color: #dbeafe;
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}

.exportBrowserProPreflightGrid strong.is-good {
  color: #86efac;
}

.exportBrowserProPreflightGrid strong.is-warning {
  color: #fde68a;
}

.exportBrowserProPreflightGrid strong.is-bad {
  color: #fda4af;
}

.exportBrowserProPreflightActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exportBrowserProPreflightActions button {
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 10px;
  padding: 7px 10px;
  color: #e0f2fe;
  background: rgba(14, 165, 233, 0.16);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.exportBrowserProPreflightActions button:hover,
.exportBrowserProPreflightActions button:focus-visible {
  border-color: rgba(125, 211, 252, 0.64);
  background: rgba(14, 165, 233, 0.26);
  outline: none;
}

.exportBrowserProPreflightActions button:disabled {
  cursor: progress;
  opacity: 0.66;
}

.exportRenderModeCard--browserpro.is-checking {
  border-color: rgba(125, 211, 252, 0.58);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.14),
    0 14px 30px rgba(14, 165, 233, 0.12);
}

.exportRenderModeCard--browserpro.is-ready {
  border-color: rgba(34, 197, 94, 0.5);
}

.exportRenderModeCard--browserpro.is-risky {
  border-color: rgba(251, 191, 36, 0.46);
}

[data-browser-pro-preflight-note].is-warning {
  color: #fde68a;
}


/* === Phase 10.11: professional render-mode layout cleanup === */
.exportRenderModeSection {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.14);
}

.exportRenderModeHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.exportRenderModeHeader h3 {
  margin: 2px 0 0;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
}

.exportRenderModeHeader small {
  max-width: 270px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.exportRenderModeGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.exportRenderModeCard {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px !important;
  min-height: 112px;
  padding: 10px 10px 9px !important;
  border-radius: 13px !important;
  overflow: hidden;
}

.exportRenderModeCard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(34, 211, 238, 0);
  transition: box-shadow 160ms ease;
}

.exportRenderModeCard.is-selected::after {
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.34);
}

.exportRenderModeCardCopy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.exportRenderModeCard h3 {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.exportRenderModeCard p {
  margin: 0 !important;
  color: #b6c2d0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.exportRenderModePricing {
  display: block;
  margin-top: 2px;
  color: #e0f2fe;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 900;
}

.exportRenderModeMiniBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-self: end;
}

.exportRenderModeMiniBadges span {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 2px 7px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.52);
  font-size: 10px;
  font-weight: 850;
}

.exportRenderModeDetails {
  display: grid;
  gap: 10px;
}

.exportRenderModeDetailPanel {
  display: none;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(14, 116, 144, 0.16), rgba(15, 23, 42, 0.1)),
    rgba(15, 23, 42, 0.38);
}

.exportRenderModeDetailPanel.is-active,
.exportSettingsOverlay[data-render-mode="quick"] [data-render-detail-panel="quick"],
.exportSettingsOverlay[data-render-mode="browserpro"] [data-render-detail-panel="browserpro"],
.exportSettingsOverlay[data-render-mode="local"] [data-render-detail-panel="local"] {
  display: grid;
}

.exportSettingsOverlay:not([data-render-mode]) [data-render-detail-panel="quick"] {
  display: grid;
}

.exportRenderModeDetailHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.exportRenderModeDetailHeader strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
}

.exportRenderModeDetailHeader span {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.exportRenderModeDetailPanel .exportRenderModeBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exportRenderModeDetailPanel .exportRenderModeBadges span {
  min-height: 21px;
  padding: 2px 8px;
  font-size: 10.5px;
}

.exportRenderModeDetailPanel small {
  color: #9fb6c8;
  font-size: 11px;
  line-height: 1.35;
}

.exportBrowserProTargetGrid,
.exportBrowserProPreflightGrid,
.exportLocalHealthGrid {
  grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr) !important;
  gap: 6px 10px;
}

.exportBrowserProTargetGrid strong,
.exportBrowserProPreflightGrid strong,
.exportLocalHealthGrid strong {
  max-width: none !important;
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: right;
}

.exportBrowserProQualityButtons {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px !important;
}

.exportBrowserProQualityButtons button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px !important;
}

.exportBrowserProQualityButtons button small {
  display: block;
  font-size: 10px;
}

.exportBrowserProPreflightActions,
.exportLocalHealthActions {
  justify-content: flex-end;
}

@media (max-width: 1020px) {
  .exportRenderModeGrid {
    grid-template-columns: 1fr !important;
  }

  .exportRenderModeCard {
    min-height: 82px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .exportRenderModeMiniBadges {
    justify-content: flex-end;
  }

  .exportRenderModeHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .exportRenderModeHeader small,
  .exportRenderModeDetailHeader span {
    max-width: none;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .exportBrowserProTargetGrid,
  .exportBrowserProPreflightGrid,
  .exportLocalHealthGrid {
    grid-template-columns: 1fr !important;
  }

  .exportBrowserProTargetGrid strong,
  .exportBrowserProPreflightGrid strong,
  .exportLocalHealthGrid strong {
    text-align: left;
  }

  .exportBrowserProQualityButtons {
    grid-template-columns: 1fr !important;
  }
}



/* === Phase 10.11b: compact professional render-mode details === */
.exportRenderModeSection {
  gap: 8px !important;
}

.exportRenderModeHeader {
  margin-bottom: 0 !important;
}

.exportRenderModeHeader small {
  max-width: 240px !important;
  font-size: 10px !important;
  opacity: 0.78;
}

.exportRenderModeGrid {
  gap: 9px !important;
}

.exportRenderModeCard {
  min-height: 86px !important;
  padding: 10px 11px !important;
  gap: 7px !important;
}

.exportRenderModeCard h3 {
  font-size: 13px !important;
  line-height: 1.12 !important;
}

.exportRenderModeCard p {
  margin-top: 2px !important;
  font-size: 10.5px !important;
  line-height: 1.28 !important;
}

.exportRenderModePricing {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.exportRenderModeMiniBadges {
  gap: 5px !important;
}

.exportRenderModeMiniBadges span {
  min-height: 18px !important;
  padding: 2px 6px !important;
  font-size: 9.5px !important;
}

.exportRenderModeDetails {
  gap: 7px !important;
}

.exportRenderModeDetailPanel {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 13px !important;
}

.exportRenderModeDetailHeader {
  align-items: flex-start !important;
}

.exportRenderModeDetailHeader strong {
  font-size: 13px !important;
}

.exportRenderModeDetailHeader span {
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  color: #a5b4fc !important;
  text-align: right !important;
}

.exportRenderModeBadges--minimal {
  gap: 5px !important;
}

.exportRenderModeBadges--minimal span {
  min-height: 20px !important;
  padding: 3px 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  max-width: 100%;
  white-space: nowrap;
}

.exportRenderModeDetailPanel small {
  font-size: 10.5px !important;
  line-height: 1.28 !important;
  color: #93c5fd !important;
}

.exportBrowserProQualityControl--minimal {
  gap: 7px !important;
  padding: 8px !important;
}

.exportBrowserProQualityHeader {
  font-size: 10.5px !important;
}

.exportBrowserProQualityHeader strong {
  font-size: 10.5px !important;
}

.exportBrowserProQualityButtons {
  gap: 6px !important;
}

.exportBrowserProQualityButtons button {
  min-height: 34px !important;
  padding: 7px 8px !important;
  align-items: center !important;
  text-align: center !important;
}

.exportBrowserProQualityButtons button strong {
  font-size: 10.5px !important;
}

.exportBrowserProQualityButtons button small,
[data-browser-pro-quality-note],
[data-browser-pro-preflight-note],
[data-local-render-pricing] {
  display: none !important;
}

.exportBrowserProCompactStatus,
.exportLocalCompactStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 11px;
  padding: 7px 9px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.32);
  font-size: 10.5px;
  line-height: 1.2;
}

.exportBrowserProCompactStatus strong,
.exportLocalCompactStatus strong {
  color: #bbf7d0;
  text-align: right;
}

.exportBrowserProCompactStatus strong.is-warning,
.exportLocalCompactStatus strong.is-warning {
  color: #fde68a;
}

.exportBrowserProPreflightGrid,
.exportLocalHealthGrid,
.exportBrowserProTargetGrid {
  display: none !important;
}

.exportBrowserProPreflightActions,
.exportLocalHealthActions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 0 !important;
}

.exportBrowserProPreflightActions button,
.exportLocalHealthActions button {
  min-height: 30px !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  font-size: 10.5px !important;
}

[data-local-render-note] {
  display: block !important;
  margin-top: -2px !important;
  color: #94a3b8 !important;
}

@media (max-width: 980px) {
  .exportRenderModeGrid {
    grid-template-columns: 1fr !important;
  }

  .exportRenderModeCard {
    min-height: unset !important;
  }
}


/* Phase 12: professional transition library performance + resize safety */
.panelPane[data-tab-panel="transitions"].is-active,
.panelPane-transitions.is-active {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  contain: layout paint;
}

.panelPane[data-tab-panel="transitions"].is-active .professionalPanelIntro {
  position: sticky;
  top: -26px;
  z-index: 20;
  margin: -26px -20px 0;
  padding: 26px 20px 16px;
  background:
    radial-gradient(circle at 70% 0%, rgba(var(--accent-rgb), 0.16), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.94));
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(14px);
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPresetGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  min-height: 160px;
  padding: 2px 0 8px;
  contain: layout style paint;
}

.transitionPreset {
  min-width: 0;
  contain: layout style paint;
  transform: translateZ(0);
  backface-visibility: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 188px 132px;
}

.transitionPreset:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.95);
  outline-offset: 3px;
}

.transitionPreset.is-active {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.52),
    0 16px 38px rgba(15, 23, 42, 0.24);
}

.transitionPreset.is-active i {
  border-color: rgba(var(--accent-rgb), 0.72);
}

.transitionPreset .transitionPreviewCanvas {
  will-change: transform;
}

.transitionPreset:not(:hover):not(.is-active) .transitionPreviewCanvas[data-transition-still-painted="true"] {
  transform: translateZ(0);
}

.editorApp.is-transition-demo-previewing #spectrumCanvas {
  filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.18));
}

.panelPane[data-tab-panel="transitions"].is-active .transitionDurationControl,
.panelPane[data-tab-panel="transitions"].is-active .transitionActionRow {
  position: sticky;
  bottom: 0;
  z-index: 18;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.4), rgba(17, 24, 39, 0.96) 38%, rgba(17, 24, 39, 0.98));
  backdrop-filter: blur(12px);
}

.panelPane[data-tab-panel="transitions"].is-active .transitionDurationControl {
  bottom: 52px;
  padding-top: 12px;
  padding-bottom: 8px;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionActionRow {
  padding-top: 8px;
  padding-bottom: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

@media (max-width: 1180px) {
  .panelPane[data-tab-panel="transitions"].is-active .transitionPresetGrid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .transitionPreset,
  .transitionPreset .transitionPreviewCanvas {
    transition: none !important;
    animation: none !important;
  }
}

/* Transition Rebuild Phase 2: professional compact top bar */
.panelPane[data-tab-panel="transitions"].is-active,
.panelPane-transitions.is-active {
  gap: 10px !important;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionTopBar,
.panelPane-transitions.is-active .transitionTopBar {
  position: sticky;
  top: -26px;
  z-index: 35;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px 36px auto;
  align-items: center;
  gap: 8px;
  margin: -26px -20px 6px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 72% 0%, rgba(59, 130, 246, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(9, 17, 32, 0.98), rgba(15, 23, 42, 0.94));
  box-shadow:
    0 14px 32px rgba(2, 8, 23, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
}

.transitionSearchBox {
  position: relative;
  min-width: 0;
  height: 36px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.88)),
    rgba(15, 23, 42, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(2, 8, 23, 0.16);
}

.transitionSearchBox:focus-within {
  border-color: rgba(96, 165, 250, 0.66);
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(2, 8, 23, 0.22);
}

.transitionSearchIcon {
  display: grid;
  place-items: center;
  color: rgba(147, 197, 253, 0.82);
}

.transitionSearchBox input {
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #e5eefc;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.transitionSearchBox input::placeholder {
  color: rgba(203, 213, 225, 0.62);
  font-weight: 760;
}

.transitionToolButton {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.9)),
    rgba(15, 23, 42, 0.92);
  color: rgba(219, 234, 254, 0.88);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(2, 8, 23, 0.14);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.transitionToolButton:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.52);
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(2, 8, 23, 0.22);
}

.transitionToolButton:active {
  transform: translateY(0);
}

.transitionFavoriteButton {
  color: rgba(250, 204, 21, 0.9);
}

.transitionCountBadge {
  min-width: 42px;
  height: 36px;
  padding: 0 10px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 28%, rgba(96, 165, 250, 0.24), transparent 46%),
    rgba(15, 23, 42, 0.86);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(2, 8, 23, 0.14);
}

.panelPane[data-tab-panel="transitions"].is-active .transitionTargetBox {
  margin-top: 2px !important;
}

.panelPane[data-tab-panel="transitions"].is-active .professionalPanelIntro {
  display: none !important;
}

@media (max-width: 560px) {
  .panelPane[data-tab-panel="transitions"].is-active .transitionTopBar,
  .panelPane-transitions.is-active .transitionTopBar {
    grid-template-columns: minmax(0, 1fr) 34px 34px auto;
    gap: 6px;
    padding-inline: 10px;
  }

  .transitionToolButton {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .transitionCountBadge {
    min-width: 38px;
    height: 34px;
    padding-inline: 8px;
  }

  .transitionSearchBox {
    height: 34px;
    border-radius: 12px;
  }
}


/* Transition Rebuild Phase 3: category pills + smart filtering */
.panelPane[data-tab-panel="transitions"].is-active .transitionPillBar,
.panelPane-transitions.is-active .transitionPillBar {
  position: sticky;
  top: 34px;
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  margin: -8px -20px 6px;
  padding: 8px 12px 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.88)),
    rgba(15, 23, 42, 0.94);
  box-shadow:
    0 12px 26px rgba(2, 8, 23, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(14px);
}

.transitionPillBar::-webkit-scrollbar {
  display: none;
}

.transitionPill {
  flex: 0 0 auto;
  min-width: max-content;
  height: 28px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 999px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.78), rgba(15, 23, 42, 0.86)),
    rgba(15, 23, 42, 0.82);
  color: rgba(203, 213, 225, 0.82);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    transform 130ms ease,
    border-color 130ms ease,
    background 130ms ease,
    color 130ms ease,
    box-shadow 130ms ease;
}

.transitionPill:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.46);
  color: #f8fafc;
  box-shadow: 0 8px 18px rgba(2, 8, 23, 0.18);
}

.transitionPill.is-active {
  border-color: rgba(45, 212, 191, 0.62);
  background:
    radial-gradient(circle at 24% 20%, rgba(94, 234, 212, 0.28), transparent 48%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.9), rgba(37, 99, 235, 0.78));
  color: #f8fafc;
  box-shadow:
    0 0 0 3px rgba(45, 212, 191, 0.12),
    0 10px 24px rgba(14, 165, 233, 0.14);
}

.transitionPill-favorites {
  color: rgba(250, 204, 21, 0.92);
  border-color: rgba(250, 204, 21, 0.22);
}

.transitionPill-favorites.is-active {
  color: #fff7ed;
  border-color: rgba(250, 204, 21, 0.64);
  background:
    radial-gradient(circle at 24% 20%, rgba(250, 204, 21, 0.36), transparent 48%),
    linear-gradient(135deg, rgba(217, 119, 6, 0.86), rgba(124, 58, 237, 0.76));
  box-shadow:
    0 0 0 3px rgba(250, 204, 21, 0.1),
    0 10px 24px rgba(124, 58, 237, 0.16);
}

.transitionToolButton.is-active {
  border-color: rgba(45, 212, 191, 0.58);
  color: #f8fafc;
  background:
    radial-gradient(circle at 24% 20%, rgba(45, 212, 191, 0.24), transparent 48%),
    linear-gradient(135deg, rgba(14, 116, 144, 0.72), rgba(30, 64, 175, 0.74));
  box-shadow:
    0 0 0 3px rgba(45, 212, 191, 0.1),
    0 12px 26px rgba(2, 8, 23, 0.22);
}

.transitionFavoriteButton.is-active {
  border-color: rgba(250, 204, 21, 0.58);
  color: #fef3c7;
  background:
    radial-gradient(circle at 24% 20%, rgba(250, 204, 21, 0.26), transparent 48%),
    linear-gradient(135deg, rgba(146, 64, 14, 0.72), rgba(76, 29, 149, 0.74));
}

.transitionEmptyState {
  grid-column: 1 / -1;
  min-height: 148px;
  border: 1px dashed rgba(96, 165, 250, 0.32);
  border-radius: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.16), transparent 42%),
    rgba(15, 23, 42, 0.58);
  color: rgba(226, 232, 240, 0.88);
  text-align: center;
}

.transitionEmptyState strong {
  font-size: 14px;
  font-weight: 950;
  color: #f8fafc;
}

.transitionEmptyState span {
  max-width: 280px;
  color: rgba(203, 213, 225, 0.72);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.45;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionTargetBox {
  margin-top: 0 !important;
}

@media (max-width: 560px) {
  .panelPane[data-tab-panel="transitions"].is-active .transitionPillBar,
  .panelPane-transitions.is-active .transitionPillBar {
    top: 32px;
    gap: 6px;
    padding-inline: 10px;
  }

  .transitionPill {
    height: 27px;
    padding-inline: 10px;
    font-size: 10px;
  }
}


/* Transition Rebuild Phase 4: compact professional card grid */
.panelPane[data-tab-panel="transitions"].is-active,
.panelPane-transitions.is-active {
  container-type: inline-size;
}

.panelPane[data-tab-panel="transitions"].is-active > .panelSectionHeader,
.panelPane-transitions.is-active > .panelSectionHeader {
  display: none !important;
}

.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: start;
  align-items: stretch;
  min-height: 0 !important;
  padding: 2px 0 12px !important;
  overflow: visible;
  contain: layout style paint;
}

.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid:not(:empty) {
  display: grid !important;
}

.transitionPreset.transitionPreset-compact,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset {
  position: relative;
  min-width: 0;
  min-height: 108px !important;
  height: auto !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 14px !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 6px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 8, 23, 0.96)) !important;
  color: #e5eefc !important;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 8px 18px rgba(2, 8, 23, 0.12);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease,
    filter 150ms ease;
  content-visibility: auto;
  contain: layout style paint;
  contain-intrinsic-size: 122px 108px;
  backface-visibility: hidden;
}

.transitionPreset.transitionPreset-compact::before,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 22% 8%, rgba(45, 212, 191, 0.16), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(168, 85, 247, 0.12), transparent 42%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.transitionPreset.transitionPreset-compact:hover,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(96, 165, 250, 0.48) !important;
  filter: saturate(1.05);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.2),
    0 14px 30px rgba(2, 8, 23, 0.26),
    0 0 26px rgba(59, 130, 246, 0.14);
}

.transitionPreset.transitionPreset-compact:hover::before,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset:hover::before,
.transitionPreset.transitionPreset-compact.is-active::before,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.is-active::before {
  opacity: 1;
}

.transitionPreset.transitionPreset-compact.is-active,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.is-active {
  border-color: rgba(45, 212, 191, 0.72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.2), transparent 48%),
    linear-gradient(180deg, rgba(12, 34, 48, 0.96), rgba(2, 8, 23, 0.98)) !important;
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.28),
    0 0 0 4px rgba(45, 212, 191, 0.08),
    0 16px 34px rgba(2, 8, 23, 0.28) !important;
  color: #f8fafc !important;
}

.transitionPreset.transitionPreset-compact i,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset i,
.transitionPreset.transitionPreset-compact .transitionPreviewFallback,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPreviewFallback {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 58px !important;
  min-height: 58px !important;
  border-radius: 10px !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  overflow: hidden;
  background:
    var(--transition-preview-overlay, linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent)),
    linear-gradient(135deg, #17243c 0%, #647d9b 52%, #f4d18d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(2, 8, 23, 0.18) !important;
}

.transitionPreset.transitionPreset-compact.is-active i,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.is-active i {
  border-color: rgba(45, 212, 191, 0.62) !important;
}

.transitionPreset.transitionPreset-compact .transitionPreviewCanvas,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPreviewCanvas {
  border-radius: inherit;
}

.transitionPresetBody {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 6px;
  row-gap: 2px;
  align-items: center;
}

.transitionPreset .transitionPresetBody strong {
  grid-column: 1 / 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eef6ff !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em;
}

.transitionPreset .transitionPresetBody small {
  grid-column: 1 / 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(203, 213, 225, 0.68) !important;
  font-size: 8.8px !important;
  font-weight: 760 !important;
  line-height: 1.05 !important;
}

.transitionPreset .transitionPresetBody b {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 18px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  background: rgba(15, 23, 42, 0.74);
  color: rgba(147, 197, 253, 0.92);
  font-size: 7.5px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.transitionPresetFavorite {
  position: absolute !important;
  z-index: 7 !important;
  top: 9px;
  right: 9px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(250, 204, 21, 0.24);
  border-radius: 999px;
  display: grid !important;
  place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(250, 204, 21, 0.22), transparent 52%),
    rgba(2, 8, 23, 0.54);
  color: rgba(254, 240, 138, 0.78) !important;
  box-shadow: 0 8px 18px rgba(2, 8, 23, 0.22);
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  opacity: 0.72;
  transform: translateZ(0);
  pointer-events: none;
}

.transitionPreset:hover .transitionPresetFavorite,
.transitionPreset.is-active .transitionPresetFavorite {
  opacity: 1;
  border-color: rgba(250, 204, 21, 0.5);
  color: #fef3c7 !important;
}

.transitionPreset .transitionTimeBadge,
.transitionPreset .transitionSceneBadge {
  transform: translateY(2px) scale(0.9);
}

.panelPane[data-tab-panel="transitions"].is-active .transitionEmptyState {
  grid-column: 1 / -1;
}

@container (max-width: 520px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container (max-width: 390px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container (max-width: 250px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .transitionPreset.transitionPreset-compact,
  .panelPane[data-tab-panel="transitions"].is-active .transitionPreset {
    min-height: 102px !important;
    grid-template-rows: 54px minmax(0, 1fr) !important;
    padding: 5px !important;
  }

  .transitionPreset.transitionPreset-compact i,
  .panelPane[data-tab-panel="transitions"].is-active .transitionPreset i,
  .transitionPreset.transitionPreset-compact .transitionPreviewFallback,
  .panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPreviewFallback {
    height: 54px !important;
    min-height: 54px !important;
  }
}

@media (max-width: 320px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: 1fr !important;
  }
}



/* Transition rebuild Phase 5: lag-free thumbnail rendering */
.panelPane[data-tab-panel="transitions"].is-active .transitionPresetGrid {
  scroll-behavior: auto;
  overscroll-behavior: contain;
  contain: layout style paint;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPreset {
  transform: translateZ(0);
  will-change: auto;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPreset i {
  contain: strict;
  content-visibility: auto;
  contain-intrinsic-size: 96px 58px;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPreviewCanvas {
  opacity: 0.98;
  transition: opacity 120ms ease;
  will-change: contents;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPresetGrid.is-transition-preview-resizing .transitionPreviewCanvas {
  opacity: 0.72;
  transition-duration: 0ms;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPresetGrid.is-transition-preview-resizing .transitionPreset {
  pointer-events: none;
}


/* Transition Rebuild Phase 7: persistent favorites + search clear */
.panelPane[data-tab-panel="transitions"] .transitionSearchBox,
.panelPane-transitions .transitionSearchBox {
  grid-template-columns: 30px minmax(0, 1fr) 28px !important;
}

.transitionSearchClear {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.72);
  color: rgba(226, 232, 240, 0.72);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease, color 140ms ease;
}

.transitionSearchBox.has-query .transitionSearchClear,
.transitionSearchClear:not([hidden]) {
  opacity: 1;
  transform: scale(1);
}

.transitionSearchClear:hover,
.transitionSearchClear:focus-visible {
  background: rgba(96, 165, 250, 0.22);
  color: #ffffff;
  outline: none;
}

.transitionSearchClear[hidden] {
  display: grid !important;
  opacity: 0;
  pointer-events: none;
}

.transitionPresetFavorite {
  pointer-events: auto !important;
  cursor: pointer;
  user-select: none;
}

.transitionPresetFavorite:hover,
.transitionPresetFavorite:focus-visible,
.transitionPresetFavorite.is-active,
.transitionPreset.is-favorite .transitionPresetFavorite {
  opacity: 1 !important;
  border-color: rgba(250, 204, 21, 0.72) !important;
  color: #fef3c7 !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(250, 204, 21, 0.34), transparent 52%),
    rgba(120, 53, 15, 0.74) !important;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.12),
    0 10px 22px rgba(2, 8, 23, 0.3) !important;
  outline: none;
}

.transitionPreset.is-favorite {
  border-color: rgba(250, 204, 21, 0.34) !important;
}

.transitionFavoriteButton[data-favorite-count]:not([data-favorite-count="0"])::after {
  content: attr(data-favorite-count);
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #111827;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(2, 8, 23, 0.32);
}

.transitionEmptyState strong {
  letter-spacing: -0.02em;
}

.transitionEmptyState span {
  max-width: 240px;
  text-align: center;
}

.transitionFavoriteButton {
  position: relative;
}


/* Transition Rebuild Phase 8: professional apply workflow polish */
.panelPane[data-tab-panel="transitions"].is-active .transitionTargetBox,
.panelPane-transitions.is-active .transitionTargetBox {
  display: grid;
  gap: 8px;
  padding: 10px 12px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(96, 165, 250, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 8, 23, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(2, 8, 23, 0.18) !important;
}

.transitionWorkflowHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.transitionWorkflowHeader strong {
  overflow: hidden;
  margin: 0 !important;
  color: #f8fafc !important;
  font-size: 12px !important;
  line-height: 1.15;
  font-weight: 950 !important;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transitionSelectedChip {
  display: inline-grid !important;
  max-width: 142px;
  min-height: 22px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.16);
  color: #bfdbfe !important;
  font-size: 9px !important;
  line-height: 1;
  font-weight: 950 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transitionWorkflowMessage {
  display: block !important;
  color: rgba(203, 213, 225, 0.74) !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
}

.transitionAppliedBadges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.transitionAppliedBadge {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "edge name"
    "edge meta";
  align-items: center;
  column-gap: 7px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.52);
  color: #e2e8f0 !important;
  overflow: hidden;
}

.transitionAppliedBadge b {
  grid-area: edge;
  display: inline-grid;
  min-width: 31px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.18);
  color: rgba(226, 232, 240, 0.82);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.transitionAppliedBadge em {
  grid-area: name;
  min-width: 0;
  color: #f8fafc;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transitionAppliedBadge small {
  grid-area: meta;
  color: rgba(203, 213, 225, 0.62);
  font-size: 9px;
  font-weight: 820;
  line-height: 1;
}

.transitionAppliedBadge.is-applied {
  border-color: rgba(34, 197, 94, 0.28);
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 197, 94, 0.18), transparent 42%),
    rgba(15, 23, 42, 0.62);
}

.transitionAppliedBadge.is-applied b {
  background: rgba(34, 197, 94, 0.18);
  color: #bbf7d0;
}

.transitionAppliedBadge.is-empty {
  opacity: 0.68;
}

.transitionAppliedBadge.is-empty em {
  color: rgba(203, 213, 225, 0.58);
}

.panelPane[data-tab-panel="transitions"].is-active .transitionActionRow,
.panelPane-transitions.is-active .transitionActionRow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panelPane[data-tab-panel="transitions"].is-active .transitionApplyButton,
.panelPane-transitions.is-active .transitionApplyButton {
  position: relative;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.18), rgba(37, 99, 235, 0.12)),
    rgba(15, 23, 42, 0.76);
  color: #eff6ff;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, filter 140ms ease;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionApplyButton.is-ready:not(:disabled):hover,
.panelPane-transitions.is-active .transitionApplyButton.is-ready:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.52);
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.18),
    0 0 0 3px rgba(96, 165, 250, 0.12);
}

.panelPane[data-tab-panel="transitions"].is-active .transitionApplyButton:disabled,
.panelPane-transitions.is-active .transitionApplyButton:disabled {
  opacity: 0.42;
  filter: saturate(0.68);
  cursor: not-allowed;
  box-shadow: none;
}

.panelPane[data-tab-panel="transitions"].is-active #transitionRemoveButton.is-ready,
.panelPane-transitions.is-active #transitionRemoveButton.is-ready {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.18), rgba(127, 29, 29, 0.14)),
    rgba(15, 23, 42, 0.76);
  color: #fee2e2;
}

.panelPane[data-tab-panel="transitions"].is-active #transitionRemoveButton:not(.is-ready),
.panelPane-transitions.is-active #transitionRemoveButton:not(.is-ready) {
  background: rgba(15, 23, 42, 0.52);
  color: rgba(203, 213, 225, 0.72);
}

@container (max-width: 360px) {
  .transitionWorkflowHeader {
    grid-template-columns: 1fr;
  }

  .transitionSelectedChip {
    justify-self: start;
    max-width: 100%;
  }

  .transitionAppliedBadges {
    grid-template-columns: 1fr;
  }
}


/* Transition Rebuild Phase 9: resize + responsive QA hardening */
.panelPane[data-tab-panel="transitions"].is-active,
.panelPane-transitions.is-active {
  min-width: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionTopBar,
.panelPane-transitions.is-active .transitionTopBar {
  grid-template-columns: minmax(0, 1fr) 34px 34px minmax(34px, auto) !important;
  min-width: 0;
  contain: layout style paint;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionSearchBox,
.panelPane-transitions.is-active .transitionSearchBox {
  min-width: 0;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionSearchBox input,
.panelPane-transitions.is-active .transitionSearchBox input {
  min-width: 0;
  width: 100%;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPillBar,
.panelPane-transitions.is-active .transitionPillBar {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  contain: layout style paint;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPillBar::-webkit-scrollbar,
.panelPane-transitions.is-active .transitionPillBar::-webkit-scrollbar {
  display: none;
}

.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-auto-flow: row;
  grid-auto-rows: minmax(102px, auto);
  overflow: visible;
  contain: layout style paint;
  content-visibility: visible;
}

@container (min-width: 521px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@container (max-width: 520px) and (min-width: 391px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container (max-width: 390px) and (min-width: 251px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container (max-width: 250px) {
  .panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
  .panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
    grid-template-columns: 1fr !important;
  }
}

.panelPane[data-tab-panel="transitions"].is-active .transitionPreset,
.panelPane-transitions.is-active .transitionPreset {
  max-width: 100%;
  min-width: 0;
}

.editorApp.is-transition-panel-resizing .transitionPreset,
.panelPane[data-tab-panel="transitions"].is-transition-panel-resizing .transitionPreset,
#transitionPresetGrid.is-transition-preview-resizing .transitionPreset {
  transition: none !important;
  animation: none !important;
  transform: translateZ(0) !important;
  filter: none !important;
}

.editorApp.is-transition-panel-resizing .transitionPreset::before,
.panelPane[data-tab-panel="transitions"].is-transition-panel-resizing .transitionPreset::before,
#transitionPresetGrid.is-transition-preview-resizing .transitionPreset::before {
  transition: none !important;
}

#transitionPresetGrid.is-transition-preview-resizing .transitionPreviewCanvas {
  opacity: 0.92;
  transition: none !important;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionDurationControl,
.panelPane[data-tab-panel="transitions"].is-active .transitionActionRow,
.panelPane-transitions.is-active .transitionDurationControl,
.panelPane-transitions.is-active .transitionActionRow {
  min-width: 0;
  max-width: calc(100% + 40px);
  contain: layout style paint;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionActionRow,
.panelPane-transitions.is-active .transitionActionRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.panelPane[data-tab-panel="transitions"].is-active .transitionActionRow button,
.panelPane-transitions.is-active .transitionActionRow button {
  min-width: 0;
  white-space: nowrap;
}

@container (max-width: 360px) {
  .panelPane[data-tab-panel="transitions"].is-active .transitionTopBar,
  .panelPane-transitions.is-active .transitionTopBar {
    grid-template-columns: minmax(0, 1fr) 32px 32px auto !important;
    gap: 6px;
  }

  .panelPane[data-tab-panel="transitions"].is-active .transitionActionRow,
  .panelPane-transitions.is-active .transitionActionRow {
    grid-template-columns: 1fr;
  }
}

/* Stage 2.5B — editor preview recording state. */
.toolButtonPreviewRecord[data-recording-active="true"],
.toolButtonPreviewRecord.is-recording {
  color: #fff;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.96), rgba(244, 63, 94, 0.88));
  border-color: rgba(255, 255, 255, 0.18);
}


/* ===== Transition panel + inspector refresh (clean + dynamic) ===== */
.panelPane-transitions .transitionPillBar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.panelPane-transitions .transitionPillBar::-webkit-scrollbar { height: 0; display: none; }
.panelPane-transitions .transitionPill {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
  color: rgba(233,237,250,0.78);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  scroll-snap-align: start;
}
.panelPane-transitions .transitionPill:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(140,160,255,0.5);
  background: rgba(120,140,255,0.12);
}
.panelPane-transitions .transitionPill.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg,#6d8bff,#a06bff);
  box-shadow: 0 6px 18px rgba(120,110,255,0.35);
}

.transitionInspectorPane.is-active { display: flex; flex-direction: column; gap: 14px; }
.transitionInspectorHero {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(109,139,255,0.18), rgba(160,107,255,0.12));
  border: 1px solid rgba(140,160,255,0.22);
}
.transitionInspectorEyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(180,195,255,0.92);
}
.transitionInspectorHero strong { font-size: 19px; font-weight: 750; color: #fff; line-height: 1.15; }
.transitionInspectorMeta { font-size: 12px; color: rgba(220,226,245,0.62); line-height: 1.4; }
.transitionInspectorField { display: flex; flex-direction: column; gap: 8px; }

.transitionInspectorPane .transitionDurationControl {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.transitionInspectorPane .transitionDurationControl input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg,#6d8bff,#a06bff);
  cursor: pointer;
}
.transitionInspectorPane .transitionDurationControl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid #7c83ff; box-shadow: 0 2px 8px rgba(120,110,255,0.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.transitionInspectorPane .transitionDurationControl input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15); box-shadow: 0 0 0 6px rgba(124,131,255,0.18);
}
.transitionInspectorPane #transitionDurationLabel {
  min-width: 44px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; color: #eaf0ff;
}

.transitionInspectorPane .transitionActionRow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.transitionInspectorPane .transitionApplyButton {
  padding: 10px 12px; border-radius: 11px; font-weight: 650; font-size: 13px; cursor: pointer;
  color: #fff; border: 1px solid transparent;
  background: linear-gradient(135deg,#6d8bff,#a06bff);
  transition: transform .15s ease, filter .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.transitionInspectorPane .transitionApplyButton:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 8px 20px rgba(120,110,255,0.3); }
.transitionInspectorPane .transitionApplyButton:disabled { opacity: 0.45; cursor: not-allowed; }
.transitionInspectorPane .transitionApplyButton.is-muted {
  grid-column: 1 / -1; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);
  color: rgba(233,237,250,0.85);
}
.transitionInspectorPane .transitionApplyButton.is-muted:hover:not(:disabled) { background: rgba(255,80,90,0.16); border-color: rgba(255,90,100,0.5); color:#ffd9dc; box-shadow:none; }


/* ===== Transition panel UX rebuild (Phases 1-4): scrollbar + uniform pro thumbnails ===== */

/* Phase 1: always-visible, styled scrollbar for the transitions panel */
.panelPane[data-tab-panel="transitions"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.6) rgba(15, 23, 42, 0.4);
}
.panelPane[data-tab-panel="transitions"]::-webkit-scrollbar {
  width: 11px;
}
.panelPane[data-tab-panel="transitions"]::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 999px;
  margin: 4px 0;
}
.panelPane[data-tab-panel="transitions"]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.65), rgba(45, 212, 191, 0.6));
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.4);
  background-clip: padding-box;
}
.panelPane[data-tab-panel="transitions"]::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.95), rgba(45, 212, 191, 0.9));
  background-clip: padding-box;
}

/* Phase 3: uniform, professional 16:9 thumbnails (no distortion, consistent size) */
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset {
  grid-template-rows: auto minmax(0, 1fr) !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset i,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPreviewFallback {
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0 !important;
  contain: layout paint style !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreviewCanvas {
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

/* Phase 4: keep the grid fluid + lag-free while the panel is resized */
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid {
  grid-auto-rows: auto !important;
}
.editorApp.is-transition-panel-resizing .transitionPreset i,
.panelPane[data-tab-panel="transitions"].is-transition-panel-resizing .transitionPreset i {
  transition: none !important;
}


/* ===== v0.6.1 PATCH: reveal transition section header (build-stamp confirmation) ===== */
.panelPane[data-tab-panel="transitions"].is-active > .panelSectionHeader,
.panelPane-transitions.is-active > .panelSectionHeader {
  display: flex !important;
  margin: 6px 0 8px !important;
}
.panelPane[data-tab-panel="transitions"].is-active > .panelSectionHeader strong {
  color: #e2e8f0 !important;
  font-size: 12px !important;
}

/* ===================== PHASE 2 — Fresh transition card redesign v0.7.1 ===================== */
.transitionPresetGrid {
  gap: 14px 12px !important;
}

.transitionPreset {
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  padding: 8px 8px 9px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.028) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.16) !important;
  filter: none !important;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
}

.transitionPreset i,
.transitionPreviewFallback {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 9px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-shadow: none !important;
}

.transitionPreviewCanvas {
  border-radius: 8px !important;
}

.transitionPreset .transitionPresetBody {
  row-gap: 3px !important;
  padding: 0 1px !important;
  column-gap: 6px !important;
}
.transitionPreset .transitionPresetBody strong {
  color: #e9eff8 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.15 !important;
}
.transitionPreset .transitionPresetBody small {
  color: rgba(148, 163, 184, 0.74) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
.transitionPreset .transitionPresetBody b {
  height: 16px !important;
  max-width: 48px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.1) !important;
  color: rgba(203, 213, 225, 0.82) !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

.transitionPresetFavorite {
  top: 7px !important;
  right: 7px !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: rgba(2, 8, 23, 0.4) !important;
  color: rgba(226, 232, 240, 0.62) !important;
  box-shadow: none !important;
  font-size: 9px !important;
  opacity: 0 !important;
  transition: opacity 130ms ease, color 130ms ease, border-color 130ms ease, background 130ms ease !important;
}
.transitionPreset:hover .transitionPresetFavorite {
  opacity: 1 !important;
}
.transitionPreset.is-favorite .transitionPresetFavorite,
.transitionPresetFavorite.is-active {
  opacity: 1 !important;
  color: #fcd34d !important;
  border-color: rgba(250, 204, 21, 0.45) !important;
  background: rgba(250, 204, 21, 0.12) !important;
}

.transitionPreset:hover {
  transform: translateY(-2px) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.3) !important;
  filter: none !important;
}
.transitionPreset.is-active {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), 0.6) !important;
  background: rgba(var(--accent-rgb), 0.08) !important;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.34), 0 8px 18px rgba(2, 6, 23, 0.3) !important;
}
/* =================== END PHASE 2 card redesign =================== */

/* ===================== PHASE 3 — Always-visible transition panel scrollbar v0.7.2 ===================== */
.panelPane[data-tab-panel="transitions"].is-active,
.panelPane-transitions.is-active {
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, 0.6) rgba(15, 23, 42, 0.25) !important;
}
.panelPane[data-tab-panel="transitions"].is-active::-webkit-scrollbar,
.panelPane-transitions.is-active::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}
.panelPane[data-tab-panel="transitions"].is-active::-webkit-scrollbar-track,
.panelPane-transitions.is-active::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.28) !important;
  border-radius: 999px !important;
  margin: 4px 0 !important;
}
.panelPane[data-tab-panel="transitions"].is-active::-webkit-scrollbar-thumb,
.panelPane-transitions.is-active::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55) !important;
  border: 3px solid transparent !important;
  background-clip: padding-box !important;
  border-radius: 999px !important;
  min-height: 42px !important;
}
.panelPane[data-tab-panel="transitions"].is-active::-webkit-scrollbar-thumb:hover,
.panelPane-transitions.is-active::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.82) !important;
  background-clip: padding-box !important;
}
.panelPane[data-tab-panel="transitions"].is-active::-webkit-scrollbar-corner,
.panelPane-transitions.is-active::-webkit-scrollbar-corner {
  background: transparent !important;
}
/* =================== END PHASE 3 scrollbar =================== */

/* ===================== PHASE 3 FIX — grid-scroll scrollbar + unclipped titles v0.7.3 ===================== */
/* Header stays fixed at top; the preset grid scrolls so the scrollbar is ALWAYS visible (like other panels). */
.panelPane[data-tab-panel="transitions"].is-active,
.panelPane-transitions.is-active {
  overflow: hidden !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionTopBar,
.panelPane-transitions.is-active .transitionTopBar,
.panelPane[data-tab-panel="transitions"].is-active .transitionPillBar,
.panelPane-transitions.is-active .transitionPillBar,
.panelPane[data-tab-panel="transitions"].is-active > .panelSectionHeader,
.panelPane-transitions.is-active > .panelSectionHeader {
  flex: 0 0 auto !important;
}
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid,
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, 0.75) rgba(15, 23, 42, 0.32) !important;
  padding-right: 6px !important;
  padding-bottom: 14px !important;
}
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar,
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar-track,
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.32) !important;
  border-radius: 999px !important;
  margin: 2px 0 !important;
}
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar-thumb,
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.62) !important;
  border: 3px solid transparent !important;
  background-clip: padding-box !important;
  border-radius: 999px !important;
  min-height: 44px !important;
}
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar-thumb:hover,
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.85) !important;
  background-clip: padding-box !important;
}
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar-corner,
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Card height auto so the title row is NEVER collapsed/masked, even on resize */
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset,
.panelPane-transitions.is-active .transitionPreset {
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  row-gap: 7px !important;
}

/* Body: title fully visible (wraps up to 2 lines, never clipped); hint hidden for a clean title-first look */
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPresetBody,
.panelPane-transitions.is-active .transitionPreset .transitionPresetBody {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  overflow: visible !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPresetBody strong,
.panelPane-transitions.is-active .transitionPreset .transitionPresetBody strong {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.18 !important;
  width: 100% !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPresetBody small,
.panelPane-transitions.is-active .transitionPreset .transitionPresetBody small {
  display: none !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPresetBody b,
.panelPane-transitions.is-active .transitionPreset .transitionPresetBody b {
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: flex-start !important;
}
/* =================== END PHASE 3 FIX =================== */

/* ===================== PHASE 3.1 — card titles ALWAYS visible (flex-column) v0.7.4 ===================== */
/* Root cause: card was a grid; the 16:9 thumbnail stretched in the auto row and overflow:hidden clipped the title.
   Fix: flex-column card — fixed thumbnail on top, single-line 11px title always shown below. Hover still plays the real demo. */
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset,
.panelPane-transitions.is-active .transitionPreset {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-self: start !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset > i,
.panelPane-transitions.is-active .transitionPreset > i,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset > .transitionPreviewFallback,
.panelPane-transitions.is-active .transitionPreset > .transitionPreviewFallback {
  flex: 0 0 auto !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPresetBody,
.panelPane-transitions.is-active .transitionPreset .transitionPresetBody {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 16px !important;
  overflow: visible !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPresetBody strong,
.panelPane-transitions.is-active .transitionPreset .transitionPresetBody strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: none !important;
  color: #eef6ff !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPresetBody small,
.panelPane-transitions.is-active .transitionPreset .transitionPresetBody small {
  display: none !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset .transitionPresetBody b,
.panelPane-transitions.is-active .transitionPreset .transitionPresetBody b {
  flex: 0 0 auto !important;
  align-self: center !important;
  max-width: 44px !important;
}
/* =================== END PHASE 3.1 =================== */

/* ===================== PHASE 1 — Foundation Reset (clean card, title ALWAYS visible) v0.8.0 ===================== */
/* New unique classes (zlib-*) that NO legacy CSS targets. Card is flex-column: fixed 16:9 thumbnail on top,
   single-line name always visible below, small category tag. Highest specificity + !important so it wins the cascade. */
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card,
.panelPane-transitions.is-active .transitionPreset.zlib-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  align-self: start !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.18) !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card:hover,
.panelPane-transitions.is-active .transitionPreset.zlib-card:hover {
  border-color: rgba(56, 189, 248, 0.45) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card.is-active,
.panelPane-transitions.is-active .transitionPreset.zlib-card.is-active {
  border-color: rgba(45, 212, 191, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.55) !important;
}
/* Thumbnail: clean 16:9, fixed height so it can NEVER eat the title row */
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card > i,
.panelPane-transitions.is-active .transitionPreset.zlib-card > i,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card > .transitionPreviewFallback,
.panelPane-transitions.is-active .transitionPreset.zlib-card > .transitionPreviewFallback {
  flex: 0 0 auto !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.85)) !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card .transitionPreviewCanvas,
.panelPane-transitions.is-active .transitionPreset.zlib-card .transitionPreviewCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
}
/* Meta row: name (left, 1 line, ellipsis) + category tag (right) */
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card .zlibMeta,
.panelPane-transitions.is-active .transitionPreset.zlib-card .zlibMeta {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 16px !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card .zlibName,
.panelPane-transitions.is-active .transitionPreset.zlib-card .zlibName {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #eef6ff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  text-align: left !important;
  text-transform: capitalize !important;
}
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card .zlibTag,
.panelPane-transitions.is-active .transitionPreset.zlib-card .zlibTag {
  flex: 0 0 auto !important;
  max-width: 54px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  background: rgba(15, 23, 42, 0.5) !important;
  color: rgba(147, 197, 253, 0.92) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
/* ===================== END PHASE 1 ===================== */

/* ===================== PHASE 3+4 — Top category bar, search, favorites, polish v0.9.0 ===================== */
/* Scoped to the active transitions panel only — left sidebar/options untouched. */
.panelPane-transitions.is-active .transitionTopBar,
.panelPane[data-tab-panel="transitions"].is-active .transitionTopBar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  padding: 2px 2px 10px !important;
  margin: 0 !important;
}
/* Search box */
.panelPane-transitions.is-active .transitionSearchBox {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}
.panelPane-transitions.is-active .transitionSearchBox:focus-within {
  border-color: rgba(56, 189, 248, 0.55) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.panelPane-transitions.is-active .transitionSearchBox input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  color: #e8eef7 !important;
  font-size: 12.5px !important;
}
.panelPane-transitions.is-active .transitionSearchBox input::placeholder { color: rgba(148, 163, 184, 0.7) !important; }
.panelPane-transitions.is-active .transitionSearchIcon { color: rgba(148, 163, 184, 0.85) !important; display: flex !important; flex: 0 0 auto !important; }
.panelPane-transitions.is-active .transitionSearchClear {
  flex: 0 0 auto !important;
  width: 18px !important; height: 18px !important;
  border: 0 !important; border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.22) !important;
  color: #e8eef7 !important; cursor: pointer !important;
  font-size: 13px !important; line-height: 1 !important;
  display: grid !important; place-items: center !important;
}
.panelPane-transitions.is-active .transitionSearchBox:not(.has-query) .transitionSearchClear { display: none !important; }
/* Tool buttons (filter / favorites) */
.panelPane-transitions.is-active .transitionToolButton {
  flex: 0 0 auto !important;
  width: 36px !important; height: 36px !important;
  display: grid !important; place-items: center !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(203, 213, 225, 0.92) !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}
.panelPane-transitions.is-active .transitionToolButton:hover { border-color: rgba(56, 189, 248, 0.4) !important; color: #e8eef7 !important; }
.panelPane-transitions.is-active .transitionToolButton.is-active {
  border-color: transparent !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.95), rgba(56, 189, 248, 0.9)) !important;
  color: #04201c !important;
}
/* Count badge */
.panelPane-transitions.is-active .transitionCountBadge {
  flex: 0 0 auto !important;
  min-width: 38px !important; height: 36px !important;
  padding: 0 12px !important;
  display: grid !important; place-items: center !important;
  border-radius: 10px !important;
  background: rgba(56, 189, 248, 0.14) !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  color: #bae6fd !important;
  font-size: 13px !important; font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
/* ---- Category pill bar (top, horizontal scroll, never wraps over cards) ---- */
.panelPane-transitions.is-active .transitionPillBar,
.panelPane[data-tab-panel="transitions"].is-active .transitionPillBar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148,163,184,0.45) transparent !important;
}
.panelPane-transitions.is-active .transitionPillBar::-webkit-scrollbar { height: 6px !important; }
.panelPane-transitions.is-active .transitionPillBar::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.4) !important; border-radius: 999px !important; }
.panelPane-transitions.is-active .transitionPillBar::-webkit-scrollbar-track { background: transparent !important; }
.panelPane-transitions.is-active .transitionPill {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(203, 213, 225, 0.92) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}
.panelPane-transitions.is-active .transitionPill:hover { border-color: rgba(56, 189, 248, 0.4) !important; color: #e8eef7 !important; }
.panelPane-transitions.is-active .transitionPill.is-active {
  border-color: transparent !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.95), rgba(56, 189, 248, 0.92)) !important;
  color: #04201c !important;
  font-weight: 750 !important;
}
.panelPane-transitions.is-active .transitionPillCount {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 16px !important;
  height: 15px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(2, 6, 23, 0.28) !important;
  color: inherit !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  opacity: 0.92 !important;
}
.panelPane-transitions.is-active .transitionPill.is-active .transitionPillCount {
  background: rgba(255, 255, 255, 0.32) !important;
  color: #04201c !important;
}
/* ---- Grid spacing (scroll already handled by Phase 3 FIX) ---- */
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid {
  gap: 10px !important;
  padding: 2px 6px 14px 0 !important;
  align-content: start !important;
}
/* ---- Section header ---- */
.panelPane-transitions.is-active > .panelSectionHeader {
  flex: 0 0 auto !important;
  padding: 0 0 8px 0 !important;
}
/* ---- Card focus ring (keyboard) ---- */
.panelPane-transitions.is-active .transitionPreset.zlib-card:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.7) !important;
  outline-offset: 2px !important;
}
/* ---- Empty state ---- */
.panelPane-transitions.is-active .transitionEmptyState {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-align: center !important;
  padding: 44px 22px !important;
  color: rgba(148, 163, 184, 0.92) !important;
}
.panelPane-transitions.is-active .transitionEmptyState strong { color: #e8eef7 !important; font-size: 14px !important; font-weight: 700 !important; }
.panelPane-transitions.is-active .transitionEmptyState span { font-size: 12px !important; max-width: 290px !important; line-height: 1.5 !important; }
/* ===================== END PHASE 3+4 ===================== */

/* ===================== PHASE 5 FIX — overlap + smooth resize v0.9.2 ===================== */
/* Overlap cause: a FIXED contain-intrinsic-size (122px 108px) made off-screen cards report */
/* a wrong short height, so 160 cards stacked on scroll. The `auto` keyword makes the browser */
/* remember each card's REAL rendered size — fixing overlap while KEEPING content-visibility on */
/* for buttery-smooth resizing (off-screen cards skip layout/paint). */
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset,
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid .transitionPreset,
.panelPane-transitions.is-active .transitionPreset.zlib-card,
.panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card {
  content-visibility: auto !important;
  contain: layout style paint !important;
  contain-intrinsic-size: auto 134px !important;
  height: auto !important;
  min-height: 0 !important;
}
/* Rows sized to real content so nothing can stack. */
.panelPane-transitions.is-active #transitionPresetGrid.transitionPresetGrid,
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.transitionPresetGrid {
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
}
/* While dragging panel size: flatten cards (no shadow/gradient/canvas) so the browser */
/* repaints almost nothing per frame → weightless, smooth resize. Full look returns on settle. */
.panelPane-transitions.is-active #transitionPresetGrid.is-transition-preview-resizing .transitionPreset,
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.is-transition-preview-resizing .transitionPreset,
.editorApp.is-transition-panel-resizing #transitionPresetGrid .transitionPreset {
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
  background: rgba(13, 20, 38, 0.92) !important;
}
.panelPane-transitions.is-active #transitionPresetGrid.is-transition-preview-resizing .transitionPreset::before,
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.is-transition-preview-resizing .transitionPreset::before,
.editorApp.is-transition-panel-resizing #transitionPresetGrid .transitionPreset::before {
  display: none !important;
}
.panelPane-transitions.is-active #transitionPresetGrid.is-transition-preview-resizing .transitionPreviewCanvas,
.panelPane[data-tab-panel="transitions"].is-active #transitionPresetGrid.is-transition-preview-resizing .transitionPreviewCanvas,
.editorApp.is-transition-panel-resizing #transitionPresetGrid .transitionPreviewCanvas {
  visibility: hidden !important;
}
/* ===================== END PHASE 5 FIX ===================== */


/* ============================================================
   ZED EDITOR THEME SKINS — Lumen / Glacier / Noir / Velvet
   Palette-only overrides layered on base light/dark chrome.
   Structure & components untouched; only color tokens change.
   ============================================================ */

/* LUMEN — warm light (default) */
.editorApp[data-theme="light"][data-skin="lumen"] {
  color-scheme: light;
  --bg: #f4f3ef;
  --panel: #fbfbf9;
  --panel-2: #ffffff;
  --text: #1b1b19;
  --muted: #8c8a82;
  --line: rgba(27, 27, 25, 0.10);
  --line-soft: rgba(27, 27, 25, 0.06);
  --accent: #a9824c;
  --accent-dark: #896a3c;
  --accent-rgb: 169, 130, 76;
  --accent-contrast: #2a2113;
  --control-border: rgba(27, 27, 25, 0.16);
  --control-shadow: 0 1px 2px rgba(27, 27, 25, 0.06), 0 8px 22px rgba(27, 27, 25, 0.05);
  --shadow: 0 10px 28px rgba(27, 27, 25, 0.08);
  background:
    radial-gradient(circle at 50% -18%, rgba(169, 130, 76, 0.10), transparent 34%),
    linear-gradient(180deg, #f8f7f3 0%, #f3f1ea 55%, #efece3 100%);
  color: var(--text);
}

/* GLACIER — bright cool SaaS */
.editorApp[data-theme="light"][data-skin="glacier"] {
  color-scheme: light;
  --bg: #e9eef5;
  --panel: #ffffff;
  --panel-2: #f4f8fc;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.10);
  --line-soft: rgba(15, 23, 42, 0.06);
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-rgb: 37, 99, 235;
  --accent-contrast: #eaf1ff;
  --control-border: rgba(37, 99, 235, 0.20);
  --control-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px rgba(15, 23, 42, 0.07);
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  background:
    radial-gradient(circle at 50% -18%, rgba(37, 99, 235, 0.12), transparent 34%),
    linear-gradient(180deg, #f3f7fc 0%, #e9eef5 55%, #e2e9f2 100%);
  color: var(--text);
}

/* NOIR — deep steel-blue dark */
.editorApp[data-theme="dark"][data-skin="noir"] {
  color-scheme: dark;
  --bg: #0b0b0c;
  --panel: #141417;
  --panel-2: #1a1a1f;
  --text: #ececea;
  --muted: #9a9aa2;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.04);
  --accent: #9fb7c9;
  --accent-dark: #7e97aa;
  --accent-rgb: 159, 183, 201;
  --accent-contrast: #0b0b0c;
  --control-border: rgba(255, 255, 255, 0.12);
  --control-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.5);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  background: var(--bg);
  color: var(--text);
}

/* VELVET — plum + champagne gold luxe */
.editorApp[data-theme="night"][data-skin="velvet"] {
  color-scheme: dark;
  --bg: #140e1c;
  --panel: #1b1426;
  --panel-2: #241a33;
  --text: #f4ecfb;
  --muted: #a492bc;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.04);
  --accent: #e2a95c;
  --accent-dark: #c98f45;
  --accent-rgb: 226, 169, 92;
  --accent-contrast: #241a33;
  --control-border: rgba(255, 255, 255, 0.12);
  --control-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.55);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  background:
    radial-gradient(circle at 50% -12%, rgba(226, 169, 92, 0.08), transparent 36%),
    var(--bg);
  color: var(--text);
}


/* ============================================================
   PHASE 2 — SHELL CHROME REBIND (theme-variable driven)
   Replaces hardcoded shell colors (legacy white rail, coral
   brand, fixed side panel) with theme tokens so all 4 skins
   look distinct, minimal & classy. DOM/structure untouched.
   Scoped [data-theme][data-skin] (0,4,0) + end-of-file order
   to win over base rules and the light-cleanup block.
   ============================================================ */
.editorApp[data-theme][data-skin] {
  --radius: 10px;
}

/* Rail (left icon column) */
.editorApp[data-theme][data-skin] .rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
}

/* Brand mark — themed accent instead of legacy coral */
.editorApp[data-theme][data-skin] .brandMark {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--accent-contrast);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.24);
}

/* Rail buttons + icons */
.editorApp[data-theme][data-skin] .railButton {
  color: var(--muted);
}
.editorApp[data-theme][data-skin] .railButton:hover {
  color: var(--text);
}
.editorApp[data-theme][data-skin] .railButton.is-active {
  color: var(--accent);
}
.editorApp[data-theme][data-skin] .railIcon {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line-soft);
}
.editorApp[data-theme][data-skin] .railButton:hover .railIcon {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  color: var(--text);
}
.editorApp[data-theme][data-skin] .railButton.is-active .railIcon {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--accent-contrast);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.26);
}

/* Side panel surface */
.editorApp[data-theme][data-skin] .sidePanel {
  background: var(--panel-2);
  border-right: 1px solid var(--line);
}

/* Top bar */
.editorApp[data-theme][data-skin] .topBar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.editorApp[data-theme][data-skin] .titleInput {
  color: var(--text);
}


/* ============================================================
   PHASE 7 — Transitions & Projects media-browser panels
   Made theme-aware WITHOUT recoloring their 160+ light-on-dark
   child rules: panels stay dark (text stays legible) but adopt
   each theme's own dark tint + signature accent glow.
   Scoped 0,5,0 + end-of-file to win over base/dark/night.
   ============================================================ */
/* CAPCUT — dark neutral + vivid blue (CapCut-style) */
.editorApp[data-theme="dark"][data-skin="capcut"] {
  color-scheme: dark;
  --bg: #16161a;
  --panel: #1e1e22;
  --panel-2: #26262b;
  --text: #f0f0f2;
  --muted: #8b8b93;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.04);
  --accent: #3e7bfa;
  --accent-dark: #2f66e0;
  --accent-rgb: 62, 123, 250;
  --accent-contrast: #eaf1ff;
  --control-border: rgba(255, 255, 255, 0.12);
  --control-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.55);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  background:
    radial-gradient(circle at 50% -12%, rgba(62, 123, 250, 0.10), transparent 36%),
    var(--bg);
  color: var(--text);
}

.editorApp[data-theme][data-skin="lumen"]   { --browser-surface: #1a1612; --browser-surface-2: #14100c; }
.editorApp[data-theme][data-skin="glacier"] { --browser-surface: #0f1623; --browser-surface-2: #0b111c; }
.editorApp[data-theme][data-skin="noir"]    { --browser-surface: #111317; --browser-surface-2: #0a0a0b; }
.editorApp[data-theme][data-skin="velvet"]  { --browser-surface: #180f24; --browser-surface-2: #100a18; }
.editorApp[data-theme][data-skin="capcut"]  { --browser-surface: #121215; --browser-surface-2: #0d0d10; }

.editorApp[data-theme][data-skin] .panelPane[data-tab-panel="transitions"] {
  background:
    radial-gradient(circle at 70% 0%, rgba(var(--accent-rgb), 0.14), transparent 32%),
    var(--browser-surface);
}
.editorApp[data-theme][data-skin] .panelPane[data-tab-panel="projects"] {
  background:
    radial-gradient(circle at 50% -6%, rgba(var(--accent-rgb), 0.10), transparent 30%),
    var(--browser-surface-2);
}


/* ============================================================
   PHASE 8 — Deep component rebind (inspector + settings)
   These surfaces were hardcoded light (#f8fafc, white gradients,
   #e9eef5, #334155) so on Lumen/Glacier they looked identical to
   the old theme. Now bound to theme vars + accent. End-of-file,
   scoped .editorApp[data-theme][data-skin] to win the cascade.
   ============================================================ */
.editorApp[data-theme][data-skin] .inspectorPanel {
  background: var(--panel);
  color: var(--text);
}
.editorApp[data-theme][data-skin] .inspectorTabs {
  background: var(--panel-2);
  border-bottom-color: var(--line);
  box-shadow: none;
}
.editorApp[data-theme][data-skin] .inspectorPane {
  background: transparent;
}
.editorApp[data-theme][data-skin] .inspectorTab {
  color: var(--muted);
}
.editorApp[data-theme][data-skin] .inspectorTab.is-active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), transparent);
  color: var(--accent-dark);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.editorApp[data-theme][data-skin] .settingTitle {
  color: var(--text);
}
.editorApp[data-theme][data-skin] .themeSegment {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--panel-2);
  border-color: var(--line);
}
.editorApp[data-theme][data-skin] .themeSegment button {
  color: var(--muted);
}
.editorApp[data-theme][data-skin] .themeSegment button:hover {
  color: var(--text);
}
.editorApp[data-theme][data-skin] .themeSegment button.is-active {
  background: var(--panel);
  color: var(--accent-dark);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14), inset 0 -2px 0 var(--accent);
}
.editorApp[data-theme][data-skin] .secondaryWide {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}


/* ============================================================
   PHASE T1 — Timeline chrome theme-aware
   Dock / resize handle / tools / time pill / canvas / drop zone /
   ruler border / h-scroll / track lane + label rebound from
   hardcoded light (#f8fafc, white gradients, cyan tints) to theme
   vars + accent. Works for every skin (light & dark) since vars
   resolve per theme. End-of-file, .editorApp[data-theme][data-skin].
   ============================================================ */
.editorApp[data-theme][data-skin] .timelineDock {
  background: var(--panel);
  border-top-color: var(--line);
  box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.06);
}
.editorApp[data-theme][data-skin] .timelineResizeHandle {
  background: var(--panel-2);
  border-bottom-color: var(--line);
}
.editorApp[data-theme][data-skin] .timelineTools {
  background: var(--panel-2);
  border-color: var(--line);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.editorApp[data-theme][data-skin] .timelineTimeGroup {
  background: linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--accent) 8%, var(--panel-2)));
  border-color: rgba(var(--accent-rgb), 0.28);
  color: var(--text);
}
.editorApp[data-theme][data-skin] .timelineTimeTotal { color: var(--text); }
.editorApp[data-theme][data-skin] .timelineTimeRemaining,
.editorApp[data-theme][data-skin] .timelineTimeDivider { color: var(--muted); }
.editorApp[data-theme][data-skin] .timelineCanvas {
  background: var(--panel);
}
.editorApp[data-theme][data-skin] .timelineDropZone {
  background: var(--panel);
}
.editorApp[data-theme][data-skin] .timelineRuler {
  border-bottom-color: var(--line);
}
.editorApp[data-theme][data-skin] .timelineHScroll {
  background: var(--panel-2);
  border-top-color: var(--line);
}
.editorApp[data-theme][data-skin] .timelineHScrollThumb {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, var(--muted)), var(--muted));
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.editorApp[data-theme][data-skin] .timelineTrack {
  border-color: var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, var(--accent)) 9%, var(--panel-2)), var(--panel) 48%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--track-accent, var(--accent)) 60%, transparent);
}
.editorApp[data-theme][data-skin] .timelineTrack::before,
.editorApp[data-theme][data-skin] .timelineTrackLabel {
  border-right-color: var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, var(--accent)) 14%, var(--panel-2)), var(--panel-2));
  color: var(--text);
}

/* ===== PHASE L1 — per-theme layout dimensions (mockup matrix) ===== */
.editorApp[data-theme="light"][data-skin="lumen"] { --rail-width: 80px; --topbar-height: 56px; }
.editorApp[data-theme="light"][data-skin="glacier"] { --rail-width: 80px; --topbar-height: 58px; }
.editorApp[data-theme="dark"][data-skin="noir"] { --rail-width: 80px; --topbar-height: 58px; }
.editorApp[data-theme="night"][data-skin="velvet"] { --rail-width: 80px; --topbar-height: 58px; }
.editorApp[data-theme="dark"][data-skin="capcut"] { --rail-width: 80px; --topbar-height: 58px; }

/* ===================== PHASE L3 — per-theme RAIL design ===================== */
/* ---------- LUMEN: accent-soft pill active, warm hover ---------- */
.editorApp[data-theme="light"][data-skin="lumen"] .rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton {
  border-radius: 12px !important;
  color: var(--muted);
}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text) !important;
}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton.is-active {
  background: #efe4d3 !important;
  color: var(--accent) !important;
}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton.is-active .railIcon {
  color: var(--accent) !important;
}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton.is-active::before {
  opacity: 0 !important;
  height: 0 !important;
}

/* ---------- GLACIER: gradient-blue glow pill active ---------- */
.editorApp[data-theme="light"][data-skin="glacier"] .rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.editorApp[data-theme="light"][data-skin="glacier"] .railButton {
  border-radius: 13px !important;
  color: var(--muted);
}
.editorApp[data-theme="light"][data-skin="glacier"] .railButton:hover {
  background: rgba(37, 99, 235, 0.07) !important;
  color: var(--text) !important;
}
.editorApp[data-theme="light"][data-skin="glacier"] .railButton.is-active {
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32) !important;
}
.editorApp[data-theme="light"][data-skin="glacier"] .railButton.is-active .railIcon,
.editorApp[data-theme="light"][data-skin="glacier"] .railButton.is-active > span:not(.railIcon) {
  color: #ffffff !important;
}
.editorApp[data-theme="light"][data-skin="glacier"] .railButton.is-active::before {
  opacity: 0 !important;
  height: 0 !important;
}

/* ---------- NOIR: minimal, accent text + left 2px bar indicator ---------- */
.editorApp[data-theme="dark"][data-skin="noir"] .rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.editorApp[data-theme="dark"][data-skin="noir"] .railButton {
  color: var(--muted);
}
.editorApp[data-theme="dark"][data-skin="noir"] .railButton:hover {
  color: var(--text) !important;
  background: transparent !important;
}
.editorApp[data-theme="dark"][data-skin="noir"] .railButton.is-active {
  color: var(--accent) !important;
  background: transparent !important;
}
.editorApp[data-theme="dark"][data-skin="noir"] .railButton.is-active .railIcon {
  color: var(--accent) !important;
  filter: none !important;
}
.editorApp[data-theme="dark"][data-skin="noir"] .railButton::before {
  background: var(--accent) !important;
  left: 0 !important;
  width: 2px !important;
}
.editorApp[data-theme="dark"][data-skin="noir"] .railButton.is-active::before {
  opacity: 1 !important;
  height: 28px !important;
}

/* ---------- CAPCUT: blue active accent, neutral rail ---------- */
.editorApp[data-theme="dark"][data-skin="capcut"] .rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.editorApp[data-theme="dark"][data-skin="capcut"] .railButton {
  color: var(--muted);
}
.editorApp[data-theme="dark"][data-skin="capcut"] .railButton:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.editorApp[data-theme="dark"][data-skin="capcut"] .railButton.is-active {
  color: var(--accent) !important;
  background: transparent !important;
}
.editorApp[data-theme="dark"][data-skin="capcut"] .railButton.is-active .railIcon {
  color: var(--accent) !important;
  filter: none !important;
}
.editorApp[data-theme="dark"][data-skin="capcut"] .railButton::before {
  background: var(--accent) !important;
  left: 0 !important;
  width: 2px !important;
}
.editorApp[data-theme="dark"][data-skin="capcut"] .railButton.is-active::before {
  opacity: 1 !important;
  height: 28px !important;
}

/* ---------- VELVET: accent-soft tinted active, gold text ---------- */
.editorApp[data-theme="night"][data-skin="velvet"] .rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.editorApp[data-theme="night"][data-skin="velvet"] .railButton {
  border-radius: 12px !important;
  color: var(--muted);
}
.editorApp[data-theme="night"][data-skin="velvet"] .railButton:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text) !important;
}
.editorApp[data-theme="night"][data-skin="velvet"] .railButton.is-active {
  background: rgba(226, 169, 92, 0.16) !important;
  color: var(--accent) !important;
}
.editorApp[data-theme="night"][data-skin="velvet"] .railButton.is-active .railIcon {
  color: var(--accent) !important;
}
.editorApp[data-theme="night"][data-skin="velvet"] .railButton.is-active::before {
  opacity: 0 !important;
  height: 0 !important;
}

/* ===================== PHASE L1-FIX — short-viewport layout guard ===================== */
/* On short windows the fixed top bar + tall timeline squeezed the stage to nothing
   (preview floated in empty workspace bg). Cap the timeline to a fraction of the
   viewport and guarantee the stage row always keeps usable height. Applies to BOTH
   wide and narrow layouts because it is matched purely on height and appended last. */
@media (max-height: 760px) {
  .editorApp {
    grid-template-rows:
      var(--topbar-height)
      minmax(140px, 1fr)
      min(var(--timeline-height), 40vh) !important;
  }
}
@media (max-height: 560px) {
  .editorApp {
    grid-template-rows:
      var(--topbar-height)
      minmax(120px, 1fr)
      min(var(--timeline-height), 34vh) !important;
  }
}


/* ===================== PHASE L1-FIX-2 — inspector must stay OUT of grid flow ===================== */
/* spectrum-inspector-foundation.css (loaded AFTER this file) forces
   .inspectorPanel.is-spectrum-only-inspector { position: relative }, dropping the
   inspector into the .editorApp grid as an unplaced phantom item and scrambling the
   layout. Force it back to the intended out-of-flow overlay. */
.editorApp .inspectorPanel,
.editorApp .inspectorPanel.is-spectrum-only-inspector {
  position: absolute !important;
}
@media (max-width: 1040px) {
  .editorApp .inspectorPanel,
  .editorApp .inspectorPanel.is-spectrum-only-inspector {
    position: fixed !important;
  }
}

/* ===================== PHASE-L4-LEFTPANEL — left panel per-theme design ===================== */
/* Per-skin tokens (panels were hardcoded light/dark regardless of theme; drive them from the palette). */
.editorApp[data-skin="lumen"]   { --l4-line: rgba(27,27,25,.10);   --l4-chip-on: var(--text);   --l4-chip-on-text:#ffffff; --l4-radius:12px; }
.editorApp[data-skin="glacier"] { --l4-line: rgba(15,23,42,.12);   --l4-chip-on: var(--accent); --l4-chip-on-text:#ffffff; --l4-radius:14px; }
.editorApp[data-skin="noir"]    { --l4-line: rgba(255,255,255,.10); --l4-chip-on: var(--accent); --l4-chip-on-text:#0b0b0c; --l4-radius:10px; }
.editorApp[data-skin="velvet"]  { --l4-line: rgba(244,236,251,.12); --l4-chip-on: var(--accent); --l4-chip-on-text:#140e1c; --l4-radius:13px; }
.editorApp[data-skin="capcut"]  { --l4-line: rgba(255,255,255,.10); --l4-chip-on: var(--accent); --l4-chip-on-text:#ffffff; --l4-radius:11px; }
.editorApp { --l4-line: rgba(127,127,127,.16); --l4-chip-on: var(--accent); --l4-chip-on-text:#fff; --l4-radius:12px; }

/* Panel shell + panes -> palette driven */
.editorApp .sidePanel { background: var(--panel) !important; border-right: 1px solid var(--l4-line) !important; }
.editorApp .panelPane[data-tab-panel="media"],
.editorApp .panelPane[data-tab-panel="spectrums"],
.editorApp .panelPane[data-tab-panel="text"],
.editorApp .panelPane[data-tab-panel="projects"] { background: var(--panel) !important; color: var(--text) !important; scrollbar-color: rgba(var(--accent-rgb),.5) transparent; }
.editorApp .panelPane[data-tab-panel="transitions"] { background: radial-gradient(circle at 72% 0%, rgba(var(--accent-rgb),.10), transparent 34%), var(--panel) !important; color: var(--text) !important; }
.editorApp .panelPane h1,
.editorApp .panelPane[data-tab-panel="transitions"] h1,
.editorApp .mediaTitleRow h1,
.editorApp .projectsTitleRow h1 { color: var(--text) !important; }
.editorApp .paneHeader span,
.editorApp .transitionCountBadge { background: rgba(var(--accent-rgb),.15) !important; color: var(--accent) !important; }

/* Sticky headers */
.editorApp .mediaLibraryHeader,
.editorApp .projectsHeader { background: var(--panel) !important; border-bottom: 1px solid var(--l4-line) !important; box-shadow: 0 8px 20px rgba(0,0,0,.06) !important; backdrop-filter: blur(10px); }

/* Search boxes -> unified rounded pill */
.editorApp .mediaSearch,
.editorApp .transitionSearchBox,
.editorApp .projectSearch { background: var(--panel-2) !important; border: 1px solid var(--l4-line) !important; border-radius: 10px !important; color: var(--muted) !important; box-shadow: none !important; }
.editorApp .mediaSearch input,
.editorApp .transitionSearchBox input,
.editorApp .projectSearch input { color: var(--text) !important; }
.editorApp .mediaSearch input::placeholder,
.editorApp .transitionSearchBox input::placeholder,
.editorApp .projectSearch input::placeholder { color: var(--muted) !important; }
.editorApp .mediaSearch:focus-within,
.editorApp .transitionSearchBox:focus-within,
.editorApp .projectSearch:focus-within { border-color: rgba(var(--accent-rgb),.55) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16) !important; }

/* Chips / category pills -> rounded, accent active */
.editorApp .transitionPill,
.editorApp .mediaFilterTab { background: var(--panel-2) !important; border: 1px solid var(--l4-line) !important; color: var(--muted) !important; border-radius: 999px !important; transition: .15s ease; }
.editorApp .transitionPill:hover,
.editorApp .mediaFilterTab:hover { border-color: rgba(var(--accent-rgb),.45) !important; color: var(--text) !important; }
.editorApp .transitionPill.is-active,
.editorApp .mediaFilterTab.is-active { background: var(--l4-chip-on) !important; color: var(--l4-chip-on-text) !important; border-color: var(--l4-chip-on) !important; }

/* Toolbar buttons */
.editorApp .mediaIconButton,
.editorApp .mediaActionButton,
.editorApp .projectIconButton,
.editorApp .projectActionButton,
.editorApp .transitionToolButton { background: var(--panel-2) !important; border: 1px solid var(--l4-line) !important; color: var(--muted) !important; }
.editorApp .mediaIconButton.is-active,
.editorApp .projectIconButton.is-active,
.editorApp .transitionToolButton.is-active { background: rgba(var(--accent-rgb),.16) !important; color: var(--accent) !important; border-color: rgba(var(--accent-rgb),.4) !important; }

/* Card grids -> 2-col, rounded, hover lift, accent selected */
.editorApp .transitionPresetGrid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.editorApp .transitionPreset,
.editorApp .spectrumCard { background: var(--panel-2) !important; border: 1px solid var(--l4-line) !important; border-radius: var(--l4-radius) !important; color: var(--text) !important; }
.editorApp .transitionPreset:hover,
.editorApp .spectrumCard:hover { border-color: rgba(var(--accent-rgb),.5) !important; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.16) !important; }
.editorApp .transitionPreset.is-active,
.editorApp .spectrumCard.is-active { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
.editorApp .spectrumCard strong { color: var(--text) !important; }
.editorApp .spectrumCard span { color: var(--muted) !important; }

/* ===================== PHASE-L6-INSPECTOR — inspector redesign + drawer per-theme ===================== */
.editorApp .inspectorPanel { background: var(--panel) !important; border-left: 1px solid var(--l4-line, var(--line)) !important; box-shadow: -18px 0 42px rgba(0,0,0,.16) !important; transition: opacity 160ms ease, transform 200ms cubic-bezier(.2,.8,.2,1), border-color 160ms ease !important; }
/* Tabs */
.editorApp .inspectorTabs { border-bottom: 1px solid var(--l4-line, var(--line)) !important; background: var(--panel-2) !important; }
.editorApp .inspectorTabs button,
.editorApp .inspectorTab,
.editorApp [data-inspector-tab] { color: var(--muted) !important; background: transparent !important; border: 0 !important; font-weight: 800; transition: .15s ease; }
.editorApp .inspectorTabs button:hover,
.editorApp [data-inspector-tab]:hover { color: var(--text) !important; }
.editorApp .inspectorTabs button.is-active,
.editorApp [data-inspector-tab].is-active { color: var(--accent) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
/* Pane text + inputs */
.editorApp .inspectorPane,
.editorApp .controlRow { color: var(--text) !important; }
.editorApp .controlRow output,
.editorApp .controlRowHeader small { color: var(--muted) !important; }
.editorApp .controlRow select,
.editorApp .controlRow input[type="number"] { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--text) !important; }
.editorApp .controlRow select:focus,
.editorApp .controlRow input[type="number"]:focus { border-color: rgba(var(--accent-rgb),.55) !important; outline: none; }
/* Range sliders -> theme accent */
.editorApp .inspectorPane input[type="range"] { accent-color: var(--accent) !important; }
/* Audio mode + asset details */
.editorApp .audioModeTabs { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp .audioModeButton { color: var(--muted) !important; }
.editorApp .audioModeButton.is-active { color: var(--accent) !important; }
.editorApp .assetDetailsPane { color: var(--text) !important; }
.editorApp .assetDetailsTitle { border-bottom: 1px solid var(--l4-line, var(--line)) !important; color: var(--text) !important; }

/* ===================== PHASE-L5-STAGE — stage / preview area per-theme ===================== */
.editorApp .stageWrap { background: radial-gradient(120% 78% at 50% 0%, var(--panel) 0%, var(--bg) 68%) !important; }
.editorApp .previewFrame { border: 1px solid var(--l4-line, rgba(127,127,127,.2)) !important; box-shadow: 0 22px 46px rgba(0,0,0,.22), 0 0 0 1px rgba(var(--accent-rgb),.05) !important; }
.editorApp .emptyPreview { color: var(--muted) !important; }
.editorApp .playerControls { color: var(--text) !important; }
.editorApp .miniControl,
.editorApp .controlPill,
.editorApp .ratioMenuButton { background: var(--panel-2) !important; border: 1px solid var(--l4-line, rgba(127,127,127,.18)) !important; color: var(--text) !important; transition: .15s ease; }
.editorApp .miniControl:hover,
.editorApp .controlPill:hover,
.editorApp .ratioMenuButton:hover,
.editorApp .ratioMenuButton:focus-visible,
.editorApp .ratioControlWrap.is-open .ratioMenuButton { border-color: rgba(var(--accent-rgb),.5) !important; color: var(--text) !important; }
.editorApp .ratioMenuEyebrow { color: var(--muted) !important; }
.editorApp .ratioMenuButton strong { color: var(--text) !important; }
.editorApp .miniControl.is-active,
.editorApp .controlPill.is-active { background: rgba(var(--accent-rgb),.16) !important; color: var(--accent) !important; border-color: rgba(var(--accent-rgb),.42) !important; }
.editorApp #playerPlayButton { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--l4-chip-on-text, #fff) !important; }
.editorApp #playerPlayButton:hover { filter: brightness(1.06); }
.editorApp .ratioMenu { background: var(--panel) !important; border: 1px solid var(--l4-line, rgba(127,127,127,.18)) !important; color: var(--text) !important; box-shadow: 0 16px 34px rgba(0,0,0,.22) !important; }

/* ===================== PHASE-L7-TIMELINE — timeline dock/toolbar/tracks per-theme ===================== */
.editorApp .timelineDock { background: var(--bg) !important; border-top: 1px solid var(--l4-line, var(--line)) !important; box-shadow: 0 -8px 26px rgba(0,0,0,.08) !important; }
.editorApp .timelineResizeHandle { background: linear-gradient(180deg, var(--panel), var(--bg)) !important; border-bottom: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp .timelineResizeHandle::before { background: rgba(var(--accent-rgb),.30) !important; }
.editorApp .timelineResizeHandle:hover::before { background: rgba(var(--accent-rgb),.60) !important; }
.editorApp .editToolbar { background: var(--panel) !important; border-bottom: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp .toolButton,
.editorApp .rightToolButton,
.editorApp .timelineTools .iconButton { color: var(--muted) !important; background: transparent !important; border: 1px solid transparent !important; transition: .15s ease; }
.editorApp .toolButton:hover,
.editorApp .rightToolButton:hover,
.editorApp .timelineTools .iconButton:hover { color: var(--text) !important; background: var(--panel-2) !important; border-color: var(--l4-line, var(--line)) !important; }
.editorApp .toolButton.is-active,
.editorApp .rightToolButton.is-active { color: var(--accent) !important; background: rgba(var(--accent-rgb),.15) !important; border-color: rgba(var(--accent-rgb),.40) !important; }
.editorApp .toolDivider { background: var(--l4-line, var(--line)) !important; }
.editorApp .timelineTimeCurrent { color: var(--accent) !important; }
.editorApp .timelineTimeDivider,
.editorApp .timelineTimeTotal { color: var(--muted) !important; }
.editorApp .zoomValue { color: var(--text) !important; }
.editorApp .zoomRange { accent-color: var(--accent) !important; }
.editorApp .timelineTrack { background: linear-gradient(90deg, var(--track-accent-surface, rgba(var(--accent-rgb),.10)), var(--panel-2) 48%, var(--panel-2)), var(--panel-2) !important; border-color: var(--l4-line, var(--line)) !important; }
.editorApp .timelineTrackLabel { background: linear-gradient(90deg, var(--track-accent-label, rgba(var(--accent-rgb),.14)), var(--panel)) !important; color: var(--text) !important; border-right: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp .timelineClip.is-selected { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 1px var(--accent) !important; }

/* ===================== PHASE-PA-TOPBAR — minimal/classy top bar to match mockup ===================== */
.editorApp .topBar { background: var(--bg) !important; border-bottom: 1px solid var(--l4-line, var(--line)) !important; box-shadow: none !important; }
.editorApp .titleInput { background: transparent !important; color: var(--text) !important; border-color: transparent !important; }
.editorApp .titleInput::placeholder { color: var(--muted) !important; }
.editorApp .topTextButton,
.editorApp .topTextButton-primary,
.editorApp .topIconButton,
.editorApp .cloudIcon,
.editorApp .cloudRenderButton { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--muted) !important; box-shadow: none !important; transition: .15s ease; }
.editorApp .topTextButton::before,
.editorApp .topTextButton-primary::before,
.editorApp .cloudRenderButton::before,
.editorApp .cloudRenderButton::after { display: none !important; }
.editorApp .topTextButton:hover,
.editorApp .topTextButton-primary:hover,
.editorApp .topIconButton:hover,
.editorApp .cloudIcon:hover,
.editorApp .cloudRenderButton:hover,
.editorApp .topTextButton:focus-visible,
.editorApp .topTextButton-primary:focus-visible,
.editorApp .topIconButton:focus-visible,
.editorApp .cloudRenderButton:focus-visible { color: var(--text) !important; border-color: rgba(var(--accent-rgb),.5) !important; background: var(--panel) !important; }
.editorApp .topIconButton .uiIcon,
.editorApp .cloudIcon .uiIcon { color: currentColor !important; }
.editorApp .cloudRenderButtonMain { color: var(--text) !important; }
.editorApp .cloudRenderButtonSub { color: var(--muted) !important; }
.editorApp .cloudRenderButtonPro { background: rgba(var(--accent-rgb),.16) !important; color: var(--accent) !important; border-radius: 999px !important; padding: 1px 7px !important; }
.editorApp .exportButton { background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--l4-chip-on-text, #fff) !important; box-shadow: 0 6px 16px rgba(var(--accent-rgb),.28) !important; }
.editorApp .exportButton::before,
.editorApp .exportButton::after { display: none !important; }
.editorApp .exportButton span { color: var(--l4-chip-on-text, #fff) !important; }
.editorApp .exportButton .chevron { border-color: var(--l4-chip-on-text, #fff) !important; }
.editorApp .exportButton:hover,
.editorApp .exportButton:focus-visible { filter: brightness(1.06) !important; }
.editorApp .panelToggle { color: var(--muted) !important; }
.editorApp .panelToggle:hover,
.editorApp .panelToggle:focus-visible { color: var(--text) !important; }

/* ===================== PHASE-PB-INSPECTOR — spectrum inspector to match mockup ===================== */
.editorApp .spectrumInspectorHero { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--text) !important; box-shadow: 0 12px 28px rgba(0,0,0,.10) !important; border-radius: var(--l4-radius, 14px) !important; }
.editorApp .spectrumInspectorHero::after { background: radial-gradient(closest-side, rgba(var(--accent-rgb),.18), transparent) !important; }
.editorApp .spectrumInspectorHero strong { color: var(--text) !important; }
.editorApp .spectrumInspectorHero p { color: var(--muted) !important; }
.editorApp .spectrumInspectorEyebrow,
.editorApp .spectrumInspectorMeta { color: var(--muted) !important; }
.editorApp .spectrumInspectorModeTabs { grid-template-columns: repeat(2, minmax(0,1fr)) !important; background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp .spectrumInspectorModeButton { color: var(--muted) !important; background: transparent !important; }
.editorApp .spectrumInspectorModeButton.is-active { background: var(--accent) !important; color: var(--l4-chip-on-text, #fff) !important; box-shadow: 0 6px 14px rgba(var(--accent-rgb),.22) !important; }
.editorApp .spectrumInspectorLivePreviewBar { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--muted) !important; }
.editorApp .spectrumInspectorResetButton { background: var(--panel) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--accent) !important; box-shadow: none !important; }
.editorApp .spectrumInspectorResetButton:hover { background: rgba(var(--accent-rgb),.12) !important; border-color: rgba(var(--accent-rgb),.45) !important; }
.editorApp .spectrumInspectorSection { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; box-shadow: 0 10px 24px rgba(0,0,0,.06) !important; }
.editorApp .spectrumInspectorSectionHeader strong { color: var(--text) !important; }
.editorApp .spectrumInspectorBadge { background: rgba(var(--accent-rgb),.14) !important; color: var(--accent) !important; }
.editorApp .spectrumInspectorControl { --spectrum-range-track: linear-gradient(90deg, var(--accent) 0 var(--spectrum-range-fill, 50%), rgba(var(--accent-rgb),.20) var(--spectrum-range-fill, 50%) 100%) !important; background: var(--panel) !important; border: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp .spectrumInspectorControl:hover { border-color: rgba(var(--accent-rgb),.32) !important; box-shadow: 0 10px 24px rgba(var(--accent-rgb),.08) !important; }
.editorApp .spectrumInspectorControlTop { color: var(--text) !important; }
.editorApp .spectrumInspectorControlTop output { color: var(--accent) !important; }
.editorApp .spectrumInspectorRange { accent-color: var(--accent) !important; }
.editorApp .spectrumInspectorRange::-webkit-slider-runnable-track { background: var(--spectrum-range-track) !important; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.16) !important; }
.editorApp .spectrumInspectorRange::-webkit-slider-thumb { background: var(--accent) !important; box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.13), 0 8px 16px rgba(var(--accent-rgb),.18) !important; }
.editorApp .spectrumInspectorRange::-moz-range-progress { background: var(--accent) !important; }
.editorApp .spectrumInspectorRange::-moz-range-thumb { background: var(--accent) !important; box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.13) !important; }
.editorApp .spectrumInspectorRange::-moz-range-track { background: rgba(var(--accent-rgb),.20) !important; }
.editorApp .spectrumLayoutBtn { background: var(--panel) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--muted) !important; }
.editorApp .spectrumLayoutBtn:hover { color: var(--text) !important; border-color: rgba(var(--accent-rgb),.4) !important; }
.editorApp .spectrumLayoutBtn[aria-pressed="true"] { background: rgba(var(--accent-rgb),.16) !important; color: var(--accent) !important; border-color: rgba(var(--accent-rgb),.4) !important; }
.editorApp .spectrumInspectorNotice { background: var(--panel-2) !important; border-color: var(--l4-line, var(--line)) !important; color: var(--muted) !important; }

/* ===================== PHASE-PC-TIMELINECHROME — timeline time/zoom chips per-theme ===================== */
.editorApp .timelineTimeGroup { background: var(--panel-2) !important; border: 1px solid var(--l4-line, rgba(var(--accent-rgb),.24)) !important; color: var(--text) !important; box-shadow: none !important; }
.editorApp .timelineTimeTotal { color: var(--text) !important; }
.editorApp .timelineTimeDivider { color: var(--muted) !important; }
.editorApp .timelineTimeRemaining { color: var(--muted) !important; }
.editorApp .timelineTools { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.editorApp .timelineTools::before { display: none !important; }
.editorApp .zoomRange { accent-color: var(--accent) !important; }
.editorApp .zoomValue { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--muted) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.editorApp .zoomValue strong { color: var(--text) !important; }
.editorApp .zoomValue small { color: var(--muted) !important; }
.editorApp .editToolbarRightTools { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; box-shadow: none !important; }
.editorApp .zoomRange::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--accent) 0 var(--zoom-fill, 0%), rgba(var(--accent-rgb),.22) var(--zoom-fill, 0%) 100%) !important; }
.editorApp .zoomRange::-webkit-slider-thumb { background: var(--accent) !important; border: 2px solid var(--panel) !important; box-shadow: 0 2px 7px rgba(0,0,0,.22), 0 0 0 4px rgba(var(--accent-rgb),.12) !important; }
.editorApp .zoomRange::-moz-range-progress { background: var(--accent) !important; }
.editorApp .zoomRange::-moz-range-thumb { background: var(--accent) !important; border: 2px solid var(--panel) !important; }
.editorApp .zoomRange::-moz-range-track { background: rgba(var(--accent-rgb),.22) !important; }

/* ===================== PHASE-PD-RULERPLAYHEAD — timeline ruler/zoom-scale + playhead BAR per-theme ===================== */
.editorApp .timelineCanvas { background: var(--bg) !important; }
.editorApp .timelineRuler { --timeline-ruler-surface-top: var(--panel) !important; --timeline-ruler-surface-bottom: var(--panel-2) !important; --timeline-ruler-grid-alpha: 0.10 !important; border-bottom: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp .timelineRuler:hover { --timeline-ruler-surface-top: var(--panel-2) !important; --timeline-ruler-surface-bottom: var(--panel) !important; }
.editorApp .timelineTick.is-major::before { background: rgba(var(--accent-rgb),.55) !important; opacity: .7 !important; }
.editorApp .timelineTick.is-major::after { background: var(--l4-line, var(--line)) !important; opacity: .6 !important; }
.editorApp .timelineTick span { color: var(--muted) !important; }
.editorApp .timelineRuler:hover .timelineTick span { color: var(--text) !important; }
.editorApp .timelinePlayheadLine { background: var(--accent) !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.18), 0 0 8px rgba(var(--accent-rgb),.45) !important; }
.editorApp .timelinePlayheadHandle { background: var(--accent) !important; border-color: var(--panel) !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.40), 0 2px 5px rgba(0,0,0,.30) !important; }
.editorApp .timelinePlayheadTime { background: var(--accent) !important; color: var(--l4-chip-on-text, #fff) !important; border-color: var(--accent) !important; box-shadow: 0 4px 12px rgba(var(--accent-rgb),.32) !important; }

/* ===================== PHASE-TL0-CHROME-FOUNDATION — high-specificity [data-theme][data-skin] flat token shells (beats ALL theme rules, both light+dark) ===================== */
.editorApp[data-theme][data-skin] .timelineDock { background: var(--bg) !important; border-top: 1px solid var(--l4-line, var(--line)) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .timelineResizeHandle { background: var(--panel) !important; border-bottom: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp[data-theme][data-skin] .timelineResizeHandle::before { background: rgba(var(--accent-rgb),.30) !important; }
.editorApp[data-theme][data-skin] .timelineResizeHandle:hover::before { background: rgba(var(--accent-rgb),.60) !important; }
.editorApp[data-theme][data-skin] .editToolbar { background: var(--panel) !important; border-bottom: 1px solid var(--l4-line, var(--line)) !important; border-top: 0 !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .timelineCanvas { background: var(--bg) !important; }
.editorApp[data-theme][data-skin] .timelineCanvas::before { background: var(--panel) !important; border-right: 1px solid var(--l4-line, var(--line)) !important; border-bottom: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp[data-theme][data-skin] .timelineDropZone { background: var(--bg) !important; }

/* ===================== PHASE-TL1-TOOLBAR-BUTTONS — flat minimal token buttons, high-spec (0,4,0)+!important, both themes ===================== */
.editorApp[data-theme][data-skin] .toolButton { background: transparent !important; border: 1px solid transparent !important; color: var(--muted) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .toolButton:hover, .editorApp[data-theme][data-skin] .toolButton:focus-visible { background: rgba(var(--accent-rgb),.12) !important; color: var(--text) !important; border-color: transparent !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .toolButton.is-active { background: rgba(var(--accent-rgb),.16) !important; color: var(--accent) !important; border-color: transparent !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
.editorApp[data-theme][data-skin] .toolButton.is-active:hover { background: rgba(var(--accent-rgb),.22) !important; }
.editorApp[data-theme][data-skin] .toolButton.danger:hover { background: rgba(244,63,94,.14) !important; color: #f43f5e !important; border-color: transparent !important; }
.editorApp[data-theme][data-skin] .cutToolGroup { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .toolDivider { background: var(--l4-line, var(--line)) !important; }
.editorApp[data-theme][data-skin] .timelineAdd { background: transparent !important; border: 1px solid transparent !important; color: var(--muted) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .timelineAdd:hover { background: rgba(var(--accent-rgb),.12) !important; color: var(--text) !important; }
.editorApp[data-theme][data-skin] .spectrumLiveToggle { background: rgba(var(--accent-rgb),.12) !important; border: 1px solid rgba(var(--accent-rgb),.42) !important; color: var(--accent) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .editToolbarRightTools { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .rightToolButton { background: transparent !important; border: 1px solid transparent !important; color: var(--muted) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .rightToolButton:hover, .editorApp[data-theme][data-skin] .rightToolButton:focus-visible { background: rgba(var(--accent-rgb),.12) !important; color: var(--text) !important; }
.editorApp[data-theme][data-skin] .rightToolButton.is-active { background: rgba(var(--accent-rgb),.16) !important; color: var(--accent) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
.editorApp[data-theme][data-skin] .timelineTools { background: transparent !important; border: none !important; box-shadow: none !important; }
.timelineTools.is-zoom-locked { opacity: .4 !important; pointer-events: none !important; }
.editorApp[data-theme][data-skin] .iconButton { background: var(--panel) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--muted) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .iconButton:hover, .editorApp[data-theme][data-skin] .iconButton:focus-visible { background: rgba(var(--accent-rgb),.12) !important; color: var(--text) !important; border-color: rgba(var(--accent-rgb),.30) !important; }
/* CT-180: zoom +/- icons have no box in any state (override global .iconButton !important boxes) */
.editorApp[data-theme][data-skin] .editToolbar .timelineTools .iconButton,
.editorApp[data-theme][data-skin] .editToolbar .timelineTools .iconButton:hover,
.editorApp[data-theme][data-skin] .editToolbar .timelineTools .iconButton:focus,
.editorApp[data-theme][data-skin] .editToolbar .timelineTools .iconButton:focus-visible,
.editToolbar .timelineTools .iconButton,
.editToolbar .timelineTools .iconButton:hover,
.editToolbar .timelineTools .iconButton:focus,
.editToolbar .timelineTools .iconButton:focus-visible { background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; outline: none !important; }
.editorApp[data-theme][data-skin] .zoomValue { background: var(--panel) !important; border: 1px solid var(--l4-line, var(--line)) !important; color: var(--text) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .zoomRange { accent-color: var(--accent) !important; }
.editorApp[data-theme][data-skin] .timelineTimeGroup { background: var(--panel-2) !important; border: 1px solid var(--l4-line, var(--line)) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .timelineTimeCurrent { color: var(--accent) !important; }
.editorApp[data-theme][data-skin] .timelineTimeDivider { color: var(--muted) !important; }
.editorApp[data-theme][data-skin] .timelineTimeTotal { color: var(--text) !important; }
.editorApp[data-theme][data-skin] .timelineTimeRemaining { color: var(--muted) !important; }

/* ===================== PHASE-TL2-RULER — professional themed ruler, high-spec (0,4,0)+!important, both themes (kills light-theme dark-slate #253144) ===================== */
.editorApp[data-theme][data-skin] .timelineRuler { --timeline-ruler-surface-top: var(--panel-2) !important; --timeline-ruler-surface-bottom: var(--panel) !important; --timeline-ruler-grid-alpha: .05 !important; --timeline-ruler-major-alpha: 1 !important; border-bottom: 1px solid rgba(var(--accent-rgb),.22) !important; box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb),.05) !important; }
.editorApp[data-theme][data-skin] .timelineRuler:hover { --timeline-ruler-surface-top: var(--panel) !important; --timeline-ruler-surface-bottom: var(--panel-2) !important; box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb),.10) !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-major::before { background: var(--accent) !important; height: 9px !important; opacity: .9 !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-major::after { background: var(--l4-line, var(--line)) !important; opacity: .5 !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-minor::before { background: rgba(var(--accent-rgb),.28) !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-frame::before { background: rgba(var(--accent-rgb),.45) !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-frame.has-label span { color: var(--muted) !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-anchor-label span { color: var(--text) !important; }
.editorApp[data-theme][data-skin] .timelineTick span { color: var(--muted) !important; font-weight: 700 !important; letter-spacing: .02em !important; font-variant-numeric: tabular-nums !important; text-shadow: none !important; }
.editorApp[data-theme][data-skin] .timelineRuler:hover .timelineTick span { color: var(--text) !important; }

/* ===================== PHASE-TL3-TRACKS — flat themed track rows + labels + drop rows, high-spec (0,4,0)+!important (kills light-blue gradient + dark-slate drop rows) ===================== */
.editorApp[data-theme][data-skin] .timelineTrack { background: var(--panel) !important; border: 1px solid var(--l4-line, var(--line)) !important; box-shadow: inset 3px 0 0 var(--track-accent, var(--accent)) !important; }
.editorApp[data-theme][data-skin] .timelineTrack:hover { background: color-mix(in srgb, var(--accent) 5%, var(--panel)) !important; border-color: rgba(var(--accent-rgb),.25) !important; }
.editorApp[data-theme][data-skin] .timelineTrack::before, .editorApp[data-theme][data-skin] .timelineTrackLabel { background: var(--panel-2) !important; border-right: 1px solid var(--l4-line, var(--line)) !important; color: var(--muted) !important; }
.editorApp[data-theme][data-skin] .timelineTrack.is-track-selected { border-color: rgba(var(--accent-rgb),.55) !important; background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important; box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px rgba(var(--accent-rgb),.35) !important; }
.editorApp[data-theme][data-skin] .timelineTrack.is-drop-hover { border-color: rgba(var(--accent-rgb),.5) !important; background: color-mix(in srgb, var(--accent) 7%, var(--panel)) !important; }
.editorApp[data-theme][data-skin] .timelineTrack.is-drop-hover .timelineTrackLabel { background: rgba(var(--accent-rgb),.16) !important; color: var(--text) !important; }
.editorApp[data-theme][data-skin] .timelineDropInsertSpacer, .editorApp[data-theme][data-skin] .timelineDropTopSpacer, .editorApp[data-theme][data-skin] .timelineDropBottomSpacer { background: var(--panel) !important; border: 1px dashed rgba(var(--accent-rgb),.30) !important; box-shadow: inset 3px 0 0 rgba(var(--accent-rgb),.25) !important; opacity: .92 !important; }
.editorApp[data-theme][data-skin] .timelineDropInsertSpacer .timelineTrackLabel, .editorApp[data-theme][data-skin] .timelineDropTopSpacer .timelineTrackLabel, .editorApp[data-theme][data-skin] .timelineDropBottomSpacer .timelineTrackLabel { background: var(--panel-2) !important; color: var(--muted) !important; }

/* ===================== PHASE-TL4-PLAYHEAD — crisp accent playhead bar + handle + time chip, high-spec (0,4,0)+!important (wins all states; kills #020617/#fff hardcodes) ===================== */
.editorApp[data-theme][data-skin] .timelinePlayheadLine { background: var(--accent) !important; width: 2px !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.20), 0 0 10px rgba(var(--accent-rgb),.50) !important; }
.editorApp[data-theme][data-skin] .timelinePlayheadHandle { background: var(--accent) !important; border: 2px solid var(--panel) !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.45), 0 2px 6px rgba(0,0,0,.30) !important; }
.editorApp[data-theme][data-skin] .timelinePlayheadTime { background: var(--accent) !important; color: var(--l4-chip-on-text, #fff) !important; border: 1px solid var(--accent) !important; font-weight: 600 !important; box-shadow: 0 4px 14px rgba(var(--accent-rgb),.38) !important; }
.editorApp[data-theme][data-skin] .timelinePlayhead:hover .timelinePlayheadLine, .editorApp[data-theme][data-skin] .timelinePlayhead.is-time-visible .timelinePlayheadLine { background: var(--accent) !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.30), 0 0 14px rgba(var(--accent-rgb),.65) !important; }
.editorApp[data-theme][data-skin] .timelinePlayhead:hover .timelinePlayheadHandle, .editorApp[data-theme][data-skin] .timelinePlayhead.is-time-visible .timelinePlayheadHandle { background: var(--accent) !important; border-color: var(--panel) !important; box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.55), 0 2px 7px rgba(0,0,0,.35) !important; }

/* ===================== PHASE-TL5-RAIL — flat minimal left rail, high-spec (0,4,0)+!important, both themes (kills coral brandMark + slate icons) ===================== */
.editorApp[data-theme][data-skin] .rail { background: var(--panel) !important; border-right: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp[data-theme][data-skin] .brandMark { background: var(--accent) !important; color: var(--l4-chip-on-text, #fff) !important; box-shadow: 0 8px 20px rgba(var(--accent-rgb),.25) !important; }
.editorApp[data-theme][data-skin] .railButton { background: transparent !important; color: var(--muted) !important; }
.editorApp[data-theme][data-skin] .railButton:hover { color: var(--text) !important; background: transparent !important; }
.editorApp[data-theme][data-skin] .railIcon { background: color-mix(in srgb, var(--muted) 16%, var(--panel-2)) !important; color: var(--muted) !important; box-shadow: none !important; }
.editorApp[data-theme][data-skin] .railButton:hover .railIcon { background: rgba(var(--accent-rgb),.14) !important; color: var(--text) !important; }
.editorApp[data-theme][data-skin] .railButton.is-active { color: var(--accent) !important; }
.editorApp[data-theme][data-skin] .railButton.is-active .railIcon { background: rgba(var(--accent-rgb),.18) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.30) !important; }

/* ===================== PHASE-TL6-POLISH — themed snap guide + scrollbar + selected-clip glow, high-spec (0,4,0)+!important (kills yellow snap + slate scrollbar + cyan clip glow) ===================== */
.editorApp[data-theme][data-skin] .timelineSnapGuide { background: var(--accent) !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.20), 0 0 6px rgba(var(--accent-rgb),.45) !important; }
.editorApp[data-theme][data-skin] .timelineDropZone { scrollbar-color: rgba(var(--accent-rgb),.55) var(--panel) !important; }
.editorApp[data-theme][data-skin] .timelineDropZone::-webkit-scrollbar-track { background: var(--panel) !important; border: 1px solid var(--l4-line, var(--line)) !important; }
.editorApp[data-theme][data-skin] .timelineDropZone::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.45) !important; border: 4px solid var(--panel) !important; }
.editorApp[data-theme][data-skin] .timelineDropZone::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),.70) !important; }
.editorApp[data-theme][data-skin] .timelineDropZone::-webkit-scrollbar-corner { background: var(--panel) !important; }
.editorApp[data-theme][data-skin] .timelineClip.is-selected { border-color: rgba(var(--accent-rgb),.85) !important; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.55), 0 0 0 2px rgba(var(--accent-rgb),.45), 0 2px 10px rgba(var(--accent-rgb),.30) !important; }

/* ===================== PHASE-TLR1-RULER — TRUE themed ruler via DIRECT background override (beats hardcoded #1d1f24 dup block L10434) + redesign, high-spec (0,4,0)+!important, both themes ===================== */
.editorApp[data-theme][data-skin] .timelineRuler { height: 28px !important; background: linear-gradient(90deg, rgba(var(--accent-rgb), var(--timeline-ruler-grid-alpha, .05)) 0 1px, transparent 1px) var(--timeline-ruler-offset, 108px) 4px / var(--timeline-ruler-step, 78px) 6px repeat-x, linear-gradient(180deg, var(--panel-2), var(--panel)) !important; background-repeat: repeat-x, no-repeat !important; border-bottom: 1px solid rgba(var(--accent-rgb),.22) !important; box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb),.06) !important; }
.editorApp[data-theme][data-skin] .timelineRuler:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), var(--timeline-ruler-grid-alpha, .06)) 0 1px, transparent 1px) var(--timeline-ruler-offset, 108px) 4px / var(--timeline-ruler-step, 78px) 6px repeat-x, linear-gradient(180deg, var(--panel), var(--panel-2)) !important; background-repeat: repeat-x, no-repeat !important; box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb),.12) !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-major::before { background: var(--accent) !important; height: 9px !important; top: 0 !important; opacity: .9 !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-major::after { background: var(--l4-line, var(--line)) !important; opacity: .5 !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-minor::before { background: rgba(var(--accent-rgb),.30) !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-frame::before { background: rgba(var(--accent-rgb),.45) !important; }
.editorApp[data-theme][data-skin] .timelineTick span { color: var(--muted) !important; top: 10px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .02em !important; font-variant-numeric: tabular-nums !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-frame.has-label span { color: var(--muted) !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-anchor-label span { color: var(--text) !important; }
.editorApp[data-theme][data-skin] .timelineRuler:hover .timelineTick span { color: var(--text) !important; }

/* ===================== PHASE-TLR2-RULER-SMOOTH — professional, smooth ruler: kill grid bars + full-height column lines ("box under box"), flat surface + elegant bottom tick marks. high-spec (0,4,0)+!important ===================== */
.editorApp[data-theme][data-skin] .timelineRuler { background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important; background-repeat: no-repeat !important; border-bottom: 1px solid rgba(var(--accent-rgb),.16) !important; box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb),.05) !important; }
.editorApp[data-theme][data-skin] .timelineRuler:hover { background: linear-gradient(180deg, var(--panel), var(--panel-2)) !important; background-repeat: no-repeat !important; box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb),.10) !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-major::after { display: none !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-minor::after { display: none !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-frame::after { display: none !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-major::before { content: "" !important; position: absolute !important; left: 0 !important; top: auto !important; bottom: 0 !important; width: 1.5px !important; height: 9px !important; border-radius: 2px 2px 0 0 !important; background: var(--accent) !important; opacity: .85 !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-minor::before { content: "" !important; position: absolute !important; left: 0 !important; top: auto !important; bottom: 0 !important; width: 1px !important; height: 5px !important; border-radius: 2px 2px 0 0 !important; background: rgba(var(--accent-rgb),.38) !important; opacity: 1 !important; }
.editorApp[data-theme][data-skin] .timelineTick.is-frame::before { content: "" !important; position: absolute !important; left: 0 !important; top: auto !important; bottom: 0 !important; width: 1px !important; height: 3px !important; border-radius: 1px !important; background: rgba(var(--accent-rgb),.26) !important; opacity: 1 !important; }
.editorApp[data-theme][data-skin] .timelineTick span { top: 5px !important; left: 6px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .01em !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; }
.editorApp[data-theme][data-skin] .timelineRuler:hover .timelineTick span { color: var(--text) !important; }

/* ===================== PHASE-TLR3-ZOOMPERF — buttery zoom: during instant-zoom gesture strip heavy shadow/glow/filter/transition (composite cost scales with media count) + GPU layer promotion on transform layers. functional, low-risk, leverages engine's existing .is-timeline-instant-zooming toggle ===================== */
.editorApp .timelineTracks { will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.editorApp .timelineRuler { backface-visibility: hidden; }
body.is-timeline-instant-zooming .timelineClip, .editorApp.is-timeline-instant-zooming .timelineClip,
body.is-timeline-instant-zooming .timelineClip::before, .editorApp.is-timeline-instant-zooming .timelineClip::before,
body.is-timeline-instant-zooming .timelineClip::after, .editorApp.is-timeline-instant-zooming .timelineClip::after,
body.is-timeline-instant-zooming .timelineClip.is-selected, .editorApp.is-timeline-instant-zooming .timelineClip.is-selected,
body.is-timeline-instant-zooming .timelineTrack, .editorApp.is-timeline-instant-zooming .timelineTrack,
body.is-timeline-instant-zooming .timelineRuler, .editorApp.is-timeline-instant-zooming .timelineRuler,
body.is-timeline-instant-zooming .timelinePlayhead, .editorApp.is-timeline-instant-zooming .timelinePlayhead,
body.is-timeline-instant-zooming .timelineTick span, .editorApp.is-timeline-instant-zooming .timelineTick span {
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
  text-shadow: none !important;
}
.editorApp.is-timeline-instant-zooming .timelineClip, body.is-timeline-instant-zooming .timelineClip { contain: layout style !important; }

/* ===================== PHASE V2 — Transition panel: light-theme readability + modern polish ===================== */
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"] {
  background:
    radial-gradient(circle at 78% 0%, rgba(var(--accent-rgb), 0.06), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
  color: #0f172a !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionTopBar,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionTopBar {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 249, 252, 0.93)) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(14px);
}
.editorApp[data-theme="light"] .transitionSearchBox {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #f1f5f9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
.editorApp[data-theme="light"] .transitionSearchBox:focus-within {
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
.editorApp[data-theme="light"] .transitionSearchBox input { color: #0f172a !important; }
.editorApp[data-theme="light"] .transitionSearchBox input::placeholder { color: #94a3b8 !important; }
.editorApp[data-theme="light"] .transitionSearchIcon { color: #64748b !important; }
.editorApp[data-theme="light"] .transitionToolButton {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
.editorApp[data-theme="light"] .transitionToolButton:hover {
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #0f172a !important;
}
.editorApp[data-theme="light"] .transitionFavoriteButton { color: #d97706 !important; }
.editorApp[data-theme="light"] .transitionCountBadge {
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  box-shadow: none !important;
}
.editorApp[data-theme="light"] .transitionPill {
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
}
.editorApp[data-theme="light"] .transitionPill:hover {
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #0f172a !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
}
.editorApp[data-theme="light"] .transitionPill.is-active {
  border-color: rgba(20, 184, 166, 0.55) !important;
  color: #ffffff !important;
}
.editorApp[data-theme="light"] .transitionPill-favorites { color: #b45309 !important; }
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"] .panelSectionHeader strong { color: #0f172a !important; }
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"] .panelSectionHeader small { color: #64748b !important; }
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"] .transitionPreset .transitionPresetBody strong { color: #0f172a !important; }
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"] .transitionPreset .transitionPresetBody small,
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"] .transitionPreset .transitionPresetBody b { color: #475569 !important; }

/* ===================== PHASE V2.1 — Transition pill-bar container + topbar light bg (high specificity) ===================== */
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionTopBar,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionTopBar {
  background:
    radial-gradient(circle at 72% 0%, rgba(37, 99, 235, 0.06), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionPillBar,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionPillBar {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05) !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionSearchBox,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionSearchBox {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionSearchBox input,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionSearchBox input {
  color: #0f172a !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionSearchBox input::placeholder,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionSearchBox input::placeholder {
  color: #94a3b8 !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionSearchIcon,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionSearchIcon {
  color: #64748b !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionToolButton,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionToolButton {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionCountBadge,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionCountBadge {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
  color: #2563eb !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionPill,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionPill {
  background: #eef2f7 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #475569 !important;
}
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionPill.is-active,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionPill.is-active {
  color: #ffffff !important;
}

/* ===================== PHASE V2.2 — Light theme: card name/tag/favorite + pill count polish ===================== */
/* Card name was near-white (#eef6ff) → invisible on light cards; only leading emoji showed. Make it dark + readable. */
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card .zlibName,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionPreset.zlib-card .zlibName {
  color: #0f172a !important;
  font-weight: 700 !important;
}
/* "ALL" tag → light pill instead of dark slab */
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionPreset.zlib-card .zlibTag,
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionPreset.zlib-card .zlibTag {
  background: #eef2f7 !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  color: #2563eb !important;
}
/* Per-card favorite star — light chip */
.editorApp[data-theme="light"] .transitionPreset .transitionPresetFavorite {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #94a3b8 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10) !important;
}
.editorApp[data-theme="light"] .transitionPreset:hover .transitionPresetFavorite,
.editorApp[data-theme="light"] .transitionPreset.is-active .transitionPresetFavorite {
  color: #d97706 !important;
}
.editorApp[data-theme="light"] .transitionPreset.is-favorite .transitionPresetFavorite,
.editorApp[data-theme="light"] .transitionPresetFavorite.is-active {
  background: rgba(217, 119, 6, 0.12) !important;
  border-color: rgba(217, 119, 6, 0.42) !important;
  color: #d97706 !important;
}
/* Count chips inside pills (10 / 9 / 22) — lighten dark blob on light pills */
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionPillCount,
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionPillCount {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #475569 !important;
}
.editorApp[data-theme="light"] .panelPane-transitions.is-active .transitionPill.is-active .transitionPillCount,
.editorApp[data-theme="light"] .panelPane[data-tab-panel="transitions"].is-active .transitionPill.is-active .transitionPillCount {
  background: rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
}

/* ===================== PHASE V2.3 — Dark themes (noir/velvet): cleaner, flatter modern top bar ===================== */
.editorApp:not([data-theme="light"]) .panelPane[data-tab-panel="transitions"].is-active .transitionTopBar,
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionTopBar {
  background: linear-gradient(180deg, rgba(22, 30, 48, 0.97), rgba(15, 21, 38, 0.95)) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
  box-shadow: 0 8px 22px rgba(2, 8, 23, 0.18) !important;
}
.editorApp:not([data-theme="light"]) .panelPane[data-tab-panel="transitions"].is-active .transitionPillBar,
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionPillBar {
  background: linear-gradient(180deg, rgba(20, 27, 45, 0.94), rgba(15, 21, 38, 0.9)) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
  box-shadow: 0 8px 18px rgba(2, 8, 23, 0.14) !important;
}
.editorApp:not([data-theme="light"]) .panelPane[data-tab-panel="transitions"].is-active .transitionSearchBox,
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionSearchBox {
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionSearchBox:focus-within {
  border-color: rgba(56, 189, 248, 0.5) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionSearchBox input { color: #e8eef7 !important; }
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionSearchBox input::placeholder { color: rgba(148, 163, 184, 0.75) !important; }
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionSearchIcon { color: rgba(148, 163, 184, 0.85) !important; }
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionToolButton {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  border-radius: 10px !important;
  color: rgba(203, 213, 225, 0.92) !important;
  box-shadow: none !important;
}
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionToolButton:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #e8eef7 !important;
}
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionCountBadge {
  background: rgba(56, 189, 248, 0.13) !important;
  border: 1px solid rgba(56, 189, 248, 0.26) !important;
  color: #bae6fd !important;
  box-shadow: none !important;
}
.editorApp:not([data-theme="light"]) .panelPane[data-tab-panel="transitions"].is-active .transitionPill,
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionPill {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionPill:hover {
  border-color: rgba(56, 189, 248, 0.38) !important;
  color: #f1f5f9 !important;
}
.editorApp:not([data-theme="light"]) .panelPane-transitions.is-active .transitionPillCount {
  background: rgba(2, 6, 23, 0.32) !important;
  color: inherit !important;
}

/* ===================== PHASE V2.5 — Light theme: media filter pills, track row controls & "create new row" drop rows aligned to the redesigned teal/sky UI ===================== */

/* --- Media type filter pills (All / Video / Audio / Image) --- */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTabs {
  background: #eef2f7 !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab {
  color: #5b6b80 !important;
  background: transparent !important;
  font-weight: 760 !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab:hover {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.09) !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab.is-active {
  color: #ffffff !important;
  background: var(--accent) !important;
  box-shadow:
    0 6px 14px rgba(var(--accent-rgb), 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

/* --- Timeline track row controls (visibility / lock / mute) --- */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControls {
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl {
  background: transparent !important;
  color: #64748b !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl:focus-visible {
  background: rgba(var(--accent-rgb), 0.13) !important;
  color: var(--accent-dark) !important;
  filter: none !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl.is-off {
  opacity: 0.5 !important;
}

/* --- "Drop above / below — Create new row here" insert rows --- */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropInsertSpacer .timelineTrackLabel,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropTopSpacer .timelineTrackLabel,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropBottomSpacer .timelineTrackLabel {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0.02)) !important;
  color: #64748b !important;
  box-shadow: none !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropInsertSpacer .trackName span:not(.trackIcon),
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropInsertSpacer .trackName small,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropTopSpacer .trackName span:not(.trackIcon),
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropTopSpacer .trackName small,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropBottomSpacer .trackName span:not(.trackIcon),
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropBottomSpacer .trackName small {
  color: #64748b !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropInsertSpacer .trackIcon,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropTopSpacer .trackIcon,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .timelineDropBottomSpacer .trackIcon {
  color: var(--accent) !important;
}

/* ===================== PHASE V2.6 — Full redesign (LIGHT + DARK) of media filter pills, empty media dropzone & track row controls to match the minimal redesigned editor ===================== */

/* ---------- Empty media card -> centered, flat "dropzone" (both themes) ---------- */
.editorApp .assetEmptyButton {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  gap: 13px !important;
  padding: 30px 26px !important;
}
.editorApp .assetEmptyText {
  justify-items: center !important;
  text-align: center !important;
  gap: 4px !important;
}
.editorApp .assetEmptyIcon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.22) !important;
}
/* light */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmpty {
  border: 1.5px dashed rgba(15, 23, 42, 0.16) !important;
  background: #fbfdff !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.5) !important;
  background: #f2fbff !important;
  color: #0f172a !important;
  box-shadow: none !important;
  transform: none !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyText strong { color: #0f172a !important; }
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyText small { color: var(--accent) !important; font-weight: 700 !important; }
/* dark */
.editorApp[data-theme="dark"] .assetEmpty,
.editorApp[data-theme="night"] .assetEmpty {
  border: 1.5px dashed rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}
.editorApp[data-theme="dark"] .assetEmptyButton:hover,
.editorApp[data-theme="dark"] .assetEmptyButton:focus-visible,
.editorApp[data-theme="night"] .assetEmptyButton:hover,
.editorApp[data-theme="night"] .assetEmptyButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.5) !important;
  background: rgba(var(--accent-rgb), 0.06) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.editorApp[data-theme="dark"] .assetEmptyText strong,
.editorApp[data-theme="night"] .assetEmptyText strong { color: #e2e8f0 !important; }
.editorApp[data-theme="dark"] .assetEmptyText small,
.editorApp[data-theme="night"] .assetEmptyText small { color: var(--accent) !important; font-weight: 700 !important; }

/* ---------- Media filter pills (both themes) ---------- */
.editorApp .mediaFilterTabs {
  gap: 3px !important;
  padding: 3px !important;
  border-radius: 12px !important;
}
.editorApp .mediaFilterTab {
  border-radius: 9px !important;
  font-weight: 680 !important;
}
/* light */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTabs {
  background: #eef2f7 !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: none !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab { color: #5b6b80 !important; background: transparent !important; }
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.09) !important; }
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab.is-active {
  color: #ffffff !important;
  background: var(--accent) !important;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.26) !important;
}
/* dark */
.editorApp[data-theme="dark"] .mediaFilterTabs,
.editorApp[data-theme="night"] .mediaFilterTabs {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
.editorApp[data-theme="dark"] .mediaFilterTab,
.editorApp[data-theme="night"] .mediaFilterTab { color: rgba(203, 213, 225, 0.75) !important; background: transparent !important; }
.editorApp[data-theme="dark"] .mediaFilterTab:hover,
.editorApp[data-theme="night"] .mediaFilterTab:hover { color: var(--accent) !important; background: rgba(var(--accent-rgb), 0.12) !important; }
.editorApp[data-theme="dark"] .mediaFilterTab.is-active,
.editorApp[data-theme="night"] .mediaFilterTab.is-active {
  color: var(--accent-contrast) !important;
  background: var(--accent) !important;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.24) !important;
}

/* ---------- Track row controls (both themes) ---------- */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControls {
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl { background: transparent !important; color: #64748b !important; }
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .trackControl:focus-visible { background: rgba(var(--accent-rgb), 0.13) !important; color: var(--accent-dark) !important; filter: none !important; }
.editorApp[data-theme="dark"] .trackControls,
.editorApp[data-theme="night"] .trackControls {
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
.editorApp[data-theme="dark"] .trackControl,
.editorApp[data-theme="night"] .trackControl { background: transparent !important; color: rgba(203, 213, 225, 0.82) !important; }
.editorApp[data-theme="dark"] .trackControl:hover,
.editorApp[data-theme="dark"] .trackControl:focus-visible,
.editorApp[data-theme="night"] .trackControl:hover,
.editorApp[data-theme="night"] .trackControl:focus-visible { background: rgba(var(--accent-rgb), 0.16) !important; color: var(--accent) !important; filter: none !important; }

/* ===================== PHASE V2.7 — Quiet, consistent hover/focus for media pills + empty card. Strong accent colour stays ONLY on the active pill. ===================== */

/* Media pills: neutral hover/focus so it never looks "selected" (only .is-active is coloured) */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab:focus-visible {
  color: #334155 !important;
  background: rgba(15, 23, 42, 0.05) !important;
  box-shadow: none !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab.is-active:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaFilterTab.is-active:focus-visible {
  color: #ffffff !important;
  background: var(--accent) !important;
}
.editorApp[data-theme="dark"] .mediaFilterTab:hover,
.editorApp[data-theme="dark"] .mediaFilterTab:focus-visible,
.editorApp[data-theme="night"] .mediaFilterTab:hover,
.editorApp[data-theme="night"] .mediaFilterTab:focus-visible {
  color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
.editorApp[data-theme="dark"] .mediaFilterTab.is-active:hover,
.editorApp[data-theme="dark"] .mediaFilterTab.is-active:focus-visible,
.editorApp[data-theme="night"] .mediaFilterTab.is-active:hover,
.editorApp[data-theme="night"] .mediaFilterTab.is-active:focus-visible {
  color: var(--accent-contrast) !important;
  background: var(--accent) !important;
}

/* Empty card: neutral hover background, keep only a subtle accent border to signal it is clickable */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  background: #f6f8fb !important;
  color: #0f172a !important;
  box-shadow: none !important;
  transform: none !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:hover .assetEmptyIcon,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyButton:focus-visible .assetEmptyIcon {
  background: var(--accent) !important;
  transform: none !important;
}
.editorApp[data-theme="dark"] .assetEmptyButton:hover,
.editorApp[data-theme="dark"] .assetEmptyButton:focus-visible,
.editorApp[data-theme="night"] .assetEmptyButton:hover,
.editorApp[data-theme="night"] .assetEmptyButton:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.42) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.editorApp[data-theme="dark"] .assetEmptyButton:hover .assetEmptyIcon,
.editorApp[data-theme="dark"] .assetEmptyButton:focus-visible .assetEmptyIcon,
.editorApp[data-theme="night"] .assetEmptyButton:hover .assetEmptyIcon,
.editorApp[data-theme="night"] .assetEmptyButton:focus-visible .assetEmptyIcon {
  background: var(--accent) !important;
  transform: none !important;
}

/* ===================== PHASE V2.8 — media toolbar accent coherence + fix filter "black on All" ===================== */
/* Media panel toolbar (Import + grid/list/sort/filter icon buttons) now shares the same teal/sky family
   as the filter pills and the empty-card icon. Idle icon buttons are soft/muted (never harsh black),
   hover/active use a subtle teal tint. App chrome (rail, player, export) keeps its own skin accent. */

/* ---- LIGHT ---- */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton:not(.is-danger) {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #64748b !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton:not(.is-danger):hover,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton:not(.is-danger).is-active,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaActionButton:hover {
  border-color: rgba(var(--accent-rgb), 0.34) !important;
  background: rgba(var(--accent-rgb), 0.10) !important;
  color: var(--accent-dark) !important;
}

/* ---- DARK ---- */
.editorApp[data-theme="dark"] .mediaIconButton:not(.is-danger),
.editorApp[data-theme="night"] .mediaIconButton:not(.is-danger) {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(226, 232, 240, 0.72) !important;
}
.editorApp[data-theme="dark"] .mediaIconButton:not(.is-danger):hover,
.editorApp[data-theme="dark"] .mediaIconButton:not(.is-danger).is-active,
.editorApp[data-theme="dark"] .mediaActionButton:hover,
.editorApp[data-theme="night"] .mediaIconButton:not(.is-danger):hover,
.editorApp[data-theme="night"] .mediaIconButton:not(.is-danger).is-active,
.editorApp[data-theme="night"] .mediaActionButton:hover {
  border-color: rgba(var(--accent-rgb), 0.34) !important;
  background: rgba(var(--accent-rgb), 0.14) !important;
  color: var(--accent) !important;
}

/* ===================== PHASE V2.9b - filter idle fix + empty-card icon accent ===================== */
/* Filter button forced a dark neutral surface (--surface-neutral-1) even in light theme; align it with sibling icon buttons so it is not black/dark when filter = all. */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .mediaIconButton#mediaFilterButton:not(.is-active) {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: #64748b !important;
}
.editorApp[data-theme="dark"] .mediaIconButton#mediaFilterButton:not(.is-active),
.editorApp[data-theme="night"] .mediaIconButton#mediaFilterButton:not(.is-active) {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(226, 232, 240, 0.72) !important;
}
.editorApp .mediaIconButton#mediaFilterButton:not(.is-active):hover {
  background: rgba(var(--accent-rgb), 0.12) !important;
  border-color: rgba(var(--accent-rgb), 0.34) !important;
  color: var(--accent-dark) !important;
}
/* Empty-card icon uses the app accent in every theme (idle was a fixed teal/sky gradient at L12715). */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .assetEmptyIcon {
  background: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.22) !important;
}
.editorApp[data-theme="dark"] .assetEmptyIcon,
.editorApp[data-theme="night"] .assetEmptyIcon {
  background: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.22) !important;
}

/* ===================== PHASE V3 - Effects + Transitions panels: theme-consistent (light) redesign ===================== */

/* ---- EFFECTS: declutter header so only "Effects" (and the count) remain ---- */
.editorApp .panelPane[data-tab-panel="effects"] .professionalPanelIntro .panelKicker,
.editorApp .panelPane[data-tab-panel="effects"] .professionalPanelIntro p {
  display: none !important;
}
.editorApp .panelPane[data-tab-panel="effects"] .professionalPanelIntro {
  align-items: center !important;
}
.editorApp .panelPane[data-tab-panel="effects"] .professionalPanelIntro h1 {
  margin: 0 !important;
}

/* ---- EFFECTS: light panel surface (was dark #101827) ---- */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="effects"] {
  background:
    radial-gradient(circle at 14% -6%, rgba(var(--accent-rgb), 0.10), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%) !important;
  color: #172033 !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="effects"] .professionalPanelIntro {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.86)) !important;
  border-bottom-color: rgba(15,23,42,0.10) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,0.06) !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="effects"] .professionalPanelIntro h1 {
  color: #0f172a !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="effects"] .panelSectionHeader strong {
  color: #0f172a !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="effects"] .panelSectionHeader small {
  color: #5f6f85 !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .effectsTargetBox {
  background: rgba(15,23,42,0.04) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  color: #334155 !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .effectsTargetBox strong { color: #0f172a !important; }
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .effectsTargetBox span { color: #5f6f85 !important; }

/* ---- TRANSITIONS: light panel surface + chrome (was dark Motion Studio) ---- */
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"],
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"].is-active {
  background:
    radial-gradient(circle at 76% -4%, rgba(var(--accent-rgb), 0.10), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #eef2f7 100%) !important;
  color: #172033 !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"].is-active .transitionTopBar {
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.9)) !important;
  border-bottom-color: rgba(15,23,42,0.10) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,0.06) !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"] .transitionSearchBox {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
  color: #0f172a !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"] #transitionSearchInput { color: #0f172a !important; }
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"] .transitionSearchIcon { color: #5f6f85 !important; }
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"] .transitionToolButton {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
  color: #5f6f85 !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"] .transitionCountBadge {
  background: rgba(var(--accent-rgb),0.12) !important;
  border: 1px solid rgba(var(--accent-rgb),0.30) !important;
  color: var(--accent-dark) !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"].is-active .transitionPillBar { background: transparent !important; }
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"] .transitionPill {
  background: #eef2f7 !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  color: #5b6b80 !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"] .transitionPill.is-active {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"].is-active .transitionDurationControl,
.editorApp:not([data-theme="dark"]):not([data-theme="night"]) .panelPane[data-tab-panel="transitions"].is-active .transitionActionRow {
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.97) 40%, #ffffff) !important;
  border-top-color: rgba(15,23,42,0.10) !important;
}

/* ===================== PHASE V-Text-1 - Text panel: pills + responsive grid + preview cards ===================== */

/* Declutter header: keep just the "Text" title */
.editorApp .panelPane[data-tab-panel="text"] .professionalPanelIntro .panelKicker,
.editorApp .panelPane[data-tab-panel="text"] .professionalPanelIntro p,
.editorApp .panelPane[data-tab-panel="text"] .professionalPanelIntro .panelProBadge,
.editorApp .panelPane[data-tab-panel="text"] .panelStatStrip {
  display: none !important;
}
.editorApp .panelPane[data-tab-panel="text"] .professionalPanelIntro h1 { margin: 0 !important; }

/* Category pill bar */
.editorApp .panelPane[data-tab-panel="text"] .textCatPillBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 14px;
}
.editorApp .panelPane[data-tab-panel="text"] .textCatPill {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: #eef2f7;
  color: #5b6b80;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.editorApp .panelPane[data-tab-panel="text"] .textCatPill:hover {
  border-color: rgba(var(--accent-rgb),0.35);
  color: var(--accent-dark);
}
.editorApp .panelPane[data-tab-panel="text"] .textCatPill.is-active {
  background: var(--accent);
  border-color: transparent;
  color: #ffffff;
}

/* Responsive grid: fluid 1/2/3 columns on panel resize (no layout jank) */
.editorApp .textPresetGrid-pro {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important;
  gap: 10px !important;
}

/* Bigger preview cards */
.editorApp .textPresetGrid-pro .textPreset {
  min-height: 112px !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  align-content: stretch !important;
  gap: 6px !important;
  padding: 12px 14px !important;
}
.editorApp .textPresetGrid-pro .textPreset::before { display: none !important; }
.editorApp .textPresetGrid-pro .textPreset strong {
  align-self: center;
  justify-self: center;
  text-align: center;
  font-size: 25px !important;
  line-height: 1.04;
  font-weight: 950;
}
.editorApp .textPresetGrid-pro .textPreset:not(.is-active) strong { color: #0f172a !important; }
.editorApp .textPresetGrid-pro .textPreset span {
  align-self: end;
  justify-self: start;
  text-align: left;
  font-size: 10px !important;
}
.editorApp .textPresetGrid-pro .textPreset:not(.is-active) span { color: #64748b !important; }

/* Per-style preview treatments (idle only; active state stays solid white) */
.editorApp .textPreset[data-text-style="cinema"]:not(.is-active) strong {
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.01em;
}
.editorApp .textPreset[data-text-style="chrome"]:not(.is-active) strong {
  background: linear-gradient(180deg, #e8edf5 0%, #97a6bb 58%, #4a576b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.editorApp .textPreset[data-text-style="depth"]:not(.is-active) strong {
  text-shadow: 2px 2px 0 rgba(15,23,42,0.20), 4px 4px 0 rgba(15,23,42,0.10);
}
.editorApp .textPreset[data-text-style="broadcast"]:not(.is-active) strong {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 18px !important;
}
.editorApp .textPreset[data-text-style="glass"]:not(.is-active) strong {
  text-shadow: 0 0 14px rgba(var(--accent-rgb),0.55);
}
.editorApp .textPreset[data-text-style="caption"]:not(.is-active) strong {
  font-weight: 820;
  font-size: 21px !important;
}

/* ===================== PHASE V-Text-2 - lighter cards (pic-style) + remove composer + on-canvas edit ===================== */

/* Remove the Text Content composer (input + Add Text to Timeline button) */
.editorApp .panelPane[data-tab-panel="text"] .textComposerCard { display: none !important; }

/* Lighter, flatter preset cards (match reference pic) */
.editorApp .textPresetGrid-pro .textPreset {
  min-height: 88px !important;
  background: #f4f6f9 !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}
.editorApp .textPresetGrid-pro .textPreset:hover {
  background: #eef2f7 !important;
  border-color: rgba(var(--accent-rgb),0.30) !important;
}
.editorApp .textPresetGrid-pro .textPreset strong {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1f2937 !important;
  text-shadow: none !important;
}
.editorApp .textPresetGrid-pro .textPreset span { color: #6b7280 !important; }

/* Active = light accent tint, not heavy fill */
.editorApp .textPresetGrid-pro .textPreset.is-active {
  background: rgba(var(--accent-rgb),0.12) !important;
  border-color: var(--accent) !important;
}
.editorApp .textPresetGrid-pro .textPreset.is-active strong { color: var(--accent-dark) !important; }
.editorApp .textPresetGrid-pro .textPreset.is-active span { color: var(--accent-dark) !important; }

/* Keep tasteful font hints, drop the heavy shadow/metallic treatments from V-Text-1 (idle only) */
.editorApp .textPreset[data-text-style="chrome"]:not(.is-active) strong {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #1f2937 !important;
  text-shadow: none !important;
}
.editorApp .textPreset[data-text-style="depth"]:not(.is-active) strong { text-shadow: none !important; }
.editorApp .textPreset[data-text-style="broadcast"]:not(.is-active) strong { text-shadow: none !important; }
.editorApp .textPreset[data-text-style="glass"]:not(.is-active) strong { text-shadow: none !important; }
.editorApp .textPreset[data-text-style="cinema"]:not(.is-active) strong { font-family: Georgia, "Times New Roman", serif !important; }

/* Lighten the on-canvas text overlay (less repaint = smoother playback, lighter look) */
.editorApp .textOverlay {
  text-shadow: 0 2px 6px rgba(0,0,0,0.32) !important;
  font-weight: 850 !important;
}
.editorApp .textOverlay[data-style="chrome"] { text-shadow: 0 2px 6px rgba(0,0,0,0.30) !important; }
.editorApp .textOverlay[data-style="glass"] { text-shadow: 0 0 12px rgba(var(--accent-rgb),0.40) !important; }

/* On-canvas editing affordance (double-click to edit text) */
.editorApp .textOverlay[contenteditable="true"] {
  outline: 2px dashed rgba(var(--accent-rgb),0.70);
  outline-offset: 4px;
  cursor: text;
}

/* ===================== PHASE V-Text-3 - drag repaint reduction (timeline row drag lag) ===================== */
.editorApp.is-dragging-clip .timelineDropPreview,
.editorApp .timelineDropPreview.is-dragging {
  box-shadow: 0 0 0 2px var(--accent) inset !important;
  filter: none !important;
  backdrop-filter: none !important;
}
.editorApp.is-dragging-clip .timelineClip.is-live-drag {
  filter: none !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.28) !important;
}
.editorApp.is-dragging-clip .timelineClip:not(.is-live-drag) {
  transition: none !important;
}

/* ===================== PHASE V-Text-4 - advanced preset library (auto-generated) ===================== */
.editorApp .textPresetGrid-pro .textPreset{display:flex !important;flex-direction:column !important;gap:7px !important;align-items:stretch !important;justify-content:flex-start !important;padding:7px !important;border:1px solid #e2e8f0 !important;border-radius:14px !important;background:#ffffff !important;min-height:auto !important;}
.editorApp .textPresetGrid-pro .textPreset:hover{border-color:#cbd5e1 !important;transform:translateY(-1px);}
.editorApp .textPresetGrid-pro .textPreset strong{display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;min-height:60px !important;border-radius:10px !important;padding:6px 10px !important;overflow:hidden !important;line-height:1.05 !important;background:radial-gradient(130% 150% at 28% 18%,#283449,#0a101c 72%) !important;font-size:23px !important;}
.editorApp .textPresetGrid-pro .textPreset span{font-size:10.5px !important;color:#64748b !important;font-weight:600 !important;text-align:center !important;letter-spacing:.02em !important;text-transform:none !important;}
.editorApp .textPresetGrid-pro .textPreset.is-active{border-color:var(--accent) !important;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.32) !important;background:#ffffff !important;}
.editorApp .textPresetGrid-pro .textPreset.is-active span{color:var(--accent-dark) !important;}

.editorApp .textOverlay[data-style="p01"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#34d399,#3b82f6) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p02"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#fb7185,#f59e0b) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p03"]{font-family:Georgia,'Times New Roman',serif !important;font-weight:800 !important;background:linear-gradient(180deg,#fde68a,#b45309) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p04"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#22d3ee,#2563eb) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p05"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#a78bfa,#6d28d9) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p06"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#f0abfc,#ec4899) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p07"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#f97316,#b91c1c) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p08"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#6ee7b7,#059669) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p09"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#818cf8,#7e22ce) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p10"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#e5e7eb,#64748b) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p11"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#fda4af,#e11d48) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p12"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#a3e635,#14b8a6) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p13"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#38bdf8,#7c3aed) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p14"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#fde047,#f97316) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p15"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#60a5fa,#1d4ed8) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p16"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#ecfeff !important;text-shadow:0 0 18px #22d3ee,0 0 8px #22d3ee !important}
.editorApp .textOverlay[data-style="p17"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#fff1f2 !important;text-shadow:0 0 18px #f472b6,0 0 8px #f472b6 !important}
.editorApp .textOverlay[data-style="p18"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#f7fee7 !important;text-shadow:0 0 18px #84cc16,0 0 8px #84cc16 !important}
.editorApp .textOverlay[data-style="p19"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#faf5ff !important;text-shadow:0 0 18px #a855f7,0 0 8px #a855f7 !important}
.editorApp .textOverlay[data-style="p20"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#fff7ed !important;text-shadow:0 0 18px #f97316,0 0 8px #f97316 !important}
.editorApp .textOverlay[data-style="p21"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:transparent !important;-webkit-text-stroke:2px #ffffff !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p22"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:transparent !important;-webkit-text-stroke:2px #fbbf24 !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p23"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:transparent !important;-webkit-text-stroke:2px #22d3ee !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p24"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;color:#fde047 !important;text-shadow:3px 3px 0 #1f2937 !important}
.editorApp .textOverlay[data-style="p25"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;color:#f9a8d4 !important;text-shadow:3px 3px 0 #831843 !important}
.editorApp .textOverlay[data-style="p26"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;color:#67e8f9 !important;text-shadow:3px 3px 0 #0e7490 !important}
.editorApp .textOverlay[data-style="p27"]{font-family:'Rockwell','Courier New',Georgia,serif !important;font-weight:800 !important;color:#fde68a !important;text-shadow:3px 3px 0 #7c2d12 !important}
.editorApp .textOverlay[data-style="p28"]{font-family:Impact,Haettenschweiler,'Arial Black',sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:#ffffff !important;text-shadow:0 2px 4px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.35) !important}
.editorApp .textOverlay[data-style="p29"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#f8fafc,#94a3b8) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p30"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;color:#ef4444 !important;text-shadow:0 3px 10px rgba(0,0,0,.45) !important}
.editorApp .textOverlay[data-style="p31"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;text-transform:uppercase !important;color:#ffffff !important;background:rgba(15,23,42,.88) !important;border-radius:10px !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p32"]{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:#ffffff !important;background:#b91c1c !important;border-radius:10px !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p33"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#ffffff !important;background:#10b981 !important;border-radius:10px !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p34"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:700 !important;color:#ffffff !important;background:rgba(0,0,0,.66) !important;border-radius:999px !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p35"]{font-family:'Courier New',Consolas,monospace !important;font-weight:700 !important;color:#ffffff !important;background:#2563eb !important;border-radius:999px !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p36"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:700 !important;color:#ffffff !important;background:rgba(0,0,0,.6) !important;border-radius:10px !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p37"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#ffffff !important;background:#6d28d9 !important;border-radius:10px !important;text-shadow:none !important}
.editorApp .textOverlay[data-style="p38"]{font-family:'Brush Script MT','Segoe Script',cursive !important;font-weight:500 !important;font-style:italic !important;color:#ffffff !important;text-shadow:0 2px 4px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.35) !important}
.editorApp .textOverlay[data-style="p39"]{font-family:'Brush Script MT','Segoe Script',cursive !important;font-weight:600 !important;font-style:italic !important;color:#fffbeb !important;text-shadow:0 0 18px #fbbf24,0 0 8px #fbbf24 !important}
.editorApp .textOverlay[data-style="p40"]{font-family:'Didot','Bodoni MT',Georgia,serif !important;font-weight:600 !important;color:#ffffff !important;text-shadow:0 3px 10px rgba(0,0,0,.45) !important}
.editorApp .textOverlay[data-style="p41"]{font-family:'Didot','Bodoni MT',Georgia,serif !important;font-weight:400 !important;text-transform:uppercase !important;letter-spacing:0.24em !important;color:#ffffff !important;text-shadow:0 2px 6px rgba(0,0,0,.32) !important}
.editorApp .textOverlay[data-style="p42"]{font-family:Georgia,'Times New Roman',serif !important;font-weight:700 !important;color:#fef3c7 !important;text-shadow:0 3px 10px rgba(0,0,0,.45) !important}
.editorApp .textOverlay[data-style="p43"]{font-family:'Courier New',Consolas,monospace !important;font-weight:700 !important;color:#e5e7eb !important;text-shadow:0 2px 6px rgba(0,0,0,.32) !important}
.editorApp .textOverlay[data-style="p44"]{font-family:'Courier New',Consolas,monospace !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:0.1em !important;color:#cffafe !important;text-shadow:0 0 18px #06b6d4,0 0 8px #06b6d4 !important}
.editorApp .textOverlay[data-style="p45"]{font-family:'Comic Sans MS','Segoe Print',cursive !important;font-weight:700 !important;color:#ffffff !important;text-shadow:0 3px 10px rgba(0,0,0,.45) !important}
.editorApp .textOverlay[data-style="p46"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#ffffff !important;text-shadow:0 2px 4px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.35) !important}
.editorApp .textOverlay[data-style="p47"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:300 !important;color:#ffffff !important;text-shadow:0 3px 10px rgba(0,0,0,.45) !important}
.editorApp .textOverlay[data-style="p48"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:0.18em !important;color:#ffffff !important;text-shadow:0 2px 6px rgba(0,0,0,.32) !important}
.editorApp .textOverlay[data-style="p49"]{font-family:Georgia,'Times New Roman',serif !important;font-weight:600 !important;color:#fff7ed !important;text-shadow:0 3px 10px rgba(0,0,0,.45) !important}
.editorApp .textOverlay[data-style="p50"]{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:700 !important;color:#e2e8f0 !important;text-shadow:0 2px 6px rgba(0,0,0,.32) !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p01"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#34d399,#3b82f6) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p02"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#fb7185,#f59e0b) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p03"] strong{font-family:Georgia,'Times New Roman',serif !important;font-weight:800 !important;background:linear-gradient(180deg,#fde68a,#b45309) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p04"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#22d3ee,#2563eb) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p05"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#a78bfa,#6d28d9) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p06"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#f0abfc,#ec4899) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p07"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#f97316,#b91c1c) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p08"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#6ee7b7,#059669) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p09"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#818cf8,#7e22ce) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p10"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#e5e7eb,#64748b) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p11"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#fda4af,#e11d48) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p12"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#a3e635,#14b8a6) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p13"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#38bdf8,#7c3aed) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p14"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#fde047,#f97316) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p15"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#60a5fa,#1d4ed8) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p16"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#ecfeff !important;text-shadow:0 0 12px #22d3ee,0 0 5px #22d3ee !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p17"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#fff1f2 !important;text-shadow:0 0 12px #f472b6,0 0 5px #f472b6 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p18"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#f7fee7 !important;text-shadow:0 0 12px #84cc16,0 0 5px #84cc16 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p19"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#faf5ff !important;text-shadow:0 0 12px #a855f7,0 0 5px #a855f7 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p20"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#fff7ed !important;text-shadow:0 0 12px #f97316,0 0 5px #f97316 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p21"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:transparent !important;-webkit-text-stroke:1.4px #ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p22"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:transparent !important;-webkit-text-stroke:1.4px #fbbf24 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p23"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:transparent !important;-webkit-text-stroke:1.4px #22d3ee !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p24"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;color:#fde047 !important;text-shadow:2px 2px 0 #1f2937 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p25"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;color:#f9a8d4 !important;text-shadow:2px 2px 0 #831843 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p26"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;color:#67e8f9 !important;text-shadow:2px 2px 0 #0e7490 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p27"] strong{font-family:'Rockwell','Courier New',Georgia,serif !important;font-weight:800 !important;color:#fde68a !important;text-shadow:2px 2px 0 #7c2d12 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p28"] strong{font-family:Impact,Haettenschweiler,'Arial Black',sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:#ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p29"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;background:linear-gradient(180deg,#f8fafc,#94a3b8) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p30"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;color:#ef4444 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p31"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;text-transform:uppercase !important;color:#ffffff !important;background:rgba(15,23,42,.88) !important;border-radius:8px !important;padding:4px 14px !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p32"] strong{font-family:'Arial Black',Impact,sans-serif !important;font-weight:900 !important;text-transform:uppercase !important;color:#ffffff !important;background:#b91c1c !important;border-radius:8px !important;padding:4px 14px !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p33"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#ffffff !important;background:#10b981 !important;border-radius:8px !important;padding:4px 14px !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p34"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:700 !important;color:#ffffff !important;background:rgba(0,0,0,.66) !important;border-radius:999px !important;padding:4px 14px !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p35"] strong{font-family:'Courier New',Consolas,monospace !important;font-weight:700 !important;color:#ffffff !important;background:#2563eb !important;border-radius:999px !important;padding:4px 14px !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p36"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:700 !important;color:#ffffff !important;background:rgba(0,0,0,.6) !important;border-radius:8px !important;padding:4px 14px !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p37"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#ffffff !important;background:#6d28d9 !important;border-radius:8px !important;padding:4px 14px !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p38"] strong{font-family:'Brush Script MT','Segoe Script',cursive !important;font-weight:500 !important;font-style:italic !important;color:#ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p39"] strong{font-family:'Brush Script MT','Segoe Script',cursive !important;font-weight:600 !important;font-style:italic !important;color:#fffbeb !important;text-shadow:0 0 12px #fbbf24,0 0 5px #fbbf24 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p40"] strong{font-family:'Didot','Bodoni MT',Georgia,serif !important;font-weight:600 !important;color:#ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p41"] strong{font-family:'Didot','Bodoni MT',Georgia,serif !important;font-weight:400 !important;text-transform:uppercase !important;letter-spacing:0.18em !important;color:#ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p42"] strong{font-family:Georgia,'Times New Roman',serif !important;font-weight:700 !important;color:#fef3c7 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p43"] strong{font-family:'Courier New',Consolas,monospace !important;font-weight:700 !important;color:#e5e7eb !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p44"] strong{font-family:'Courier New',Consolas,monospace !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:0.1em !important;color:#cffafe !important;text-shadow:0 0 12px #06b6d4,0 0 5px #06b6d4 !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p45"] strong{font-family:'Comic Sans MS','Segoe Print',cursive !important;font-weight:700 !important;color:#ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p46"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:800 !important;color:#ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p47"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:300 !important;color:#ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p48"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:0.18em !important;color:#ffffff !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p49"] strong{font-family:Georgia,'Times New Roman',serif !important;font-weight:600 !important;color:#fff7ed !important}
.editorApp .textPresetGrid-pro .textPreset[data-text-style="p50"] strong{font-family:'Helvetica Neue',Arial,sans-serif !important;font-weight:700 !important;color:#e2e8f0 !important}

/* ===================== PERF MODE V-Perf-1 - weak-PC GPU relief: kill backdrop-filter blur (continuous compositor cost) ===================== */
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===================== Phase 4 - Professional media drag/drop preview ===================== */
.editorApp .timelineDropPreview {
  box-sizing: border-box !important;
  min-width: 52px !important;
  max-width: min(360px, calc(100% - 12px)) !important;
  height: 30px !important;
  padding: 5px 9px 5px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  border: 1px solid rgba(125, 211, 252, 0.82) !important;
  background: linear-gradient(180deg, rgba(8, 16, 30, 0.94), rgba(10, 26, 46, 0.9)) !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.18), 0 10px 24px rgba(2, 8, 23, 0.22), 0 0 18px rgba(56, 189, 248, 0.2) !important;
  transform: translateZ(0) !important;
  transition: left 86ms linear, width 120ms ease-out, opacity 90ms ease-out, box-shadow 120ms ease-out !important;
  pointer-events: none !important;
  z-index: 18 !important;
}
.editorApp .timelineDropPreview::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: -5px !important;
  bottom: -5px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7dd3fc, #22d3ee, #38bdf8) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.75) !important;
}
.editorApp .timelineDropPreview::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 42%, rgba(56,189,248,.1)) !important;
  opacity: .72 !important;
  pointer-events: none !important;
}
.editorApp .timelineDropPreview span,
.editorApp .timelineDropPreview small {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
.editorApp .timelineDropPreview span {
  flex: 1 1 auto !important;
  max-width: 100% !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: #ecfeff !important;
}
.editorApp .timelineDropPreview small {
  flex: 0 0 auto !important;
  max-width: 86px !important;
  padding: 3px 5px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #082f49 !important;
  background: rgba(125, 211, 252, .9) !important;
}
.editorApp .timelineDropPreview.is-pending small {
  color: #fef3c7 !important;
  background: rgba(245, 158, 11, .24) !important;
  border: 1px solid rgba(251, 191, 36, .42) !important;
}
.editorApp .timelineDropPreview.is-pending::after {
  background: linear-gradient(90deg, transparent, rgba(251,191,36,.18), transparent) !important;
  animation: phase4DropPendingShimmer 1.05s linear infinite !important;
}
@keyframes phase4DropPendingShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.editorApp .timelineDropPreview[data-kind="audio"] { border-color: rgba(52, 211, 153, .78) !important; }
.editorApp .timelineDropPreview[data-kind="audio"]::before { background: linear-gradient(180deg, #6ee7b7, #10b981) !important; box-shadow: 0 0 12px rgba(16,185,129,.65) !important; }
.editorApp .timelineDropPreview[data-kind="image"] { border-color: rgba(251, 191, 36, .78) !important; }
.editorApp .timelineDropPreview[data-kind="image"]::before { background: linear-gradient(180deg, #fde68a, #f59e0b) !important; box-shadow: 0 0 12px rgba(245,158,11,.65) !important; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline {
  transform: translate3d(0,0,0) scale(.88) !important;
  opacity: .72 !important;
  filter: saturate(.96) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline .mediaDragCursorText small {
  display: none !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost[data-drag-count="1"].is-over-timeline .mediaDragCursorText strong {
  max-width: 108px !important;
}
body.is-custom-media-asset-dragging .timelineDropGhostRow.is-overlay-ghost-row {
  opacity: .72 !important;
}

/* ===================== Phase 4B - Full-row media drop preview (Aabir UI match) ===================== */
.editorApp .timelineDropPreview.is-media-panel-drop,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview {
  top: 4px !important;
  bottom: 4px !important;
  height: auto !important;
  min-height: 34px !important;
  min-width: 160px !important;
  max-width: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(45, 212, 191, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.10) 0 15px, rgba(5, 28, 33, 0.03) 15px 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #2dd4bf) 15%, #103635), #153f3a 44%, #102f2f) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(2, 6, 23, 0.18),
    0 0 0 1px color-mix(in srgb, var(--track-accent, #2dd4bf) 16%, transparent) !important;
  overflow: hidden !important;
  opacity: .98 !important;
  transform: translateZ(0) !important;
  transition: left 72ms linear, width 120ms ease-out, opacity 90ms ease-out !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop::before,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview::before {
  content: "" !important;
  position: absolute !important;
  inset: 15px 0 17px 0 !important;
  width: auto !important;
  border-radius: 0 !important;
  background:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, .30) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16)) !important;
  box-shadow: none !important;
  opacity: .82 !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop::after,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 15px !important;
  border-radius: 7px 7px 0 0 !important;
  background:
    linear-gradient(90deg, rgba(15,23,42,.30), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop span,
.editorApp .timelineDropPreview.is-media-panel-drop small,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview span,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview small {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 2px rgba(2, 6, 23, .38) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop span,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview span {
  align-self: flex-start !important;
  flex: 1 1 auto !important;
  max-width: calc(100% - 52px) !important;
  margin: 2px 6px 0 8px !important;
  color: rgba(236, 253, 245, .96) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 13px !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop small,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview small {
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  margin: 2px 5px 0 auto !important;
  max-width: 48px !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  color: #022c22 !important;
  background: rgba(94, 234, 212, .88) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 11px !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop.is-pending small,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview.is-pending small {
  color: #fef3c7 !important;
  background: rgba(245, 158, 11, .28) !important;
  border: 1px solid rgba(251, 191, 36, .45) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop.is-pending::before,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview.is-pending::before {
  background:
    linear-gradient(90deg, transparent, rgba(251,191,36,.18), transparent),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, .26) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16)) !important;
  animation: phase4DropPendingShimmer 1.05s linear infinite !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop[data-kind="audio"],
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview[data-kind="audio"] {
  border-color: rgba(52, 211, 153, .64) !important;
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.10) 0 15px, rgba(5, 28, 33, 0.03) 15px 100%),
    linear-gradient(90deg, #123a34, #174239 48%, #102f2f) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop[data-kind="image"],
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview[data-kind="image"] {
  border-color: rgba(251, 191, 36, .68) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0 15px, rgba(255,255,255,.03) 15px 100%),
    linear-gradient(90deg, #3b2c12, #5f3f10 48%, #3b2f18) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline {
  transform: translate3d(0,0,0) scale(.78) !important;
  opacity: .48 !important;
}

/* ===================== Phase 4C - UI-matched dark drag chip/preview colors ===================== */
.editorApp .timelineDropPreview.is-media-panel-drop,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview {
  border-color: rgba(37, 58, 82, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075) 0 15px, rgba(255,255,255,.018) 15px 100%),
    linear-gradient(90deg, #10233a 0%, #0f2d3a 46%, #10263a 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 7px 16px rgba(15, 23, 42, .18),
    0 0 0 1px rgba(15, 23, 42, .10) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop::before,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, rgba(17,34,54,.34), rgba(5,15,25,.34)) !important;
  opacity: .70 !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop::after,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview::after {
  background:
    linear-gradient(90deg, rgba(2,6,23,.34), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.028)) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop span,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview span {
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(2, 6, 23, .55) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop small,
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview small {
  color: #dbeafe !important;
  background: rgba(15, 23, 42, .46) !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop[data-kind="video"],
.editorApp .timelineDropPreview.is-media-panel-drop[data-kind="recording"],
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview[data-kind="video"],
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview[data-kind="recording"] {
  border-color: rgba(30, 64, 91, .74) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075) 0 15px, rgba(255,255,255,.018) 15px 100%),
    linear-gradient(90deg, #10233a 0%, #0f2b38 46%, #102338 100%) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop[data-kind="audio"],
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview[data-kind="audio"] {
  border-color: rgba(30, 80, 74, .68) !important;
  background:
    linear-gradient(180deg, rgba(236,253,245,.08) 0 15px, rgba(236,253,245,.018) 15px 100%),
    linear-gradient(90deg, #102d2d 0%, #123733 46%, #102b31 100%) !important;
}
.editorApp .timelineDropPreview.is-media-panel-drop[data-kind="image"],
body.is-custom-media-asset-dragging .editorApp .timelineDropPreview[data-kind="image"] {
  border-color: rgba(92, 70, 32, .70) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0 15px, rgba(255,255,255,.02) 15px 100%),
    linear-gradient(90deg, #2c2632 0%, #3b3025 46%, #2e2a30 100%) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline {
  opacity: .62 !important;
  transform: translate3d(0,0,0) scale(.82) !important;
  background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(15,23,42,.90)) !important;
  border: 1px solid rgba(148, 163, 184, .30) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.20), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline .mediaDragCursorText strong {
  color: #f8fafc !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline .mediaDragCursorThumb {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) !important;
}

/* ===================== Phase 1+2B - Zoom stability hotfix ===================== */
body.is-timeline-instant-zooming .timelineTrackLabel,
.editorApp.is-timeline-instant-zooming .timelineTrackLabel {
  transform: translateX(var(--timeline-scroll-left, 0px)) scaleX(var(--timeline-instant-zoom-inverse-scale, 1)) !important;
  transform-origin: left center !important;
  transition: none !important;
  will-change: transform !important;
}
body.is-timeline-instant-zooming .timelineRuler,
.editorApp.is-timeline-instant-zooming .timelineRuler {
  transform-origin: 0 0 !important;
  contain: layout style paint !important;
  transition: none !important;
  backface-visibility: hidden !important;
}
body.is-timeline-instant-zooming .timelineTracks,
.editorApp.is-timeline-instant-zooming .timelineTracks {
  backface-visibility: hidden !important;
  transform-style: flat !important;
}
body.is-timeline-instant-zooming .timelineClip,
.editorApp.is-timeline-instant-zooming .timelineClip {
  transition: none !important;
  will-change: transform, left, width !important;
}

/* ===================== Phase 1+2E - Low-lag live zoom ===================== */
body.is-dragging-timeline-zoom .timelineClip,
.editorApp.is-dragging-timeline-zoom .timelineClip,
body.is-timeline-instant-zooming .timelineClip,
.editorApp.is-timeline-instant-zooming .timelineClip {
  contain: layout paint style !important;
  transition: none !important;
}
body.is-dragging-timeline-zoom .clipThumbStrip,
body.is-dragging-timeline-zoom .clipThumbCanvas,
body.is-dragging-timeline-zoom .clipWaveformSvg,
.editorApp.is-dragging-timeline-zoom .clipThumbStrip,
.editorApp.is-dragging-timeline-zoom .clipThumbCanvas,
.editorApp.is-dragging-timeline-zoom .clipWaveformSvg {
  pointer-events: none !important;
  transition: none !important;
}

/* ===================== Phase 1+2F - Emergency no-hang zoom preview ===================== */
body.is-timeline-instant-zooming .timelineRuler .timelineTick span,
.editorApp.is-timeline-instant-zooming .timelineRuler .timelineTick span {
  display: inline-block !important;
  transform: scaleX(var(--timeline-instant-zoom-inverse-scale, 1)) !important;
  transform-origin: left center !important;
  transition: none !important;
}
body.is-timeline-instant-zooming .timelineRuler,
.editorApp.is-timeline-instant-zooming .timelineRuler,
body.is-timeline-instant-zooming .timelineTracks,
.editorApp.is-timeline-instant-zooming .timelineTracks {
  will-change: transform !important;
  transition: none !important;
}

/* ===================== Phase 1+2G - Safe ruler visuals ===================== */
body.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="stable-translate-preview"] .timelineTick span,
.editorApp.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="stable-translate-preview"] .timelineTick span {
  transform: none !important;
  letter-spacing: normal !important;
  opacity: .82 !important;
}
body.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="stable-translate-preview"],
.editorApp.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="stable-translate-preview"] {
  contain: layout style paint !important;
  backface-visibility: hidden !important;
}

/* ===================== Phase 1+2H - Zoom-safe clip preview visuals ===================== */
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .timelineClip,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .timelineClip {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0 14px, rgba(255,255,255,.025) 14px 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #0f766e) 22%, #102d2d), #123b36 48%, #0f2f34) !important;
  overflow: hidden !important;
}
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipThumbStrip,
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipThumb,
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipWaveform,
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipWaveformSvg,
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipThumbCanvas,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipThumbStrip,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipThumb,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipWaveform,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipWaveformSvg,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipThumbCanvas {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
}
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipLabel,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="preview"] .clipLabel {
  transform: scaleX(var(--timeline-instant-zoom-inverse-scale, 1)) !important;
  transform-origin: left center !important;
  max-width: 72% !important;
  opacity: .86 !important;
  background: rgba(15, 23, 42, .36) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(2,6,23,.6) !important;
  pointer-events: none !important;
}

/* ===================== Phase 1+2 PRO Alpha - Layer separation foundation ===================== */
.timelineTrack > .timelineClipLane {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  transform-origin: 0 0 !important;
  will-change: transform !important;
  pointer-events: none;
}
.timelineTrack > .timelineClipLane > .timelineClip {
  pointer-events: auto;
}
.timelineTrack > .timelineTrackLabel {
  z-index: 40 !important;
}
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .timelineTrackLabel,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .timelineTrackLabel {
  transform: translateX(var(--timeline-scroll-left, 0px)) !important;
  transform-origin: left center !important;
  transition: none !important;
  will-change: transform !important;
}
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .timelineClipLane,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .timelineClipLane {
  backface-visibility: hidden !important;
  transform-style: flat !important;
}
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipThumbStrip,
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipThumb,
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipWaveform,
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipWaveformSvg,
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipThumbCanvas,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipThumbStrip,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipThumb,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipWaveform,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipWaveformSvg,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipThumbCanvas {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
}
body.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipLabel,
.editorApp.is-timeline-instant-zooming .timelineTracks[data-timeline-zoom-mode="pro-layered-preview"] .clipLabel {
  transform: scaleX(var(--timeline-instant-zoom-inverse-scale, 1)) !important;
  transform-origin: left center !important;
  max-width: 72% !important;
  opacity: .9 !important;
  background: rgba(15, 23, 42, .36) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(2,6,23,.6) !important;
}

/* ===================== Phase 1+2 PRO Beta - Ruler tick preview sync ===================== */
body.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="pro-ruler-tick-preview"] .timelineTick,
.editorApp.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="pro-ruler-tick-preview"] .timelineTick {
  will-change: transform !important;
  transition: none !important;
}
body.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="pro-ruler-tick-preview"] .timelineTick span,
.editorApp.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="pro-ruler-tick-preview"] .timelineTick span {
  display: inline-block !important;
  transform: scaleX(var(--timeline-ruler-label-inverse-scale, 1)) !important;
  transform-origin: left center !important;
  transition: none !important;
  letter-spacing: normal !important;
}

/* ===================== Phase 1+2 PRO Delta - Fixed-size ruler labels ===================== */
body.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="pro-ruler-tick-preview"] .timelineTick span,
.editorApp.is-timeline-instant-zooming .timelineRuler[data-timeline-zoom-mode="pro-ruler-tick-preview"] .timelineTick span {
  transform: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}

/* ===================== Phase 0P - Performance profiler overlay ===================== */
.phase0pProfilerOverlay {
  position: fixed;
  right: 10px;
  top: 74px;
  width: min(360px, calc(100vw - 20px));
  max-height: calc(100vh - 100px);
  overflow: hidden auto;
  z-index: 999999;
  border: 1px solid rgba(125, 211, 252, .32);
  border-radius: 12px;
  background: rgba(2, 6, 23, .86);
  color: #e5f6ff;
  box-shadow: 0 18px 48px rgba(2, 6, 23, .32);
  backdrop-filter: blur(8px);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
}
.phase0pProfilerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(90deg, rgba(14,165,233,.26), rgba(15,23,42,.22));
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}
.phase0pProfilerHeader span { color: #bae6fd; font-size: 10px; font-weight: 800; }
.phase0pProfilerBody { padding: 8px 10px 10px; font-size: 11px; }
.phase0pProfilerTop strong,
.phase0pProfilerTitle { display: block; color: #7dd3fc; font-size: 11px; font-weight: 900; margin: 2px 0 4px; }
.phase0pProfilerTop small { display: block; color: #cbd5e1; margin-bottom: 7px; }
.phase0pProfilerRow,
.phase0pProfilerSlow { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 4px 0; border-top: 1px solid rgba(148, 163, 184, .14); }
.phase0pProfilerRow span,
.phase0pProfilerSlow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f8fafc; font-weight: 800; }
.phase0pProfilerRow b,
.phase0pProfilerSlow b { color: #fde68a; font-variant-numeric: tabular-nums; }
.phase0pProfilerRow small,
.phase0pProfilerSlow small { grid-column: 1 / -1; color: #94a3b8; font-size: 10px; }
.phase0pProfilerSlow b { color: #fecaca; }
.phase0pProfilerBody em { color: #94a3b8; font-style: normal; }

/* ===================== Phase 0P-A - Media pipeline safe mode ===================== */
.editorApp[data-phase0pa-media-safe="true"] .timelineClip .clipThumbStrip,
.editorApp[data-phase0pa-media-safe="true"] .timelineClip .clipThumbStrip-canvas,
.editorApp[data-phase0pa-media-safe="true"] .timelineClip .clipThumbCanvas,
.editorApp[data-phase0pa-media-safe="true"] .timelineClip .clipWaveform,
.editorApp[data-phase0pa-media-safe="true"] .timelineClip .clipWaveformSvg,
.editorApp[data-phase0pa-media-safe="true"] .timelineClip canvas {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}
.editorApp[data-phase0pa-media-safe="true"] .timelineClip {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0 15px, rgba(255,255,255,.025) 15px 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--track-accent, #0f766e) 22%, #102d2d), #123b36 50%, #0f2f34) !important;
}
.editorApp[data-phase0pa-media-safe="true"] .timelineClip::after {
  content: "SAFE";
  position: absolute;
  right: 6px;
  bottom: 5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(15,23,42,.44);
  color: rgba(186,230,253,.82);
  font: 800 9px/1 system-ui;
  pointer-events: none;
}
.editorApp[data-phase0pa-media-safe="true"] .phase0pProfilerHeader::after {
  content: "MEDIA SAFE";
  margin-left: 8px;
  color: #86efac;
  font-size: 10px;
}

/* ===================== Phase 0P-C - Resume stability recovery ===================== */
.phase0pProfilerOverlay .phase0pProfilerHeader::before {
  content: "RESUME SAFE";
  margin-right: 8px;
  color: #c4b5fd;
  font-size: 10px;
  font-weight: 900;
}

/* ===================== Phase 0P-D - Clip zoom settle guard ===================== */
.editorApp[data-phase0pd-multiclip-zoom="true"] .timelineClipLane {
  will-change: transform;
  backface-visibility: hidden;
  transform-style: flat;
}
.editorApp[data-phase0pd-multiclip-zoom="true"] .timelineClip {
  contain: layout paint style;
}
.phase0pProfilerOverlay .phase0pProfilerHeader::after {
  content: " MEDIA SAFE · ZOOM SETTLE";
}

/* ===================== Phase 0P-E - Zoom-in no-rubber geometry ===================== */
.phase0pProfilerOverlay .phase0pProfilerHeader::before {
  content: "ZOOM-IN GEOMETRY";
  margin-right: 8px;
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
}

/* ===================== Phase 0P-I - Media panel box select autoscroll bounds ===================== */
.mediaBoxSelectMarquee {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  border: 1px solid rgba(177, 124, 48, 0.88);
  background: rgba(177, 124, 48, 0.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.58) inset, 0 10px 26px rgba(177, 124, 48, 0.14);
  border-radius: 8px;
}
.assetList {
  cursor: default;
}

/* Phase 0P-I media selection clamp */
.mediaBoxSelectMarquee {
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - 8px);
}
.assetList.is-box-selecting {
  scroll-behavior: auto !important;
}


/* ===================== Phase 0P-K - Media box select scroll accumulation ===================== */
.mediaBoxSelectMarquee {
  overflow: hidden;
}

/* ===================== Phase 0P-J - Selection/import responsiveness ===================== */
.editorApp[data-phase0pj-import-safe="true"] .assetItem .assetPreview::after {
  content: "SAFE";
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(177,124,48,.82);
  color: #fffaf0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
}

/* ===================== Phase 0P-L - Timeline same-row overlap guard ===================== */
.timelineClip {
  isolation: isolate;
}

/* Phase 0S — Long clip timeline virtualization.
   Long clips render a viewport-sized DOM box (data-render-left/width) instead of
   their full duration width. Isolate paint/layout for the windowed box and hide
   the resize handle on whichever edge is currently clipped off-screen, since
   grabbing it would resize from the wrong (window) edge. */
.timelineClip.is-phase0s-windowed { contain: layout paint style; }
.timelineClip.is-phase0s-windowed.is-edge-clipped-left .clipResize-left { display: none !important; }
.timelineClip.is-phase0s-windowed.is-edge-clipped-right .clipResize-right { display: none !important; }

/* Phase A canvas-timeline POC. When the single-canvas renderer is active, hide
   the per-element DOM clips + ruler ticks so the browser stops painting them
   every frame (the canvas draws them instead). Track rows + left controls stay
   visible so vertical layout and track chrome are unchanged. Toggle: Ctrl+Alt+C. */
body.zed-canvas-timeline-on #timelineRuler > * {
  visibility: hidden !important;
}
body.zed-canvas-timeline-on #timelineTracks .timelineClipLane .timelineClip {
  visibility: hidden !important;
}
/* TL-R4-P5d: the canvas draws its own smooth playhead. Hide the DOM playhead so
   its laggy (DOM-scrub) line does not bleed through as a second ghost line. */
body.zed-canvas-timeline-on #timelinePlayhead {
  visibility: hidden !important;
}
body.zed-canvas-timeline-on #zedCanvasTimelineSurface {
  display: block !important;
}
/* Phase 1/2 (TL-R4): in canvas mode the canvas owns the visual. Stray DOM row
   chrome was poking through in the wrong place (insertion "Drop above/below"
   rows + the eye/lock track controls floating mid-timeline). Hide it here;
   proper track headers/controls are drawn on the canvas in a later phase.
   visibility:hidden keeps vertical layout so canvas row geometry stays exact. */
body.zed-canvas-timeline-on #timelineTracks .timelineTrack .timelineTrackLabel {
  visibility: hidden !important;
}

/* ============================================================================
   Phase 0T-PAINT: kill per-frame PAINT cost during zoom (the real ~80ms).
   Profiler proof: timeline JS is cheap (~20ms) but longFrame ~100ms (max 749ms)
   -> the unaccounted time is browser PAINT. The RULER-PRO/clip styling repaints
   expensive box-shadows, blurred label shadows, filters and multi-layer
   gradients on EVERY zoom frame. During an active zoom gesture we replace them
   with flat, cheap fills so the compositor only re-translates already-painted
   layers. Everything restores the instant the zoom settles (class removed).
   ============================================================================ */
body.is-timeline-instant-zooming .timelineClip,
.editorApp.is-timeline-instant-zooming .timelineClip {
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
  will-change: transform !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--track-accent, #2dd4bf) 13%, #123534),
      #143734) !important;
}
body.is-timeline-instant-zooming .timelineClip *,
.editorApp.is-timeline-instant-zooming .timelineClip * {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transition: none !important;
}
body.is-timeline-instant-zooming .timelineTrack::before,
.editorApp.is-timeline-instant-zooming .timelineTrack::before {
  box-shadow: none !important;
}
body.is-timeline-instant-zooming .timelineTrack,
.editorApp.is-timeline-instant-zooming .timelineTrack {
  box-shadow: inset 4px 0 0 var(--track-accent, #38bdf8) !important;
}
body.is-timeline-instant-zooming .timelineRuler,
.editorApp.is-timeline-instant-zooming .timelineRuler {
  box-shadow: none !important;
}

/* ===================== Phase 2 (DnD Pro): premium app-matched media drag card ===================== */
/* Authoritative redesign of the media drag cursor card. Supersedes the earlier
   Phase 4B/4C over-timeline overrides that faded (opacity .48-.62) and shrank
   (scale .78-.82) the card into a washed-out, unreadable chip. Keeps the card
   crisp, compact and on-brand both in transit and while hovering the timeline. */
.mediaDragCursorGhost {
  gap: 9px;
  border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(35, 45, 64, 0.96), rgba(19, 27, 43, 0.96));
  box-shadow:
    0 16px 34px rgba(2, 6, 23, 0.44),
    0 2px 6px rgba(2, 6, 23, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: visible;
}
/* left-edge kind accent rail */
.mediaDragCursorGhost::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--dragKindAccent, #60a5fa);
  box-shadow: 0 0 8px var(--dragKindAccent, #60a5fa);
  opacity: 0.92;
  pointer-events: none;
}
.mediaDragCursorGhost[data-drag-kind="video"],
.mediaDragCursorGhost[data-drag-kind="recording"] { --dragKindAccent: #38bdf8; }
.mediaDragCursorGhost[data-drag-kind="audio"] { --dragKindAccent: #2dd4bf; }
.mediaDragCursorGhost[data-drag-kind="image"] { --dragKindAccent: #fbbf24; }
.mediaDragCursorGhost[data-drag-kind="text"] { --dragKindAccent: #c084fc; }
.mediaDragCursorThumb {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 14px rgba(2, 6, 23, 0.35);
}
.mediaDragCursorText strong {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.1px;
  color: #f1f5f9;
}
.mediaDragCursorText small {
  font-size: 10.5px;
  font-weight: 500;
  color: #93a4bd;
}
/* multi-select count badge */
.mediaDragCursorCount {
  position: absolute;
  top: -7px;
  left: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #0b1220;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  border: 1.5px solid rgba(15, 23, 42, 0.85);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(2, 6, 23, 0.42);
  z-index: 3;
  pointer-events: none;
}
/* stacked-card illusion behind a multi-select drag */
.mediaDragCursorGhost:not([data-drag-count="1"])::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(30, 39, 57, 0.92), rgba(16, 23, 38, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.16);
  transform: translate(6px, 7px);
  z-index: -1;
  opacity: 0.6;
}
/* keep the card CRISP over the timeline (supersede faded Phase 4B/4C overrides) */
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(0.98) !important;
  filter: none !important;
  background: linear-gradient(180deg, rgba(35, 45, 64, 0.96), rgba(19, 27, 43, 0.96)) !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  box-shadow:
    0 16px 34px rgba(2, 6, 23, 0.44),
    0 0 0 1px var(--dragKindAccent, rgba(125, 211, 252, 0.30)),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline .mediaDragCursorText small {
  display: block !important;
  color: #b6c4da !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost[data-drag-count="1"].is-over-timeline .mediaDragCursorText strong {
  max-width: 184px !important;
}

/* ===================== Phase 2 (DnD Pro) - UI-matched professional media drag card ===================== */
/* Authoritative, theme-aware override of the media-panel -> timeline drag card.
   Supersedes earlier hardcoded-dark Phase 4B/4C chip styling so the card matches
   the app in light AND dark. Pure CSS; uses existing data-drag-count/data-drag-kind. */
body.is-custom-media-asset-dragging .mediaDragCursorGhost {
  gap: 10px !important;
  padding: 7px 12px 7px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, transparent), var(--panel)) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.18) !important;
  /* Phase 2.1 stability: no backdrop-filter, single shadow (was 3 + blur). */
  will-change: transform, left, top !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost::before {
  content: "" !important;
  position: absolute !important;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 3px !important;
  border-radius: 3px !important;
  background: var(--dnd-kind-accent, var(--accent)) !important;
  opacity: .92 !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost[data-drag-kind="video"],
body.is-custom-media-asset-dragging .mediaDragCursorGhost[data-drag-kind="recording"] { --dnd-kind-accent: #4f6fe5; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost[data-drag-kind="audio"] { --dnd-kind-accent: #2dd4bf; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost[data-drag-kind="image"] { --dnd-kind-accent: #f59e0b; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost[data-drag-kind="text"] { --dnd-kind-accent: #a855f7; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost .mediaDragCursorThumb {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9px !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.18), inset 0 0 0 1px var(--line-soft) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost .mediaDragCursorText strong { color: var(--text) !important; font-size: 12px !important; font-weight: 750 !important; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost .mediaDragCursorText small { color: var(--muted) !important; font-size: 10.5px !important; font-weight: 650 !important; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost:not([data-drag-count="1"])::after {
  content: attr(data-drag-count) !important;
  position: absolute !important;
  top: -8px;
  right: -8px !important;
  min-width: 18px;
  height: 18px !important;
  padding: 0 5px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.24), 0 0 0 2px var(--panel) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost:not([data-drag-count="1"]):not(.is-over-media-panel) {
  box-shadow: 0 8px 20px rgba(15,23,42,.18), 6px 6px 0 -2px color-mix(in srgb, var(--panel) 90%, var(--line)) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline {
  opacity: 1 !important;
  transform: translate3d(0,-50%,0) scale(.97) !important;
  filter: none !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, transparent), var(--panel)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.20) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline .mediaDragCursorText strong { color: var(--text) !important; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline .mediaDragCursorText small { display: block !important; color: var(--muted) !important; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-timeline .mediaDragCursorThumb { box-shadow: inset 0 0 0 1px var(--line-soft) !important; }
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-media-panel:not(.is-over-timeline) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 97%, transparent), var(--panel)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.18), inset 0 1px 0 color-mix(in srgb, #ffffff 50%, transparent) !important;
}
body.is-custom-media-asset-dragging .mediaDragCursorGhost.is-over-media-panel:not(.is-over-timeline)::before { display: none !important; }


/* Canvas timeline owns horizontal scrolling (wheel + drag), so the legacy
   custom horizontal scrollbar strip (#timelineHScroll) must NOT reappear as a
   bottom bar / old-timeline strip under the canvas while canvas mode is on. */
body.zed-canvas-timeline-on #timelineHScroll { display: none !important; }


/* TL-R4-P10: the canvas owns the ENTIRE timeline visual in canvas mode. Hide
   the WHOLE DOM track stack (rows, clip lanes, eye/lock/mute .trackControls, and
   the "Drop above/below - create new row" insert spacers) so NONE of the old DOM
   timeline can poke through beside / under the canvas. Canvas row geometry comes
   from the snapshot (not DOM rects), so hiding these is safe. */
body.zed-canvas-timeline-on #timelineTracks { visibility: hidden !important; }
/* Drop the reserved bottom scrollbar grid row so no leftover strip / old
   horizontal-scrollbar area remains beneath the canvas (canvas h-scrolls itself). */
body.zed-canvas-timeline-on .timelineCanvas { grid-template-rows: 22px minmax(0, 1fr) 0px !important; }

/* LP-1: brand mark moved into the header */
.topBarLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.topBarBrand {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.26);
}
.topBarBrand svg {
  width: 20px;
  height: 20px;
}

/* Project name hidden in header (handled at export time) */
.titleInput { display: none !important; }

/* ===== TLR4-P13 — center header action group in the top bar ===== */
.editorApp .topBar > .topActions {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}


/* ===== AC-1 — account avatar button (top-right) ===== */
.editorApp .topBarRight {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.editorApp .accountAvatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.55);
  background: linear-gradient(135deg, #e9d9c2, #cdb289);
  color: var(--accent-dark);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  position: relative;
  padding: 0;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.editorApp .accountAvatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.32);
  border-color: rgba(var(--accent-rgb), 0.85);
}
.editorApp .accountAvatar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.editorApp .accountAvatarInner {
  pointer-events: none;
  line-height: 1;
}
/* offline status dot shown only when signed out */
.editorApp .accountAvatar[data-signed-in="false"]::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #9aa3af;
  border: 2px solid var(--bg, #f5f6f8);
}
.editorApp .accountAvatar[data-signed-in="true"]::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid var(--bg, #f5f6f8);
}


/* ===================== AC-2 / AC-3 — account dropdown + settings modal ===================== */
.accountMenu {
  position: fixed;
  top: 60px;
  right: 18px;
  width: 300px;
  z-index: 10050;
  background: var(--panel, #fff);
  border: 1px solid var(--line, rgba(15,23,42,0.08));
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.16);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.accountMenu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.accountMenu::before {
  content: ""; position: absolute; top: -7px; right: 20px; width: 14px; height: 14px;
  background: var(--panel, #fff); border-left: 1px solid var(--line, rgba(15,23,42,0.08));
  border-top: 1px solid var(--line, rgba(15,23,42,0.08)); transform: rotate(45deg);
}
.accountMenuHead { padding: 18px 18px 16px; text-align: center; background: linear-gradient(180deg, rgba(var(--accent-rgb),.07), transparent); }
.accountMenuBig {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #e9d9c2, #cdb289); color: var(--accent-dark, #8a6a3c);
  box-shadow: 0 6px 16px rgba(var(--accent-rgb),.28);
}
.accountMenuHead h3 { margin: 0 0 3px; font-size: 15px; font-weight: 750; color: var(--text, #273449); }
.accountMenuHead p { margin: 0; font-size: 12px; color: var(--muted, #6b7280); line-height: 1.4; }
.accountMenuAuth { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line, rgba(15,23,42,0.08)); }
.amBtnPrimary {
  width: 100%; padding: 10px; border: 0; border-radius: 11px; cursor: pointer; font-weight: 700; font-size: 13.5px;
  color: #fff; background: linear-gradient(135deg, var(--accent, #a9824c), var(--accent-dark, #8a6a3c));
  box-shadow: 0 8px 18px rgba(var(--accent-rgb),.3);
}
.amBtnPrimary:hover { filter: brightness(1.04); }
.amBtnGhost { width: 100%; padding: 9px; border: 1px solid var(--line2, rgba(148,163,184,0.22)); border-radius: 11px; background: #fff; cursor: pointer; font-weight: 650; font-size: 13px; color: var(--text, #273449); }
.amBtnGhost:hover { background: #f3f5f8; }
.accountMenuList { padding: 8px; }
.amItem {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 11px; border: 0; border-radius: 10px;
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text, #273449); background: transparent; text-align: left;
}
.amItem:hover { background: rgba(var(--accent-rgb),.09); }
.amItem .amIc { width: 18px; height: 18px; color: var(--muted, #6b7280); flex: 0 0 auto; }
.amItem:hover .amIc { color: var(--accent-dark, #8a6a3c); }
.amItem .amChev { margin-left: auto; color: #c2c8d0; }
.amSep { height: 1px; background: var(--line, rgba(15,23,42,0.08)); margin: 6px 8px; }
.accountMenuFoot {
  padding: 11px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 11px;
  color: var(--muted, #6b7280); background: rgba(248,250,252,.7); border-top: 1px solid var(--line, rgba(15,23,42,0.08));
}
.accountMenuFoot a { color: var(--muted, #6b7280); text-decoration: none; }
.accountMenuFoot a:hover { color: var(--accent-dark, #8a6a3c); }

/* ---- settings modal ---- */
.settingsModalOverlay {
  position: fixed; inset: 0; z-index: 10060; display: grid; place-items: center;
  background: rgba(15,23,42,.34); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.settingsModalOverlay.is-open { opacity: 1; pointer-events: auto; }
.settingsModal {
  width: 1000px; max-width: 95vw; height: 660px; max-height: 92vh;
  background: var(--panel, #fff); border-radius: 20px; box-shadow: 0 40px 100px rgba(15,23,42,.3);
  display: grid; grid-template-columns: 236px 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.6);
  transform: translateY(10px) scale(.985); transition: transform .2s ease;
}
.settingsModalOverlay.is-open .settingsModal { transform: none; }
.smSide { background: linear-gradient(180deg, #fafbfc, #f3f5f8); border-right: 1px solid var(--line, rgba(15,23,42,0.08)); padding: 18px 14px; display: flex; flex-direction: column; }
.smAcct { display: flex; align-items: center; gap: 11px; padding: 8px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line, rgba(15,23,42,0.08)); }
.smAcct .smAv { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, #e9d9c2, #cdb289); color: var(--accent-dark, #8a6a3c); font-size: 16px; flex: 0 0 auto; }
.smAcct .smNm { font-size: 13.5px; font-weight: 750; color: var(--text, #273449); }
.smAcct .smEm { font-size: 11.5px; color: var(--muted, #6b7280); }
.smNav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.smNavItem { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 0; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text, #273449); background: transparent; text-align: left; }
.smNavItem svg { width: 18px; height: 18px; color: var(--muted, #6b7280); flex: 0 0 auto; }
.smNavItem:hover { background: rgba(var(--accent-rgb),.08); }
.smNavItem.is-active { background: linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.08)); color: var(--accent-dark, #8a6a3c); font-weight: 750; }
.smNavItem.is-active svg { color: var(--accent-dark, #8a6a3c); }
.smNavSep { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa3af; padding: 14px 11px 6px; }
.smSignoff { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 0; border-radius: 10px; font-size: 13px; font-weight: 600; color: #c0392b; cursor: pointer; background: transparent; text-align: left; }
.smSignoff:hover { background: rgba(192,57,43,.08); }
.smSignoff svg { width: 18px; height: 18px; }
.smMain { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.smHead { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; border-bottom: 1px solid var(--line, rgba(15,23,42,0.08)); }
.smHead h2 { margin: 0; font-size: 18px; font-weight: 780; color: var(--text, #273449); }
.smHead p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted, #6b7280); }
.smClose { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2, rgba(148,163,184,0.22)); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--muted, #6b7280); font-size: 16px; }
.smClose:hover { background: #f3f5f8; }
.smBody { padding: 24px 26px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
.smPanel[hidden] { display: none; }
.smSec { font-size: 13px; font-weight: 750; margin: 0 0 12px; color: var(--text, #273449); }
.smSec.mt { margin-top: 26px; }
.smThemes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.smThemeCard { border: 1.5px solid var(--line2, rgba(148,163,184,0.22)); border-radius: 13px; padding: 10px; cursor: pointer; background: #fff; transition: .15s; }
.smThemeCard:hover { border-color: rgba(var(--accent-rgb),.5); transform: translateY(-2px); }
.smThemeCard.sel { border-color: var(--accent, #a9824c); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); }
.smTPrev { height: 62px; border-radius: 9px; margin-bottom: 8px; position: relative; overflow: hidden; }
.smTPrev .smDot { position: absolute; top: 8px; left: 8px; width: 14px; height: 14px; border-radius: 50%; }
.smTPrev .smBar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.65); }
.smTPrev.lumen { background: linear-gradient(135deg, #efe6d6, #d8c4a3); } .smTPrev.lumen .smDot { background: #a9824c; }
.smTPrev.glacier { background: linear-gradient(135deg, #e6f0fb, #bcd8f5); } .smTPrev.glacier .smDot { background: #3b82f6; }
.smTPrev.noir { background: linear-gradient(135deg, #2a2e37, #11141a); } .smTPrev.noir .smDot { background: #e5e7eb; } .smTPrev.noir .smBar { background: rgba(255,255,255,.25); }
.smTPrev.velvet { background: linear-gradient(135deg, #efe2f3, #cda9df); } .smTPrev.velvet .smDot { background: #8b5cf6; }
.smTPrev.capcut { background: linear-gradient(135deg, #26262b, #131316); } .smTPrev.capcut .smDot { background: #3e7bfa; } .smTPrev.capcut .smBar { background: rgba(62,123,250,.55); }
.smTName { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; color: var(--text, #273449); }
.smTName .smTick { color: var(--accent, #a9824c); font-weight: 800; }
.smSwatches { display: flex; flex-wrap: wrap; gap: 10px; }
.smSwatch { width: 30px; height: 30px; border-radius: 9px; cursor: pointer; border: 2px solid transparent; box-shadow: 0 2px 6px rgba(15,23,42,.12); }
.smSwatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent, #a9824c), 0 2px 6px rgba(15,23,42,.12); }
.smRow { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line, rgba(15,23,42,0.08)); gap: 16px; }
.smRow:last-child { border-bottom: 0; }
.smRow .smRt { font-size: 13.5px; font-weight: 650; color: var(--text, #273449); }
.smRow .smRd { font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }
.smToggle { width: 42px; height: 24px; border-radius: 999px; background: #d3d8df; position: relative; cursor: pointer; transition: .18s; flex: 0 0 auto; border: 0; padding: 0; }
.smToggle.on { background: linear-gradient(135deg, var(--accent, #a9824c), var(--accent-dark, #8a6a3c)); }
.smToggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(15,23,42,.25); transition: .18s; }
.smToggle.on::after { left: 20px; }
.smEmpty { display: grid; place-items: center; height: 100%; min-height: 280px; text-align: center; color: var(--muted, #6b7280); }
.smEmpty .smEmojiBig { font-size: 34px; margin-bottom: 10px; opacity: .7; }
.smEmpty h4 { margin: 0 0 4px; font-size: 15px; font-weight: 750; color: var(--text, #273449); }
.smEmpty p { margin: 0; font-size: 12.5px; max-width: 280px; }
.smFoot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--line, rgba(15,23,42,0.08)); background: rgba(248,250,252,.7); }
.smFoot .amBtnGhost, .smFoot .amBtnPrimary { width: auto; padding-left: 20px; padding-right: 20px; }


/* ===================== AC-4 / AC-5 — prefs, account form, session ===================== */
.accountMenuSignedIn { padding: 8px 8px 0; }
.amItem.dangerItem, .amItem.dangerItem .amIc { color: #c0392b; }
.amItem.dangerItem:hover { background: rgba(192,57,43,.09); }

/* auth form */
.authCard { max-width: 380px; margin: 6px auto 0; }
.authTabs { display: flex; gap: 6px; background: #f1f3f6; padding: 4px; border-radius: 12px; margin-bottom: 18px; }
.authTab { flex: 1; padding: 9px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted, #6b7280); }
.authTab.is-active { background: #fff; color: var(--text, #273449); box-shadow: 0 2px 6px rgba(15,23,42,.1); }
.authForm { display: flex; flex-direction: column; gap: 13px; }
.authField { display: flex; flex-direction: column; gap: 6px; }
.authField > span { font-size: 12px; font-weight: 650; color: var(--muted, #6b7280); }
.authField input { padding: 11px 13px; border: 1.5px solid var(--line2, rgba(148,163,184,0.28)); border-radius: 11px; font-size: 13.5px; color: var(--text, #273449); background: #fff; outline: none; transition: border-color .14s ease, box-shadow .14s ease; }
.authField input:focus { border-color: var(--accent, #a9824c); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); }
.authErr { font-size: 12.5px; font-weight: 600; color: #c0392b; background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.2); border-radius: 9px; padding: 9px 11px; }
.authSubmit { margin-top: 4px; }
.authHint { text-align: center; font-size: 11.5px; color: var(--muted, #6b7280); margin: 14px 0 0; }

/* signed-in profile */
.profileCard { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line, rgba(15,23,42,0.08)); border-radius: 14px; background: linear-gradient(135deg, rgba(var(--accent-rgb),.07), transparent); margin-bottom: 18px; }
.profileAv { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 20px; background: linear-gradient(135deg, #e9d9c2, #cdb289); color: var(--accent-dark, #8a6a3c); box-shadow: 0 6px 16px rgba(var(--accent-rgb),.28); flex: 0 0 auto; }
.profileName { font-size: 16px; font-weight: 780; color: var(--text, #273449); }
.profileEmail { font-size: 12.5px; color: var(--muted, #6b7280); margin-top: 2px; }
.profileInput { padding: 9px 12px; border: 1.5px solid var(--line2, rgba(148,163,184,0.28)); border-radius: 10px; font-size: 13.5px; color: var(--text, #273449); background: #fff; outline: none; min-width: 200px; }
.profileInput:focus { border-color: var(--accent, #a9824c); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); }
.dangerBtn { margin-top: 20px; color: #c0392b !important; border-color: rgba(192,57,43,.3) !important; }
.dangerBtn:hover { background: rgba(192,57,43,.07) !important; }

/* reduce-motion + compact-menus prefs */
.editorApp.zed-reduce-motion .accountMenu,
.editorApp.zed-reduce-motion .settingsModal,
.editorApp.zed-reduce-motion .settingsModalOverlay,
.editorApp.zed-reduce-motion .accountAvatar,
.editorApp.zed-reduce-motion .smThemeCard { transition: none !important; }
.editorApp.zed-compact-menus .amItem { padding-top: 7px; padding-bottom: 7px; }
.editorApp.zed-compact-menus .accountMenuList { padding: 6px; }


/* ===================== AC-6 / AC-7 — settings controls, shortcuts, a11y, responsive ===================== */
.smSelect {
  padding: 8px 30px 8px 12px; border: 1.5px solid var(--line2, rgba(148,163,184,0.28)); border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--text, #273449); background: #fff; cursor: pointer; outline: none;
  min-width: 150px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.smSelect:focus { border-color: var(--accent, #a9824c); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); }

/* shortcuts */
.scSearchWrap { margin-bottom: 16px; }
.scSearch {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--line2, rgba(148,163,184,0.28)); border-radius: 11px;
  font-size: 13.5px; color: var(--text, #273449); background: #fff; outline: none;
}
.scSearch:focus { border-color: var(--accent, #a9824c); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); }
.scGroup { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9aa3af; margin: 16px 0 6px; }
.scGroup:first-child { margin-top: 0; }
.scRow { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line, rgba(15,23,42,0.06)); font-size: 13.5px; color: var(--text, #273449); gap: 12px; }
.scRow[hidden], .scGroup[hidden] { display: none; }
.scKeys { display: flex; gap: 4px; flex: 0 0 auto; }
.scKeys kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--text, #273449);
  background: #f1f3f6; border: 1px solid var(--line2, rgba(148,163,184,0.32)); border-bottom-width: 2px; border-radius: 6px;
  padding: 2px 7px; min-width: 18px; text-align: center; line-height: 1.5;
}
.scEmpty { text-align: center; color: var(--muted, #6b7280); font-size: 13px; padding: 30px 0; }

/* ---- AC-7 a11y: focus-visible ---- */
.smNavItem:focus-visible, .authTab:focus-visible, .smThemeCard:focus-visible, .smSwatch:focus-visible,
.smToggle:focus-visible, .smSelect:focus-visible, .amItem:focus-visible, .smClose:focus-visible {
  outline: 2px solid var(--accent, #a9824c); outline-offset: 2px;
}
.smThemeCard { outline-offset: 3px; }

/* ---- AC-7 responsive: stack the modal on narrow widths ---- */
@media (max-width: 760px) {
  .settingsModal { grid-template-columns: 1fr; height: 92vh; max-height: 92vh; }
  .smSide { flex-direction: column; padding: 12px; }
  .smAcct { display: none; }
  .smNavSep { display: none; }
  .smNav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .smNavItem { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
  .smNavItem span, .smNavItem { font-size: 12.5px; }
  .smSignoff { display: none; }
  .smThemes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .accountMenu { right: 8px; left: 8px; width: auto; }
}

/* ---- AC-7 honor OS reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .accountMenu, .settingsModal, .settingsModalOverlay, .accountAvatar, .smThemeCard, .smToggle, .smToggle::after { transition: none !important; }
}


/* ===================== PR-1 — Preferences sub-tabs ===================== */
.smSubTabs { display: flex; gap: 4px; margin-bottom: 0; flex-wrap: wrap; }
.smSubTab { padding: 9px 16px; border: 0; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--muted, #6b7280); border-radius: 9px 9px 0 0; position: relative; }
.smSubTab:hover { color: var(--text, #273449); }
.smSubTab.is-active { color: var(--accent-dark, #8a6a3c); }
.smSubTab.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent, #a9824c), var(--accent-dark, #8a6a3c)); }
.smSubTab:focus-visible { outline: 2px solid var(--accent, #a9824c); outline-offset: 2px; }
.smSubLine { height: 1px; background: var(--line, rgba(15,23,42,.08)); margin: 0 0 14px; }
.smSubPanel[hidden] { display: none; }
.smSubHint { color: var(--muted, #6b7280); font-size: 13px; padding: 30px 0; text-align: center; }


/* ===================== PR-3 — Draft sub-tab (paths, cache, feasibility) ===================== */
.smBadge { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; margin-left: 7px; vertical-align: middle; }
.smBadge.lim { background: rgba(217,136,58,.15); color: #a9651f; }
.smBadge.no { background: rgba(154,163,175,.18); color: #6b7280; }
.smRow.na { opacity: .55; }
.smRow.na .smToggle, .smRow.na .smSelect, .smRow.na .smFolderBtn { pointer-events: none; filter: grayscale(.3); }

/* ===== Referrals panel (frontend UI; backend wires later) ===== */
.refStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.refCard { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel-2); }
.refIc { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.14); font-size: 15px; margin-bottom: 9px; }
.refVal { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.refLbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.refBanner { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; }
.refBannerTxt b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.refBannerTxt span { font-size: 12px; color: var(--muted); }
.refLinkRow { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.refLinkField { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 10px 12px; color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.refCopyBtn { white-space: nowrap; }
.refShare { display: flex; gap: 8px; margin: 4px 0 20px; }
.refChip { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; cursor: pointer; font-size: 15px; color: var(--text); }
.refChip:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.refTableHead { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }
.refYear { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.refTableWrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.refTable { width: 100%; border-collapse: collapse; }
.refTable th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.refTable td { font-size: 12.5px; color: var(--text); padding: 12px; border-bottom: 1px solid var(--line-soft); }
.refTable tr:last-child td { border-bottom: 0; }
.refEmpty { text-align: center; color: var(--muted); padding: 22px 12px !important; }
.refSt { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.refSt.paid { background: rgba(22,163,74,.14); color: #16a34a; }
.refSt.pending { background: rgba(100,116,139,.16); color: var(--muted); }
.refNote { font-size: 11.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.refToast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(16px); background: #111827; color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 13px; opacity: 0; transition: .25s ease; pointer-events: none; z-index: 99999; }
.refToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 720px) { .refStats { grid-template-columns: repeat(2, 1fr); } }

/* ===== Referrals panel v2 (polished / global SaaS) ===== */
.refBanner { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .10), var(--panel-2)); border: 1px solid var(--line); border-radius: 16px; padding: 15px 18px; margin-bottom: 22px; }
.refBannerIc { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .16); color: var(--accent-dark); }
.refBannerIc svg { width: 20px; height: 20px; }
.refBannerTxt { flex: 1 1 auto; min-width: 0; }
.refBtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; cursor: pointer; font-weight: 700; font-size: 13px; border-radius: 11px; padding: 11px 18px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 4px 14px rgba(var(--accent-rgb), .28); white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.refBtn:hover { filter: brightness(1.05); box-shadow: 0 7px 20px rgba(var(--accent-rgb), .38); transform: translateY(-1px); }
.refBtn:active { transform: translateY(0); }
.refBtn svg { width: 15px; height: 15px; }
.refLinkRow { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.refLinkField { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); padding: 0 13px; transition: border-color .15s ease, box-shadow .15s ease; }
.refLinkField:focus-within { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }
.refLinkField .refLinkIc { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); }
.refLinkField input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; padding: 12px 0; }
.refShare { display: flex; gap: 10px; margin: 2px 0 24px; }
.refChip { width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; cursor: pointer; color: var(--muted); transition: transform .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease, border-color .14s ease; }
.refChip svg { width: 19px; height: 19px; }
.refChip:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .16); }
.refChip.wa:hover { background: #25D366; border-color: #25D366; }
.refChip.x:hover { background: #0f0f0f; border-color: #0f0f0f; }
.refChip.tg:hover { background: #229ED9; border-color: #229ED9; }
.refChip.em:hover { background: var(--accent); border-color: var(--accent); }
.refSt.reversed { background: rgba(239,68,68,.14); color: #ef4444; text-decoration: line-through; }
.refLegend { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.refLegendLbl { font-size: 11.5px; color: var(--muted); margin-right: 2px; }

/* ===== Referral how-it-works + QR ===== */
.refHow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 16px; }
.refHowStep { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel-2); }
.refHowNum { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.refHowStep b { display: block; font-size: 12.5px; color: var(--text); }
.refHowStep span { font-size: 11.5px; color: var(--muted); }
.refQrCard { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel-2); margin-bottom: 18px; }
.refQrImg { width: 96px; height: 96px; border-radius: 8px; background: #fff; border: 1px solid var(--line); flex: 0 0 auto; object-fit: contain; }
.refQrTxt b { display: block; font-size: 13px; color: var(--text); }
.refQrTxt span { font-size: 12px; color: var(--muted); }

/* ===== Payments page ===== */
.payEarn { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .08), var(--panel-2)); margin-bottom: 8px; }
.payEarnTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.payEarnSub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.payEarnAmt { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.payBar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 16px 0 8px; }
.payBarFill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 999px; transition: width .4s ease; }
.payBarMeta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); gap: 10px; }
.payLast { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.payHint { font-size: 12px; color: var(--muted); margin: 2px 0 12px; }
.payForm { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.payField { display: flex; flex-direction: column; gap: 5px; }
.payField > span { font-size: 12px; font-weight: 600; color: var(--text); }
.paySelect, .payInput { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: 13px; padding: 10px 12px; font-family: inherit; outline: 0; }
.payInput:focus, .paySelect:focus { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14); }
#payFields { display: flex; flex-direction: column; gap: 12px; }
.payList { display: flex; flex-direction: column; gap: 8px; }
.payEmpty { font-size: 12.5px; color: var(--muted); padding: 14px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.payMethod { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel-2); }
.payMethod b { display: block; font-size: 13px; color: var(--text); }
.payMethod span { font-size: 12px; color: var(--muted); }
.payDel { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 9px; padding: 7px 12px; font-size: 12px; cursor: pointer; }
.payDel:hover { color: #ef4444; border-color: #ef4444; }
@media (max-width: 720px) { .refHow { grid-template-columns: 1fr; } .payEarnAmt { font-size: 24px; } }
.smPath { display: flex; gap: 6px; align-items: center; }
.smPathTxt { max-width: 230px; padding: 7px 10px; border: 1.5px solid var(--line2, rgba(148,163,184,.28)); border-radius: 9px; font-size: 12px; color: var(--muted, #6b7280); background: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smFolderBtn { width: 32px; height: 32px; border: 1.5px solid var(--line2, rgba(148,163,184,.28)); border-radius: 9px; background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--muted, #6b7280); flex: 0 0 auto; }
.smFolderBtn:hover { border-color: var(--accent, #a9824c); color: var(--accent-dark, #8a6a3c); }
.smMiniBtn { padding: 7px 14px; border: 1.5px solid var(--line2, rgba(148,163,184,.28)); border-radius: 9px; background: #fff; font-size: 12.5px; font-weight: 650; cursor: pointer; color: var(--text, #273449); }
.smMiniBtn:hover { border-color: var(--accent, #a9824c); color: var(--accent-dark, #8a6a3c); }
.smRadioGroup { display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.smRadio { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text, #273449); cursor: pointer; }
.smRadio input { position: absolute; opacity: 0; width: 0; height: 0; }
.smDot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line2, rgba(148,163,184,.4)); display: grid; place-items: center; flex: 0 0 auto; }
.smRadio input:checked + .smDot { border-color: var(--accent, #a9824c); }
.smRadio input:checked + .smDot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #a9824c); }
.smRadio input:focus-visible + .smDot { outline: 2px solid var(--accent, #a9824c); outline-offset: 2px; }
.smSelSm { min-width: 64px; padding: 4px 24px 4px 9px; }
.smCacheCtl { display: flex; gap: 10px; align-items: center; }
.smCacheSz { font-size: 12.5px; color: var(--muted, #6b7280); font-weight: 650; }
.smClearBtn { width: 32px; height: 32px; border: 1.5px solid var(--line2, rgba(148,163,184,.28)); border-radius: 9px; background: #fff; cursor: pointer; color: var(--muted, #6b7280); display: grid; place-items: center; }
.smClearBtn:hover { border-color: #c0392b; color: #c0392b; }


/* ===================== PR-4 — nice scrollbar for settings body ===================== */
.smBody { scrollbar-width: thin; scrollbar-color: var(--line2, rgba(148,163,184,.55)) transparent; }
.smBody::-webkit-scrollbar { width: 11px; }
.smBody::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.smBody::-webkit-scrollbar-thumb { background: var(--line2, rgba(148,163,184,.55)); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; min-height: 40px; }
.smBody::-webkit-scrollbar-thumb:hover { background: var(--accent, #a9824c); background-clip: content-box; }
/* Preferences = fixed sub-tab bar + internal scroll (smooth, no lag) */
.smPanel[data-panel="preferences"]:not([hidden]) { display: flex; flex-direction: column; height: 100%; }
.smPanel[data-panel="preferences"] .smSubTabs { flex: 0 0 auto; }
.smPanel[data-panel="preferences"] .smSubLine { flex: 0 0 auto; margin: 0; }
.smSubBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 8px 6px 0; contain: layout paint; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2, rgba(148,163,184,.55)) transparent; }
.smSubBody::-webkit-scrollbar { width: 10px; }
.smSubBody::-webkit-scrollbar-track { background: transparent; }
.smSubBody::-webkit-scrollbar-thumb { background: var(--line2, rgba(148,163,184,.55)); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; min-height: 40px; }
.smSubBody::-webkit-scrollbar-thumb:hover { background: var(--accent, #a9824c); background-clip: content-box; }


/* ===== FINAL override: kill the square box behind rail icons in EVERY theme/skin/state =====
   Beats .editorApp[data-theme][data-skin] .railIcon !important rules (specificity raised via .railButton). */
.editorApp[data-theme][data-skin] .railButton .railIcon,
.editorApp[data-theme][data-skin] .railButton:hover .railIcon,
.editorApp[data-theme][data-skin] .railButton:focus-visible .railIcon,
.editorApp[data-theme][data-skin] .railButton.is-active .railIcon,
.editorApp[data-theme][data-skin] .railButton.is-active:hover .railIcon,
.editorApp[data-theme][data-skin] .railButton.is-active:focus-visible .railIcon{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}
/* icon color stays clean: muted normally, brass accent when active */
.editorApp[data-theme][data-skin] .railButton .railIcon{ color:var(--muted) !important; }
.editorApp[data-theme][data-skin] .railButton:hover .railIcon{ color:var(--text) !important; }
.editorApp[data-theme][data-skin] .railButton.is-active .railIcon,
.editorApp[data-theme][data-skin] .railButton.is-active > span:not(.railIcon){ color:var(--accent) !important; }
/* keep the crisp glyph */
.editorApp[data-theme][data-skin] .railButton .railIcon svg{ filter:none !important; }


/* ===== Rail typography polish (user request): tight icon↔label gap, lighter & airy label ===== */
.editorApp[data-theme][data-skin] .railButton{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  height:64px !important;
  padding:6px 4px !important;
}
.editorApp[data-theme][data-skin] .railButton .railIcon{
  width:24px !important;
  height:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}
.editorApp[data-theme][data-skin] .railButton .railIcon svg{
  width:22px !important;
  height:22px !important;
}
.editorApp[data-theme][data-skin] .railButton > span:not(.railIcon){
  font-weight:500 !important;        /* was ~800–950 = swollen/fula */
  font-size:11px !important;
  letter-spacing:.02em !important;   /* breathing room (was negative/cramped) */
  line-height:1 !important;
  margin:0 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  overflow:visible !important;
}


/* ===== RAIL FINAL (reference-matched): brass play logo, no-box, small thin crisp icons, subtle hover/active ===== */
.brandMark.topBarBrand{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#c4985d,#a9824c 52%,#8a6a3c) !important;color:#fff !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 8px 18px rgba(138,106,60,.30) !important;}
.brandMark.topBarBrand svg{width:18px;height:18px;margin-left:1px;}
.editorApp[data-theme][data-skin] .railButton .railIcon,
.editorApp[data-theme][data-skin] .railButton:hover .railIcon,
.editorApp[data-theme][data-skin] .railButton:focus-visible .railIcon,
.editorApp[data-theme][data-skin] .railButton.is-active .railIcon,
.editorApp[data-theme][data-skin] .railButton.is-active:hover .railIcon{background:transparent !important;background-image:none !important;box-shadow:none !important;border:0 !important;border-radius:0 !important;}
.editorApp[data-theme][data-skin] .railButton .railIcon{width:22px !important;height:22px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;}
.editorApp[data-theme][data-skin] .railButton .railIcon svg{width:19px !important;height:19px !important;stroke-width:1.5 !important;filter:none !important;shape-rendering:geometricPrecision;}
.editorApp[data-theme][data-skin] .railButton{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:6px !important;height:62px !important;padding:6px 4px !important;}
.editorApp[data-theme][data-skin] .railButton>span:not(.railIcon){font-weight:500 !important;font-size:11px !important;letter-spacing:.02em !important;line-height:1 !important;margin:0 !important;max-width:100% !important;white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important;}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton{border-radius:12px !important;color:var(--muted) !important;}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton .railIcon{color:var(--muted) !important;}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton:hover{background:rgba(0,0,0,.045) !important;color:var(--text) !important;}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton:hover .railIcon{color:var(--text) !important;}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton.is-active{background:rgba(169,130,76,.12) !important;color:var(--text) !important;}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton.is-active .railIcon,
.editorApp[data-theme="light"][data-skin="lumen"] .railButton.is-active>span:not(.railIcon){color:var(--text) !important;}
.editorApp[data-theme="light"][data-skin="lumen"] .railButton.is-active::before{opacity:0 !important;height:0 !important;}


/* ===== Rail hover/active FIX: no jump, no glow, soft (not black) icon — match reference ===== */
/* kill the translate/scale jump + glow filter on every state */
.editorApp[data-theme][data-skin] .railButton,
.editorApp[data-theme][data-skin] .railButton:hover,
.editorApp[data-theme][data-skin] .railButton:focus-visible,
.editorApp[data-theme][data-skin] .railButton.is-active,
.editorApp[data-theme][data-skin] .railButton.is-active:hover,
.editorApp[data-theme][data-skin] .railButton .railIcon,
.editorApp[data-theme][data-skin] .railButton:hover .railIcon,
.editorApp[data-theme][data-skin] .railButton:focus-visible .railIcon,
.editorApp[data-theme][data-skin] .railButton.is-active .railIcon,
.editorApp[data-theme][data-skin] .railButton.is-active:hover .railIcon,
.editorApp[data-theme][data-skin] .railButton > span:not(.railIcon),
.editorApp[data-theme][data-skin] .railButton:hover > span:not(.railIcon){
  transform:none !important;
  filter:none !important;
  text-shadow:none !important;
}
/* hover keeps icon + label SOFT gray (no black flash); only the subtle background changes */
.editorApp[data-theme="light"][data-skin="lumen"] .railButton:hover{ color:var(--muted) !important; }
.editorApp[data-theme="light"][data-skin="lumen"] .railButton:hover .railIcon{ color:var(--muted) !important; }
.editorApp[data-theme="light"][data-skin="lumen"] .railButton:hover > span:not(.railIcon){ color:var(--muted) !important; }

/* CT-182: remove the thin divider line directly under the timeline resize handle (user request) */
.editorApp .timelineResizeHandle,
.editorApp[data-theme] .timelineResizeHandle,
.editorApp[data-theme][data-skin] .timelineResizeHandle { border-bottom: 0 !important; border-bottom-color: transparent !important; box-shadow: none !important; }

/* CT-184: professional invisible timeline resize — no visible grip "dag"; drag the top edge to resize. Card hugs the toolbar icons. */
.editorApp .timelineResizeHandle,
.editorApp[data-theme] .timelineResizeHandle,
.editorApp[data-theme][data-skin] .timelineResizeHandle {
  height: 4px !important;
  background: var(--panel) !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: ns-resize !important;
}
.editorApp .timelineResizeHandle::before,
.editorApp[data-theme] .timelineResizeHandle::before,
.editorApp[data-theme][data-skin] .timelineResizeHandle::before,
.editorApp .timelineResizeHandle:hover::before,
.editorApp[data-theme] .timelineResizeHandle:hover::before,
.editorApp[data-theme][data-skin] .timelineResizeHandle:hover::before {
  content: none !important;
  display: none !important;
}
/* subtle accent hint only while actively hovering the (otherwise invisible) resize strip */
.editorApp .timelineResizeHandle:hover {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.14), var(--panel)) !important;
}
/* the toolbar is the only "card": crisp, flat, icons vertically centered */
.editorApp .editToolbar,
.editorApp[data-theme][data-skin] .editToolbar {
  align-items: center !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  box-shadow: none !important;
}

/* CT-187: right toolbar toggles (Fit / Track Magnet / Auto Snapping / Linkage) — active changes ONLY the icon color; no box on hover or active */
.editorApp .editToolbarRightTools .rightToolButton,
.editorApp[data-theme] .editToolbarRightTools .rightToolButton,
.editorApp[data-theme][data-skin] .editToolbarRightTools .rightToolButton {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--muted) !important;
  transition: color .15s ease !important;
}
.editorApp .editToolbarRightTools .rightToolButton:hover,
.editorApp .editToolbarRightTools .rightToolButton:focus-visible,
.editorApp[data-theme] .editToolbarRightTools .rightToolButton:hover,
.editorApp[data-theme] .editToolbarRightTools .rightToolButton:focus-visible,
.editorApp[data-theme][data-skin] .editToolbarRightTools .rightToolButton:hover,
.editorApp[data-theme][data-skin] .editToolbarRightTools .rightToolButton:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text) !important;
}
.editorApp .editToolbarRightTools .rightToolButton.is-active,
.editorApp .editToolbarRightTools .rightToolButton.is-active:hover,
.editorApp .editToolbarRightTools .rightToolButton.is-active:focus-visible,
.editorApp[data-theme] .editToolbarRightTools .rightToolButton.is-active,
.editorApp[data-theme][data-skin] .editToolbarRightTools .rightToolButton.is-active,
.editorApp[data-theme][data-skin] .editToolbarRightTools .rightToolButton.is-active:hover,
.editorApp[data-theme][data-skin] .editToolbarRightTools .rightToolButton.is-active:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--accent) !important;
}
/* crisp, uniform, professional icons */
.editorApp .editToolbarRightTools .rightToolButton .uiIcon,
.editorApp[data-theme] .editToolbarRightTools .rightToolButton .uiIcon,
.editorApp[data-theme][data-skin] .editToolbarRightTools .rightToolButton .uiIcon {
  width: 16px !important;
  height: 16px !important;
  opacity: 1 !important;
  color: inherit !important;
}

/* CT-186: toolbar card fills the top edge (covers bg); icons centered; resize = invisible top-edge overlay */
.editorApp .timelineResizeHandle,
.editorApp[data-theme] .timelineResizeHandle,
.editorApp[data-theme][data-skin] .timelineResizeHandle {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 5px !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 45 !important;
  cursor: ns-resize !important;
}
.editorApp .editToolbar,
.editorApp[data-theme] .editToolbar,
.editorApp[data-theme][data-skin] .editToolbar {
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ===================== CT-246 P13E — PROFESSIONAL VIEWER CONTROLS ===================== */
.editorApp .playerControls,
.editorApp[data-theme] .playerControls,
.editorApp[data-theme][data-skin] .playerControls {
  height: 58px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 6px 12px 8px !important;
  overflow: visible !important;
}

.editorApp .playerControlLegacy { display: none !important; }

.editorApp .ratioMenuButton,
.editorApp[data-theme] .ratioMenuButton,
.editorApp[data-theme][data-skin] .ratioMenuButton {
  height: 38px !important;
  min-width: 202px !important;
  max-width: 232px !important;
  padding: 0 12px 0 10px !important;
  gap: 8px !important;
  border: 1px solid rgba(148, 163, 184, .17) !important;
  border-radius: 11px !important;
  background: #0d1118 !important;
  color: #e8edf5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.15) !important;
  transform: none !important;
}
.editorApp .ratioMenuButton:hover,
.editorApp .ratioMenuButton:focus-visible,
.editorApp .ratioControlWrap.is-open .ratioMenuButton {
  background: #121721 !important;
  border-color: rgba(var(--accent-rgb), .42) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .07), inset 0 1px 0 rgba(255,255,255,.04) !important;
  outline: none !important;
}
.editorApp .ratioMenuEyebrow { display: none !important; }
.editorApp .ratioMenuIcon {
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
}
.editorApp .ratioMenuIcon::before {
  width: 12px !important;
  height: 8px !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: 3px !important;
}
.editorApp .ratioMenuButton strong {
  max-width: 154px !important;
  color: #e8edf5 !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
}
.editorApp .ratioMenuChevron {
  width: 6px !important;
  height: 6px !important;
  margin-left: auto !important;
  border-color: #727e90 !important;
}

.editorApp .playerTransportGroup,
.editorApp .playerUtilityGroup {
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 12px;
  background: #0d1118;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.14);
}
.editorApp .playerUtilityGroup { height: 42px; padding: 3px 4px; }

.editorApp .playerTransportGroup .miniControl,
.editorApp .playerUtilityGroup .miniControl {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #8d98a8 !important;
  box-shadow: none !important;
  transform: none !important;
}
.editorApp .playerTransportGroup .miniControl:hover,
.editorApp .playerUtilityGroup .miniControl:hover,
.editorApp .playerTransportGroup .miniControl:focus-visible,
.editorApp .playerUtilityGroup .miniControl:focus-visible {
  background: #171c26 !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #f1f4f8 !important;
  outline: none !important;
}
.editorApp .playerTransportGroup .uiIcon,
.editorApp .playerUtilityGroup .uiIcon {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.8px !important;
}

.editorApp .playerTransportGroup #playerPlayButton,
.editorApp[data-theme] .playerTransportGroup #playerPlayButton,
.editorApp[data-theme][data-skin] .playerTransportGroup #playerPlayButton {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  margin: 0 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f4f6f8 !important;
  color: #10141b !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.28), inset 0 -1px 0 rgba(0,0,0,.06) !important;
}
.editorApp .playerTransportGroup #playerPlayButton:hover,
.editorApp .playerTransportGroup #playerPlayButton:focus-visible {
  background: #ffffff !important;
  color: #0a0d12 !important;
  transform: scale(1.035) !important;
  box-shadow: 0 9px 22px rgba(0,0,0,.34), 0 0 0 3px rgba(255,255,255,.07) !important;
}
.editorApp .playerTransportGroup #playerPlayButton:active { transform: scale(.96) !important; }
.editorApp .playerTransportGroup #playerPlayButton .uiIcon {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 2px !important;
}

.editorApp .playerTimecode {
  min-width: 134px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8f9aae;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.editorApp .playerTimecode #playerCurrentTime { color: #b9c4ff; }
.editorApp .playerTimecodeSeparator { color: #4f5968; }

.editorApp .playerUtilityGroup #muteButton.is-muted { color: #ef6b72 !important; }

@media (max-width: 1180px) {
  .editorApp .playerControls { gap: 8px !important; }
  .editorApp .ratioMenuButton { min-width: 174px !important; max-width: 190px !important; }
  .editorApp .ratioMenuButton strong { max-width: 125px !important; }
  .editorApp .playerTimecode { min-width: 116px; font-size: 9px; gap: 4px; }
}
@media (max-width: 900px) {
  .editorApp .playerTimecode { display: none !important; }
  .editorApp .ratioMenuButton { min-width: 160px !important; }
}


/* ===================== CT-247 P13F — THEME-AWARE PLAYER POLISH ===================== */
/* Use the active skin surfaces: no black pills in light mode, no white play disc in dark mode. */
.editorApp .ratioMenuButton,
.editorApp[data-theme] .ratioMenuButton,
.editorApp[data-theme][data-skin] .ratioMenuButton,
.editorApp .playerTransportGroup,
.editorApp .playerUtilityGroup {
  background: var(--panel-2) !important;
  border-color: var(--l4-line, rgba(127,127,127,.18)) !important;
  color: var(--text) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.editorApp .ratioMenuButton strong { color: var(--text) !important; }
.editorApp .ratioMenuChevron { border-color: var(--muted) !important; }
.editorApp .ratioMenuButton:hover,
.editorApp .ratioMenuButton:focus-visible,
.editorApp .ratioControlWrap.is-open .ratioMenuButton {
  background: var(--panel) !important;
  border-color: rgba(var(--accent-rgb),.48) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08), 0 5px 14px rgba(0,0,0,.10) !important;
}

.editorApp .playerTransportGroup .miniControl,
.editorApp .playerUtilityGroup .miniControl {
  color: var(--muted) !important;
}
.editorApp .playerTransportGroup .miniControl:hover,
.editorApp .playerUtilityGroup .miniControl:hover,
.editorApp .playerTransportGroup .miniControl:focus-visible,
.editorApp .playerUtilityGroup .miniControl:focus-visible {
  background: var(--panel) !important;
  border-color: var(--l4-line, rgba(127,127,127,.18)) !important;
  color: var(--text) !important;
}
.editorApp .playerTransportGroup .uiIcon {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.85px !important;
}
.editorApp .playerUtilityGroup .uiIcon {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75px !important;
}

/* Light skins: accent play control, never a black transport surface. */
.editorApp[data-theme="light"] .playerTransportGroup #playerPlayButton,
.editorApp[data-theme="light"][data-skin] .playerTransportGroup #playerPlayButton {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--l4-chip-on-text, #fff) !important;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb),.24) !important;
}
.editorApp[data-theme="light"] .playerTransportGroup #playerPlayButton:hover,
.editorApp[data-theme="light"] .playerTransportGroup #playerPlayButton:focus-visible {
  background: var(--accent) !important;
  color: var(--l4-chip-on-text, #fff) !important;
  filter: brightness(1.06);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb),.30), 0 0 0 3px rgba(var(--accent-rgb),.10) !important;
}

/* Dark skins: softly tinted dark button, never the previous white disc. */
.editorApp:not([data-theme="light"]) .playerTransportGroup #playerPlayButton {
  background: rgba(var(--accent-rgb),.18) !important;
  border: 1px solid rgba(var(--accent-rgb),.46) !important;
  color: var(--accent) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.editorApp:not([data-theme="light"]) .playerTransportGroup #playerPlayButton:hover,
.editorApp:not([data-theme="light"]) .playerTransportGroup #playerPlayButton:focus-visible {
  background: rgba(var(--accent-rgb),.25) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.26), 0 0 0 3px rgba(var(--accent-rgb),.09) !important;
}

/* Larger readable timer; proportional zero has no diagonal slash, tabular widths stay aligned. */
.editorApp .playerTimecode,
.editorApp[data-theme] .playerTimecode,
.editorApp[data-theme][data-skin] .playerTimecode {
  min-width: 154px !important;
  gap: 7px !important;
  color: var(--muted) !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "zero" 0 !important;
  font-synthesis: none;
}
.editorApp .playerTimecode #playerCurrentTime { color: var(--accent) !important; }
.editorApp .playerTimecodeSeparator { color: var(--muted) !important; opacity: .68; }
.editorApp .playerUtilityGroup #muteButton.is-muted { color: var(--danger, #ef626a) !important; }

@media (max-width: 1180px) {
  .editorApp .playerTimecode {
    min-width: 140px !important;
    font-size: 12px !important;
    gap: 5px !important;
  }
}


/* ===================== CT-248 P13G — TIMER CLEANUP ===================== */
/* Approved viewer clock size; late override also wins over compact viewport rules. */
.editorApp .playerTimecode,
.editorApp[data-theme] .playerTimecode,
.editorApp[data-theme][data-skin] .playerTimecode {
  font-size: 11.5px !important;
}

/* The viewer now owns the visible clock. Keep the legacy ruler-toolbar clock synced
   internally for compatibility, but never render it in the UI. */
.editorApp .timelineTimeGroup,
.editorApp[data-theme] .timelineTimeGroup,
.editorApp[data-theme][data-skin] .timelineTimeGroup {
  display: none !important;
}


/* ===================== CT-249 P13H — PROFESSIONAL VOLUME POPOVER ===================== */
.editorApp .playerVolumeControl {
  position: relative;
  display: grid;
  place-items: center;
}
.editorApp .playerVolumePopover[hidden] { display: none !important; }
.editorApp .playerVolumePopover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: 236px;
  padding: 13px 14px 14px;
  transform: translateX(-50%);
  z-index: 260;
  border: 1px solid var(--l4-line, rgba(127,127,127,.18));
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
  animation: playerVolumePopoverIn 145ms cubic-bezier(.2,.8,.2,1) both;
}
.editorApp .playerVolumePopover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid var(--l4-line, rgba(127,127,127,.18));
  border-bottom: 1px solid var(--l4-line, rgba(127,127,127,.18));
  background: var(--panel);
}
@keyframes playerVolumePopoverIn {
  from { opacity: 0; transform: translateX(-50%) translateY(7px) scale(.97); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.editorApp .playerVolumeHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.editorApp .playerVolumeHeader > span { display: grid; gap: 2px; }
.editorApp .playerVolumeHeader strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}
.editorApp .playerVolumeHeader small {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 500;
}
.editorApp .playerVolumeHeader output {
  min-width: 42px;
  color: var(--accent);
  font: 700 11.5px/1 "Segoe UI", Arial, sans-serif;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.editorApp .playerVolumeSliderRow {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.editorApp .playerVolumeMuteToggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--l4-line, rgba(127,127,127,.18));
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  transition: .14s ease;
}
.editorApp .playerVolumeMuteToggle:hover,
.editorApp .playerVolumeMuteToggle:focus-visible {
  border-color: rgba(var(--accent-rgb),.42);
  background: rgba(var(--accent-rgb),.10);
  color: var(--accent);
  outline: none;
}
.editorApp .playerVolumeMuteToggle.is-muted {
  border-color: rgba(239,98,106,.34);
  background: rgba(239,98,106,.10);
  color: var(--danger, #ef626a);
}
.editorApp .playerVolumeMuteToggle .uiIcon {
  width: 16px;
  height: 16px;
  stroke-width: 1.8px;
}
.editorApp .playerVolumeRange {
  --range-fill: 100%;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.editorApp .playerVolumeRange::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--range-fill), rgba(var(--accent-rgb),.18) var(--range-fill) 100%);
}
.editorApp .playerVolumeRange::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
  appearance: none;
  -webkit-appearance: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.editorApp .playerVolumeRange:hover::-webkit-slider-thumb,
.editorApp .playerVolumeRange:focus-visible::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.11), 0 2px 8px rgba(0,0,0,.24);
}
.editorApp .playerVolumeRange::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--accent-rgb),.18);
}
.editorApp .playerVolumeRange::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}
.editorApp .playerVolumeRange::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
}
.editorApp .playerVolumeControl.is-open > #muteButton {
  background: rgba(var(--accent-rgb),.11) !important;
  border-color: rgba(var(--accent-rgb),.34) !important;
  color: var(--accent) !important;
}
.editorApp .playerVolumeControl.is-muted > #muteButton { color: var(--danger, #ef626a) !important; }
@media (max-width: 760px) {
  .editorApp .playerVolumePopover { width: 218px; }
}


/* ===================== CT-250 P13I — RULER SURFACE MERGE ===================== */
/* The DOM band controls canvas ruler geometry; keep it compact and let the canvas
   use the exact same surface as the track field in every skin. */
.editorApp .timelineCanvas,
.editorApp[data-theme] .timelineCanvas,
.editorApp[data-theme][data-skin] .timelineCanvas {
  grid-template-rows: 18px minmax(0, 1fr) 18px !important;
}
.editorApp .timelineRuler,
.editorApp[data-theme] .timelineRuler,
.editorApp[data-theme][data-skin] .timelineRuler,
.editorApp .timelineRuler:hover,
.editorApp[data-theme] .timelineRuler:hover,
.editorApp[data-theme][data-skin] .timelineRuler:hover {
  height: 18px !important;
  min-height: 18px !important;
  border-bottom: 1px solid var(--l4-line, rgba(127,127,127,.09)) !important;
  background: var(--timeline-canvas-bg, var(--bg)) !important;
  box-shadow: none !important;
}
.editorApp .timelineCanvas::before,
.editorApp[data-theme] .timelineCanvas::before,
.editorApp[data-theme][data-skin] .timelineCanvas::before {
  height: 18px !important;
  background: var(--timeline-canvas-bg, var(--bg)) !important;
  border-bottom-color: var(--l4-line, rgba(127,127,127,.09)) !important;
}


/* ===================== CT-251 P13J — PROFESSIONAL LEFT GUTTER ===================== */
/* Keep DOM fallbacks, canvas geometry and horizontal scrollbar aligned to the new
   compact 80px canvas-native gutter. */
.editorApp .timelineCanvas,
.editorApp[data-theme] .timelineCanvas,
.editorApp[data-theme][data-skin] .timelineCanvas,
.editorApp .timelineDropZone,
.editorApp[data-theme] .timelineDropZone,
.editorApp[data-theme][data-skin] .timelineDropZone {
  --track-label-width: 128px !important;
}
.editorApp .timelineHScroll,
.editorApp[data-theme] .timelineHScroll,
.editorApp[data-theme][data-skin] .timelineHScroll {
  --timeline-hscroll-left: 128px !important;
}
.editorApp .timelineCanvas::before,
.editorApp[data-theme] .timelineCanvas::before,
.editorApp[data-theme][data-skin] .timelineCanvas::before {
  width: 128px !important;
}

/* ===== CT-278 P13x player bar reflow (timecode leads left, utilities follow transport) ===== */
.editorApp .playerControls,
.editorApp[data-theme] .playerControls,
.editorApp[data-theme][data-skin] .playerControls { justify-content: center !important; gap: 10px !important; }
.editorApp .playerControls .playerTimecode,
.editorApp[data-theme][data-skin] .playerControls .playerTimecode { order: 0 !important; margin: 0 !important; }
.editorApp .playerControls .ratioControlWrap,
.editorApp[data-theme][data-skin] .playerControls .ratioControlWrap { order: 1 !important; margin: 0 !important; }
.editorApp .playerControls .playerTransportGroup,
.editorApp[data-theme][data-skin] .playerControls .playerTransportGroup { order: 2 !important; margin: 0 !important; }
.editorApp .playerControls .playerUtilityGroup,
.editorApp[data-theme][data-skin] .playerControls .playerUtilityGroup { order: 3 !important; margin: 0 !important; }

/* CT-304: CapCut-clean transition inspector (Name + Duration only) */
.transitionParamsSubhead { display:block; margin-top:2px; font-size:12px; font-weight:650; color: rgba(220,226,245,0.72); letter-spacing:0.01em; }
.transitionParamRow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(148,163,184,0.14); }
.transitionParamKey { font-size:12px; font-weight:600; color: rgba(220,226,245,0.62); }
.transitionParamValue { font-size:14px; font-weight:750; color:#fff; text-align:right; }
.transitionInspectorPane #transitionDurationLabel {
  min-width:56px; height:30px; padding:0 12px; display:grid; place-items:center;
  border-radius:9px; background:rgba(148,163,184,0.18); color:#fff;
  font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:0.01em;
}

/* CT-305: Apply-to-all button in the transition inspector */
.transitionApplyAllRow { margin-top: 12px; }
.transitionApplyAllButton {
  width: 100%;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(96,165,250,0.55);
  background: linear-gradient(180deg, rgba(96,165,250,0.22), rgba(96,165,250,0.12));
  color: #e8f0ff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.transitionApplyAllButton:hover { background: linear-gradient(180deg, rgba(96,165,250,0.34), rgba(96,165,250,0.18)); border-color: rgba(96,165,250,0.8); }
.transitionApplyAllButton:active { transform: translateY(1px); }

/* === CT-368 BOXTOP: keep the stage selection box + resize handles above the transition composite ===
   Measured, not guessed. A 100ms sampler on #mediaLayerBox during a junction logged
   "box true block 1 6" on every single tick: the element keeps .is-visible, display:block and
   opacity:1 for the whole transition. Nothing hides it. The real cause is stacking order.
   .stageLayerBox sits at z-index 6 (spectrum-editor.css ~4583) while #spectrumCanvas sits at
   z-index 12 (~4521), and the CT-291/CT-292 transition path force-sets that canvas to
   opacity:1; display:block inline while a transition frame is painted. An opaque layer at 12
   therefore covers the selection box at 6, so the four corner handles vanish for exactly the
   duration of the transition and pop back afterwards.
   The selection box is chrome, not picture content, so it belongs above every paint surface.
   Raising it to 14 keeps it under .proPreviewGate (24) and every modal, and changes nothing
   outside a transition, because #spectrumCanvas is opacity:0 the rest of the time.
   spectrum-editor.css is legacy-frozen, so this gated override needs !important.
   Opt-out at runtime:  document.querySelector(".editorApp").classList.add("ct368-off")
   Opt-in again:        document.querySelector(".editorApp").classList.remove("ct368-off") */
.editorApp:not(.ct368-off) .stageLayerBox.is-visible {
  z-index: 14 !important;
}

.editorApp:not(.ct368-off) .stageLayerBox.is-visible .stageHandle,
.editorApp:not(.ct368-off) .stageLayerBox.is-visible .spectrumTransformHandle {
  z-index: 15 !important;
}
/* === /CT-368 BOXTOP === */

/* === CT-369 BOXSEL: CapCut-style stage transform box + handles ===
   Legacy defaults were a 13px accent-filled circle with a 2px white ring, plus a box border that
   carried an accent glow ring and a 9999px scrim shadow. Next to CapCut that reads heavy and toy-like.
   CapCut uses a thin near-white hairline box with small WHITE rounded-square corner grips and a soft
   drop shadow for contrast against bright footage. That is what this override does.
   Scoped to :not(.is-crop-active) so crop mode keeps its distinct blue grips untouched.
   spectrum-editor.css is legacy-frozen, so every rule here needs !important.
   Opt-out: document.querySelector(".editorApp").classList.add("ct369-off") */
.editorApp:not(.ct369-off) .stageLayerBox.is-visible:not(.is-crop-active) {
  border: 1.5px solid rgba(255, 255, 255, 0.94) !important;
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.32),
    0 2px 12px rgba(2, 6, 23, 0.24) !important;
}

.editorApp:not(.ct369-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle {
  width: 11px !important;
  height: 11px !important;
  background: #ffffff !important;
  border: 1px solid rgba(2, 6, 23, 0.34) !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 5px rgba(2, 6, 23, 0.38) !important;
  transition: transform 120ms cubic-bezier(0.2, 0.78, 0.28, 1) !important;
}

.editorApp:not(.ct369-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle:hover {
  transform: scale(1.18) !important;
}

.editorApp:not(.ct369-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle-nw {
  left: -6px !important;
  top: -6px !important;
}

.editorApp:not(.ct369-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle-ne {
  right: -6px !important;
  top: -6px !important;
}

.editorApp:not(.ct369-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle-sw {
  left: -6px !important;
  bottom: -6px !important;
}

.editorApp:not(.ct369-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle-se {
  right: -6px !important;
  bottom: -6px !important;
}
/* === /CT-369 BOXSEL === */

/* === CT-370 GRIPINSET: stop the corner grips being clipped by the player frame ===
   Reported symptom: all four corner grips render as half circles / cut squares at the stage edge.
   Cause (read from source, not guessed): .previewFrame carries overflow:hidden AND contain:layout
   paint (spectrum-editor.css ~4347). Those are load-bearing -- they give the player its rounded
   corners and stop <video> spilling past the frame -- so they must stay. But #mediaLayerBox is laid
   out at exactly 0,0 -> 100%,100% of that frame whenever the media fills the stage, and the CT-369
   grips were pushed 6px OUTSIDE the box edge. Everything outside the frame is clipped, so exactly
   half of every corner grip disappeared.
   Fix: pull the grips just INSIDE the border instead of straddling it. This is also what CapCut,
   Premiere and Resolve do when the layer fills the viewer: the grip is drawn inside the frame corner
   so it is always fully visible and always grabbable. No clipping is possible at any stage size,
   because the grip never leaves the box.
   Also widens the grab target with a transparent ::after pad, so the smaller 11px grip stays easy to
   hit with a mouse - a visual change should never cost pointer accuracy.
   Scoped to :not(.is-crop-active) so crop mode is untouched. Legacy-frozen sheet, so !important.
   Opt-out: document.querySelector(".editorApp").classList.add("ct370-off") */
.editorApp:not(.ct370-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle-nw {
  left: 3px !important;
  top: 3px !important;
}

.editorApp:not(.ct370-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle-ne {
  right: 3px !important;
  top: 3px !important;
}

.editorApp:not(.ct370-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle-sw {
  left: 3px !important;
  bottom: 3px !important;
}

.editorApp:not(.ct370-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle-se {
  right: 3px !important;
  bottom: 3px !important;
}

.editorApp:not(.ct370-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle {
  position: absolute !important;
}

.editorApp:not(.ct370-off) .stageLayerBox.is-visible:not(.is-crop-active) .stageHandle::after {
  content: "" !important;
  position: absolute !important;
  left: -7px !important;
  top: -7px !important;
  right: -7px !important;
  bottom: -7px !important;
  background: transparent !important;
}
/* === /CT-370 GRIPINSET === */

/* === CT-371 STAGEASSIST: snap guides, fit state and live size badge === */
.ct371Assist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 16;
  opacity: 0;
  transition: opacity 120ms ease;
}

.ct371Assist.is-active {
  opacity: 1;
}

.ct371Guide {
  position: absolute;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.85);
  opacity: 0;
  transition: opacity 90ms ease;
}

.ct371Guide.is-on {
  opacity: 1;
}

.ct371Guide-v {
  top: 0;
  bottom: 0;
  width: 1.5px;
}

.ct371Guide-h {
  left: 0;
  right: 0;
  height: 1.5px;
}

.ct371Assist .ct371Guide:nth-child(1) { left: 0; }
.ct371Assist .ct371Guide:nth-child(2) { left: 50%; transform: translateX(-50%); }
.ct371Assist .ct371Guide:nth-child(3) { right: 0; }
.ct371Assist .ct371Guide:nth-child(4) { top: 0; }
.ct371Assist .ct371Guide:nth-child(5) { top: 50%; transform: translateY(-50%); }
.ct371Assist .ct371Guide:nth-child(6) { bottom: 0; }

.ct371Badge {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.82);
  color: #ffffff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(2, 6, 23, 0.4);
  opacity: 0;
  transition: opacity 110ms ease, background 110ms ease;
}

.ct371Badge.is-on {
  opacity: 1;
}

.ct371Badge.is-fit {
  background: rgba(22, 163, 74, 0.94);
}

/* 100% fit -> the selection border itself goes green, readable at a glance */
.editorApp:not(.ct371-off) .stageLayerBox.is-visible.is-ct371-fit:not(.is-crop-active) {
  border-color: #22c55e !important;
  box-shadow:
    0 0 0 1px rgba(2, 6, 23, 0.32),
    0 0 10px rgba(34, 197, 94, 0.45) !important;
}

.editorApp:not(.ct371-off) .stageLayerBox.is-visible.is-ct371-fit:not(.is-crop-active) .stageHandle {
  background: #22c55e !important;
  border-color: rgba(2, 6, 23, 0.34) !important;
}
/* === /CT-371 STAGEASSIST === */