:root {
  --dark-bg: #1a202c;
  --dark-card-bg: #2d3748;
  --dark-text: #e2e8f0;
  --dark-text-secondary: #a0aec0;
  --dark-border: #4a5568;
  --dark-hover-bg: #4a5568;
  --dark-indigo-600: #4c51bf;
  --dark-indigo-700: #434190;
  --dark-blue-100: #2d3748;
  --dark-blue-800: #9fa3f0;
  --dark-green-100: #2d3748;
  --dark-green-800: #9fa3f0;
  --dark-red-100: #2d3748;
  --dark-red-800: #f56565;
  --dark-yellow-100: #2d3748;
  --dark-yellow-800: #f6e05e;
  --dark-purple-100: #2d3748;
  --dark-purple-800: #b794f4;
}

html.dark body {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

html.dark .bg-white {
  background-color: var(--dark-card-bg);
}

html.dark .bg-gray-50 {
  background-color: var(--dark-bg);
}

html.dark .bg-gray-100 {
  background-color: #3a475a;
}

html.dark .text-gray-500 {
  color: var(--dark-text-secondary);
}

html.dark .text-gray-600 {
  color: var(--dark-text-secondary);
}

html.dark .text-gray-700 {
  color: #cbd5e0;
}

html.dark .text-gray-800 {
  color: var(--dark-text);
}

html.dark .text-gray-900 {
  color: #f7fafc;
}

html.dark .text-slate-900 {
  color: #f8fafc;
}

html.dark .text-slate-800 {
  color: #f1f5f9;
}

html.dark .text-slate-700 {
  color: #e2e8f0;
}

html.dark .text-slate-600 {
  color: #cbd5e1;
}

html.dark .text-slate-500 {
  color: #94a3b8;
}

html.dark .text-slate-400 {
  color: #94a3b8;
}

html.dark .text-slate-300 {
  color: #cbd5e1;
}

html.dark .dark\:hidden {
  display: none !important;
}

html.dark .dark\:block {
  display: block !important;
}

html.dark .dark\:inline {
  display: inline !important;
}

html.dark .dark\:inline-block {
  display: inline-block !important;
}

html.dark .dark\:flex {
  display: flex !important;
}

html.dark .dark\:inline-flex {
  display: inline-flex !important;
}

html.dark .border-gray-200 {
  border-color: var(--dark-border);
}

html.dark .border-gray-300 {
  border-color: #667389;
}

html.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}

html.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.26);
}

html.dark .hover\:bg-gray-50:hover {
  background-color: var(--dark-hover-bg);
}

html.dark .hover\:bg-gray-100:hover {
  background-color: #3a475a;
}

html.dark .text-indigo-600 {
  color: #9fa3f0;
}

html.dark .bg-indigo-600 {
  background-color: var(--dark-indigo-600);
}

html.dark .hover\:bg-indigo-700:hover {
  background-color: var(--dark-indigo-700);
}

html.dark #navbar-placeholder > nav {
  background-color: var(--dark-card-bg) !important;
  border-bottom-color: var(--dark-border) !important;
}

html.dark #navbar-placeholder a,
html.dark #navbar-placeholder button {
  color: var(--dark-text);
}

html.dark #navbar-placeholder a:hover {
  color: #9fa3f0;
}

html.dark .gradient-bg {
  background: linear-gradient(to right, #3c366b, #2c5282);
}

html.dark #go-to-top-button {
  background-color: var(--dark-card-bg);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
}

/* Docs page specific */
html.dark .docs-content,
html.dark .docs-content h1,
html.dark .docs-content h2,
html.dark .docs-content h3,
html.dark .docs-content h4,
html.dark .docs-content p,
html.dark .docs-content li,
html.dark .docs-content a {
  color: var(--dark-text) !important;
}

html.dark .docs-content pre[class*="language-"] {
  background: #2d2d2d !important;
}

html.dark .docs-content code {
  background-color: var(--dark-bg) !important;
  color: #f8b44e !important;
}

/* General code tag styles for dark mode */
html.dark code {
  background-color: var(--dark-bg) !important;
  color: #f8b44e !important;
  border: 1px solid var(--dark-border);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 0.875em;
}

