/**
 * BkERP主题系统 v4.0(20260324,使用Claude Opus 4.6整理)
 * 基于 Material Design 3 规范
 * 支持多主题切换：经典白、天空蓝、暗夜蓝、清波翠、温暖橙、简约灰、
 *               皇家紫、深靛蓝、玫瑰粉、碧波青、森林绿、暗夜紫、琥珀黄、星空黑
 */

/* 引入颜色定义 */
@import url('color.css');

/* =========================== */
/*       默认主题 - 经典白       */
/*   专业、简洁、适合商务使用     */
/* =========================== */

:root {
    font-size: 62.5%; /* 1rem = 10px */
    /* 字体系统 */
    --bkerp-font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    --bkerp-font-size-base: 1.4rem;
    --bkerp-font-size-sm: 1.2rem;
    --bkerp-font-size-smr: 1rem;
    --bkerp-font-size-lg: 1.6rem;
    --bkerp-font-size-lgr: 1.8rem;
    --bkerp-font-size: var(--bkerp-font-size-base);
    --bkerp-font-size-xl: 2rem;
    /* 语义化状态颜色 */
    --bkerp-success: var(--green-500);
    --bkerp-warning: var(--orange-600);
    --bkerp-error: var(--red-500);
    --bkerp-info: var(--blue-500);
    --bkerp-danger: var(--bkerp-btn-danger-bg);
    /* 品牌颜色 - 更专业的配色 */
    --bkerp-primary: var(--grey-700);
    --bkerp-secondary: var(--grey-600);
    --bkerp-accent: var(--blue-600);
    /* 表面颜色 - 组件容器的背景与前景色 */
    --bkerp-surface: var(--white-50);                /* 组件背景色（卡片、对话框、面板等） */
    --bkerp-surface-variant: var(--white-100);       /* 备选背景色（悬停、嵌套区域） */
    --bkerp-on-surface: var(--grey-800);             /* 背景上的主要文字/图标颜色 */
    --bkerp-on-surface-variant: var(--grey-600);     /* 背景上的次要文字颜色 */
    /* 输入框颜色 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--grey-300);
    --bkerp-input-border-color-focus: var(--blue-600);
    --bkerp-input-shadow: var(--shadow-2);
    /* 导航区域颜色 */
    --bkerp-nav-bg: var(--white-100);
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--white-200));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    /* 卡片相关颜色 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--white-100));
    --bkerp-card-border-color: var(--grey-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--grey-50), var(--grey-100));
    --bkerp-card-shadow: var(--shadow-2);
    /* 按钮颜色 */
    --bkerp-btn-primary-bg: var(--grey-700);
    --bkerp-btn-secondary-bg: var(--grey-500);
    --bkerp-btn-warning-bg: var(--yellow-600);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--grey-300);
    --bkerp-btn-disabled-text: var(--grey-500);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    /* 上下文菜单颜色 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--grey-100));
    --bkerp-menu-text-color: var(--grey-800);
    --bkerp-menu-shadow: var(--shadow-3);
    /* 可点击文字颜色 */
    --bkerp-link-text-color: var(--blue-600);
    --bkerp-link-text-hover-color: var(--blue-800);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--blue-600);
    /* 滚动条颜色 */
    --bkerp-scrollbar-track-color: var(--grey-100);
    --bkerp-scrollbar-thumb-color: var(--grey-400);
    --bkerp-scrollbar-thumb-hover-color: var(--grey-500);
    /* 标题和禁用颜色 */
    --bkerp-heading-color: var(--grey-700);
    --bkerp-disabled-color: var(--grey-300);
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--blue-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
    --bkerp-selection-bg: var(--blue-100);
    --bkerp-selection-text: var(--grey-800);
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--grey-100);
    --bkerp-skeleton-shimmer: var(--grey-200);
    --bkerp-placeholder-text: var(--grey-400);
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--grey-50);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--grey-50);
    --bkerp-table-row-hover-bg: var(--blue-50);
    --bkerp-table-border-color: var(--grey-200);  
}

/* =========================== */
/*       天空蓝主题            */
/*   清新、活力、适合创意工作     */
/* =========================== */

