/*
 * ════════════════════════════════════════════════════════════════
 * OntoX Design Tokens — 全家族共享设计令牌（暗色主题）
 * ════════════════════════════════════════════════════════════════
 *
 * 五层体系：表面层级(Surface) + 文本色阶(Typography) + 功能色(Semantic) + 边框(Border) + 交互(Interaction)
 * html class="dark" 触发。
 * ════════════════════════════════════════════════════════════════
 */

html.dark {
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     一、表面层级（Surface Elevation）
     5 级灰度阶梯，海拔越高越亮
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --el-bg-color-page:          #0e0e0e;   /* S0 底层页面 */
  --el-bg-color:               #171717;   /* S1 卡片/内容区 */
  --el-bg-color-overlay:       #222222;   /* S2 浮层/弹窗 */
  --el-fill-color-blank:       #171717;   /* S1（EP blank 同 bg） */
  --el-fill-color-lighter:     #1c1c1c;   /* S1.5 列表行/交替色 */
  --el-fill-color-light:      #282828;   /* S2 表头/分组头 */
  --el-fill-color:             #333333;   /* S3 hover/激活态 */
  --el-fill-color-dark:       #3e3e3e;   /* S4 输入框/高亮容器 */
  --el-fill-color-darker:      #484848;   /* S5 选中/最高海拔 */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     二、文本色阶（Typography Scale）
     rgba 透明度层级，禁用纯白
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --el-text-color-primary:     rgba(255, 255, 255, 0.97);   /* L0 标题/关键数据 */
  --el-text-color-regular:     rgba(255, 255, 255, 0.90);   /* L1 正文 */
  --el-text-color-secondary:   rgba(255, 255, 255, 0.72);   /* L2 次要/表头 */
  --el-text-color-placeholder: rgba(255, 255, 255, 0.50);   /* L3 placeholder */
  --el-text-color-disabled:    rgba(255, 255, 255, 0.32);   /* L4 禁用 */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     三、边框体系（Border）
     低透明度白线 + 层级色差替代生硬边框
     （2026-08-25 用户两轮反馈暗色框线仍不够明显，再提一档：主框线 0.34）
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --el-border-color:           rgba(255, 255, 255, 0.34);
  --el-border-color-light:     rgba(255, 255, 255, 0.26);
  --el-border-color-lighter:   rgba(255, 255, 255, 0.20);
  --el-border-color-darker:    rgba(255, 255, 255, 0.44);
  --el-border-color-extra-light: rgba(255, 255, 255, 0.16);
  --el-table-border-color:             rgba(255, 255, 255, 0.26);
  --el-table-header-border-color:      rgba(255, 255, 255, 0.34);
  --el-table-row-hover-bg-color:      rgba(255, 255, 255, 0.04);
  --el-table-current-row-bg-color:    rgba(255, 255, 255, 0.06);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     四、功能色（Semantic Color）
     低饱和度 + 高透明度背景；主色60%透明度文字/边框
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --el-color-primary:          #4da6ff;
  --el-color-primary-light-3:  #3d8ad4;
  --el-color-primary-light-5:  rgba(77, 166, 255, 0.25);
  --el-color-primary-light-7:  rgba(77, 166, 255, 0.15);
  --el-color-primary-light-8:  rgba(77, 166, 255, 0.10);
  --el-color-primary-light-9:  rgba(77, 166, 255, 0.08);
  --el-color-primary-dark-2:   #80c2ff;

  --el-color-success:          #4caf7c;
  --el-color-success-light-9:  rgba(76, 175, 124, 0.15);

  --el-color-warning:          #d4944a;
  --el-color-warning-light-9:  rgba(212, 148, 74, 0.15);
  --el-color-warning-dark-2:   #e0ad6a;

  --el-color-danger:           #d46b6b;
  --el-color-danger-light-9:  rgba(212, 107, 107, 0.15);

  --el-color-error:            #d46b6b;
  --el-color-error-light-9:   rgba(212, 107, 107, 0.15);

  --el-color-info:             #9a8cc7;
  --el-color-info-light-9:     rgba(154, 140, 199, 0.15);

  /* ━━━ 文字语义色（tone 深档令牌，2026-09-26 立）━━━
   * 唯一合法的文字通道语义色。暗色段=本段语义色原值（暗底亮字，
   * 对 #141414 底 5.36~7.21 全 AA+，替换零视觉变化）；亮色/品牌段
   * =深档值（EP 亮色档作 color 对白底 1.9~3.1 全 FAIL 是可读性事故）。
   * 消费规则见 docs/standards/DESIGN.md §2/§7；机器强制=
   * tools/i18n/check_hardcoded_colors.py 第十维度。 */
  --tone-success-text: var(--el-color-success);
  --tone-warning-text: var(--el-color-warning);
  --tone-danger-text:  var(--el-color-danger);
  --tone-primary-text: var(--el-color-primary);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     五、交互反馈（Interaction）
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --el-transition-duration:       0.2s;
  --el-transition-duration-fast: 0.15s;
  --el-overlay-color-lighter:     rgba(0, 0, 0, 0.55);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     六、组件参数
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --el-border-radius-small: 4px;
  --el-border-radius-base:  4px;
  --el-font-size-extra-small: 12px;
  --el-font-size-small: 13px;
  --el-font-size-base: 14px;
  --el-font-size-large: 16px;
  --el-font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── 阴影 ── */
  --el-box-shadow:         0 2px 8px rgba(0, 0, 0, 0.5);
  --el-box-shadow-light:    0 4px 16px rgba(0, 0, 0, 0.4);
  --el-box-shadow-md:       0 6px 20px rgba(0, 0, 0, 0.55);
  --el-box-shadow-dark:     0 12px 32px rgba(0, 0, 0, 0.65);

  /* ══════════════════════════════════════════════════
     OntoX 语义别名（全部映射到 EP 变量）
     ══════════════════════════════════════════════════ */

  /* ── raw 层 ── */
  --ontox-raw-gray-50:   var(--el-fill-color-blank);
  --ontox-raw-gray-100:  var(--el-fill-color-lighter);
  --ontox-raw-gray-200:  var(--el-fill-color-light);
  --ontox-raw-gray-300:  var(--el-fill-color);
  --ontox-raw-gray-400:  var(--el-text-color-secondary);
  --ontox-raw-gray-500:  var(--el-text-color-regular);
  --ontox-raw-gray-600:  var(--el-border-color-light);
  --ontox-raw-gray-700:  var(--el-border-color);
  --ontox-raw-gray-800:  var(--el-bg-color);
  --ontox-raw-gray-900:  var(--el-bg-color-page);

  --ontox-raw-primary-500:  var(--el-color-primary);
  --ontox-raw-primary-600:  var(--el-color-primary-dark-2);
  --ontox-raw-warning-900:  var(--el-color-warning-dark-2);

  /* ── 文字 ── */
  --ontox-text-primary:     var(--el-text-color-primary);
  --ontox-text-regular:     var(--el-text-color-regular);
  --ontox-text-secondary:   var(--el-text-color-secondary);
  --ontox-text-placeholder: var(--el-text-color-placeholder);
  --ontox-text-disabled:    var(--el-text-color-disabled);
  --ontox-text-on-dark:     rgba(255, 255, 255, 0.95);

  /* ── 背景 ── */
  --ontox-bg-page:    var(--el-bg-color-page);
  --ontox-bg-card:    var(--el-bg-color);
  --ontox-bg-overlay: var(--el-bg-color-overlay);
  --ontox-bg-hover:   var(--el-fill-color);
  --ontox-bg-mask:    var(--el-overlay-color-lighter);
  --ontox-bg-disabled: var(--el-fill-color-darker);

  /* ── 边框 ── */
  --ontox-border:       var(--el-border-color);
  --ontox-border-light: var(--el-border-color-light);
  --ontox-border-dark: var(--el-border-color-darker);

  /* ── 品牌色 ── */
  --ontox-primary:           var(--el-color-primary);
  --ontox-primary-light:     var(--el-color-primary-light-3);
  --ontox-primary-lighter:   var(--el-color-primary-light-5);
  --ontox-primary-light-9:   var(--el-color-primary-light-9);
  --ontox-primary-dark:      var(--el-color-primary-dark-2);
  --ontox-primary-darker:    var(--el-color-primary-dark-2);
  --ontox-primary-hover:     var(--el-color-primary-dark-2);
  --ontox-primary-active:    var(--el-color-primary-dark-2);
  --ontox-primary-disabled:  var(--el-text-color-placeholder);
  --ontox-primary-bg:        var(--el-color-primary-light-9);

  /* ── 渐变 ── */
  --ontox-gradient-primary:        linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3));
  --ontox-gradient-primary-light:  linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary-light-5));
  --ontox-gradient-skeleton:       linear-gradient(90deg, var(--el-fill-color-lighter) 25%, var(--el-fill-color) 37%, var(--el-fill-color-lighter) 63%);

  /* ── 语义色 ── */
  --ontox-success:    var(--el-color-success);
  --ontox-warning:    var(--el-color-warning);
  --ontox-danger:     var(--el-color-danger);
  --ontox-error:      var(--el-color-error);
  --ontox-info:       var(--el-color-info);
  --ontox-success-bg: var(--el-color-success-light-9);
  --ontox-warning-bg: var(--el-color-warning-light-9);
  --ontox-danger-bg:  var(--el-color-danger-light-9);
  --ontox-info-bg:    var(--el-color-info-light-9);

  /* ── 填充 ── */
  --ontox-fill:        var(--el-fill-color);
  --ontox-fill-light: var(--el-fill-color-light);
  --ontox-fill-dark:   var(--el-fill-color-dark);
  --ontox-fill-blank: var(--el-fill-color-blank);

  /* ── 圆角 ── */
  --ontox-radius-xs: 4px;
  --ontox-radius-sm: var(--el-border-radius-small);
  --ontox-radius-md: var(--el-border-radius-base);
  --ontox-radius-lg: 12px;
  --ontox-radius-xl: 16px;
  --ontox-radius-2xl: 20px;

  /* 间距梯度（统一语义命名，旧数字别名保留兼容） */
  --ontox-space-1: var(--ontox-space-xs);    /* 4px */
  --ontox-space-2: var(--ontox-space-sm);    /* 8px */
  --ontox-space-3: var(--ontox-space-md);    /* 12px */
  --ontox-space-4: var(--ontox-space-lg);    /* 16px */
  --ontox-space-5: 20px;                      /* 无语义对应 */
  --ontox-space-6: var(--ontox-space-xl);    /* 24px */

  /* ── 字体 ── */
  --ontox-font-family:       var(--el-font-family);
  --ontox-font-mono:         'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --ontox-font-size-xs:      var(--el-font-size-extra-small);
  --ontox-font-size-sm:      var(--el-font-size-small);
  --ontox-font-size-base:    var(--el-font-size-base);
  --ontox-font-size-lg:      var(--el-font-size-large);
  --ontox-font-size-xl:      18px;   /* 小标题 */
  --ontox-font-size-2xl:     20px;   /* 标题 */
  --ontox-font-size-3xl:     24px;   /* 大标题 */
  --ontox-font-size-4xl:     28px;   /* 页面标题 */
  --ontox-font-size-5xl:     32px;   /* Hero 标题 */
  --ontox-font-weight-regular: 400;
  --ontox-font-weight-medium:  500;
  --ontox-font-weight-semibold: 600;
  --ontox-font-weight-bold:    700;

  /* ── 阴影 ── */
  --ontox-shadow-sm:             var(--el-box-shadow);
  --ontox-shadow-md:             var(--el-box-shadow-md);
  --ontox-shadow-lg:             var(--el-box-shadow-light);
  --ontox-shadow-primary:        0 4px 16px var(--el-color-primary-light-7);
  --ontox-shadow-primary-hover:  0 6px 24px var(--el-color-primary-light-5);
  --ontox-shadow-snackbar:       var(--el-box-shadow-dark);
  --ontox-shadow-drawer:         var(--el-box-shadow-dark);
  --ontox-shadow-sidebar:        var(--el-box-shadow);
  --ontox-shadow-top:            0 -2px 8px var(--el-box-shadow-light);
  --ontox-shadow-focus:          0 0 0 2px var(--el-color-primary-light-5);

  /* ── 过渡（定义在 :root，此处不再重复） ── */

  /* ── 间距（统一语义命名，去重别名） ── */
  --ontox-space-2xs:  2px;
  --ontox-space-xs:   4px;
  --ontox-space-sm:   8px;
  --ontox-space-md:  12px;
  --ontox-space-lg:  16px;
  --ontox-space-xl:  24px;
  --ontox-space-2xl: 32px;
  --ontox-space-3xl: 48px;

  /* ── 布局 ── */
  --ontox-header-height:      48px;
  --ontox-tagsview-height:    32px;
  --ontox-sidebar-collapsed:  64px;

  /* ── 代码高亮 ── */
  --ontox-code-bg:        var(--el-fill-color-darker);
  --ontox-code-text:      var(--el-text-color-regular);
  --ontox-code-comment:   var(--el-text-color-secondary);
  --ontox-code-keyword:   var(--el-color-primary);
  --ontox-code-string:    var(--el-color-success);
  --ontox-code-number:    var(--el-color-warning);

  /* ── 编辑器 ── */
  --ontox-editor-bg:            var(--el-bg-color);
  --ontox-editor-bg-secondary:  var(--el-fill-color-darker);
  --ontox-editor-bg-tertiary:   var(--el-fill-color);
  --ontox-editor-text:          var(--el-text-color-regular);
  --ontox-editor-cursor:        var(--el-color-primary);
  --ontox-editor-selection:     var(--el-color-primary-light-7);
  --ontox-editor-selection-alt: var(--el-color-primary-light-9);

  /* ── 五行色板（Loom Logo SVG 专用） ── */
  --ontox-wuxing-glow:        #fbbf24;
  --ontox-wuxing-edge:        #a16207;
  --ontox-wuxing-mu:          #16a34a;
  --ontox-wuxing-mu-light:    #bbf7d0;
  --ontox-wuxing-mu-stroke:   #4ade80;
  --ontox-wuxing-huo:         #dc2626;
  --ontox-wuxing-huo-light:   #fecaca;
  --ontox-wuxing-huo-stroke:  #f87171;
  --ontox-wuxing-tu:          #a16207;
  --ontox-wuxing-tu-light:    #fef9c3;
  --ontox-wuxing-tu-stroke:   #facc15;
  --ontox-wuxing-jin:         #64748b;
  --ontox-wuxing-jin-light:   #f8fafc;
  --ontox-wuxing-jin-stroke:  #cbd5ce;
  --ontox-wuxing-shui:        #0284c7;
  --ontox-wuxing-shui-light:  #bae6fd;
  --ontox-wuxing-shui-stroke: #38bdf8;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   六、菜单组件增强（Menu Enhancement）
   Element Plus 默认 el-menu-item / el-sub-menu__title 无边框
   补充分隔线 + hover 态 + 分组标题样式
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 菜单项之间用底部低透明度线分隔（2026-08-25 统一走边框变量，随全局档位联动） */
html.dark .el-menu--vertical .el-menu-item,
html.dark .el-menu--vertical .el-sub-menu__title {
  border-bottom: 1px solid var(--el-border-color-lighter);
}

