/*
 * 主题颜色系统 - 7种预设主题（梯度色系）
 * 支持动态切换和CSS变量引用
 * 包含：主色、辅助色、按钮渐变、标题色彩、板块底纹、交互动画
 * 
 * 主题列表：
 * - cyan: 青色（默认）
 * - blue: 蓝色
 * - green: 绿色
 * - gray: 灰色
 * - purple: 紫色
 * - orange: 橙色
 * - white: 黑白（纯黑白灰配色，底板白色，字体黑色）
 */

:root {
  /* 默认主题（青色） */
  --theme-primary: #0F766E;
  --theme-primary-light: #14B8A6;
  --theme-primary-dark: #0D5C56;
  --theme-secondary: #06B6D4;
  --theme-secondary-light: #22D3EE;
  --theme-secondary-dark: #0891B2;
  --theme-primary-rgb: 15, 118, 110;
  --theme-secondary-rgb: 6, 182, 212;
  --theme-success: #10B981;
  --theme-success-light: #34D399;
  --theme-success-dark: #059669;
  --theme-danger: #EF4444;
  --theme-danger-light: #F87171;
  --theme-danger-dark: #DC2626;
  --theme-warning: #F59E0B;
  --theme-warning-light: #FBBF24;
  --theme-warning-dark: #D97706;
  --theme-info: var(--theme-primary-light);
  --theme-info-light: var(--theme-secondary-light);
  --theme-info-dark: var(--theme-primary);
  --theme-light: #F8FAFC;
  --theme-light-rgb: 248, 250, 252;
  --theme-dark: #1E293B;
  --theme-dark-rgb: 30, 41, 59;
  --theme-gray: #64748B;
  --theme-gray-light: #94A3B8;
  --theme-gray-dark: #475569;
  --theme-gray-rgb: 100, 116, 139;
  
  /* 强调色（用于特殊操作按钮） */
  --theme-accent: #F59E0B;
  --theme-accent-light: #FBBF24;
  --theme-accent-dark: #D97706;
  --theme-accent-rgb: 245, 158, 11;
  
  /* 按钮渐变 */
  --theme-btn-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  --theme-btn-hover-gradient: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-secondary-dark));
  
  /* 标题色彩 */
  --theme-heading-color: var(--theme-dark);
  --theme-subheading-color: var(--theme-gray);
  
  /* 板块底纹 */
  --theme-card-bg: #FFFFFF;
  --theme-card-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --theme-card-hover-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --theme-section-bg: linear-gradient(135deg, var(--theme-light) 0%, #E2E8F0 100%);
  --theme-panel-bg: rgba(var(--theme-primary-rgb), 0.05);
  
  /* 背景渐变 */
  --theme-background-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  --theme-page-bg: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  
  /* 边框颜色 */
  --theme-border: #E2E8F0;
  --theme-border-light: #F1F5F9;
  --theme-border-dark: #CBD5E1;
  --theme-input-border: #E2E8F0;
  --theme-input-focus-border: var(--theme-primary);
  --theme-divider: #E2E8F0;
  
  /* 淡主题色（用于提示信息背景） */
  --theme-primary-faint: rgba(var(--theme-primary-rgb), 0.1);
  --theme-primary-soft: rgba(var(--theme-primary-rgb), 0.15);
  --theme-primary-subtle: rgba(var(--theme-primary-rgb), 0.2);
}

