/* Modern video effects surface for the main editor. */
#vmfProLayerInspector.vmf-video-effects-panel {
  padding: 18px 18px 30px !important;
  background: #fff !important;
}

#vmfProLayerInspector .vmf-video-effects-workbench {
  --vmf-effect-accent: #ff6900;
  display: grid;
  gap: 14px;
  color: #202124;
}

#editorEffectsVideoSection.vmf-main-video-effects-mounted > *:not(.vmf-main-video-effects-mount) {
  display: none !important;
}

#editorEffectsVideoSection .vmf-main-video-effects-mount {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px 28px;
}

#editorEffectsVideoSection .vmf-main-video-effects-mount .vmf-video-effects-workbench {
  width: 100%;
}

/* The sidebar route uses the same workbench as the floating inspector. */
#editorEffectsVideoSection .vmf-video-effects-workbench {
  --vmf-effect-accent: #ff6900;
  display: grid;
  gap: 14px;
  color: #202124;
}

#editorEffectsVideoSection .vmf-video-effects-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 1px 4px;
}

#editorEffectsVideoSection .vmf-video-effects-heading small { display: block; color: #c95600; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
#editorEffectsVideoSection .vmf-video-effects-heading h2 { margin: 4px 0 0; color: #1f2937; font-size: 20px; line-height: 1.08; }

#editorEffectsVideoSection .vmf-video-effect-card {
  overflow: hidden;
  border: 1px solid #e2e6eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 28, 40, .055);
}

#editorEffectsVideoSection .vmf-video-effect-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 10px 16px;
  border-bottom: 1px solid #e2e6eb;
  background: #f7f8fa;
}

#editorEffectsVideoSection .vmf-video-effect-card-head h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #172033;
  font-size: 13px;
  font-weight: 800;
}

#editorEffectsVideoSection .vmf-video-effect-card-head h4::before { width: 7px; height: 7px; border-radius: 999px; background: #ff6900; content: ""; }

#editorEffectsVideoSection .vmf-video-effect-reset {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #dce1e7;
  border-radius: 8px;
  color: #7b8492;
  background: #fff;
  font: 800 15px/1 sans-serif;
  cursor: pointer;
}

#editorEffectsVideoSection .vmf-video-effect-card-body { display: grid; gap: 17px; padding: 17px 16px 19px; }
#editorEffectsVideoSection .vmf-video-effect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#editorEffectsVideoSection .vmf-video-effect-control { display: grid; min-width: 0; gap: 9px; }

#editorEffectsVideoSection .vmf-video-effect-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #596579;
  font-size: 11px;
  font-weight: 750;
}

#editorEffectsVideoSection .vmf-video-effect-range-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; }

#editorEffectsVideoSection .vmf-video-effects-workbench input[type="range"] {
  width: 100% !important;
  min-width: 0;
  height: 4px !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e1e5eb !important;
  accent-color: #ff6900;
}

#editorEffectsVideoSection .vmf-video-effect-number,
#editorEffectsVideoSection .vmf-video-effect-select {
  width: 100% !important;
  min-width: 0;
  height: 29px !important;
  box-sizing: border-box;
  border: 1px solid #dde2e8 !important;
  border-radius: 8px !important;
  color: #172033 !important;
  background: #f7f8fa !important;
  font: 750 11px/1 inherit !important;
}

#editorEffectsVideoSection .vmf-video-effect-number { padding: 0 12px !important; text-align: left; }
#editorEffectsVideoSection .vmf-video-effect-select { padding: 0 30px 0 10px !important; }
#editorEffectsVideoSection .vmf-video-effect-number:focus,
#editorEffectsVideoSection .vmf-video-effect-select:focus { border-color: #ff9e54 !important; outline: 3px solid rgba(255, 105, 0, .12); }

/* Retire the superseded keyframe-grid UI completely. */
.vmf-premiere-effects-mount,
.vmf-keyframe-panel-mount,
.vmf-prem-effects {
  display: none !important;
}

