/* Orange accent layer only. This file deliberately changes colors, not layout. */
:root {
  --orange-accent: #ff6900;
  --orange-accent-2: #ff9100;
  --orange-accent-soft: #fff0e2;
  --blue: var(--orange-accent);
  --purple: var(--orange-accent);
  --vmf-prem-blue: var(--orange-accent);
}

/* The main generation action should use the same signature treatment as the
   newer editor, account, download, and modal actions—not the legacy flat red. */
#generateButton.generate-button {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--orange-accent-2) 0%, var(--orange-accent) 100%) !important;
  box-shadow: 0 14px 28px rgba(255, 105, 0, .24) !important;
}

#generateButton.generate-button:hover,
#generateButton.generate-button:focus-visible {
  background: linear-gradient(135deg, #ff9f18 0%, #f25711 100%) !important;
  box-shadow: 0 16px 32px rgba(255, 105, 0, .30) !important;
}

#generateButton.generate-button:disabled {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  box-shadow: none !important;
}

input[type="checkbox"]:checked {
  border-color: var(--orange-accent) !important;
  background-color: var(--orange-accent) !important;
  box-shadow: 0 2px 5px rgba(255, 105, 0, .28) !important;
}

input[type="checkbox"]:focus-visible {
  outline-color: rgba(255, 105, 0, .24) !important;
}

input[type="range"] {
  accent-color: var(--orange-accent) !important;
}

.editor-export-button,
.editor-media-upload-empty-button,
#editorView #editorMediaPanel .vmf-media-upload-button,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(255, 105, 0, .22) !important;
}

.editor-export-button:hover,
.editor-media-upload-empty-button:hover,
#editorView #editorMediaPanel .vmf-media-upload-button:hover,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-button:hover {
  background: linear-gradient(135deg, #ff8500, #eb6000) !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-note {
  color: var(--orange-accent) !important;
  background: var(--orange-accent-soft) !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-file {
  color: var(--orange-accent-2) !important;
  background: linear-gradient(180deg, #fff 0%, #fff3e8 100%) !important;
  box-shadow: 0 8px 18px rgba(255, 105, 0, .14), inset 0 0 0 1px rgba(255, 145, 0, .20) !important;
}

#editorView .vmf-clean-file-t {
  fill: var(--orange-accent) !important;
}

#editorView .editor-tool-button:focus-visible,
#editorView .editor-whisper-status,
#editorView .editor-export-status[data-tone="working"],
#editorView .editor-inspector-align-button.is-active,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button.active,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[aria-selected="true"],
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="effects"][aria-selected="true"] {
  color: var(--orange-accent) !important;
}

#editorView .editor-tool-button:focus-visible,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button.active,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[aria-selected="true"] {
  background-color: var(--orange-accent-soft) !important;
  border-color: #ffc18f !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="media"].active .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="media"][aria-selected="true"] .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="effects"].active .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="effects"][aria-selected="true"] .editor-tool-icon {
  color: var(--orange-accent) !important;
  border-color: var(--orange-accent) !important;
}

#editorView .editor-tool-button.active .editor-tool-icon *,
#editorView .editor-tool-button[aria-selected="true"] .editor-tool-icon * {
  color: var(--orange-accent) !important;
  stroke: currentColor !important;
}

#editorView .editor-text-panel input[type="range"] {
  accent-color: var(--orange-accent) !important;
}

#editorView input[type="checkbox"]:checked,
#vmfProLayerInspector .vmf-pro-toggle input:checked + i {
  border-color: var(--orange-accent) !important;
  background-color: var(--orange-accent) !important;
}

#editorView .editor-inspector-preset.is-active {
  border-color: var(--orange-accent) !important;
  box-shadow: 0 0 0 2px rgba(255, 105, 0, .17), 0 8px 22px rgba(15, 23, 42, .12) !important;
}

#editorWaveform .vmf-audio-layer-hitbox:hover,
#editorWaveform .vmf-audio-layer-hitbox.is-selected,
#editorWaveform .editor-audio-bed-selectable.active,
#editorWaveform .editor-selection-window-audio-clip.active {
  border-color: var(--orange-accent) !important;
  box-shadow: 0 0 0 2px rgba(255, 105, 0, .20), inset 0 0 0 1px rgba(255,255,255,.72) !important;
}

#editorWaveform .editor-audio-bed-selectable.active,
#editorWaveform .editor-selection-window-audio-clip.active {
  background: linear-gradient(180deg, rgba(255, 145, 0, .27), rgba(255, 105, 0, .15)) !important;
}

#editorWaveform .editor-audio-bed-selectable.active .vmf-audio-bed-label,
#editorWaveform .editor-selection-window-audio-clip.active .editor-overlay-name-audio,
#editorWaveform .editor-audio-bed-selectable.active .editor-wave-bar,
#editorWaveform .editor-selection-window-audio-clip.active .editor-wave-bar {
  background-color: var(--orange-accent) !important;
}

#editorView svg [stroke="#2563eb" i],
#editorView svg [stroke="#3b82f6" i],
#editorView svg [stroke="#1976f3" i],
#editorView svg [stroke="#2585f5" i],
#editorView svg [stroke="#3366f6" i],
#editorView svg [stroke="#60a5fa" i] {
  stroke: currentColor !important;
}

#editorView svg [fill="#2563eb" i],
#editorView svg [fill="#3b82f6" i],
#editorView svg [fill="#1976f3" i],
#editorView svg [fill="#2585f5" i],
#editorView svg [fill="#3366f6" i],
#editorView svg [fill="#60a5fa" i] {
  fill: currentColor !important;
}

/* Exact overrides for the editor's final high-specificity blue rules. */
body #editorView.vmf-clean-editor-layout-v2 .editor-export-button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(255, 105, 0, .22) !important;
}

body #editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button.active,
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[aria-selected="true"],
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[data-editor-tool="media"].active,
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[data-editor-tool="media"][aria-selected="true"],
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[data-editor-tool="effects"].active,
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[data-editor-tool="effects"][aria-selected="true"] {
  color: var(--orange-accent) !important;
}

