/* ===== 设计系统变量 - 完整优化版 ===== */
:root {
  /* === 基础颜色系统 === */
  /* 主色盘 - 默认靛蓝色系 */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;
  
  /* 次要色盘 - 基于主色的衍生色 */
  --color-secondary-50: #f0f4ff;
  --color-secondary-100: #dbeafe;
  --color-secondary-200: #bfdbfe;
  --color-secondary-300: #93c5fd;
  --color-secondary-400: #60a5fa;
  --color-secondary-500: #3b82f6;
  --color-secondary-600: #2563eb;
  --color-secondary-700: #1d4ed8;
  --color-secondary-800: #1e40af;
  --color-secondary-900: #1e3a8a;
  
  /* 中性色盘 - 基于主色调整的灰色系 */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  
  /* 状态色 - 与主色协调 */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #06b6d4;
  --color-light: #f5f5f5;

  /* === 透明度系统 === */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-8: 0.08;
  --opacity-10: 0.1;
  --opacity-12: 0.12;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* 白色透明度 */
  --white-alpha: rgba(255, 255, 255, var(--opacity-0));
  --white-alpha-5: rgba(255, 255, 255, var(--opacity-5));
  --white-alpha-8: rgba(255, 255, 255, var(--opacity-8));
  --white-alpha-10: rgba(255, 255, 255, var(--opacity-10));
  --white-alpha-12: rgba(255, 255, 255, var(--opacity-12));
  --white-alpha-15: rgba(255, 255, 255, var(--opacity-15));
  --white-alpha-20: rgba(255, 255, 255, var(--opacity-20));
  --white-alpha-30: rgba(255, 255, 255, var(--opacity-30));
  --white-alpha-50: rgba(255, 255, 255, var(--opacity-50));
  --white-alpha-60: rgba(255, 255, 255, var(--opacity-60));
  --white-alpha-70: rgba(255, 255, 255, var(--opacity-70));
  --white-alpha-80: rgba(255, 255, 255, var(--opacity-80));
  --white-alpha-90: rgba(255, 255, 255, var(--opacity-90));
  --white-alpha-95: rgba(255, 255, 255, var(--opacity-95));
  
  /* 黑色透明度 */
  --black-alpha: rgba(0, 0, 0, var(--opacity-0));
  --black-alpha-5: rgba(0, 0, 0, var(--opacity-5));
  --black-alpha-10: rgba(0, 0, 0, var(--opacity-10));
  --black-alpha-15: rgba(0, 0, 0, var(--opacity-15));
  --black-alpha-20: rgba(0, 0, 0, var(--opacity-20));
  --black-alpha-30: rgba(0, 0, 0, var(--opacity-30));
  --black-alpha-40: rgba(0, 0, 0, var(--opacity-40));
  --black-alpha-50: rgba(0, 0, 0, var(--opacity-50));
  --black-alpha-60: rgba(0, 0, 0, var(--opacity-60));
  --black-alpha-70: rgba(0, 0, 0, var(--opacity-70));
  --black-alpha-80: rgba(0, 0, 0, var(--opacity-80));

  /* 主色透明度 */
  --primary-alpha: rgba(99, 102, 241, var(--opacity-0));
  --primary-alpha-5: rgba(99, 102, 241, var(--opacity-5));
  --primary-alpha-10: rgba(99, 102, 241, var(--opacity-10));
  --primary-alpha-15: rgba(99, 102, 241, var(--opacity-15));
  --primary-alpha-20: rgba(99, 102, 241, var(--opacity-20));
  --primary-alpha-30: rgba(99, 102, 241, var(--opacity-30));
  --primary-alpha-40: rgba(99, 102, 241, var(--opacity-40));
  --primary-alpha-50: rgba(99, 102, 241, var(--opacity-50));

  /* === 玻璃态效果 === */
  --glass-blur: blur(20px);
  --glass-blur-lg: blur(16px);
  --glass-blur-md: blur(12px);
  --glass-blur-sm: blur(8px);
  --glass-blur-xs: blur(4px);
  --glass-blur-xxs: blur(0px);
  
  --glass-shadow: 0 8px 32px var(--black-alpha-20);
  --glass-shadow-light: 0 4px 16px var(--black-alpha-10);

  /* === 主题变量 - 浅色玻璃主题（默认） === */
  --theme-primary: var(--color-primary-500);
  --theme-secondary: var(--color-secondary-500);
  --theme-accent: var(--color-primary-600);
  
  /* 背景色 - 浅色玻璃 */
  --theme-bg-primary: var(--color-gray-50);
  --theme-bg-secondary: #ffffff;
  --theme-bg-tertiary: #ffffff;
  --theme-bg-surface: #ffffff;
  --theme-bg-elevated: var(--color-gray-50);
  --theme-bg-dark: var(--color-gray-200);
  
  /* 文本色 - 深色文本在浅色背景上 */
  --theme-text-primary: var(--color-gray-800);
  --theme-text-secondary: var(--color-gray-700);
  --theme-text-tertiary: var(--color-gray-600);
  --theme-text-muted: var(--color-gray-500);
  --theme-text-on-primary: #ffffff;
  --theme-text-on-secondary: #ffffff;
  --theme-text-on-dark: #ffffff;
  
  /* 边框色 */
  --theme-border-primary: var(--color-gray-200);
  --theme-border-secondary: var(--color-gray-100);
  --theme-border-accent: var(--color-primary-500);
  --theme-border-light: var(--color-gray-300);
  
  /* 玻璃效果 - 调整为浅色玻璃 */
  --theme-glass-bg: rgba(255, 255, 255, 0.85);
  --theme-glass-bg-medium: rgba(255, 255, 255, 0.92);
  --theme-glass-bg-heavy: rgba(255, 255, 255, 0.96);
  --theme-glass-border: rgba(226, 232, 240, 0.6);
  --theme-glass-border-medium: rgba(226, 232, 240, 0.8);
  --theme-glass-light: rgba(255, 255, 255, 0.15);
  --theme-glass-hover-light: rgba(255, 255, 255, 0.25);
  
  /* 交互状态 */
  --theme-hover-light: rgba(99, 102, 241, 0.06);
  --theme-hover-medium: rgba(99, 102, 241, 0.12);
  --theme-hover-heavy: rgba(99, 102, 241, 0.18);
  --theme-active: rgba(99, 102, 241, 0.24);
  
  /* 叠加层 */
  --theme-overlay-light: rgba(15, 23, 42, 0.04);
  --theme-overlay-medium: rgba(15, 23, 42, 0.08);
  --theme-overlay-heavy: rgba(15, 23, 42, 0.5);

  /* === 语义化颜色变量 - 全部指向主题变量 === */
  /* 背景色 */
  --color-bg-primary: var(--theme-bg-primary);
  --color-bg-secondary: var(--theme-bg-secondary);
  --color-bg-tertiary: var(--theme-bg-tertiary);
  --color-bg-surface: var(--theme-bg-surface);
  --color-bg-elevated: var(--theme-bg-elevated);
  --color-surface-dark: var(--theme-bg-dark);
  
  /* 文本色 */
  --color-text-primary: var(--theme-text-primary);
  --color-text-secondary: var(--theme-text-secondary);
  --color-text-tertiary: var(--theme-text-tertiary);
  --color-text-muted: var(--theme-text-muted);
  --color-text-on-primary: var(--theme-text-on-primary);
  --color-text-on-secondary: var(--theme-text-on-secondary);
  --color-text-on-surface: var(--theme-text-primary);
  
  /* 边框色 */
  --color-border-primary: var(--theme-border-primary);
  --color-border-secondary: var(--theme-border-secondary);
  --color-border-accent: var(--theme-border-accent);
  --color-border-light: var(--theme-border-light);
  
  /* 交互色 */
  --color-interactive-primary: var(--theme-primary);
  --color-interactive-hover: var(--color-primary-600);
  --color-interactive-active: var(--color-primary-700);
  --color-interactive-focus: var(--color-primary-100);

  /* === 组件颜色 === */
  /* 主色快捷方式 */
  --color-primary: var(--theme-primary);
  --color-primary-light: var(--color-primary-400);
  --color-primary-dark: var(--color-primary-600);
  --color-secondary: var(--theme-secondary);
  --color-secondary-light: var(--color-secondary-400);
  --color-secondary-dark: var(--color-secondary-600);
  
  /* 背景色 */
  --color-background: var(--color-bg-primary);
  --color-surface: var(--color-bg-surface);
  --color-surface-light: var(--color-bg-elevated);
  --color-surface-dark: var(--color-bg-tertiary);
  
  /* 文本颜色 */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-disabled: var(--color-text-tertiary);
  --text-on-primary: var(--color-text-on-primary);
  --text-on-secondary: var(--color-text-on-surface);
  
  /* === 站点交互颜色 === */
  --site-item-bg: transparent;
  --site-item-hover-bg: var(--theme-hover-light);
  --site-item-drag-over-bg: var(--primary-alpha-15);
  --site-item-drag-over-border: var(--color-interactive-primary);
  
  /* === 添加按钮颜色 === */
  --add-site-icon-bg: var(--theme-glass-light);
  --add-site-icon-hover-bg: var(--theme-glass-hover-light);
  
  --add-site-btn-bg: transparent;
  --add-site-btn-border: var(--theme-glass-hover-light);
  --add-site-btn-hover-bg: var(--theme-hover-light);
  --add-site-btn-hover-border: var(--color-primary-light);
  
  /* === 页面指示器颜色 === */
  --page-dot-bg: rgba(255, 255, 255, 0.3);
  --page-dot-active-bg: rgba(255, 255, 255, 0.9);
  --page-dot-hover-bg: rgba(255, 255, 255, 0.6);
  --page-indicator-bg: rgba(0, 0, 0, 0.4);
  
  /* === 空状态颜色 === */
  --empty-state-color: rgba(255, 255, 255, 0.5);
  
  /* === 玻璃效果快捷方式 === */
  --glass-bg: var(--theme-glass-bg);
  --glass-border: var(--theme-glass-border);
  
  /* === 侧边栏优化 === */
  --sidebar-bg: transparent;
  --sidebar-border: rgba(255, 255, 255, 0.2);
  --sidebar-group-bg: transparent;
  --sidebar-group-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-group-active-bg: rgba(255, 255, 255, 0.15);
  --sidebar-divider: rgba(255, 255, 255, 0.15);
  --sidebar-text: rgba(255, 255, 255, 0.9);
  --sidebar-text-secondary: rgba(255, 255, 255, 0.8);
  
  /* 侧边栏主题选项 */
  --theme-option-bg: rgba(255, 255, 255, 0.02);
  --theme-option-border: rgba(255, 255, 255, 0.1);
  --theme-option-hover-bg: rgba(255, 255, 255, 0.05);
  --theme-option-hover-border: rgba(255, 255, 255, 0.2);
  --theme-option-active-bg: rgba(99, 102, 241, 0.1);
    
  /* 侧边栏主题预览 */
  --theme-preview-bg: rgba(0, 0, 0, 0.1);
    
  /* 侧边栏重置按钮 */
  --reset-warning-border: #f59e0b;
  --reset-warning-bg: rgba(245, 158, 11, 0.05);
  --reset-danger-border: #ef4444;
  --reset-danger-bg: rgba(239, 68, 68, 0.05);  
  
  /* 表单元素颜色 */
  --input-bg: var(--theme-bg-secondary);
  --input-border: var(--theme-border-primary);
  --input-focus-border: var(--color-interactive-primary);
  --input-focus-shadow: rgba(99, 102, 241, 0.1);
  --input-placeholder: var(--color-text-tertiary);
  --input-text: var(--color-text-primary);
  
  /* 模态框颜色 */
  --modal-bg: var(--theme-bg-surface);
  --modal-border: var(--theme-border-primary);
  --modal-text: var(--theme-text-primary);
  --modal-title: var(--theme-text-primary);
  --modal-header-bg: var(--theme-bg-secondary);
  
  /* 上下文菜单颜色 */
  --context-menu-bg: var(--theme-glass-bg-heavy);
  --context-menu-border: var(--theme-glass-border);
  --context-menu-text: var(--theme-text-primary);
  --context-menu-hover-bg: var(--color-interactive-primary);
  --context-menu-hover-text: white;
  
  /* 搜索相关颜色 */
  --search-bg: var(--theme-bg-secondary);
  --search-focus-bg: var(--theme-bg-secondary);
  --search-overlay-bg: var(--theme-bg-surface);
  --search-overlay-title: var(--theme-text-primary);
  --search-overlay-border: var(--theme-border-primary);
  --search-text: var(--theme-text-primary);
  --search-placeholder: var(--theme-text-tertiary);
  
  /* 历史记录颜色 */
  --history-item-bg: var(--theme-bg-secondary);
  --history-item-hover-bg: var(--theme-hover-light);
  --history-item-border: transparent;
  --history-item-hover-border: var(--color-primary-light);
  --history-item-text: var(--theme-text-primary);
  --history-delete-bg: var(--theme-glass-bg);
  --history-delete-hover-bg: rgba(239, 68, 68, 0.15);
  --history-delete-hover-border: rgba(239, 68, 68, 0.3);
  --history-delete-hover-color: #dc2626;
  
  /* 建议项颜色 */
  --suggestion-item-bg: transparent;
  --suggestion-item-hover-bg: var(--theme-hover-light);
  --suggestion-item-border: var(--theme-border-primary);
  --suggestion-item-hover-border: var(--color-primary-light);
  --suggestion-item-text: var(--theme-text-primary);
  
  /* 引擎选项颜色 */
  --engine-option-bg: var(--theme-bg-secondary);
  --engine-option-border: var(--theme-border-primary);
  --engine-option-hover-border: var(--color-primary-light);
  --engine-option-active-bg: rgba(99, 102, 241, 0.1);
  --engine-option-active-border: var(--color-interactive-primary);
  --engine-option-text: var(--theme-text-primary);
  
  /* === 设置面板专用变量 === */
  /* 设置侧边栏 - 深色毛玻璃效果 */
  --settings-sidebar-bg: rgba(15, 23, 42, 0.95);
  --settings-content-bg: var(--theme-bg-secondary);
  --settings-form-bg: var(--theme-bg-primary);
  
  /* 设置面板文本颜色 - 侧边栏用白色，内容区用深色 */
  --settings-text-primary: var(--theme-text-primary);
  --settings-text-secondary: var(--theme-text-secondary);
  --settings-text-tertiary: var(--theme-text-tertiary);
  --settings-text-muted: var(--theme-text-muted);
  --settings-text-on-primary: white;

  /* 设置面板侧边栏专用颜色 */
  --settings-sidebar-text-primary: rgba(255, 255, 255, 0.95);
  --settings-sidebar-text-secondary: rgba(255, 255, 255, 0.7);
  --settings-sidebar-text-tertiary: rgba(255, 255, 255, 0.5);
  --settings-sidebar-border: rgba(255, 255, 255, 0.12);
  --settings-sidebar-hover: rgba(255, 255, 255, 0.08);
  --settings-sidebar-active: rgba(255, 255, 255, 0.15);

  --settings-border-primary: var(--theme-border-primary);
  --settings-border-secondary: var(--theme-border-secondary);
  --settings-border-light: var(--theme-border-light);

  --settings-hover-bg: var(--theme-hover-light);
  --settings-active-bg: var(--color-interactive-primary);
  --settings-focus-ring: rgba(99, 102, 241, 0.2);

  /* 控制组颜色 */
  --control-group-bg: var(--theme-bg-primary);
  --control-group-border: var(--theme-border-primary);
  --control-label-color: var(--theme-text-primary);
  --control-description-color: var(--theme-text-secondary);

  /* 滑动条颜色 */
  --slider-track-bg: var(--theme-border-primary);
  --slider-thumb-bg: var(--color-interactive-primary);
  --slider-thumb-border: var(--theme-bg-surface);
  --slider-thumb-shadow: rgba(0, 0, 0, 0.2);
  --slider-thumb-hover-shadow: rgba(99, 102, 241, 0.4);
  --slider-value-bg: rgba(99, 102, 241, 0.1);
  --slider-value-border: rgba(99, 102, 241, 0.2);
  --slider-text: var(--theme-text-primary);

  /* 开关控制颜色 */
  --switch-bg: var(--theme-border-primary);
  --switch-active-bg: var(--color-interactive-primary);
  --switch-thumb-bg: var(--theme-bg-surface);
  --switch-label-bg: var(--theme-bg-secondary);
  --switch-label-border: var(--theme-border-primary);
  --switch-label-hover-border: var(--color-primary-light);
  --switch-text: var(--theme-text-primary);

  /* 选项卡片颜色 */
  --option-card-bg: var(--theme-bg-secondary);
  --option-card-border: var(--theme-border-primary);
  --option-card-hover-bg: var(--theme-hover-light);
  --option-card-hover-border: var(--color-primary-light);
  --option-card-active-bg: rgba(99, 102, 241, 0.1);
  --option-card-active-border: var(--color-interactive-primary);
  --option-card-text: var(--theme-text-primary);

  /* 按钮颜色 */
  --btn-primary-bg: var(--gradient-primary);
  --btn-primary-text: var(--color-text-on-primary);
  --btn-secondary-bg: var(--theme-bg-secondary);
  --btn-secondary-text: var(--theme-text-primary);
  --btn-secondary-border: var(--theme-border-primary);
  --btn-secondary-hover-bg: var(--theme-hover-light);

  /* 重置区域颜色 */
  --reset-section-bg: var(--theme-bg-secondary);
  --reset-section-border: var(--theme-border-primary);
  --reset-section-header-bg: var(--theme-bg-secondary);
  --reset-section-header-hover-bg: var(--theme-hover-light);
  --reset-option-bg: var(--theme-bg-secondary);
  --reset-option-border: var(--theme-border-primary);
  --reset-option-hover-bg: var(--theme-hover-light);
  --reset-warning-border: #f59e0b;
  --reset-warning-bg: rgba(245, 158, 11, 0.1);
  --reset-danger-border: #ef4444;
  --reset-danger-bg: rgba(239, 68, 68, 0.1);
  --reset-text: var(--theme-text-primary);

  /* === 修复的背景色问题 - 使用主题变量 === */
  --icon-option-bg: var(--theme-bg-tertiary);
  --icon-option-border: var(--theme-border-primary);
  --icon-option-hover-bg: var(--theme-hover-light);
  --icon-option-active-bg: var(--color-interactive-primary);
  --icon-option-text: var(--theme-text-primary);

  --animation-option-bg: var(--theme-bg-tertiary);
  --animation-option-border: var(--theme-border-primary);
  --animation-option-hover-bg: var(--theme-hover-light);
  --animation-option-active-bg: var(--color-interactive-primary);
  --animation-option-text: var(--theme-text-primary);

  --time-format-bg: var(--theme-bg-tertiary);
  --time-format-border: var(--theme-border-primary);
  --time-format-option-bg: var(--theme-bg-tertiary);
  --time-format-option-hover-bg: var(--theme-hover-light);
  --time-format-option-active-bg: var(--color-interactive-primary);
  --time-format-text: var(--theme-text-primary);

  --font-option-bg: var(--theme-bg-tertiary);
  --font-option-border: var(--theme-border-primary);
  --font-option-hover-bg: var(--theme-hover-light);
  --font-option-active-bg: var(--color-interactive-primary);
  --font-option-text: var(--theme-text-primary);

  /* 存储信息颜色 */
  --storage-info-bg: var(--theme-bg-secondary);
  --storage-info-border: var(--theme-border-primary);
  --info-label-color: var(--theme-text-secondary);
  --info-value-color: var(--theme-text-primary);

  /* 滚动条颜色 */
  --scrollbar-track: var(--theme-border-secondary);
  --scrollbar-thumb: var(--theme-border-primary);
  --scrollbar-thumb-hover: var(--color-primary-light);

  /* === 渐变色彩 === */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-400) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-400) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, #34d399 100%);
  --gradient-dark: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);

  /* === 间距系统 === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;
  --spacing-xxxxl: 48px;
  
  /* === 圆角系统 === */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 10px;
  --border-radius-xxl: 12px;
  --border-radius-xxxl: 16px;
  --border-radius-round: 50%;
  --border-radius-pill: 9999px;
  
  /* === 阴影系统 === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-2xl: 0 12px 32px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
  
  /* === 动画系统 === */
  --transition-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* === 布局系统 === */
  --sidebar-width: 240px;
  --sidebar-compact-width: 48px;
  --header-height: 150px;
  --footer-height: 50px;
  --search-height: 60px;
  --settings-panel-width: 400px;
  --settings-sidebar-width: 85px;
  --container-max-width: 1200px;
  --container-padding: 24px;
  
  /* === 字体系统 === */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Monaco', monospace;
  --font-family-serif: 'Georgia', 'Times New Roman', serif;
  --font-family-base: PingFang SC,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
  
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.85rem;
  --font-size-lg: 0.9rem;
  --font-size-xl: 1rem;
  --font-size-2xl: 1.1rem;
  --font-size-3xl: 1.25rem;
  --font-size-4xl: 1.5rem;
  --font-size-5xl: 1.75rem;
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* === 功能设置变量 === */
  --header-time-font-size: 70px;
  --header-text-opacity: 1;
  --header-text-color: #ffffff;
  --header-font-family: 'HarmonyOS_Sans', 'Inter', system-ui, sans-serif;
  --header-font-weight: normal;
  --custom-text-size: 32px;
  --logo-size: 80px;
  
  --site-icon-size: 75px;
  --site-icon-radius: 15px;
  --site-icon-opacity: 1;
  --site-spacing: 20px;
  --site-name-size: 0.9rem;
  --site-name-color: var(--theme-text-primary);
  --page-indicator-display: flex;
  --grid-max-width: 1200px;
    
  /* 动画时长 */
  --animation-duration: 300ms;
  --transition-fast: 0.15s;
  --transition-medium: 0.3s;
  --transition-slow: 0.5s;
  
  /* 动画开关 */
  --enable-animations: 1;
  
  /* 缓动函数 */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 2.5);
      
  --search-height: 55px;
  --search-radius: 12px;
  --search-opacity: 1;
  
  /* === Z-index 系统 === */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
}