/* 分组标题：加粗加强（2026-08-25 用户：分不清分组与菜单项——矮化+背景色块拉开层级差） */
html.dark .el-menu--vertical > .el-sub-menu > .el-sub-menu__title,
html.dark .el-menu--vertical .menu-group-title {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 32px;
  line-height: 32px;
  background-color: var(--el-fill-color-light);
  border-bottom: 2px solid var(--el-border-color);
}

/* 激活的子菜单标题高亮 */
html.dark .el-sub-menu.is-active > .el-sub-menu__title {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--el-border-color-light);
}

/* 菜单项 hover 整行高亮（覆盖 EP 默认） */
html.dark .el-menu--vertical .el-menu-item:hover,
html.dark .el-menu--vertical .el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  transition: background-color 0.15s ease;
}

/* 激活态菜单项 */
html.dark .el-menu--vertical .el-menu-item.is-active {
  color: var(--el-color-primary);
  background-color: rgba(77, 166, 255, 0.08);
  border-right: 3px solid var(--el-color-primary);
}

/* 内联子菜单（二级展开）分隔线 */
html.dark .el-menu--inline .el-menu-item {
  border-bottom: 1px solid var(--el-border-color-extra-light);
}

/* ════════════════════════════════════════════════════════════════
   七、卡片视觉增强（Card Visual Enhancement）
   暗色主题下卡片需要更明显的浮起效果 + hover 微交互
   ════════════════════════════════════════════════════════════════ */