[data-theme="blue"] {
  --theme-primary: #1D4ED8;
  --theme-primary-light: #3B82F6;
  --theme-primary-dark: #1E40AF;
  --theme-secondary: #60A5FA;
  --theme-secondary-light: #93C5FD;
  --theme-secondary-dark: #2563EB;
  --theme-primary-rgb: 29, 78, 216;
  --theme-secondary-rgb: 96, 165, 250;
  --theme-success: #10B981;
  --theme-success-light: #34D399;
  --theme-success-dark: #059669;
  --theme-danger: #EF4444;
  --theme-danger-light: #F87171;
  --theme-danger-dark: #DC2626;
  --theme-warning: #F59E0B;
  --theme-warning-light: #FBBF24;
  --theme-warning-dark: #D97706;
  --theme-info: var(--theme-primary-light);
  --theme-info-light: var(--theme-secondary-light);
  --theme-info-dark: var(--theme-primary);
  --theme-light: #F8FAFC;
  --theme-light-rgb: 248, 250, 252;
  --theme-dark: #1E293B;
  --theme-dark-rgb: 30, 41, 59;
  --theme-gray: #64748B;
  --theme-gray-light: #94A3B8;
  --theme-gray-dark: #475569;
  --theme-gray-rgb: 100, 116, 139;
  --theme-accent: #F59E0B;
  --theme-accent-light: #FBBF24;
  --theme-accent-dark: #D97706;
  --theme-accent-rgb: 245, 158, 11;
  --theme-btn-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  --theme-btn-hover-gradient: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-secondary-dark));
  --theme-heading-color: var(--theme-dark);
  --theme-subheading-color: var(--theme-gray);
  --theme-card-bg: #FFFFFF;
  --theme-card-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --theme-card-hover-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --theme-section-bg: linear-gradient(135deg, var(--theme-light) 0%, #DBEAFE 100%);
  --theme-panel-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-background-gradient: linear-gradient(135deg, #1D4ED8, #60A5FA);
  --theme-page-bg: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
  --theme-border: #DBEAFE;
  --theme-border-light: #EFF6FF;
  --theme-border-dark: #BFDBFE;
  --theme-input-border: #BFDBFE;
  --theme-input-focus-border: var(--theme-primary);
  --theme-divider: #DBEAFE;
  
  /* 淡主题色（用于提示信息背景） */
  --theme-primary-faint: rgba(var(--theme-primary-rgb), 0.1);
  --theme-primary-soft: rgba(var(--theme-primary-rgb), 0.15);
  --theme-primary-subtle: rgba(var(--theme-primary-rgb), 0.2);
}

[data-theme="green"] {
  --theme-primary: #059669;
  --theme-primary-light: #10B981;
  --theme-primary-dark: #047857;
  --theme-secondary: #34D399;
  --theme-secondary-light: #6EE7B7;
  --theme-secondary-dark: #059669;
  --theme-primary-rgb: 5, 150, 105;
  --theme-secondary-rgb: 52, 211, 153;
  --theme-success: #10B981;
  --theme-success-light: #34D399;
  --theme-success-dark: #059669;
  --theme-danger: #EF4444;
  --theme-danger-light: #F87171;
  --theme-danger-dark: #DC2626;
  --theme-warning: #F59E0B;
  --theme-warning-light: #FBBF24;
  --theme-warning-dark: #D97706;
  --theme-info: var(--theme-primary-light);
  --theme-info-light: var(--theme-secondary-light);
  --theme-info-dark: var(--theme-primary);
  --theme-light: #F8FAFC;
  --theme-light-rgb: 248, 250, 252;
  --theme-dark: #1E293B;
  --theme-dark-rgb: 30, 41, 59;
  --theme-gray: #64748B;
  --theme-gray-light: #94A3B8;
  --theme-gray-dark: #475569;
  --theme-gray-rgb: 100, 116, 139;
  --theme-accent: #F59E0B;
  --theme-accent-light: #FBBF24;
  --theme-accent-dark: #D97706;
  --theme-accent-rgb: 245, 158, 11;
  --theme-btn-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  --theme-btn-hover-gradient: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-secondary-dark));
  --theme-heading-color: var(--theme-dark);
  --theme-subheading-color: var(--theme-gray);
  --theme-card-bg: #FFFFFF;
  --theme-card-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --theme-card-hover-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --theme-section-bg: linear-gradient(135deg, var(--theme-light) 0%, #D1FAE5 100%);
  --theme-panel-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-background-gradient: linear-gradient(135deg, #059669, #34D399);
  --theme-page-bg: linear-gradient(180deg, #F8FAFC 0%, #ECFDF5 100%);
  --theme-border: #D1FAE5;
  --theme-border-light: #ECFDF5;
  --theme-border-dark: #A7F3D0;
  --theme-input-border: #A7F3D0;
  --theme-input-focus-border: var(--theme-primary);
  --theme-divider: #D1FAE5;
  
  /* 淡主题色（用于提示信息背景） */
  --theme-primary-faint: rgba(var(--theme-primary-rgb), 0.1);
  --theme-primary-soft: rgba(var(--theme-primary-rgb), 0.15);
  --theme-primary-subtle: rgba(var(--theme-primary-rgb), 0.2);
}

[data-theme="gray"] {
  --theme-primary: #475569;
  --theme-primary-light: #64748B;
  --theme-primary-dark: #334155;
  --theme-secondary: #94A3B8;
  --theme-secondary-light: #CBD5E1;
  --theme-secondary-dark: #64748B;
  --theme-primary-rgb: 71, 85, 105;
  --theme-secondary-rgb: 148, 163, 184;
  --theme-success: #6B7280;
  --theme-success-light: #9CA3AF;
  --theme-success-dark: #4B5563;
  --theme-danger: #DC2626;
  --theme-danger-light: #EF4444;
  --theme-danger-dark: #B91C1C;
  --theme-warning: #92400E;
  --theme-warning-light: #B45309;
  --theme-warning-dark: #78350F;
  --theme-info: var(--theme-primary-light);
  --theme-info-light: var(--theme-secondary-light);
  --theme-info-dark: var(--theme-primary);
  --theme-light: #F8FAFC;
  --theme-light-rgb: 248, 250, 252;
  --theme-dark: #1E293B;
  --theme-dark-rgb: 30, 41, 59;
  --theme-gray: #64748B;
  --theme-gray-light: #94A3B8;
  --theme-gray-dark: #475569;
  --theme-gray-rgb: 100, 116, 139;
  --theme-accent: #6B7280;
  --theme-accent-light: #9CA3AF;
  --theme-accent-dark: #4B5563;
  --theme-accent-rgb: 107, 114, 128;
  --theme-btn-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  --theme-btn-hover-gradient: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-secondary-dark));
  --theme-heading-color: var(--theme-dark);
  --theme-subheading-color: var(--theme-gray);
  --theme-card-bg: #FFFFFF;
  --theme-card-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --theme-card-hover-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --theme-section-bg: linear-gradient(135deg, var(--theme-light) 0%, #F1F5F9 100%);
  --theme-panel-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-background-gradient: linear-gradient(135deg, #475569, #94A3B8);
  --theme-page-bg: linear-gradient(180deg, #F8FAFC 0%, #F8FAFC 100%);
  --theme-border: #F1F5F9;
  --theme-border-light: #F8FAFC;
  --theme-border-dark: #E2E8F0;
  --theme-input-border: #E2E8F0;
  --theme-input-focus-border: var(--theme-primary);
  --theme-divider: #F1F5F9;
  
  /* 淡主题色（用于提示信息背景） */
  --theme-primary-faint: rgba(var(--theme-primary-rgb), 0.1);
  --theme-primary-soft: rgba(var(--theme-primary-rgb), 0.15);
  --theme-primary-subtle: rgba(var(--theme-primary-rgb), 0.2);
}

[data-theme="purple"] {
  --theme-primary: #7E22CE;
  --theme-primary-light: #A855F7;
  --theme-primary-dark: #6B21A8;
  --theme-secondary: #C084FC;
  --theme-secondary-light: #E879F9;
  --theme-secondary-dark: #A855F7;
  --theme-primary-rgb: 126, 34, 206;
  --theme-secondary-rgb: 192, 132, 252;
  --theme-success: #10B981;
  --theme-success-light: #34D399;
  --theme-success-dark: #059669;
  --theme-danger: #EF4444;
  --theme-danger-light: #F87171;
  --theme-danger-dark: #DC2626;
  --theme-warning: #F59E0B;
  --theme-warning-light: #FBBF24;
  --theme-warning-dark: #D97706;
  --theme-info: var(--theme-primary-light);
  --theme-info-light: var(--theme-secondary-light);
  --theme-info-dark: var(--theme-primary);
  --theme-light: #F8FAFC;
  --theme-light-rgb: 248, 250, 252;
  --theme-dark: #1E293B;
  --theme-dark-rgb: 30, 41, 59;
  --theme-gray: #64748B;
  --theme-gray-light: #94A3B8;
  --theme-gray-dark: #475569;
  --theme-gray-rgb: 100, 116, 139;
  --theme-accent: #F59E0B;
  --theme-accent-light: #FBBF24;
  --theme-accent-dark: #D97706;
  --theme-accent-rgb: 245, 158, 11;
  --theme-btn-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  --theme-btn-hover-gradient: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-secondary-dark));
  --theme-heading-color: var(--theme-dark);
  --theme-subheading-color: var(--theme-gray);
  --theme-card-bg: #FFFFFF;
  --theme-card-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --theme-card-hover-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --theme-section-bg: linear-gradient(135deg, var(--theme-light) 0%, #F3E8FF 100%);
  --theme-panel-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-background-gradient: linear-gradient(135deg, #7E22CE, #C084FC);
  --theme-page-bg: linear-gradient(180deg, #F8FAFC 0%, #FAF5FF 100%);
  --theme-border: #F3E8FF;
  --theme-border-light: #FAF5FF;
  --theme-border-dark: #E9D5FF;
  --theme-input-border: #E9D5FF;
  --theme-input-focus-border: var(--theme-primary);
  --theme-divider: #F3E8FF;
  
  /* 淡主题色（用于提示信息背景） */
  --theme-primary-faint: rgba(var(--theme-primary-rgb), 0.1);
  --theme-primary-soft: rgba(var(--theme-primary-rgb), 0.15);
  --theme-primary-subtle: rgba(var(--theme-primary-rgb), 0.2);
}

[data-theme="orange"] {
  --theme-primary: #EA580C;
  --theme-primary-light: #F97316;
  --theme-primary-dark: #C2410C;
  --theme-secondary: #FB923C;
  --theme-secondary-light: #FDBA74;
  --theme-secondary-dark: #EA580C;
  --theme-primary-rgb: 234, 88, 12;
  --theme-secondary-rgb: 251, 146, 60;
  --theme-success: #10B981;
  --theme-success-light: #34D399;
  --theme-success-dark: #059669;
  --theme-danger: #EF4444;
  --theme-danger-light: #F87171;
  --theme-danger-dark: #DC2626;
  --theme-warning: #F59E0B;
  --theme-warning-light: #FBBF24;
  --theme-warning-dark: #D97706;
  --theme-info: var(--theme-primary-light);
  --theme-info-light: var(--theme-secondary-light);
  --theme-info-dark: var(--theme-primary);
  --theme-light: #F8FAFC;
  --theme-light-rgb: 248, 250, 252;
  --theme-dark: #1E293B;
  --theme-dark-rgb: 30, 41, 59;
  --theme-gray: #64748B;
  --theme-gray-light: #94A3B8;
  --theme-gray-dark: #475569;
  --theme-gray-rgb: 100, 116, 139;
  --theme-accent: #F59E0B;
  --theme-accent-light: #FBBF24;
  --theme-accent-dark: #D97706;
  --theme-accent-rgb: 245, 158, 11;
  --theme-btn-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  --theme-btn-hover-gradient: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-secondary-dark));
  --theme-heading-color: var(--theme-dark);
  --theme-subheading-color: var(--theme-gray);
  --theme-card-bg: #FFFFFF;
  --theme-card-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --theme-card-hover-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --theme-section-bg: linear-gradient(135deg, var(--theme-light) 0%, #FFEDD5 100%);
  --theme-panel-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-background-gradient: linear-gradient(135deg, #EA580C, #FB923C);
  --theme-page-bg: linear-gradient(180deg, #F8FAFC 0%, #FFF7ED 100%);
  --theme-border: #FFEDD5;
  --theme-border-light: #FFF7ED;
  --theme-border-dark: #FED7AA;
  --theme-input-border: #FED7AA;
  --theme-input-focus-border: var(--theme-primary);
  --theme-divider: #FFEDD5;
  
  /* 淡主题色（用于提示信息背景） */
  --theme-primary-faint: rgba(var(--theme-primary-rgb), 0.1);
  --theme-primary-soft: rgba(var(--theme-primary-rgb), 0.15);
  --theme-primary-subtle: rgba(var(--theme-primary-rgb), 0.2);
}

[data-theme="white"] {
  --theme-primary: #000000;
  --theme-primary-light: #333333;
  --theme-primary-dark: #000000;
  --theme-secondary: #666666;
  --theme-secondary-light: #999999;
  --theme-secondary-dark: #444444;
  --theme-primary-rgb: 0, 0, 0;
  --theme-secondary-rgb: 102, 102, 102;
  --theme-success: #555555;
  --theme-success-light: #777777;
  --theme-success-dark: #333333;
  --theme-danger: #AA0000;
  --theme-danger-light: #CC0000;
  --theme-danger-dark: #880000;
  --theme-warning: #886600;
  --theme-warning-light: #AA8800;
  --theme-warning-dark: #664400;
  --theme-info: var(--theme-primary-light);
  --theme-info-light: var(--theme-secondary-light);
  --theme-info-dark: var(--theme-primary);
  --theme-light: #FFFFFF;
  --theme-light-rgb: 255, 255, 255;
  --theme-dark: #000000;
  --theme-dark-rgb: 0, 0, 0;
  --theme-gray: #666666;
  --theme-gray-light: #999999;
  --theme-gray-dark: #333333;
  --theme-btn-gradient: linear-gradient(135deg, #000000, #333333);
  --theme-btn-hover-gradient: linear-gradient(135deg, #000000, #222222);
  --theme-heading-color: #000000;
  --theme-subheading-color: #000000;
  --theme-card-bg: #FFFFFF;
  --theme-card-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --theme-card-hover-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --theme-section-bg: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
  --theme-panel-bg: rgba(0, 0, 0, 0.03);
  --theme-background-gradient: linear-gradient(135deg, #000000, #333333);
  --theme-page-bg: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
  --theme-border: #E0E0E0;
  --theme-border-light: #F0F0F0;
  --theme-border-dark: #CCCCCC;
  --theme-input-border: #CCCCCC;
  --theme-input-focus-border: #000000;
  --theme-divider: #E0E0E0;
  
  /* 淡主题色（用于提示信息背景） */
  --theme-primary-faint: rgba(0, 0, 0, 0.05);
  --theme-primary-soft: rgba(0, 0, 0, 0.08);
  --theme-primary-subtle: rgba(0, 0, 0, 0.1);
}

/* 黑白主题特殊样式 - 导航栏白色背景+黑色字体 */
[data-theme="white"] .navbar {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

[data-theme="white"] .navbar-brand,
[data-theme="white"] .navbar-text {
  color: #000000 !important;
}

[data-theme="white"] .navbar .btn-link {
  color: #000000 !important;
}

[data-theme="white"] .navbar .dropdown-item {
  color: #000000 !important;
}

[data-theme="white"] .navbar .dropdown-item:hover {
  background-color: #F0F0F0 !important;
}

[data-theme="white"] .navbar .dropdown-divider {
  border-top-color: #CCCCCC !important;
}

[data-theme="white"] .navbar .dropdown-header {
  color: #000000 !important;
}

[data-theme="white"] #sidebarToggle:hover {
  color: #333333 !important;
}

[data-theme="white"] #userName {
  color: #000000 !important;
}

/* 黑白主题特殊样式 - 侧边栏白色背景+黑色字体 */
[data-theme="white"] .sidebar {
  background: #FFFFFF !important;
  border-right: 2px solid #000000 !important;
}

[data-theme="white"] .sidebar-nav .nav-group-toggle {
  color: #000000 !important;
}

[data-theme="white"] .sidebar-nav .nav-group-toggle:hover {
  background: #F0F0F0 !important;
  color: #000000 !important;
}

[data-theme="white"] .sidebar-nav .nav-item {
  color: #333333 !important;
}

[data-theme="white"] .sidebar-nav .nav-item:hover {
  background: #F5F5F5 !important;
  color: #000000 !important;
}

[data-theme="white"] .sidebar-nav .nav-item.active {
  background: #E0E0E0 !important;
  color: #000000 !important;
  font-weight: 600;
}

/* 黑白主题特殊样式 - 移动端导航栏 */
[data-theme="white"] .navbar .nav-link {
  color: #000000 !important;
}

[data-theme="white"] #mobileLogo {
  filter: grayscale(100%) brightness(0) !important;
}

[data-theme="white"] #companyName {
  color: #000000 !important;
}

[data-theme="white"] #zyAssistantBtn {
  color: #000000 !important;
}

/* 主题色头部（模态框/卡片） - 通用样式，白色主题单独覆盖 */
.modal-header.theme-header,
.card-header.theme-header {
  background: var(--theme-primary);
  color: #fff;
  border-bottom: none;
}
.modal-header.theme-header .modal-title,
.modal-header.theme-header .modal-title i,
.card-header.theme-header h1,
.card-header.theme-header h2,
.card-header.theme-header h3,
.card-header.theme-header h4,
.card-header.theme-header h5,
.card-header.theme-header h6 {
  color: #fff;
}
/* 主题头部工具按钮（与 btn-close 风格一致） */
.btn-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s;
  cursor: pointer;
}
.btn-header-icon:hover {
  opacity: 1;
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.btn-header-icon:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 2px;
}
.btn-header-icon i {
  font-size: 0.85rem;
  color: inherit;
}

/* 黑白主题特殊样式 - 卡片头部白色背景+黑色字体 */
[data-theme="white"] .card-theme-primary .card-header,
[data-theme="white"] .card-theme-secondary .card-header,
[data-theme="white"] .card .card-header,
[data-theme="white"] .card-header.theme-header,
[data-theme="white"] .modal-header.theme-header {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

/* 黑白主题 - 卡片/模态框头部子元素跳色为黑 */
[data-theme="white"] .card .card-header,
[data-theme="white"] .card .card-header h1,
[data-theme="white"] .card .card-header h2,
[data-theme="white"] .card .card-header h3,
[data-theme="white"] .card .card-header h4,
[data-theme="white"] .card .card-header h5,
[data-theme="white"] .card .card-header h6,
[data-theme="white"] .card .card-header span,
[data-theme="white"] .card .card-header i,
[data-theme="white"] .card .card-header strong,
[data-theme="white"] .card-header.theme-header,
[data-theme="white"] .card-header.theme-header h1,
[data-theme="white"] .card-header.theme-header h2,
[data-theme="white"] .card-header.theme-header h3,
[data-theme="white"] .card-header.theme-header h4,
[data-theme="white"] .card-header.theme-header h5,
[data-theme="white"] .card-header.theme-header h6,
[data-theme="white"] .card-header.theme-header span,
[data-theme="white"] .card-header.theme-header i,
[data-theme="white"] .card-header.theme-header strong,
[data-theme="white"] .modal-header.theme-header,
[data-theme="white"] .modal-header.theme-header .modal-title,
[data-theme="white"] .modal-header.theme-header h1,
[data-theme="white"] .modal-header.theme-header h2,
[data-theme="white"] .modal-header.theme-header h3,
[data-theme="white"] .modal-header.theme-header h4,
[data-theme="white"] .modal-header.theme-header h5,
[data-theme="white"] .modal-header.theme-header h6,
[data-theme="white"] .modal-header.theme-header span,
[data-theme="white"] .modal-header.theme-header i {
  color: #000000 !important;
}

/* 黑白主题 - 模态框白色头部下的关闭按钮保持可见 */
[data-theme="white"] .modal-header.theme-header .btn-close {
  filter: none !important;
  opacity: 1 !important;
}

/* 黑白主题 - inline 使用 var(--theme-btn-gradient) 作为背景的容器全部强制纯白 */
/* 覆盖移动端 InstrumentManage 等页面的分组头、                          */
/* PC 端主题预览页的 card-header 等。仅限 div 和 header，避免误伤按钮 */
[data-theme="white"] div[style*="theme-btn-gradient"],
[data-theme="white"] header[style*="theme-btn-gradient"],
[data-theme="white"] section[style*="theme-btn-gradient"] {
  background: #FFFFFF !important;
  background-image: none !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

/* 黑白主题 - 上述容器的子元素跳色为黑（涵盖常见的 text-white / icon / span / 标题）*/
[data-theme="white"] div[style*="theme-btn-gradient"] .text-white,
[data-theme="white"] div[style*="theme-btn-gradient"] .text-white-50,
[data-theme="white"] div[style*="theme-btn-gradient"] i,
[data-theme="white"] div[style*="theme-btn-gradient"] span,
[data-theme="white"] div[style*="theme-btn-gradient"] h1,
[data-theme="white"] div[style*="theme-btn-gradient"] h2,
[data-theme="white"] div[style*="theme-btn-gradient"] h3,
[data-theme="white"] div[style*="theme-btn-gradient"] h4,
[data-theme="white"] div[style*="theme-btn-gradient"] h5,
[data-theme="white"] div[style*="theme-btn-gradient"] h6,
[data-theme="white"] div[style*="theme-btn-gradient"] strong,
[data-theme="white"] header[style*="theme-btn-gradient"] *,
[data-theme="white"] section[style*="theme-btn-gradient"] * {
  color: #000000 !important;
}

/* 黑白主题 - .section-header 板块标签头部强制纯白（适用于移动端仪器领用、采样等页面的分组头）*/
[data-theme="white"] .section-header {
  background: #FFFFFF !important;
  background-image: none !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

[data-theme="white"] .section-header,
[data-theme="white"] .section-header *,
[data-theme="white"] .section-header .section-title,
[data-theme="white"] .section-header .section-toggle-icon,
[data-theme="white"] .section-header span,
[data-theme="white"] .section-header i,
[data-theme="white"] .section-header strong {
  color: #000000 !important;
  opacity: 1 !important;
}

/* 黑白主题 - inline 使用 var(--theme-background-gradient) 作为背景的板块头部强制纯白 */
/* 仅限 div，避免误伤顽部 navbar（header.navbar）和 modal-header */
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) {
  background: #FFFFFF !important;
  background-image: none !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) .text-white,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) .text-white-50,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) i,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) span,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) h1,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) h2,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) h3,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) h4,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) h5,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) h6,