body #editorView.vmf-clean-editor-layout-v2 .editor-tool-button.active .editor-tool-icon,
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-button[aria-selected="true"] .editor-tool-icon,
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="media"].active .editor-tool-icon,
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="media"][aria-selected="true"] .editor-tool-icon,
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="effects"].active .editor-tool-icon,
body #editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="effects"][aria-selected="true"] .editor-tool-icon {
  color: var(--orange-accent) !important;
  border-color: var(--orange-accent) !important;
}

/* Dashboard brand and project action use the same orange as the editor. */
.brand-mark {
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-mark img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* Match the landing action to the product's orange primary gradient. */
.landing-create-account {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  box-shadow: 0 12px 24px rgba(255, 105, 0, .22) !important;
}

.landing-create-account:hover,
.landing-create-account:focus-visible {
  color: #fff !important;
  background: linear-gradient(135deg, #ff8500, #eb6000) !important;
  box-shadow: 0 16px 30px rgba(255, 105, 0, .28) !important;
}

/* The public landing page scrolls naturally and carries a warm brand atmosphere. */
html:has(#authView:not([hidden])),
body:has(#authView:not([hidden])) {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
}

body:has(#authView:not([hidden])) {
  overflow-x: hidden !important;
  background:
    radial-gradient(900px 580px at 50% -180px, rgba(255, 145, 0, .22), transparent 72%),
    radial-gradient(700px 460px at 3% 58%, rgba(255, 105, 0, .10), transparent 72%),
    radial-gradient(720px 520px at 98% 72%, rgba(255, 145, 0, .11), transparent 74%),
    #fffaf6 !important;
}

body:has(#authView:not([hidden])) #authView {
  min-height: 100vh;
  box-sizing: border-box;
  background:
    radial-gradient(760px 430px at 50% 14%, rgba(255, 145, 0, .13), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(255, 248, 241, .68) 100%);
}

/* Trust avatars enter as a quick, friendly stagger instead of appearing all at once. */
body:has(#authView:not([hidden])) .trust-avatar {
  animation: shortly-avatar-pop .46s cubic-bezier(.2, .9, .25, 1.16) both;
}

body:has(#authView:not([hidden])) .trust-avatar:nth-child(2) { animation-delay: .13s; }
body:has(#authView:not([hidden])) .trust-avatar:nth-child(3) { animation-delay: .26s; }

@keyframes shortly-avatar-pop {
  from { opacity: 0; transform: translateY(10px) scale(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#authView:not([hidden])) .trust-avatar { animation: none; }
}

.project-create-button {
  color: #fff !important;
  border-color: var(--orange-accent) !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  box-shadow: 0 12px 24px rgba(255, 105, 0, .22) !important;
}

.project-create-button:hover,
.project-create-button:focus-visible {
  color: #fff !important;
  border-color: #eb6000 !important;
  background: linear-gradient(135deg, #ff8500, #eb6000) !important;
  box-shadow: 0 14px 28px rgba(255, 105, 0, .28) !important;
}

/* Match the streamer modal actions to the primary Shortly gradient. */
#collectionModal .auth-inline-form button {
  color: #fff !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  box-shadow: 0 12px 24px rgba(255, 105, 0, .22) !important;
}

#collectionModal .auth-inline-form button:hover,
#collectionModal .auth-inline-form button:focus-visible {
  background: linear-gradient(135deg, #ff8500, #eb6000) !important;
  box-shadow: 0 16px 30px rgba(255, 105, 0, .28) !important;
}

.use-source-button {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  box-shadow: 0 10px 22px rgba(255, 105, 0, .20) !important;
}

.use-source-button:hover,
.use-source-button:focus-visible {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #ff8500, #eb6000) !important;
  box-shadow: 0 14px 26px rgba(255, 105, 0, .26) !important;
}

#applyClipFilters {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  box-shadow: 0 12px 24px rgba(255, 105, 0, .22) !important;
}

#applyClipFilters:hover,
#applyClipFilters:focus-visible {
  color: #fff !important;
  background: linear-gradient(135deg, #ff8500, #eb6000) !important;
  box-shadow: 0 16px 30px rgba(255, 105, 0, .28) !important;
}

/* Keep every file/media drag state on the main site orange. */
body #editorView.dragging-files {
  background: radial-gradient(520px 220px at 50% 0%, rgba(255, 105, 0, .10), transparent 70%) !important;
}

body #editorView .editor-shell.dragging-files {
  border-color: rgba(255, 105, 0, .42) !important;
  background:
    radial-gradient(720px 220px at 50% -20%, rgba(255, 105, 0, .14), transparent 58%),
    rgba(255, 255, 255, .99) !important;
  box-shadow: 0 22px 48px rgba(255, 105, 0, .14) !important;
}

body #editorView #editorMediaPanel.dragging-files {
  background: linear-gradient(180deg, rgba(255, 105, 0, .10), rgba(255, 247, 239, .76)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 105, 0, .22) !important;
}

body #editorView #editorMediaDropzone.dragging,
body #editorView .editor-media-dropzone.dragging {
  border-color: rgba(255, 105, 0, .62) !important;
  border-bottom-color: rgba(255, 105, 0, .62) !important;
  background: linear-gradient(180deg, rgba(255, 240, 226, .82), rgba(255, 247, 239, .26)) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 105, 0, .18) !important;
}

body #editorView #editorMediaList.dragging-files,
body #editorView .editor-media-list.dragging-files {
  background: rgba(255, 249, 244, .78) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 105, 0, .18) !important;
}

body #editorView .editor-video-stage.drop-active {
  border-color: var(--orange-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 105, 0, .24), 0 0 0 4px rgba(255, 190, 133, .28) !important;
  background: rgba(255, 105, 0, .05) !important;
}