.skyblue {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--light-blue-50), var(--light-blue-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    /* 表面颜色 */
    --bkerp-surface: var(--light-blue-50);
    --bkerp-surface-variant: var(--light-blue-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    /* 品牌颜色 */
    --bkerp-primary: var(--light-blue-600);
    --bkerp-secondary: var(--blue-500);
    --bkerp-accent: var(--orange-500);
    /* 输入框 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--light-blue-200);
    --bkerp-input-border-color-focus: var(--light-blue-600);
    --bkerp-input-shadow: var(--shadow-3);
    /* 导航区域 */
    --bkerp-nav-bg: var(--light-blue-200);
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--light-blue-100));
    --bkerp-card-border-color: var(--light-blue-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--light-blue-100), var(--light-blue-200));
    --bkerp-card-shadow: var(--shadow-3);
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--light-blue-600);
    --bkerp-btn-secondary-bg: var(--light-blue-500);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--light-blue-300);
    --bkerp-btn-disabled-text: var(--light-blue-600);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--light-blue-300), var(--light-blue-500));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    /* 可点击文字 */
    --bkerp-link-text-color: var(--light-blue-700);
    --bkerp-link-text-hover-color: var(--orange-600);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--light-blue-600);
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--light-blue-100);
    --bkerp-scrollbar-thumb-color: var(--light-blue-300);
    --bkerp-scrollbar-thumb-hover-color: var(--light-blue-400);
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--light-blue-700);
    --bkerp-disabled-color: var(--light-blue-200);
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--light-blue-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(3, 169, 244, 0.3);
    --bkerp-selection-bg: var(--light-blue-200);
    --bkerp-selection-text: var(--grey-800);
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--light-blue-100);
    --bkerp-skeleton-shimmer: var(--light-blue-200);
    --bkerp-placeholder-text: var(--grey-500);
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--light-blue-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--light-blue-50);
    --bkerp-table-row-hover-bg: var(--light-blue-100);
    --bkerp-table-border-color: var(--light-blue-200); 
}

/* =========================== */
/*       暗夜蓝主题            */
/* =========================== */

.darkblue {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--darkblue-600), var(--darkblue-800));
    --bkerp-text-color: var(--dark-text-primary);
    --bkerp-text-color-secondary: var(--dark-text-secondary);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    /* 表面颜色 */
    --bkerp-surface: var(--darkblue-800);
    --bkerp-surface-variant: var(--darkblue-700);
    --bkerp-on-surface: var(--dark-text-primary);
    --bkerp-on-surface-variant: var(--dark-text-secondary);
    /* 品牌颜色 */
    --bkerp-primary: var(--darkblue-400);
    --bkerp-secondary: var(--darkblue-300);
    --bkerp-accent: var(--orange-400);
    /* 输入框 */
    --bkerp-input-bg: var(--darkblue-700);
    --bkerp-input-border-color: var(--darkblue-500);
    --bkerp-input-border-color-focus: var(--orange-500);
    --bkerp-input-shadow: var(--dark-shadow-1);
    /* 导航区域 */
    --bkerp-nav-bg: var(--darkblue-900);
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--darkblue-700), var(--darkblue-600));
    --bkerp-card-border-color: var(--darkblue-500);
    --bkerp-card-text-color: var(--dark-text-secondary);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--darkblue-500), var(--darkblue-400));
    --bkerp-card-shadow: var(--dark-shadow-1);
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--darkblue-500);
    --bkerp-btn-secondary-bg: var(--darkblue-400);
    --bkerp-btn-warning-bg: var(--orange-600);
    --bkerp-btn-danger-bg: var(--red-600);
    --bkerp-btn-text: var(--dark-text-primary);
    --bkerp-btn-disabled-bg: var(--darkblue-300);
    --bkerp-btn-disabled-text: var(--darkblue-500);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, white 20%);
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--darkblue-600), var(--darkblue-500));
    --bkerp-menu-text-color: var(--dark-text-primary);
    --bkerp-menu-shadow: var(--dark-shadow-1);
    /* 可点击文字 */
    --bkerp-link-text-color: var(--teal-300);
    --bkerp-link-text-hover-color: var(--orange-400);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--darkblue-900);
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--darkblue-900);
    --bkerp-scrollbar-thumb-color: var(--darkblue-600);
    --bkerp-scrollbar-thumb-hover-color: var(--darkblue-500);
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--dark-text-secondary);
    --bkerp-disabled-color: var(--dark-text-disabled);
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--orange-400);
    --bkerp-focus-shadow: 0 0 0 3px rgba(255, 167, 38, 0.3);
    --bkerp-selection-bg: var(--darkblue-500);
    --bkerp-selection-text: var(--dark-text-primary);
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--darkblue-700);
    --bkerp-skeleton-shimmer: var(--darkblue-600);
    --bkerp-placeholder-text: var(--dark-text-disabled);
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--darkblue-700);
    --bkerp-table-row-even-bg: var(--darkblue-800);
    --bkerp-table-row-odd-bg: var(--darkblue-850);
    --bkerp-table-row-hover-bg: var(--darkblue-600);
    --bkerp-table-border-color: var(--darkblue-500);
    

    
    
   
}

