/* ===== 设计系统变量 - 最终优化版 ===== */
: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-primary-rgb: 99, 102, 241;
  
  /* 次要色盘 */
  --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-purple: #8b5cf6;
  --color-light: #f5f5f5;
  
  /* 状态色RGB */
  --color-success-rgb: 16, 185, 129;
  --color-error-rgb: 239, 68, 68;
  --color-warning-rgb: 245, 158, 11;
  --color-info-rgb: 6, 182, 212;
  
  /* 状态色深度变体 */
  --color-success-600: #059669;
  --color-warning-600: #d97706;
  --color-error-600: #dc2626;
  --color-info-600: #0891b2;
  --color-purple-600: #7c3aed;
  
  /* 错误色变体 */
  --color-error-light: #f87171;

  /* === 透明度系统 === */
  --opacity-0: 0;
  --opacity-4: 0.04;
  --opacity-5: 0.05;
  --opacity-6: 0.06;
  --opacity-8: 0.08;
  --opacity-10: 0.1;
  --opacity-12: 0.12;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --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-85: 0.85;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* 白色透明度 */
  --white-alpha-0: rgba(255, 255, 255, var(--opacity-0));
  --white-alpha-4: rgba(255, 255, 255, var(--opacity-4));
  --white-alpha-5: rgba(255, 255, 255, var(--opacity-5));
  --white-alpha-6: rgba(255, 255, 255, var(--opacity-6));
  --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-0: rgba(0, 0, 0, var(--opacity-0));
  --black-alpha-5: rgba(0, 0, 0, var(--opacity-5));
  --black-alpha-6: rgba(0, 0, 0, var(--opacity-6));
  --black-alpha-8: rgba(0, 0, 0, var(--opacity-8));
  --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-0: rgba(var(--color-primary-rgb), var(--opacity-0));
  --primary-alpha-4: rgba(var(--color-primary-rgb), 0.04);
  --primary-alpha-5: rgba(var(--color-primary-rgb), var(--opacity-5));
  --primary-alpha-8: rgba(var(--color-primary-rgb), 0.08);
  --primary-alpha-10: rgba(var(--color-primary-rgb), var(--opacity-10));
  --primary-alpha-15: rgba(var(--color-primary-rgb), var(--opacity-15));
  --primary-alpha-20: rgba(var(--color-primary-rgb), var(--opacity-20));
  --primary-alpha-30: rgba(var(--color-primary-rgb), var(--opacity-30));
  --primary-alpha-40: rgba(var(--color-primary-rgb), var(--opacity-40));
  --primary-alpha-50: rgba(var(--color-primary-rgb), var(--opacity-50));
  --primary-alpha-60: rgba(var(--color-primary-rgb), var(--opacity-60));
  --primary-alpha-70: rgba(var(--color-primary-rgb), var(--opacity-70));
  --primary-alpha-80: rgba(var(--color-primary-rgb), var(--opacity-80));
  --primary-alpha-85: rgba(var(--color-primary-rgb), var(--opacity-85));
  --primary-alpha-90: rgba(var(--color-primary-rgb), var(--opacity-90));
  --primary-alpha-100: rgba(var(--color-primary-rgb), var(--opacity-100));

  /* 成功色透明度 */
  --color-success-alpha-4: rgba(var(--color-success-rgb), 0.04);
  --color-success-alpha-5: rgba(var(--color-success-rgb), 0.05);
  --color-success-alpha-6: rgba(var(--color-success-rgb), 0.06);
  --color-success-alpha-8: rgba(var(--color-success-rgb), 0.08);
  --color-success-alpha-10: rgba(var(--color-success-rgb), 0.1);
  --color-success-alpha-12: rgba(var(--color-success-rgb), 0.12);
  --color-success-alpha-15: rgba(var(--color-success-rgb), 0.15);
  --color-success-alpha-20: rgba(var(--color-success-rgb), 0.2);
  --color-success-alpha-25: rgba(var(--color-success-rgb), 0.25);
  --color-success-alpha-30: rgba(var(--color-success-rgb), 0.3);

  /* 警告色透明度 */
  --color-warning-alpha-5: rgba(var(--color-warning-rgb), 0.05);
  --color-warning-alpha-8: rgba(var(--color-warning-rgb), 0.08);
  --color-warning-alpha-10: rgba(var(--color-warning-rgb), 0.1);
  --color-warning-alpha-12: rgba(var(--color-warning-rgb), 0.12);
  --color-warning-alpha-15: rgba(var(--color-warning-rgb), 0.15);
  --color-warning-alpha-20: rgba(var(--color-warning-rgb), 0.2);
  --color-warning-alpha-30: rgba(var(--color-warning-rgb), 0.3);

  /* 错误色透明度 */
  --color-error-alpha-5: rgba(var(--color-error-rgb), 0.05);
  --color-error-alpha-8: rgba(var(--color-error-rgb), 0.08);
  --color-error-alpha-10: rgba(var(--color-error-rgb), 0.1);
  --color-error-alpha-12: rgba(var(--color-error-rgb), 0.12);
  --color-error-alpha-15: rgba(var(--color-error-rgb), 0.15);
  --color-error-alpha-20: rgba(var(--color-error-rgb), 0.2);
  --color-error-alpha-30: rgba(var(--color-error-rgb), 0.3);

  /* 信息色透明度 */
  --color-info-alpha-5: rgba(var(--color-info-rgb), 0.05);
  --color-info-alpha-8: rgba(var(--color-info-rgb), 0.08);
  --color-info-alpha-10: rgba(var(--color-info-rgb), 0.1);
  --color-info-alpha-12: rgba(var(--color-info-rgb), 0.12);
  --color-info-alpha-15: rgba(var(--color-info-rgb), 0.15);
  --color-info-alpha-20: rgba(var(--color-info-rgb), 0.2);
  --color-info-alpha-30: rgba(var(--color-info-rgb), 0.3);

  /* 紫色透明度 */
  --color-purple-alpha-5: rgba(139, 92, 246, 0.05);
  --color-purple-alpha-10: rgba(139, 92, 246, 0.1);
  --color-purple-alpha-20: rgba(139, 92, 246, 0.2);

  /* === 玻璃态效果 === */
  --glass-blur: blur(20px);
  --glass-blur-lg: blur(16px);
  --glass-blur-md: blur(12px);
  --glass-blur-base: blur(10px);
  --glass-blur-sm: blur(8px);
  --glass-blur-xs: blur(4px);
  --glass-blur-xxs: blur(0px);
  
  /* === 渐变色彩 === */
  --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%);
  --gradient-soft: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
  --gradient-subtle: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  --gradient-light: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-600) 100%);

  /* === 主题变量 - 默认浅色玻璃主题 === */
  /* 主色变量 */
  --theme-primary: var(--color-primary-500);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-secondary: var(--color-secondary-500);
  --theme-accent: var(--color-primary-600);
  
  /* 深灰色主题色 */
  --theme-darkgray-primary-rgb: 45, 50, 85;
  --theme-darkgray-primary-bg: rgba(var(--theme-darkgray-primary-rgb), 0.85);
  
  /* 背景色 */
  --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-glass-primary: rgba(255, 255, 255, 0.85);
  --theme-text-on-primary: #ffffff;
  --theme-text-on-secondary: rgba(255, 255, 255, 0.85);
  --theme-text-on-dark: var(--theme-darkgray-primary-bg);
  
  /* 主色文字变量 */
  --theme-primary-text: var(--primary-alpha-85);
  --theme-primary-text-hover: var(--color-primary-500);
  --theme-primary-text-active: var(--color-primary-600);
  --theme-primary-text-disabled: var(--primary-alpha-40);
  --theme-primary-text-light: var(--primary-alpha-70);
  
  /* 主色交互背景 */
  --theme-primary-hover: var(--primary-alpha-10);
  --theme-primary-active: var(--primary-alpha-20);
  --theme-primary-focus: var(--primary-alpha-15);
  --theme-primary-hover-light: var(--primary-alpha-6);
  --theme-primary-hover-medium: var(--primary-alpha-12);
  --theme-primary-hover-heavy: var(--primary-alpha-18);
  
  /* 边框色 */
  --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-secondary: rgba(255, 255, 255, 0.6);
  --theme-glass-third: rgba(255, 255, 255, 0.7);
  --theme-glass-light: rgba(255, 255, 255, 0.15);
  --theme-glass-hover-light: rgba(255, 255, 255, 0.25);
  
  /* 玻璃阴影 */
  --glass-shadow: 0 8px 32px var(--black-alpha-20);
  --glass-shadow-light: 0 4px 16px var(--black-alpha-10);
  
  /* 交互状态 */
  --theme-hover-light: var(--theme-primary-hover-light);
  --theme-hover-medium: var(--theme-primary-hover-medium);
  --theme-hover-heavy: var(--theme-primary-hover-heavy);
  --theme-active: var(--theme-primary-active);
  
  /* 叠加层 */
  --theme-overlay-highlight: rgba(15, 23, 42, 0.02);
  --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);
  --icon-shadow: var(--black-alpha-30);
  
  /* 添加按钮 */
  --add-site-icon-bg: var(--white-alpha-40);
  --add-site-icon-hover-bg: var(--white-alpha-25);
  --add-site-btn-bg: transparent;
  --add-site-btn-border: var(--white-alpha-20);
  --add-site-btn-hover-bg: var(--theme-hover-light);
  --add-site-btn-hover-border: var(--color-primary-light);
  
  /* 页面指示器 */
  --page-indicator-bg: rgba(255, 255, 255, 0.08);
  --page-indicator-border: rgba(255, 255, 255, 0.05);
  --page-indicator-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --page-indicator-blur: blur(12px);
  
  --page-dot-size: 6px;
  --page-dot-bg: rgba(255, 255, 255, 0.25);
  --page-dot-hover-bg: rgba(255, 255, 255, 0.4);
  
  /* 空状态 */
  --empty-state-color: var(--white-alpha-50);
  
  /* 侧边栏 */
  --sidebar-bg: transparent;
  --sidebar-border: var(--white-alpha-20);
  --sidebar-group-bg: transparent;
  --sidebar-group-hover-bg: var(--white-alpha-10);
  --sidebar-group-active-bg: var(--white-alpha-15);
  --sidebar-divider: var(--white-alpha-15);
  --sidebar-text: var(--white-alpha-90);
  --sidebar-text-secondary: var(--white-alpha-80);
  --sidebar-icon: var(--white-alpha-80);
  --sidebar-icon-hover: var(--white-alpha-95);
  --sidebar-icon-active: var(--color-primary);
  --sidebar-control-bg: transparent;
  --sidebar-control-hover-bg: var(--primary-alpha-5);
  
  /* 侧边栏主题选项 */
  --theme-option-bg: var(--white-alpha-2);
  --theme-option-border: var(--white-alpha-10);
  --theme-option-hover-bg: var(--white-alpha-5);
  --theme-option-hover-border: var(--white-alpha-20);
  --theme-option-active-bg: var(--primary-alpha-10);
  
  /* 侧边栏主题预览 */
  --theme-preview-bg: var(--black-alpha-10);
  
  /* 重置按钮 */
  --reset-warning-border: var(--color-warning);
  --reset-warning-bg: var(--color-warning-alpha-5);
  --reset-danger-border: var(--color-error);
  --reset-danger-bg: var(--color-error-alpha-5);
  
  /* 表单元素 */
  --input-bg: var(--theme-bg-secondary);
  --input-border: var(--theme-border-primary);
  --input-focus-border: var(--color-interactive-primary);
  --input-focus-shadow: var(--primary-alpha-10);
  --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);
  --modal-page-bg: var(--theme-darkgray-primary-bg);
  
  /* 上下文菜单 */
  --context-menu-bg: var(--theme-glass-bg);
  --context-menu-border: var(--white-alpha-15);
  --context-menu-border-light: var(--white-alpha-10);
  --context-menu-text: var(--text-primary);
  --context-menu-hover-bg: var(--theme-glass-hover-light);
  --context-menu-hover-color: var(--text-primary);
  --context-menu-active-bg: var(--theme-glass-bg-heavy);
  --context-menu-clicking-bg: var(--theme-glass-bg-heavy);
  --context-menu-separator-color: var(--color-border-light);
  --context-menu-header-color: var(--white-alpha-70);
  --context-menu-danger-hover-bg: var(--color-error-alpha-15);
  
  /* 布局选项 */
  --context-layout-group-bg: var(--theme-glass-light);
  --context-layout-group-border-top: var(--color-border-light);
  --context-layout-group-border-bottom: var(--color-border-light);
  
  --context-layout-option-bg: var(--theme-glass-secondary);
  --context-layout-option-border: var(--color-border-light);
  --context-layout-option-color: var(--text-primary);
  --context-layout-option-hover-bg: var(--theme-glass-hover-light);
  --context-layout-option-hover-border: var(--color-primary-light);
  --context-layout-option-active-bg: var(--gradient-primary);
  --context-layout-option-active-color: white;
  --context-layout-option-active-border: var(--color-primary);
  --context-layout-option-active-hover-bg: var(--color-primary-dark);
  
  /* 搜索相关 */
  --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: var(--color-error-alpha-15);
  --history-delete-hover-border: var(--color-error-alpha-80);
  --history-delete-hover-color: var(--color-error-600);
  
  /* 建议项 */
  --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: var(--primary-alpha-10);
  --engine-option-active-border: var(--color-interactive-primary);
  --engine-option-text: var(--theme-text-primary);
  
  /* 文件夹标题 */
  --folder-title-color: var(--text-on-primary);
  --folder-title-hover-bg: var(--primary-alpha-10);
  --folder-title-hover-border: var(--primary-alpha-30);
  --folder-title-edit-bg: var(--primary-alpha-15);
  --folder-title-focus-shadow: var(--primary-alpha-10);
  --folder-title-text-shadow: 0 2px 4px var(--black-alpha-30);
  --folder-title-hint-bg: var(--primary-alpha-15);
  
  /* === 设置面板 === */
  --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: var(--white-alpha-95);
  --settings-sidebar-text-secondary: var(--white-alpha-70);
  --settings-sidebar-text-tertiary: var(--white-alpha-50);
  --settings-sidebar-border: var(--white-alpha-12);
  --settings-sidebar-hover: var(--white-alpha-8);
  --settings-sidebar-active: var(--white-alpha-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: var(--primary-alpha-20);
  
  /* 控制组 */
  --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: var(--black-alpha-20);
  --slider-thumb-hover-shadow: var(--primary-alpha-40);
  --slider-value-bg: var(--primary-alpha-10);
  --slider-value-border: var(--primary-alpha-20);
  --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: var(--theme-active);
  --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-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);
  
  /* === 通用选项样式 === */
  --option-grid-display: grid;
  --option-grid-gap: var(--spacing-sm);
  --option-grid-margin-top: var(--spacing-sm);
  --option-grid-padding: var(--spacing-md);
  --option-grid-background: transparent;
  --option-grid-border-radius: var(--border-radius-lg);
  --option-grid-border: 1px solid var(--time-format-border);
  --option-grid-width: 100%;
  
  --option-item-display: flex;
  --option-item-direction: column;
  --option-item-align: center;
  --option-item-justify: center;
  --option-item-gap: var(--spacing-xs);
  --option-item-padding: var(--spacing-sm) var(--spacing-xs);
  --option-item-bg: var(--time-format-option-bg);
  --option-item-border: 2px solid transparent;
  --option-item-border-radius: var(--border-radius-md);
  --option-item-color: var(--time-format-text);
  --option-item-cursor: pointer;
  --option-item-transition: all var(--transition-medium);
  --option-item-font-size: var(--font-size-sm);
  --option-item-text-align: center;
  --option-item-width: 100%;
  --option-item-min-height: auto;
  
  --option-item-hover-bg: var(--time-format-option-hover-bg);
  --option-item-hover-border: var(--option-card-hover-border);
  --option-item-hover-transform: translateY(-2px);
  --option-item-hover-shadow: var(--shadow-sm);
  
  --option-item-active-bg: var(--time-format-option-active-bg);
  --option-item-active-color: var(--settings-text-on-primary);
  --option-item-active-border: var(--color-primary);
  --option-item-active-transform: scale(1.05);
  --option-item-active-shadow: 0 4px 12px var(--primary-alpha-30);
  
  --option-icon-font-size: var(--font-size-lg);
  --option-icon-font-size-xxs: var(--font-size-xxs);
  --option-icon-margin: 0 0 var(--spacing-xs) 0;
  
  --option-label-font-size: var(--font-size-xs);
  --option-label-weight: var(--font-weight-medium);
  --option-label-line-height: 1.2;
  
  /* === 间距系统 === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-base: 10px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;
  --spacing-xxxxl: 48px;
  
  /* === 圆角系统 === */
  --border-radius-xs: 2px;
  --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 var(--primary-alpha-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);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 2.5);
  
  --animation-duration: 300ms;
  
  /* 动画开关 */
  --enable-animations: 1;
  
  /* === 布局系统 === */
  --sidebar-width: 200px;
  --sidebar-compact-width: 50px;
  --header-height: 150px;
  --footer-height: 120px;
  --search-height: 60px;
  --settings-panel-width: 400px;
  --settings-sidebar-width: 85px;
  --container-max-width: 1200px;
  --container-padding: 24px;
  --menu-min-width: 140px;
  --menu-max-width: 240px;
  --btn-min-width: 180px;
  
  /* === 字体系统 === */
  --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-xxs: 0.65rem;
  --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: 65px;
  --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: 55px;
  --logo-size: 80px;
  
  --site-icon-size: 65px;
  --site-icon-radius: 12px;
  --site-icon-opacity: 1;
  --site-spacing: 30px;
  --site-name-size: 0.9rem;
  --site-name-color: var(--theme-text-primary);
  --page-indicator-display: flex;
  --grid-max-width: 1200px;
  
  /* 站点图标变量 */
  --site-title-height: calc(var(--site-name-size) * 1.1);
  
  /* 搜索框变量 */
  --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-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-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);
  
  /* 侧边栏 */
  --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-hover-bg: var(--primary-alpha-8);
  --sidebar-group-active-bg: var(--primary-alpha-15);
  --sidebar-icon: var(--theme-text-secondary);
  --sidebar-icon-hover: var(--theme-text-primary);
  --sidebar-control-hover-bg: var(--primary-alpha-5);
  
  /* 组件特定 */
  --empty-state-color: rgba(0, 0, 0, 0.35);
  
  /* 页面指示器 */
  --page-indicator-bg: rgba(255, 255, 255, 0.15);
  --page-indicator-border: rgba(0, 0, 0, 0.03);
  --page-indicator-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --page-indicator-blur: blur(10px);
  
  --page-dot-bg: rgba(0, 0, 0, 0.15);
  --page-dot-hover-bg: rgba(0, 0, 0, 0.25);
  
  /* 站点交互 */
  --site-item-hover-bg: rgba(0, 0, 0, 0.04);
  --site-item-drag-over-bg: var(--primary-alpha-10);
  
  /* 添加按钮 */
  --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);
  
  /* 上下文菜单 */
  --modal-page-bg: rgba(255, 255, 255, 0.92);
  --context-menu-bg: rgba(255, 255, 255, 0.92);
  --context-menu-border: rgba(0, 0, 0, 0.12);
  --context-menu-text: rgba(0, 0, 0, 0.85);
  --context-menu-hover-bg: rgba(0, 0, 0, 0.06);
  --context-menu-hover-color: rgba(0, 0, 0, 0.95);
  --context-menu-active-bg: rgba(0, 0, 0, 0.1);
  --context-menu-header-color: rgba(0, 0, 0, 0.7);
  --context-menu-separator-color: rgba(0, 0, 0, 0.15);
  --context-menu-clicking-bg: rgba(0, 0, 0, 0.12);
  
  --context-layout-option-bg: rgba(255, 255, 255, 0.8);
  --context-layout-option-color: rgba(0, 0, 0, 0.8);
  --context-layout-option-border: rgba(0, 0, 0, 0.12);
  --context-layout-option-hover-bg: rgba(0, 0, 0, 0.08);
  
  /* 设置面板 */
  --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);
  
  /* 玻璃阴影 */
  --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-border-primary: rgba(255, 255, 255, 0.12);
  --theme-border-secondary: rgba(255, 255, 255, 0.08);
  
  /* 玻璃效果 */
  --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);
  
  /* 侧边栏 */
  --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-hover-bg: var(--primary-alpha-15);
  --sidebar-group-active-bg: var(--primary-alpha-25);
  --sidebar-icon: rgba(203, 213, 225, 0.8);
  --sidebar-icon-hover: rgba(248, 250, 252, 0.95);
  --sidebar-control-hover-bg: var(--primary-alpha-10);
  
  /* 组件特定 */
  --empty-state-color: rgba(255, 255, 255, 0.35);
  
  /* 页面指示器 */  
  --page-indicator-bg: rgba(0, 0, 0, 0.15);
  --page-indicator-border: rgba(255, 255, 255, 0.03);
  --page-indicator-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --page-indicator-blur: blur(14px);
  
  --page-dot-bg: rgba(255, 255, 255, 0.2);
  --page-dot-hover-bg: rgba(255, 255, 255, 0.35);
  
  /* 站点交互 */
  --site-item-hover-bg: rgba(255, 255, 255, 0.08);
  --site-item-drag-over-bg: var(--primary-alpha-20);
  
  /* 添加按钮 */
  --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);
  
  /* 上下文菜单 */
  --modal-page-bg: rgba(15, 23, 42, 0.95);
  --context-menu-bg: rgba(15, 23, 42, 0.95);
  --context-menu-border: rgba(255, 255, 255, 0.15);
  --context-menu-text: rgba(255, 255, 255, 0.95);
  --context-menu-hover-bg: rgba(255, 255, 255, 0.1);
  --context-menu-hover-color: rgba(255, 255, 255, 0.98);
  --context-menu-active-bg: rgba(255, 255, 255, 0.15);
  --context-menu-header-color: rgba(255, 255, 255, 0.8);
  --context-menu-separator-color: rgba(255, 255, 255, 0.2);
  --context-menu-clicking-bg: rgba(255, 255, 255, 0.18);
  
  --context-layout-option-bg: rgba(255, 255, 255, 0.08);
  --context-layout-option-color: rgba(255, 255, 255, 0.9);
  --context-layout-option-border: rgba(255, 255, 255, 0.18);
  --context-layout-option-hover-bg: rgba(255, 255, 255, 0.15);
  
  /* 设置面板 */
  --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);
  
  --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);
  
  /* 搜索相关 */
  --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);
  
  /* 玻璃阴影 */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glass-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ===== 主题色系统 ===== */

