/* Video Cut Studio v23.6 — Dark theme.
   Load AFTER all existing CSS. UI only: never recolor media or text on video. */
:root {
  color-scheme: dark;
  --brown: #202020; --dark: #161616; --gold: #00c4cc;
  --cream: #262626; --line: #444; --ink: #efefef;
  --dt-bg: #181818; --dt-panel: #262626; --dt-raised: #333;
  --dt-border: #444; --dt-text: #efefef; --dt-muted: #b7b7b7;
  --dt-accent: #00c4cc; --dt-hover: #3c3c3c;
}
body { background: var(--dt-bg); color: var(--dt-text); }
body ::selection { background: #006e73; color: #fff; }
button, input, select, textarea { accent-color: var(--dt-accent); }
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--dt-accent) !important; outline-offset: 3px;
}
button:disabled { opacity: .42; cursor: not-allowed; }
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
select, textarea {
  background: #1d1d1d !important; color: #eee !important;
  border: 1px solid #505050 !important; border-radius: 6px;
}
input::placeholder, textarea::placeholder { color: #999; opacity: 1; }
input[type=color] { background: #303030; border: 1px solid #666; border-radius: 5px; }
option { background: #242424; color: #eee; }
.top { background: #1b1b1b; color: #f7f7f7; box-shadow: none; border-bottom: 1px solid #3c3c3c; }
.brand p { color: #b7b7b7; }
.studio-version { background: #363636 !important; color: #58e0e4 !important; border-color: #505050 !important; }
.head-actions button, .topbtn {
  background: #333; color: #eee; border-color: #505050; border-radius: 7px;
}
.sidebar { background: #202020; border-right: 1px solid #3c3c3c; }
.sidebar .side { color: #ddd !important; border-radius: 7px; }
.sidebar .side.active, .sidebar .side:hover {
  background: #343434; color: #30d6dc !important; box-shadow: none;
}
.workspace { background: #181818; }
.panel, .advanced, .multi-title-panel {
  background: #262626; color: #eee; border-color: #3f3f3f; box-shadow: none;
  border-radius: 8px;
}
.panel h2, .timeline-panel h2 {
  background: #303030; color: #eee; border: 1px solid #4b4b4b;
  border-radius: 7px; box-shadow: none;
}
.panel h2 em, .timeline-panel h2 em {
  background: #00c4cc; color: #102123; border-color: #00a0a6; box-shadow: none;
}
.btn.orange, .orange, .export-btn, .v18-file-btn,
#propStickers .btn, .sticker-library-tools .btn {
  background: #00bdc5 !important; color: #092326 !important; border-color: #00aeb6 !important;
}
.v22-image-btn, .image-btn { background: #35464a !important; color: #e8fcff !important; }
.purple, .blue { background: #35434d; color: #f1f6ff; }
.green, .state { background: #265440; color: #e3ffed; }
.red, .state.dropped { background: #793535; color: #fff; }
.media-tabs button, .prop-tabs button {
  background: #303030; color: #cfcfcf; border-radius: 5px 5px 0 0;
}
.media-tabs button.active, .prop-tabs button.active {
  background: #353535; color: #2bd6dc; border-bottom-color: #00c4cc;
}
.media-card { color: #ddd; }
.media-card img { background: #151515; }
.media-card:hover, .library-item.library-picked { border-color: #00c4cc !important; }
.media-empty, .mini-help, .position-help, .status-panel, .status-line,
.timeline-bottom, .v7-instructions, .v17-retention, .v17-expiry,
.sticker-library-note, #stickerResults { color: #b7b7b7 !important; }
.library-insert-bar { background: #202020; border-color: #4b4b4b; }
.library-insert-bar button { background: #363636; color: #eee; border-color: #555; }
.library-insert-bar button[id^=libraryInsert],
.library-insert-bar button[aria-pressed=true] { background: #00676e; color: #edffff; border-color: #00a4ac; }
.library-insert-bar small { color: #bbb; }
.library-pick-label { background: #262626; color: #fff; }
.screen { background: #080808; border-radius: 7px; }
.preview-hint { background: #151515d9; color: #ddd; }
.player-bottom { background: #222; color: #ddd; }
.play-row button, .transport button { color: #ddd; }
.transport .play { background: #00c4cc; color: #102526; }
.selected-line { background: #303030; color: #eee; }
.audio-drop { background: #303030; border-color: #686868; color: #60dce0; }
.audio-file { background: #202020; color: #ddd; }
.tiny, .advanced-inner button, .segment-actions button { background: #393939; color: #eee; }
.segment { background: #24423b; color: #e7fff8; }
.segment.drop { background: #543030; color: #ffe9e9; }
.control-label strong, .subheading { color: #ddd; }
.timeline-panel { background: #222; color: #eee; border: 1px solid #3c3c3c; border-radius: 8px; }
.tools { background: #2b2b2b; }
.tools button, .tool-upload { background: #3a3a3a; color: #eee; }
.tools button:hover, .tool-upload:hover { background: #505050; }
.ruler, #ruler .tl-ruler-tick { color: #b8b8b8; }
.track-label { color: #ccc; }
.clip { background: #12494e; border-color: #267780; border-radius: 5px; }
.clip.selected, .timeline-panel #timeline>.clip.selected {
  border-color: #f3f3f3 !important; box-shadow: 0 0 0 1px #00c4cc !important;
}
.clip.drop { border-color: #ae5555; }
.clip .clip-caption { color: #fff; }
.insert-plus, .transition-chip {
  background: #354345 !important; color: #78e9ed !important; border-color: #5b9196 !important;
}
.insert-end { background: #303030; color: #b4eff1; border-color: #777; }
.audio-lane { background: #173d4e; color: #def7ff; border-color: #39748c; }
.wave { background: repeating-linear-gradient(90deg,transparent 0 3px,#12cbd9 3px 5px,transparent 5px 8px); }
.tl-editor-tools, #tlOperationStatus, #tlSelectedTarget { color: #bbb; }
.tl-editor-tools button { background: #383838; color: #eee; border-color: #555; }
.tl-editor-tools button:hover { background: #4a4a4a; }
.tl-cursor-readout { background: #181818; border-color: #555; color: #bbb; }
.tl-cursor-readout b { color: #39d8de; }
#tlPlayhead { background: #fff; box-shadow: 0 0 0 1px #0008; }
#tlPlayheadHandle { background: #555; border-color: #fff; color: #fff; }
#tlHeadLabel { background: #181818; color: #41d9de; }
.timeline-panel #timeline .tl-video-trim, .tl-audio-trim {
  background: #e9eeee !important; border-color: #fff !important; color: #202b2c !important;
}
.tl-audio-controls { background: #29383f; border-color: #43616d; color: #ddd; }
.tl-independent-track { background: #1d292e; border-color: #454545; }
.tl-track-label { background: #272727; color: #ddd; }
.tl-audio-region { background: #174c65; color: #effaff; border-color: #337a95; }
.tl-audio-region.selected { border-color: #fff; box-shadow: 0 0 0 1px #00c4cc; }
.tl-audio-caption { background: #133240bb; color: #fff; }
.tl-audio-empty, .tl-source-details>summary { color: #a9c5cf; }
.v18-audio-panel { background: #262626 !important; border-color: #454545 !important; color: #eee !important; box-shadow: none !important; }
.v18-audio-head, .v18-audio-controls, .v18-audio-controls label { color: #ddd !important; }
#v19AudioTracks .v19-global { background: #213c40; color: #e8ffff; border-color: #43656a; }
#v19AudioTracks .v19-global>small { color: #c8dddd; }
.bg-wave-editor { background: #21282b; color: #ddd; border-color: #45555c; }
.bg-wave-heading, .bg-wave-heading span, .bg-wave-ruler,
.bg-wave-editor p, .bg-wave-controls strong { color: #c2d0d5; }
.bg-wave-body { background: #111c22; }
.bg-wave-selection { background: #00c4cc17; border-color: #00c4cc; }
.bg-wave-handle { background: #00c4cc; color: #102426; border-color: #78edf1; }
.bg-wave-playhead { background: #fff; }
#v19AudioTracks .bg-wave-controls button { background: #3a4246; color: #eee; border-color: #66747b; }
.export-row select { background: #1d1d1d; color: #eee; border-color: #555; }
.status-panel a, #batchResults a { color: #55dbe1; }
.status-panel #progress { background: #414141; }
.status-panel #progressBar { background: #00c4cc; }
.v15-ring { color: #eee; }
.v15-caption { color: #ccc !important; }
.saved-exports, .export-item, .v14-library, .v14-export-slot {
  background: #262626 !important; border-color: #484848 !important; color: #eee !important;
}
.v17-pager button { background: #393939; color: #eee; border-color: #555; }
.v17-delete { background: #773434; color: #fff; }
/* Dialogs and template browsing. Do not recolor the template artwork itself. */
dialog, #stickerDialog, .creative-fx {
  background: #252525 !important; color: #eee !important; border: 1px solid #555 !important;
  border-radius: 10px; box-shadow: 0 18px 65px #0009;
}
dialog::backdrop, #stickerDialog::backdrop { background: #000b; }
.fx-header, #stickerDialog .fx-header, .modal-head {
  background: #303030 !important; color: #f3f3f3 !important; border-color: #444 !important;
}
#stickerDialog .fx-header small { color: #bbb; }
.fx-header button, .modal-head button { background: #454545; color: #fff; border-color: #666; }
#stickerDialog button[data-category], #stickerDialog button[data-tab],
#stickerDialog .template-tabs button { background: #3a3a3a; color: #ddd; }
#stickerDialog button.active { background: #075f64; color: #e6ffff; border-color: #00c4cc; }
#stickerGrid button, .creative-fx .fx-grid button {
  background: #353535; color: #ddd; border-color: #505050;
}
#stickerGrid button:hover, .creative-fx .fx-grid button:hover,
.creative-fx .fx-grid button.active { border-color: #00c4cc; background: #3d4949; }
#stickerGrid small, .creative-fx .fx-note, .creative-fx #fxResult,
.creative-fx #fxEmpty, .creative-all { color: #bdbdbd; }
.creative-fx .fx-settings, .creative-fx .fx-actions { background: #292929; color: #ddd; border-color: #444; }
.creative-fx .fx-actions button, #textEffectReset { background: #414141; color: #eee; border-color: #666; }
.creative-fx #fxSave { background: #00bdc5; color: #092326; }
.sticker-row, .title-layer-row { background: #303030; color: #ddd; border-color: #555; }
.sticker-row.active, .title-layer-row.active { background: #204649; border-color: #00c4cc; color: #efffff; }
#directTextEditor, .native-title-tools {
  background: #252525; color: #eee; border-color: #606060; box-shadow: 0 8px 28px #0009;
}
.direct-text-head { background: #333; color: #eee; }
#directTextEditor button, .native-title-tools button { background: #3f3f3f; color: #eee; }
/* Selection borders only; preserve user-selected overlay colors and transforms. */
#stickerStage .sticker-object.chosen { outline-color: #00e0e6; }
.direct-handle, .direct-rotate, .native-title-resize { background: #f0ffff; color: #183134; border-color: #00c4cc; }
/* Scrollbars, without changing layout or interaction. */
* { scrollbar-color: #626262 #252525; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #252525; }
::-webkit-scrollbar-thumb { background: #626262; border: 2px solid #252525; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #858585; }
/* Shared filter tabs used by the transition and sticker dialogs. */
.fx-filterbar button { background: #3a3a3a; color: #ddd; }
.fx-filterbar button.active { background: #075f64; color: #e6ffff; }
.fx-between, .editor-guide, .title-layer-controls { background: #303030; color: #ddd; border-color: #505050; }
.editor-guide span { background: #333; color: #bbb; border-color: #555; }
.v18-audio-head span, .v22-logo-hint { color: #bbb; }
.v18-audio-controls button { background: #383838; color: #eee; border-color: #5c5c5c; }
.multi-title-head { color: #eee; }