:root {
  --theme-bg: #f8fafc;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f1f5f9;
  --theme-text: #0f172a;
  --theme-text-muted: #475569;
  --theme-border: #d1d5db;
  --theme-link: #2563eb;
  --theme-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
  --toggle-bg: #0f172a;
  --toggle-fg: #f8fafc;
  --toggle-border: #334155;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #292b30;
  --theme-surface: #23252a;
  --theme-surface-soft: #34363b;
  --theme-text: #f2f3f5;
  --theme-text-muted: #c5c8ce;
  --theme-border: #3c3e43;
  --theme-link: #e1e4eb;
  --theme-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  --toggle-bg: #3b3d42;
  --toggle-fg: #f2f3f5;
  --toggle-border: #4a4c51;
}

body {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

html[data-theme] body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text);
}

#global-theme-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2147483646;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  padding: 10px 14px;
  font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  box-shadow: var(--theme-shadow);
  cursor: pointer;
  user-select: none;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#global-theme-toggle:hover {
  transform: translateY(-1px);
}

#global-theme-toggle:active {
  transform: translateY(0);
}

#global-theme-toggle .theme-label {
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  #global-theme-toggle {
    left: 12px;
    bottom: 12px;
    padding: 9px 12px;
    font-size: 12px;
  }
}

html[data-theme="dark"] a:not(.text-white):not([class*="text-white"]) {
  color: var(--theme-link) !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body :is(
  h1, h2, h3, h4, h5, h6,
  p, span, small, strong, em, b, i,
  label, legend,
  li, dt, dd,
  th, td, caption,
  button, input, select, textarea, option
) {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] [class^="text-"],
html[data-theme="dark"] [class*=" text-"] {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/70,
html[data-theme="dark"] .bg-white\/40,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-light {
  background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-gray-300,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-blue-100,
html[data-theme="dark"] .bg-blue-200,
html[data-theme="dark"] .bg-blue-50\/40,
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-green-100,
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-yellow-100,
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100,
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-red-100,
html[data-theme="dark"] .bg-orange-100,
html[data-theme="dark"] .bg-pink-100,
html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-purple-100,
html[data-theme="dark"] .bg-purple-50\/40 {
  background-color: var(--theme-surface-soft) !important;
}

html[data-theme="dark"] .bg-pastel-blue,
html[data-theme="dark"] .bg-pastel-green,
html[data-theme="dark"] .bg-pastel-purple,
html[data-theme="dark"] .bg-pastel-pink,
html[data-theme="dark"] .bg-pastel-yellow,
html[data-theme="dark"] .bg-pastel-red,
html[data-theme="dark"] .bg-pastel-indigo,
html[data-theme="dark"] .bg-pastel-cyan,
html[data-theme="dark"] .bg-pastel-orange {
  background-color: var(--theme-surface-soft) !important;
}

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800 {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400 {
  color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-gray-300\/70,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200 {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
  border-color: var(--theme-border);
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button:not(#global-theme-toggle) {
  border-color: var(--theme-border);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .tab-button.active {
  background-color: #414348 !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .section-wrap,
html[data-theme="dark"] .point-box,
html[data-theme="dark"] .dashboard-view {
  background: var(--theme-surface-soft) !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .section-tag {
  background: #3f4146 !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .point-title {
  color: var(--theme-link) !important;
}

html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: white"] {
  background: var(--theme-surface) !important;
}

html[data-theme="dark"] [style*="color:"] {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border-color: #e5e7eb"],
html[data-theme="dark"] [style*="border-color:#e5e7eb"] {
  border-color: var(--theme-border) !important;
}