/* 蓝色主题 */
[data-theme-color="blue"] {
  --theme-primary: #3b82f6;
  --theme-secondary: #60a5fa;
  --theme-accent: #2563eb;
  --theme-primary-rgb: 59, 130, 246;
  --theme-darkgray-primary-rgb: 35, 50, 80;
  
  --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;
}

/* 绿色主题 */
[data-theme-color="green"] {
  --theme-primary: #10b981;
  --theme-secondary: #34d399;
  --theme-accent: #059669;
  --theme-primary-rgb: 16, 185, 129;
  --theme-darkgray-primary-rgb: 30, 60, 50;
  
  --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;
}

/* 紫色主题 */
[data-theme-color="purple"] {
  --theme-primary: #8b5cf6;
  --theme-secondary: #a78bfa;
  --theme-accent: #7c3aed;
  --theme-primary-rgb: 139, 92, 246;
  --theme-darkgray-primary-rgb: 50, 35, 80;
  
  --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;
}

/* 粉色主题 */
[data-theme-color="pink"] {
  --theme-primary: #ec4899;
  --theme-secondary: #f472b6;
  --theme-accent: #db2777;
  --theme-primary-rgb: 236, 72, 153;
  --theme-darkgray-primary-rgb: 75, 35, 60;
  
  --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;
}

