/* ========================================
   智评生图 - 主题系统
   职责：CSS 变量定义 + 暗色模式适配 + 全局重置 + 主题切换过渡
   规则：本文件只管「色值/尺寸/间距」等变量和暗色覆盖，
         不放任何业务组件结构样式（放在 app.css）
   
   动态加载：通过 layui.use('theme') 自动加载本 CSS
   ======================================== */

/* ========================================
   1. CSS 变量：亮色主题（默认）
   ======================================== */
:root {
  color-scheme: light;

  /* ---- 主色 ---- */
  --ep-primary: #4a6cf7;
  --ep-primary-rgb: 74, 108, 247;
  --ep-primary-light: rgba(74, 108, 247, 0.16);
  --ep-primary-light-3: #6b8af9;
  --ep-primary-light-5: #8da7fa;
  --ep-primary-light-7: #c5d4ff;
  --ep-primary-light-9: #e8edfe;
  --ep-primary-dark-2: #3d5ce0;

  /* ---- 语义色 ---- */
  --ep-success: #67C23A;
  --ep-success-light: #E1F3D8;
  --ep-success-dark: #529B2E;
  --ep-warning: #E6A23C;
  --ep-warning-light: #FAECD8;
  --ep-warning-dark: #B88230;
  --ep-danger: #F56C6C;
  --ep-danger-light: #FEF2f2;
  --ep-danger-dark: #C45656;
  --ep-info: #909399;
  --ep-info-light: #F4F4F5;

  /* ---- 文字色 ---- */
  --ep-text-primary: #303133;
  --ep-text-regular: #606266;
  --ep-text-secondary: #909399;
  --ep-text-placeholder: #C0C4CC;

  /* ---- 边框/分割线 ---- */
  --ep-border: #DCDFE6;
  --ep-border-light: #E4E7ED;
  --ep-border-lighter: #EBEEF5;
  --ep-border-extra-light: #F2F6FC;

  /* ---- 填充色 ---- */
  --ep-fill: #F0F2F5;
  --ep-fill-color: #F0F2F5;
  --ep-fill-light: #F5F7FA;
  --ep-fill-color-light: #F5F7FA;
  --ep-fill-lighter: #FAFAFA;
  --ep-fill-blank: #FFFFFF;

  /* ---- 背景色 ---- */
  --ep-bg-page: #F0F2F5;
  --ep-bg-overlay: #FFFFFF;
  --ep-bg-sidebar: #FFFFFF;
  --ep-bg-navbar: #FFFFFF;
  --ep-bg-card: #FFFFFF;
  --ep-bg-hover: #F5F7FA;
  --ep-bg-active: #ECF5FF;

  /* ---- 阴影 ---- */
  --ep-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.06);
  --ep-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.04);
  --ep-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
  --ep-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.05);

  /* ---- 圆角 ---- */
  --ep-radius-base: 8px;
  --ep-radius-small: 4px;
  --ep-radius-round: 20px;
  --ep-radius-circle: 50%;

  /* ---- 间距 ---- */
  --ep-spacing-xs: 4px;
  --ep-spacing-sm: 8px;
  --ep-spacing-md: 16px;
  --ep-spacing-lg: 24px;
  --ep-spacing-xl: 32px;

  /* ---- 侧边栏/导航 ---- */
  --ep-sidebar-width: 220px;
  --ep-sidebar-collapsed-width: 64px;
  --ep-navbar-height: 56px;

  /* ---- 字体 ---- */
  --ep-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ep-font-size-xs: 12px;
  --ep-font-size-sm: 13px;
  --ep-font-size-base: 14px;
  --ep-font-size-md: 16px;
  --ep-font-size-lg: 18px;
  --ep-font-size-xl: 20px;

  /* ---- 过渡 ---- */
  --ep-transition-duration: 0.3s;
  --ep-transition-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ========================================
   2. 主题色与 shadcn/ui 兼容变量
   ======================================== */
[data-theme-color="blue"] {
  --ep-primary: #2563eb;
  --ep-primary-rgb: 37, 99, 235;
  --ep-primary-light: rgba(37, 99, 235, 0.16);
  --ep-primary-light-3: #3b82f6;
  --ep-primary-light-5: #60a5fa;
  --ep-primary-light-7: #bfdbfe;
  --ep-primary-light-9: #eff6ff;
  --ep-primary-dark-2: #1d4ed8;
}

[data-theme-color="green"] {
  --ep-primary: #16a34a;
  --ep-primary-rgb: 22, 163, 74;
  --ep-primary-light: rgba(22, 163, 74, 0.16);
  --ep-primary-light-3: #22c55e;
  --ep-primary-light-5: #4ade80;
  --ep-primary-light-7: #bbf7d0;
  --ep-primary-light-9: #f0fdf4;
  --ep-primary-dark-2: #15803d;
}

[data-theme-color="orange"] {
  --ep-primary: #ea580c;
  --ep-primary-rgb: 234, 88, 12;
  --ep-primary-light: rgba(234, 88, 12, 0.16);
  --ep-primary-light-3: #f97316;
  --ep-primary-light-5: #fb923c;
  --ep-primary-light-7: #fed7aa;
  --ep-primary-light-9: #fff7ed;
  --ep-primary-dark-2: #c2410c;
}

