/* AI Video Studio — restrained black/graphite palette. Release: 20260731-video-mono-v2 */

body[data-page="video-editing-station"] {
  --video-mono-bg: #020304;
  --video-mono-panel: #090b0f;
  --video-mono-panel-raised: #11151a;
  --video-mono-control: #0c0f13;
  --video-mono-text: #f3f5f8;
  --video-mono-muted: #aab2bd;
  --video-mono-border: rgba(205, 214, 224, 0.14);
  --video-mono-border-strong: rgba(205, 214, 224, 0.3);
  --video-mono-accent: #647b96;
  --video-mono-accent-strong: #8da0b6;
  --video-mono-accent-soft: rgba(100, 123, 150, 0.17);
  --video-mono-ready: #55c990;
  color-scheme: dark;
  background:
    radial-gradient(circle at 50% -14%, rgba(133, 151, 172, 0.07), transparent 34%),
    linear-gradient(180deg, #010203 0%, #050608 52%, #080a0d 100%) !important;
  color: var(--video-mono-text) !important;
}

body[data-page="video-editing-station"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px);
  background-size: 100% 5px;
  opacity: 0.36;
}

html body[data-page="video-editing-station"] .mst-tool-brand-pill {
  --mst-tool-pill-cyan: #8495a8;
  --mst-tool-pill-cyan-soft: rgba(132, 149, 168, 0.18);
  --mst-tool-pill-bg: #07090c;
  --mst-tool-pill-subtitle: #aeb8c4;
  border-color: rgba(168, 181, 196, 0.5) !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(159, 176, 196, 0.09), transparent 29%),
    linear-gradient(90deg, #12161b 0%, #090b0e 54%, #030405 100%) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html body[data-page="video-editing-station"] .mst-tool-brand-pill__mark {
  border-color: rgba(169, 182, 197, 0.56) !important;
  background: #030405 !important;
  box-shadow: 0 0 0 3px rgba(5, 7, 10, 0.84), 0 0 16px rgba(125, 145, 168, 0.12) !important;
}