/* =========================== */
/*       清波翠主题            */
/* =========================== */

.teal {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--teal-50), var(--teal-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    /* 表面颜色 */
    --bkerp-surface: var(--teal-50);
    --bkerp-surface-variant: var(--teal-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    /* 输入框 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--teal-200);
    --bkerp-input-border-color-focus: var(--teal-500);
    --bkerp-input-shadow: var(--shadow-3);
    /* 导航区域 */
    --bkerp-nav-bg: var(--teal-200);
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--teal-100));
    --bkerp-card-border-color: var(--teal-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--teal-200), var(--teal-400));
    --bkerp-card-shadow: var(--shadow-3);
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--teal-500);
    --bkerp-btn-secondary-bg: var(--teal-400);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--teal-300);
    --bkerp-btn-disabled-text: var(--teal-600);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--teal-300), var(--teal-500));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    /* 可点击文字 */
    --bkerp-link-text-color: var(--teal-600);
    --bkerp-link-text-hover-color: var(--teal-800);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--teal-500);
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--teal-100);
    --bkerp-scrollbar-thumb-color: var(--teal-300);
    --bkerp-scrollbar-thumb-hover-color: var(--teal-400);
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--teal-700);
    --bkerp-disabled-color: var(--teal-200);
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--teal-500);
    --bkerp-focus-shadow: 0 0 0 3px rgba(0, 150, 136, 0.3);
    --bkerp-selection-bg: var(--teal-200);
    --bkerp-selection-text: var(--grey-800);
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--teal-100);
    --bkerp-skeleton-shimmer: var(--teal-200);
    --bkerp-placeholder-text: var(--grey-500);
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--teal-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--teal-50);
    --bkerp-table-row-hover-bg: var(--teal-100);
    --bkerp-table-border-color: var(--teal-200);
    

    
    
   
}

/* =========================== */
/*       温暖橙主题            */
/* =========================== */

.warm {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--orange-50), var(--orange-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    /* 表面颜色 */
    --bkerp-surface: var(--orange-50);
    --bkerp-surface-variant: var(--orange-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    /* 输入框 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--orange-200);
    --bkerp-input-border-color-focus: var(--orange-500);
    --bkerp-input-shadow: var(--shadow-3);
    /* 导航区域 */
    --bkerp-nav-bg: var(--orange-200);
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--orange-100));
    --bkerp-card-border-color: var(--orange-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--orange-200), var(--orange-400));
    --bkerp-card-shadow: var(--shadow-3);
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--orange-500);
    --bkerp-btn-secondary-bg: var(--orange-400);
    --bkerp-btn-warning-bg: var(--orange-700);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--orange-300);
    --bkerp-btn-disabled-text: var(--orange-600);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--orange-300), var(--orange-500));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    /* 可点击文字 */
    --bkerp-link-text-color: var(--orange-600);
    --bkerp-link-text-hover-color: var(--orange-800);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--orange-500);
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--orange-100);
    --bkerp-scrollbar-thumb-color: var(--orange-300);
    --bkerp-scrollbar-thumb-hover-color: var(--orange-400);
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--orange-700);
    --bkerp-disabled-color: var(--orange-200);
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--orange-500);
    --bkerp-focus-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3);
    --bkerp-selection-bg: var(--orange-200);
    --bkerp-selection-text: var(--grey-800);
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--orange-100);
    --bkerp-skeleton-shimmer: var(--orange-200);
    --bkerp-placeholder-text: var(--grey-500);
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--orange-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--orange-50);
    --bkerp-table-row-hover-bg: var(--orange-100);
    --bkerp-table-border-color: var(--orange-200);
    

    
    
   
}

/* =========================== */
/*       简约灰主题            */
/* =========================== */