body #editorView .editor-timeline-empty.drop-active,
body #editorView .editor-timeline-lane.drop-active,
body #editorView .editor-empty-timeline-stack .editor-timeline-lane.drop-active {
  border-color: var(--orange-accent) !important;
  outline-color: rgba(255, 105, 0, .48) !important;
  background-color: rgba(255, 105, 0, .08) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 247, 239, .94)),
    radial-gradient(circle at top, rgba(255, 105, 0, .18), transparent 58%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 105, 0, .22), 0 0 0 3px rgba(255, 190, 133, .38) !important;
}

body #editorView .editor-drop-indicator {
  border-color: rgba(255, 105, 0, .42) !important;
  box-shadow: 0 16px 36px rgba(255, 105, 0, .18) !important;
}

body #editorView .editor-drop-indicator-thumb {
  background: linear-gradient(180deg, #fff0e2, #ffd4ad) !important;
}

body #editorView .editor-drop-indicator-thumb-fallback {
  color: var(--orange-accent) !important;
}

body #editorView .vmf-timeline-drop-guide {
  border-color: rgba(255, 105, 0, .90) !important;
  background: rgba(255, 105, 0, .10) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .68) !important;
}

body #editorView .vmf-timeline-drop-guide-label {
  background: var(--orange-accent) !important;
  box-shadow: 0 4px 14px rgba(255, 105, 0, .24) !important;
}

body .views-list.drop-active {
  outline-color: rgba(255, 105, 0, .42) !important;
}

body #editorView .editor-media-item.dragging,
body #editorView #editorMediaPanel [data-editor-media-id].dragging {
  opacity: 1 !important;
  transform: none !important;
  border-color: rgba(255, 105, 0, .45) !important;
  box-shadow: 0 10px 24px rgba(255, 105, 0, .14) !important;
}

/* The signed-in generator is a normal document, not the fixed editor canvas. */
html:has(#appShell:not([hidden])),
body:not(.editor-mode):has(#appShell:not([hidden])) {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
}

body:not(.editor-mode):has(#appShell:not([hidden])) {
  overflow-x: hidden !important;
}

body:not(.editor-mode) #app,
body:not(.editor-mode) #appShell,
body:not(.editor-mode) .app-content {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Keep compact add actions on the same Shortly brand treatment as primary CTAs. */
.stack-card-head .plus-button {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(255, 105, 0, .22) !important;
}

.stack-card-head .plus-button:hover,
.stack-card-head .plus-button:focus-visible {
  background: linear-gradient(135deg, #ff9f18, #f25711) !important;
  box-shadow: 0 10px 22px rgba(255, 105, 0, .30) !important;
}

/* Clip-card downloads use the same primary action treatment. */
.download {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(255, 105, 0, .22) !important;
}

.download:hover,
.download:focus-visible {
  background: linear-gradient(135deg, #ff9f18, #f25711) !important;
  box-shadow: 0 10px 22px rgba(255, 105, 0, .30) !important;
}

/* Timeline text clips: compact orange labels, no legacy blue/purple treatment. */
body.vmf-v2 #editorView .editor-timeline-lane-captions .editor-selection-window-overlay.editor-selection-window-text-clip {
  top: 7px !important;
  bottom: 7px !important;
  z-index: 5;
}

body.vmf-v2 #editorView .editor-selection-window-text-clip .editor-selection-fill-overlay {
  border: 1px solid rgba(255, 119, 31, .52) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffaf5 0%, #fff2e8 100%) !important;
  box-shadow: 0 2px 7px rgba(181, 78, 14, .12) !important;
}

body.vmf-v2 #editorView .editor-selection-window-text-clip .editor-track-text-fill {
  justify-content: flex-start !important;
  padding: 0 12px !important;
  background: transparent !important;
}

body.vmf-v2 #editorView .editor-selection-window-text-clip .editor-track-text-chip {
  min-height: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  gap: 6px;
  border-radius: 0 !important;
  background: transparent !important;
  color: #7c2d12 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

body.vmf-v2 #editorView .editor-selection-window-text-clip .editor-track-text-chip::before {
  content: "T";
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 4px;
  background: linear-gradient(135deg, #ff9b3d, #f45b16);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

body.vmf-v2 #editorView .editor-selection-window-text-clip .editor-overlay-name {
  display: none !important;
}

body.vmf-v2 #editorView .editor-selection-window-text-clip.active .editor-selection-fill-overlay {
  border-color: #f97316 !important;
  background: #fff4e9 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .18) !important;
}

body.vmf-v2 #editorView .editor-selection-window-text-clip .editor-handle::before {
  background: linear-gradient(90deg, #f97316 0 2px, #fffaf5 2px 6px, #f97316 6px 8px) !important;
}

body.vmf-v2 #editorView .editor-selection-window-text-clip .editor-handle::after {
  border-color: rgba(249, 115, 22, .42) !important;
  box-shadow: 0 1px 4px rgba(124, 45, 18, .14) !important;
}

/* Main-editor timeline follows the mock's orange visual language. */
body #editorView .editor-selection-window-media-clip {
  border: 1px solid rgba(255, 126, 43, .48) !important;
  border-radius: 8px !important;
  background: #fffaf5 !important;
  box-shadow: 0 1px 3px rgba(74, 37, 12, .08) !important;
  overflow: hidden;
}

body #editorView .editor-selection-window-media-clip .editor-track-filmstrip {
  filter: saturate(.82) contrast(.95);
  opacity: .9;
}

body #editorView .editor-selection-window-media-clip.active {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .2), 0 2px 8px rgba(74, 37, 12, .12) !important;
}

body #editorView .editor-audio-bed,
body #editorView .editor-selection-window-audio-clip {
  border: 1px solid rgba(255, 135, 51, .48) !important;
  background: rgba(255, 157, 75, .09) !important;
  box-shadow: none !important;
}

body #editorView .editor-wave-bar,
body #editorView .editor-overlay-wave span {
  width: min(4px, 100%) !important;
  min-height: 3px !important;
  justify-self: center;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffb05d, #f97316) !important;
  box-shadow: none !important;
  opacity: .9;
}