/* ===== 亮色主题完整优化 ===== */
[data-theme="light"] {
  /* === 背景系统优化 === */
  --theme-bg-primary: #f8fafc;
  --theme-bg-secondary: #ffffff;
  --theme-bg-tertiary: #f1f5f9;
  --theme-bg-surface: #ffffff;
  --theme-bg-elevated: #f8fafc;
  --color-surface-dark: var(--color-gray-200);
  
  /* === 文本系统优化 === */
  --theme-text-primary: rgba(0, 0, 0, 0.95);
  --theme-text-secondary: rgba(0, 0, 0, 0.75);
  --theme-text-tertiary: rgba(0, 0, 0, 0.6);
  --theme-text-muted: rgba(0, 0, 0, 0.5);
  --theme-text-on-primary: #ffffff;
  
  /* === 边框系统优化 === */
  --theme-border-primary: rgba(0, 0, 0, 0.12);
  --theme-border-secondary: rgba(0, 0, 0, 0.08);
  --theme-border-accent: var(--color-primary-500);
  --theme-border-light: rgba(0, 0, 0, 0.06);
 
  --sidebar-bg: rgba(255, 255, 255, 0.9);
  --sidebar-border: rgba(0, 0, 0, 0.1);
  --sidebar-divider: rgba(0, 0, 0, 0.06);
  --sidebar-text: var(--theme-text-primary);
  --sidebar-text-secondary: var(--theme-text-secondary);
  --sidebar-group-bg: transparent;
  --sidebar-group-hover-bg: rgba(99, 102, 241, 0.08);
  --sidebar-group-active-bg: rgba(99, 102, 241, 0.15);
  --sidebar-icon: var(--theme-text-secondary);
  --sidebar-icon-hover: var(--theme-text-primary);
  --sidebar-icon-active: var(--color-primary);
  --sidebar-control-bg: transparent;
  --sidebar-control-hover-bg: rgba(99, 102, 241, 0.05);  
  
  /* === 玻璃效果优化 === */
  --theme-glass-bg: rgba(255, 255, 255, 0.92);
  --theme-glass-bg-medium: rgba(255, 255, 255, 0.96);
  --theme-glass-bg-heavy: rgba(255, 255, 255, 0.98);
  --theme-glass-border: rgba(226, 232, 240, 0.8);
  --theme-glass-border-medium: rgba(226, 232, 240, 0.9);
  
  /* === 交互状态优化 === */
  --theme-hover-light: rgba(0, 0, 0, 0.04);
  --theme-hover-medium: rgba(0, 0, 0, 0.08);
  --theme-hover-heavy: rgba(0, 0, 0, 0.12);
  --theme-active: rgba(99, 102, 241, 0.24);
  
  /* === 叠加层优化 === */
  --theme-overlay-light: rgba(15, 23, 42, 0.04);
  --theme-overlay-medium: rgba(15, 23, 42, 0.08);
  --theme-overlay-heavy: rgba(15, 23, 42, 0.16);

  /* === 组件特定优化 === */
  --empty-state-color: rgba(0, 0, 0, 0.35);
  --page-dot-bg: rgba(0, 0, 0, 0.15);
  --page-dot-active-bg: rgba(0, 0, 0, 0.7);
  --page-dot-hover-bg: rgba(0, 0, 0, 0.3);
  --page-indicator-bg: rgba(255, 255, 255, 0.95);
  
  --sidebar-divider: rgba(0, 0, 0, 0.06);
  --add-site-btn-hover-border: rgba(0, 0, 0, 0.25);
  
  /* === 站点交互优化 === */
  --site-item-bg: transparent;
  --site-item-hover-bg: rgba(0, 0, 0, 0.04);
  --site-item-drag-over-bg: rgba(99, 102, 241, 0.1);
  --site-item-drag-over-border: var(--color-interactive-primary);
  
  /* === 添加按钮优化 === */
  --add-site-btn-bg: transparent;
  --add-site-btn-border: rgba(0, 0, 0, 0.1);
  --add-site-btn-hover-bg: rgba(0, 0, 0, 0.04);
  --add-site-btn-hover-border: rgba(0, 0, 0, 0.3);
  
  /* === 设置面板优化 === */
  --settings-sidebar-bg: rgba(255, 255, 255, 0.98);
  --settings-content-bg: #ffffff;
  --settings-form-bg: #f8fafc;
  --control-group-bg: rgba(255, 255, 255, 0.95);
  --control-group-border: rgba(0, 0, 0, 0.1);
  
  /* 设置面板侧边栏专用颜色 */
  --settings-sidebar-text-primary: rgba(0, 0, 0, 0.95);
  --settings-sidebar-text-secondary: rgba(0, 0, 0, 0.7);
  --settings-sidebar-text-tertiary: rgba(0, 0, 0, 0.5);
  --settings-sidebar-border: rgba(0, 0, 0, 0.08);
  --settings-sidebar-hover: rgba(0, 0, 0, 0.04);
  --settings-sidebar-active: rgba(0, 0, 0, 0.1);
  
  /* === 搜索相关优化 === */
  --search-bg: rgba(255, 255, 255, 0.95);
  --search-focus-bg: rgba(255, 255, 255, 0.98);
  --search-overlay-bg: rgba(255, 255, 255, 0.98);
  
  /* === 历史记录优化 === */
  --history-item-bg: rgba(255, 255, 255, 0.8);
  --history-item-hover-bg: rgba(255, 255, 255, 0.95);
  --history-delete-bg: rgba(255, 255, 255, 0.75);
  
  /* === 引擎选项优化 === */
  --engine-option-bg: rgba(255, 255, 255, 0.85);
  --engine-option-border: rgba(0, 0, 0, 0.08);
  
  /* === 侧边栏优化 === */
  --sidebar-bg: rgba(255, 255, 255, 0.9);
  --sidebar-border: rgba(255, 255, 255, 0.25);
  
  /* === 玻璃模糊效果优化 === */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --glass-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ===== 暗黑主题完整优化 ===== */
[data-theme="dark"] {
  /* === 背景系统优化 === */
  --theme-bg-primary: var(--color-gray-900);
  --theme-bg-secondary: var(--color-gray-800);
  --theme-bg-tertiary: var(--color-gray-700);
  --theme-bg-surface: var(--color-gray-800);
  --theme-bg-elevated: var(--color-gray-700);
  --color-surface-dark: var(--color-gray-900);
  
  /* === 文本系统优化 === */
  --theme-text-primary: rgba(255, 255, 255, 0.95);
  --theme-text-secondary: rgba(255, 255, 255, 0.75);
  --theme-text-tertiary: rgba(255, 255, 255, 0.55);
  --theme-text-muted: rgba(255, 255, 255, 0.45);
  --theme-text-on-primary: #ffffff;
  
  /* === 边框系统优化 === */
  --theme-border-primary: rgba(255, 255, 255, 0.12);
  --theme-border-secondary: rgba(255, 255, 255, 0.08);
  --theme-border-accent: var(--color-primary-500);
  
  --sidebar-bg: rgba(15, 23, 42, 0.9);
  --sidebar-border: rgba(51, 65, 85, 0.6);
  --sidebar-divider: rgba(51, 65, 85, 0.5);
  --sidebar-text: rgba(248, 250, 252, 0.95);
  --sidebar-text-secondary: rgba(203, 213, 225, 0.8);
  --sidebar-group-bg: transparent;
  --sidebar-group-hover-bg: rgba(99, 102, 241, 0.15);
  --sidebar-group-active-bg: rgba(99, 102, 241, 0.25);
  --sidebar-icon: rgba(203, 213, 225, 0.8);
  --sidebar-icon-hover: rgba(248, 250, 252, 0.95);
  --sidebar-icon-active: rgb(99, 102, 241);
  --sidebar-control-bg: transparent;
  --sidebar-control-hover-bg: rgba(99, 102, 241, 0.1);  
  
  /* === 玻璃效果优化 === */
  --theme-glass-bg: rgba(30, 41, 59, 0.85);
  --theme-glass-bg-medium: rgba(30, 41, 59, 0.92);
  --theme-glass-bg-heavy: rgba(30, 41, 59, 0.96);
  --theme-glass-border: rgba(255, 255, 255, 0.12);
  --theme-glass-border-medium: rgba(255, 255, 255, 0.18);
  
  /* === 交互状态优化 === */
  --theme-hover-light: rgba(255, 255, 255, 0.06);
  --theme-hover-medium: rgba(255, 255, 255, 0.10);
  --theme-hover-heavy: rgba(255, 255, 255, 0.14);
  --theme-active: rgba(255, 255, 255, 0.18);
  
  /* === 叠加层优化 === */
  --theme-overlay-light: rgba(0, 0, 0, 0.25);
  --theme-overlay-medium: rgba(0, 0, 0, 0.45);
  --theme-overlay-heavy: rgba(0, 0, 0, 0.65);

  /* === 组件特定优化 === */
  --empty-state-color: rgba(255, 255, 255, 0.35);
  --page-dot-bg: rgba(255, 255, 255, 0.15);
  --page-dot-active-bg: rgba(255, 255, 255, 0.85);
  --page-dot-hover-bg: rgba(255, 255, 255, 0.3);
  --page-indicator-bg: rgba(0, 0, 0, 0.65);
  
  --sidebar-divider: rgba(255, 255, 255, 0.08);
  --add-site-btn-hover-border: rgba(255, 255, 255, 0.25);
  
  /* === 站点交互优化 === */
  --site-item-bg: transparent;
  --site-item-hover-bg: rgba(255, 255, 255, 0.08);
  --site-item-drag-over-bg: rgba(99, 102, 241, 0.2);
  --site-item-drag-over-border: var(--color-interactive-primary);
  
  /* === 添加按钮优化 === */
  --add-site-btn-bg: transparent;
  --add-site-btn-border: rgba(255, 255, 255, 0.12);
  --add-site-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --add-site-btn-hover-border: rgba(255, 255, 255, 0.3);
  
  /* === 设置面板优化 === */
  --settings-sidebar-bg: rgba(15, 23, 42, 0.95);
  --settings-content-bg: var(--theme-bg-primary);
  --control-group-bg: rgba(30, 41, 59, 0.85);
  --control-group-border: rgba(255, 255, 255, 0.08);
  
  /* === 搜索相关优化 === */
  --search-bg: rgba(255, 255, 255, 0.12);
  --search-focus-bg: rgba(255, 255, 255, 0.18);
  --search-overlay-bg: rgba(30, 41, 59, 0.98);
  
  /* === 历史记录优化 === */
  --history-item-bg: rgba(255, 255, 255, 0.06);
  --history-item-hover-bg: rgba(255, 255, 255, 0.12);
  --history-delete-bg: rgba(255, 255, 255, 0.08);
  
  /* === 引擎选项优化 === */
  --engine-option-bg: rgba(255, 255, 255, 0.08);
  --engine-option-border: rgba(255, 255, 255, 0.15);
  
  /* === 侧边栏优化 === */
  --sidebar-bg: rgba(30, 41, 59, 0.85);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  
  /* === 玻璃模糊效果优化 === */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glass-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* === 统一主题色配置系统 === */

/* 蓝色主题 (Blue) */
[data-theme-color="blue"] {
  --theme-primary: #3b82f6;
  --theme-secondary: #60a5fa;
  --theme-accent: #2563eb;
  
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  
  --primary-alpha-5: rgba(59, 130, 246, 0.05);
  --primary-alpha-10: rgba(59, 130, 246, 0.1);
  --primary-alpha-15: rgba(59, 130, 246, 0.15);
  --primary-alpha-20: rgba(59, 130, 246, 0.2);
  --primary-alpha-30: rgba(59, 130, 246, 0.3);
  --primary-alpha-40: rgba(59, 130, 246, 0.4);
  --primary-alpha-50: rgba(59, 130, 246, 0.5);
}

/* 绿色主题 (Green) */
[data-theme-color="green"] {
  --theme-primary: #10b981;
  --theme-secondary: #34d399;
  --theme-accent: #059669;
  
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;
  
  --primary-alpha-5: rgba(16, 185, 129, 0.05);
  --primary-alpha-10: rgba(16, 185, 129, 0.1);
  --primary-alpha-15: rgba(16, 185, 129, 0.15);
  --primary-alpha-20: rgba(16, 185, 129, 0.2);
  --primary-alpha-30: rgba(16, 185, 129, 0.3);
  --primary-alpha-40: rgba(16, 185, 129, 0.4);
  --primary-alpha-50: rgba(16, 185, 129, 0.5);
}

/* 紫色主题 (Purple) */
[data-theme-color="purple"] {
  --theme-primary: #8b5cf6;
  --theme-secondary: #a78bfa;
  --theme-accent: #7c3aed;
  
  --color-primary-50: #faf5ff;
  --color-primary-100: #f3e8ff;
  --color-primary-200: #e9d5ff;
  --color-primary-300: #d8b4fe;
  --color-primary-400: #c084fc;
  --color-primary-500: #a855f7;
  --color-primary-600: #9333ea;
  --color-primary-700: #7c3aed;
  --color-primary-800: #6b21a8;
  --color-primary-900: #581c87;
  
  --primary-alpha-5: rgba(139, 92, 246, 0.05);
  --primary-alpha-10: rgba(139, 92, 246, 0.1);
  --primary-alpha-15: rgba(139, 92, 246, 0.15);
  --primary-alpha-20: rgba(139, 92, 246, 0.2);
  --primary-alpha-30: rgba(139, 92, 246, 0.3);
  --primary-alpha-40: rgba(139, 92, 246, 0.4);
  --primary-alpha-50: rgba(139, 92, 246, 0.5);
}

/* 粉色主题 (Pink) */
[data-theme-color="pink"] {
  --theme-primary: #ec4899;
  --theme-secondary: #f472b6;
  --theme-accent: #db2777;
  
  --color-primary-50: #fdf2f8;
  --color-primary-100: #fce7f3;
  --color-primary-200: #fbcfe8;
  --color-primary-300: #f9a8d4;
  --color-primary-400: #f472b6;
  --color-primary-500: #ec4899;
  --color-primary-600: #db2777;
  --color-primary-700: #be185d;
  --color-primary-800: #9d174d;
  --color-primary-900: #831843;
  
  --primary-alpha-5: rgba(236, 72, 153, 0.05);
  --primary-alpha-10: rgba(236, 72, 153, 0.1);
  --primary-alpha-15: rgba(236, 72, 153, 0.15);
  --primary-alpha-20: rgba(236, 72, 153, 0.2);
  --primary-alpha-30: rgba(236, 72, 153, 0.3);
  --primary-alpha-40: rgba(236, 72, 153, 0.4);
  --primary-alpha-50: rgba(236, 72, 153, 0.5);
}

/* 橙色主题 (Orange) */
[data-theme-color="orange"] {
  --theme-primary: #f97316;
  --theme-secondary: #fb923c;
  --theme-accent: #ea580c;
  
  --color-primary-50: #fff7ed;
  --color-primary-100: #ffedd5;
  --color-primary-200: #fed7aa;
  --color-primary-300: #fdba74;
  --color-primary-400: #fb923c;
  --color-primary-500: #f97316;
  --color-primary-600: #ea580c;
  --color-primary-700: #c2410c;
  --color-primary-800: #9a3412;
  --color-primary-900: #7c2d12;
  
  --primary-alpha-5: rgba(249, 115, 22, 0.05);
  --primary-alpha-10: rgba(249, 115, 22, 0.1);
  --primary-alpha-15: rgba(249, 115, 22, 0.15);
  --primary-alpha-20: rgba(249, 115, 22, 0.2);
  --primary-alpha-30: rgba(249, 115, 22, 0.3);
  --primary-alpha-40: rgba(249, 115, 22, 0.4);
  --primary-alpha-50: rgba(249, 115, 22, 0.5);
}

/* 青色主题 (Cyan) */
[data-theme-color="cyan"] {
  --theme-primary: #06b6d4;
  --theme-secondary: #22d3ee;
  --theme-accent: #0891b2;
  
  --color-primary-50: #ecfeff;
  --color-primary-100: #cffafe;
  --color-primary-200: #a5f3fc;
  --color-primary-300: #67e8f9;
  --color-primary-400: #22d3ee;
  --color-primary-500: #06b6d4;
  --color-primary-600: #0891b2;
  --color-primary-700: #0e7490;
  --color-primary-800: #155e75;
  --color-primary-900: #164e63;
  
  --primary-alpha-5: rgba(6, 182, 212, 0.05);
  --primary-alpha-10: rgba(6, 182, 212, 0.1);
  --primary-alpha-15: rgba(6, 182, 212, 0.15);
  --primary-alpha-20: rgba(6, 182, 212, 0.2);
  --primary-alpha-30: rgba(6, 182, 212, 0.3);
  --primary-alpha-40: rgba(6, 182, 212, 0.4);
  --primary-alpha-50: rgba(6, 182, 212, 0.5);
}

/* 红色主题 (Red) */
[data-theme-color="red"] {
  --theme-primary: #ef4444;
  --theme-secondary: #f87171;
  --theme-accent: #dc2626;
  
  --color-primary-50: #fef2f2;
  --color-primary-100: #fee2e2;
  --color-primary-200: #fecaca;
  --color-primary-300: #fca5a5;
  --color-primary-400: #f87171;
  --color-primary-500: #ef4444;
  --color-primary-600: #dc2626;
  --color-primary-700: #b91c1c;
  --color-primary-800: #991b1b;
  --color-primary-900: #7f1d1d;
  
  --primary-alpha-5: rgba(239, 68, 68, 0.05);
  --primary-alpha-10: rgba(239, 68, 68, 0.1);
  --primary-alpha-15: rgba(239, 68, 68, 0.15);
  --primary-alpha-20: rgba(239, 68, 68, 0.2);
  --primary-alpha-30: rgba(239, 68, 68, 0.3);
  --primary-alpha-40: rgba(239, 68, 68, 0.4);
  --primary-alpha-50: rgba(239, 68, 68, 0.5);
}

/* 黄色主题 (Yellow) */
[data-theme-color="yellow"] {
  --theme-primary: #eab308;
  --theme-secondary: #facc15;
  --theme-accent: #ca8a04;
  
  --color-primary-50: #fefce8;
  --color-primary-100: #fef9c3;
  --color-primary-200: #fef08a;
  --color-primary-300: #fde047;
  --color-primary-400: #facc15;
  --color-primary-500: #eab308;
  --color-primary-600: #ca8a04;
  --color-primary-700: #a16207;
  --color-primary-800: #854d0e;
  --color-primary-900: #713f12;
  
  --primary-alpha-5: rgba(234, 179, 8, 0.05);
  --primary-alpha-10: rgba(234, 179, 8, 0.1);
  --primary-alpha-15: rgba(234, 179, 8, 0.15);
  --primary-alpha-20: rgba(234, 179, 8, 0.2);
  --primary-alpha-30: rgba(234, 179, 8, 0.3);
  --primary-alpha-40: rgba(234, 179, 8, 0.4);
  --primary-alpha-50: rgba(234, 179, 8, 0.5);
}

/* 翠绿色主题 (Emerald) */
[data-theme-color="emerald"] {
  --theme-primary: #10b981;
  --theme-secondary: #34d399;
  --theme-accent: #059669;
  
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;
  
  --primary-alpha-5: rgba(16, 185, 129, 0.05);
  --primary-alpha-10: rgba(16, 185, 129, 0.1);
  --primary-alpha-15: rgba(16, 185, 129, 0.15);
  --primary-alpha-20: rgba(16, 185, 129, 0.2);
  --primary-alpha-30: rgba(16, 185, 129, 0.3);
  --primary-alpha-40: rgba(16, 185, 129, 0.4);
  --primary-alpha-50: rgba(16, 185, 129, 0.5);
}

/* 紫红色主题 (Fuchsia) */
[data-theme-color="fuchsia"] {
  --theme-primary: #d946ef;
  --theme-secondary: #e879f9;
  --theme-accent: #c026d3;
  
  --color-primary-50: #fdf4ff;
  --color-primary-100: #fae8ff;
  --color-primary-200: #f5d0fe;
  --color-primary-300: #f0abfc;
  --color-primary-400: #e879f9;
  --color-primary-500: #d946ef;
  --color-primary-600: #c026d3;
  --color-primary-700: #a21caf;
  --color-primary-800: #86198f;
  --color-primary-900: #701a75;
  
  --primary-alpha-5: rgba(217, 70, 239, 0.05);
  --primary-alpha-10: rgba(217, 70, 239, 0.1);
  --primary-alpha-15: rgba(217, 70, 239, 0.15);
  --primary-alpha-20: rgba(217, 70, 239, 0.2);
  --primary-alpha-30: rgba(217, 70, 239, 0.3);
  --primary-alpha-40: rgba(217, 70, 239, 0.4);
  --primary-alpha-50: rgba(217, 70, 239, 0.5);
}

/* === 主题色统一更新渐变 === */
[data-theme-color] {
  --gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, var(--color-primary-400) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%);
}

/* ===== 主题色完整适配系统 ===== */

/* 默认主题色（靛蓝）保持不变，确保所有主题色变量都有完整定义 */
[data-theme-color="default"] {
  --theme-primary: var(--color-primary-500);
  --theme-secondary: var(--color-secondary-500);
  --theme-accent: var(--color-primary-600);
}

/* 确保所有主题色都有完整的颜色系统 */
[data-theme-color] {
  /* 更新交互颜色以匹配主题色 */
  --color-interactive-primary: var(--theme-primary);
  --color-interactive-hover: var(--color-primary-600);
  --color-interactive-active: var(--color-primary-700);
  --color-interactive-focus: var(--color-primary-100);
  
  /* 更新组件颜色 */
  --color-primary: var(--theme-primary);
  --color-primary-light: var(--color-primary-400);
  --color-primary-dark: var(--color-primary-600);
  --color-secondary: var(--theme-secondary);
  
  /* 更新渐变 */
  --gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, var(--color-primary-400) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 100%);
  
  /* 更新玻璃效果中的主题色 */
  --theme-glass-border: rgba(99, 102, 241, 0.1);
  --theme-glass-border-medium: rgba(99, 102, 241, 0.2);
}