.grey {
    /* 背景和文字 */
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--grey-100), var(--grey-200));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    /* 表面颜色 */
    --bkerp-surface: var(--grey-50);
    --bkerp-surface-variant: var(--grey-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    /* 输入框 */
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--grey-300);
    --bkerp-input-border-color-focus: var(--grey-600);
    --bkerp-input-shadow: var(--shadow-3);
    /* 导航区域 */
    --bkerp-nav-bg: var(--grey-300);
    /* 卡片相关 */
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--grey-100));
    --bkerp-card-border-color: var(--grey-300);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--grey-200), var(--grey-400));
    --bkerp-card-shadow: var(--shadow-3);
    /* 按钮 */
    --bkerp-btn-primary-bg: var(--grey-600);
    --bkerp-btn-secondary-bg: var(--grey-500);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--grey-300);
    --bkerp-btn-disabled-text: var(--grey-500);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    /* 上下文菜单 */
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--grey-400), var(--grey-600));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    /* 可点击文字 */
    --bkerp-link-text-color: var(--grey-700);
    --bkerp-link-text-hover-color: var(--grey-900);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--grey-600);
    /* 滚动条 */
    --bkerp-scrollbar-track-color: var(--grey-200);
    --bkerp-scrollbar-thumb-color: var(--grey-400);
    --bkerp-scrollbar-thumb-hover-color: var(--grey-500);
    /* 标题和禁用色 */
    --bkerp-heading-color: var(--grey-700);
    --bkerp-disabled-color: var(--grey-400);
    /* 焦点和选中状态 */
    --bkerp-focus-outline: 2px solid var(--grey-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(117, 117, 117, 0.3);
    --bkerp-selection-bg: var(--grey-300);
    --bkerp-selection-text: var(--grey-800);
    /* 加载和占位符颜色 */
    --bkerp-skeleton-bg: var(--grey-200);
    --bkerp-skeleton-shimmer: var(--grey-300);
    --bkerp-placeholder-text: var(--grey-500);
    /* 表格颜色 */
    --bkerp-table-header-bg: var(--grey-200);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--grey-50);
    --bkerp-table-row-hover-bg: var(--grey-100);
    --bkerp-table-border-color: var(--grey-300);
    

    
    
   
}

/* =========================== */
/*       皇家紫主题            */
/*   优雅、神秘、适合创意设计     */
/* =========================== */

.purple {
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--purple-50), var(--purple-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    --bkerp-surface: var(--purple-50);
    --bkerp-surface-variant: var(--purple-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    --bkerp-primary: var(--purple-600);
    --bkerp-secondary: var(--purple-500);
    --bkerp-accent: var(--orange-500);
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--purple-200);
    --bkerp-input-border-color-focus: var(--purple-600);
    --bkerp-input-shadow: var(--shadow-3);
    --bkerp-nav-bg: var(--purple-200);
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--purple-100));
    --bkerp-card-border-color: var(--purple-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--purple-100), var(--purple-200));
    --bkerp-card-shadow: var(--shadow-3);
    --bkerp-btn-primary-bg: var(--purple-600);
    --bkerp-btn-secondary-bg: var(--purple-400);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--purple-200);
    --bkerp-btn-disabled-text: var(--purple-500);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--purple-400), var(--purple-600));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    --bkerp-link-text-color: var(--purple-700);
    --bkerp-link-text-hover-color: var(--purple-900);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--purple-600);
    --bkerp-scrollbar-track-color: var(--purple-100);
    --bkerp-scrollbar-thumb-color: var(--purple-300);
    --bkerp-scrollbar-thumb-hover-color: var(--purple-400);
    --bkerp-heading-color: var(--purple-700);
    --bkerp-disabled-color: var(--purple-200);
    --bkerp-focus-outline: 2px solid var(--purple-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(142, 36, 170, 0.3);
    --bkerp-selection-bg: var(--purple-200);
    --bkerp-selection-text: var(--grey-800);
    --bkerp-skeleton-bg: var(--purple-100);
    --bkerp-skeleton-shimmer: var(--purple-200);
    --bkerp-placeholder-text: var(--grey-500);
    --bkerp-table-header-bg: var(--purple-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--purple-50);
    --bkerp-table-row-hover-bg: var(--purple-100);
    --bkerp-table-border-color: var(--purple-200);
    

    
    
   
}

/* =========================== */
/*       深靛蓝主题              */
/*   沉稳、专注、适合高效办公     */
/* =========================== */

