: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; }
[class*="bg-slate-950"] { background-color: rgba(8, 7, 6, .9) !important; }
[class*="bg-slate-900"] { background-color: rgba(18, 16, 15, .9) !important; }
[class*="bg-slate-800"] { background-color: rgba(27, 23, 20, .88) !important; }
[class*="bg-slate-700"] { background-color: rgba(36, 29, 25, .88) !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*="text-cyan-"] { color: var(--sf-gold) !important; }
[class*="text-teal-"] { color: var(--sf-gold-light) !important; }
[class*="text-emerald-"], [class*="text-green-"] { color: var(--sf-gold) !important; }
[class*="text-indigo-"], [class*="text-purple-"] { color: var(--sf-gold-light) !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*="border-cyan-"] { border-color: rgba(210, 161, 94, .55) !important; }
[class*="border-teal-"] { border-color: rgba(183, 100, 69, .62) !important; }
[class*="border-emerald-"], [class*="border-green-"] { border-color: rgba(210, 161, 94, .55) !important; }
[class*="border-indigo-"], [class*="border-purple-"] { border-color: rgba(183, 100, 69, .62) !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*="bg-cyan-9"], [class*="bg-teal-9"], [class*="bg-emerald-9"],
[class*="bg-green-9"], [class*="bg-indigo-9"], [class*="bg-purple-9"] {
  background-color: rgba(57, 42, 33, .74) !important;
}
[class*="bg-cyan-5"], [class*="bg-cyan-6"], [class*="bg-teal-5"], [class*="bg-teal-6"],
[class*="bg-emerald-5"], [class*="bg-emerald-6"], [class*="bg-green-5"], [class*="bg-green-6"],
[class*="bg-indigo-5"], [class*="bg-indigo-6"], [class*="bg-purple-5"], [class*="bg-purple-6"] {
  background-color: var(--sf-crimson) !important;
  background-image: linear-gradient(115deg, #850000, var(--sf-red)) !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; }

nav a[class*="text-amber-"], nav a[class*="text-sky-"], nav a[class*="text-cyan-"],
nav a[class*="text-fuchsia-"], nav a[class*="text-violet-"], nav a[class*="text-teal-"],
nav a[class*="text-emerald-"], nav a[class*="text-pink-"] {
  color: var(--sf-gold) !important;
}
nav a:hover { color: var(--sf-ink) !important; }

button, a { transition-duration: 180ms; }
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: grayscale(1) sepia(1) saturate(4.2) hue-rotate(337deg) brightness(.92) contrast(1.12) drop-shadow(0 3px 9px rgba(169, 0, 0, .3));
}
::-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); }

/* Publishing and destructive actions keep one meaning everywhere. */
.promo-action-publish {
  border-color: #22a956 !important;
  background: #17803d !important;
  background-image: none !important;
  color: #fff !important;
}
.promo-action-publish:hover {
  border-color: #55c97d !important;
  background: #1f9a4b !important;
  background-image: none !important;
}
.promo-action-delete {
  border-color: #a90000 !important;
  background: #a90000 !important;
  background-image: none !important;
  color: #fff !important;
}
.promo-action-delete:hover {
  border-color: #c51414 !important;
  background: #c51414 !important;
  background-image: none !important;
}

/* Ported from 7create/static/sevenfold-theme.css: the "Edit video" promo
   editor there gained a photo-motion preview and cleaner video controls
   that this admin theme never received (this file was 161 lines vs
   7create's 1064 -- most of the drift is 7create's own bright-theme
   rules, which don't apply here since this app has no light theme, but
   these two rules are universal and the admin editor was missing both). */

/* 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;
}

/* 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; }
}