/* ===== 亮色模式下的主题色适配 ===== */
[data-theme="light"] {
  /* 确保亮色模式下的交互状态使用主题色 */
  --theme-hover-light: rgba(99, 102, 241, 0.06);
  --theme-hover-medium: rgba(99, 102, 241, 0.12);
  --theme-hover-heavy: rgba(99, 102, 241, 0.18);
  --theme-active: rgba(99, 102, 241, 0.24);
  
  /* 边框和焦点使用主题色 */
  --theme-border-accent: var(--color-primary-500);
  --input-focus-border: var(--color-interactive-primary);
  --input-focus-shadow: rgba(99, 102, 241, 0.1);
  
  /* 侧边栏使用主题色 */
  --sidebar-group-hover-bg: rgba(99, 102, 241, 0.08);
  --sidebar-group-active-bg: rgba(99, 102, 241, 0.15);
  --sidebar-icon-active: var(--color-primary);
}

/* ===== 暗色模式下的主题色适配 ===== */
[data-theme="dark"] {
  /* 暗色模式下的交互状态 */
  --theme-hover-light: rgba(99, 102, 241, 0.15);
  --theme-hover-medium: rgba(99, 102, 241, 0.25);
  --theme-hover-heavy: rgba(99, 102, 241, 0.35);
  --theme-active: rgba(99, 102, 241, 0.45);
  
  /* 边框和焦点使用主题色 */
  --theme-border-accent: var(--color-primary-400);
  --input-focus-border: var(--color-interactive-primary);
  --input-focus-shadow: rgba(99, 102, 241, 0.2);
  
  /* 侧边栏使用主题色 */
  --sidebar-group-hover-bg: rgba(99, 102, 241, 0.15);
  --sidebar-group-active-bg: rgba(99, 102, 241, 0.25);
  --sidebar-icon-active: var(--color-primary);
}