/* Keep the workbench styled even if the sidebar is rebuilt around it. */
.vmf-video-effects-workbench { --vmf-effect-accent: #ff6900; display: grid; gap: 14px; color: #202124; }
.vmf-video-effects-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 2px 1px 4px; }
.vmf-video-effects-heading small { display: block; color: #c95600; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.vmf-video-effects-heading h2 { margin: 4px 0 0; color: #1f2937; font-size: 20px; line-height: 1.08; }
.vmf-video-effect-card { overflow: hidden; border: 1px solid #e2e6eb; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(20, 28, 40, .055); }
.vmf-video-effect-card-head { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 10px 16px; border-bottom: 1px solid #e2e6eb; background: #f7f8fa; }
.vmf-video-effect-card-head h4 { display: flex; align-items: center; gap: 9px; margin: 0; color: #172033; font-size: 13px; font-weight: 800; }
.vmf-video-effect-card-head h4::before { width: 7px; height: 7px; border-radius: 999px; background: #ff6900; content: ""; }
.vmf-video-effect-reset { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #dce1e7; border-radius: 8px; color: #7b8492; background: #fff; font: 800 15px/1 sans-serif; cursor: pointer; }
.vmf-video-effect-card-body { display: grid; gap: 17px; padding: 17px 16px 19px; }
.vmf-video-effect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vmf-video-effect-control { display: grid; min-width: 0; gap: 9px; }
.vmf-video-effect-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #596579; font-size: 11px; font-weight: 750; }
.vmf-video-effect-range-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; }
.vmf-video-effects-workbench input[type="range"] { width: 100% !important; min-width: 0; height: 4px !important; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #e1e5eb !important; accent-color: #ff6900; }
.vmf-video-effect-number, .vmf-video-effect-select { width: 100% !important; min-width: 0; height: 29px !important; box-sizing: border-box; border: 1px solid #dde2e8 !important; border-radius: 8px !important; color: #172033 !important; background: #f7f8fa !important; font: 750 11px/1 inherit !important; }
.vmf-video-effect-number { padding: 0 12px !important; text-align: left; }
.vmf-video-effect-select { padding: 0 30px 0 10px !important; }

@media (max-width: 1180px) {
  .vmf-video-effect-grid { grid-template-columns: 1fr; }
}

#vmfProLayerInspector .vmf-video-effects-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 1px 4px;
}

#vmfProLayerInspector .vmf-video-effects-heading small {
  display: block;
  color: #c95600;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

#vmfProLayerInspector .vmf-video-effects-heading h2 {
  margin: 4px 0 0;
  color: #1f2937;
  font-size: 20px;
  line-height: 1.08;
}

#vmfProLayerInspector .vmf-video-effects-close {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid #e4e4e7;
  border-radius: 9px;
  color: #71717a;
  background: #fff;
  font: 700 20px/1 sans-serif;
  cursor: pointer;
}

#vmfProLayerInspector .vmf-video-effects-close:hover { color: #c95600; border-color: #ffbf91; }

#vmfProLayerInspector .vmf-video-effect-card {
  --vmf-card-rgb: 255, 105, 0;
  overflow: hidden;
  border: 1px solid #e2e6eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 28, 40, .055);
}

#vmfProLayerInspector .vmf-video-effect-card[data-tone="position"] { --vmf-card-rgb: 255, 105, 0; }
#vmfProLayerInspector .vmf-video-effect-card[data-tone="transform"] { --vmf-card-rgb: 255, 105, 0; }
#vmfProLayerInspector .vmf-video-effect-card[data-tone="composite"] { --vmf-card-rgb: 255, 105, 0; }

#vmfProLayerInspector .vmf-video-effect-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 10px 16px;
  border-bottom: 1px solid #e2e6eb;
  background: #f7f8fa;
}

#vmfProLayerInspector .vmf-video-effect-card-head h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #172033;
  font-size: 13px;
  font-weight: 800;
}

#vmfProLayerInspector .vmf-video-effect-card-head h4::before {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff6900;
  content: "";
}

#vmfProLayerInspector .vmf-video-effect-reset {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #dce1e7;
  border-radius: 8px;
  color: #7b8492;
  background: #fff;
  font: 800 15px/1 sans-serif;
  cursor: pointer;
}

#vmfProLayerInspector .vmf-video-effect-reset:hover { color: #ff6900; border-color: #ffb77f; background: #fff8f2; }

#vmfProLayerInspector .vmf-video-effect-card-body { display: grid; gap: 17px; padding: 17px 16px 19px; }
#vmfProLayerInspector .vmf-video-effect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#vmfProLayerInspector .vmf-video-effect-control { display: grid; min-width: 0; gap: 9px; }

#vmfProLayerInspector .vmf-video-effect-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #596579;
  font-size: 11px;
  font-weight: 750;
}

#vmfProLayerInspector .vmf-video-effect-range-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; }

#vmfProLayerInspector .vmf-video-effects-workbench input[type="range"] {
  width: 100% !important;
  min-width: 0;
  height: 4px !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e1e5eb !important;
  accent-color: var(--vmf-effect-accent);
}

#vmfProLayerInspector .vmf-video-effect-number,
#vmfProLayerInspector .vmf-video-effect-select {
  width: 100% !important;
  min-width: 0;
  height: 29px !important;
  box-sizing: border-box;
  border: 1px solid #dde2e8 !important;
  border-radius: 8px !important;
  color: #172033 !important;
  background: #f7f8fa !important;
  font: 750 11px/1 inherit !important;
}

#vmfProLayerInspector .vmf-video-effect-number { padding: 0 12px !important; text-align: left; }
#vmfProLayerInspector .vmf-video-effect-select { padding: 0 30px 0 10px !important; }

#vmfProLayerInspector .vmf-video-effect-number:focus,
#vmfProLayerInspector .vmf-video-effect-select:focus {
  border-color: #ff9e54 !important;
  outline: 3px solid rgba(255, 105, 0, .12);
}