body #editorView .editor-overlay-wave {
  grid-template-columns: repeat(128, minmax(0, 1fr)) !important;
  gap: 1px !important;
  padding: 5px 8px;
}

body #editorView .editor-overlay-name-audio,
body #editorView .vmf-audio-bed-label {
  display: none !important;
}

body #editorView .editor-selection-window-text-clip .editor-selection-fill-overlay {
  display: flex !important;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 119, 31, .52) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffaf5 0%, #fff2e8 100%) !important;
  box-shadow: 0 2px 7px rgba(181, 78, 14, .12) !important;
}

body #editorView .editor-selection-window-text-clip .editor-overlay-name {
  display: none !important;
}

body #editorView .editor-selection-window-text-clip.active .editor-selection-fill-overlay {
  border-color: #f97316 !important;
  background: #fff4e9 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .18) !important;
}

body #editorView .editor-selection-window-text-clip .editor-timeline-text-label {
  position: absolute !important;
  inset: 3px 20px !important;
  z-index: 5 !important;
  display: block !important;
  overflow: hidden;
  color: #7c2d12 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: none;
}

/* The labels live inside the timeline canvas.  Pin them here, after every
   base layout override, so horizontal zoom never scrolls Captions/Media/Audio
   out of view with the clip canvas. */
body #editorView .editor-track-label,
body #editorView .vmf-track-rail-label,
body #editorView .editor-ruler-gutter {
  position: sticky !important;
  left: 0 !important;
  z-index: 300 !important;
  background: #ffffff !important;
  box-shadow: 1px 0 0 #e8edf5 !important;
}

/* #editorWaveform has a late position:relative!important rule in the legacy
   stylesheet, so match its specificity here rather than relying on order. */
html body #editorView #editorWaveform .editor-track-label,
html body #editorView #editorWaveform .vmf-track-rail-label,
html body #editorView #editorWaveform .editor-ruler-gutter {
  position: sticky !important;
  left: 0 !important;
  z-index: 300 !important;
  transform: translateX(var(--vmf-track-rail-offset, 0px)) !important;
}

/* Text styling footer: visible beneath the preset grid, with the shared
   orange action treatment. */
body #editorView.vmf-clean-editor-layout-v2 #editorApplyTextToAll {
  display: inline-flex !important;
  width: calc(100% - 24px) !important;
  min-height: 42px !important;
  margin: 14px 12px 18px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff9524 0%, #ff5b0a 100%) !important;
  color: #ffffff !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(255, 105, 10, .20) !important;
  cursor: pointer !important;
}

/* Multi-layer selection mirrors the orange active state without changing the
   primary inspector target. */
#editorWaveform .editor-selection-window.shortly-multi-selected,
#editorWaveform .editor-audio-bed-selectable.shortly-multi-selected,
#editorWaveform .editor-caption-chip.shortly-multi-selected,
#editorWaveform .editor-selection-window.shortly-marquee-candidate,
#editorWaveform .editor-audio-bed-selectable.shortly-marquee-candidate,
#editorWaveform .editor-caption-chip.shortly-marquee-candidate {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .24), 0 5px 14px rgba(234, 88, 12, .16) !important;
}

#editorWaveform .editor-selection-window-overlay.shortly-multi-selected .editor-selection-fill-overlay {
  border-color: rgba(234, 88, 12, .55) !important;
  background: linear-gradient(180deg, rgba(255, 172, 91, .38), rgba(249, 115, 22, .22)) !important;
}

/* A marquee selection is a persistent editing state, not a subtle hover.
   Keep the selected clips unmistakable even over filmstrips and waveforms. */
#editorWaveform .editor-selection-window.shortly-multi-selected,
#editorWaveform .editor-audio-bed-selectable.shortly-multi-selected,
#editorWaveform .editor-caption-chip.shortly-multi-selected {
  background: linear-gradient(180deg, rgba(255, 247, 237, .98), rgba(254, 215, 170, .92)) !important;
  border: 2px solid #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .27), 0 8px 18px rgba(194, 65, 12, .2) !important;
  z-index: 40 !important;
}

#editorWaveform .editor-selection-window.shortly-multi-selected .editor-selection-fill,
#editorWaveform .editor-selection-window.shortly-multi-selected .editor-selection-fill-overlay {
  background: linear-gradient(180deg, rgba(255, 190, 125, .52), rgba(249, 115, 22, .36)) !important;
  box-shadow: inset 0 0 0 999px rgba(255, 123, 31, .14) !important;
}

#editorWaveform .editor-caption-chip.shortly-multi-selected,
#editorWaveform .editor-caption-chip.shortly-multi-selected .editor-caption-label {
  color: #9a3412 !important;
  font-weight: 800 !important;
}

#editorWaveform .editor-audio-bed-selectable.shortly-multi-selected .editor-wave-bar,
#editorWaveform .editor-selection-window-audio-clip.shortly-multi-selected .editor-overlay-wave span {
  background: #f97316 !important;
  opacity: 1 !important;
}

#editorWaveform .editor-track-row.shortly-track-has-selection > .editor-track-label,
#editorWaveform .editor-track-row.shortly-track-marquee-candidate > .editor-track-label {
  color: #c2410c !important;
  background: #fff7ed !important;
  box-shadow: inset 4px 0 0 #f97316, 1px 0 0 rgba(249, 115, 22, .24) !important;
}

#editorWaveform .editor-track-row.shortly-track-marquee-candidate > .editor-track-label {
  background: #fffaf5 !important;
}

#editorWaveform .shortly-marquee-candidate {
  outline: 1px solid rgba(249, 115, 22, .9);
  outline-offset: -1px;
}

.editor-timeline-marquee {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  border: 1px solid rgba(249, 115, 22, .86);
  border-radius: 4px;
  background: rgba(255, 145, 54, .16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) inset;
}

body #editorView.vmf-clean-editor-layout-v2 #editorApplyTextToAll:disabled {
  cursor: not-allowed !important;
  opacity: .48 !important;
  box-shadow: none !important;
}