.indigo {
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--indigo-50), var(--indigo-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    --bkerp-surface: var(--indigo-50);
    --bkerp-surface-variant: var(--indigo-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    --bkerp-primary: var(--indigo-600);
    --bkerp-secondary: var(--indigo-400);
    --bkerp-accent: var(--orange-500);
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--indigo-200);
    --bkerp-input-border-color-focus: var(--indigo-600);
    --bkerp-input-shadow: var(--shadow-3);
    --bkerp-nav-bg: var(--indigo-200);
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--indigo-100));
    --bkerp-card-border-color: var(--indigo-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--indigo-100), var(--indigo-200));
    --bkerp-card-shadow: var(--shadow-3);
    --bkerp-btn-primary-bg: var(--indigo-600);
    --bkerp-btn-secondary-bg: var(--indigo-400);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--indigo-200);
    --bkerp-btn-disabled-text: var(--indigo-500);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--indigo-400), var(--indigo-600));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    --bkerp-link-text-color: var(--indigo-700);
    --bkerp-link-text-hover-color: var(--indigo-900);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--indigo-600);
    --bkerp-scrollbar-track-color: var(--indigo-100);
    --bkerp-scrollbar-thumb-color: var(--indigo-300);
    --bkerp-scrollbar-thumb-hover-color: var(--indigo-400);
    --bkerp-heading-color: var(--indigo-700);
    --bkerp-disabled-color: var(--indigo-200);
    --bkerp-focus-outline: 2px solid var(--indigo-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(48, 63, 159, 0.3);
    --bkerp-selection-bg: var(--indigo-200);
    --bkerp-selection-text: var(--grey-800);
    --bkerp-skeleton-bg: var(--indigo-100);
    --bkerp-skeleton-shimmer: var(--indigo-200);
    --bkerp-placeholder-text: var(--grey-500);
    --bkerp-table-header-bg: var(--indigo-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--indigo-50);
    --bkerp-table-row-hover-bg: var(--indigo-100);
    --bkerp-table-border-color: var(--indigo-200);
    

    
    
   
}

/* =========================== */
/*       玫瑰粉主题            */
/*   温柔、活泼、适合日常使用     */
/* =========================== */

.pink {
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--pink-50), var(--pink-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    --bkerp-surface: var(--pink-50);
    --bkerp-surface-variant: var(--pink-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    --bkerp-primary: var(--pink-500);
    --bkerp-secondary: var(--pink-400);
    --bkerp-accent: var(--teal-500);
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--pink-200);
    --bkerp-input-border-color-focus: var(--pink-500);
    --bkerp-input-shadow: var(--shadow-3);
    --bkerp-nav-bg: var(--pink-200);
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--pink-100));
    --bkerp-card-border-color: var(--pink-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--pink-100), var(--pink-200));
    --bkerp-card-shadow: var(--shadow-3);
    --bkerp-btn-primary-bg: var(--pink-500);
    --bkerp-btn-secondary-bg: var(--pink-400);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-600);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--pink-200);
    --bkerp-btn-disabled-text: var(--pink-500);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--pink-300), var(--pink-500));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    --bkerp-link-text-color: var(--pink-600);
    --bkerp-link-text-hover-color: var(--pink-800);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--pink-500);
    --bkerp-scrollbar-track-color: var(--pink-100);
    --bkerp-scrollbar-thumb-color: var(--pink-300);
    --bkerp-scrollbar-thumb-hover-color: var(--pink-400);
    --bkerp-heading-color: var(--pink-600);
    --bkerp-disabled-color: var(--pink-200);
    --bkerp-focus-outline: 2px solid var(--pink-500);
    --bkerp-focus-shadow: 0 0 0 3px rgba(233, 30, 99, 0.25);
    --bkerp-selection-bg: var(--pink-200);
    --bkerp-selection-text: var(--grey-800);
    --bkerp-skeleton-bg: var(--pink-100);
    --bkerp-skeleton-shimmer: var(--pink-200);
    --bkerp-placeholder-text: var(--grey-500);
    --bkerp-table-header-bg: var(--pink-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--pink-50);
    --bkerp-table-row-hover-bg: var(--pink-100);
    --bkerp-table-border-color: var(--pink-200);
    

    
    
   
}

/* =========================== */
/*       碧波青主题              */
/*   科技感、清爽、适合数据展示   */
/* =========================== */