/* EP card 默认 4px 硬编码，统一映射到 token */
html.dark .el-card {
  --el-card-border-radius: var(--el-border-radius-base);
  --el-card-border-color: var(--el-border-color-light);
  --el-card-bg-color: var(--el-bg-color-overlay);
  --el-card-padding: 20px;
}

/* 卡片 hover 阴影增强 + 微上浮 */
html.dark .el-card.is-hover-shadow:hover,
html.dark .el-card.is-always-shadow {
  box-shadow: var(--el-box-shadow-md);
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ── 全局 card 阴影统一 ── */
/* 暗色模式：shadow=never 的卡片也保留微弱边框层次感 */
html.dark .el-card.is-never-shadow {
  box-shadow: none;
  border-color: var(--el-border-color-light);
}
/* 亮色模式：统一默认为 hover 效果，避免 always shadow 过重 */
.el-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* 卡片标题栏底边加强 */
html.dark .el-card__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
}

/* 表格行 hover 增强 */
html.dark .el-table tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0.04) !important;
  transition: background-color 0.15s ease;
}

/* 全局表格斑马纹——统一视觉一致性，无需每个 el-table 加 stripe 属性 */
.el-table tbody tr:nth-child(even) > td.el-table__cell {
  background-color: var(--el-fill-color-light);
}
/* 暗色模式下偶数行——0.02/0.04/0.06 透明度实测仍被盲评判"无交替行"（缩放压缩后感知弱），提到 0.09 */
html.dark .el-table tbody tr:nth-child(even) > td.el-table__cell {
  background-color: rgba(255, 255, 255, 0.09);
}
/* hover 优先级高于斑马纹 */
html.dark .el-table tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