body #editorView .editor-selection-window-overlay .editor-handle,
body #editorView .editor-audio-bed-selectable .vmf-audio-bed-handle {
  width: 16px !important;
}

body #editorView .editor-selection-window-overlay .editor-handle::after {
  width: 14px !important;
  height: 24px !important;
  border: 1px solid rgba(249, 115, 22, .5) !important;
  border-radius: 7px !important;
  background: #fffaf5 !important;
  box-shadow: 0 2px 6px rgba(124, 45, 18, .16) !important;
  z-index: 2;
}

body #editorView .editor-selection-window-overlay .editor-handle::before,
body #editorView .editor-audio-bed-selectable .vmf-audio-bed-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #f97316 0 1px, transparent 1px 2.5px) !important;
  z-index: 3;
}

body #editorView .editor-audio-bed-selectable .vmf-audio-bed-handle {
  border: 1px solid rgba(249, 115, 22, .5) !important;
  background: #fffaf5 !important;
  box-shadow: 0 2px 6px rgba(124, 45, 18, .16) !important;
}

/* Give the first audio trim grip a wider in-clip hit target. The waveform
   clips overflow, so expanding inward keeps it easy to grab at 0:00. */
body #editorView .editor-audio-bed-selectable .vmf-audio-bed-handle-start {
  left: 0 !important;
  width: 28px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body #editorView .editor-audio-bed-selectable .vmf-audio-bed-handle-start::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 14px;
  border: 1px solid rgba(249, 115, 22, .5);
  border-radius: 999px;
  background: #fffaf5;
  box-shadow: 0 2px 6px rgba(124, 45, 18, .16);
}

body #editorView .editor-audio-bed-selectable .vmf-audio-bed-handle-start::before {
  left: 10px;
}

/* Keep the editor's nested side-panel scrollers usable without showing two
   competing scrollbar tracks. Wheel, touchpad, keyboard, and touch scrolling
   continue to work normally. */
body #editorView .editor-sidebar,
body #editorView .editor-sidebar-panel,
body #editorView .editor-sidebar * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body #editorView .editor-sidebar::-webkit-scrollbar,
body #editorView .editor-sidebar-panel::-webkit-scrollbar,
body #editorView .editor-sidebar *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Shortly-branded clip preview control: orange motion mark, warm halo, and
   a crisp custom glyph without changing the button's behavior. */
body .clip-card-play {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 2px solid rgba(255, 255, 255, .92) !important;
  background: linear-gradient(135deg, #ff9824 0%, #ff6a00 48%, #f04b12 100%) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow:
    0 0 0 5px rgba(255, 122, 24, .18),
    0 12px 28px rgba(93, 36, 8, .32) !important;
  isolation: isolate;
}

body .clip-card-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-42%, -50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #ffffff;
}

body .clip-card-play::after {
  content: none;
}

body .clip-card-play:hover,
body .clip-card-play:focus-visible {
  background: linear-gradient(135deg, #ffa33a 0%, #ff7108 48%, #ef4910 100%) !important;
  box-shadow:
    0 0 0 7px rgba(255, 122, 24, .22),
    0 16px 34px rgba(93, 36, 8, .38) !important;
}

body .clip-card-play:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .95) !important;
  outline-offset: 3px !important;
}

body #closeDetail {
  min-height: 40px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff9824 0%, #ff6a00 50%, #f04b12 100%) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  box-shadow: 0 10px 22px rgba(240, 75, 18, .24) !important;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease !important;
}

body #closeDetail:hover,
body #closeDetail:focus-visible {
  transform: translateY(-1px) !important;
  filter: saturate(1.06) brightness(1.03) !important;
  box-shadow: 0 14px 28px rgba(240, 75, 18, .3) !important;
}

body #closeDetail:active {
  transform: translateY(0) !important;
}

body .inline-volume-menu {
  position: fixed !important;
  overflow: hidden !important;
  padding: 13px 14px 14px !important;
  border: 1px solid rgba(249, 115, 22, .28) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .99) 0%, rgba(255, 246, 237, .99) 100%) !important;
  box-shadow:
    0 16px 34px rgba(124, 45, 18, .18),
    0 0 0 1px rgba(255, 255, 255, .75) inset !important;
}

body .inline-volume-menu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #ff9824 0%, #ff6a00 52%, #f04b12 100%);
}

body .inline-volume-menu label {
  color: #9a3412 !important;
  font-weight: 750 !important;
}

body .inline-volume-menu input[type="range"] {
  width: 100% !important;
  height: 6px !important;
  margin: 7px 0 3px !important;
  border-radius: 999px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: linear-gradient(90deg, #ff9824 0%, #ff6a00 52%, #f04b12 100%) !important;
  cursor: pointer !important;
}

body .inline-volume-menu input[type="range"]::-webkit-slider-thumb {
  width: 17px !important;
  height: 17px !important;
  border: 3px solid #ff6a00 !important;
  border-radius: 999px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #ffffff !important;
  box-shadow: 0 3px 9px rgba(124, 45, 18, .24) !important;
}

body .inline-volume-menu input[type="range"]::-moz-range-track {
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #ff9824 0%, #ff6a00 52%, #f04b12 100%) !important;
}

body .inline-volume-menu input[type="range"]::-moz-range-thumb {
  width: 13px !important;
  height: 13px !important;
  border: 3px solid #ff6a00 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 9px rgba(124, 45, 18, .24) !important;
}

/* Compact, equal-height clip titles keep metadata and action buttons aligned
   across every card, even when one title is much longer than its neighbors. */
body .clips .clip-info {
  grid-template-rows: 30px auto auto !important;
  gap: 8px !important;
}

body .clips .clip-title-text {
  display: -webkit-box !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 15px !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body .clips .clip-actions .edit-clip {
  color: #f05a12 !important;
  font-weight: 750 !important;
}

body .clips .clip-actions .edit-clip:hover,
body .clips .clip-actions .edit-clip:focus-visible {
  color: #d9470b !important;
  border-color: rgba(240, 90, 18, .34) !important;
  background: #fff8f3 !important;
}

/* Warm gradient ramp behind the open clips panel. The modal content stays
   neutral while the backdrop carries the Shortly brand atmosphere. */
body #projectDetail:not([hidden]) {
  background:
    radial-gradient(900px 620px at 8% 100%, rgba(255, 105, 0, .34) 0%, rgba(255, 132, 28, .18) 42%, transparent 72%),
    radial-gradient(760px 520px at 96% 4%, rgba(255, 157, 65, .25) 0%, transparent 70%),
    linear-gradient(135deg, rgba(255, 116, 12, .18) 0%, rgba(113, 59, 31, .16) 46%, rgba(17, 24, 39, .30) 100%) !important;
  backdrop-filter: blur(9px) saturate(1.06) !important;
}

/* Modern video trim grips: compact warm-white pills with a subtle orange
   double-line affordance. These replace the legacy blue striped controls. */
html body #editorView #editorWaveform .editor-selection-window[data-editor-window="video"] > .editor-handle,
html body #editorView #editorWaveform .editor-selection-window-media-clip > .editor-handle {
  top: 5px !important;
  bottom: 5px !important;
  width: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: .78 !important;
  transition: opacity 140ms ease, filter 140ms ease !important;
}