.cyan {
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--cyan-50), var(--cyan-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    --bkerp-surface: var(--cyan-50);
    --bkerp-surface-variant: var(--cyan-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    --bkerp-primary: var(--cyan-600);
    --bkerp-secondary: var(--cyan-400);
    --bkerp-accent: var(--orange-500);
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--cyan-200);
    --bkerp-input-border-color-focus: var(--cyan-600);
    --bkerp-input-shadow: var(--shadow-3);
    --bkerp-nav-bg: var(--cyan-200);
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--cyan-100));
    --bkerp-card-border-color: var(--cyan-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--cyan-100), var(--cyan-200));
    --bkerp-card-shadow: var(--shadow-3);
    --bkerp-btn-primary-bg: var(--cyan-600);
    --bkerp-btn-secondary-bg: var(--cyan-400);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--cyan-200);
    --bkerp-btn-disabled-text: var(--cyan-500);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--cyan-400), var(--cyan-600));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    --bkerp-link-text-color: var(--cyan-700);
    --bkerp-link-text-hover-color: var(--cyan-900);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--cyan-600);
    --bkerp-scrollbar-track-color: var(--cyan-100);
    --bkerp-scrollbar-thumb-color: var(--cyan-300);
    --bkerp-scrollbar-thumb-hover-color: var(--cyan-400);
    --bkerp-heading-color: var(--cyan-700);
    --bkerp-disabled-color: var(--cyan-200);
    --bkerp-focus-outline: 2px solid var(--cyan-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(0, 172, 193, 0.3);
    --bkerp-selection-bg: var(--cyan-200);
    --bkerp-selection-text: var(--grey-800);
    --bkerp-skeleton-bg: var(--cyan-100);
    --bkerp-skeleton-shimmer: var(--cyan-200);
    --bkerp-placeholder-text: var(--grey-500);
    --bkerp-table-header-bg: var(--cyan-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--cyan-50);
    --bkerp-table-row-hover-bg: var(--cyan-100);
    --bkerp-table-border-color: var(--cyan-200);
    

    
    
   
}

/* =========================== */
/*       森林绿主题            */
/*   自然、生机、适合健康类应用   */
/* =========================== */

.green {
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--green-50), var(--green-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    --bkerp-surface: var(--green-50);
    --bkerp-surface-variant: var(--green-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    --bkerp-primary: var(--green-600);
    --bkerp-secondary: var(--green-500);
    --bkerp-accent: var(--orange-500);
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--green-200);
    --bkerp-input-border-color-focus: var(--green-600);
    --bkerp-input-shadow: var(--shadow-3);
    --bkerp-nav-bg: var(--green-200);
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--green-100));
    --bkerp-card-border-color: var(--green-200);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--green-100), var(--green-200));
    --bkerp-card-shadow: var(--shadow-3);
    --bkerp-btn-primary-bg: var(--green-600);
    --bkerp-btn-secondary-bg: var(--green-500);
    --bkerp-btn-warning-bg: var(--orange-500);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--green-200);
    --bkerp-btn-disabled-text: var(--green-600);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--green-400), var(--green-600));
    --bkerp-menu-text-color: var(--white-50);
    --bkerp-menu-shadow: var(--shadow-3);
    --bkerp-link-text-color: var(--green-700);
    --bkerp-link-text-hover-color: var(--green-900);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--green-600);
    --bkerp-scrollbar-track-color: var(--green-100);
    --bkerp-scrollbar-thumb-color: var(--green-300);
    --bkerp-scrollbar-thumb-hover-color: var(--green-400);
    --bkerp-heading-color: var(--green-700);
    --bkerp-disabled-color: var(--green-200);
    --bkerp-focus-outline: 2px solid var(--green-600);
    --bkerp-focus-shadow: 0 0 0 3px rgba(67, 160, 71, 0.3);
    --bkerp-selection-bg: var(--green-200);
    --bkerp-selection-text: var(--grey-800);
    --bkerp-skeleton-bg: var(--green-100);
    --bkerp-skeleton-shimmer: var(--green-200);
    --bkerp-placeholder-text: var(--grey-500);
    --bkerp-table-header-bg: var(--green-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--green-50);
    --bkerp-table-row-hover-bg: var(--green-100);
    --bkerp-table-border-color: var(--green-200);
    

    
    
   
}

/* =========================== */
/*       暗夜紫主题            */
/*   神秘、沉浸、适合夜间使用     */
/* =========================== */