[data-theme-color="rose"] {
  --ep-primary: #e11d48;
  --ep-primary-rgb: 225, 29, 72;
  --ep-primary-light: rgba(225, 29, 72, 0.16);
  --ep-primary-light-3: #f43f5e;
  --ep-primary-light-5: #fb7185;
  --ep-primary-light-7: #fecdd3;
  --ep-primary-light-9: #fff1f2;
  --ep-primary-dark-2: #be123c;
}

[data-theme-color="violet"] {
  --ep-primary: #7c3aed;
  --ep-primary-rgb: 124, 58, 237;
  --ep-primary-light: rgba(124, 58, 237, 0.16);
  --ep-primary-light-3: #8b5cf6;
  --ep-primary-light-5: #a78bfa;
  --ep-primary-light-7: #ddd6fe;
  --ep-primary-light-9: #f5f3ff;
  --ep-primary-dark-2: #6d28d9;
}

[data-theme-color="cyan"] {
  --ep-primary: #0891b2;
  --ep-primary-rgb: 8, 145, 178;
  --ep-primary-light: rgba(8, 145, 178, 0.16);
  --ep-primary-light-3: #06b6d4;
  --ep-primary-light-5: #22d3ee;
  --ep-primary-light-7: #a5f3fc;
  --ep-primary-light-9: #ecfeff;
  --ep-primary-dark-2: #0e7490;
}

[data-theme-color="slate"] {
  --ep-primary: #475569;
  --ep-primary-rgb: 71, 85, 105;
  --ep-primary-light: rgba(71, 85, 105, 0.16);
  --ep-primary-light-3: #64748b;
  --ep-primary-light-5: #94a3b8;
  --ep-primary-light-7: #cbd5e1;
  --ep-primary-light-9: #f1f5f9;
  --ep-primary-dark-2: #334155;
}

:root,
[data-theme-style="element"] {
  --background: var(--ep-bg-page);
  --foreground: var(--ep-text-primary);
  --card: var(--ep-bg-card);
  --card-foreground: var(--ep-text-primary);
  --popover: var(--ep-bg-overlay);
  --popover-foreground: var(--ep-text-primary);
  --primary: var(--ep-primary);
  --primary-foreground: #ffffff;
  --secondary: var(--ep-fill-light);
  --secondary-foreground: var(--ep-text-primary);
  --muted: var(--ep-fill-light);
  --muted-foreground: var(--ep-text-secondary);
  --accent: var(--ep-bg-hover);
  --accent-foreground: var(--ep-text-primary);
  --destructive: var(--ep-danger);
  --destructive-foreground: #ffffff;
  --border: var(--ep-border);
  --input: var(--ep-border);
  --ring: var(--ep-primary);
  --ring-rgb: var(--ep-primary-rgb);
  --radius: var(--ep-radius-base);
  --success: var(--ep-success);
  --warning: var(--ep-warning);
  --code-bg: #09090b;
  --code-header-bg: #18181b;
  --code-fg: #e4e4e7;
  --shadow-color: 15, 23, 42;
}

[data-theme-style="shadcn"] {
  --ep-bg-page: #f8fafc;
  --ep-bg-overlay: #ffffff;
  --ep-bg-sidebar: #ffffff;
  --ep-bg-navbar: #ffffff;
  --ep-bg-card: #ffffff;
  --ep-bg-hover: #f4f4f5;
  --ep-bg-active: var(--ep-primary-light-9);
  --ep-fill: #f4f4f5;
  --ep-fill-color: #f4f4f5;
  --ep-fill-light: #fafafa;
  --ep-fill-color-light: #fafafa;
  --ep-fill-lighter: #ffffff;
  --ep-fill-blank: #ffffff;
  --ep-border: #e4e4e7;
  --ep-border-light: #e4e4e7;
  --ep-border-lighter: #f4f4f5;
  --ep-border-extra-light: #fafafa;
  --ep-text-primary: #09090b;
  --ep-text-regular: #3f3f46;
  --ep-text-secondary: #71717a;
  --ep-text-placeholder: #a1a1aa;
  --ep-radius-base: 6px;
  --ep-radius-small: 4px;
  --ep-radius-round: 999px;
  --ep-shadow-base: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ep-shadow-light: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ep-shadow-hover: 0 12px 24px rgba(15, 23, 42, 0.08);
  --ep-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08);
  --background: #f8fafc;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: #09090b;
  --primary: var(--ep-primary);
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: var(--ep-primary);
  --ring-rgb: var(--ep-primary-rgb);
  --radius: 6px;
  --success: #16a34a;
  --warning: #d97706;
  --code-bg: #09090b;
  --code-header-bg: #18181b;
  --code-fg: #e4e4e7;
  --shadow-color: 15, 23, 42;
}