/* 按钮微调：primary 按钮加微弱光晕 */
html.dark .el-button--primary {
  box-shadow: 0 2px 8px rgba(77, 166, 255, 0.2);
}

html.dark .el-button--primary:hover {
  box-shadow: 0 4px 16px rgba(77, 166, 255, 0.3);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* 输入框 focus 态边框强化 */
html.dark .el-input__wrapper.is-focus,
html.dark .el-textarea__inner:focus {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset, 0 0 0 3px rgba(77, 166, 255, 0.12) !important;
}

/* Tag 圆角统一 */
html.dark .el-tag {
  border-radius: var(--el-border-radius-small);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   八、统计数字视觉增强（Stat Number Enhancement）
   仪表盘统计卡片中的数字需要醒目——大字号、粗体、高对比
   ════════════════════════════════════════════════════════════════ */

/* 统计数字大字——统一 font-size + font-weight */
html.dark .stat-value,
html.dark .stat-number,
html.dark .metric-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px;
}

/* 统计标签——小字 + 次要色 */
html.dark .stat-label,
html.dark .metric-label {
  font-size: 13px !important;
  color: var(--el-text-color-secondary) !important;
  font-weight: 500 !important;
  text-transform: none;
}

/* 卡片标题统一——16px + semibold */
html.dark .el-card__header {
  font-size: 15px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

/* 页面标题统一——20px + bold */
html.dark .page-title,
html.dark .app-header-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--el-text-color-primary);
}