.darkpurple {
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--purple-700), var(--purple-900));
    --bkerp-text-color: var(--dark-text-primary);
    --bkerp-text-color-secondary: var(--dark-text-secondary);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    --bkerp-surface: var(--purple-900);
    --bkerp-surface-variant: var(--purple-800);
    --bkerp-on-surface: var(--dark-text-primary);
    --bkerp-on-surface-variant: var(--dark-text-secondary);
    --bkerp-primary: var(--purple-400);
    --bkerp-secondary: var(--purple-300);
    --bkerp-accent: var(--teal-300);
    --bkerp-input-bg: var(--purple-800);
    --bkerp-input-border-color: var(--purple-600);
    --bkerp-input-border-color-focus: var(--teal-400);
    --bkerp-input-shadow: var(--dark-shadow-1);
    --bkerp-nav-bg: var(--purple-900);
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--purple-800), var(--purple-700));
    --bkerp-card-border-color: var(--purple-600);
    --bkerp-card-text-color: var(--dark-text-secondary);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--purple-600), var(--purple-500));
    --bkerp-card-shadow: var(--dark-shadow-2);
    --bkerp-btn-primary-bg: var(--purple-500);
    --bkerp-btn-secondary-bg: var(--purple-400);
    --bkerp-btn-warning-bg: var(--orange-600);
    --bkerp-btn-danger-bg: var(--red-600);
    --bkerp-btn-text: var(--dark-text-primary);
    --bkerp-btn-disabled-bg: var(--purple-700);
    --bkerp-btn-disabled-text: var(--purple-500);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, white 20%);
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--purple-700), var(--purple-600));
    --bkerp-menu-text-color: var(--dark-text-primary);
    --bkerp-menu-shadow: var(--dark-shadow-2);
    --bkerp-link-text-color: var(--teal-300);
    --bkerp-link-text-hover-color: var(--pink-300);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--purple-400);
    --bkerp-scrollbar-track-color: var(--purple-900);
    --bkerp-scrollbar-thumb-color: var(--purple-600);
    --bkerp-scrollbar-thumb-hover-color: var(--purple-500);
    --bkerp-heading-color: var(--dark-text-secondary);
    --bkerp-disabled-color: var(--dark-text-disabled);
    --bkerp-focus-outline: 2px solid var(--teal-400);
    --bkerp-focus-shadow: 0 0 0 3px rgba(38, 166, 154, 0.3);
    --bkerp-selection-bg: var(--purple-600);
    --bkerp-selection-text: var(--dark-text-primary);
    --bkerp-skeleton-bg: var(--purple-800);
    --bkerp-skeleton-shimmer: var(--purple-700);
    --bkerp-placeholder-text: var(--dark-text-disabled);
    --bkerp-table-header-bg: var(--purple-800);
    --bkerp-table-row-even-bg: var(--purple-900);
    --bkerp-table-row-odd-bg: var(--purple-800);
    --bkerp-table-row-hover-bg: var(--purple-700);
    --bkerp-table-border-color: var(--purple-600);
    

    
    
   
}

/* =========================== */
/*       琥珀黄主题            */
/*   明亮、积极、适合提效场景     */
/* =========================== */

.amber {
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--yellow-50), var(--yellow-100));
    --bkerp-text-color: var(--grey-800);
    --bkerp-text-color-secondary: var(--grey-500);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    --bkerp-surface: var(--yellow-50);
    --bkerp-surface-variant: var(--yellow-100);
    --bkerp-on-surface: var(--grey-800);
    --bkerp-on-surface-variant: var(--grey-700);
    --bkerp-primary: var(--yellow-800);
    --bkerp-secondary: var(--yellow-700);
    --bkerp-accent: var(--blue-600);
    --bkerp-input-bg: var(--white-50);
    --bkerp-input-border-color: var(--yellow-300);
    --bkerp-input-border-color-focus: var(--yellow-700);
    --bkerp-input-shadow: var(--shadow-3);
    --bkerp-nav-bg: var(--yellow-200);
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--white-50), var(--yellow-100));
    --bkerp-card-border-color: var(--yellow-300);
    --bkerp-card-text-color: var(--grey-800);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--yellow-100), var(--yellow-200));
    --bkerp-card-shadow: var(--shadow-3);
    --bkerp-btn-primary-bg: var(--yellow-800);
    --bkerp-btn-secondary-bg: var(--yellow-700);
    --bkerp-btn-warning-bg: var(--orange-600);
    --bkerp-btn-danger-bg: var(--red-500);
    --bkerp-btn-text: var(--white-50);
    --bkerp-btn-disabled-bg: var(--yellow-200);
    --bkerp-btn-disabled-text: var(--yellow-600);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, black 20%);
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--yellow-500), var(--yellow-700));
    --bkerp-menu-text-color: var(--grey-900);
    --bkerp-menu-shadow: var(--shadow-3);
    --bkerp-link-text-color: var(--yellow-800);
    --bkerp-link-text-hover-color: var(--blue-700);
    --bkerp-link-text-hover-shadow: 0 0 2px var(--yellow-700);
    --bkerp-scrollbar-track-color: var(--yellow-100);
    --bkerp-scrollbar-thumb-color: var(--yellow-400);
    --bkerp-scrollbar-thumb-hover-color: var(--yellow-500);
    --bkerp-heading-color: var(--yellow-900);
    --bkerp-disabled-color: var(--yellow-200);
    --bkerp-focus-outline: 2px solid var(--yellow-700);
    --bkerp-focus-shadow: 0 0 0 3px rgba(249, 168, 37, 0.3);
    --bkerp-selection-bg: var(--yellow-200);
    --bkerp-selection-text: var(--grey-800);
    --bkerp-skeleton-bg: var(--yellow-100);
    --bkerp-skeleton-shimmer: var(--yellow-200);
    --bkerp-placeholder-text: var(--grey-500);
    --bkerp-table-header-bg: var(--yellow-100);
    --bkerp-table-row-even-bg: var(--white-50);
    --bkerp-table-row-odd-bg: var(--yellow-50);
    --bkerp-table-row-hover-bg: var(--yellow-100);
    --bkerp-table-border-color: var(--yellow-300);
    

    
    
   
}