html body[data-page="video-editing-station"] :is(.video-studio-shell, .video-studio-topbar) {
  border-color: var(--video-mono-border) !important;
  background:
    linear-gradient(90deg, transparent, rgba(232, 236, 241, 0.07), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(18, 21, 26, 0.985), rgba(4, 6, 8, 0.995)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 54px rgba(0, 0, 0, 0.42) !important;
}

html body[data-page="video-editing-station"] .video-studio-profile-strip {
  border-color: rgba(91, 170, 135, 0.52) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #1d463a 0%, #102820 56%, #07110e 100%) !important;
  color: #e6f4ed !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 18px rgba(50, 119, 91, 0.11) !important;
}

html body[data-page="video-editing-station"] .video-studio-profile-detail {
  color: #b8d8c9 !important;
}

html body[data-page="video-editing-station"] .video-studio-profile-primary,
html body[data-page="video-editing-station"] .video-studio-profile-credits {
  color: #eef8f3 !important;
}

html body[data-page="video-editing-station"] #heroStatusChip.hero-status-chip {
  border-color: rgba(177, 188, 201, 0.24) !important;
  background: linear-gradient(180deg, #15191e, #06080a) !important;
  background-image: linear-gradient(180deg, #15191e, #06080a) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html body[data-page="video-editing-station"] #heroStatusChip .service-dot {
  background: var(--video-mono-ready) !important;
  box-shadow: 0 0 0 3px rgba(85, 201, 144, 0.13), 0 0 10px rgba(85, 201, 144, 0.22) !important;
}

html body[data-page="video-editing-station"] #heroStatusChip :is(.hero-status-label, .hero-status-value) {
  color: #d9dee5 !important;
  text-decoration-color: #d9dee5 !important;
}

html body[data-page="video-editing-station"] :is(.video-studio-links .hero-guides-summary, #accountPanelToggleBtn.hero-account-toggle) {
  border-color: rgba(182, 193, 206, 0.2) !important;
  background: linear-gradient(180deg, #171b20, #07090c) !important;
  background-image: linear-gradient(180deg, #171b20, #07090c) !important;
  color: #edf0f4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html body[data-page="video-editing-station"][data-credit-wallet="video_pack"]
  #topVideoCreditPurchaseLink.video-studio-buy-pill,
html body[data-page="video-editing-station"] #topVideoCreditPurchaseLink.video-studio-buy-pill {
  border-color: rgba(166, 181, 198, 0.52) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #52677f 0%, #34475c 54%, #1d2a38 100%) !important;
  background-image:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #52677f 0%, #34475c 54%, #1d2a38 100%) !important;
  color: #f6f8fa !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px rgba(0, 0, 0, 0.3) !important;
}

body[data-page="video-editing-station"] :is(
  .advanced-video-shell,
  .live-trim-panel,
  .editor-preview-fold,
  .editor-stage-bar,
  .editor-control-dock,
  .collapsible,
  .timeline-panel,
  .timeline-track-block,
  .waveform-wrap,
  .trim-handle-card,
  .trim-summary-card
) {
  border-color: var(--video-mono-border) !important;
  background:
    linear-gradient(90deg, transparent, rgba(235, 239, 244, 0.045), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(15, 18, 22, 0.97), rgba(3, 5, 7, 0.992)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body[data-page="video-editing-station"] :is(.editor-stage-pill, .queued-effect-chip, .item, .live-trim-chip) {
  border-color: rgba(184, 195, 208, 0.18) !important;
  background: linear-gradient(180deg, #171b21, #080a0d) !important;
  color: #e8ecf1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body[data-page="video-editing-station"] :is(.video-output-framing-row, .editor-preview-output-dock) {
  border-color: var(--video-mono-border) !important;
  background: rgba(5, 7, 10, 0.72) !important;
}

body[data-page="video-editing-station"] :is(.select, .text-input, .textarea-input, .video-output-select-button) {
  border-color: rgba(184, 195, 208, 0.2) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #171b20, #07090c) !important;
  color: #eff2f6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body[data-page="video-editing-station"] .select option {
  background: #080a0d;
  color: #eff2f6;
}

body[data-page="video-editing-station"] :is(.select, .text-input, .textarea-input, .video-output-select-button):focus {
  border-color: rgba(151, 168, 187, 0.66) !important;
  box-shadow: 0 0 0 3px rgba(100, 123, 150, 0.12) !important;
}

body[data-page="video-editing-station"] :is(.primary.prominent, .button-link.primary, .editor-stage-action.is-primary) {
  border-color: rgba(166, 181, 198, 0.48) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #4e6278 0%, #304257 56%, #182431 100%) !important;
  color: #f5f7fa !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 22px rgba(0, 0, 0, 0.32) !important;
}

body[data-page="video-editing-station"] :is(.secondary, .button-link.secondary, .editor-stage-action) {
  border-color: rgba(186, 197, 210, 0.17) !important;
  background: linear-gradient(180deg, #181c22, #07090c) !important;
  color: #d7dde5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body[data-page="video-editing-station"] :is(.local-video-shell, .local-video-empty-core) {
  border-color: rgba(143, 161, 182, 0.32) !important;
  background:
    radial-gradient(circle at center, rgba(100, 123, 150, 0.045), transparent 48%),
    linear-gradient(145deg, #10141a, #030405) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.38) !important;
}

body[data-page="video-editing-station"] .local-video-empty {
  border-color: rgba(174, 186, 200, 0.22) !important;
  background: linear-gradient(180deg, #05070a, #010203) !important;
}

body[data-page="video-editing-station"] .queued-effects-preview {
  border-color: rgba(183, 194, 207, 0.16) !important;
  background: linear-gradient(180deg, #11151a, #05070a) !important;
  color: #dce2e9 !important;
}

body[data-page="video-editing-station"] .queued-effects-status {
  border-color: rgba(85, 201, 144, 0.25) !important;
  background: rgba(85, 201, 144, 0.1) !important;
  color: #ccebdc !important;
}

body[data-page="video-editing-station"] #videoQueuedEffectsDetailsSummary {
  border-color: rgba(182, 194, 208, 0.2) !important;
  background: linear-gradient(180deg, #1c222a, #0a0d11) !important;
  color: #e7ebf0 !important;
}

body[data-page="video-editing-station"] .editor-option-btn {
  position: relative;
  overflow: hidden;
  border-color: rgba(187, 198, 211, 0.15) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #171b20, #06080b) !important;
  color: #d7dde5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body[data-page="video-editing-station"] .editor-option-btn.is-active {
  border-color: rgba(151, 169, 189, 0.52) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #242c35, #0a0d11) !important;
  color: #f4f6f8 !important;
  box-shadow: inset 3px 0 0 var(--video-mono-accent-strong), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-page="video-editing-station"] :is(
  .video-encoding-group-bar,
  .video-look-group-bar,
  .video-trim-audio-group-bar,
  .video-encoding-panel,
  .video-look-panel,
  .video-trim-audio-panel,
  .video-encoding-control-card,
  .video-look-control-card,
  .video-trim-audio-control-card
) {
  border-color: rgba(184, 195, 208, 0.13) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(119, 138, 160, 0.035), transparent 36%),
    linear-gradient(180deg, #0b0e12, #020304) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022) !important;
}

body[data-page="video-editing-station"] :is(
  .inspector-panel-head,
  .video-encoding-panel-head,
  .video-look-panel-head,
  .video-trim-audio-panel-head
) {
  border-color: rgba(178, 190, 204, 0.17) !important;
  background:
    linear-gradient(90deg, var(--video-mono-accent-soft), transparent 58%),
    linear-gradient(180deg, #151a20, #07090c) !important;
  box-shadow: inset 3px 0 0 rgba(141, 160, 182, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body[data-page="video-editing-station"] :is(
  .video-encoding-group-tab,
  .video-look-group-tab,
  .video-trim-audio-group-tab,
  .video-encoding-group-tab-badge,
  .video-look-group-tab-badge,
  .video-trim-audio-group-tab-badge,
  .video-encoding-panel-badge,
  .video-look-panel-badge,
  .video-trim-audio-panel-badge
) {
  border-color: rgba(184, 195, 208, 0.16) !important;
  background: linear-gradient(180deg, #15191e, #06080a) !important;
  color: #cfd6df !important;
}

body[data-page="video-editing-station"] :is(
  .video-encoding-group-tab.is-active,
  .video-look-group-tab.is-active,
  .video-trim-audio-group-tab.is-active
) {
  border-color: rgba(151, 169, 189, 0.48) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #27313b, #0a0d11) !important;
  color: #f3f5f8 !important;
  box-shadow: inset 0 -2px 0 var(--video-mono-accent-strong), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-page="video-editing-station"] .editor-lower-option-btn {
  border-color: rgba(167, 181, 197, 0.22) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #171b21, #06080a) !important;
  color: #d5dbe3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body[data-page="video-editing-station"] .editor-lower-option-btn.is-active {
  border-color: rgba(166, 183, 202, 0.54) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #44576d, #1d2b3b) !important;
  color: #f7f9fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

body[data-page="video-editing-station"] .waveform-canvas {
  border-color: rgba(163, 178, 195, 0.18) !important;
  background: rgba(5, 8, 13, 0.78) !important;
}

body[data-page="video-editing-station"] :is(.field-label, .label, .video-encoding-panel-copy, .video-look-panel-copy, .video-trim-audio-panel-copy) {
  color: #b6bec8 !important;
}

body[data-page="video-editing-station"] * {
  scrollbar-color: rgba(138, 154, 172, 0.55) rgba(255, 255, 255, 0.03);
}

body[data-page="video-editing-station"] *::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #7f91a5, #3f5063);
}

/* Beat the legacy inline studio palette without changing its behavior or layout. */
html body[data-page="video-editing-station"] #videoWorkspace #videoStudioProfileLine.video-studio-profile-strip {
  border-color: rgba(91, 170, 135, 0.52) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #1d463a 0%, #102820 56%, #07110e 100%) !important;
  color: #e6f4ed !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 18px rgba(50, 119, 91, 0.11) !important;
}

html body[data-page="video-editing-station"][data-credit-wallet] #videoWorkspace #topVideoCreditPurchaseLink.video-studio-buy-pill:link,
html body[data-page="video-editing-station"][data-credit-wallet] #videoWorkspace #topVideoCreditPurchaseLink.video-studio-buy-pill:visited {
  border: 1px solid rgba(86, 190, 145, 0.62) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #31765d 0%, #1d4b3b 56%, #0c2119 100%) !important;
  background-image:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #31765d 0%, #1d4b3b 56%, #0c2119 100%) !important;
  color: #f6f8fa !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 20px rgba(22, 79, 58, 0.2) !important;
}

html body[data-page="video-editing-station"][data-credit-wallet] #videoWorkspace #topVideoCreditPurchaseLink.video-studio-buy-pill:is(:hover, :focus-visible) {
  border-color: rgba(117, 215, 173, 0.74) !important;
  background: linear-gradient(180deg, #438e71, #265e49) !important;
  background-image: linear-gradient(180deg, #438e71, #265e49) !important;
}

html body[data-page="video-editing-station"] #videoWorkspace :is(
  .hero-guides-summary,
  .hero-account-toggle,
  .select,
  .text-input,
  .textarea-input,
  .video-output-select-button
) {
  border-color: rgba(184, 195, 208, 0.2) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #171b20, #07090c) !important;
  background-image:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #171b20, #07090c) !important;
  color: #eff2f6 !important;
}

html body[data-page="video-editing-station"] #videoWorkspace :is(
  .hero-guides-summary,
  .hero-account-toggle,
  .select,
  .text-input,
  .video-output-select-button
):hover {
  border-color: rgba(191, 202, 214, 0.36) !important;
  background: linear-gradient(180deg, #222830, #0b0e12) !important;
  background-image: linear-gradient(180deg, #222830, #0b0e12) !important;
}

html body[data-page="video-editing-station"] #videoWorkspace :is(
  .primary.prominent,
  .button-link.primary,
  .editor-stage-action.is-primary
) {
  border-color: rgba(169, 181, 194, 0.44) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #465361 0%, #252d36 56%, #11161c 100%) !important;
  color: #f5f7fa !important;
}

html body[data-page="video-editing-station"] #videoWorkspace .editor-option-btn {
  border-color: rgba(187, 198, 211, 0.15) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #171b20, #06080b) !important;
  color: #d7dde5 !important;
}

html body[data-page="video-editing-station"] #videoWorkspace .editor-option-btn.is-active {
  border-color: rgba(151, 169, 189, 0.52) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #242c35, #0a0d11) !important;
  box-shadow: inset 3px 0 0 var(--video-mono-accent-strong), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html body[data-page="video-editing-station"] #videoWorkspace :is(
  .video-encoding-group-tab,
  .video-look-group-tab,
  .video-trim-audio-group-tab
) {
  border-color: rgba(184, 195, 208, 0.16) !important;
  background: linear-gradient(180deg, #15191e, #06080a) !important;
  color: #cfd6df !important;
}

html body[data-page="video-editing-station"] #videoWorkspace :is(
  .video-encoding-group-tab.is-active,
  .video-look-group-tab.is-active,
  .video-trim-audio-group-tab.is-active
) {
  border-color: rgba(151, 169, 189, 0.48) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #303b47, #101419) !important;
  color: #f3f5f8 !important;
  box-shadow: inset 0 -2px 0 var(--video-mono-accent-strong), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html body[data-page="video-editing-station"] #videoWorkspace .editor-rail-lower .editor-lower-option-btn.editor-rail-link,
html body[data-page="video-editing-station"] #videoWorkspace .mini-button {
  border-color: rgba(167, 181, 197, 0.22) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #171b21, #06080a) !important;
  color: #d5dbe3 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html body[data-page="video-editing-station"] #videoWorkspace .editor-rail-lower .editor-lower-option-btn.editor-rail-link.is-active,
html body[data-page="video-editing-station"] #videoWorkspace .editor-rail-lower .editor-lower-option-btn.editor-rail-link[aria-pressed="true"],
html body[data-page="video-editing-station"] #videoWorkspace .mini-button:hover {
  border-color: rgba(166, 183, 202, 0.46) !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #303b47, #151b22) !important;
  color: #f7f9fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

html body[data-page="video-editing-station"] #videoWorkspace :is(
  .editor-bottom-dock,
  .timeline-panel,
  .waveform-wrap,
  .timeline-track-block
) {
  border-color: rgba(175, 188, 203, 0.16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(145, 160, 178, 0.035), transparent 52%),
    linear-gradient(180deg, #0d1014, #030405) !important;
}

@media (max-width: 760px) {
  body[data-page="video-editing-station"] .editor-option-btn.is-active {
    box-shadow: inset 0 -2px 0 var(--video-mono-accent-strong), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }
}