@media (max-width: 1180px) {
  #vmfProLayerInspector .vmf-video-effect-grid { grid-template-columns: 1fr; }
}

/* The timeline's high-priority playhead must never draw over an open inspector. */
#editorView.vmf-pro-layer-inspector-open .editor-playhead,
#editorView.vmf-pro-layer-inspector-open .editor-playhead-marker,
#editorView.vmf-pro-layer-inspector-open [data-editor-playhead],
#editorView.vmf-modern-video-effects-open .editor-playhead,
#editorView.vmf-modern-video-effects-open .editor-playhead-marker,
#editorView.vmf-modern-video-effects-open [data-editor-playhead] {
  z-index: 1 !important;
}

#editorView.vmf-pro-layer-inspector-open .editor-playhead-marker::after,
#editorView.vmf-pro-layer-inspector-open [data-editor-playhead].editor-playhead-marker::after,
#editorView.vmf-modern-video-effects-open .editor-playhead-marker::after,
#editorView.vmf-modern-video-effects-open [data-editor-playhead].editor-playhead-marker::after {
  display: none !important;
}

/* The compact sidebar is above the timeline, so hide its marker while editing effects. */
#editorView.vmf-modern-video-effects-open .editor-playhead,
#editorView.vmf-modern-video-effects-open .editor-playhead-marker,
#editorView.vmf-modern-video-effects-open [data-editor-playhead] {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Compact visual effects: keep the essential controls in view together. */
#editorEffectsVideoSection .vmf-video-effects-workbench,
#vmfProLayerInspector .vmf-video-effects-workbench {
  gap: 9px;
}

#editorEffectsVideoSection .vmf-video-effect-card-head,
#vmfProLayerInspector .vmf-video-effect-card-head {
  min-height: 42px;
  padding: 7px 12px;
}

#editorEffectsVideoSection .vmf-video-effect-card-body,
#vmfProLayerInspector .vmf-video-effect-card-body {
  gap: 10px;
  padding: 10px 12px 12px;
}

#editorEffectsVideoSection .vmf-video-effect-grid,
#vmfProLayerInspector .vmf-video-effect-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
}

#editorEffectsVideoSection .vmf-video-effect-control,
#vmfProLayerInspector .vmf-video-effect-control {
  gap: 6px;
}

#editorEffectsVideoSection .vmf-video-effect-range-row,
#vmfProLayerInspector .vmf-video-effect-range-row {
  grid-template-columns: minmax(0, 1fr) 62px;
  gap: 10px;
}

#editorEffectsVideoSection .vmf-video-effect-number,
#editorEffectsVideoSection .vmf-video-effect-select,
#vmfProLayerInspector .vmf-video-effect-number,
#vmfProLayerInspector .vmf-video-effect-select {
  height: 27px !important;
}

@media (max-width: 560px) {
  #editorEffectsVideoSection .vmf-video-effect-grid,
  #vmfProLayerInspector .vmf-video-effect-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Audio uses the same compact workbench language as video and image layers. */
#editorEffectsAudioSection:not([hidden]) {
  display: grid !important;
  gap: 9px;
  padding: 8px 12px 22px;
}

#editorEffectsAudioSection .vmf-audio-effects-workbench {
  width: 100%;
}

#editorEffectsAudioSection .vmf-video-effect-card[data-tone="audio"] {
  --vmf-card-rgb: 255, 105, 0;
}

body .vmf-video-effect-transcribe,
#editorView #editorEffectsVideoSection .vmf-video-effect-transcribe,
#vmfProLayerInspector .vmf-video-effect-transcribe {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 43px !important;
  margin: 3px 0 10px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 107, 10, .9) !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff9a28 0%, #ff7416 42%, #ff5607 100%) !important;
  box-shadow: 0 12px 24px rgba(255, 99, 9, .25), inset 0 1px 0 rgba(255, 255, 255, .23) !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease !important;
}

body .vmf-video-effect-transcribe:hover:not(:disabled),
#editorView #editorEffectsVideoSection .vmf-video-effect-transcribe:hover:not(:disabled),
#vmfProLayerInspector .vmf-video-effect-transcribe:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  filter: saturate(1.06) brightness(1.02) !important;
  box-shadow: 0 15px 28px rgba(255, 99, 9, .31), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

body .vmf-video-effect-transcribe:active:not(:disabled),
#editorView #editorEffectsVideoSection .vmf-video-effect-transcribe:active:not(:disabled),
#vmfProLayerInspector .vmf-video-effect-transcribe:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 7px 14px rgba(255, 99, 9, .24), inset 0 1px 2px rgba(141, 49, 0, .22) !important;
}

body .vmf-video-effect-transcribe:disabled,
#editorView #editorEffectsVideoSection .vmf-video-effect-transcribe:disabled,
#vmfProLayerInspector .vmf-video-effect-transcribe:disabled {
  cursor: progress !important;
  opacity: .68 !important;
}