/* ================================================================
   色系主题切换系统 - 8 套配色方案
   通过 html[data-theme="xxx"] 切换
   ================================================================ */

/* ========== 1. 橙色 Orange（默认，与 :root 一致） ========== */
[data-theme="orange"] {
  --color-primary: #f97316;
  --color-primary-hover: #ea580c;
  --color-primary-light: #fff7ed;
  --color-primary-bg: #fff8f0;
  --color-primary-border: #fed7aa;
  --gradient-accent: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --gradient-text: linear-gradient(135deg, #1e293b 0%, #f97316 80%);
  --gradient-hero: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%);
}

/* ========== 2. 蓝色 Blue ========== */
[data-theme="blue"] {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-primary-bg: #f0f7ff;
  --color-primary-border: #bfdbfe;
  --gradient-accent: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --gradient-text: linear-gradient(135deg, #1e293b 0%, #2563eb 80%);
  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
}

/* ========== 3. 绿色 Green ========== */
[data-theme="green"] {
  --color-primary: #16a34a;
  --color-primary-hover: #15803d;
  --color-primary-light: #f0fdf4;
  --color-primary-bg: #f0fdf5;
  --color-primary-border: #bbf7d0;
  --gradient-accent: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  --gradient-text: linear-gradient(135deg, #1e293b 0%, #16a34a 80%);
  --gradient-hero: linear-gradient(135deg, #0a1f0f 0%, #14532d 50%, #0a1f0f 100%);
}

/* ========== 4. 紫色 Purple ========== */
[data-theme="purple"] {
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-primary-light: #f5f3ff;
  --color-primary-bg: #f8f5ff;
  --color-primary-border: #ddd6fe;
  --gradient-accent: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  --gradient-text: linear-gradient(135deg, #1e293b 0%, #7c3aed 80%);
  --gradient-hero: linear-gradient(135deg, #180828 0%, #3b1f6e 50%, #180828 100%);
}

/* ========== 5. 红色 Red ========== */
[data-theme="red"] {
  --color-primary: #dc2626;
  --color-primary-hover: #b91c1c;
  --color-primary-light: #fef2f2;
  --color-primary-bg: #fff5f5;
  --color-primary-border: #fecaca;
  --gradient-accent: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  --gradient-text: linear-gradient(135deg, #1e293b 0%, #dc2626 80%);
  --gradient-hero: linear-gradient(135deg, #1a0a0a 0%, #3d1212 50%, #1a0a0a 100%);
}

/* ========== 6. 青色 Teal ========== */
[data-theme="teal"] {
  --color-primary: #0d9488;
  --color-primary-hover: #0f766e;
  --color-primary-light: #f0fdfa;
  --color-primary-bg: #f0fdfb;
  --color-primary-border: #99f6e4;
  --gradient-accent: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  --gradient-text: linear-gradient(135deg, #1e293b 0%, #0d9488 80%);
  --gradient-hero: linear-gradient(135deg, #042f2e 0%, #115e59 50%, #042f2e 100%);
}

/* ========== 7. 粉色 Rose ========== */
[data-theme="rose"] {
  --color-primary: #e11d48;
  --color-primary-hover: #be123c;
  --color-primary-light: #fff1f2;
  --color-primary-bg: #fff5f6;
  --color-primary-border: #fecdd3;
  --gradient-accent: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  --gradient-text: linear-gradient(135deg, #1e293b 0%, #e11d48 80%);
  --gradient-hero: linear-gradient(135deg, #1a0810 0%, #3d1225 50%, #1a0810 100%);
}

/* ========== 8. 暗黑模式 Dark ========== */
[data-theme="dark"] {
  --color-primary: #f97316;
  --color-primary-hover: #fb923c;
  --color-primary-light: #1a1208;
  --color-primary-bg: #1c140c;
  --color-primary-border: #3d2a10;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #f97316 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* 暗黑模式下特定组件微调 */
[data-theme="dark"] .navbar {
  background: rgba(15, 23, 42, 0.96);
}
[data-theme="dark"] .card:hover {
  border-color: var(--color-primary-border);
}
[data-theme="dark"] .table thead {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .comparison-table th {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .comparison-table .col-highlight {
  background: rgba(249, 115, 22, 0.15);
}
[data-theme="dark"] .tabs-header {
  background: var(--color-bg);
}
[data-theme="dark"] .tabs-btn.active {
  background: var(--color-surface);
}
[data-theme="dark"] .footer {
  background: #020617;
}
[data-theme="dark"] .btn-secondary {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
[data-theme="dark"] .btn-secondary:hover {
  background: var(--color-border);
}
[data-theme="dark"] .btn-ghost {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .btn-ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
[data-theme="dark"] .blockquote {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .alert-info {
  background: rgba(37, 99, 235, 0.1);
  color: #93c5fd;
}
[data-theme="dark"] .alert-success {
  background: rgba(22, 163, 74, 0.1);
  color: #86efac;
}
[data-theme="dark"] .alert-warning {
  background: rgba(217, 119, 6, 0.1);
  color: #fcd34d;
}
[data-theme="dark"] .alert-error {
  background: rgba(220, 38, 38, 0.1);
  color: #fca5a5;
}
[data-theme="dark"] .alert-tip {
  background: rgba(124, 58, 237, 0.1);
  color: #c4b5fd;
}
[data-theme="dark"] .stat-item {
  background: var(--color-surface);
}
[data-theme="dark"] .accordion-header:hover {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .table tbody tr:hover {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .table-striped tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .badge-neutral {
  background: var(--color-bg-alt);
  color: var(--color-text-tertiary);
}
[data-theme="dark"] .pagination-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .toc {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .toc-list a:hover,
[data-theme="dark"] .toc-list a.active {
  background: var(--color-primary-light);
}
[data-theme="dark"] .navbar-mobile {
  background: var(--color-surface);
}
[data-theme="dark"] .back-to-top {
  background: var(--color-primary);
}
[data-theme="dark"] .back-to-top:hover {
  background: var(--color-primary-hover);
}
[data-theme="dark"] .hero-stats {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .hero::before {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.08) 0%, transparent 70%);
}

/* 暗黑模式下的主题切换按钮 */
[data-theme="dark"] .theme-toggle {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme="dark"] .theme-toggle:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ================================================================
   复合主题：色系 + 明暗模式
   格式：{color}-{brightness}，如 blue-dark, green-light
   ================================================================ */

/* ========== 橙色 - 浅色（默认） ========= */
[data-theme="orange-light"] {
  /* 继承 orange 的所有变量 */
}

/* ========== 橙色 - 深色 ========= */
[data-theme="orange-dark"] {
  --color-primary: #fb923c;
  --color-primary-hover: #f97316;
  --color-primary-light: #1a1208;
  --color-primary-bg: #1c140c;
  --color-primary-border: #3d2a10;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #fb923c 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* ========== 蓝色 - 浅色 ========= */
[data-theme="blue-light"] {
  /* 继承 blue 的所有变量 */
}

/* ========== 蓝色 - 深色 ========= */
[data-theme="blue-dark"] {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-light: #0c1a2e;
  --color-primary-bg: #0f1d35;
  --color-primary-border: #1e3a5f;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #3b82f6 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* ========== 绿色 - 浅色 ========= */
[data-theme="green-light"] {
  /* 继承 green 的所有变量 */
}

/* ========== 绿色 - 深色 ========= */
[data-theme="green-dark"] {
  --color-primary: #22c55e;
  --color-primary-hover: #16a34a;
  --color-primary-light: #0a1f0f;
  --color-primary-bg: #0c2412;
  --color-primary-border: #14532d;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #22c55e 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* ========== 紫色 - 浅色 ========= */
[data-theme="purple-light"] {
  /* 继承 purple 的所有变量 */
}

/* ========== 紫色 - 深色 ========= */
[data-theme="purple-dark"] {
  --color-primary: #8b5cf6;
  --color-primary-hover: #7c3aed;
  --color-primary-light: #180828;
  --color-primary-bg: #1c0c30;
  --color-primary-border: #3b1f6e;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #8b5cf6 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* ========== 红色 - 浅色 ========= */
[data-theme="red-light"] {
  /* 继承 red 的所有变量 */
}

/* ========== 红色 - 深色 ========= */
[data-theme="red-dark"] {
  --color-primary: #ef4444;
  --color-primary-hover: #dc2626;
  --color-primary-light: #1a0a0a;
  --color-primary-bg: #1c0c0c;
  --color-primary-border: #3d1212;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #ef4444 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* ========== 青色 - 浅色 ========= */
[data-theme="teal-light"] {
  /* 继承 teal 的所有变量 */
}

/* ========== 青色 - 深色 ========= */
[data-theme="teal-dark"] {
  --color-primary: #14b8a6;
  --color-primary-hover: #0d9488;
  --color-primary-light: #042f2e;
  --color-primary-bg: #063533;
  --color-primary-border: #115e59;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #14b8a6 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* ========== 粉色 - 浅色 ========= */
[data-theme="rose-light"] {
  /* 继承 rose 的所有变量 */
}

/* ========== 粉色 - 深色 ========= */
[data-theme="rose-dark"] {
  --color-primary: #f43f5e;
  --color-primary-hover: #e11d48;
  --color-primary-light: #1a0810;
  --color-primary-bg: #1c0a14;
  --color-primary-border: #3d1225;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #f43f5e 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* ========== 灰色 - 浅色 ========= */
[data-theme="gray-light"] {
  /* 继承 gray 的所有变量 */
}

/* ========== 灰色 - 深色 ========= */
[data-theme="gray-dark"] {
  --color-primary: #6b7280;
  --color-primary-hover: #4b5563;
  --color-primary-light: #1a1a1a;
  --color-primary-bg: #1c1c1c;
  --color-primary-border: #374151;

  --color-white: #0f172a;
  --color-bg: #0f172a;
  --color-bg-alt: #1e293b;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-border-light: #1e293b;

  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  --gradient-accent: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  --gradient-text: linear-gradient(135deg, #f1f5f9 0%, #6b7280 80%);
  --gradient-hero: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 30px -12px rgba(0, 0, 0, 0.5);
}

/* ================================================================
   所有深色主题的通用组件微调（使用属性选择器匹配 *-dark）
   ================================================================ */

[data-theme*="-dark"] .navbar {
  background: rgba(15, 23, 42, 0.96);
}
[data-theme*="-dark"] .card:hover {
  border-color: var(--color-primary-border);
}
[data-theme*="-dark"] .table thead {
  background: var(--color-bg-alt);
}
[data-theme*="-dark"] .comparison-table th {
  background: var(--color-bg-alt);
}
[data-theme*="-dark"] .tabs-header {
  background: var(--color-bg);
}
[data-theme*="-dark"] .tabs-btn.active {
  background: var(--color-surface);
}
[data-theme*="-dark"] .footer {
  background: #020617;
}
[data-theme*="-dark"] .btn-secondary {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
[data-theme*="-dark"] .btn-secondary:hover {
  background: var(--color-border);
}
[data-theme*="-dark"] .btn-ghost {
  color: var(--color-text-secondary);
}
[data-theme*="-dark"] .btn-ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
[data-theme*="-dark"] .blockquote {
  background: var(--color-bg-alt);
}
[data-theme*="-dark"] .stat-item {
  background: var(--color-surface);
}
[data-theme*="-dark"] .accordion-header:hover {
  background: var(--color-bg-alt);
}
[data-theme*="-dark"] .table tbody tr:hover {
  background: var(--color-bg-alt);
}
[data-theme*="-dark"] .table-striped tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}
[data-theme*="-dark"] .badge-neutral {
  background: var(--color-bg-alt);
  color: var(--color-text-tertiary);
}
[data-theme*="-dark"] .pagination-btn {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme*="-dark"] .toc {
  background: var(--color-bg-alt);
}
[data-theme*="-dark"] .toc-list a:hover,
[data-theme*="-dark"] .toc-list a.active {
  background: var(--color-primary-light);
}
[data-theme*="-dark"] .navbar-mobile {
  background: var(--color-surface);
}
[data-theme*="-dark"] .back-to-top {
  background: var(--color-primary);
}
[data-theme*="-dark"] .back-to-top:hover {
  background: var(--color-primary-hover);
}
[data-theme*="-dark"] .hero-stats {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme*="-dark"] .theme-toggle {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
[data-theme*="-dark"] .theme-toggle:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ========== CTA 组件暗黑模式适配 ========= */
[data-theme*="-dark"] .cta-banner {
  /* 使用稍微亮一点的背景，与页面形成对比 */
  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%);
  /* 添加阴影创造层次感 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme*="-dark"] .cta-banner h2 {
  color: #f1f5f9;
}
[data-theme*="-dark"] .cta-banner p {
  color: rgba(241, 245, 249, 0.85);
}
[data-theme*="-dark"] .cta-banner li {
  color: rgba(241, 245, 249, 0.85);
}
[data-theme*="-dark"] .cta-banner .btn-outline {
  color: #f1f5f9;
  border-color: rgba(241, 245, 249, 0.5);
}
[data-theme*="-dark"] .cta-banner .btn-outline:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ========== Alert 组件暗黑模式适配 ========= */
[data-theme*="-dark"] .alert-info {
  background: rgba(59, 130, 246, 0.12);
  border-left-color: #3b82f6;
  color: #93c5fd;
}
[data-theme*="-dark"] .alert-info .alert-title {
  color: #bfdbfe;
}
[data-theme*="-dark"] .alert-success {
  background: rgba(34, 197, 94, 0.12);
  border-left-color: #22c55e;
  color: #86efac;
}
[data-theme*="-dark"] .alert-success .alert-title {
  color: #bbf7d0;
}
[data-theme*="-dark"] .alert-warning {
  background: rgba(234, 179, 8, 0.12);
  border-left-color: #eab308;
  color: #fcd34d;
}
[data-theme*="-dark"] .alert-warning .alert-title {
  color: #fde68a;
}
[data-theme*="-dark"] .alert-error {
  background: rgba(239, 68, 68, 0.12);
  border-left-color: #ef4444;
  color: #fca5a5;
}
[data-theme*="-dark"] .alert-error .alert-title {
  color: #fecaca;
}
[data-theme*="-dark"] .alert-tip {
  background: rgba(139, 92, 246, 0.12);
  border-left-color: #8b5cf6;
  color: #c4b5fd;
}
[data-theme*="-dark"] .alert-tip .alert-title {
  color: #ddd6fe;
}