/* =========================== */
/*       星空黑主题            */
/*   极致暗色、护眼、OLED友好    */
/* =========================== */

.dark {
    --bkerp-bg-gradient: linear-gradient(to bottom, var(--grey-900), var(--grey-950));
    --bkerp-text-color: var(--dark-text-primary);
    --bkerp-text-color-secondary: var(--dark-text-secondary);
    --bkerp-text-color-primary: var(--bkerp-text-color);
    --bkerp-dialog-text-color: var(--bkerp-text-color);
    --bkerp-surface: var(--grey-950);
    --bkerp-surface-variant: var(--grey-900);
    --bkerp-on-surface: var(--dark-text-primary);
    --bkerp-on-surface-variant: var(--dark-text-secondary);
    --bkerp-primary: var(--blue-400);
    --bkerp-secondary: var(--blue-300);
    --bkerp-accent: var(--teal-400);
    --bkerp-input-bg: var(--grey-900);
    --bkerp-input-border-color: var(--grey-700);
    --bkerp-input-border-color-focus: var(--blue-400);
    --bkerp-input-shadow: var(--dark-shadow-2);
    --bkerp-nav-bg: var(--grey-950);
    --bkerp-card-bg-gradient: linear-gradient(to bottom, var(--grey-900), var(--grey-800));
    --bkerp-card-border-color: var(--grey-700);
    --bkerp-card-text-color: var(--dark-text-secondary);
    --bkerp-card-hover-bg-gradient: linear-gradient(to bottom, var(--grey-800), var(--grey-700));
    --bkerp-card-shadow: var(--dark-shadow-2);
    --bkerp-btn-primary-bg: var(--blue-600);
    --bkerp-btn-secondary-bg: var(--grey-700);
    --bkerp-btn-warning-bg: var(--orange-600);
    --bkerp-btn-danger-bg: var(--red-700);
    --bkerp-btn-text: var(--dark-text-primary);
    --bkerp-btn-disabled-bg: var(--grey-800);
    --bkerp-btn-disabled-text: var(--grey-600);
    --bkerp-btn-disabled-opacity: 0.65;
    --bkerp-btn-primary-hover-bg: color-mix(in srgb, var(--bkerp-btn-primary-bg) 80%, white 20%);
    --bkerp-menu-bg-gradient: linear-gradient(to bottom, var(--grey-800), var(--grey-900));
    --bkerp-menu-text-color: var(--dark-text-primary);
    --bkerp-menu-shadow: var(--dark-shadow-3);
    --bkerp-link-text-color: var(--blue-400);
    --bkerp-link-text-hover-color: var(--teal-400);
    --bkerp-link-text-hover-shadow: 0 0 3px var(--blue-500);
    --bkerp-scrollbar-track-color: var(--grey-950);
    --bkerp-scrollbar-thumb-color: var(--grey-700);
    --bkerp-scrollbar-thumb-hover-color: var(--grey-600);
    --bkerp-heading-color: var(--dark-text-secondary);
    --bkerp-disabled-color: var(--dark-text-disabled);
    --bkerp-focus-outline: 2px solid var(--blue-400);
    --bkerp-focus-shadow: 0 0 0 3px rgba(66, 165, 245, 0.25);
    --bkerp-selection-bg: var(--grey-700);
    --bkerp-selection-text: var(--dark-text-primary);
    --bkerp-skeleton-bg: var(--grey-900);
    --bkerp-skeleton-shimmer: var(--grey-800);
    --bkerp-placeholder-text: var(--dark-text-disabled);
    --bkerp-table-header-bg: var(--grey-900);
    --bkerp-table-row-even-bg: var(--grey-950);
    --bkerp-table-row-odd-bg: var(--grey-900);
    --bkerp-table-row-hover-bg: var(--grey-800);
    --bkerp-table-border-color: var(--grey-700);
    

    
    
   
}