/* 橙色主题 */
[data-theme-color="orange"] {
  --theme-primary: #f97316;
  --theme-secondary: #fb923c;
  --theme-accent: #ea580c;
  --theme-primary-rgb: 249, 115, 22;
  --theme-darkgray-primary-rgb: 80, 50, 30;
  
  --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;
}

/* 青色主题 */
[data-theme-color="cyan"] {
  --theme-primary: #06b6d4;
  --theme-secondary: #22d3ee;
  --theme-accent: #0891b2;
  --theme-primary-rgb: 6, 182, 212;
  --theme-darkgray-primary-rgb: 30, 70, 80;
  
  --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;
}

/* 红色主题 */
[data-theme-color="red"] {
  --theme-primary: #ef4444;
  --theme-secondary: #f87171;
  --theme-accent: #dc2626;
  --theme-primary-rgb: 239, 68, 68;
  --theme-darkgray-primary-rgb: 80, 35, 35;
  
  --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;
}

/* 黄色主题 */
[data-theme-color="yellow"] {
  --theme-primary: #eab308;
  --theme-secondary: #facc15;
  --theme-accent: #ca8a04;
  --theme-primary-rgb: 234, 179, 8;
  --theme-darkgray-primary-rgb: 80, 70, 30;
  
  --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;
}