/* ===== 组件级别的主题色适配 ===== */

/* 按钮主题色适配 */
.btn-primary {
  background: var(--gradient-primary) !important;
}

/* 搜索框焦点状态 */
.search-box:focus-within {
  border-color: var(--color-interactive-primary) !important;
  box-shadow: 
    0 12px 40px var(--primary-alpha-20),
    0 4px 12px var(--primary-alpha-10) !important;
}

/* 滑动条主题色 */
.slider-thumb-bg {
  background: var(--color-interactive-primary) !important;
}

.slider-control input[type="range"]::-webkit-slider-thumb {
  background: var(--color-interactive-primary) !important;
}

.slider-control input[type="range"]::-moz-range-thumb {
  background: var(--color-interactive-primary) !important;
}

/* 开关控制主题色 */
.switch-label input:checked + .slider-switch {
  background: var(--color-interactive-primary) !important;
}

/* 选中状态的主题色 */
::selection {
  background: var(--primary-alpha-30) !important;
}

::-moz-selection {
  background: var(--primary-alpha-30) !important;
}

/* 页面指示器激活状态 */
.page-dot.active {
  background: var(--color-interactive-primary) !important;
}

/* 上下文菜单悬停 */
.context-menu-item:hover {
  background: var(--color-interactive-primary) !important;
  color: white !important;
}