/* ════════════════════════════════════════════════════════════════
   九、卡片间距统一（Card Spacing Standardization）
   ════════════════════════════════════════════════════════════════ */

/* el-row 中 el-col 间距统一 */
html.dark .el-row .el-col .el-card {
  margin-bottom: 16px;
  height: calc(100% - 16px);
}

/* 卡片内边距统一 */
html.dark .el-card__body {
  padding: 16px 20px;
}

/* 卡片 header 内边距统一 */
html.dark .el-card__header {
  padding: 12px 20px;
}

/* ── 九、Dialog 标准宽度档位 ── */
/* 3档：小(表单/确认) / 中(详情/编辑) / 大(数据/复杂表单) */
:root {
  --ontox-dialog-sm: 480px;
  --ontox-dialog-md: 600px;
  --ontox-dialog-lg: 800px;
}

/* ── 十三、亮色主题框线增强 ── */
/* 2026-08-25 用户反馈亮色框线也要更明显。EP 原生亮色框线（#dcdfe6/#e4e7ed/#ebeef5）在
   白底上对比不足，统一加深一档。html.dark 内的边框定义优先级更高，暗色不受影响。 */
html:not(.dark):not(.brand) {
  --el-border-color:             #c8ccd4;   /* 原 #dcdfe6 */
  --el-border-color-light:       #d0d4dc;   /* 原 #e4e7ed */
  --el-border-color-lighter:     #d8dce4;   /* 原 #ebeef5 */
  --el-border-color-extra-light: #e0e4ea;   /* 原 #f2f6fc */
  --el-border-color-darker:      #b8bdc7;   /* 原 #cdd0d6 */
  --el-table-border-color:             #d0d4dc;
  --el-table-header-border-color:      #c8ccd4;
  /* 文字语义色亮色态：深档值（与品牌段同族，白底 4.66~6.57 全 AA+；
   * EP 亮色原值作 color 对白底 1.9~3.1 全 FAIL） */
  --tone-success-text: #0b7a80;
  --tone-warning-text: #9c6300;
  --tone-danger-text:  #b71c1c;
  --tone-primary-text: #995800;
}

