:root {
  --sf-bg: #080706;
  --sf-panel: #12100f;
  --sf-panel-raised: #1b1714;
  --sf-panel-soft: #241d19;
  --sf-ink: #f6f1ea;
  --sf-muted: #b5aaa0;
  --sf-line: #3c3028;
  --sf-crimson: #a90000;
  --sf-red: #bd1010;
  --sf-gold: #d2a15e;
  --sf-gold-light: #e1bd89;
  --sf-copper: #b76445;
}

html { background: var(--sf-bg); }
body {
  background:
    radial-gradient(circle at 76% -10%, rgba(169, 0, 0, .15), transparent 30rem),
    radial-gradient(circle at 8% 45%, rgba(210, 161, 94, .055), transparent 28rem),
    var(--sf-bg) !important;
  color: var(--sf-ink) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

.bg-slate-950 { background-color: var(--sf-bg) !important; }
.bg-slate-900 { background-color: var(--sf-panel) !important; }
.bg-slate-800 { background-color: var(--sf-panel-raised) !important; }
.bg-slate-700 { background-color: var(--sf-panel-soft) !important; }
.from-slate-800 {
  --tw-gradient-from: var(--sf-panel-raised) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(27 23 20 / 0) var(--tw-gradient-to-position) !important;
}
.from-slate-900 {
  --tw-gradient-from: var(--sf-panel) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(18 16 15 / 0) var(--tw-gradient-to-position) !important;
}
.to-slate-950 { --tw-gradient-to: var(--sf-bg) var(--tw-gradient-to-position) !important; }
.to-slate-900 { --tw-gradient-to: var(--sf-panel) var(--tw-gradient-to-position) !important; }
.bg-slate-950\/50, .bg-slate-950\/40, .bg-slate-950\/30, .bg-slate-950\/20 { background-color: rgba(8, 7, 6, .72) !important; }
.bg-slate-900\/80, .bg-slate-900\/70, .bg-slate-900\/60, .bg-slate-900\/50 { background-color: rgba(18, 16, 15, .84) !important; }
.bg-slate-800\/80, .bg-slate-800\/70, .bg-slate-800\/60, .bg-slate-800\/50 { background-color: rgba(27, 23, 20, .82) !important; }

.border-slate-900, .border-slate-800, .border-slate-700, .border-slate-600,
[class*="border-slate-800/"], [class*="border-slate-700/"] { border-color: var(--sf-line) !important; }
.text-white { color: var(--sf-ink) !important; }
.text-slate-200 { color: #e8dfd6 !important; }
.text-slate-300 { color: #d2c7bc !important; }
.text-slate-400 { color: var(--sf-muted) !important; }
.text-slate-500 { color: #8f8278 !important; }

[class*="text-sky-"] { color: var(--sf-gold) !important; }
[class*="text-violet-"] { color: var(--sf-gold-light) !important; }
[class*="text-fuchsia-"] { color: #d48668 !important; }
[class*="text-pink-"] { color: #d9b37a !important; }
[class*="text-blue-"] { color: var(--sf-gold) !important; }

[class*="border-sky-"] { border-color: rgba(210, 161, 94, .62) !important; }
[class*="border-violet-"] { border-color: rgba(183, 100, 69, .62) !important; }
[class*="border-fuchsia-"] { border-color: rgba(169, 0, 0, .62) !important; }
[class*="border-pink-"] { border-color: rgba(210, 161, 94, .55) !important; }
[class*="border-blue-"] { border-color: rgba(210, 161, 94, .55) !important; }

[class*="bg-sky-5"], [class*="bg-sky-6"], [class*="bg-blue-5"], [class*="bg-blue-6"],
[class*="bg-violet-5"], [class*="bg-violet-6"], [class*="bg-fuchsia-5"], [class*="bg-fuchsia-6"] {
  background-color: var(--sf-crimson) !important;
  background-image: linear-gradient(115deg, #850000, var(--sf-red)) !important;
}
[class*="bg-sky-9"], [class*="bg-sky-8"], [class*="bg-violet-9"], [class*="bg-fuchsia-9"],
[class*="bg-blue-9"] { background-color: rgba(99, 18, 12, .46) !important; }

[class*="focus:border-sky-"]:focus, [class*="focus:border-violet-"]:focus,
[class*="focus:border-fuchsia-"]:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--sf-crimson) !important;
  box-shadow: 0 0 0 3px rgba(169, 0, 0, .14) !important;
}

[class*="hover:bg-sky-"]:hover, [class*="hover:bg-blue-"]:hover,
[class*="hover:bg-violet-"]:hover, [class*="hover:bg-fuchsia-"]:hover {
  background-color: #d21a1a !important;
  background-image: linear-gradient(115deg, #980000, #d21a1a) !important;
}
[class*="hover:text-sky-"]:hover, [class*="hover:text-violet-"]:hover,
[class*="hover:text-fuchsia-"]:hover { color: var(--sf-gold-light) !important; }

/* Consistent native-control reset for Chromium, Firefox and WebKit (desktop/mobile). */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button, a { transition-duration: 180ms; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(210, 161, 94, .7);
  outline-offset: 2px;
}
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed;
}

/* Promo actions must look and behave like controls in every browser and theme. */
.promo-action {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  width: auto !important;
  min-height: 2.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .5rem .78rem !important;
  border: 1px solid #6b5749 !important;
  border-radius: .5rem !important;
  background: #241d19 !important;
  color: #f6f1ea !important;
  font-size: .72rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.promo-action:hover { background: #352a24 !important; border-color: #d2a15e !important; }
.promo-action:disabled { opacity: .48 !important; cursor: not-allowed !important; }
.promo-action-publish {
  border-color: #22a956 !important;
  background: #17803d !important;
  color: #fff !important;
}
.promo-action-publish:hover { background: #1f9a4b !important; border-color: #55c97d !important; }
.promo-action-delete {
  margin-left: auto !important;
  border-color: #a90000 !important;
  background: #a90000 !important;
  color: #fff !important;
}
.promo-action-delete:hover { background: #c51414 !important; border-color: #c51414 !important; }
@media (max-width: 640px) {
  .promo-action { min-height: 2.75rem !important; }
  .promo-action-delete { margin-left: 0 !important; }
}
button[class*="bg-sky-"], a[class*="bg-sky-"], button[class*="bg-violet-"],
a[class*="bg-violet-"], button[class*="bg-fuchsia-"], a[class*="bg-fuchsia-"] {
  box-shadow: 0 10px 28px rgba(169, 0, 0, .2) !important;
}

::selection { background: rgba(169, 0, 0, .75); color: #fff; }
nav img[alt*="S7venGen"] {
  filter: none;
  display: block;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--sf-bg); }
::-webkit-scrollbar-thumb { background: #49362a; border: 3px solid var(--sf-bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--sf-copper); }

/* Per-workspace bright theme */
html[data-theme="bright"] {
  --sf-bg: #f6f0e7;
  --sf-panel: #ffffff;
  --sf-panel-raised: #fffaf3;
  --sf-panel-soft: #efe4d6;
  --sf-ink: #241a15;
  --sf-muted: #6f6259;
  --sf-line: #d8c7b5;
  --sf-crimson: #a90000;
  --sf-red: #bd1010;
  --sf-gold: #8b570f;
  --sf-gold-light: #7d452c;
  --sf-copper: #985038;
}

html[data-theme="bright"] body {
  background:
    radial-gradient(circle at 76% -10%, rgba(169, 0, 0, .08), transparent 30rem),
    radial-gradient(circle at 8% 45%, rgba(210, 161, 94, .10), transparent 28rem),
    var(--sf-bg) !important;
}
html[data-theme="bright"] body::before { opacity: .07; }
html[data-theme="bright"] .bg-slate-950\/50,
html[data-theme="bright"] .bg-slate-950\/40,
html[data-theme="bright"] .bg-slate-950\/30,
html[data-theme="bright"] .bg-slate-950\/20 { background-color: rgba(246, 240, 231, .88) !important; }
html[data-theme="bright"] .bg-slate-900\/80,
html[data-theme="bright"] .bg-slate-900\/70,
html[data-theme="bright"] .bg-slate-900\/60,
html[data-theme="bright"] .bg-slate-900\/50 { background-color: rgba(255, 255, 255, .90) !important; }
html[data-theme="bright"] .bg-slate-800\/80,
html[data-theme="bright"] .bg-slate-800\/70,
html[data-theme="bright"] .bg-slate-800\/60,
html[data-theme="bright"] .bg-slate-800\/50 { background-color: rgba(255, 250, 243, .92) !important; }
html[data-theme="bright"] [class*="bg-slate-950/"] { background-color: rgba(246, 240, 231, .92) !important; }
html[data-theme="bright"] [class*="bg-slate-900/"] { background-color: rgba(255, 255, 255, .94) !important; }
html[data-theme="bright"] [class*="bg-slate-800/"] { background-color: rgba(255, 250, 243, .96) !important; }
html[data-theme="bright"] [class*="bg-slate-700/"] { background-color: rgba(239, 228, 214, .96) !important; }
html[data-theme="bright"] .text-white,
html[data-theme="bright"] .text-slate-100 { color: #241a15 !important; }
html[data-theme="bright"] .text-slate-200 { color: #3b2e27 !important; }
html[data-theme="bright"] .text-slate-300 { color: #54463e !important; }
html[data-theme="bright"] .text-slate-400 { color: #62544b !important; }
html[data-theme="bright"] .text-slate-500 { color: #716158 !important; }
html[data-theme="bright"] input,
html[data-theme="bright"] select,
html[data-theme="bright"] textarea { color: #241a15 !important; }
html[data-theme="bright"] [class*="hover:text-white"]:hover { color: #a90000 !important; }
html[data-theme="bright"] [class*="hover:bg-slate-900"]:hover,
html[data-theme="bright"] [class*="hover:bg-slate-800"]:hover,
html[data-theme="bright"] [class*="hover:bg-slate-700"]:hover {
  background-color: #efe4d6 !important;
  background-image: none !important;
  color: #8f0000 !important;
}
html[data-theme="bright"] [class*="bg-sky-950"],
html[data-theme="bright"] [class*="bg-sky-900"] {
  background-color: #fff5e6 !important;
  background-image: none !important;
}
html[data-theme="bright"] [class*="bg-violet-950"],
html[data-theme="bright"] [class*="bg-violet-900"] {
  background-color: #f8eee7 !important;
  background-image: none !important;
}
html[data-theme="bright"] [class*="bg-rose-950"],
html[data-theme="bright"] [class*="bg-rose-900"] {
  background-color: #fff0f0 !important;
  background-image: none !important;
}
html[data-theme="bright"] [class*="text-rose-3"],
html[data-theme="bright"] [class*="text-rose-4"] { color: #991b1b !important; }
html[data-theme="bright"] [class*="text-emerald-3"],
html[data-theme="bright"] [class*="text-emerald-4"] { color: #176b52 !important; }

/* Bright-theme media workspace: crisp cards and restrained brand accents. */
html[data-theme="bright"] #media-grid > div {
  background-color: #fff !important;
  border-color: #d9c8b7 !important;
  box-shadow: 0 10px 28px rgba(74, 52, 38, .08);
}
html[data-theme="bright"] #media-grid input[type="range"] { accent-color: #a90000; }
html[data-theme="bright"] #media-grid button[class*="bg-sky-900"] {
  background: #a90000 !important;
  border-color: #a90000 !important;
  color: #fff !important;
}
html[data-theme="bright"] #media-grid button[class*="bg-sky-900"]:hover { background: #c31313 !important; }
html[data-theme="bright"] #media-grid button[class*="bg-violet-950"] {
  background: #8b570f !important;
  border-color: #8b570f !important;
  color: #fff !important;
}
html[data-theme="bright"] #media-grid button[class*="bg-violet-950"]:hover { background: #a66b18 !important; }
html[data-theme="bright"] #media-grid button[class*="bg-rose-950"] {
  background: #fff !important;
  border-color: #b95c5c !important;
  color: #8f0000 !important;
}
html[data-theme="bright"] #media-grid button[class*="bg-rose-950"]:hover { background: #fff0f0 !important; }
html[data-theme="bright"] button[class*="bg-sky-"],
html[data-theme="bright"] a[class*="bg-sky-"],
html[data-theme="bright"] button[class*="bg-blue-"],
html[data-theme="bright"] a[class*="bg-blue-"],
html[data-theme="bright"] button[class*="bg-violet-"],
html[data-theme="bright"] a[class*="bg-violet-"],
html[data-theme="bright"] button[class*="bg-emerald-"],
html[data-theme="bright"] a[class*="bg-emerald-"],
html[data-theme="bright"] button[class*="bg-rose-"],
html[data-theme="bright"] a[class*="bg-rose-"] { color: #fff !important; }
html[data-theme="bright"] ::-webkit-scrollbar-track { background: #f6f0e7; }
html[data-theme="bright"] ::-webkit-scrollbar-thumb { background: #c5ad96; border-color: #f6f0e7; }

/* Bright theme uses a strict red, white, and black interface. */
html[data-theme="bright"] body,
html[data-theme="bright"] [class*="text-sky-"],
html[data-theme="bright"] [class*="text-violet-"],
html[data-theme="bright"] [class*="text-emerald-"],
html[data-theme="bright"] [class*="text-amber-"],
html[data-theme="bright"] [class*="text-rose-"],
html[data-theme="bright"] [class*="text-blue-"],
html[data-theme="bright"] [class*="text-fuchsia-"],
html[data-theme="bright"] [class*="text-pink-"] { color: #201714 !important; }

html[data-theme="bright"] [class*="bg-sky-9"],
html[data-theme="bright"] [class*="bg-violet-9"],
html[data-theme="bright"] [class*="bg-emerald-9"],
html[data-theme="bright"] [class*="bg-amber-9"],
html[data-theme="bright"] [class*="bg-rose-9"],
html[data-theme="bright"] [class*="bg-blue-9"],
html[data-theme="bright"] [class*="bg-fuchsia-9"] {
  background: #fff !important;
  background-image: none !important;
}

html[data-theme="bright"] button:not(:disabled) {
  background: #b40000 !important;
  background-image: none !important;
  border-color: #b40000 !important;
  color: #fff !important;
}
html[data-theme="bright"] button:not(:disabled):hover {
  background: #d01818 !important;
  border-color: #d01818 !important;
  color: #fff !important;
}

html[data-theme="bright"] #media-grid input[type="text"],
html[data-theme="bright"] #media-grid input[type="search"],
html[data-theme="bright"] #media-grid select {
  background: #fff !important;
  border-color: #cdbbaa !important;
  color: #111 !important;
}
html[data-theme="bright"] #media-grid input::placeholder { color: #6b625d !important; }
html[data-theme="bright"] #media-grid button[id^="btn-start-"],
html[data-theme="bright"] #media-grid button[id^="btn-end-"] {
  background: #fff !important;
  border-color: #cdbbaa !important;
  color: #111 !important;
}
html[data-theme="bright"] #media-grid button[id^="btn-start-"]:hover,
html[data-theme="bright"] #media-grid button[id^="btn-end-"]:hover {
  background: #f4eee8 !important;
  color: #111 !important;
}

html[data-theme="bright"] #processing-tab {
  background: #fff !important;
  border-color: #b40000 !important;
  color: #111 !important;
  box-shadow: 0 8px 22px rgba(62, 40, 28, .16) !important;
}
html[data-theme="bright"] #processing-panel {
  background: #fff !important;
  border-color: #b40000 !important;
  color: #111 !important;
}
html[data-theme="bright"] #processing-panel [class*="text-"] { color: #111 !important; }
html[data-theme="bright"] #processing-panel [class*="bg-violet-"],
html[data-theme="bright"] #processing-panel [class*="bg-emerald-"],
html[data-theme="bright"] #processing-panel [class*="bg-rose-"] { background: #b40000 !important; }
html[data-theme="bright"] #processing-tab-count { background: #b40000 !important; color: #fff !important; }

/* Final media-card contrast rules; intentionally stronger than legacy card styles. */
html[data-theme="bright"] #media-grid .aspect-video [class*="text-white"],
html[data-theme="bright"] #media-grid .aspect-video [class*="bg-black/"] {
  color: #fff !important;
}
html[data-theme="bright"] #media-grid .aspect-video [class*="bg-violet-600"] {
  background: #b40000 !important;
  color: #fff !important;
}
html[data-theme="bright"] #media-grid .aspect-video [class*="bg-sky-600"] .text-white {
  color: #fff !important;
}
html[data-theme="bright"] #media-grid [id^="action-container-"] button:not(:disabled) {
  background: #b40000 !important;
  background-image: none !important;
  border-color: #b40000 !important;
  color: #fff !important;
}
html[data-theme="bright"] #media-grid [id^="action-container-"] button:not(:disabled):hover {
  background: #d01818 !important;
  border-color: #d01818 !important;
  color: #fff !important;
}

/* Media actions: one clear primary action, uniform quiet secondary actions. */
html[data-theme="bright"] #media-grid [id^="action-container-"] button:not(:disabled) {
  background: #fff !important;
  border-color: #b40000 !important;
  color: #111 !important;
  box-shadow: none !important;
}
html[data-theme="bright"] #media-grid [id^="action-container-"] button:not(:disabled):hover {
  background: #fff0f0 !important;
  border-color: #d01818 !important;
  color: #111 !important;
}
html[data-theme="bright"] #media-grid [id^="action-container-"] button[class*="bg-sky-900"]:not(:disabled) {
  background: #b40000 !important;
  border-color: #b40000 !important;
  color: #fff !important;
}
html[data-theme="bright"] #media-grid [id^="action-container-"] button[class*="bg-sky-900"]:not(:disabled):hover {
  background: #d01818 !important;
  border-color: #d01818 !important;
  color: #fff !important;
}
html[data-theme="bright"] #delete-confirmation > div[role],
html[data-theme="bright"] #delete-confirmation .relative { background: #fff !important; }
html[data-theme="bright"] #delete-cancel-button {
  background: #fff !important;
  border-color: #b40000 !important;
  color: #111 !important;
}
html[data-theme="bright"] #delete-cancel-button:hover { background: #fff0f0 !important; color: #111 !important; }
html[data-theme="bright"] #delete-confirm-button { background: #b40000 !important; border-color: #b40000 !important; color: #fff !important; }
html[data-theme="bright"] #s7-confirm-dialog .relative { background: #fff !important; }
html[data-theme="bright"] #s7-confirm-cancel {
  background: #fff !important;
  border-color: #b40000 !important;
  color: #111 !important;
}
html[data-theme="bright"] #s7-confirm-cancel:hover { background: #fff0f0 !important; color: #111 !important; }
html[data-theme="bright"] #s7-confirm-accept {
  background: #b40000 !important;
  border-color: #b40000 !important;
  color: #fff !important;
}

/* Bright v2: one restrained client-facing system across every page. */
html[data-theme="bright"] {
  --sf-bg: #f5f3f0;
  --sf-panel: #ffffff;
  --sf-panel-raised: #ffffff;
  --sf-panel-soft: #f2efeb;
  --sf-ink: #151515;
  --sf-muted: #5f5f5f;
  --sf-line: #d8d2cc;
  --sf-crimson: #b40000;
  --sf-red: #c80000;
}

html[data-theme="bright"] body {
  background: #f5f3f0 !important;
  color: #151515 !important;
}
html[data-theme="bright"] body::before { display: none; }

html[data-theme="bright"] .bg-slate-950,
html[data-theme="bright"] .bg-slate-900,
html[data-theme="bright"] .bg-slate-800,
html[data-theme="bright"] [class*="bg-slate-950/"],
html[data-theme="bright"] [class*="bg-slate-900/"],
html[data-theme="bright"] [class*="bg-slate-800/"] {
  background: #fff !important;
  background-image: none !important;
}
html[data-theme="bright"] .bg-slate-700,
html[data-theme="bright"] [class*="bg-slate-700/"] {
  background: #f2efeb !important;
  background-image: none !important;
}
html[data-theme="bright"] [class*="border-slate-"],
html[data-theme="bright"] [class*="border-sky-"],
html[data-theme="bright"] [class*="border-violet-"],
html[data-theme="bright"] [class*="border-emerald-"],
html[data-theme="bright"] [class*="border-amber-"],
html[data-theme="bright"] [class*="border-blue-"],
html[data-theme="bright"] [class*="border-fuchsia-"] {
  border-color: #d8d2cc !important;
}
html[data-theme="bright"] [class*="text-slate-"],
html[data-theme="bright"] [class*="text-sky-"],
html[data-theme="bright"] [class*="text-violet-"],
html[data-theme="bright"] [class*="text-emerald-"],
html[data-theme="bright"] [class*="text-amber-"],
html[data-theme="bright"] [class*="text-rose-"],
html[data-theme="bright"] [class*="text-blue-"],
html[data-theme="bright"] [class*="text-fuchsia-"],
html[data-theme="bright"] [class*="text-pink-"],
html[data-theme="bright"] .text-white {
  color: #151515 !important;
}
html[data-theme="bright"] .text-slate-400,
html[data-theme="bright"] .text-slate-500 { color: #5f5f5f !important; }

html[data-theme="bright"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="bright"] select,
html[data-theme="bright"] textarea {
  background: #fff !important;
  border-color: #bdb7b1 !important;
  color: #151515 !important;
  box-shadow: none !important;
}
html[data-theme="bright"] input::placeholder,
html[data-theme="bright"] textarea::placeholder { color: #777 !important; }
html[data-theme="bright"] input[type="range"] { accent-color: #b40000 !important; }

html[data-theme="bright"] button:not(:disabled),
html[data-theme="bright"] a[class*="bg-"] {
  background: #b40000 !important;
  background-image: none !important;
  border-color: #b40000 !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="bright"] button:not(:disabled) *,
html[data-theme="bright"] a[class*="bg-"] * { color: #fff !important; }
html[data-theme="bright"] button:not(:disabled):hover,
html[data-theme="bright"] a[class*="bg-"]:hover {
  background: #d01818 !important;
  border-color: #d01818 !important;
  color: #fff !important;
}
html[data-theme="bright"] button:disabled {
  background: #e5e1dd !important;
  border-color: #d0cac4 !important;
  color: #777 !important;
  box-shadow: none !important;
}

/* Video surfaces stay truly dark and their overlays remain readable. */
html[data-theme="bright"] video,
html[data-theme="bright"] .bg-black { background: #000 !important; }
html[data-theme="bright"] .bg-black [class*="text-"],
html[data-theme="bright"] .aspect-video [class*="bg-black/"] { color: #fff !important; }
html[data-theme="bright"] .aspect-video [class*="bg-black/"] {
  background: rgba(0, 0, 0, .82) !important;
  border-color: rgba(255, 255, 255, .45) !important;
}
html[data-theme="bright"] .aspect-video [class*="bg-sky-600"],
html[data-theme="bright"] .aspect-video [class*="bg-violet-600"] {
  background: #b40000 !important;
  color: #fff !important;
}

/* Consistent cards and compact controls on Uploads, Edits, and Promos. */
html[data-theme="bright"] #media-grid > div,
html[data-theme="bright"] #queue-grid > div,
html[data-theme="bright"] #promos-grid > div {
  background: #fff !important;
  border-color: #d8d2cc !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07) !important;
}
html[data-theme="bright"] #media-grid button[id^="btn-start-"],
html[data-theme="bright"] #media-grid button[id^="btn-end-"],
html[data-theme="bright"] #queue-grid button[id^="btn-start-"],
html[data-theme="bright"] #queue-grid button[id^="btn-end-"] {
  background: #b40000 !important;
  border-color: #b40000 !important;
  color: #fff !important;
}
html[data-theme="bright"] #processing-tab,
html[data-theme="bright"] #processing-panel {
  background: #fff !important;
  border-color: #b40000 !important;
  color: #151515 !important;
}
html[data-theme="bright"] #processing-tab { box-shadow: 0 8px 20px rgba(0,0,0,.12) !important; }
html[data-theme="bright"] #processing-tab > span:first-child { color: #151515 !important; }
html[data-theme="bright"] #processing-tab-count {
  background: #b40000 !important;
  color: #fff !important;
}

/* Warm the bright theme and keep navigation quieter than page actions. */
html[data-theme="bright"] body { background: #ece8e3 !important; }
html[data-theme="bright"] .bg-slate-950,
html[data-theme="bright"] .bg-slate-900,
html[data-theme="bright"] .bg-slate-800,
html[data-theme="bright"] [class*="bg-slate-950/"],
html[data-theme="bright"] [class*="bg-slate-900/"],
html[data-theme="bright"] [class*="bg-slate-800/"] {
  background: #faf8f5 !important;
}
html[data-theme="bright"] #media-grid > div,
html[data-theme="bright"] #queue-grid > div,
html[data-theme="bright"] #promos-grid > div { background: #faf8f5 !important; }

html[data-theme="bright"] nav { background: #f7f4f0 !important; }
html[data-theme="bright"] nav details > summary {
  background: transparent !important;
  color: #151515 !important;
  border: 1px solid transparent !important;
}
html[data-theme="bright"] nav details > summary:hover,
html[data-theme="bright"] nav details[open] > summary {
  background: #e9e3dd !important;
  border-color: #d1c8c0 !important;
  color: #151515 !important;
}
html[data-theme="bright"] nav details > div {
  background: #f7f4f0 !important;
  border-color: #cfc6bd !important;
  padding: .45rem !important;
  box-shadow: 0 14px 32px rgba(25, 20, 17, .16) !important;
}
html[data-theme="bright"] nav details > div a,
html[data-theme="bright"] nav details > div a[class*="bg-"] {
  background: transparent !important;
  border: 0 !important;
  color: #151515 !important;
  box-shadow: none !important;
  border-radius: .45rem !important;
}
html[data-theme="bright"] nav details > div a:hover,
html[data-theme="bright"] nav details > div a[aria-current="page"] {
  background: #eee7e1 !important;
  color: #9d0000 !important;
}

html[data-theme="bright"] [id^="crop-guide-"] {
  background: rgba(180, 0, 0, .045) !important;
  border-color: rgba(210, 24, 24, .78) !important;
}
html[data-theme="bright"] [id^="play-overlay-"] {
  background: rgba(0, 0, 0, .16) !important;
}
html[data-theme="bright"] [id^="play-overlay-"]:hover {
  background: rgba(0, 0, 0, .07) !important;
}

/* Override the legacy black overlay rule with higher specificity. */
html[data-theme="bright"] #media-grid .aspect-video [id^="crop-guide-"],
html[data-theme="bright"] #queue-grid [id^="crop-guide-"] {
  background: rgba(180, 0, 0, .035) !important;
  background-color: rgba(180, 0, 0, .035) !important;
  border-color: rgba(210, 24, 24, .82) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Bright v5 surface palette: visibly warm, never stark white. */
html[data-theme="bright"] body { background: #e5e0da !important; }
html[data-theme="bright"] .bg-slate-950,
html[data-theme="bright"] .bg-slate-900,
html[data-theme="bright"] .bg-slate-800,
html[data-theme="bright"] [class*="bg-slate-950/"],
html[data-theme="bright"] [class*="bg-slate-900/"],
html[data-theme="bright"] [class*="bg-slate-800/"] {
  background: #f3efe9 !important;
}
html[data-theme="bright"] #media-grid > div,
html[data-theme="bright"] #queue-grid > div,
html[data-theme="bright"] #promos-grid > div {
  background: #f5f1eb !important;
}
html[data-theme="bright"] nav,
html[data-theme="bright"] nav details > div {
  background: #eee9e3 !important;
}
html[data-theme="bright"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="bright"] select,
html[data-theme="bright"] textarea {
  background: #fbf9f6 !important;
}
html[data-theme="bright"] #processing-tab,
html[data-theme="bright"] #processing-panel {
  background: #f3efe9 !important;
}

/* Cards sit one shade deeper than the unchanged page background. */
html[data-theme="bright"] #media-grid > div,
html[data-theme="bright"] #queue-grid > div,
html[data-theme="bright"] #promos-grid > div {
  background: #eee9e3 !important;
}
html[data-theme="bright"] #media-grid > div > div:not(.bg-black),
html[data-theme="bright"] #queue-grid > div > div:not(.bg-black),
html[data-theme="bright"] #promos-grid > div > div:not(.bg-black) {
  background: #f0ece6 !important;
}

html[data-theme="bright"] .promo-action-toolbar {
  background: #e9e3dd !important;
  border-color: #d0c7be !important;
}
html[data-theme="bright"] .promo-action {
  display: inline-flex !important;
  width: auto !important;
  min-height: 2rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
  padding: .42rem .7rem !important;
  border-radius: .5rem !important;
  font-size: .68rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: 1px solid #a90000 !important;
  background: #fffaf3 !important;
  color: #241a15 !important;
}
html[data-theme="bright"] .promo-action:hover {
  background: #a90000 !important;
  border-color: #a90000 !important;
  color: #fff !important;
}
html[data-theme="bright"] .promo-action-publish {
  border-color: #17803d !important;
  background: #17803d !important;
  color: #fff !important;
}
html[data-theme="bright"] .promo-action-publish:hover {
  background: #1f9a4b !important;
  border-color: #1f9a4b !important;
}
html[data-theme="bright"] .promo-action-delete {
  margin-left: auto !important;
  background: #a90000 !important;
  color: #fff !important;
}
@media (max-width: 640px) {
  html[data-theme="bright"] .promo-action-delete { margin-left: 0 !important; }
}

/* Professional bright-theme layout: compact media and publishing surfaces. */
html[data-theme="bright"] .promo-card-player {
  align-self: start !important;
  width: 100% !important;
  height: 440px !important;
  min-height: 0 !important;
  background: #111 !important;
}
html[data-theme="bright"] .social-publish-shell,
html[data-theme="bright"] .social-publish-preview,
html[data-theme="bright"] .social-publish-settings {
  background: #f0ece6 !important;
  color: #151515 !important;
}
html[data-theme="bright"] .social-publish-preview { border-color: #d0c7be !important; }
html[data-theme="bright"] .social-publish-shell input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="bright"] .social-publish-shell textarea,
html[data-theme="bright"] .social-publish-shell select {
  background: #faf7f2 !important;
  color: #151515 !important;
  border-color: #bbb2aa !important;
}
html[data-theme="bright"] .social-publish-shell textarea.text-white,
html[data-theme="bright"] .social-publish-shell input.text-white { color: #151515 !important; }
html[data-theme="bright"] .social-publish-shell label,
html[data-theme="bright"] .social-publish-shell p,
html[data-theme="bright"] .social-publish-shell span:not(.sr-only),
html[data-theme="bright"] .social-publish-shell h3 { color: #151515 !important; }
@media (max-width: 767px) {
  html[data-theme="bright"] .promo-card-player { height: 360px !important; }
  html[data-theme="bright"] .social-publish-shell { display: block !important; }
}

/* Visible editing slider tracks with the existing red handles. */
html[data-theme="bright"] input[type="range"] {
  background: #c7beb5 !important;
  height: 4px !important;
  border-radius: 999px !important;
}
html[data-theme="bright"] input[type="range"]::-webkit-slider-runnable-track {
  background: #c7beb5 !important;
  height: 4px !important;
  border-radius: 999px !important;
}
html[data-theme="bright"] input[type="range"]::-moz-range-track {
  background: #c7beb5 !important;
  height: 4px !important;
  border-radius: 999px !important;
}

html[data-theme="bright"] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #b40000 !important;
  box-shadow: none !important;
}
html[data-theme="bright"] input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #b40000 !important;
  box-shadow: none !important;
}

/* Keep the page brighter than its darker warm-white cards. */
html[data-theme="bright"] body { background: #f6f3ef !important; }
html[data-theme="bright"] body > main,
html[data-theme="bright"] body > main > div:first-child {
  background: #f6f3ef !important;
}

/* One continuous off-white canvas behind the unchanged cards. */
html[data-theme="bright"] body,
html[data-theme="bright"] body > main,
html[data-theme="bright"] body > footer,
html[data-theme="bright"] #uploads-workspace,
html[data-theme="bright"] #uploads-workspace > main,
html[data-theme="bright"] #uploads-workspace > main > div,
html[data-theme="bright"] #media-grid,
html[data-theme="bright"] #pagination-bar {
  background: #f4f1ed !important;
  background-image: none !important;
}

/* Bright v6: one semantic, high-contrast system across the client studio. */
html[data-theme="bright"] {
  --sf-bg: #f4f1ed;
  --sf-panel: #eee9e3;
  --sf-panel-raised: #f8f6f2;
  --sf-panel-soft: #e7e2dc;
  --sf-ink: #17201f;
  --sf-muted: #58625f;
  --sf-line: #c9c3bb;
  --sf-primary: #8b2f35;
  --sf-primary-hover: #a43b42;
  --sf-primary-soft: #f0dfe0;
  --sf-danger: #8b2f35;
  --sf-danger-hover: #a43b42;
}

html[data-theme="bright"] body,
html[data-theme="bright"] body > main,
html[data-theme="bright"] body > footer {
  background: var(--sf-bg) !important;
  color: var(--sf-ink) !important;
}

/* Every general text utility must remain readable on bright surfaces. */
html[data-theme="bright"] :where(h1,h2,h3,h4,h5,h6,p,label,legend,dt,dd,li,th,td) {
  color: inherit;
}
html[data-theme="bright"] [class*="text-slate-"],
html[data-theme="bright"] [class*="text-sky-"],
html[data-theme="bright"] [class*="text-blue-"],
html[data-theme="bright"] [class*="text-violet-"],
html[data-theme="bright"] [class*="text-fuchsia-"],
html[data-theme="bright"] [class*="text-pink-"],
html[data-theme="bright"] [class*="text-amber-"],
html[data-theme="bright"] [class*="text-emerald-"] {
  color: var(--sf-ink) !important;
}
html[data-theme="bright"] .text-slate-400,
html[data-theme="bright"] .text-slate-500,
html[data-theme="bright"] .text-slate-600 {
  color: var(--sf-muted) !important;
}

/* Normal actions are teal. Destructive actions are the only red controls. */
html[data-theme="bright"] button:not(:disabled),
html[data-theme="bright"] a[class*="bg-"] {
  background: var(--sf-primary) !important;
  background-image: none !important;
  border-color: var(--sf-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="bright"] button:not(:disabled) *,
html[data-theme="bright"] a[class*="bg-"] * { color: #fff !important; }
html[data-theme="bright"] button:not(:disabled):hover,
html[data-theme="bright"] a[class*="bg-"]:hover {
  background: var(--sf-primary-hover) !important;
  border-color: var(--sf-primary-hover) !important;
  color: #fff !important;
}
html[data-theme="bright"] :is(
  .promo-action-delete,
  #delete-confirm-button,
  #s7-confirm-accept,
  button[id*="delete" i],
  button[class*="danger" i],
  button[title*="delete" i],
  button[aria-label*="delete" i],
  button[onclick*="delete" i],
  button[onclick*="disconnect" i]
):not(:disabled) {
  background: var(--sf-danger) !important;
  border-color: var(--sf-danger) !important;
  color: #fff !important;
}
html[data-theme="bright"] :is(
  .promo-action-delete,
  #delete-confirm-button,
  #s7-confirm-accept,
  button[id*="delete" i],
  button[class*="danger" i],
  button[title*="delete" i],
  button[aria-label*="delete" i],
  button[onclick*="delete" i],
  button[onclick*="disconnect" i]
):not(:disabled):hover {
  background: var(--sf-danger-hover) !important;
  border-color: var(--sf-danger-hover) !important;
}

/* Quiet secondary actions retain button shape without competing with primary actions. */
html[data-theme="bright"] :is(
  button[class*="bg-slate-"],
  button[class*="bg-black/"],
  #delete-cancel-button,
  #s7-confirm-cancel,
  .promo-editor-modal button[onclick*="closePromoTimeline"]
):not(:disabled) {
  background: var(--sf-panel-raised) !important;
  border-color: var(--sf-line) !important;
  color: var(--sf-ink) !important;
}
html[data-theme="bright"] :is(
  button[class*="bg-slate-"],
  button[class*="bg-black/"],
  #delete-cancel-button,
  #s7-confirm-cancel,
  .promo-editor-modal button[onclick*="closePromoTimeline"]
):not(:disabled) * { color: var(--sf-ink) !important; }
html[data-theme="bright"] :is(
  button[class*="bg-slate-"],
  button[class*="bg-black/"],
  #delete-cancel-button,
  #s7-confirm-cancel,
  .promo-editor-modal button[onclick*="closePromoTimeline"]
):not(:disabled):hover {
  background: var(--sf-primary-soft) !important;
  border-color: var(--sf-primary) !important;
  color: var(--sf-ink) !important;
}

html[data-theme="bright"] input[type="range"] { accent-color: var(--sf-primary) !important; }
html[data-theme="bright"] input[type="range"]::-webkit-slider-thumb { background: var(--sf-primary) !important; }
html[data-theme="bright"] input[type="range"]::-moz-range-thumb { background: var(--sf-primary) !important; }
html[data-theme="bright"] input:focus,
html[data-theme="bright"] select:focus,
html[data-theme="bright"] textarea:focus {
  border-color: var(--sf-primary) !important;
  box-shadow: 0 0 0 3px rgba(139, 47, 53, .18) !important;
}
html[data-theme="bright"] button:focus-visible,
html[data-theme="bright"] a:focus-visible,
html[data-theme="bright"] input:focus-visible,
html[data-theme="bright"] select:focus-visible,
html[data-theme="bright"] textarea:focus-visible {
  outline-color: rgba(139, 47, 53, .72) !important;
}
html[data-theme="bright"] ::selection { background: rgba(139, 47, 53, .84); color: #fff; }

/* Promo Editor: professional bright surfaces, dark copy and teal state cues. */
html[data-theme="bright"] .promo-editor-modal { background: rgba(20, 27, 26, .78) !important; }
html[data-theme="bright"] .promo-editor-modal > div { background: var(--sf-bg) !important; color: var(--sf-ink) !important; }
html[data-theme="bright"] .promo-editor-modal .bg-slate-950,
html[data-theme="bright"] .promo-editor-modal .bg-slate-900,
html[data-theme="bright"] .promo-editor-modal .bg-slate-800,
html[data-theme="bright"] .promo-editor-modal [class*="bg-slate-950/"],
html[data-theme="bright"] .promo-editor-modal [class*="bg-slate-900/"],
html[data-theme="bright"] .promo-editor-modal [class*="bg-slate-800/"] {
  background: var(--sf-panel) !important;
  color: var(--sf-ink) !important;
}
html[data-theme="bright"] .promo-editor-modal .bg-black,
html[data-theme="bright"] .promo-editor-modal [class*="bg-black/"] { background: #121817 !important; }
html[data-theme="bright"] .promo-editor-modal video { background: #050707 !important; }
html[data-theme="bright"] .promo-editor-modal #timeline-crop-guide {
  border-color: #e4a3a8 !important;
  color: #fff4f4 !important;
}
html[data-theme="bright"] .promo-editor-modal #timeline-crop-guide span { color: #fff4f4 !important; }
html[data-theme="bright"] .promo-editor-modal #timeline-segment-list > button {
  background: var(--sf-panel-raised) !important;
  border-color: var(--sf-line) !important;
  color: var(--sf-ink) !important;
}
html[data-theme="bright"] .promo-editor-modal #timeline-segment-list > button[aria-current="true"],
html[data-theme="bright"] .promo-editor-modal #timeline-segment-list > button.is-active {
  background: var(--sf-primary-soft) !important;
  border-color: var(--sf-primary) !important;
}

/* Source previews use the editor scrubbers, avoiding Safari's overlapping volume HUD. */
.promo-editor-modal #timeline-source-video::-webkit-media-controls-volume-slider,
.promo-editor-modal #timeline-source-video::-webkit-media-controls-mute-button,
.promo-editor-modal #timeline-replacement-video::-webkit-media-controls-volume-slider,
.promo-editor-modal #timeline-replacement-video::-webkit-media-controls-mute-button {
  display: none !important;
}

/* Clip Editor contrast and ordering states. */
html[data-theme="bright"] .promo-editor-header,
html[data-theme="bright"] .promo-editor-header *,
html[data-theme="bright"] .promo-editor-workspace,
html[data-theme="bright"] .promo-editor-settings,
html[data-theme="bright"] .promo-editor-settings :is(h1,h2,h3,h4,p,label,legend,strong,span,option),
html[data-theme="bright"] .promo-editor-workspace > div:first-child *,
html[data-theme="bright"] .promo-editor-modal :is(.timeline-segment-button, .timeline-segment-button *) {
  color: var(--sf-ink) !important;
}
html[data-theme="bright"] .promo-editor-dark-panel,
html[data-theme="bright"] .promo-editor-dark-panel * { color: #fff !important; }
html[data-theme="bright"] .promo-editor-modal #timeline-crop-guide span { color: #fff4f4 !important; }
html[data-theme="bright"] .promo-editor-modal .timeline-segment-button {
  background: var(--sf-panel-raised) !important;
  border-color: var(--sf-line) !important;
  box-shadow: none !important;
}
html[data-theme="bright"] .promo-editor-modal .timeline-segment-button[aria-current="true"] {
  background: var(--sf-primary-soft) !important;
  border-color: var(--sf-primary) !important;
  box-shadow: inset 0 0 0 1px var(--sf-primary) !important;
}
html[data-theme="bright"] .promo-editor-modal .timeline-segment-drop-target {
  border-color: var(--sf-primary) !important;
  box-shadow: 0 0 0 3px rgba(139, 47, 53, .20) !important;
}
html[data-theme="bright"] .promo-editor-modal .timeline-segment-dragging { opacity: .48; }
html[data-theme="bright"] .promo-editor-modal .timeline-move-button:not(:disabled) {
  min-width: 1.55rem !important;
  background: var(--sf-panel-soft) !important;
  border-color: var(--sf-line) !important;
  color: var(--sf-ink) !important;
}
html[data-theme="bright"] .promo-editor-modal .timeline-move-button:not(:disabled):hover {
  background: var(--sf-primary) !important;
  border-color: var(--sf-primary) !important;
  color: #fff !important;
}

/* Preserve the brand artwork in Bright mode instead of recoloring it with theme filters. */
html[data-theme="bright"] nav img[alt*="S7venGen"] {
  filter: none !important;
  opacity: 1 !important;
}

/* Promo action rows share the available width and wrap as a balanced grid. */
.promo-action-toolbar .promo-action,
.promo-action-toolbar .promo-action-delete {
  width: 100% !important;
  margin-left: 0 !important;
}
html[data-theme="bright"] .promo-file-facts span {
  background: var(--sf-panel-raised) !important;
  border-color: var(--sf-line) !important;
  color: var(--sf-muted) !important;
}

/* Photo clips preview the same explicit motion selected for rendering. */
.promo-editor-modal #timeline-source-video.photo-motion-preview {
  animation-duration: var(--photo-preview-duration, 3s) !important;
  animation-timing-function: ease-in-out !important;
  animation-fill-mode: both !important;
  transform-origin: center center;
}
.promo-editor-modal #timeline-source-video.photo-zoom-in { animation-name: s7-photo-zoom-in !important; }
.promo-editor-modal #timeline-source-video.photo-zoom-out { animation-name: s7-photo-zoom-out !important; }
.promo-editor-modal #timeline-source-video.photo-pan-left { animation-name: s7-photo-pan-left !important; }
.promo-editor-modal #timeline-source-video.photo-pan-right { animation-name: s7-photo-pan-right !important; }
@keyframes s7-photo-zoom-in { from { transform: scale(1); } to { transform: scale(1.072); } }
@keyframes s7-photo-zoom-out { from { transform: scale(1.072); } to { transform: scale(1); } }
@keyframes s7-photo-pan-left { from { transform: scale(1.072) translateX(2.8%); } to { transform: scale(1.072) translateX(-2.8%); } }
@keyframes s7-photo-pan-right { from { transform: scale(1.072) translateX(-2.8%); } to { transform: scale(1.072) translateX(2.8%); } }
@media (prefers-reduced-motion: reduce) {
  .promo-editor-modal #timeline-source-video.photo-motion-preview { animation: none !important; }
}