/* Code blocks */
html.dark pre {
  background-color: #2d2d2d !important;
  border: 1px solid var(--dark-border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
}

html.dark pre code {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #e2e8f0 !important;
}

/* Docs page collapsible headers */
/* Docs page collapsible header - moved to style_docs.css */
html.dark .docs-collapsible-header {
  color: var(--dark-text) !important;
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-collapsible-header:hover {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-collapsible-header.docs-active {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
}

html.dark .docs-collapsible-header.docs-parent-active {
  color: #9fa3f0 !important;
}

/* Docs page collapsible content */
html.dark .docs-collapsible-content {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

/* Docs page navigation links */
html.dark .docs-nav a {
  color: var(--dark-text-secondary) !important;
}

html.dark .docs-nav a:hover {
  color: var(--dark-text) !important;
  background-color: var(--dark-hover-bg) !important;
}

html.dark .docs-nav a.active {
  color: #9fa3f0 !important;
  background-color: var(--dark-indigo-600) !important;
}

/* Docs page sidebar navigation */
html.dark .docs-sidebar-nav a {
  color: var(--dark-text) !important;
}

html.dark .docs-sidebar-nav a:hover {
  color: var(--dark-text) !important;
  background-color: var(--dark-hover-bg) !important;
}

html.dark .docs-sidebar-nav a.docs-active {
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border-left: 3px solid var(--primary-color) !important;
}

/* Docs page section headers */
html.dark .docs-section-header {
  color: var(--dark-text) !important;
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-section-header:hover {
  background-color: var(--dark-hover-bg) !important;
}

/* Docs page content areas */
html.dark .docs-main-content {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
}

/* Docs page table styles */
html.dark .docs-content table {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-content th {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-content td {
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-content tr:hover {
  background-color: var(--dark-hover-bg) !important;
}

/* Docs page blockquote styles */
html.dark .docs-content blockquote {
  background-color: var(--dark-bg) !important;
  border-left-color: var(--dark-indigo-600) !important;
  color: var(--dark-text) !important;
}

/* Docs page list styles */
html.dark .docs-content ul,
html.dark .docs-content ol {
  color: var(--dark-text) !important;
}

html.dark .docs-content li {
  color: var(--dark-text) !important;
}

/* Docs page link styles */
html.dark .docs-content a {
  color: #9fa3f0 !important;
}

html.dark .docs-content a:hover {
  color: #818cf8 !important;
  text-decoration: underline;
}

/* Docs page heading styles */
html.dark .docs-content h1,
html.dark .docs-content h2,
html.dark .docs-content h3,
html.dark .docs-content h4,
html.dark .docs-content h5,
html.dark .docs-content h6 {
  color: var(--dark-text) !important;
  border-bottom-color: var(--dark-border) !important;
}

/* Docs page paragraph styles */
html.dark .docs-content p {
  color: var(--dark-text) !important;
}

/* Docs page emphasis styles */
html.dark .docs-content strong,
html.dark .docs-content b {
  color: var(--dark-text) !important;
}

html.dark .docs-content em,
html.dark .docs-content i {
  color: var(--dark-text-secondary) !important;
}

/* Benchmarks page specific */
html.dark .task-type-toggle.active {
  background-color: var(--dark-indigo-600);
  color: white;
}

html.dark .multi-select-dropdown {
  background-color: var(--dark-card-bg);
  border-color: var(--dark-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.26);
  /* Darker shadow for dark mode */
  padding: 0.5rem;
  /* Match light mode padding */
}

html.dark .multi-select-trigger {
  background-color: var(--dark-card-bg);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

html.dark .multi-select-trigger .selected-text {
  color: var(--dark-text);
}

html.dark .multi-select-dropdown label:hover {
  background-color: #3a475a;
  /* Darker hover background for dark mode */
}

html.dark .filter-section-toggle {
  background-color: #2d3748a1;
  /* A slightly transparent dark card background */
  border-color: var(--dark-border);
}

html.dark .filter-section-toggle:hover {
  background-color: #4a5568a1;
}

html.dark .filter-content {
  background-color: #2d3748a1;
  /* A slightly transparent dark card background */
  border-color: var(--dark-border);
}

html.dark .action-button {
  background-color: var(--dark-card-bg);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

html.dark .action-button:hover {
  background-color: var(--dark-hover-bg);
}

html.dark .chart-container canvas {
  background-color: var(--dark-card-bg);
}

html.dark .chart-container .chartjs-legend ul li {
  color: var(--dark-text);
}

html.dark .chartjs-render-monitor {
  background-color: var(--dark-card-bg);
}

html.dark .analysis-report-panel {
  background-color: var(--dark-card-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark #dataTable th {
  background-color: #3a475a;
  color: var(--dark-text);
}

html.dark #dataTable td {
  border-color: var(--dark-border);
}

html.dark #dataTable tr:hover td {
  background-color: var(--dark-hover-bg);
}

html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark ::-webkit-scrollbar-track {
  background: var(--dark-bg);
}

html.dark ::-webkit-scrollbar-thumb {
  background-color: var(--dark-border);
  border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: var(--dark-hover-bg);
}

/* Datasets & Methods page specific */
html.dark .filter-chip,
html.dark .sort-button {
  background-color: #3a475a;
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .filter-chip.active,
html.dark .sort-button:hover {
  background-color: var(--dark-indigo-600);
}

html.dark .filter-chip .count-badge {
  color: var(--dark-text-secondary);
}

html.dark .filter-chip.active .count-badge {
  color: white;
}

html.dark .card-grid::-webkit-scrollbar-track,
html.dark .filter-panel::-webkit-scrollbar-track {
  background: var(--dark-card-bg);
}

/* Explicit scrollbar styles for method/dataset description cards */
html.dark .method-description::-webkit-scrollbar,
html.dark .dataset-description::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark .method-description::-webkit-scrollbar-track,
html.dark .dataset-description::-webkit-scrollbar-track {
  background: var(--dark-card-bg);
}

html.dark .method-description::-webkit-scrollbar-thumb,
html.dark .dataset-description::-webkit-scrollbar-thumb {
  background-color: var(--dark-border);
  border-radius: 4px;
}

html.dark .method-description::-webkit-scrollbar-thumb:hover,
html.dark .dataset-description::-webkit-scrollbar-thumb:hover {
  background-color: var(--dark-hover-bg);
}

html.dark .sticky-sidebar {
  background-color: var(--dark-card-bg);
}

/* Input and Select elements */
html.dark input[type="text"],
html.dark select {
  background-color: var(--dark-card-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark input[type="text"]:focus,
html.dark select:focus {
  border-color: var(--dark-indigo-600);
  box-shadow: 0 0 0 1px var(--dark-indigo-600);
}

html.dark input[type="text"]::placeholder {
  color: var(--dark-text-secondary);
}

html.dark .placeholder-gray-500::placeholder {
  color: var(--dark-text-secondary);
}

/* Mobile sticky controls */
html.dark #mobile-sticky-controls-benchmarks {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .mobile-sidebar {
  background-color: var(--dark-card-bg) !important;
  border-right-color: var(--dark-border) !important;
}

html.dark #mobile-sticky-controls-benchmarks {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark #mobile-filter-drawer-benchmarks {
  background-color: var(--dark-card-bg) !important;
  border-right-color: var(--dark-border) !important;
}

html.dark #mobile-sticky-controls-benchmarks {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark #mobile-sticky-controls-benchmarks input[type="text"],
html.dark #mobile-sticky-controls-benchmarks select {
  background-color: var(--dark-card-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark #mobile-sticky-controls-benchmarks input[type="text"]:focus,
html.dark #mobile-sticky-controls-benchmarks select:focus {
  border-color: var(--dark-indigo-600);
  box-shadow: 0 0 0 1px var(--dark-indigo-600);
}

html.dark #mobile-sticky-controls-benchmarks .text-gray-400,
html.dark #mobile-sticky-controls-benchmarks .text-gray-500 {
  color: var(--dark-text-secondary) !important;
}

html.dark #mobile-sticky-controls-benchmarks .text-gray-700,
html.dark #mobile-sticky-controls-benchmarks .text-gray-900 {
  color: var(--dark-text) !important;
}

html.dark #mobile-sticky-controls-benchmarks .border-gray-300 {
  border-color: var(--dark-border) !important;
}

html.dark #mobile-sticky-controls-benchmarks .hover\:bg-gray-50:hover {
  background-color: var(--dark-hover-bg) !important;
}

/* Generic Mobile Sticky Controls (for Datasets and Methods pages) */
html.dark #mobile-sticky-controls {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark #mobile-sticky-controls input[type="text"],
html.dark #mobile-sticky-controls select {
  background-color: var(--dark-card-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark #mobile-sticky-controls input[type="text"]:focus,
html.dark #mobile-sticky-controls select:focus {
  border-color: var(--dark-indigo-600);
  box-shadow: 0 0 0 1px var(--dark-indigo-600);
}

html.dark #mobile-sticky-controls .text-gray-400,
html.dark #mobile-sticky-controls .text-gray-500 {
  color: var(--dark-text-secondary) !important;
}

html.dark #mobile-sticky-controls .text-gray-700,
html.dark #mobile-sticky-controls .text-gray-900 {
  color: var(--dark-text) !important;
}

html.dark #mobile-sticky-controls .border-gray-300 {
  border-color: var(--dark-border) !important;
}

html.dark #mobile-sticky-controls .hover\:bg-gray-50:hover {
  background-color: var(--dark-hover-bg) !important;
}

/* Mobile Filter Drawer specific styles */
html.dark #mobile-filter-drawer-benchmarks h2,
html.dark #mobile-filter-drawer-benchmarks .mobile-sidebar-close {
  color: var(--dark-text);
}

html.dark #mobile-filter-drawer-benchmarks .text-gray-700,
html.dark #mobile-filter-drawer-benchmarks .text-gray-800 {
  color: var(--dark-text) !important;
}

