:root {
  --theme-transition-speed: 180ms ease;
}

body,
[class*="bg-"],
[class*="text-"],
[class*="border-"] {
  transition:
    background-color var(--theme-transition-speed),
    color var(--theme-transition-speed),
    border-color var(--theme-transition-speed);
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
}

.theme-toggle-menu {
  min-width: 10rem;
}

.theme-toggle-option {
  width: 100%;
  border-radius: 0.55rem;
  padding: 0.45rem 0.6rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
}

.theme-toggle-option:hover {
  background: #f1f5f9;
}

.theme-toggle-option.is-active {
  background: #e2e8f0;
  color: #0f172a;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #111827 100%) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/95 {
  background-color: #0f172a !important;
}

html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-50\/60 {
  background-color: #0b1220 !important;
}

html[data-theme="dark"] .bg-slate-100 {
  background-color: #111827 !important;
}

html[data-theme="dark"] .bg-slate-200,
html[data-theme="dark"] .bg-slate-200\/80 {
  background-color: #1e293b !important;
}

html[data-theme="dark"] .bg-slate-900\/40 {
  background-color: rgba(2, 6, 23, 0.65) !important;
}

html[data-theme="dark"] .text-slate-900 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .text-slate-800 {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .text-slate-700 {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500 {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .text-slate-400 {
  color: #64748b !important;
}

html[data-theme="dark"] .text-slate-300 {
  color: #475569 !important;
}

html[data-theme="dark"] .border-slate-200 {
  border-color: #334155 !important;
}

html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-slate-700\/60 {
  border-color: #475569 !important;
}

html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover {
  background-color: #1e293b !important;
}

html[data-theme="dark"] .hover\:text-slate-900:hover {
  color: #f8fafc !important;
}

html[data-theme="dark"] .text-amber-500,
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-600\/80 {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .text-amber-700 {
  color: #7dd3fc !important;
}

html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-900 {
  color: #e0f2fe !important;
}

html[data-theme="dark"] .hover\:text-amber-500:hover,
html[data-theme="dark"] .hover\:text-amber-600:hover {
  color: #bae6fd !important;
}

html[data-theme="dark"] .bg-amber-400,
html[data-theme="dark"] .bg-amber-400\/80,
html[data-theme="dark"] .bg-amber-400\/90 {
  background-color: #38bdf8 !important;
  color: #082f49 !important;
}

html[data-theme="dark"] .hover\:bg-amber-300:hover {
  background-color: #7dd3fc !important;
}

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .hover\:bg-amber-50:hover {
  background-color: rgba(14, 116, 144, 0.25) !important;
}

html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-300,
html[data-theme="dark"] .border-amber-400 {
  border-color: #0ea5e9 !important;
}

html[data-theme="dark"] .bg-rose-50 {
  background-color: rgba(159, 18, 57, 0.22) !important;
}

html[data-theme="dark"] .border-rose-200 {
  border-color: #be123c !important;
}

html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-rose-700 {
  color: #fda4af !important;
}

html[data-theme="dark"] .text-rose-900 {
  color: #fecdd3 !important;
}

html[data-theme="dark"] .hover\:bg-rose-50:hover,
html[data-theme="dark"] .hover\:bg-rose-100:hover {
  background-color: rgba(159, 18, 57, 0.34) !important;
}

html[data-theme="dark"] .bg-emerald-50 {
  background-color: rgba(13, 148, 136, 0.2) !important;
}

html[data-theme="dark"] .border-emerald-200 {
  border-color: #0f766e !important;
}

html[data-theme="dark"] .text-emerald-900 {
  color: #99f6e4 !important;
}

html[data-theme="dark"] .editor-right {
  background: #0b1220 !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .editor-actions {
  background: #0b1220 !important;
  border-top-color: #334155 !important;
}

html[data-theme="dark"] .editor-tab {
  background: #0b1220 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .editor-tab.is-active {
  background: #0c4a6e !important;
  border-color: #0ea5e9 !important;
  color: #e0f2fe !important;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.55) !important;
}

html[data-theme="dark"] .timeline-dock {
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.95) 0%, #0b1220 35%) !important;
  border-color: #334155 !important;
  box-shadow: 0 -8px 24px rgba(2, 6, 23, 0.45) !important;
}

html[data-theme="dark"] .skeleton-card,
html[data-theme="dark"] .skeleton-block {
  background: #0b1220 !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .skeleton-line {
  background: #1e293b !important;
}

html[data-theme="dark"] .skeleton-card::after,
html[data-theme="dark"] .skeleton-block::after {
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.12), transparent) !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #0b1220 !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] input[type="color"] {
  background: #0b1220 !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .placeholder\:text-slate-400::placeholder {
  color: #64748b !important;
}

html[data-theme="dark"] option {
  background: #0b1220;
  color: #e2e8f0;
}

html[data-theme="dark"] .theme-toggle-btn {
  background: #0b1220 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .theme-toggle-btn:hover {
  background: #1e293b !important;
}

html[data-theme="dark"] .theme-toggle-menu {
  background: #111827 !important;
  border-color: #334155 !important;
  box-shadow: 0 18px 28px rgba(2, 6, 23, 0.55) !important;
}

html[data-theme="dark"] .theme-toggle-option {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .theme-toggle-option:hover {
  background: #1e293b !important;
}

html[data-theme="dark"] .theme-toggle-option.is-active {
  background: #0c4a6e !important;
  color: #e0f2fe !important;
}

html[data-theme="dark"] .checkbox {
  border-color: #475569;
  background: #0b1220;
}

html[data-theme="dark"] .checkbox:checked {
  border-color: #0ea5e9;
  background: #38bdf8;
}

html[data-theme="dark"] .checkbox:checked::after {
  border-color: #082f49;
}

html[data-theme="dark"] #timeline-ruler,
html[data-theme="dark"] .timeline-ruler-track {
  background: linear-gradient(180deg, #0b1220 0%, #111827 100%) !important;
  border-bottom-color: #334155 !important;
}

html[data-theme="dark"] #timeline-viewport {
  background: #0b1220 !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .timeline-ruler-tick {
  background: #475569 !important;
}

html[data-theme="dark"] .timeline-ruler-tick.major {
  background: #64748b !important;
}

html[data-theme="dark"] .timeline-ruler-label {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .timeline-block.is-active {
  background: rgba(56, 189, 248, 0.28) !important;
  border-color: rgba(56, 189, 248, 0.56) !important;
}

html[data-theme="dark"] .video-controls {
  border-color: #334155 !important;
  background: #0b1220 !important;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.5) !important;
}

html[data-theme="dark"] .video-controls .vc-btn,
html[data-theme="dark"] .video-controls select {
  border-color: #334155 !important;
  background: #111827 !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .video-controls .vc-btn:hover {
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
  background: #0c4a6e !important;
}

html[data-theme="dark"] .video-time {
  color: #94a3b8 !important;
}