html body #editorView #editorWaveform .editor-selection-window[data-editor-window="video"] > .editor-handle-start,
html body #editorView #editorWaveform .editor-selection-window-media-clip > .editor-handle-start {
  left: 3px !important;
}

html body #editorView #editorWaveform .editor-selection-window[data-editor-window="video"] > .editor-handle-end,
html body #editorView #editorWaveform .editor-selection-window-media-clip > .editor-handle-end {
  right: 3px !important;
}

html body #editorView #editorWaveform .editor-selection-window[data-editor-window="video"] > .editor-handle::after,
html body #editorView #editorWaveform .editor-selection-window-media-clip > .editor-handle::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 9px !important;
  height: 23px !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(249, 115, 22, .58) !important;
  border-radius: 999px !important;
  background: rgba(255, 252, 248, .96) !important;
  box-shadow: 0 2px 6px rgba(124, 45, 18, .14), inset 0 1px 0 #ffffff !important;
  z-index: 2 !important;
}

html body #editorView #editorWaveform .editor-selection-window[data-editor-window="video"] > .editor-handle::before,
html body #editorView #editorWaveform .editor-selection-window-media-clip > .editor-handle::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 3px !important;
  height: 11px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #f97316 0 1px, transparent 1px 2px, #f97316 2px 3px) !important;
  z-index: 3 !important;
}

html body #editorView #editorWaveform .editor-selection-window[data-editor-window="video"]:hover > .editor-handle,
html body #editorView #editorWaveform .editor-selection-window[data-editor-window="video"].active > .editor-handle,
html body #editorView #editorWaveform .editor-selection-window-media-clip:hover > .editor-handle,
html body #editorView #editorWaveform .editor-selection-window-media-clip.active > .editor-handle,
html body #editorView #editorWaveform .editor-selection-window[data-editor-window="video"] > .editor-handle:focus-visible,
html body #editorView #editorWaveform .editor-selection-window-media-clip > .editor-handle:focus-visible {
  opacity: 1 !important;
  filter: drop-shadow(0 2px 3px rgba(234, 88, 12, .12)) !important;
}

/* Caption cues must occupy the lane itself. A late compact-timeline rule was
   resetting this bed to a zero-height relative box, leaving valid captions
   present in the DOM but completely invisible. */
#editorWaveform .editor-timeline-lane-captions .editor-caption-bed {
  position: absolute !important;
  top: 6px !important;
  right: 10px !important;
  bottom: 6px !important;
  left: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  z-index: 4 !important;
}

#editorWaveform .editor-caption-chip {
  height: 32px !important;
  border: 1px solid rgba(249, 115, 22, .68) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #fffdfb 0%, #fff5eb 100%) !important;
  box-shadow: 0 2px 7px rgba(234, 88, 12, .12), inset 0 0 0 1px rgba(255, 255, 255, .86) !important;
  color: #172033 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#editorWaveform .editor-caption-chip.active {
  border-color: #f97316 !important;
  background: linear-gradient(180deg, #fffaf5 0%, #ffedd5 100%) !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .22), 0 4px 11px rgba(194, 65, 12, .16) !important;
}

#editorWaveform .editor-caption-chip .editor-caption-handle {
  width: 12px !important;
  border: 1px solid #fb923c !important;
  border-radius: 6px !important;
  background: repeating-linear-gradient(90deg, #ffffff 0 3px, #fb923c 3px 4px, #ffffff 4px 6px) !important;
  box-shadow: 0 1px 3px rgba(194, 65, 12, .16) !important;
}

#editorWaveform .editor-caption-chip .editor-caption-label {
  color: #172033 !important;
}

/* Timeline zoom and playhead final pass.
   The legacy stylesheet drew a second, viewport-height playhead from the
   ruler. When the canvas was horizontally scrolled, that detached line could
   drift over the fixed track-label rail. The ruler now owns only the head;
   each timeline lane owns its aligned, clipped part of the stem. */
#editorView #editorWaveform .editor-waveform-scroll {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#editorView #editorWaveform .editor-waveform-canvas {
  width: var(--editor-timeline-canvas-width, 100%) !important;
  min-width: var(--editor-timeline-canvas-width, 100%) !important;
}

#editorWaveform .editor-ruler-scale {
  overflow: visible !important;
  /* Clip horizontally at the ruler boundary while allowing the connector to
     continue down into the first track. This is a true rail mask and does not
     depend on timing or scroll calculations. */
  clip-path: inset(0 0 -40px 0) !important;
}

#editorWaveform .editor-ruler-scale::after,
#editorWaveform .editor-ruler-scale > .editor-playhead-marker::after,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker::after {
  content: none !important;
  display: none !important;
}