html.dark #mobile-filter-drawer-benchmarks .text-gray-500 {
  color: var(--dark-text-secondary) !important;
}

html.dark #mobile-filter-drawer-benchmarks .border-gray-200,
html.dark #mobile-filter-drawer-benchmarks .border-gray-300 {
  border-color: var(--dark-border) !important;
}

html.dark #mobile-filter-drawer-benchmarks .bg-gray-50 {
  background-color: var(--dark-card-bg) !important;
}

html.dark #mobile-filter-drawer-benchmarks .multi-select-trigger,
html.dark #mobile-filter-drawer-benchmarks .task-type-toggle,
html.dark #mobile-filter-drawer-benchmarks #reset-filters-mobile-benchmarks {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark #mobile-filter-drawer-benchmarks .multi-select-trigger:hover,
html.dark #mobile-filter-drawer-benchmarks .task-type-toggle:hover,
html.dark
  #mobile-filter-drawer-benchmarks
  #reset-filters-mobile-benchmarks:hover {
  background-color: var(--dark-hover-bg) !important;
}

html.dark #mobile-filter-drawer-benchmarks .multi-select-dropdown {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark #mobile-filter-drawer-benchmarks .multi-select-dropdown label {
  color: var(--dark-text) !important;
}

html.dark #mobile-filter-drawer-benchmarks .multi-select-dropdown label:hover {
  background-color: var(--dark-hover-bg) !important;
}

html.dark #mobile-filter-drawer-benchmarks .task-type-toggle.active {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
  border-color: var(--dark-indigo-600) !important;
}

html.dark #mobile-filter-drawer-benchmarks .text-blue-600,
html.dark #mobile-filter-drawer-benchmarks .text-green-600,
html.dark #mobile-filter-drawer-benchmarks .text-purple-600 {
  color: var(--dark-indigo-600) !important;
  /* Use a consistent accent color for icons */
}

html.dark #mobile-filter-drawer-benchmarks .bg-blue-50,
html.dark #mobile-filter-drawer-benchmarks .bg-green-50,
html.dark #mobile-filter-drawer-benchmarks .bg-purple-50 {
  background-color: var(--dark-card-bg) !important;
  /* Use card background for filter section toggles */
}

html.dark #mobile-filter-drawer-benchmarks .bg-blue-100:hover,
html.dark #mobile-filter-drawer-benchmarks .bg-green-100:hover,
html.dark #mobile-filter-drawer-benchmarks .bg-purple-100:hover {
  background-color: var(--dark-hover-bg) !important;
}

/* Docs page specific */
html.dark #docs-sidebar {
  background-color: var(--dark-card-bg);
}

/* Mobile menu */
html.dark #mobile-menu {
  background-color: var(--dark-card-bg);
}

html.dark .mobile-nav-link:hover {
  background-color: var(--dark-hover-bg);
}

/* Docs page mobile sidebar */
html.dark .docs-mobile-sidebar {
  background-color: var(--dark-card-bg);
  border-right-color: var(--dark-border);
}

html.dark .docs-mobile-sidebar h2,
html.dark .docs-mobile-sidebar .docs-mobile-sidebar-close {
  color: var(--dark-text);
}

html.dark .docs-mobile-sidebar nav a,
html.dark .docs-mobile-sidebar nav .docs-collapsible-header {
  color: var(--dark-text-secondary);
}

html.dark .docs-mobile-sidebar nav a:hover,
html.dark .docs-mobile-sidebar nav .docs-collapsible-header:hover {
  background-color: var(--dark-hover-bg);
  color: var(--dark-text);
}

html.dark .docs-mobile-sidebar nav a.docs-active,
html.dark .docs-mobile-sidebar nav .docs-collapsible-header.docs-parent-active {
  color: #9fa3f0 !important;
  /* A light indigo to match other active links */
}

html.dark .code-block-container .copy-button {
  background-color: var(--dark-card-bg);
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border);
  opacity: 1;
}

html.dark .code-block-container .copy-button:hover {
  background-color: var(--dark-hover-bg);
}