/* ========================================
   3. CSS 变量：暗色主题
   ======================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --ep-primary: #4a6cf7;
  --ep-primary-rgb: 74, 108, 247;
  --ep-primary-light: rgba(74, 108, 247, 0.18);
  --ep-primary-light-3: #5e80f8;
  --ep-primary-light-5: #7d95f9;
  --ep-primary-light-7: #a0b9fc;
  --ep-primary-light-9: #1a2744;
  --ep-primary-dark-2: #3d5ce0;

  --ep-success: #67C23A;
  --ep-success-light: #1A3318;
  --ep-success-dark: #85CE61;
  --ep-warning: #E6A23C;
  --ep-warning-light: #3A2E1A;
  --ep-warning-dark: #EEBD6D;
  --ep-danger: #F56C6C;
  --ep-danger-light: #3A1A1A;
  --ep-danger-dark: #F89898;
  --ep-info: #909399;
  --ep-info-light: #2B2B2D;

  --ep-text-primary: #E5EAF3;
  --ep-text-regular: #CFD3DC;
  --ep-text-secondary: #A3A6AD;
  --ep-text-placeholder: #6C6E72;

  --ep-border: #4C4D4F;
  --ep-border-light: #414243;
  --ep-border-lighter: #363637;
  --ep-border-extra-light: #2E2E2F;

  --ep-fill: #262727;
  --ep-fill-color: #262727;
  --ep-fill-light: #1D1D1D;
  --ep-fill-color-light: #1D1D1D;
  --ep-fill-lighter: #191919;
  --ep-fill-blank: #1D1D1D;

  --ep-bg-page: #141414;
  --ep-bg-overlay: #1D1D1D;
  --ep-bg-sidebar: #1A1A1A;
  --ep-bg-navbar: #1D1D1D;
  --ep-bg-card: #1D1D1D;
  --ep-bg-hover: #262727;
  --ep-bg-active: #1A2744;

  --ep-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.3);
  --ep-shadow-light: 0 1px 4px rgba(0, 0, 0, 0.2);
  --ep-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
  --ep-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"][data-theme-color="blue"] {
  --ep-primary: #60a5fa;
  --ep-primary-rgb: 96, 165, 250;
  --ep-primary-light: rgba(96, 165, 250, 0.2);
  --ep-primary-light-3: #93c5fd;
  --ep-primary-light-5: #60a5fa;
  --ep-primary-light-7: #1e3a8a;
  --ep-primary-light-9: #172554;
  --ep-primary-dark-2: #3b82f6;
}

[data-theme="dark"][data-theme-color="green"] {
  --ep-primary: #4ade80;
  --ep-primary-rgb: 74, 222, 128;
  --ep-primary-light: rgba(74, 222, 128, 0.2);
  --ep-primary-light-3: #86efac;
  --ep-primary-light-5: #4ade80;
  --ep-primary-light-7: #166534;
  --ep-primary-light-9: #052e16;
  --ep-primary-dark-2: #22c55e;
}

[data-theme="dark"][data-theme-color="orange"] {
  --ep-primary: #fb923c;
  --ep-primary-rgb: 251, 146, 60;
  --ep-primary-light: rgba(251, 146, 60, 0.2);
  --ep-primary-light-3: #fdba74;
  --ep-primary-light-5: #fb923c;
  --ep-primary-light-7: #9a3412;
  --ep-primary-light-9: #431407;
  --ep-primary-dark-2: #f97316;
}

[data-theme="dark"][data-theme-color="rose"] {
  --ep-primary: #fb7185;
  --ep-primary-rgb: 251, 113, 133;
  --ep-primary-light: rgba(251, 113, 133, 0.2);
  --ep-primary-light-3: #fda4af;
  --ep-primary-light-5: #fb7185;
  --ep-primary-light-7: #9f1239;
  --ep-primary-light-9: #4c0519;
  --ep-primary-dark-2: #f43f5e;
}

[data-theme="dark"][data-theme-color="violet"] {
  --ep-primary: #a78bfa;
  --ep-primary-rgb: 167, 139, 250;
  --ep-primary-light: rgba(167, 139, 250, 0.2);
  --ep-primary-light-3: #c4b5fd;
  --ep-primary-light-5: #a78bfa;
  --ep-primary-light-7: #5b21b6;
  --ep-primary-light-9: #2e1065;
  --ep-primary-dark-2: #8b5cf6;
}

[data-theme="dark"][data-theme-color="cyan"] {
  --ep-primary: #22d3ee;
  --ep-primary-rgb: 34, 211, 238;
  --ep-primary-light: rgba(34, 211, 238, 0.2);
  --ep-primary-light-3: #67e8f9;
  --ep-primary-light-5: #22d3ee;
  --ep-primary-light-7: #155e75;
  --ep-primary-light-9: #083344;
  --ep-primary-dark-2: #06b6d4;
}

[data-theme="dark"][data-theme-color="slate"] {
  --ep-primary: #94a3b8;
  --ep-primary-rgb: 148, 163, 184;
  --ep-primary-light: rgba(148, 163, 184, 0.2);
  --ep-primary-light-3: #cbd5e1;
  --ep-primary-light-5: #94a3b8;
  --ep-primary-light-7: #334155;
  --ep-primary-light-9: #0f172a;
  --ep-primary-dark-2: #64748b;
}

[data-theme="dark"][data-theme-style="element"] {
  --background: var(--ep-bg-page);
  --foreground: var(--ep-text-primary);
  --card: var(--ep-bg-card);
  --card-foreground: var(--ep-text-primary);
  --popover: var(--ep-bg-overlay);
  --popover-foreground: var(--ep-text-primary);
  --primary: var(--ep-primary);
  --primary-foreground: #0f172a;
  --secondary: var(--ep-fill-light);
  --secondary-foreground: var(--ep-text-primary);
  --muted: var(--ep-fill-light);
  --muted-foreground: var(--ep-text-secondary);
  --accent: var(--ep-bg-hover);
  --accent-foreground: var(--ep-text-primary);
  --destructive: var(--ep-danger);
  --destructive-foreground: #ffffff;
  --border: var(--ep-border);
  --input: var(--ep-border);
  --ring: var(--ep-primary);
  --ring-rgb: var(--ep-primary-rgb);
  --radius: var(--ep-radius-base);
  --success: var(--ep-success);
  --warning: var(--ep-warning);
  --code-bg: #020617;
  --code-header-bg: #09090b;
  --code-fg: #e4e4e7;
  --shadow-color: 0, 0, 0;
}

[data-theme="dark"][data-theme-style="shadcn"] {
  --ep-bg-page: #020617;
  --ep-bg-overlay: #09090b;
  --ep-bg-sidebar: #09090b;
  --ep-bg-navbar: #09090b;
  --ep-bg-card: #09090b;
  --ep-bg-hover: #18181b;
  --ep-bg-active: var(--ep-primary-light-9);
  --ep-fill: #18181b;
  --ep-fill-color: #18181b;
  --ep-fill-light: #18181b;
  --ep-fill-color-light: #18181b;
  --ep-fill-lighter: #09090b;
  --ep-fill-blank: #09090b;
  --ep-border: #27272a;
  --ep-border-light: #27272a;
  --ep-border-lighter: #18181b;
  --ep-border-extra-light: #18181b;
  --ep-text-primary: #f8fafc;
  --ep-text-regular: #e4e4e7;
  --ep-text-secondary: #a1a1aa;
  --ep-text-placeholder: #71717a;
  --ep-radius-base: 6px;
  --ep-radius-small: 4px;
  --ep-radius-round: 999px;
  --ep-shadow-base: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ep-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ep-shadow-hover: 0 16px 32px rgba(0, 0, 0, 0.42);
  --ep-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.42);
  --background: #020617;
  --foreground: #f8fafc;
  --card: #09090b;
  --card-foreground: #f8fafc;
  --popover: #09090b;
  --popover-foreground: #f8fafc;
  --primary: var(--ep-primary);
  --primary-foreground: #0f172a;
  --secondary: #18181b;
  --secondary-foreground: #f8fafc;
  --muted: #18181b;
  --muted-foreground: #a1a1aa;
  --accent: #27272a;
  --accent-foreground: #f8fafc;
  --destructive: #f87171;
  --destructive-foreground: #450a0a;
  --border: #27272a;
  --input: #3f3f46;
  --ring: var(--ep-primary);
  --ring-rgb: var(--ep-primary-rgb);
  --radius: 6px;
  --success: #4ade80;
  --warning: #fb923c;
  --code-bg: #020617;
  --code-header-bg: #09090b;
  --code-fg: #e4e4e7;
  --shadow-color: 0, 0, 0;
}

/* ========================================
   4. 全局重置与基础
   ======================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: var(--ep-font-family);
  font-size: var(--ep-font-size-base);
  color: var(--ep-text-primary);
  background: var(--ep-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--ep-transition-duration) var(--ep-transition-ease),
    color var(--ep-transition-duration) var(--ep-transition-ease);
}

a {
  color: var(--ep-primary);
  text-decoration: none;
}

a:hover {
  color: var(--ep-primary-light-3);
}

/* ========================================
   4. 主题切换 — 原生视图过渡 + 低成本淡出兜底
   ======================================== */