/* 翠绿色主题 */
[data-theme-color="emerald"] {
  --theme-primary: #10b981;
  --theme-secondary: #34d399;
  --theme-accent: #059669;
  --theme-primary-rgb: 16, 185, 129;
  --theme-darkgray-primary-rgb: 30, 60, 50;
  
  --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;
}

/* 紫红色主题 */
[data-theme-color="fuchsia"] {
  --theme-primary: #d946ef;
  --theme-secondary: #e879f9;
  --theme-accent: #c026d3;
  --theme-primary-rgb: 217, 70, 239;
  --theme-darkgray-primary-rgb: 70, 30, 80;
  
  --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;
}

/* 默认主题色（靛蓝） */
[data-theme-color="default"] {
  --theme-primary: var(--color-primary-500);
  --theme-secondary: var(--color-secondary-500);
  --theme-accent: var(--color-primary-600);
  --theme-primary-rgb: var(--color-primary-rgb);
  --theme-darkgray-primary-rgb: 45, 50, 85;
}

/* 自定义主题色 */
[data-theme-color="custom"] {
  transition: 
    --theme-primary 0.3s ease,
    --color-primary-500 0.3s ease,
    --gradient-primary 0.3s ease;
}

/* ===== 主题色通用适配 ===== */
[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);
  --color-secondary-light: var(--color-secondary-400);
  --color-secondary-dark: var(--color-secondary-600);
  
  /* 更新渐变 */
  --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%);
  --gradient-soft: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-800) 100%);
  --gradient-subtle: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
  --gradient-light: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-600) 100%);
  
  /* 更新上下文菜单 */
  --context-layout-option-active-bg: var(--theme-primary);
  --context-layout-option-active-border: var(--theme-primary);
  --context-layout-option-active-hover-bg: var(--color-primary-dark);
  
  /* 主题色透明度变量 */
  --primary-alpha-5: rgba(var(--theme-primary-rgb), 0.05);
  --primary-alpha-10: rgba(var(--theme-primary-rgb), 0.1);
  --primary-alpha-15: rgba(var(--theme-primary-rgb), 0.15);
  --primary-alpha-20: rgba(var(--theme-primary-rgb), 0.2);
  --primary-alpha-30: rgba(var(--theme-primary-rgb), 0.3);
  --primary-alpha-40: rgba(var(--theme-primary-rgb), 0.4);
  --primary-alpha-50: rgba(var(--theme-primary-rgb), 0.5);
  
  /* 主色文字变量 */
  --theme-primary-text: rgba(var(--theme-primary-rgb), 0.85);
  --theme-primary-text-hover: var(--theme-primary);
  --theme-primary-text-active: var(--theme-accent);
  --theme-primary-text-disabled: rgba(var(--theme-primary-rgb), 0.4);
  --theme-primary-text-light: rgba(var(--theme-primary-rgb), 0.7);
  
  /* 主色交互背景 */
  --theme-primary-hover: rgba(var(--theme-primary-rgb), 0.1);
  --theme-primary-active: rgba(var(--theme-primary-rgb), 0.2);
  --theme-primary-focus: rgba(var(--theme-primary-rgb), 0.15);
  --theme-primary-hover-light: rgba(var(--theme-primary-rgb), 0.06);
  --theme-primary-hover-medium: rgba(var(--theme-primary-rgb), 0.12);
  --theme-primary-hover-heavy: rgba(var(--theme-primary-rgb), 0.18);
}