[data-theme="white"] div[style*="theme-background-gradient"]:not(.navbar):not(.modal-header) strong {
  color: #000000 !important;
  opacity: 1 !important;
}

[data-theme="white"] .table-theme-primary thead th,
[data-theme="white"] .table-theme-secondary thead th {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

/* 黑白主题特殊样式 - 工具栏按钮 */
[data-theme="white"] .btn-toolbar-primary {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #FFFFFF !important;
}

[data-theme="white"] .btn-toolbar-primary:hover {
  background: #333333 !important;
  border-color: #333333 !important;
  color: #FFFFFF !important;
}

[data-theme="cyan"] {
  --theme-primary: #0891B2;
  --theme-primary-light: #06B6D4;
  --theme-primary-dark: #0E7490;
  --theme-secondary: #22D3EE;
  --theme-secondary-light: #67E8F9;
  --theme-secondary-dark: #0891B2;
  --theme-primary-rgb: 8, 145, 178;
  --theme-secondary-rgb: 34, 211, 238;
  --theme-success: #10B981;
  --theme-success-light: #34D399;
  --theme-success-dark: #059669;
  --theme-danger: #EF4444;
  --theme-danger-light: #F87171;
  --theme-danger-dark: #DC2626;
  --theme-warning: #F59E0B;
  --theme-warning-light: #FBBF24;
  --theme-warning-dark: #D97706;
  --theme-info: var(--theme-primary-light);
  --theme-info-light: var(--theme-secondary-light);
  --theme-info-dark: var(--theme-primary);
  --theme-light: #F8FAFC;
  --theme-light-rgb: 248, 250, 252;
  --theme-dark: #1E293B;
  --theme-dark-rgb: 30, 41, 59;
  --theme-gray: #64748B;
  --theme-gray-light: #94A3B8;
  --theme-gray-dark: #475569;
  --theme-gray-rgb: 100, 116, 139;
  --theme-accent: #F59E0B;
  --theme-accent-light: #FBBF24;
  --theme-accent-dark: #D97706;
  --theme-accent-rgb: 245, 158, 11;
  --theme-btn-gradient: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  --theme-btn-hover-gradient: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-secondary-dark));
  --theme-heading-color: var(--theme-dark);
  --theme-subheading-color: var(--theme-gray);
  --theme-card-bg: #FFFFFF;
  --theme-card-shadow: 0 8px 16px -3px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --theme-card-hover-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.22), 0 12px 24px -6px rgba(0, 0, 0, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --theme-section-bg: linear-gradient(135deg, var(--theme-light) 0%, #CFFAFE 100%);
  --theme-panel-bg: rgba(var(--theme-primary-rgb), 0.05);
  --theme-background-gradient: linear-gradient(135deg, #0891B2, #22D3EE);
  --theme-page-bg: linear-gradient(180deg, #F8FAFC 0%, #ECFEFF 100%);
  --theme-border: #CFFAFE;
  --theme-border-light: #ECFEFF;
  --theme-border-dark: #A5F3FC;
  --theme-input-border: #A5F3FC;
  --theme-input-focus-border: var(--theme-primary);
  --theme-divider: #CFFAFE;
  
  /* 淡主题色（用于提示信息背景） */
  --theme-primary-faint: rgba(var(--theme-primary-rgb), 0.1);
  --theme-primary-soft: rgba(var(--theme-primary-rgb), 0.15);
  --theme-primary-subtle: rgba(var(--theme-primary-rgb), 0.2);
}

/* 主题颜色应用样式 */
.theme-primary {
  background: var(--theme-btn-gradient) !important;
  border-color: var(--theme-primary) !important;
}

.theme-secondary {
  background-color: var(--theme-secondary) !important;
  border-color: var(--theme-secondary) !important;
}

.theme-success {
  background-color: var(--theme-success) !important;
  border-color: var(--theme-success) !important;
}

.theme-danger {
  background-color: var(--theme-danger) !important;
  border-color: var(--theme-danger) !important;
}

.theme-warning {
  background-color: var(--theme-warning) !important;
  border-color: var(--theme-warning) !important;
}

.theme-info {
  background-color: var(--theme-info) !important;
  border-color: var(--theme-info) !important;
}

.theme-light {
  background-color: var(--theme-light) !important;
  border-color: var(--theme-light) !important;
}

.theme-dark {
  background-color: var(--theme-dark) !important;
  border-color: var(--theme-dark) !important;
}

/* 文本主题色 */
.text-theme-primary {
  color: var(--theme-primary) !important;
}

.text-theme-secondary {
  color: var(--theme-secondary) !important;
}

/* 边框主题色 */
.border-theme-primary {
  border-color: var(--theme-primary) !important;
}

.border-theme-secondary {
  border-color: var(--theme-secondary) !important;
}

/* 按钮主题样式 - 使用梯度色彩 */
.btn-theme-primary {
  background: var(--theme-btn-gradient) !important;
  border-color: var(--theme-primary) !important;
  color: white !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(var(--theme-primary-rgb), 0.2);
}

.btn-theme-primary:hover {
  background: var(--theme-btn-hover-gradient) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(var(--theme-primary-rgb), 0.3);
}

.btn-theme-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(var(--theme-primary-rgb), 0.2);
}

.btn-theme-secondary {
  background-color: var(--theme-secondary) !important;
  border-color: var(--theme-secondary) !important;
  color: white !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(var(--theme-secondary-rgb), 0.2);
}

.btn-theme-secondary:hover {
  background-color: var(--theme-secondary-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(var(--theme-secondary-rgb), 0.3);
}

.btn-theme-success {
  background-color: var(--theme-success) !important;
  border-color: var(--theme-success) !important;
  color: white !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-theme-success:hover {
  background-color: var(--theme-success-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.btn-theme-danger {
  background-color: var(--theme-danger) !important;
  border-color: var(--theme-danger) !important;
  color: white !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.btn-theme-danger:hover {
  background-color: var(--theme-danger-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.btn-theme-warning {
  background-color: var(--theme-warning) !important;
  border-color: var(--theme-warning) !important;
  color: black !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.btn-theme-warning:hover {
  background-color: var(--theme-warning-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.btn-theme-info {
  background-color: var(--theme-info) !important;
  border-color: var(--theme-info) !important;
  color: white !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-theme-info:hover {
  background-color: var(--theme-info-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.btn-close-theme {
  background-color: var(--theme-primary) !important;
  color: white !important;
  border-color: var(--theme-primary) !important;
}

.btn-close-theme:hover {
  background-color: var(--theme-secondary) !important;
  color: white !important;
  border-color: var(--theme-secondary) !important;
}

/* 轮廓按钮主题样式 */
.btn-outline-theme-primary {
  color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  background-color: transparent !important;
}

.btn-outline-theme-primary:hover,
.btn-outline-theme-primary.active {
  background-color: var(--theme-primary) !important;
  color: white !important;
  border-color: var(--theme-primary) !important;
}

.btn-outline-theme-secondary {
  color: var(--theme-secondary) !important;
  border-color: var(--theme-secondary) !important;
  background-color: transparent !important;
}

.btn-outline-theme-secondary:hover,
.btn-outline-theme-secondary.active {
  background-color: var(--theme-secondary) !important;
  color: white !important;
  border-color: var(--theme-secondary) !important;
}

/* 卡片主题样式 - 增强阴影和悬停效果 */
.card-theme-primary {
  border-color: var(--theme-primary) !important;
  transition: all 0.3s ease;
  box-shadow: var(--theme-card-shadow);
}

.card-theme-primary:hover {
  transform: translateY(-6px) scale(1.005);
  box-shadow: var(--theme-card-hover-shadow);
}

.card-theme-primary .card-header {
  background: var(--theme-btn-gradient) !important;
  color: white !important;
  border-bottom: none;
}

.card-theme-secondary {
  border-color: var(--theme-secondary) !important;
  transition: all 0.3s ease;
  box-shadow: var(--theme-card-shadow);
}

.card-theme-secondary:hover {
  transform: translateY(-6px) scale(1.005);
  box-shadow: var(--theme-card-hover-shadow);
}

.card-theme-secondary .card-header {
  background-color: var(--theme-secondary) !important;
  color: white !important;
  border-bottom: none;
}

/* 表格主题样式 - 增强交互效果 */
.table-theme-primary thead th {
  background: var(--theme-btn-gradient) !important;
  color: white !important;
  border: none;
  font-weight: 600;
}

.table-theme-primary tbody tr {
  transition: all 0.2s ease;
}

.table-theme-primary tbody tr:hover {
  background-color: rgba(var(--theme-primary-rgb), 0.08) !important;
  transform: translateX(3px);
}

.table-theme-secondary thead th {
  background-color: var(--theme-secondary) !important;
  color: white !important;
  border: none;
  font-weight: 600;
}

.table-theme-secondary tbody tr {
  transition: all 0.2s ease;
}

.table-theme-secondary tbody tr:hover {
  background-color: rgba(var(--theme-secondary-rgb), 0.08) !important;
  transform: translateX(3px);
}

/* 状态面板主题样式 - 增强视觉效果 */
.status-panel-compact {
  background: var(--theme-section-bg) !important;
  border-bottom: 2px solid var(--theme-secondary) !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.status-panel-compact:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.status-panel-compact .status-left-compact span {
  color: var(--theme-heading-color) !important;
  font-weight: 500;
}

.toolbar-panel {
  background: var(--theme-section-bg) !important;
  border-bottom: 2px solid var(--theme-secondary) !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.toolbar-panel:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* 操作按钮主题样式 - 梯度色彩和交互动画 */
.btn-toolbar-primary {
  background: var(--theme-btn-gradient) !important;
  border-color: var(--theme-primary) !important;
  color: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(var(--theme-primary-rgb), 0.2);
  position: relative;
  overflow: hidden;
}

.btn-toolbar-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: 0.5s;
}

.btn-toolbar-primary:hover::before {
  left: 100%;
}

.btn-toolbar-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(var(--theme-primary-rgb), 0.3);
}

.btn-toolbar-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 3px rgba(var(--theme-primary-rgb), 0.2);
}

.btn-toolbar-secondary {
  background-color: var(--theme-secondary) !important;
  border-color: var(--theme-secondary) !important;
  color: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(var(--theme-secondary-rgb), 0.2);
}

.btn-toolbar-secondary:hover {
  background-color: var(--theme-secondary-light) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(var(--theme-secondary-rgb), 0.3);
}

.btn-toolbar-success {
  background-color: var(--theme-success) !important;
  border-color: var(--theme-success) !important;
  color: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-toolbar-success:hover {
  background-color: var(--theme-success-light) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3);
}

.btn-toolbar-danger {
  background-color: var(--theme-danger) !important;
  border-color: var(--theme-danger) !important;
  color: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.btn-toolbar-danger:hover {
  background-color: var(--theme-danger-light) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
}

.btn-toolbar-warning {
  background-color: var(--theme-warning) !important;
  border-color: var(--theme-warning) !important;
  color: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.btn-toolbar-warning:hover {
  background-color: var(--theme-warning-light) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.3);
}

.btn-toolbar-info {
  background-color: var(--theme-info) !important;
  border-color: var(--theme-info) !important;
  color: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-toolbar-info:hover {
  background-color: var(--theme-info-light) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
}

/* 主题选择器样式 - 增强交互效果 */
.theme-selector {
  display: flex;
  gap: 12px;
  margin: 15px 0;
  padding: 12px;
  background: var(--theme-section-bg);
  border-radius: 12px;
  border: 1px solid var(--theme-secondary);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.theme-selector:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid transparent;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--theme-heading-color);
  transform: scale(1);
  position: relative;
  overflow: hidden;
}

.theme-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: 0.5s;
}

.theme-btn:hover::before {
  left: 100%;
}

.theme-btn:hover {
  background-color: rgba(var(--theme-primary-rgb), 0.08);
  border-color: var(--theme-primary);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.theme-btn[aria-checked="true"] {
  background: var(--theme-btn-gradient);
  color: white;
  border-color: var(--theme-primary);
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb), 0.3);
}

.color-preview {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-btn[aria-checked="true"] .color-preview {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--theme-primary), 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .theme-selector {
    flex-wrap: wrap;
  }
  
  .theme-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .color-preview {
    width: 16px;
    height: 16px;
  }
}

/* 表格交互动画 - 增强视觉效果 */
.table-panel {
  overflow-x: auto;
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.table-panel:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.table-hover tbody tr {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.table-hover tbody tr:hover {
  background-color: rgba(var(--theme-primary-rgb), 0.06) !important;
  transform: translateX(4px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 操作列按钮组样式修复 - 解决透明背景导致的视觉重叠问题 */
.btn-group-sm {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-group-sm .btn {
  border-radius: 3px !important;
  margin: 0 1px;
  position: relative;
  z-index: 1;
}

.btn-group-sm .btn:first-child {
  margin-left: 0;
}

.btn-group-sm .btn:last-child {
  margin-right: 0;
}

/* 操作列按钮悬停效果增强 */
.btn-group-sm .btn:hover {
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 操作列中的轮廓按钮样式优化 */
.btn-group-sm .btn-outline-primary,
.btn-group-sm .btn-outline-warning,
.btn-group-sm .btn-outline-danger,
.btn-group-sm .btn-outline-success,
.btn-group-sm .btn-outline-info {
  background-color: #ffffff;
  border-width: 1px;
}

.btn-group-sm .btn-outline-primary:hover {
  background-color: var(--theme-primary);
  color: white;
}

.btn-group-sm .btn-outline-warning:hover {
  background-color: var(--theme-warning);
  color: white;
}

.btn-group-sm .btn-outline-danger:hover {
  background-color: var(--theme-danger);
  color: white;
}

.btn-group-sm .btn-outline-success:hover {
  background-color: var(--theme-success);
  color: white;
}

.btn-group-sm .btn-outline-info:hover {
  background-color: var(--theme-info);
  color: white;
}

/* 固定列样式增强 - 防止透明背景导致的视觉重叠问题 */
/* 左侧固定列 */
td[style*="position: sticky"][style*="left: 0"],
td[style*="position:sticky"][style*="left:0"],
table td:first-child[style*="sticky"],
table th:first-child[style*="sticky"] {
  background-color: #ffffff !important;
}

/* 右侧固定列 */
td[style*="position: sticky"][style*="right: 0"],
td[style*="position:sticky"][style*="right:0"],
table td:last-child[style*="sticky"],
table th:last-child[style*="sticky"] {
  background-color: #ffffff !important;
}

/* 常见表格类的固定列样式覆盖 */
.data-table td:first-child,
.data-table th:first-child,
.data-table td:last-child,
.data-table th:last-child,
.ref-table td:first-child,
.ref-table th:first-child,
.ref-table td:last-child,
.ref-table th:last-child {
  background-color: #ffffff;
}

/* 固定列悬停和选中状态 - 确保不透明 */
.data-table tbody tr:hover td:first-child,
.data-table tbody tr:hover td:last-child,
.data-table tbody tr.active td:first-child,
.data-table tbody tr.active td:last-child,
.ref-table tbody tr:hover td:first-child,
.ref-table tbody tr:hover td:last-child,
.ref-table tbody tr.active td:first-child,
.ref-table tbody tr.active td:last-child {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(1px);
}

/* 更通用的固定列透明背景修复 */
table td[style*="sticky"],
table th[style*="sticky"] {
  background-color: #ffffff !important;
}

table tbody tr:hover td[style*="sticky"],
table tbody tr.active td[style*="sticky"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(1px);
}

/* 按钮交互动画 - 统一动画效果 */
.btn-toolbar-primary,
.btn-toolbar-secondary,
.btn-toolbar-success,
.btn-toolbar-danger,
.btn-toolbar-warning,
.btn-toolbar-info {
  position: relative;
  overflow: hidden;
}

.btn-toolbar-primary::after,
.btn-toolbar-secondary::after,
.btn-toolbar-success::after,
.btn-toolbar-danger::after,
.btn-toolbar-warning::after,
.btn-toolbar-info::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.btn-toolbar-primary:focus:not(:active)::after,
.btn-toolbar-secondary:focus:not(:active)::after,
.btn-toolbar-success:focus:not(:active)::after,
.btn-toolbar-danger:focus:not(:active)::after,
.btn-toolbar-warning:focus:not(:active)::after,
.btn-toolbar-info:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(50, 50);
    opacity: 0;
  }
}

/* 状态面板动画 - 增强过渡效果 */
.status-panel-compact {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-panel-compact:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* 回到顶部按钮动画 - 增强视觉效果 */
.btn-back-to-top {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-back-to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.btn-back-to-top:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 工具栏动画 - 增强交互效果 */
.toolbar-panel {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-panel:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* 响应式比例优化 */
@media (min-width: 992px) {
  .table-panel {
    max-height: 60vh;
  }
  
  #mainTable {
    min-width: 100%;
  }
  
  #mainTable th,
  #mainTable td {
    padding: 10px 12px;
  }
}

@media (max-width: 768px) {
  .toolbar-row {
    flex-direction: column;
  }
  
  .toolbar-left,
  .toolbar-right {
    width: 100%;
  }
  
  .filter-box,
  .search-box {
    margin-bottom: 8px;
  }
  
  .status-row-compact {
    flex-direction: column;
  }
  
  .status-left-compact,
  .status-center-compact,
  .status-right-compact {
    width: 100%;
    margin-bottom: 8px;
  }
}

/* 动画类 - 增强视觉效果 */
.hover-animation {
  animation: hover-fade 0.3s ease;
}

.btn-hover-animation {
  animation: btn-scale 0.3s ease;
}

.toolbar-hover-animation {
  animation: toolbar-scale 0.3s ease;
}

/* 淡入动画 */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 滑入动画 */
.slide-in-left {
  animation: slideInLeft 0.4s ease forwards;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.slide-in-right {
  animation: slideInRight 0.4s ease forwards;
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 弹跳动画 */
.bounce-in {
  animation: bounceIn 0.6s ease forwards;
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* 脉冲动画 */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 摇晃动画 */
.shake {
  animation: shake 0.5s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes hover-fade {
  0% { opacity: 1; }
  50% { opacity: 0.95; }
  100% { opacity: 1; }
}

@keyframes btn-scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes toolbar-scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ============================================ */
/* 按钮立体感增强 - 统一加强外阴影 + 内高光 + 内底阴影 */
/* 通过多层阴影叠加，模拟物理凸起的厚度与质感       */
/* ============================================ */
.btn-theme-primary,
.btn-theme-secondary,
.btn-theme-success,
.btn-theme-danger,
.btn-theme-warning,
.btn-theme-info,
.btn-toolbar-primary,
.btn-toolbar-secondary,
.btn-toolbar-success,
.btn-toolbar-danger,
.btn-toolbar-warning,
.btn-toolbar-info {
  box-shadow:
    0 6px 12px -2px rgba(0, 0, 0, 0.22),
    0 3px 6px -1px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12) !important;
}

.btn-theme-primary:hover,
.btn-theme-secondary:hover,
.btn-theme-success:hover,
.btn-theme-danger:hover,
.btn-theme-warning:hover,
.btn-theme-info:hover,
.btn-toolbar-primary:hover,
.btn-toolbar-secondary:hover,
.btn-toolbar-success:hover,
.btn-toolbar-danger:hover,
.btn-toolbar-warning:hover,
.btn-toolbar-info:hover {
  box-shadow:
    0 12px 24px -4px rgba(0, 0, 0, 0.32),
    0 6px 12px -2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-3px) scale(1.02);
}

.btn-theme-primary:active,
.btn-theme-secondary:active,
.btn-theme-success:active,
.btn-theme-danger:active,
.btn-theme-warning:active,
.btn-theme-info:active,
.btn-toolbar-primary:active,
.btn-toolbar-secondary:active,
.btn-toolbar-success:active,
.btn-toolbar-danger:active,
.btn-toolbar-warning:active,
.btn-toolbar-info:active {
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.18),
    inset 0 3px 6px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(1px) scale(0.98);
}

/* 轮廓按钮（outline）轻量立体感 */
.btn-outline-theme-primary,
.btn-outline-theme-secondary {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.btn-outline-theme-primary:hover,
.btn-outline-theme-secondary:hover {
  box-shadow:
    0 8px 16px -3px rgba(var(--theme-primary-rgb), 0.32),
    0 4px 8px -2px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 卡片立体感增强 - 给所有 .card 提供柔和的浮起阴影 */
.card {
  box-shadow:
    0 4px 8px -2px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  box-shadow:
    0 16px 32px -6px rgba(0, 0, 0, 0.18),
    0 8px 16px -4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-3px);
}

/* 黑白主题：弱化彩色阴影，保持极简黑白质感 */
[data-theme="white"] .btn-theme-primary,
[data-theme="white"] .btn-theme-secondary,
[data-theme="white"] .btn-theme-success,
[data-theme="white"] .btn-theme-danger,
[data-theme="white"] .btn-theme-warning,
[data-theme="white"] .btn-theme-info,
[data-theme="white"] .btn-toolbar-primary,
[data-theme="white"] .btn-toolbar-secondary,
[data-theme="white"] .btn-toolbar-success,
[data-theme="white"] .btn-toolbar-danger,
[data-theme="white"] .btn-toolbar-warning,
[data-theme="white"] .btn-toolbar-info {
  box-shadow:
    0 4px 8px -2px rgba(0, 0, 0, 0.25),
    0 2px 4px -1px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* ============================================ */
/* 移动端按钮立体感增强                          */
/* 范围：.mobile-layout 内部所有 .btn，                  */
/* 排除链接型（btn-link）、关闭型、底部导航等 */
/* ============================================ */
.mobile-layout .btn:not(.btn-link):not(.btn-close):not(.btn-close-white):not(.theme-btn):not(.btn-back-to-top):not(.nav-link) {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 5px 10px -2px rgba(0, 0, 0, 0.2),
    0 2px 4px -1px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.mobile-layout .btn:not(.btn-link):not(.btn-close):not(.btn-close-white):not(.theme-btn):not(.btn-back-to-top):not(.nav-link):hover,
.mobile-layout .btn:not(.btn-link):not(.btn-close):not(.btn-close-white):not(.theme-btn):not(.btn-back-to-top):not(.nav-link):focus {
  box-shadow:
    0 10px 20px -4px rgba(0, 0, 0, 0.28),
    0 5px 10px -2px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.mobile-layout .btn:not(.btn-link):not(.btn-close):not(.btn-close-white):not(.theme-btn):not(.btn-back-to-top):not(.nav-link):active {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 3px 6px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(1px) scale(0.98);
}

/* 移动端输入框内附带的小按钮（input-group 清除、搜索等）减弱阴影 */
.mobile-layout .input-group .btn {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.mobile-layout .input-group .btn:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: none;
}

/* 移动端底部导航栏保持扭平（避免被上面规则意外影响） */
.mobile-layout .mobile-footer-nav .btn,
.mobile-layout .mobile-footer-nav .nav-link {
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================ */
/* PC 端按钮立体感增强                              */
/* 范围：.web-layout 内部所有 .btn，                       */
/* 排除链接型/关闭型/侧边栏导航等不适合凸起的按钮 */
/* ============================================ */
.web-layout .btn:not(.btn-link):not(.btn-close):not(.btn-close-white):not(.theme-btn):not(.btn-back-to-top):not(.nav-link):not(.dropdown-item):not(.page-link) {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 5px 10px -2px rgba(0, 0, 0, 0.18),
    0 2px 4px -1px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.web-layout .btn:not(.btn-link):not(.btn-close):not(.btn-close-white):not(.theme-btn):not(.btn-back-to-top):not(.nav-link):not(.dropdown-item):not(.page-link):hover,
.web-layout .btn:not(.btn-link):not(.btn-close):not(.btn-close-white):not(.theme-btn):not(.btn-back-to-top):not(.nav-link):not(.dropdown-item):not(.page-link):focus {
  box-shadow:
    0 10px 22px -4px rgba(0, 0, 0, 0.26),
    0 5px 10px -2px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 0 rgba(0, 0, 0, 0.13);
  transform: translateY(-2px);
}

.web-layout .btn:not(.btn-link):not(.btn-close):not(.btn-close-white):not(.theme-btn):not(.btn-back-to-top):not(.nav-link):not(.dropdown-item):not(.page-link):active {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 3px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(1px) scale(0.98);
}

/* PC 端输入框内附带的小按钮减弱阴影，保持输入框各则表现 */
.web-layout .input-group .btn {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.web-layout .input-group .btn:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: none;
}

/* 顶部导航栏、侧边栏、modal 头部内的按钮保持扭平 */
.web-layout .navbar .btn,
.web-layout .sidebar .btn,
.web-layout .modal-header .btn {
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================ */
/* PC + 移动端：白底容器类卡片立体感统一增强    */
/* 覆盖不使用 .card 但使用 shadow-sm 的容器                */
/* ============================================ */
.web-layout .shadow-sm:not(.navbar):not(.dropdown-menu):not(.btn):not(.modal-content):not(.toast),
.mobile-layout .shadow-sm:not(.navbar):not(.dropdown-menu):not(.btn):not(.modal-content):not(.toast):not(.mobile-footer-nav) {
  box-shadow:
    0 6px 12px -2px rgba(0, 0, 0, 0.14),
    0 3px 6px -1px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.web-layout .shadow-sm:not(.navbar):not(.dropdown-menu):not(.btn):not(.modal-content):not(.toast):hover,
.mobile-layout .shadow-sm:not(.navbar):not(.dropdown-menu):not(.btn):not(.modal-content):not(.toast):not(.mobile-footer-nav):hover {
  box-shadow:
    0 14px 28px -6px rgba(0, 0, 0, 0.2),
    0 6px 12px -3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-2px);
}