/* Bridge the ruler-height gap between the head and the contained timeline
   stem. This is attached to the head itself, so it always shares its exact
   x-position and cannot wander into the label rail. */
#editorWaveform .editor-ruler-scale > .editor-playhead-marker::before,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker::before {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  width: 2px !important;
  height: 26px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: #111827 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .68) !important;
  pointer-events: none !important;
  z-index: 79 !important;
}

/* Once the playhead moves under a sticky label rail, hide every visible part
   of it. The scroll listener recalculates this on every horizontal pan. */
#editorWaveform .editor-ruler-scale > .editor-playhead-marker,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker,
#editorWaveform .editor-ruler-scale > .editor-playhead-marker::before,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker::before,
#editorWaveform .editor-timeline-stack::after {
  opacity: var(--editor-playhead-visibility, 1) !important;
}

/* The actual long marker lives inside the scrollable timeline stack. Its
   x-coordinate is calculated in pixels after the fixed label rail, so it
   stays visible and aligned at every timeline zoom level. */
#editorWaveform .editor-timeline-stack {
  position: relative !important;
}

#editorWaveform .editor-timeline-stack::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--editor-playhead-canvas-x, 151px) !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: #111827 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 250 !important;
}

#editorWaveform .editor-timeline-lane > .editor-playhead,
#editorWaveform .vmf-real-empty-track-lane > .editor-playhead,
#editorWaveform .editor-track-lane > .editor-playhead {
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  opacity: var(--editor-playhead-visibility, 1) !important;
  visibility: visible !important;
  background: #111827 !important;
  box-shadow: none !important;
  z-index: 25 !important;
  pointer-events: none !important;
}

/* Every row supplies its own clipped segment. Because the segment lives in
   the timed lane—not the sticky label cell—it cannot leave black fragments
   over Captions, Media, or Audio. */
#editorWaveform .editor-timeline-lane,
#editorWaveform .vmf-real-empty-track-lane,
#editorWaveform .editor-track-lane {
  clip-path: inset(0) !important;
}

/* Match the timeline rail to the actual rendered track labels. The labels are
   150px wide and begin one pixel inside their row, so the ruler gutter is
   151px wide: its right edge, time 0, and the lane edge all meet at x=152px. */
#editorWaveform {
  --vmf-reference-rail-width: 150px !important;
  --vmf-track-rail-width: 150px !important;
}

#editorWaveform .editor-ruler-gutter {
  width: 151px !important;
  min-width: 151px !important;
  max-width: 151px !important;
}

#editorWaveform .editor-track-label,
#editorWaveform .editor-timeline-category-label {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

#editorWaveform .editor-track-label,
#editorWaveform .editor-timeline-category-label {
  gap: 8px !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-size: 12px !important;
}

#editorWaveform .editor-ruler-gutter .vmf-add-track-button {
  padding-right: 10px !important;
  padding-left: 10px !important;
  gap: 7px !important;
  font-size: 12px !important;
}

/* Start time 0 immediately after the track-label rail. The ruler needs the
   extra pixel used by the row's inner label edge; track rows stay at 150px. */
#editorView #editorWaveform .editor-ruler {
  grid-template-columns: 151px minmax(0, 1fr) !important;
  column-gap: 0 !important;
}

#editorView #editorWaveform .editor-track-row,
#editorView #editorWaveform .vmf-track-rail-row,
#editorView #editorWaveform .editor-empty-track-row {
  grid-template-columns: 150px minmax(0, 1fr) !important;
  column-gap: 0 !important;
}

/* A cue remains easy to select at Fit without its trim grips obscuring every
   word. The grips appear as soon as that cue is selected, hovered, or focused. */
#editorWaveform .editor-caption-chip {
  min-width: 28px !important;
  cursor: grab !important;
}

#editorWaveform .editor-caption-chip:active {
  cursor: grabbing !important;
}

#editorWaveform .editor-caption-chip .editor-caption-handle {
  width: 7px !important;
  opacity: 0 !important;
  transition: opacity 120ms ease !important;
}

#editorWaveform .editor-caption-chip:hover .editor-caption-handle,
#editorWaveform .editor-caption-chip.active .editor-caption-handle,
#editorWaveform .editor-caption-chip:focus-visible .editor-caption-handle {
  opacity: 1 !important;
}

#editorWaveform .editor-caption-chip .editor-caption-label {
  min-width: 0 !important;
  padding: 0 5px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Remove the legacy blue selected-track wash on audio rows. Clip selection
   stays orange; the track rail itself should feel neutral/orange, never blue. */
body #editorView #editorWaveform .editor-track-row-audio:has(.editor-audio-bed-selectable.active),
body #editorView #editorWaveform .editor-track-row-audio:has(.editor-selection-window-audio-base.active),
body #editorView #editorWaveform .editor-track-row:has(.editor-selection-window-audio-clip.active) {
  background: linear-gradient(90deg, rgba(255, 247, 237, .72), rgba(255, 255, 255, 0)) !important;
}

body #editorView #editorWaveform .editor-track-row-audio:has(.editor-audio-bed-selectable.active) > .editor-track-label,
body #editorView #editorWaveform .editor-track-row-audio:has(.editor-selection-window-audio-base.active) > .editor-track-label,
body #editorView #editorWaveform .editor-track-row:has(.editor-selection-window-audio-clip.active) > .editor-track-label {
  color: #9a3412 !important;
  background: #fff7ed !important;
  box-shadow: inset 3px 0 0 var(--orange-accent), 1px 0 0 rgba(249, 115, 22, .18) !important;
}

/* Streamer platform menu should stay white, not inherit CTA orange. */
#collectionModal #favoritePlatformMenu.auth-inline-select-menu > button {
  color: #111827 !important;
  border-color: #f1ddd0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