html.theme-no-transitions *,
html.theme-no-transitions *::before,
html.theme-no-transitions *::after,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

html.theme-fade::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background: var(--theme-fade-surface, var(--ep-bg-page));
  opacity: 1;
  transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

html.theme-fade.theme-fade-out::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-fade::before {
    transition: none !important;
  }
}

/* ========================================
   5. Layui 按钮 — Element Plus 风格（亮色主题）
   ======================================== */
.layui-btn {
  background: var(--ep-primary);
  color: #fff;
  border-radius: var(--ep-radius-small);
  transition: all 0.2s;
}

.layui-btn:hover {
  background: var(--ep-primary-light-3);
  color: #fff;
}

.layui-btn-primary {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-regular);
}

.layui-btn-primary:hover {
  border-color: var(--ep-primary);
  color: var(--ep-primary);
  background: var(--ep-fill-blank);
}

.layui-btn-normal {
  background: var(--ep-primary);
  color: #fff;
}

.layui-btn-normal:hover {
  background: var(--ep-primary-light-3);
}

.layui-btn-warm {
  background: var(--ep-warning);
  color: #fff;
}

.layui-btn-warm:hover {
  background: var(--ep-warning-dark);
}

.layui-btn-danger {
  background: var(--ep-fill-blank);
  color: var(--ep-danger);
  border: 1px dashed var(--ep-danger);
}

.layui-btn-danger:hover {
  background: var(--ep-danger-light);
  color: var(--ep-danger);
}

/* ========================================
   6. 暗色模式适配 — Layui 组件
   ======================================== */