/* 设置面板激活状态 */
.settings-nav-item.active {
  background: var(--color-interactive-primary) !important;
}

/* 选项卡片激活状态 */
.radio-option.active::before,
.animation-option.active,
.icon-option.selected,
.page-option.active,
.time-format-option.active,
.font-option.active {
  background: var(--color-interactive-primary) !important;
  border-color: var(--color-interactive-primary) !important;
}

/* ===== 亮色模式框架视觉优化 ===== */
[data-theme="light"] {
  /* 增强玻璃效果对比度 */
  --theme-glass-bg: rgba(255, 255, 255, 0.92);
  --theme-glass-bg-medium: rgba(255, 255, 255, 0.96);
  --theme-glass-bg-heavy: rgba(255, 255, 255, 0.98);
  --theme-glass-border: rgba(226, 232, 240, 0.8);
  --theme-glass-border-medium: rgba(226, 232, 240, 0.9);
  
  /* 增强阴影深度，创造更好的层次感 */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --glass-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.08);
  
  /* 增强边框对比度 */
  --theme-border-primary: rgba(0, 0, 0, 0.12);
  --theme-border-secondary: rgba(0, 0, 0, 0.08);
  --theme-border-light: rgba(0, 0, 0, 0.06);
  
  /* 增强背景层次 */
  --theme-bg-primary: #f8fafc;
  --theme-bg-secondary: #ffffff;
  --theme-bg-tertiary: #f1f5f9;
  --theme-bg-surface: #ffffff;
  --theme-bg-elevated: #f8fafc;
  
  /* 增强交互状态可见性 */
  --theme-hover-light: rgba(0, 0, 0, 0.04);
  --theme-hover-medium: rgba(0, 0, 0, 0.08);
  --theme-hover-heavy: rgba(0, 0, 0, 0.12);
  
  /* 设置面板优化 */
  --settings-sidebar-bg: rgba(255, 255, 255, 0.98);
  --settings-content-bg: #ffffff;
  --settings-form-bg: #f8fafc;
  
  /* 控制组增强立体感 */
  --control-group-bg: rgba(255, 255, 255, 0.95);
  --control-group-border: rgba(0, 0, 0, 0.1);
  
  /* 搜索框增强 */
  --search-bg: rgba(255, 255, 255, 0.95);
  --search-focus-bg: rgba(255, 255, 255, 0.98);
  
  /* 侧边栏增强 */
  --sidebar-bg: rgba(255, 255, 255, 0.9);
  --sidebar-border: rgba(0, 0, 0, 0.1);
  
  /* 卡片组件增强 */
  --option-card-bg: rgba(255, 255, 255, 0.95);
  --option-card-border: rgba(0, 0, 0, 0.08);
  
  /* 按钮增强 */
  --btn-secondary-bg: rgba(255, 255, 255, 0.9);
  --btn-secondary-border: rgba(0, 0, 0, 0.12);
}