/* 亮色主题菜单分组分隔线（与暗色第六节同构，走统一边框变量） */
html:not(.dark):not(.brand) .el-menu--vertical .el-menu-item,
html:not(.dark):not(.brand) .el-menu--vertical .el-sub-menu__title {
  border-bottom: 1px solid var(--el-border-color-lighter);
}
html:not(.dark):not(.brand) .el-menu--vertical > .el-sub-menu > .el-sub-menu__title,
html:not(.dark):not(.brand) .el-menu--vertical .menu-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 32px;
  line-height: 32px;
  background-color: var(--el-fill-color-light);
  border-bottom: 2px solid var(--el-border-color);
}
html:not(.dark):not(.brand) .el-menu--inline .el-menu-item {
  border-bottom: 1px solid var(--el-border-color-extra-light);
}

/* ── 十、空状态文字对比度增强 ── */
html.dark .el-empty__description {
  color: var(--el-text-color-secondary);
  opacity: 0.85;
}
html.dark .el-table__empty-text {
  color: var(--el-text-color-secondary);
  opacity: 0.85;
}

/* ── 十一、键盘焦点可见性 ── */
/* 只对键盘 Tab 导航显示焦点环，鼠标点击不触发 */
:focus-visible {
  outline: 2px solid var(--el-color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* EP 组件用 box-shadow 焦点环替代 outline（更美观） */
html.dark .el-button:focus-visible,
html.dark .el-input__wrapper:focus-visible,
html.dark .el-select__wrapper:focus-visible,
html.dark .el-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--el-color-primary-light-5);
}

/* ── 十二、z-index 梯度 ── */
/* 对齐 EP 内置层级，确保全家族统一 */
:root {
  --ontox-z-normal:    0;
  --ontox-z-sticky:    100;
  --ontox-z-header:    1000;
  --ontox-z-dropdown:  2000;
  --ontox-z-drawer:    2100;
  --ontox-z-modal:     2200;
  --ontox-z-popover:   2400;
  --ontox-z-toast:     3000;
  --ontox-z-overlay:   9999;

  /* ── 十三、过渡动画 ── */
  --ontox-transition-fast:    0.15s ease;
  --ontox-transition-base:    0.2s ease;
  --ontox-transition-smooth:  0.3s ease;
  --ontox-transition-slow:    0.4s ease;
}

/* ── 十四、页面切换过渡 ── */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ── 十五、暗色滚动条 ── */
/* 暗色主题下统一滚动条颜色，避免白色刺眼 */
html.dark {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html.dark ::-webkit-scrollbar-track {
  background: transparent;
}
html.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.35);
}
html.dark ::-webkit-scrollbar-corner {
  background: transparent;
}
/* ════════════════════════════════════════════════════════════════
   十四、品牌亮色主题（html.brand）——家族第三主题
   ════════════════════════════════════════════════════════════════
   色板源自 aml_ng《业务方 UI 设计规范》V1.0.0（2026-09-21 上收，
   aml_ng 由私有 brand_theme.css 改为消费本主题——值原样平移零手抄）。
   opt-in：html 加 class="brand" 且不带 dark 生效；暗色/原生亮色前端
   不受影响。本主题生效时 html 不含 dark，第十三节 html:not(.dark)
   亮色框线增强段已加 :not(.brand) 排除，避免与本主题框线打架。
   ════════════════════════════════════════════════════════════════ */