/* ---- 表格 ---- */
[data-theme="dark"] .layui-table {
  background: var(--ep-bg-card);
  color: var(--ep-text-regular);
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-table td,
.layui-table th,
.layui-table-col-set,
.layui-table-fixed-r,
.layui-table-grid-down,
.layui-table-header,
.layui-table-mend,
.layui-table-page,
.layui-table-tips-main,
.layui-table-tool,
.layui-table-total,
.layui-table-view,
.layui-table[lay-skin=line],
.layui-table[lay-skin=row] {
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-table-hover,
.layui-table-click,
.layui-table[lay-even] tbody tr:nth-child(even) {
  background-color: var(--ep-bg-card);
}

.layui-table-checked.layui-table-click,
.layui-table-checked.layui-table-hover,
.layui-table[lay-even] tbody tr:nth-child(even).layui-table-checked {
  background-color: var(--ep-primary-light-7);
}

.layui-table-checked {
  background-color: var(--ep-primary-light-9);
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: var(--ep-primary);
}

[data-theme="dark"] .layui-table th {
  background: var(--ep-fill-light);
  color: var(--ep-text-primary);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-table td {
  color: var(--ep-text-regular);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-table tr:hover td {
  background: var(--ep-bg-hover);
}

[data-theme="dark"] .layui-table[lay-skin="line"] td,
[data-theme="dark"] .layui-table[lay-skin="line"] th {
  border-color: var(--ep-border-lighter);
}

/* ---- 表格工具栏 ---- */
[data-theme="dark"] .layui-table-tool {
  background: var(--ep-bg-card);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-table-tool .layui-btn {
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-table-page .layui-laypage button {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-regular);
}

/* ---- 表格分页 ---- */
[data-theme="dark"] .layui-table-page {
  background: var(--ep-bg-card);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-table-page>div {
  color: var(--ep-text-regular);
}

/* ---- 表格固定列 ---- */
[data-theme="dark"] .layui-table-fixed .layui-table-body {
  background: var(--ep-bg-card);
}

[data-theme="dark"] .layui-table-fixed-r .layui-table-body {
  background: var(--ep-bg-card);
}

/* ---- 表格头部 ---- */
[data-theme="dark"] .layui-table-header {
  background: var(--ep-fill-light);
}

[data-theme="dark"] .layui-table-header th {
  background: var(--ep-fill-light);
}

/* ---- 表格主体 ---- */
[data-theme="dark"] .layui-table-main {
  background: var(--ep-bg-card);
}

/* ---- 表格网格线 ---- */
[data-theme="dark"] .layui-table-grid-down {
  background: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-table-grid-side {
  background: var(--ep-border-lighter);
}

/* ---- 表格溢出 ---- */
[data-theme="dark"] .layui-table-cell .layui-table-cell-expand {
  color: var(--ep-text-secondary);
}

/* ---- 表格选中行 ---- */
[data-theme="dark"] .layui-table-click td {
  background: var(--ep-primary-light-9);
}

/* ---- 表格编辑 ---- */
[data-theme="dark"] .layui-table-edit {
  background: var(--ep-fill-blank);
  color: var(--ep-text-primary);
  border-color: var(--ep-border);
}

/* ---- 表格合计行 ---- */
[data-theme="dark"] .layui-table-total {
  background: var(--ep-fill-light);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-table-total td {
  color: var(--ep-text-primary);
}

/* ---- 表格排序图标 ---- */
[data-theme="dark"] .layui-table-sort .layui-edge {
  border-color: var(--ep-text-secondary) transparent transparent;
}

[data-theme="dark"] .layui-table-sort .layui-table-sort-asc .layui-edge {
  border-color: transparent transparent var(--ep-primary);
}

[data-theme="dark"] .layui-table-sort .layui-table-sort-desc .layui-edge {
  border-color: var(--ep-primary) transparent transparent;
}

/* ---- 表格复选框/单选 ---- */
[data-theme="dark"] .layui-table-cell .layui-form-checkbox[lay-skin="primary"] i {
  border-color: var(--ep-border);
  background: var(--ep-fill-blank);
}

.layui-form-checkbox[lay-skin=primary]:hover>i {
  border-color: var(--ep-primary);
}

.layui-form-checked[lay-skin=primary]>i {
  border-color: var(--ep-primary) !important;
  background: var(--ep-primary);
}

[data-theme="dark"] .layui-table-cell .layui-form-checkbox[lay-skin="primary"].layui-form-checked i {
  border-color: var(--ep-primary) !important;
  background: var(--ep-primary);
}

/* ---- 表格工具栏右侧默认按钮（筛选/导出/打印） ---- */
[data-theme="dark"] .layui-table-tool-self .layui-inline {
  color: var(--ep-text-secondary);
}

/* ---- 空数据区域 ---- */
[data-theme="dark"] .layui-none {
  color: var(--ep-text-secondary);
}

/* ---- 表单 ---- */
[data-theme="dark"] .layui-form-label {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-input,
[data-theme="dark"] .layui-textarea,
[data-theme="dark"] .layui-select {
  background: var(--ep-fill-blank) !important;
  border-color: var(--ep-border);
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-input:focus,
[data-theme="dark"] .layui-textarea:focus {
  border-color: var(--ep-primary);
  box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.15);
}

[data-theme="dark"] .layui-input::placeholder,
[data-theme="dark"] .layui-textarea::placeholder {
  color: var(--ep-text-placeholder);
}

/* ---- 下拉框 ---- */
[data-theme="dark"] .layui-form-select dl {
  background: var(--ep-bg-overlay);
  border-color: var(--ep-border);
  box-shadow: var(--ep-shadow-hover);
}

[data-theme="dark"] .layui-form-select dl dd {
  color: var(--ep-text-regular);
  background: transparent;
}

[data-theme="dark"] .layui-form-select dl dd:hover {
  background: var(--ep-bg-hover);
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-form-select .layui-select-title input {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-form-select .layui-select-title input:hover {
  border-color: var(--ep-text-placeholder);
}

[data-theme="dark"] .layui-form-select .layui-select-title input:focus {
  border-color: var(--ep-primary);
}

[data-theme="dark"] .layui-form-selectup dl {
  border-color: var(--ep-border);
}

/* ---- 分页 ---- */
[data-theme="dark"] .layui-laypage a,
[data-theme="dark"] .layui-laypage span {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-laypage .layui-laypage-curr em {
  background: var(--ep-primary);
}

/* ---- 按钮 ---- */
[data-theme="dark"] .layui-btn {
  background: var(--ep-primary);
  color: #fff;
}

[data-theme="dark"] .layui-btn:hover {
  background: var(--ep-primary-light-3);
}

[data-theme="dark"] .layui-btn-primary {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-btn-primary:hover {
  border-color: var(--ep-primary);
  color: var(--ep-primary);
  background: var(--ep-fill-blank);
}

[data-theme="dark"] .layui-btn-normal {
  background: var(--ep-primary);
  color: #fff;
}

[data-theme="dark"] .layui-btn-normal:hover {
  background: var(--ep-primary-light-3);
}

[data-theme="dark"] .layui-btn-warm {
  background: var(--ep-warning);
  color: #fff;
}

[data-theme="dark"] .layui-btn-warm:hover {
  background: var(--ep-warning-dark);
}

[data-theme="dark"] .layui-btn-danger {
  background: var(--ep-danger);
  color: #fff;
}

[data-theme="dark"] .layui-btn-danger:hover {
  background: var(--ep-danger-dark);
}

/* ---- 徽章 Badge ---- */
[data-theme="dark"] .layui-badge {
  background: var(--ep-danger);
  color: #fff;
}

[data-theme="dark"] .layui-badge-rim {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-bg-blue {
  background: var(--ep-primary-light-9);
  color: var(--ep-primary);
}

[data-theme="dark"] .layui-bg-green {
  background: var(--ep-success-light);
  color: var(--ep-success);
}

[data-theme="dark"] .layui-bg-orange {
  background: var(--ep-warning-light);
  color: var(--ep-warning);
}

[data-theme="dark"] .layui-bg-gray {
  background: var(--ep-fill-light);
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .layui-bg-red {
  background: var(--ep-danger-light);
  color: var(--ep-danger);
}

[data-theme="dark"] .layui-bg-cyan {
  background: var(--ep-info-light);
  color: var(--ep-info);
}

[data-theme="dark"] .layui-bg-black {
  background: var(--ep-fill-light);
  color: var(--ep-text-primary);
}

/* ---- 卡片 Card ---- */
[data-theme="dark"] .layui-card {
  background: var(--ep-bg-card);
  border-color: var(--ep-border-lighter);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .layui-card-header {
  border-color: var(--ep-border-lighter);
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-card-body {
  color: var(--ep-text-regular);
}

/* ---- 面包屑 ---- */
[data-theme="dark"] .layui-breadcrumb {
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .layui-breadcrumb a {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-breadcrumb a:hover {
  color: var(--ep-primary);
}

[data-theme="dark"] .layui-breadcrumb span[lay-separator] {
  color: var(--ep-text-placeholder);
}

/* ---- Tab 选项卡 ---- */
[data-theme="dark"] .layui-badge-rim,
.layui-border,
.layui-colla-content,
.layui-colla-item,
.layui-collapse,
.layui-elem-field,
.layui-form-pane .layui-form-item[pane],
.layui-form-pane .layui-form-label,
.layui-input,
.layui-input-split,
.layui-panel,
.layui-quote-nm,
.layui-select,
.layui-tab-bar,
.layui-tab-card,
.layui-tab-title,
.layui-tab-title .layui-this:after,
.layui-textarea {
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-tab-card {
  background: var(--ep-bg-card);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-tab-title {
  border-color: var(--ep-border-lighter);
  background: var(--ep-bg-card);
}

[data-theme="dark"] .layui-tab-title li {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-tab-title li.layui-this {
  color: var(--ep-primary);
  border-color: var(--ep-primary);
  background: var(--ep-bg-card);
}

[data-theme="dark"] .layui-tab .layui-tab-title:after {
  border-bottom-color: var(--ep-border);
}

[data-theme="dark"] .layui-tab-card>.layui-tab-title .layui-this:after {
  border-bottom-color: var(--ep-primary);
}

[data-theme="dark"] .layui-tab-content {
  color: var(--ep-text-regular);
}

.layui-tab-brief>.layui-tab-title .layui-this {
  color: var(--ep-primary);
}

.layui-tab-brief>.layui-tab-more li.layui-this:after,
.layui-tab-brief>.layui-tab-title .layui-this:after {
  border-bottom: 2px solid var(--ep-primary);
}

/* ---- 面板 Collapse ---- */
[data-theme="dark"] .layui-collapse {
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-colla-item {
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-colla-title {
  background: var(--ep-fill-light);
  color: var(--ep-text-primary);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-colla-content {
  color: var(--ep-text-regular);
  background: var(--ep-bg-card);
}

/* ---- 时间线 ---- */
[data-theme="dark"] .layui-timeline-title {
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-timeline-axis {
  background: var(--ep-primary);
  color: #fff;
}

/* ---- 进度条 ---- */
[data-theme="dark"] .layui-progress {
  background: var(--ep-fill-light);
}

[data-theme="dark"] .layui-progress-bar {
  background: var(--ep-primary);
}

/* ---- 块引用 ---- */
[data-theme="dark"] .layui-elem-quote {
  background: var(--ep-fill-light);
  border-color: var(--ep-primary);
  color: var(--ep-text-regular);
}

/* ---- 弹层 ---- */
[data-theme="dark"] .layui-layer {
  background: var(--ep-bg-overlay);
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-layer-title {
  background: var(--ep-bg-overlay);
  color: var(--ep-text-primary);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .layui-layer-content {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-layer-btn a {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layer-ext-theme .layui-layer-title {
  background: var(--ep-bg-overlay);
  color: var(--ep-text-primary);
  border-color: var(--ep-border-lighter);
}

/* ---- 原生 select ---- */
[data-theme="dark"] select {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-primary);
}

[data-theme="dark"] select option {
  background: var(--ep-bg-overlay);
  color: var(--ep-text-primary);
}

/* ========================================
   6. 暗色模式适配 — 业务组件
   ======================================== */

/* ---- 抽屉 ---- */
[data-theme="dark"] .ep-drawer {
  background: var(--ep-bg-overlay);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ep-drawer-header {
  border-bottom-color: var(--ep-border-lighter);
  background: var(--ep-bg-overlay);
}

[data-theme="dark"] .ep-drawer-header h3 {
  color: var(--ep-text-primary);
}

[data-theme="dark"] .ep-drawer-close {
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .ep-drawer-close:hover {
  background: var(--ep-fill-light);
  color: var(--ep-text-primary);
}

[data-theme="dark"] .ep-drawer-body {
  background: var(--ep-bg-overlay);
  color: var(--ep-text-regular);
}

[data-theme="dark"] .ep-drawer-body .gen-table-row:hover {
  background: var(--ep-bg-hover);
}

[data-theme="dark"] .ep-drawer-body .gen-table-row.selected,
[data-theme="dark"] .ep-drawer-body .gen-table-row.is-selected {
  background: var(--ep-primary-light-9) !important;
  border-left-color: var(--ep-primary);
}

[data-theme="dark"] .ep-drawer-body .detail-header {
  background: var(--ep-bg-card);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .ep-drawer-body .detail-header-title {
  color: var(--ep-text-primary);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .ep-drawer-body .detail-info-label {
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .ep-drawer-body .detail-info-value {
  color: var(--ep-text-primary);
}

[data-theme="dark"] .ep-drawer-body .detail-search-bar {
  background: var(--ep-bg-card);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .ep-drawer-body .gen-table-container {
  background: var(--ep-bg-card);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .ep-drawer-body .gen-table-header {
  background: var(--ep-fill-light);
  color: var(--ep-text-secondary);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .ep-drawer-body .gen-table-row {
  border-color: var(--ep-border-lighter);
  color: var(--ep-text-regular);
}

[data-theme="dark"] .ep-drawer-body .scene-item {
  background: var(--ep-fill-light);
}

[data-theme="dark"] .ep-drawer-body .scene-prompt {
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .ep-drawer-body .progress-mini {
  background: var(--ep-fill-light);
}

[data-theme="dark"] .ep-drawer-body .progress-mini-bar {
  background: var(--ep-primary);
}

[data-theme="dark"] .ep-drawer-body .gen-table-empty {
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .ep-drawer-body .gen-pagination {
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .ep-drawer-footer {
  background: var(--ep-bg-overlay);
  border-top-color: var(--ep-border-lighter);
}

[data-theme="dark"] .ep-drawer-section-title {
  color: var(--ep-text-primary);
  border-bottom-color: var(--ep-border-lighter);
}

[data-theme="dark"] .ep-drawer-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* ---- 配置卡片 ---- */
[data-theme="dark"] .config-card {
  background: var(--ep-bg-card);
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .config-card-header {
  border-color: var(--ep-border-lighter);
}

[data-theme="dark"] .config-card-header .title {
  color: var(--ep-text-primary);
}

[data-theme="dark"] .config-row .label {
  color: var(--ep-text-primary);
}

/* ---- 上传区域 ---- */
[data-theme="dark"] .upload-area {
  border-color: var(--ep-border);
}

[data-theme="dark"] .upload-area:hover {
  border-color: var(--ep-primary);
}

/* ---- 评语项 ---- */
[data-theme="dark"] .review-item {
  background: var(--ep-fill-light);
}

[data-theme="dark"] .review-item .review-text {
  background: var(--ep-bg-card);
  color: var(--ep-text-regular);
}

[data-theme="dark"] .review-item .image-prompt {
  background: var(--ep-bg-card);
  color: var(--ep-text-regular);
}

/* ---- 测试结果 ---- */
[data-theme="dark"] .test-result.success {
  background: var(--ep-success-light);
  color: var(--ep-success);
  border-color: var(--ep-success);
}

[data-theme="dark"] .test-result.error {
  background: var(--ep-danger-light);
  color: var(--ep-danger);
  border-color: var(--ep-danger);
}

/* 表单 */
[data-theme="dark"] .layui-input-affix .layui-icon {
  color: var(--ep-success);
}

/* 滑动条 */
[data-theme="dark"] .slider-item {
  background: #26272F;
}

[data-theme="dark"] input:-internal-autofill-selected {
  background-color: var(--ep-bg-card);
}

/* ========================================
   7. 暗色模式适配 — Layui 表单组件（checkbox / radio / switch / transfer / tree）
   ======================================== */

/* ---- checkbox ---- */
[data-theme="dark"] .layui-form-checkbox {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-form-checkbox span {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-form-checkbox:hover {
  border-color: var(--ep-primary);
}

[data-theme="dark"] .layui-form-checked,
[data-theme="dark"] .layui-form-checked:hover {
  background: var(--ep-primary);
  border-color: var(--ep-primary);
}

[data-theme="dark"] .layui-form-checked span,
[data-theme="dark"] .layui-form-checked:hover span {
  color: #fff;
}

.layui-form-checkbox[lay-skin=primary]>.layui-icon-indeterminate {
  border-color: var(--ep-primary);
}

.layui-form-checkbox[lay-skin=primary]>.layui-icon-indeterminate:before {
  background-color: var(--ep-primary);
}

[data-theme="dark"] .layui-form-checked i,
[data-theme="dark"] .layui-form-checked:hover i {
  border-color: var(--ep-primary);
  color: #fff;
}

/* ---- radio ---- */
.layui-form-radio {
  color: var(--ep-text-regular);
}

.layui-form-radio>i {
  color: var(--ep-border);
}

.layui-form-radio:hover>i,
.layui-form-radioed>i {
  color: var(--ep-primary);
}

.layui-form-radioed {
  color: var(--ep-primary);
}

.layui-form-radio:hover>*,
.layui-form-radioed,
.layui-form-radioed>i {
  color: var(--ep-primary);
}

/* ---- switch ---- */
[data-theme="dark"] .layui-form-switch {
  background: var(--ep-border);
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-form-switch em {
  color: var(--ep-text-placeholder);
}

[data-theme="dark"] .layui-form-onswitch {
  background: var(--ep-primary);
  border-color: var(--ep-primary);
}

[data-theme="dark"] .layui-form-onswitch em {
  color: #fff;
}

/* ---- transfer 穿梭框 ---- */
[data-theme="dark"] .layui-transfer-box,
[data-theme="dark"] .layui-transfer-header,
[data-theme="dark"] .layui-transfer-search {
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-transfer-box {
  background: var(--ep-bg-card);
}

[data-theme="dark"] .layui-transfer-header {
  color: var(--ep-text-primary);
  background: var(--ep-fill-light);
}

[data-theme="dark"] .layui-transfer-search .layui-input {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-transfer-search .layui-icon-search {
  color: var(--ep-text-placeholder);
}

[data-theme="dark"] .layui-transfer-data li {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-transfer-data li:hover {
  background: var(--ep-bg-hover);
}

[data-theme="dark"] .layui-transfer-data .layui-none {
  color: var(--ep-text-placeholder);
}

[data-theme="dark"] .layui-transfer-active .layui-btn {
  background: var(--ep-primary);
  border-color: var(--ep-primary);
}

[data-theme="dark"] .layui-transfer-active .layui-btn-disabled {
  background: var(--ep-fill);
  border-color: var(--ep-border);
  color: var(--ep-text-placeholder);
}

/* ---- tree 树形 ---- */
[data-theme="dark"] .layui-tree {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-tree-line .layui-tree-set::after {
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-tree-line .layui-tree-set::before {
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-tree-entry {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-tree-entry:hover {
  background: var(--ep-bg-hover);
}

[data-theme="dark"] .layui-tree-txt {
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-tree-entry:hover .layui-tree-txt {
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-tree-icon {
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .layui-tree-iconClick {
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .layui-tree-iconClick:hover {
  color: var(--ep-primary);
}

[data-theme="dark"] .layui-tree-spread {
  color: var(--ep-text-secondary);
}

[data-theme="dark"] .layui-tree-lineExtend {
  border-color: var(--ep-border);
}

[data-theme="dark"] .layui-tree-set.layui-tree-set-active>.layui-tree-entry {
  background: var(--ep-bg-active);
}

[data-theme="dark"] .layui-tree-set.layui-tree-set-active>.layui-tree-entry .layui-tree-txt {
  color: var(--ep-primary);
}

[data-theme="dark"] .layui-tree-btnGroup .layui-btn {
  background: var(--ep-fill-blank);
  border-color: var(--ep-border);
  color: var(--ep-text-regular);
}

[data-theme="dark"] .layui-tree-btnGroup .layui-btn:hover {
  border-color: var(--ep-primary);
  color: var(--ep-primary);
}

[data-theme="dark"] .layui-tree-editInput {
  background: var(--ep-fill-blank);
  border-color: var(--ep-primary);
  color: var(--ep-text-primary);
}

[data-theme="dark"] .layui-tree-emptyText {
  color: var(--ep-text-placeholder);
}