#collectionModal #favoritePlatformMenu.auth-inline-select-menu > button:hover,
#collectionModal #favoritePlatformMenu.auth-inline-select-menu > button:focus-visible,
#collectionModal #favoritePlatformMenu.auth-inline-select-menu > button[aria-selected="true"] {
  color: #c2410c !important;
  border-color: #ffb077 !important;
  background: #fffaf7 !important;
  box-shadow: inset 3px 0 0 var(--orange-accent) !important;
}

/* Requested clip matches: make the found title unmistakably orange. */
.clip-title-text.clip-title-text-requested {
  display: inline-block;
  color: var(--orange-accent) !important;
  background: linear-gradient(135deg, var(--orange-accent-2), var(--orange-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 26px rgba(255, 105, 0, .16);
}
/* Modern orange calendar picker for clip date filters. */
.clip-date-range input[data-shortly-native-type="date"] {
  border-color: rgba(255, 105, 0, .18) !important;
  background: linear-gradient(180deg, #fff, #fffaf5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.clip-date-range input[data-shortly-native-type="date"]:focus {
  outline: none !important;
  border-color: rgba(255, 105, 0, .68) !important;
  box-shadow: 0 0 0 4px rgba(255, 105, 0, .12), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.shortly-date-picker {
  position: fixed;
  z-index: 9999;
  width: 260px;
  padding: 12px;
  border: 1px solid rgba(255, 105, 0, .16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 145, 0, .14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,245,.98));
  box-shadow: 0 22px 55px rgba(17, 24, 39, .16), 0 14px 30px rgba(255, 105, 0, .10);
  color: #111827;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
}

.shortly-date-picker[hidden] {
  display: none !important;
}

.shortly-date-picker-head,
.shortly-date-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shortly-date-picker-head {
  margin-bottom: 10px;
}

.shortly-date-picker-month,
.shortly-date-picker-nav button,
.shortly-date-picker-foot button,
.shortly-date-picker-day {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.shortly-date-picker-month {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  color: #111827;
  font-weight: 800;
  text-align: left;
}

.shortly-date-picker-nav {
  display: flex;
  gap: 6px;
}

.shortly-date-picker-nav button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 105, 0, .16);
  border-radius: 10px;
  background: #fff;
  color: #ff6900;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(255, 105, 0, .08);
}

.shortly-date-picker-weekdays,
.shortly-date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.shortly-date-picker-weekdays {
  margin-bottom: 5px;
  color: #8a94a6;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.shortly-date-picker-day,
.shortly-date-picker-blank {
  width: 30px;
  height: 30px;
}

.shortly-date-picker-day {
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #111827;
  font-size: 12px;
  font-weight: 750;
  transition: background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.shortly-date-picker-day:hover,
.shortly-date-picker-nav button:hover,
.shortly-date-picker-month:hover {
  background: rgba(255, 105, 0, .09);
  color: #f25500;
}

.shortly-date-picker-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(255, 105, 0, .42);
  color: #f25500;
}

.shortly-date-picker-day.is-selected {
  background: linear-gradient(135deg, #ff9d13, #ff5a00);
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 105, 0, .28);
}

.shortly-date-picker-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 105, 0, .12);
}

.shortly-date-picker-foot button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  color: #ff6900;
  font-size: 12px;
  font-weight: 850;
}

.shortly-date-picker-foot button:hover,
.shortly-date-picker-foot button:focus-visible {
  background: rgba(255, 105, 0, .10);
  outline: none;
}
/* Force Shortly UI chrome away from browser/system Segoe-style rendering. */
:root,
body,
button,
input,
textarea,
select,
.app-header,
.app-header *,
.app-sidebar,
.app-sidebar *,
.auth-view,
.auth-view *,
.create-view,
.create-view *,
.streamers-view,
.streamers-view *,
.clip-matcher-view,
.clip-matcher-view *,
.project-detail,
.project-detail *,
.clip-viewer,
.clip-viewer *,
.auth-modal,
.auth-modal *,
.feedback-modal,
.feedback-modal *,
.panel-kicker,
.filter-label,
.clip-sort-trigger,
.clip-sort-menu button,
.calendar-filter-button,
.hours-filter input,
.clip-date-range input,
.clip-date-range button,
.shortly-date-picker,
.shortly-date-picker * {
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-synthesis: none !important;
}

.panel-kicker,
.filter-label,
.streamer-clips-head p,
.stack-card-head .panel-kicker {
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-weight: 850 !important;
  letter-spacing: .115em !important;
}
/* Remove the old all-caps specimen-looking kicker treatment. */
.panel-kicker,
.filter-label,
.streamer-clips-head p,
.stack-card-head .panel-kicker,
.clip-matcher-hero .panel-kicker {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #7a8494 !important;
}

/*
 * Preset cards are type specimens, so they must not inherit the broad
 * SF Pro UI lock above. Keep these selectors after that lock and more
 * specific than `.create-view *`.
 */
html body .preset-chip.preset-chip-viral {
  font-family: "Bebas Neue", "SF Pro Display", sans-serif !important;
}

html body .preset-chip.preset-chip-arial {
  font-family: "Arial Uploaded", "Arial Narrow", Arial, sans-serif !important;
}

html body .preset-chip.preset-chip-burbank {
  font-family: "Burbank Big Black", "Bebas Neue", Impact, sans-serif !important;
}

html body .preset-chip.preset-chip-komika {
  font-family: "Komika Axis", "Bebas Neue", Impact, sans-serif !important;
}

html body .preset-chip.preset-chip-tiktok,
html body .preset-chip.preset-chip-tiktok-whitebox,
html body .preset-chip.preset-chip-tiktok-whitebox > span {
  font-family: "TikTok Display", "SF Pro Display", sans-serif !important;
}

html body .preset-chip.preset-chip-tommy {
  font-family: "Made Tommy", "SF Pro Display", sans-serif !important;
}

html body .preset-chip.preset-chip-lemon {
  font-family: "Lemon Milk", "Bebas Neue", sans-serif !important;
}

html body .preset-chip.preset-chip-coolvetica {
  font-family: "Coolvetica", "SF Pro Display", sans-serif !important;
}