html.brand {
  /* ━━━ 主色（品牌橙系）━━━ */
  --el-color-primary: #f68e06;
  --el-color-primary-light-3: #ff9f00;
  --el-color-primary-light-5: #f5bf78;
  --el-color-primary-light-7: #fed89b;
  --el-color-primary-light-8: #fef0e1;
  --el-color-primary-light-9: #fef6ec;
  --el-color-primary-dark-2: #e67e00;

  /* ━━━ 功能色 ━━━ */
  --el-color-success: #1ec1c7;
  --el-color-warning: #ff9f00;
  --el-color-danger: #ff5858;
  --el-color-error: #ff5858;
  --el-color-info: #999999;

  /* ━━━ 表面层级（亮色）━━━ */
  --el-bg-color-page: #f2f3f5;
  --el-bg-color: #ffffff;
  --el-bg-color-overlay: #ffffff;
  --el-fill-color-blank: #ffffff;
  --el-fill-color-lighter: #f5f5f5;
  --el-fill-color-light: #f2f3f5;
  --el-fill-color: #f0f0f0;
  --el-fill-color-dark: #e8e8e8;
  --el-fill-color-darker: #e0e0e0;

  /* ━━━ 文字色阶（三级,WCAG AA 实测: secondary 5.74 / placeholder 4.74 on #fff）━━━ */
  --el-text-color-primary: #333333;
  --el-text-color-regular: #333333;
  --el-text-color-secondary: #616161;
  --el-text-color-placeholder: #767676;
  --el-text-color-disabled: #b7b7b7;

  /* ━━━ 边框 ━━━ */
  --el-border-color: #d8d8d8;
  --el-border-color-light: #dcdcdc;
  --el-border-color-lighter: #e8e8e8;
  --el-border-color-extra-light: #f5f5f5;
  --el-border-color-dark: #cccccc;
  --el-border-color-darker: #999999;

  /* ━━━ 字体 ━━━ */
  --el-font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue',
    Arial, sans-serif;

  /* ━━━ 圆角（家族 4px 方角铁律保持）━━━ */
  --el-border-radius-base: 4px;
  --el-border-radius-small: 4px;
  --el-border-radius-round: 20px;

  /* ━━━ 品牌扩展令牌 ━━━ */
  --brand-orange: #f68e06;
  --brand-orange-highlight: #ff9f00;
  --brand-orange-active: #ffbd20;
  --brand-orange-pale: #f5bf78;
  --brand-orange-faint: #fef0e1;
  --brand-link: #3a8dff;
  --brand-chart-series: #f68e06, #feca53, #3a8dff, #1ec1c7, #165dff, #ff5858;
  /* 雷达第6系列色(EP五色+品牌深蓝补位),与 chart-series 第5位同源 */
  --brand-chart-navy: #165dff;

  /* ━━━ 阴影（品牌投影系）━━━
   * 卡片浮起感=边框定形+阴影定深双层:soft 平铺档(可感知的深度),
   * lifted hover 档(上浮时加强)。0.07 时代卡片与灰底糊平=零深度感 */
  --brand-shadow-soft: rgba(31, 35, 41, 0.08);  /* color-ok 阴影语义,黑系物理正确 */
  --brand-shadow-lifted: rgba(31, 35, 41, 0.12);  /* color-ok 阴影语义,黑系物理正确 */
  --brand-orange-hover: #fde8ce;  /* 行 hover——比 faint 深一档,白底上可感知 */
  --brand-shadow-glow: rgba(246, 142, 6, 0.18);
  --brand-shadow-glow-strong: rgba(246, 142, 6, 0.24);

  /* ━━━ WCAG 深档文字色（on 浅底/白底全部过 AA，实测值见 components.css 消费注释）━━━
   * 语义原色(#ff9f00/#ff5858/#1ec1c7)饱和度过高，直接作文字色对比度 1.9~3.1 全 FAIL。
   * 此处为各色系等色相加深档，供 tag 文字/超期日期/错误提示等文字场景消费 */
  --tone-warning-text: #9c6300;  /* on 浅琥珀底 4.66 / on 白 5.00 */
  --tone-danger-text:  #b71c1c;  /* on 浅红底 5.92 / on 白 6.57 */
  --tone-success-text: #0b7a80;  /* on 浅青底 4.73 / on 白 5.11 */
  --tone-primary-text: #995800;  /* on 浅橙底 5.23 */
  --tone-info-text:    #6b6b6b;  /* on 浅灰底 4.85 */

  /* 打印域专用:尽调报告纸色(打印媒体下 EP 暗色变量会打出黑底废纸,纸白是打印域语义而非 UI 配色) */
  --tone-print-paper:  #ffffff;
}