html.dark kbd {
  background-color: var(--dark-gray-600, #4a5568);
  color: var(--dark-text, #e2e8f0);
  border: 1px solid var(--dark-border, #4a5568);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

/* Specifically style the new chart control select dropdown */
html.dark .chart-control-button {
  background-color: var(--dark-card-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

html.dark .chart-control-button:hover {
  background-color: var(--dark-hover-bg);
}

/* Tooltip dark mode styles are handled inside the Chart.js options object directly */

/* Additional code tag styles for all pages */
html.dark .text-code,
html.dark .inline-code {
  background-color: var(--dark-bg) !important;
  color: #f8b44e !important;
  border: 1px solid var(--dark-border);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 0.875em;
}

/* Syntax highlighting for code blocks */
html.dark .hljs,
html.dark .highlight {
  background-color: #2d2d2d !important;
  color: #e2e8f0 !important;
}

html.dark .hljs-keyword,
html.dark .highlight .k {
  color: #ff79c6 !important;
}

html.dark .hljs-string,
html.dark .highlight .s {
  color: #f1fa8c !important;
}

html.dark .hljs-comment,
html.dark .highlight .c {
  color: #6272a4 !important;
}

html.dark .hljs-number,
html.dark .highlight .m {
  color: #bd93f9 !important;
}

html.dark .hljs-function,
html.dark .highlight .f {
  color: #50fa7b !important;
}

html.dark .hljs-variable,
html.dark .highlight .v {
  color: #f8f8f2 !important;
}

/* Docs page specific additional styles */
html.dark .docs-container {
  background-color: var(--dark-card-bg) !important;
}

html.dark .docs-header {
  background-color: var(--dark-card-bg) !important;
  border-bottom-color: var(--dark-border) !important;
}

html.dark .docs-footer {
  background-color: var(--dark-card-bg) !important;
  border-top-color: var(--dark-border) !important;
}

/* Docs page search and filter elements */
html.dark .docs-search {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-search:focus {
  border-color: var(--dark-indigo-600) !important;
  box-shadow: 0 0 0 1px var(--dark-indigo-600) !important;
}

html.dark .docs-filter {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* Docs page breadcrumb */
html.dark .docs-breadcrumb {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text-secondary) !important;
}

html.dark .docs-breadcrumb a {
  color: var(--dark-text-secondary) !important;
}

html.dark .docs-breadcrumb a:hover {
  color: var(--dark-text) !important;
}

/* Docs page toc (table of contents) */
html.dark .docs-toc {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-toc a {
  color: var(--dark-text-secondary) !important;
}

html.dark .docs-toc a:hover {
  color: var(--dark-text) !important;
  background-color: var(--dark-hover-bg) !important;
}

html.dark .docs-toc a.active {
  color: #9fa3f0 !important;
  background-color: var(--dark-indigo-600) !important;
}

/* Docs page pagination */
html.dark .docs-pagination {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-pagination a {
  color: var(--dark-text) !important;
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-pagination a:hover {
  background-color: var(--dark-hover-bg) !important;
}

html.dark .docs-pagination a.active {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
}

/* Docs page alert/notice boxes */
html.dark .docs-alert,
html.dark .docs-notice {
  background-color: var(--dark-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-alert.info {
  background-color: #1e3a8a !important;
  border-color: #3b82f6 !important;
}

html.dark .docs-alert.warning {
  background-color: #78350f !important;
  border-color: #f59e0b !important;
}

html.dark .docs-alert.error {
  background-color: #7f1d1d !important;
  border-color: #ef4444 !important;
}

html.dark .docs-alert.success {
  background-color: #064e3b !important;
  border-color: #10b981 !important;
}

/* Docs page definition lists */
html.dark .docs-content dl {
  color: var(--dark-text) !important;
}

html.dark .docs-content dt {
  color: var(--dark-text) !important;
  font-weight: bold;
}

html.dark .docs-content dd {
  color: var(--dark-text-secondary) !important;
}

/* Docs page horizontal rules */
html.dark .docs-content hr {
  border-color: var(--dark-border) !important;
}

/* Docs page image captions */
html.dark .docs-content figcaption {
  color: var(--dark-text-secondary) !important;
}

/* Docs page footnotes */
html.dark .docs-content .footnote {
  background-color: var(--dark-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* Docs page math equations */
html.dark .docs-content .math {
  color: var(--dark-text) !important;
}

/* Docs page syntax highlighting themes */
html.dark .docs-content .syntax-highlight {
  background-color: #2d2d2d !important;
}

/* Docs page code line numbers */
html.dark .docs-content .line-numbers {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text-secondary) !important;
  border-right-color: var(--dark-border) !important;
}

/* Docs page copy button for code blocks */
html.dark .docs-content .copy-code-button {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-content .copy-code-button:hover {
  background-color: var(--dark-hover-bg) !important;
}

/* Docs page expandable sections */
html.dark .docs-content .expandable {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-content .expandable-header {
  color: var(--dark-text) !important;
  background-color: var(--dark-card-bg) !important;
}

html.dark .docs-content .expandable-header:hover {
  background-color: var(--dark-hover-bg) !important;
}

html.dark .docs-content .expandable-content {
  background-color: var(--dark-bg) !important;
  border-top-color: var(--dark-border) !important;
}

/* Docs page tabs */
html.dark .docs-content .tabs {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-content .tab-header {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-secondary) !important;
}

html.dark .docs-content .tab-header.active {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
}

html.dark .docs-content .tab-header:hover {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-content .tab-content {
  background-color: var(--dark-bg) !important;
  border-color: var(--dark-border) !important;
}

/* Docs page callouts */
html.dark .docs-content .callout {
  background-color: var(--dark-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-content .callout.note {
  border-left-color: #3b82f6 !important;
}

html.dark .docs-content .callout.warning {
  border-left-color: #f59e0b !important;
}

html.dark .docs-content .callout.error {
  border-left-color: #ef4444 !important;
}

html.dark .docs-content .callout.success {
  border-left-color: #10b981 !important;
}

/* Docs page tooltips */
html.dark .docs-content .tooltip {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Docs page modals */
html.dark .docs-content .modal {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-content .modal-header {
  background-color: var(--dark-card-bg) !important;
  border-bottom-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-content .modal-body {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-content .modal-footer {
  background-color: var(--dark-card-bg) !important;
  border-top-color: var(--dark-border) !important;
}

/* Docs page buttons */
html.dark .docs-content .btn {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-content .btn:hover {
  background-color: var(--dark-hover-bg) !important;
}

html.dark .docs-content .btn-primary {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
}

html.dark .docs-content .btn-primary:hover {
  background-color: var(--dark-indigo-700) !important;
}

/* Docs page badges */
html.dark .docs-content .badge {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Docs page progress bars */
html.dark .docs-content .progress {
  background-color: var(--dark-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark .docs-content .progress-bar {
  background-color: var(--dark-indigo-600) !important;
}

/* Docs page cards */
html.dark .docs-content .card {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-content .card-header {
  background-color: var(--dark-card-bg) !important;
  border-bottom-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-content .card-body {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

html.dark .docs-content .card-footer {
  background-color: var(--dark-card-bg) !important;
  border-top-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* Active filter chips and selections */
html.dark .active-filter-chip,
html.dark .active-sort-chip {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border) !important;
}

html.dark .active-filter-chip button,
html.dark .active-sort-chip button {
  color: var(--dark-text-secondary) !important;
}

html.dark .active-filter-chip button:hover,
html.dark .active-sort-chip button:hover {
  color: var(--dark-text) !important;
}

/* Blue color variants for dark mode */
html.dark .bg-blue-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-blue-100 {
  background-color: #1e3a8a !important;
  color: #93c5fd !important;
}

html.dark .bg-blue-200 {
  background-color: #4b5563 !important;
}

html.dark .text-blue-800 {
  color: #93c5fd !important;
}

html.dark .text-blue-600 {
  color: #9fa3f0 !important;
}

html.dark .text-blue-700 {
  color: #818cf8 !important;
}

/* Green color variants for dark mode */
html.dark .bg-green-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-green-100 {
  background-color: #065f46 !important;
  color: #6ee7b7 !important;
}

html.dark .bg-green-200 {
  background-color: #4b5563 !important;
}

html.dark .text-green-800 {
  color: #6ee7b7 !important;
}

html.dark .text-green-600 {
  color: #68d391 !important;
}

html.dark .text-green-700 {
  color: #48bb78 !important;
}

/* Red color variants for dark mode */
html.dark .bg-red-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-red-100 {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

html.dark .bg-red-200 {
  background-color: #4b5563 !important;
}

html.dark .text-red-800 {
  color: #fca5a5 !important;
}

html.dark .text-red-600 {
  color: #f56565 !important;
}

html.dark .text-red-700 {
  color: #e53e3e !important;
}

/* Yellow color variants for dark mode */
html.dark .bg-yellow-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-yellow-100 {
  background-color: #92400e !important;
  color: #fde047 !important;
}

html.dark .bg-yellow-200 {
  background-color: #4b5563 !important;
}

html.dark .text-yellow-800 {
  color: #fde047 !important;
}

html.dark .text-yellow-600 {
  color: #f6e05e !important;
}

html.dark .text-yellow-700 {
  color: #ecc94b !important;
}

/* Purple color variants for dark mode */
html.dark .bg-purple-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-purple-100 {
  background-color: #6b46c1 !important;
  color: #c4b5fd !important;
}

html.dark .bg-purple-200 {
  background-color: #4b5563 !important;
}

html.dark .text-purple-800 {
  color: #c4b5fd !important;
}

html.dark .text-purple-600 {
  color: #b794f4 !important;
}

html.dark .text-purple-700 {
  color: #a855f7 !important;
}

/* Tab button styles for dark mode */
html.dark .tab-button {
  background-color: transparent !important;
  color: var(--dark-text-secondary) !important;
  border: none !important;
  transition: color 0.2s;
}

html.dark .tab-button:hover {
  background-color: transparent !important;
  color: var(--dark-text) !important;
}

html.dark .tab-button.active {
  background-color: transparent !important;
  color: #9fa3f0 !important;
  border-bottom: 2px solid #9fa3f0 !important;
}

/* Badge and chip styles for dark mode */
html.dark .badge,
html.dark .chip {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--dark-border) !important;
}

html.dark .badge.blue,
html.dark .chip.blue {
  background-color: var(--dark-blue-100) !important;
  color: var(--dark-blue-800) !important;
  border-color: var(--dark-indigo-600) !important;
}

html.dark .badge.green,
html.dark .chip.green {
  background-color: var(--dark-green-100) !important;
  color: var(--dark-green-800) !important;
  border-color: #48bb78 !important;
}

html.dark .badge.red,
html.dark .chip.red {
  background-color: var(--dark-red-100) !important;
  color: var(--dark-red-800) !important;
  border-color: #e53e3e !important;
}

html.dark .badge.yellow,
html.dark .chip.yellow {
  background-color: var(--dark-yellow-100) !important;
  color: var(--dark-yellow-800) !important;
  border-color: #ecc94b !important;
}

html.dark .badge.purple,
html.dark .chip.purple {
  background-color: var(--dark-purple-100) !important;
  color: var(--dark-purple-800) !important;
  border-color: #a855f7 !important;
}

/* Overview card styles for dark mode */
html.dark .overview-card {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .overview-card h3 {
  color: var(--dark-text) !important;
}

html.dark .overview-card p {
  color: var(--dark-text-secondary) !important;
}

html.dark .overview-card ul {
  color: var(--dark-text-secondary) !important;
}

html.dark .overview-card a {
  color: #9fa3f0 !important;
}

html.dark .overview-card a:hover {
  color: #818cf8 !important;
}

/* Ensure ALL overview-card list items change color on hover in dark mode */
html.dark .overview-card .card-description li:hover,
html.dark .overview-card .card-description li:hover *,
html.dark .overview-card .card-description > *:hover,
html.dark .overview-card .card-description > *:hover * {
  color: #ffffff !important;
}

/* Keep bullet highlight consistent on hover */
html.dark .overview-card .card-description li:hover::before {
  color: #818cf8 !important;
}

/* Extra specificity to ensure homepage overview list items definitely turn white */
html.dark #overview-cards-container .overview-card ul.card-description li:hover,
html.dark
  #overview-cards-container
  .overview-card
  ul.card-description
  li:hover
  * {
  color: #ffffff !important;
}

/* Switchable overview card specific styles */
html.dark #switchableOverviewCard {
  background-color: var(--dark-card-bg) !important;
}

html.dark #switchableOverviewCard h3 {
  color: var(--dark-text) !important;
}

html.dark #switchableOverviewCard p {
  color: var(--dark-text-secondary) !important;
}

html.dark #switchableOverviewCard ul {
  color: var(--dark-text-secondary) !important;
}

html.dark #switchableOverviewCard a {
  color: #68d391 !important;
}

html.dark #switchableOverviewCard a:hover {
  color: #48bb78 !important;
}

/* Process flow styles for dark mode */
html.dark .process-step {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .process-step:hover {
  background-color: var(--dark-hover-bg) !important;
}

html.dark .process-step.active {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
}

/* Toggle switch styles for dark mode */
html.dark .switch {
  background-color: transparent !important;
}

html.dark .slider {
  background-color: #374151 !important;
  /* 柔和深灰 */
  border-radius: 28px;
}

html.dark .slider:before {
  background-color: #e2e8f0 !important;
  /* 高对比圆点 */
}

html.dark .switch input:checked + .slider {
  background-color: #6366f1 !important;
  /* 高亮蓝色 */
}

/* End-to-End Models note styles for dark mode */
html.dark .dl-note {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Key features list styles for dark mode */
html.dark #key-features-list li {
  color: var(--dark-text-secondary) !important;
}

html.dark #key-features-list li strong {
  color: var(--dark-text) !important;
}

/* Recent updates list styles for dark mode */
html.dark #recent-updates-list li {
  color: var(--dark-text-secondary) !important;
}

/* Datasets and methods content styles for dark mode */
html.dark #datasetsContent li,
html.dark #methodsContent li {
  color: var(--dark-text-secondary) !important;
}

/* Chart control styles for dark mode */
html.dark .chart-control-label {
  color: var(--dark-text) !important;
}

html.dark .chart-control-select {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .chart-control-select:focus {
  border-color: var(--dark-indigo-600) !important;
  box-shadow: 0 0 0 1px var(--dark-indigo-600) !important;
}

html.dark .chart-control-icon {
  color: var(--dark-text-secondary) !important;
}

/* Analysis card toggle styles for dark mode */
html.dark .analysis-card-toggle {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .analysis-card-toggle:hover {
  background-color: var(--dark-hover-bg) !important;
}

html.dark .analysis-card-toggle h3 {
  color: var(--dark-text) !important;
}

/* Section content styles for dark mode */
html.dark .section-content {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* No results message styles for dark mode */
html.dark .no-results-message {
  color: var(--dark-text-secondary) !important;
}

html.dark .no-results-message i {
  color: var(--dark-border) !important;
}

/* Search help modal styles for dark mode */
html.dark #search-help-modal .bg-white {
  background-color: var(--dark-card-bg) !important;
}

html.dark #search-help-modal h3 {
  color: var(--dark-text) !important;
}

html.dark #search-help-modal p {
  color: var(--dark-text-secondary) !important;
}

/* Search container styles for dark mode */
html.dark #search-container {
  background-color: var(--dark-card-bg) !important;
}

html.dark #search-container input {
  background-color: var(--dark-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark #search-container input:focus {
  border-color: var(--dark-indigo-600) !important;
  box-shadow: 0 0 0 1px var(--dark-indigo-600) !important;
}

html.dark #search-results {
  background-color: var(--dark-card-bg) !important;
}

html.dark #search-results li {
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark #search-results li:hover {
  background-color: var(--dark-hover-bg) !important;
}

html.dark #search-footer {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
}

html.dark #search-footer a {
  color: #9fa3f0 !important;
}

html.dark #search-footer a:hover {
  color: #818cf8 !important;
}

/* Indigo text color for dark mode */
html.dark .text-indigo-700 {
  color: #b4b8f8 !important;
}

/* Task type toggle button styles for dark mode */
html.dark .task-type-toggle {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text-secondary) !important;
  border: 1px solid var(--dark-border) !important;
  transition: background 0.2s, color 0.2s;
}

html.dark .task-type-toggle.active {
  background-color: var(--dark-indigo-600) !important;
  color: #fff !important;
  border-color: var(--dark-indigo-600) !important;
}

html.dark .task-type-toggle:hover {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
}

/* Rose color variants for dark mode */
html.dark .bg-rose-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-rose-100 {
  background-color: #e11d48 !important;
  color: #fda4af !important;
}

html.dark .bg-rose-200 {
  background-color: #4b5563 !important;
}

html.dark .text-rose-800 {
  color: #fda4af !important;
}

html.dark .text-rose-600 {
  color: #f687b3 !important;
}

html.dark .text-rose-700 {
  color: #f43f5e !important;
}

/* Table header styles for dark mode */
html.dark table th {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark table thead th {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border-bottom-color: var(--dark-border) !important;
}

html.dark table tbody th {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Table cell styles for dark mode */
html.dark table td {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark table tr:hover td {
  background-color: var(--dark-hover-bg) !important;
}

html.dark table tr:hover th {
  background-color: var(--dark-hover-bg) !important;
}

/* Specific table styles for benchmarks page */
html.dark #benchmarkTable th {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark #benchmarkTable td {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark #benchmarkTable tr:hover td {
  background-color: var(--dark-hover-bg) !important;
}

html.dark #benchmarkTable tr:nth-child(even) td {
  background-color: var(--dark-bg) !important;
}

html.dark #benchmarkTable tr:nth-child(even):hover td {
  background-color: var(--dark-hover-bg) !important;
}

/* Active selections container */
html.dark .active-selections-container {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

/* Filter chips general styles */
html.dark .filter-chip {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .filter-chip:hover {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
}

html.dark .filter-chip.active {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
}

/* Sort chips */
html.dark .sort-chip {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .sort-chip:hover {
  background-color: var(--dark-indigo-600) !important;
  color: white !important;
}

/* Active filters and sorts containers */
html.dark #activeFiltersContainer {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

html.dark #activeSortContainer {
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

/* Active filters and sorts headers */
html.dark #activeFiltersContainer h3,
html.dark #activeSortContainer h4 {
  color: var(--dark-text) !important;
}

/* Clear all buttons in active filters/sorts */
html.dark #clearAllChips,
html.dark #clearAllSorts {
  color: #9fa3f0 !important;
}

html.dark #clearAllChips:hover,
html.dark #clearAllSorts:hover {
  color: #818cf8 !important;
}

/* Sort hint text */
html.dark #sort-hint {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text-secondary) !important;
  border-color: var(--dark-border) !important;
}

html.dark #sort-hint kbd {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Additional blue background utilities */
html.dark .bg-blue-500\/10 {
  background-color: rgba(45, 55, 72, 0.1) !important;
}

html.dark .bg-blue-500\/20 {
  background-color: rgba(45, 55, 72, 0.2) !important;
}

html.dark .bg-blue-500\/30 {
  background-color: rgba(45, 55, 72, 0.3) !important;
}

html.dark .bg-blue-500\/40 {
  background-color: rgba(45, 55, 72, 0.4) !important;
}

html.dark .bg-blue-500\/50 {
  background-color: rgba(45, 55, 72, 0.5) !important;
}

html.dark .bg-blue-500\/60 {
  background-color: rgba(45, 55, 72, 0.6) !important;
}

html.dark .bg-blue-500\/70 {
  background-color: rgba(45, 55, 72, 0.7) !important;
}

html.dark .bg-blue-500\/80 {
  background-color: rgba(45, 55, 72, 0.8) !important;
}

html.dark .bg-blue-500\/90 {
  background-color: rgba(45, 55, 72, 0.9) !important;
}

/* Table specific styles for all tables */
html.dark .benchmark-table th {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .benchmark-table td {
  background-color: var(--dark-card-bg) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

html.dark .benchmark-table tr:hover td {
  background-color: var(--dark-hover-bg) !important;
}

html.dark .benchmark-table tr:nth-child(even) td {
  background-color: var(--dark-bg) !important;
}

html.dark .benchmark-table tr:nth-child(even):hover td {
  background-color: var(--dark-hover-bg) !important;
}

/* Table header icons */
html.dark .benchmark-table th i {
  color: var(--dark-text-secondary) !important;
}

html.dark .benchmark-table th:hover i {
  color: var(--dark-text) !important;
}

/* Table sort indicators */
html.dark .benchmark-table th sup {
  color: #9fa3f0 !important;
}

/* Table links */
html.dark .benchmark-table a {
  color: #9fa3f0 !important;
}

html.dark .benchmark-table a:hover {
  color: #818cf8 !important;
  text-decoration: underline;
}

/* Table font weights */
html.dark .benchmark-table .font-medium {
  color: var(--dark-text) !important;
}

html.dark .benchmark-table .text-gray-900 {
  color: var(--dark-text) !important;
}

html.dark .benchmark-table .text-gray-500 {
  color: var(--dark-text-secondary) !important;
}

html.dark #main-chart-controls {
  background: var(--dark-card-bg) !important;
  border-color: var(--dark-border) !important;
}

/* Dark mode styles for mobile sidebar toggle button */
html.dark #mobile-sidebar-toggle {
  background-color: var(--dark-card-bg);
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
}

html.dark #mobile-sidebar-toggle:hover {
  background-color: var(--dark-hover-bg);
  color: var(--dark-text);
}

/* Dark mode styles for mobile sidebar overlay */
html.dark .docs-mobile-sidebar-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* Indigo color variants for dark mode */
html.dark .bg-indigo-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-indigo-100 {
  background-color: #4f46e5 !important;
  color: #a5b4fc !important;
}

html.dark .bg-indigo-200 {
  background-color: #4b5563 !important;
}

html.dark .text-indigo-800 {
  color: #a5b4fc !important;
}

html.dark .text-indigo-600 {
  color: #9fa3f0 !important;
}

html.dark .text-indigo-700 {
  color: #b4b8f8 !important;
}

/* Pink color variants for dark mode */
html.dark .bg-pink-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-pink-100 {
  background-color: #9d174d !important;
  color: #f9a8d4 !important;
}

html.dark .bg-pink-200 {
  background-color: #4b5563 !important;
}

html.dark .text-pink-800 {
  color: #f9a8d4 !important;
}

html.dark .text-pink-600 {
  color: #f687b3 !important;
}

html.dark .text-pink-700 {
  color: #ec4899 !important;
}

/* Cyan color variants for dark mode */
html.dark .bg-cyan-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-cyan-100 {
  background-color: #0e7490 !important;
  color: #67e8f9 !important;
}

html.dark .bg-cyan-200 {
  background-color: #4b5563 !important;
}

html.dark .text-cyan-800 {
  color: #67e8f9 !important;
}

html.dark .text-cyan-600 {
  color: #81e6d9 !important;
}

html.dark .text-cyan-700 {
  color: #14b8a6 !important;
}

/* Orange color variants for dark mode */
html.dark .bg-orange-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-orange-100 {
  background-color: #9a3412 !important;
  color: #fed7aa !important;
}

html.dark .bg-orange-200 {
  background-color: #4b5563 !important;
}

html.dark .text-orange-800 {
  color: #fed7aa !important;
}

html.dark .text-orange-600 {
  color: #fbbf24 !important;
}

html.dark .text-orange-700 {
  color: #f59e0b !important;
}

/* Teal color variants for dark mode */
html.dark .bg-teal-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-teal-100 {
  background-color: #0f766e !important;
  color: #5eead4 !important;
}

html.dark .bg-teal-200 {
  background-color: #4b5563 !important;
}

/* Overview Card specific scrollbar styles (Dark Mode) */
html.dark .overview-card ul::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark .overview-card ul::-webkit-scrollbar-track {
  background: var(--dark-card-bg);
  /* Use dark card background for track */
}

html.dark .overview-card ul::-webkit-scrollbar-thumb {
  background-color: var(--dark-border);
  /* Use dark border color for thumb */
  border-radius: 4px;
}

html.dark .overview-card ul::-webkit-scrollbar-thumb:hover {
  background-color: var(--dark-hover-bg);
  /* Use dark hover background for thumb hover */
}

/* For Firefox */
html.dark .overview-card ul {
  scrollbar-width: thin;
  scrollbar-color: var(--dark-border) var(--dark-card-bg);
}

html.dark .text-teal-800 {
  color: #5eead4 !important;
}

html.dark .text-teal-600 {
  color: #4fd1c7 !important;
}

html.dark .text-teal-700 {
  color: #0d9488 !important;
}

/* Emerald color variants for dark mode */
html.dark .bg-emerald-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-emerald-100 {
  background-color: #047857 !important;
  color: #6ee7b7 !important;
}

html.dark .bg-emerald-200 {
  background-color: #4b5563 !important;
}

html.dark .text-emerald-800 {
  color: #6ee7b7 !important;
}

html.dark .text-emerald-600 {
  color: #68d391 !important;
}

html.dark .text-emerald-700 {
  color: #10b981 !important;
}

/* Lime color variants for dark mode */
html.dark .bg-lime-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-lime-100 {
  background-color: #4d7c0f !important;
  color: #bef264 !important;
}

html.dark .bg-lime-200 {
  background-color: #4b5563 !important;
}

html.dark .text-lime-800 {
  color: #bef264 !important;
}

html.dark .text-lime-600 {
  color: #d3f4a7 !important;
}

html.dark .text-lime-700 {
  color: #84cc16 !important;
}

/* Amber color variants for dark mode */
html.dark .bg-amber-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-amber-100 {
  background-color: #d97706 !important;
  color: #fde047 !important;
}

html.dark .bg-amber-200 {
  background-color: #4b5563 !important;
}

html.dark .text-amber-800 {
  color: #fde047 !important;
}

html.dark .text-amber-600 {
  color: #f6e05e !important;
}

html.dark .text-amber-700 {
  color: #f59e0b !important;
}

/* Rose color variants for dark mode */
html.dark .bg-rose-50 {
  background-color: #2d3748 !important;
}

html.dark .bg-rose-100 {
  background-color: #e11d48 !important;
  color: #fda4af !important;
}

html.dark .bg-rose-200 {
  background-color: #4b5563 !important;
}

html.dark .text-rose-800 {
  color: #fda4af !important;
}

html.dark .text-rose-600 {
  color: #f687b3 !important;
}

html.dark .text-rose-700 {
  color: #f43f5e !important;
}

/* ================================================== */
/* ===== 新版导航栏暗色模式样式 (下划线风格 + 高亮文字) ===== */
/* ================================================== */

/* 1. 基础状态：高亮灰白文字，无背景 */
html.dark .desktop-nav-link,
html.dark .nav-dropdown-button {
  /* 字体提亮：使用 Slate-200，比之前的 Slate-400 亮很多，清晰可读 */
  color: #e2e8f0 !important;

  /* 核心修改：移除背景色 */
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;

  /* 初始无下划线 */
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* 2. 悬浮状态：文字变靛蓝 + 细下划线 */
html.dark .desktop-nav-link:hover,
html.dark .nav-dropdown-button:hover {
  /* 悬浮色：使用 Indigo-400，鲜亮但不刺眼 */
  color: #818cf8 !important;
  background-color: transparent !important;

  /* 下划线样式 */
  text-decoration: underline !important;
  text-decoration-color: #818cf8 !important; /* 线条颜色与文字一致 */
  text-decoration-thickness: 2px !important; /* 线条厚度 */
  text-underline-offset: 6px !important; /* 线条与文字的距离，保持呼吸感 */
}

/* 3. 激活状态：高亮文字 + 粗下划线 (Home/Docs 等) */
html.dark .desktop-nav-link.nav-active,
html.dark .nav-dropdown-button.nav-active,
html.dark .nav-dropdown-button[aria-expanded="true"] {
  /* 激活色：使用更亮的 Indigo-300 */
  color: #a5b4fc !important;
  background-color: transparent !important;

  font-weight: 600 !important;

  /* 激活态下划线样式 - 更粗更明显 */
  text-decoration: underline !important;
  text-decoration-color: #a5b4fc !important;
  text-decoration-thickness: 3px !important; /* 激活时线条加粗 */
  text-underline-offset: 6px !important;
}

/* 4. 修复 Docs 按钮内箭头的颜色 */
html.dark .nav-dropdown-button svg {
  color: inherit; /* 箭头颜色跟随文字 */
  opacity: 0.9;
  transition: transform 0.2s;
}
/* ===== DOCS PAGE 深色模式专用样式补充 ===== */

html.dark .code-block-container {
  background: #23272e;
  border-radius: 0.6rem;
  box-shadow: 0 2px 8px 0 rgba(20, 20, 40, 0.18);
  border: 1px solid #23272e;
}

html.dark .code-block-container pre,
html.dark .code-block-container pre[class*="language-"] {
  background: transparent;
  color: #e2e8f0 !important;
  font-size: 1rem;
  line-height: 1.7;
  font-family: "JetBrains Mono", "Fira Mono", "Menlo", "Monaco", "Consolas",
    monospace;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 1.2rem 1.5rem;
  border-radius: 0.6rem;
  overflow-x: auto;
}

html.dark .code-block-container code {
  background: none;
  color: #e2e8f0 !important;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  border: none;
  padding: 0;
}

html.dark pre[class*="language-"] > code .highlight-line {
  background: #23272e;
  display: block;
  margin-right: -1.5rem;
  margin-left: -1.5rem;
  padding: 0 1.5rem;
}

html.dark .code-block-container .copy-button {
  background-color: #23272e;
  color: #e2e8f0 !important;
  border: 1px solid #353a42;
  box-shadow: 0 1px 4px 0 rgba(20, 20, 40, 0.18);
  opacity: 1;
}

html.dark .code-block-container .copy-button:hover {
  background-color: #353a42;
  color: #fff !important;
  border-color: #6366f1;
}

html.dark .code-block-container .copy-button.copied {
  background: #6366f1;
  color: #fff !important;
  border-color: #6366f1;
  opacity: 1;
}

html.dark .code-block-container .copy-button .copied-label {
  color: #fff;
}

@media (max-width: 600px) {
  html.dark .code-block-container .copy-button {
    font-size: 1rem;
    padding: 0.12rem 0.38rem 0.12rem 0.38rem;
    opacity: 0.7;
    top: 0.3rem;
    right: 0.3rem;
  }

  html.dark .code-block-container .copy-button.copied {
    opacity: 1;
  }

  html.dark .code-block-container .scroll-hint {
    display: block;
    text-align: center;
    font-size: 0.85em;
    color: #7c8a97;
    margin-top: 0.3em;
    margin-bottom: 0.2em;
    letter-spacing: 0.01em;
    user-select: none;
  }
}

html.dark .code-block-container .scroll-hint {
  display: none;
}

html.dark .code-block-container pre,
html.dark .code-block-container pre[class*="language-"] {
  padding-right: 3.2rem;
}

@media (max-width: 600px) {
  html.dark .code-block-container pre,
  html.dark .code-block-container pre[class*="language-"] {
    padding-right: 2.2rem;
  }
}

html.dark .code-block-container pre,
html.dark .code-block-container pre[class*="language-"] {
  color: #e2e8f0 !important;
}

html.dark .code-block-container code {
  color: #e2e8f0 !important;
}

/* PrismJS 深色高亮token */
html.dark .code-block-container .token.comment,
html.dark .code-block-container .token.prolog,
html.dark .code-block-container .token.doctype,
html.dark .code-block-container .token.cdata {
  color: #7c8a97;
}

html.dark .code-block-container .token.punctuation {
  color: #b5b9c5;
}

html.dark .code-block-container .token.property,
html.dark .code-block-container .token.tag,
html.dark .code-block-container .token.boolean,
html.dark .code-block-container .token.number,
html.dark .code-block-container .token.constant,
html.dark .code-block-container .token.symbol {
  color: #cba6f7;
}

html.dark .code-block-container .token.selector,
html.dark .code-block-container .token.attr-name,
html.dark .code-block-container .token.string,
html.dark .code-block-container .token.char,
html.dark .code-block-container .token.builtin,
html.dark .code-block-container .token.inserted {
  color: #7ee787;
}

html.dark .code-block-container .token.operator,
html.dark .code-block-container .token.entity,
html.dark .code-block-container .token.url,
html.dark .code-block-container .token.variable {
  color: #f4a261;
}

html.dark .code-block-container .token.atrule,
html.dark .code-block-container .token.attr-value,
html.dark .code-block-container .token.keyword {
  color: #7aa2f7;
}

html.dark .code-block-container .token.function,
html.dark .code-block-container .token.class-name {
  color: #facc15;
}

html.dark .code-block-container .token.regex,
html.dark .code-block-container .token.important {
  color: #f38ba8;
}

/* 代码块字体无重影，优化抗锯齿（深色） */
html.dark .code-block-container pre,
html.dark .code-block-container pre[class*="language-"],
html.dark .code-block-container code {
  text-shadow: none !important;
  filter: none !important;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}