/* ===== 亮色模式特定组件优化 ===== */
[data-theme="light"] .sidebar {
  backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--theme-glass-border);
  box-shadow: var(--glass-shadow);
}

[data-theme="light"] .search-box {
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--theme-glass-border);
  box-shadow: var(--glass-shadow);
}

[data-theme="light"] .control-group {
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--control-group-border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .settings-nav {
  backdrop-filter: var(--glass-blur-lg);
  border-right: 1px solid var(--theme-glass-border);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .settings-content {
  background: linear-gradient(135deg, var(--settings-content-bg) 0%, var(--settings-form-bg) 100%);
}

[data-theme="light"] .modal-content {
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--theme-glass-border-medium);
  box-shadow: var(--shadow-xl);
}

[data-theme="light"] .context-menu {
  backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--theme-glass-border);
  box-shadow: var(--glass-shadow);
}

/* ===== 亮色模式交互状态增强 ===== */
[data-theme="light"] .sidebar-group:hover {
  background: var(--theme-hover-medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .site-item:hover,
[data-theme="light"] .folder-item:hover {
  background: var(--theme-hover-light);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .settings-nav-item:hover {
  background: var(--theme-hover-light) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .radio-option:hover {
  background: var(--theme-hover-light) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .switch-label:hover {
  background: var(--theme-hover-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ===== 亮色模式文本对比度优化 ===== */
[data-theme="light"] {
  --theme-text-primary: rgba(0, 0, 0, 0.95);
  --theme-text-secondary: rgba(0, 0, 0, 0.75);
  --theme-text-tertiary: rgba(0, 0, 0, 0.6);
  --theme-text-muted: rgba(0, 0, 0, 0.5);
}

/* ===== 亮色模式滚动条优化 ===== */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ===== 亮色模式焦点状态增强 ===== */
[data-theme="light"] :focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-alpha-10);
}

/* ===== 亮色模式激活状态增强 ===== */
[data-theme="light"] .sidebar-group.active {
  background: var(--primary-alpha-15);
  box-shadow: 0 2px 12px var(--primary-alpha-20);
}

[data-theme="light"] .settings-nav-item.active {
  box-shadow: 0 4px 16px var(--primary-alpha-25);
}

[data-theme="light"] .radio-option.active {
  box-shadow: 0 2px 12px var(--primary-alpha-20);
}

/* ===== 亮色模式页面指示器优化 ===== */
[data-theme="light"] .page-indicator {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--theme-glass-border);
  box-shadow: var(--glass-shadow-light);
}

[data-theme="light"] .page-dot {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .page-dot.active {
  background: var(--color-interactive-primary);
}

[data-theme="light"] .page-dot:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ===== 主题色透明度系统增强 ===== */

/* 为主色透明度创建动态变量 */
[data-theme-color] {
  --primary-alpha-5: color-mix(in srgb, var(--theme-primary) 5%, transparent);
  --primary-alpha-10: color-mix(in srgb, var(--theme-primary) 10%, transparent);
  --primary-alpha-15: color-mix(in srgb, var(--theme-primary) 15%, transparent);
  --primary-alpha-20: color-mix(in srgb, var(--theme-primary) 20%, transparent);
  --primary-alpha-30: color-mix(in srgb, var(--theme-primary) 30%, transparent);
  --primary-alpha-40: color-mix(in srgb, var(--theme-primary) 40%, transparent);
  --primary-alpha-50: color-mix(in srgb, var(--theme-primary) 50%, transparent);
}

/* 回退方案 - 使用RGBA */
[data-theme-color="blue"] {
  --primary-alpha-5: rgba(59, 130, 246, 0.05);
  --primary-alpha-10: rgba(59, 130, 246, 0.1);
  --primary-alpha-15: rgba(59, 130, 246, 0.15);
  --primary-alpha-20: rgba(59, 130, 246, 0.2);
  --primary-alpha-30: rgba(59, 130, 246, 0.3);
  --primary-alpha-40: rgba(59, 130, 246, 0.4);
  --primary-alpha-50: rgba(59, 130, 246, 0.5);
}

/* ===== 主题切换动画优化 ===== */
[data-theme-color],
[data-theme] {
  transition: 
    --theme-primary 0.3s ease,
    --theme-secondary 0.3s ease,
    --theme-accent 0.3s ease,
    --color-interactive-primary 0.3s ease,
    --gradient-primary 0.3s ease;
}

/* ===== 高对比度模式支持 ===== */
@media (prefers-contrast: high) {
  [data-theme-color] {
    --theme-border-accent: var(--color-primary-900);
    --input-focus-border: var(--color-primary-900);
  }
  
  [data-theme="dark"] {
    --theme-border-accent: var(--color-primary-100);
    --input-focus-border: var(--color-primary-100);
  }
}

/* ===== 打印样式优化 ===== */
@media print {
  [data-theme-color] {
    --theme-primary: #000000;
    --theme-secondary: #333333;
    --color-interactive-primary: #000000;
  }
}

/* ===== 移动端优化 ===== */
@media (max-width: 768px) {
  [data-theme-color] {
    /* 移动端减少某些效果的强度 */
    --theme-hover-heavy: rgba(99, 102, 241, 0.12);
    --theme-active: rgba(99, 102, 241, 0.18);
  }
}

/* === 滚动条样式优化 === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: 4px;
  transition: background var(--transition-medium);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-light);
}

/* === 选择文本样式 === */
::selection {
  background: var(--primary-alpha-20);
  color: var(--theme-text-primary);
}

::-moz-selection {
  background: var(--primary-alpha-20);
  color: var(--theme-text-primary);
}

/* === 焦点轮廓样式 === */
:focus-visible {
  outline: 2px solid var(--color-interactive-primary);
  outline-offset: 2px;
}

/* === 打印样式 === */
@media print {
  :root {
    --theme-bg-primary: white;
    --theme-bg-secondary: white;
    --theme-text-primary: black;
    --theme-text-secondary: #333;
  }
}

/* === 高对比度模式支持 === */
@media (prefers-contrast: high) {
  :root {
    --theme-border-primary: var(--color-gray-900);
    --theme-text-secondary: var(--color-gray-900);
  }
  
  [data-theme="dark"] {
    --theme-border-primary: white;
    --theme-text-secondary: white;
  }
}

/* === 减少动画模式支持 === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-medium: 0s;
    --transition-slow: 0s;
    --transition-bounce: 0s;
  }
}

/* 服务器自定义字体定义 */
@font-face {
    font-family: 'DS-Digital';
    src: url('/assets/css/fonts/DS-Digital.woff2') format('woff2'),
         url('/assets/css/fonts/DS-Digital.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RomaMonumentalBC';
    src: url('/assets/css/fonts/RomaMonumentalBC.woff2') format('woff2'),
         url('/assets/css/fonts/RomaMonumentalBC.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Silkscreen';
    src: url('/assets/css/fonts/Silkscreen.woff') format('woff'),
         url('/assets/css/fonts/Silkscreen2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Zurich BT Bold Extended';
    src: url('/assets/css/fonts/ZurichBT-BoldExtended.woff2') format('woff2'),
         url('/assets/css/fonts/ZurichBT-BoldExtended.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Astropolis Academy';
    src: url('/assets/css/fonts/AstropolisAcademy.woff2') format('woff2'),
         url('/assets/css/fonts/AstropolisAcademy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Minion Web Pro';
    src: url('/assets/css/fonts/MinionWebPro.woff2') format('woff2'),
         url('/assets/css/fonts/MinionWebPro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sternbach Outline';
    src: url('/assets/css/fonts/SternbachOutline.woff2') format('woff2'),
         url('/assets/css/fonts/SternbachOutline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JudeW00-BlkLiningNumbersIt';
    src: url('/assets/css/fonts/JudeW00-BlkLiningNumbersIt.woff2') format('woff2'),
         url('/assets/css/fonts/JudeW00-BlkLiningNumbersIt.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tonopah';
    src: url('/assets/css/fonts/Tonopah.woff2') format('woff2'),
         url('/assets/css/fonts/Tonopah.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wiggly Shadow';
    src: url('/assets/css/fonts/WigglyShadow.woff2') format('woff2'),
         url('/assets/css/fonts/WigglyShadow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CopperplateGothicHand31ABW00';
    src: url('/assets/css/fonts/CopperplateGothicHand31ABW00.woff2') format('woff2'),
         url('/assets/css/fonts/CopperplateGothicHand31ABW00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}