/* ============================================================
   Motor Viral · tema escuro do painel Motor
   ============================================================ */
html.dark {
  --primary: #10b981;
  --primary-cyan: #10b981;
  --primary-purple: #8b5cf6;
  --bg: #0b0d13;
  --card: #0b0d13;
  --border: rgba(255, 255, 255, 0.09);
  --text: #f8fafc;
  --muted: #94a3b8;
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #f43f5e;
  --brand: #10b981;
  color-scheme: dark;
  background: #0b0d13;
}

html.dark body {
  background: #0b0d13 !important;
  color: #f8fafc !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
}

html.dark .bg-white,
html.dark .bg-\[\#F1F5F9\],
html.dark .bg-gray-50,
html.dark .bg-slate-50,
html.dark .bg-gray-100,
html.dark .bg-slate-100 {
  background-color: #0b0d13 !important;
}

html.dark .bg-gray-200,
html.dark .bg-slate-200 {
  background-color: #11141d !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-black {
  color: #f8fafc !important;
}

html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-slate-500 {
  color: #94a3b8 !important;
}

html.dark .text-gray-400,
html.dark .text-slate-400 {
  color: #64748b !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-200,
html.dark .border-slate-300 {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html.dark input,
html.dark textarea,
html.dark select {
  background-color: #11141d !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-theme-md,
html.dark .shadow-theme-lg {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
}

html.dark .saved-script-card,
html.dark .reel-card {
  background-color: #0b0d13 !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html.dark .nav-item:not(.active) {
  color: #94a3b8 !important;
}

html.dark .nav-item:not(.active):hover {
  background-color: #151a25 !important;
}

html.dark .nav-item.active {
  background-color: #10b981 !important;
  color: #04120c !important;
}

html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-white:hover {
  background-color: #151a25 !important;
}

html.dark .bg-\[\#0f172a\],
html.dark .bg-\[\#101828\],
html.dark .bg-slate-900,
html.dark .bg-gray-900 {
  background-color: #0b0d13 !important;
}

html.dark .bg-slate-800,
html.dark .bg-gray-800 {
  background-color: #11141d !important;
}

html.dark .text-\[\#101828\],
html.dark .text-\[\#0f172a\] {
  color: #f8fafc !important;
}

html.dark .border-slate-800,
html.dark .border-gray-800 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .gen-primary-btn,
html.dark #tab-generator .gen-primary-btn {
  background: #10b981 !important;
  color: #04120c !important;
}

html.dark .gen-primary-btn:hover,
html.dark #tab-generator .gen-primary-btn:hover {
  background: #059669 !important;
}

html.dark .broll-mode-btn.active,
html.dark .subtitle-style-btn.active,
html.dark .subtitle-pos-btn.active,
html.dark .btn-script-filter.active {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #04120c !important;
}

html.dark .btn-secondary {
  background: #151a25 !important;
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .btn-secondary:hover {
  background: #1b2230 !important;
}

html.dark .sidebar-brand-text {
  color: #f8fafc !important;
}

html.dark .mobile-brand .brand-name {
  color: #f8fafc !important;
}

html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html.dark #btn-login,
html.dark button.bg-slate-900,
html.dark button.bg-gray-900 {
  background: #10b981 !important;
  color: #04120c !important;
}

html.dark #btn-login:hover,
html.dark button.bg-slate-900:hover,
html.dark button.bg-gray-900:hover {
  background: #059669 !important;
}

html.dark .border-slate-100,
html.dark .border-gray-100 {
  border-color: rgba(255, 255, 255, 0.09) !important;
}