/* ===== 亮色模式下的主题色适配 ===== */
[data-theme="light"][data-theme-color] {
  --theme-hover-light: rgba(var(--theme-primary-rgb), 0.06);
  --theme-hover-medium: rgba(var(--theme-primary-rgb), 0.12);
  --theme-hover-heavy: rgba(var(--theme-primary-rgb), 0.18);
  --theme-active: rgba(var(--theme-primary-rgb), 0.24);
  
  --theme-border-accent: var(--color-primary-500);
  --input-focus-border: var(--color-interactive-primary);
  --input-focus-shadow: rgba(var(--theme-primary-rgb), 0.1);
  
  --sidebar-group-hover-bg: rgba(var(--theme-primary-rgb), 0.08);
  --sidebar-group-active-bg: rgba(var(--theme-primary-rgb), 0.15);
  --sidebar-icon-active: var(--color-primary);
  
  /* 上下文菜单 */
  --context-menu-active-bg: rgba(var(--theme-primary-rgb), 0.15);
  --context-menu-clicking-bg: rgba(var(--theme-primary-rgb), 0.20);
  --context-menu-hover-bg: rgba(var(--theme-primary-rgb), 0.08);
}

/* ===== 暗色模式下的主题色适配 ===== */
[data-theme="dark"][data-theme-color] {
  --theme-hover-light: rgba(var(--theme-primary-rgb), 0.15);
  --theme-hover-medium: rgba(var(--theme-primary-rgb), 0.25);
  --theme-hover-heavy: rgba(var(--theme-primary-rgb), 0.35);
  --theme-active: rgba(var(--theme-primary-rgb), 0.45);
  
  --theme-border-accent: var(--color-primary-400);
  --input-focus-border: var(--color-interactive-primary);
  --input-focus-shadow: rgba(var(--theme-primary-rgb), 0.2);
  
  --sidebar-group-hover-bg: rgba(var(--theme-primary-rgb), 0.15);
  --sidebar-group-active-bg: rgba(var(--theme-primary-rgb), 0.25);
  --sidebar-icon-active: var(--color-primary);
  
  /* 上下文菜单 */
  --context-menu-active-bg: rgba(var(--theme-primary-rgb), 0.25);
  --context-menu-clicking-bg: rgba(var(--theme-primary-rgb), 0.30);
  --context-menu-hover-bg: rgba(var(--theme-primary-rgb), 0.15);
}

/* ===== 主题切换动画 ===== */
[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;
}

/* === 滚动条样式 === */
::-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;
    --animation-duration: 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;
}