/* ============================================================================
   xz-layout.css —— Robotxz-UC 统一布局层  v1.0  (2026-10-27)
   ----------------------------------------------------------------------------
   定位
     一份「只叠加、不推翻」的布局/节奏层，叠在 xz-ui.css（组件）与
     robotxz-theme.css（令牌）之上，把 293 个模板的骨架、表格、表单、间距
     拉齐到同一套视觉规范。

   为什么单独一层
     xz-ui.css 是「组件库」，用 .xz-* 类，页面必须主动引用才生效
     （实际只有 55/293 个模板用了 xz-*，25 个引了 xz-ui.css）。
     本文件走另一条路：直接覆盖 layui / pear 的原生选择器，
     因此**不需要改任何一个页面的 HTML**，靠 robotxz-theme.css 顶部的
     @import 一处挂载，全站生效。

   挂载方式
     robotxz-theme.css 第 1 行：
       @import url("/static/custom/xz-layout.css?v=1");
     robotxz-theme.css 由 PageI18nMiddleware._inject_theme() 注入到每个页面，
     所以本文件跟着覆盖全站。@import 的位置决定了层叠顺序：本文件在前，
     robotxz-theme.css 在后 —— 因此这里所有和主题「抢」的声明都用
     `body` 前缀提高特异性（0,1,1 > 0,1,0），胜负不依赖加载顺序。

   借鉴声明（合规）
     布局范式（左侧窄导航 / 顶部状态条 / 卡片化内容区 / KPI 大数字 /
     两列表单 / 表格去边框 + 浅灰表头 / 8 的倍数间距）属于通用信息架构
     做法，参考了同类统一通信后台的成熟方式，属于功能性布局。
     本文件内的所有色值、圆角、字号、间距、命名、图标与文案，均取自
     Robotxz-UC 自有主题令牌（--xz-primary #1b64d9 等），没有复制任何
     第三方产品的品牌色、专有图标、字体文件或文案。

   目录
     01 布局令牌                08 表单
     02 页面骨架 .xz-page       09 按钮与图标按钮
     03 页头 .xz-page-head      10 提示条 / 空状态 / 徽标
     04 卡片网格 .xz-grid       11 间距节奏工具类
     05 KPI 卡片 .xz-kpi        12 响应式
     06 卡片 / 分区             13 深色模式
     07 表格                    14 打印
   ========================================================================== */

/* ------------------------------------------------------------------ 01 令牌 */
:root {
  /* 间距：严格 8 的倍数，全站只允许用这四档做区块节奏 */
  --xz-sp-1: 8px;
  --xz-sp-2: 16px;
  --xz-sp-3: 24px;
  --xz-sp-4: 32px;
  --xz-sp-5: 40px;

  /* 布局 */
  --xz-gap: 20px;          /* 卡片之间的均匀间距 */
  --xz-page-max: 1560px;   /* 内容区最大宽度，超宽屏不再拉成一条 */
  --xz-page-pad: var(--xz-sp-3);

  /* 表格 */
  --xz-row-h: 44px;        /* 行高：留白充足但不松散 */
  --xz-th-h: 42px;
  --xz-cell-pad: 12px 16px;
  --xz-hd-bg: #f7f9fc;     /* 表头浅灰底 */
  --xz-row-hover: #f3f7fd;
  --xz-row-alt: #fbfcfe;

  /* 容器 */
  --xz-card-r: var(--xz-r-lg, 8px);
  --xz-card-line: var(--xz-line, #e3e9f2);
  --xz-card-bg: #ffffff;
  --xz-card-hd-bg: #fbfcfe;

  --xz-shadow-1: 0 1px 2px rgba(16, 34, 64, .05), 0 4px 14px rgba(16, 34, 64, .05);
  --xz-shadow-2: 0 10px 30px rgba(16, 34, 64, .10);

  /* 状态色：饱和度刻意压低，只用于点/边/文字，不做大面积填充 */
  --xz-ok-ink: #0f8a5f;
  --xz-warn-ink: #b26a00;
  --xz-err-ink: #c4342c;
  --xz-ok-soft: #e8f7f0;
  --xz-warn-soft: #fdf3e3;
  --xz-err-soft: #fdeceb;
  --xz-info-soft: var(--xz-primary-soft, #e8f0fd);

  --xz-focus-ring: 0 0 0 3px rgba(27, 100, 217, .18);
}

/* --------------------------------------------------------------- 02 页面骨架 */
body .xz-page {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--xz-page-max);
  margin: 0 auto;
  padding: var(--xz-page-pad);
}

/* 嵌在已有留白容器里时用 flush，避免双重内边距 */
body .xz-page--flush { padding: 0; }
body .xz-page--tight { padding: var(--xz-sp-2); }

/* 内容区上下留白（表格/卡片底部不贴边） */
body .xz-page > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- 03 页头 */
body .xz-page-head,
body .xz-pagehead {
  display: flex;
  align-items: flex-start;
  gap: var(--xz-sp-2);
  flex-wrap: wrap;
  margin: 0 0 var(--xz-sp-3);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
}
body .xz-page-head__main,
body .xz-pagehead__main {
  flex: 1 1 320px;
  min-width: 0;
}
body .xz-page-head__title,
body .xz-pagehead h1,
body .xz-pagehead .xz-pagehead__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .2px;
  color: var(--xz-ink, #1c2b41);
}
body .xz-page-head__sub,
body .xz-pagehead__sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--xz-ink-2, #5f7291);
  max-width: 96ch;
}
body .xz-page-head__crumb {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--xz-ink-3, #93a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body .xz-page-head__actions,
body .xz-pagehead__actions {
  display: flex;
  align-items: center;
  gap: var(--xz-sp-1);
  flex-wrap: wrap;
  margin-left: auto;
}
/* 页头右侧的统计小胶囊（不再用大色块按钮堆在一行） */
body .xz-page-head__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--xz-ink-2, #5f7291);
  background: var(--xz-bg, #f3f6fb);
  border: 1px solid var(--xz-line, #e3e9f2);
  white-space: nowrap;
}
body .xz-page-head__stat b {
  font-weight: 600;
  color: var(--xz-ink, #1c2b41);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- 04 卡片网格 */
body .xz-grid {
  display: grid;
  gap: var(--xz-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  margin: 0 0 var(--xz-gap);
}
body .xz-grid > * { min-width: 0; }
body .xz-grid:last-child { margin-bottom: 0; }

/* 列宽（12 栅格） */
body .xz-col-3  { grid-column: span 3; }
body .xz-col-4  { grid-column: span 4; }
body .xz-col-5  { grid-column: span 5; }
body .xz-col-6  { grid-column: span 6; }
body .xz-col-7  { grid-column: span 7; }
body .xz-col-8  { grid-column: span 8; }
body .xz-col-9  { grid-column: span 9; }
body .xz-col-12 { grid-column: span 12; }

/* KPI 行：等分自适应，窄屏自动换行 */
body .xz-grid--kpi {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
body .xz-grid--split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
body .xz-grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .xz-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .xz-grid--quarters { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 纵向卡片堆叠，间距与网格一致 */
body .xz-stack { display: flex; flex-direction: column; gap: var(--xz-gap); }
body .xz-stack--tight { gap: var(--xz-sp-2); }

/* --------------------------------------------------------------- 05 KPI 卡片 */
body .xz-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 108px;
  padding: 18px 18px 16px;
  background: var(--xz-card-bg);
  border: 1px solid var(--xz-card-line);
  border-radius: var(--xz-card-r);
  box-shadow: var(--xz-shadow-1);
  box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
body .xz-kpi:hover {
  box-shadow: var(--xz-shadow-2);
  border-color: color-mix(in srgb, var(--xz-primary, #1b64d9) 26%, var(--xz-card-line));
}
/* 左侧 3px 强调条：用主色系，不用品牌方专有色 */
body .xz-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--xz-primary, #1b64d9);
  opacity: .85;
}
body .xz-kpi__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--xz-ink-2, #5f7291);
}
body .xz-kpi__value {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.6px;
  color: var(--xz-ink, #1c2b41);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
body .xz-kpi__value--sm { font-size: 22px; letter-spacing: -.2px; }
body .xz-kpi__unit {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--xz-ink-3, #93a3b8);
}
body .xz-kpi__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--xz-ink-3, #93a3b8);
}
/* 强调色变体：只改左侧条与数值色，保持整体克制 */
body .xz-kpi--ok::before     { background: var(--xz-ok, #10b981); }
body .xz-kpi--ok     .xz-kpi__value { color: var(--xz-ok-ink); }
body .xz-kpi--warn::before   { background: var(--xz-warn, #f59e0b); }
body .xz-kpi--warn   .xz-kpi__value { color: var(--xz-warn-ink); }
body .xz-kpi--err::before    { background: var(--xz-err, #dc2626); }
body .xz-kpi--err    .xz-kpi__value { color: var(--xz-err-ink); }
body .xz-kpi--teal::before   { background: var(--xz-teal, #00b8a9); }
body .xz-kpi--muted::before  { background: var(--xz-ink-3, #93a3b8); opacity: .55; }

/* --------------------------------------------------- 06 卡片 / 分区 / 表格容器 */
body .xz-card,
body .layui-card {
  background: var(--xz-card-bg);
  border: 1px solid var(--xz-card-line);
  border-radius: var(--xz-card-r);
  box-shadow: var(--xz-shadow-1);
  box-sizing: border-box;
  overflow: hidden;
}
body .xz-card { margin: 0 0 var(--xz-gap); }
body .xz-card:last-child { margin-bottom: 0; }

body .xz-card__hd,
body .layui-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--xz-line, #e3e9f2);
  background: var(--xz-card-hd-bg);
  font-size: 14px;
  font-weight: 600;
  color: var(--xz-ink, #1c2b41);
  line-height: 1.4;
}
body .xz-card__hd > .xz-card__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
body .xz-card__hint { font-size: 12px; font-weight: 400; color: var(--xz-ink-3, #93a3b8); }
body .xz-card__bd { padding: 18px; }
body .xz-card__bd--flush { padding: 0; }
body .xz-card__ft {
  padding: 12px 18px;
  border-top: 1px solid var(--xz-line, #e3e9f2);
  background: var(--xz-card-hd-bg);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 表单类卡片：内部控件自带留白时不要再套 18px */
body .xz-card--form .xz-card__bd { padding: 20px 22px 6px; }

/* 分区：比自己画 fieldset 轻，靠细分割线 + 小标题分组 */
body .xz-section { margin: 0 0 var(--xz-sp-3); }
body .xz-section:last-child { margin-bottom: 0; }
body .xz-section__hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--xz-line, #e3e9f2);
}
body .xz-section__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--xz-ink, #1c2b41);
  margin: 0;
}
body .xz-section__hint {
  font-size: 12px;
  color: var(--xz-ink-3, #93a3b8);
  line-height: 1.5;
}
body .xz-section__hd > .xz-section__aside { margin-left: auto; }

/* 表格容器：圆角 + 溢出处理，表格自己不再带边框 */
body .xz-table-wrap {
  background: var(--xz-card-bg);
  border: 1px solid var(--xz-card-line);
  border-radius: var(--xz-card-r);
  box-shadow: var(--xz-shadow-1);
  overflow: hidden;
  margin: 0 0 var(--xz-gap);
}
body .xz-table-wrap:last-child { margin-bottom: 0; }
body .xz-table-wrap__hd {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--xz-line, #e3e9f2);
  background: var(--xz-card-hd-bg);
}
body .xz-table-wrap__hd > .xz-table-wrap__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body .xz-table-wrap__bd { overflow-x: auto; }
body .xz-table-wrap__ft {
  display: flex;
  align-items: center;
  gap: var(--xz-sp-1);
  padding: 10px 16px;
  border-top: 1px solid var(--xz-line, #e3e9f2);
  background: var(--xz-card-hd-bg);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ 07 表格 */
/* ------------------------------------------------------------------------
   表格分两层，故意分开，避免"一刀切"把别的页面列宽挤坏：

   A 层  body .layui-table*  —— 全站 137 个带 <table> 的模板共用。
         只改「颜色 / 边框 / 行高 / hover / 垂直居中」，
         **绝不改 padding、绝不加 white-space:nowrap**。
         原因（实测回归）：某些页面用 table-layout:fixed + 百分比列宽，
         一旦把单元格 padding 从 layui 的 0 15px 提到 16px、或给 th 加
         nowrap，总宽超过 100%，最后的操作列会被裁掉。

   B 层  body .xz-table   —— 只作用于我改造过的页面（主动加类）。
         这一层才使用 12/16px 的节奏化 padding 与 nowrap 选项。
   ---------------------------------------------------------------------- */

/* ---------------- A 层：全站安全归一 ---------------- */
body .layui-table {
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--xz-ink, #1c2b41) !important;
}
body .layui-table thead tr { background: var(--xz-hd-bg) !important; }

body .layui-table th {
  background: var(--xz-hd-bg) !important;
  color: var(--xz-ink-2, #5f7291) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  border: 0 !important;
  border-bottom: 1px solid var(--xz-line, #e3e9f2) !important;
}

body .layui-table td {
  height: var(--xz-row-h) !important;
  vertical-align: middle !important;
  border: 0 !important;
  border-bottom: 1px solid var(--xz-line, #e3e9f2) !important;
  background: transparent;
  line-height: 1.5;
  color: var(--xz-ink, #1c2b41) !important;
}
body .layui-table tbody tr:last-child > td { border-bottom: 0 !important; }

/* 不用竖线分隔，用 hover 高亮代替 */
body .layui-table tbody tr:hover > td { background: var(--xz-row-hover) !important; }
body .layui-table tbody tr.layui-table-click > td { background: var(--xz-info-soft) !important; }
body .layui-table tbody tr.is-selected > td { background: var(--xz-info-soft) !important; }

/* 斑马纹（opt-in，默认不开） */
body .layui-table.xz-table--zebra tbody tr:nth-child(even) > td { background: var(--xz-row-alt); }
body .layui-table.xz-table--zebra tbody tr:nth-child(even):hover > td {
  background: var(--xz-row-hover) !important;
}
/* layui 自己带的 even 斑马纹是写死的 #f2f2f2，深色下会变成"白行淡字"。
   统一接管成我们的 --xz-row-alt，浅色/深色都跟令牌走。 */
body .layui-table[lay-even] tbody tr:nth-child(even) > td,
body .layui-table[lay-even] tr:nth-child(even) > td {
  background: var(--xz-row-alt) !important;
}
body .layui-table[lay-even] tbody tr:nth-child(even):hover > td,
body .layui-table[lay-even] tr:nth-child(even):hover > td {
  background: var(--xz-row-hover) !important;
}

/* layui 单元格：靠 line-height 撑开高度，不再固定 28px（会让两行文本被切） */
body .layui-table-cell {
  height: auto !important;
  line-height: 1.5 !important;
  vertical-align: middle;
}
body .layui-table-cell .layui-table-link { color: var(--xz-primary, #1b64d9); }

/* ---------------- B 层：改造页专用 .xz-table ---------------- */
body .xz-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  font-size: 13px;
  color: var(--xz-ink, #1c2b41);
}
body .xz-table thead tr { background: var(--xz-hd-bg); }
body .xz-table th {
  height: var(--xz-th-h);
  padding: 0 16px;
  background: var(--xz-hd-bg);
  color: var(--xz-ink-2, #5f7291);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--xz-line, #e3e9f2);
}
body .xz-table td {
  height: var(--xz-row-h);
  padding: 10px 16px;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid var(--xz-line, #e3e9f2);
  line-height: 1.5;
  font-size: 13px;
}
body .xz-table th:first-child, body .xz-table td:first-child { padding-left: 18px; }
body .xz-table th:last-child,  body .xz-table td:last-child  { padding-right: 18px; }
body .xz-table tbody tr:last-child > td { border-bottom: 0; }
body .xz-table tbody tr:hover > td { background: var(--xz-row-hover); }
body .xz-table--nowrap th, body .xz-table--nowrap td { white-space: nowrap; }
body .xz-table--fixed { table-layout: fixed; }
body .xz-table--zebra tbody tr:nth-child(even) > td { background: var(--xz-row-alt); }
body .xz-table--zebra tbody tr:nth-child(even):hover > td { background: var(--xz-row-hover); }

/* layui 用 div 包出来的表体（table-view） */
body .layui-table-view {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .layui-table-view .layui-table { border: 0 !important; }
body .layui-table-box {
  border: 0 !important;
  border-radius: 0 !important;
}
body .layui-table-header { border: 0 !important; }
body .layui-table-body { border: 0 !important; }
body .layui-table-page {
  border-top: 1px solid var(--xz-line, #e3e9f2) !important;
  background: var(--xz-card-hd-bg) !important;
  padding: 10px 16px !important;
}

/* 表格里的操作列：图标按钮横排，不堆文字 */
body .xz-table .xz-op,
body .layui-table .xz-op {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ 08 表单 */
/* 两列表单：label 左对齐 120，控件右对齐；900px 以下自动单列 */
body .xz-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  align-items: start;
}
body .xz-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body .xz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body .xz-field--full { grid-column: 1 / -1; }
body .xz-field__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--xz-ink-2, #5f7291);
  display: flex;
  align-items: center;
  gap: 6px;
}
body .xz-field__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--xz-ink-3, #93a3b8);
}
body .xz-field__err { font-size: 12px; line-height: 1.5; color: var(--xz-err-ink); }

/* 必填：小红点，不用星号 */
body .xz-field--req > .xz-field__label::after,
body .xz-label-req::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xz-err, #dc2626);
  vertical-align: 2px;
  flex: 0 0 auto;
}

/* layui 表单控件尺寸/圆角/焦点环 —— 只改外观，不动 label 宽度
   （很多页面用内联样式自定义了 label 宽度，硬改会错位） */
body .layui-input,
body .layui-textarea,
body .layui-select,
body .xz-input,
body .xz-select {
  border-radius: var(--xz-r, 6px) !important;
  border: 1px solid var(--xz-line, #e3e9f2) !important;
  background: var(--xz-card-bg) !important;
  color: var(--xz-ink, #1c2b41) !important;
  font-size: 13px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
  box-sizing: border-box;
}
body .layui-input,
body .layui-select,
body .xz-input,
body .xz-select { height: 34px !important; line-height: 1.45 !important; padding: 0 12px !important; }
body .layui-textarea { line-height: 1.6 !important; padding: 8px 12px !important; min-height: 76px; }

body .layui-input:hover,
body .layui-textarea:hover,
body .layui-select:hover { border-color: color-mix(in srgb, var(--xz-primary, #1b64d9) 34%, var(--xz-line)) !important; }

body .layui-input:focus,
body .layui-textarea:focus,
body .layui-select:focus,
body .xz-input:focus {
  border-color: var(--xz-primary, #1b64d9) !important;
  box-shadow: var(--xz-focus-ring) !important;
  outline: 0 !important;
}
body .layui-input::placeholder,
body .layui-textarea::placeholder { color: var(--xz-ink-3, #93a3b8) !important; }

/* 只读 / 禁用：灰底，不抢注意力 */
body .layui-input[readonly],
body .layui-input:disabled,
body .layui-select:disabled {
  background: var(--xz-bg, #f3f6fb) !important;
  color: var(--xz-ink-2, #5f7291) !important;
  cursor: default;
}

body .layui-form-label {
  font-size: 13px !important;
  color: var(--xz-ink-2, #5f7291) !important;
  font-weight: 500 !important;
}
body .layui-form-item { margin-bottom: 16px !important; }
body .layui-form-mid,
body .layui-word-aux {
  font-size: 12px !important;
  color: var(--xz-ink-3, #93a3b8) !important;
  line-height: 1.6 !important;
}
/* 表单里的说明/帮助文字统一成弱化样式，不再抢正文 */
body .xz-form .layui-word-aux,
body .xz-form-hint {
  font-size: 12px;
  color: var(--xz-ink-3, #93a3b8);
  line-height: 1.6;
}

/* 表单底部动作区：右对齐，主操作在前 */
body .xz-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 0 20px;
  margin-top: var(--xz-sp-2);
  border-top: 1px solid var(--xz-line, #e3e9f2);
}
body .xz-form-actions--end { justify-content: flex-end; }
body .xz-form-actions .xz-form-actions__hint {
  margin-right: auto;
  font-size: 12px;
  color: var(--xz-ink-3, #93a3b8);
}

/* ------------------------------------------------- 09 按钮 / 图标按钮 / 工具条 */
body .xz-btn,
body .layui-btn {
  border-radius: var(--xz-r, 6px) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 32px;
  line-height: 30px;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease !important;
}
body .xz-btn:hover,
body .layui-btn:hover { box-shadow: none !important; transform: none !important; }
body .xz-btn:focus-visible,
body .layui-btn:focus-visible,
body .xz-iconbtn:focus-visible {
  outline: 0 !important;
  box-shadow: var(--xz-focus-ring) !important;
}

/* 表格里最后一列（操作列）的按钮：把高饱和实心块换成描边幽灵按钮。
   只改颜色/边框，**不动文字和宽度**，所以带文字的按钮（测试发送/编辑/删除）
   仍然完整可读，只是不再整片刷成蓝/橙/红。 */
body .layui-table td .layui-btn,
body .xz-table td .layui-btn {
  background: var(--xz-card-bg) !important;
  border: 1px solid var(--xz-line, #e3e9f2) !important;
  color: var(--xz-ink-2, #5f7291) !important;
  box-shadow: none !important;
}
body .layui-table td .layui-btn:hover,
body .xz-table td .layui-btn:hover {
  border-color: color-mix(in srgb, var(--xz-primary, #1b64d9) 45%, var(--xz-line)) !important;
  color: var(--xz-primary, #1b64d9) !important;
  background: var(--xz-info-soft) !important;
}
/* 危险操作：只留红色文字 + 浅红描边，不铺满红底 */
body .layui-table td .layui-btn-danger,
body .xz-table td .layui-btn-danger {
  color: var(--xz-err-ink) !important;
  border-color: color-mix(in srgb, var(--xz-err, #dc2626) 34%, var(--xz-line)) !important;
  background: var(--xz-card-bg) !important;
}
body .layui-table td .layui-btn-danger:hover,
body .xz-table td .layui-btn-danger:hover {
  background: var(--xz-err-soft) !important;
  color: var(--xz-err-ink) !important;
}
body .layui-table td .layui-btn-warm,
body .xz-table td .layui-btn-warm {
  color: var(--xz-warn-ink) !important;
  border-color: color-mix(in srgb, var(--xz-warn, #f59e0b) 38%, var(--xz-line)) !important;
}
body .layui-table td .layui-btn-warm:hover,
body .xz-table td .layui-btn-warm:hover {
  background: var(--xz-warn-soft) !important;
  color: var(--xz-warn-ink) !important;
}
/* 主色按钮在操作列里也收一档饱和度 */
body .layui-table td .layui-btn-normal,
body .xz-table td .layui-btn-normal {
  background: var(--xz-primary, #1b64d9) !important;
  border-color: var(--xz-primary, #1b64d9) !important;
  color: #fff !important;
}

/* pear-btn：站内 175 个页面在用的一套按钮，单独立一层拉齐到设计系统。
   pear 原版是 38px 高、2px 圆角、四套高饱和实心色（#2D8CF0/#f56c6c/
   #f6ad55/#5FB878），并且用 !important 写死 —— 这里必须同样 !important 才盖得住。
   处理原则：主操作保持实心主色；危险/警告/成功改成浅底 + 彩字，
   把"一整排彩虹按钮"收成"一个主操作 + 若干低调次操作"。 */
body .pear-btn {
  height: 32px !important;
  line-height: 30px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--xz-r, 6px) !important;
  border: 1px solid var(--xz-line, #e3e9f2) !important;
  background-color: var(--xz-card-bg) !important;
  color: var(--xz-ink-2, #5f7291) !important;
  box-shadow: none !important;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
}
body .pear-btn:hover {
  opacity: 1 !important;
  filter: none !important;
  background-color: var(--xz-info-soft) !important;
  border-color: color-mix(in srgb, var(--xz-primary, #1b64d9) 45%, var(--xz-line)) !important;
  color: var(--xz-primary, #1b64d9) !important;
}
body .pear-btn i { font-size: 13px !important; }

body .pear-btn-primary {
  background-color: var(--xz-primary, #1b64d9) !important;
  border-color: var(--xz-primary, #1b64d9) !important;
  color: #fff !important;
}
body .pear-btn-primary:hover {
  background-color: var(--xz-primary-dark, #14509f) !important;
  border-color: var(--xz-primary-dark, #14509f) !important;
  color: #fff !important;
}
body .pear-btn-danger {
  background-color: var(--xz-err-soft) !important;
  border-color: color-mix(in srgb, var(--xz-err, #dc2626) 34%, var(--xz-line)) !important;
  color: var(--xz-err-ink) !important;
}
body .pear-btn-danger:hover {
  background-color: var(--xz-err-soft) !important;
  border-color: var(--xz-err, #dc2626) !important;
  color: var(--xz-err-ink) !important;
}
body .pear-btn-warming {
  background-color: var(--xz-warn-soft) !important;
  border-color: color-mix(in srgb, var(--xz-warn, #f59e0b) 38%, var(--xz-line)) !important;
  color: var(--xz-warn-ink) !important;
}
body .pear-btn-warming:hover {
  border-color: var(--xz-warn, #f59e0b) !important;
  color: var(--xz-warn-ink) !important;
}
body .pear-btn-success {
  background-color: var(--xz-ok-soft) !important;
  border-color: color-mix(in srgb, var(--xz-ok, #10b981) 38%, var(--xz-line)) !important;
  color: var(--xz-ok-ink) !important;
}
body .pear-btn-success:hover {
  border-color: var(--xz-ok, #10b981) !important;
  color: var(--xz-ok-ink) !important;
}
body .pear-btn-info {
  background-color: var(--xz-card-bg) !important;
  border-color: var(--xz-line, #e3e9f2) !important;
  color: var(--xz-ink-2, #5f7291) !important;
}
/* 小号 / 迷你号：表格行内与紧凑工具条 */
body .pear-btn-sm {
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 9px !important;
  font-size: 12.5px !important;
}
body .pear-btn-xs {
  height: 24px !important;
  line-height: 22px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
}

/* layui 表格自带的工具条（toolbar:'#toolbar' 渲染出来的那条）：
   让它和卡片头同一套底色与内边距，不再是一条突兀的浅色条 */
body .layui-table-tool {
  background: var(--xz-card-hd-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--xz-line, #e3e9f2) !important;
  padding: 10px 16px !important;
  min-height: 0 !important;
}
body .layui-table-tool-temp { padding: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body .layui-table-tool-temp button { margin: 0 !important; }
body .layui-table-tool-self { top: 10px !important; right: 16px !important; }
body .layui-table-tool .layui-inline[lay-event] {
  color: var(--xz-ink-2, #5f7291);
  border-color: var(--xz-line, #e3e9f2);
  border-radius: var(--xz-r, 6px);
}
body .layui-table-tool .layui-inline[lay-event]:hover {
  color: var(--xz-primary, #1b64d9);
  border-color: color-mix(in srgb, var(--xz-primary, #1b64d9) 45%, var(--xz-line));
}
/* 表格工具条里的按钮间距：8px 节奏 */
body .layui-table-tool-temp .pear-btn + .pear-btn { margin-left: 8px; }

/* pear-btn 版本的同一件事：表格行内操作收成"白底彩字"，只留图标颜色区分语义。
   不加这条时，一屏 10 行 × 3 个按钮 = 30 个彩色实心块，视觉噪音最大。 */
body .layui-table td .pear-btn,
body .xz-table td .pear-btn {
  background: var(--xz-card-bg) !important;
  border: 1px solid var(--xz-line, #e3e9f2) !important;
  color: var(--xz-ink-2, #5f7291) !important;
  box-shadow: none !important;
}
body .layui-table td .pear-btn-danger,
body .xz-table td .pear-btn-danger {
  color: var(--xz-err-ink) !important;
  border-color: color-mix(in srgb, var(--xz-err, #dc2626) 32%, var(--xz-line)) !important;
}
body .layui-table td .pear-btn-warming,
body .xz-table td .pear-btn-warming {
  color: var(--xz-warn-ink) !important;
  border-color: color-mix(in srgb, var(--xz-warn, #f59e0b) 34%, var(--xz-line)) !important;
}
body .layui-table td .pear-btn-primary,
body .xz-table td .pear-btn-primary {
  color: var(--xz-primary, #1b64d9) !important;
  border-color: color-mix(in srgb, var(--xz-primary, #1b64d9) 32%, var(--xz-line)) !important;
}
body .layui-table td .pear-btn-success,
body .xz-table td .pear-btn-success {
  color: var(--xz-ok-ink) !important;
  border-color: color-mix(in srgb, var(--xz-ok, #10b981) 32%, var(--xz-line)) !important;
}
body .layui-table td .pear-btn:hover,
body .xz-table td .pear-btn:hover { background: var(--xz-info-soft) !important; }
body .layui-table td .pear-btn-danger:hover { background: var(--xz-err-soft) !important; }
body .layui-table td .pear-btn-warming:hover { background: var(--xz-warn-soft) !important; }
body .layui-table td .pear-btn-success:hover { background: var(--xz-ok-soft) !important; }

/* 图标按钮：操作列用图标 + title 提示，不堆文字 */
body .xz-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--xz-line, #e3e9f2);
  border-radius: var(--xz-r, 6px);
  background: var(--xz-card-bg);
  color: var(--xz-ink-2, #5f7291);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
  vertical-align: middle;
}
body .xz-iconbtn:hover {
  color: var(--xz-primary, #1b64d9);
  border-color: color-mix(in srgb, var(--xz-primary, #1b64d9) 45%, var(--xz-line));
  background: var(--xz-info-soft);
}
body .xz-iconbtn--danger:hover {
  color: var(--xz-err-ink);
  border-color: color-mix(in srgb, var(--xz-err, #dc2626) 45%, var(--xz-line));
  background: var(--xz-err-soft);
}
body .xz-iconbtn--ok:hover {
  color: var(--xz-ok-ink);
  border-color: color-mix(in srgb, var(--xz-ok, #10b981) 45%, var(--xz-line));
  background: var(--xz-ok-soft);
}
body .xz-iconbtn[disabled],
body .xz-iconbtn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* 工具条：页面级操作集中在一条，不再到处铺色块按钮 */
body .xz-toolbar {
  display: flex;
  align-items: center;
  gap: var(--xz-sp-1);
  flex-wrap: wrap;
  padding: 0 0 var(--xz-sp-2);
}
body .xz-toolbar__spacer { flex: 1 1 auto; }
body .xz-toolbar__divider {
  width: 1px;
  height: 20px;
  background: var(--xz-line, #e3e9f2);
  margin: 0 4px;
}
body .xz-toolbar__label {
  font-size: 12px;
  color: var(--xz-ink-3, #93a3b8);
  margin-right: 2px;
}

/* ------------------------------------------------- 10 提示条 / 空状态 / 徽标 */
body .xz-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: var(--xz-r, 6px);
  border: 1px solid var(--xz-line, #e3e9f2);
  background: var(--xz-bg, #f3f6fb);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--xz-ink-2, #5f7291);
  margin: 0 0 var(--xz-sp-2);
}
body .xz-alert--info { background: var(--xz-info-soft); border-color: #cfe0fb; color: #14509f; }
body .xz-alert--ok   { background: var(--xz-ok-soft);   border-color: #bfe9d6; color: var(--xz-ok-ink); }
body .xz-alert--warn { background: var(--xz-warn-soft); border-color: #f6dfb8; color: var(--xz-warn-ink); }
body .xz-alert--err  { background: var(--xz-err-soft);  border-color: #f6cbc7; color: var(--xz-err-ink); }

body .xz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 44px 16px;
  text-align: center;
  color: var(--xz-ink-3, #93a3b8);
  font-size: 13px;
  line-height: 1.6;
}
body .xz-empty__title { font-size: 14px; font-weight: 600; color: var(--xz-ink-2, #5f7291); }

body .xz-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--xz-bg, #f3f6fb);
  border: 1px solid var(--xz-line, #e3e9f2);
  color: var(--xz-ink-2, #5f7291);
}
body .xz-badge--ok   { background: var(--xz-ok-soft);   border-color: #bfe9d6; color: var(--xz-ok-ink); }
body .xz-badge--warn { background: var(--xz-warn-soft); border-color: #f6dfb8; color: var(--xz-warn-ink); }
body .xz-badge--err  { background: var(--xz-err-soft);  border-color: #f6cbc7; color: var(--xz-err-ink); }
body .xz-badge--info { background: var(--xz-info-soft); border-color: #cfe0fb; color: #14509f; }
/* 状态点：替代整块高饱和色底 */
body .xz-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xz-ink-3, #93a3b8);
  flex: 0 0 auto;
}
body .xz-dot--ok   { background: var(--xz-ok, #10b981); }
body .xz-dot--warn { background: var(--xz-warn, #f59e0b); }
body .xz-dot--err  { background: var(--xz-err, #dc2626); }

/* 文字工具类 */
body .xz-muted { color: var(--xz-ink-3, #93a3b8); }
body .xz-soft  { color: var(--xz-ink-2, #5f7291); }
body .xz-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
body .xz-num   { font-variant-numeric: tabular-nums; }
body .xz-nowrap { white-space: nowrap; }
body .xz-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------- 11 间距节奏 */
body .xz-mt-0 { margin-top: 0 !important; }
body .xz-mt-1 { margin-top: var(--xz-sp-1) !important; }
body .xz-mt-2 { margin-top: var(--xz-sp-2) !important; }
body .xz-mt-3 { margin-top: var(--xz-sp-3) !important; }
body .xz-mb-0 { margin-bottom: 0 !important; }
body .xz-mb-1 { margin-bottom: var(--xz-sp-1) !important; }
body .xz-mb-2 { margin-bottom: var(--xz-sp-2) !important; }
body .xz-mb-3 { margin-bottom: var(--xz-sp-3) !important; }
body .xz-p-0  { padding: 0 !important; }
body .xz-p-2  { padding: var(--xz-sp-2) !important; }
body .xz-p-3  { padding: var(--xz-sp-3) !important; }
body .xz-row   { display: flex; align-items: center; gap: var(--xz-sp-1); flex-wrap: wrap; }
body .xz-row--between { justify-content: space-between; }
body .xz-row--end { justify-content: flex-end; }
body .xz-col   { display: flex; flex-direction: column; gap: var(--xz-sp-1); min-width: 0; }
body .xz-grow  { flex: 1 1 auto; min-width: 0; }
body .xz-hide  { display: none !important; }

/* --------------------------------------------------------------- 12 响应式 */
@media (max-width: 1280px) {
  :root { --xz-gap: 16px; }
  body .xz-grid--quarters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .xz-grid--thirds   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .xz-col-3, body .xz-col-4 { grid-column: span 6; }
  body .xz-col-5 { grid-column: span 6; }
}

@media (max-width: 1024px) {
  body .xz-page { padding: var(--xz-sp-2); }
  body .xz-grid--split { grid-template-columns: minmax(0, 1fr); }
  body .xz-col-7, body .xz-col-8, body .xz-col-9 { grid-column: span 12; }
  body .xz-kpi__value { font-size: 26px; }
}

@media (max-width: 900px) {
  /* 表单强制单列 */
  body .xz-form-grid,
  body .xz-form-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body .xz-grid--halves,
  body .xz-grid--thirds,
  body .xz-grid--quarters { grid-template-columns: minmax(0, 1fr); }
  body .xz-col-3, body .xz-col-4, body .xz-col-5,
  body .xz-col-6, body .xz-col-7, body .xz-col-8,
  body .xz-col-9 { grid-column: span 12; }
  body .xz-page-head { flex-direction: column; align-items: stretch; }
  /* 纵向 flex 下 flex-basis 会被当成高度，必须收回，否则页头下方空出一大块 */
  body .xz-page-head__main { flex: 0 1 auto; }
  body .xz-page-head__actions { margin-left: 0; }
  body .xz-page-head__title { font-size: 18px; }
}

@media (max-width: 640px) {
  body .xz-page { padding: 12px; }
  :root { --xz-gap: 12px; --xz-row-h: 40px; }
  body .xz-kpi { min-height: 92px; padding: 14px; }
  body .xz-kpi__value { font-size: 24px; }
  body .xz-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  body .xz-card__bd { padding: 14px; }
  body .xz-card__hd { padding: 12px 14px; }
  /* 表格工具条在窄屏会换行，layui 给的是固定高度，会被裁/叠在一起 */
  body .layui-table-tool { height: auto !important; min-height: 0 !important; }
  body .layui-table-tool-temp { float: none !important; display: flex; flex-wrap: wrap; gap: 8px; }
  body .layui-table-tool-temp .pear-btn { margin: 0 !important; }
  body .layui-table-tool-self { position: static !important; float: right; margin-top: 8px; }
  /* 手机宽度下表格横向滚动，不压缩单元格 */
  body .xz-table-wrap__bd { -webkit-overflow-scrolling: touch; }
  body .xz-table-wrap__bd > table { min-width: 640px; }
}

/* --------------------------------------------------------------- 13 深色模式 */
/* 默认浅色。显式开启：<html data-xz-theme="dark"> 或 .xz-dark
   跟随系统：<html data-xz-theme="auto">（此时才响应 prefers-color-scheme）
   默认不跟随系统，避免老页面里大量内联浅色被系统深色撕开口子。 */
html[data-xz-theme="dark"],
html.xz-dark {
  color-scheme: dark;

  --xz-bg: #0e1622;
  --xz-card: #17212e;
  --xz-ink: #e7eefa;
  --xz-ink-2: #a8b8cc;
  --xz-ink-3: #7086a0;
  --xz-line: #253244;
  --xz-primary: #4b8ef0;
  --xz-primary-dark: #6ba3f5;
  --xz-primary-soft: #1a2f4d;
  --xz-ok: #34d399;
  --xz-warn: #fbbf24;
  --xz-err: #f87171;
  --xz-teal: #2dd4bf;

  --xz-card-bg: #17212e;
  --xz-card-line: #253244;
  --xz-card-hd-bg: #1b2634;
  --xz-hd-bg: #1b2634;
  --xz-row-hover: #1e2b3b;
  --xz-row-alt: #19242f;

  --xz-ok-ink: #5fd8a8;
  --xz-warn-ink: #f3c264;
  --xz-err-ink: #fb9d94;
  --xz-ok-soft: #12302a;
  --xz-warn-soft: #33260f;
  --xz-err-soft: #341b1a;
  --xz-info-soft: #16283f;

  --xz-shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 14px rgba(0, 0, 0, .22);
  --xz-shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
  --xz-focus-ring: 0 0 0 3px rgba(75, 142, 240, .30);
}

@media (prefers-color-scheme: dark) {
  html[data-xz-theme="auto"] {
    color-scheme: dark;
    --xz-bg: #0e1622;
    --xz-card: #17212e;
    --xz-ink: #e7eefa;
    --xz-ink-2: #a8b8cc;
    --xz-ink-3: #7086a0;
    --xz-line: #253244;
    --xz-primary: #4b8ef0;
    --xz-primary-dark: #6ba3f5;
    --xz-primary-soft: #1a2f4d;
    --xz-ok: #34d399;
    --xz-warn: #fbbf24;
    --xz-err: #f87171;
    --xz-card-bg: #17212e;
    --xz-card-line: #253244;
    --xz-card-hd-bg: #1b2634;
    --xz-hd-bg: #1b2634;
    --xz-row-hover: #1e2b3b;
    --xz-row-alt: #19242f;
    --xz-ok-ink: #5fd8a8;
    --xz-warn-ink: #f3c264;
    --xz-err-ink: #fb9d94;
    --xz-ok-soft: #12302a;
    --xz-warn-soft: #33260f;
    --xz-err-soft: #341b1a;
    --xz-info-soft: #16283f;
    --xz-shadow-1: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 14px rgba(0, 0, 0, .22);
    --xz-shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
    --xz-focus-ring: 0 0 0 3px rgba(75, 142, 240, .30);
  }
}

/* 深色下的结构性元素（不改内联颜色的页面只能到这里，
   内联 style 需要页面自己换成 var(--xz-*) 才彻底） */
html[data-xz-theme="dark"] body,
html.xz-dark body,
html[data-xz-theme="auto"] body { background-color: var(--xz-bg); }

html[data-xz-theme="dark"] body .layui-input,
html[data-xz-theme="dark"] body .layui-textarea,
html[data-xz-theme="dark"] body .layui-select,
html.xz-dark body .layui-input,
html.xz-dark body .layui-textarea,
html.xz-dark body .layui-select {
  background: var(--xz-card-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-input[readonly],
html[data-xz-theme="dark"] body .layui-input:disabled {
  background: var(--xz-row-alt) !important;
}
html[data-xz-theme="dark"] body .layui-table-view,
html[data-xz-theme="dark"] body .layui-table-box,
html[data-xz-theme="dark"] body .layui-table-body { background: transparent !important; }
html[data-xz-theme="dark"] body .layui-table-page { background: var(--xz-card-hd-bg) !important; }
html[data-xz-theme="dark"] body .layui-layer,
html[data-xz-theme="dark"] body .layui-layer-content { background: var(--xz-card) !important; color: var(--xz-ink) !important; }
html[data-xz-theme="dark"] body .layui-layer-title {
  background: var(--xz-card-hd-bg) !important; color: var(--xz-ink) !important;
  border-bottom: 1px solid var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-select-tips,
html[data-xz-theme="dark"] body dl.layui-anim { background: var(--xz-card) !important; }
html[data-xz-theme="dark"] body .layui-form-select dl dd:hover { background: var(--xz-row-hover) !important; }

/* 分页器与页码下拉：深色下不要留白底 */
html[data-xz-theme="dark"] body .layui-laypage,
html[data-xz-theme="dark"] body .layui-laypage a,
html[data-xz-theme="dark"] body .layui-laypage span,
html[data-xz-theme="dark"] body .layui-laypage input,
html[data-xz-theme="dark"] body .layui-laypage select,
html[data-xz-theme="dark"] body .layui-laypage button,
html.xz-dark body .layui-laypage,
html.xz-dark body .layui-laypage a,
html.xz-dark body .layui-laypage input,
html.xz-dark body .layui-laypage select {
  background: var(--xz-card-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-laypage .layui-laypage-curr em,
html.xz-dark body .layui-laypage .layui-laypage-curr em {
  background: var(--xz-primary) !important;
  color: #fff !important;
}
html[data-xz-theme="dark"] body .layui-form-select dl,
html[data-xz-theme="dark"] body .layui-form-select .layui-anim,
html.xz-dark body .layui-form-select dl {
  background: var(--xz-card) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-form-select dl dd,
html.xz-dark body .layui-form-select dl dd { color: var(--xz-ink-2) !important; }

/* ------------------------------------------------- 13.1 内联浅色兜底 (2026-10-27)
   模板里有大量 style="background:#fff" / color:#333 之类的内联颜色，不可能
   一个个改。这里用属性选择器在深色下统一覆盖：
     * 白底 / 近白底 -> 卡片或表头色；
     * 白底里的白字 -> 主题正文色；
     * 深色文字 -> 主题正文/次要文字色；
     * 浅色状态底 -> 深色状态底，状态字同步提亮。
   所有声明都带 !important，才能压过元素上的内联 style。 */
html[data-xz-theme="dark"] {
  --xz-surface: #17212e;
  --xz-surface-2: #1b2634;
  /* index.html 外壳自己的老变量，一并切深 */
  --bg: #0e1622;
  --sb: rgba(15, 27, 45, .98);
  --s: #17212e;
  --s2: #1b2634;
  --b: rgba(255, 255, 255, .10);
  --p: #ffa733;
  --t: #e7eefa;
  --t2: #a8b8cc;
  --t3: #7086a0;
  --glow: 0 0 20px rgba(255, 167, 51, .12);
}

html[data-xz-theme="dark"] body {
  background-color: var(--xz-bg) !important;
  color: var(--xz-ink) !important;
}

/* dark-mode.js 扫描 computed style 后打的类：能盖住模板自己 <style> 里的白底，
   又不改元素 inline style；切回浅色时移除类即可完整复原。 */
html[data-xz-theme="dark"] body .xz-dm-bg {
  background-color: var(--xz-card-bg) !important;
}
html[data-xz-theme="dark"] body .xz-dm-bg-soft {
  background-color: var(--xz-card-hd-bg) !important;
}
html[data-xz-theme="dark"] body .xz-dm-bgimg {
  background-image: none !important;
}
html[data-xz-theme="dark"] body .xz-dm-bg-primary {
  background-color: #1b64d9 !important;
  color: #fff !important;
}
html[data-xz-theme="dark"] body .xz-dm-bg-ok {
  background-color: #047857 !important;
  color: #fff !important;
}
html[data-xz-theme="dark"] body .xz-dm-bg-warn {
  background-color: #b45309 !important;
  color: #fff !important;
}
html[data-xz-theme="dark"] body .xz-dm-bg-err {
  background-color: #b91c1c !important;
  color: #fff !important;
}
html[data-xz-theme="dark"] body .xz-dm-ink { color: var(--xz-ink) !important; }
html[data-xz-theme="dark"] body .xz-dm-ink2 { color: var(--xz-ink-2) !important; }
html[data-xz-theme="dark"] body .xz-dm-primary { color: var(--xz-primary-dark) !important; }
html[data-xz-theme="dark"] body .xz-dm-ok { color: var(--xz-ok-ink) !important; }
html[data-xz-theme="dark"] body .xz-dm-warn { color: var(--xz-warn-ink) !important; }
html[data-xz-theme="dark"] body .xz-dm-err { color: var(--xz-err-ink) !important; }

/* ---- 白底 / 近白底 ---- */
html[data-xz-theme="dark"] body :is(
  [style*="background:#fff" i],
  [style*="background: #fff" i],
  [style*="background-color:#fff" i],
  [style*="background-color: #fff" i],
  [style*="background:white" i],
  [style*="background: white" i],
  [style*="background-color:white" i],
  [style*="background-color: white" i],
  [style*="background:rgb(255, 255, 255)" i],
  [style*="background: rgb(255, 255, 255)" i],
  [style*="background-color:rgb(255, 255, 255)" i],
  [style*="background-color: rgb(255, 255, 255)" i]
) {
  background: var(--xz-card-bg) !important;
  background-color: var(--xz-card-bg) !important;
  color: var(--xz-ink) !important;
}

/* 常见浅灰 / 浅蓝面板 -> 深色面板 */
html[data-xz-theme="dark"] body :is(
  [style*="background:#f8f9fa" i], [style*="background: #f8f9fa" i],
  [style*="background:#f8fafd" i], [style*="background: #f8fafd" i],
  [style*="background:#f8fafc" i], [style*="background: #f8fafc" i],
  [style*="background:#f9fafb" i], [style*="background: #f9fafb" i],
  [style*="background:#fafafa" i], [style*="background: #fafafa" i],
  [style*="background:#f5f5f5" i], [style*="background: #f5f5f5" i],
  [style*="background:#f5f7fa" i], [style*="background: #f5f7fa" i],
  [style*="background:#f7f9fc" i], [style*="background: #f7f9fc" i],
  [style*="background:#f7fafc" i], [style*="background: #f7fafc" i],
  [style*="background:#f0f4fa" i], [style*="background: #f0f4fa" i],
  [style*="background:#f0f2f5" i], [style*="background: #f0f2f5" i],
  [style*="background:#f2f2f2" i], [style*="background: #f2f2f2" i],
  [style*="background:#eef2f8" i], [style*="background: #eef2f8" i]
) {
  background: var(--xz-card-hd-bg) !important;
  background-color: var(--xz-card-hd-bg) !important;
  color: var(--xz-ink) !important;
}

/* 浅色状态底 -> 深色状态底 */
html[data-xz-theme="dark"] body :is(
  [style*="background:#fdecec" i], [style*="background: #fdecec" i],
  [style*="background:#fdf2f2" i], [style*="background: #fdf2f2" i],
  [style*="background:#fef2f2" i], [style*="background: #fef2f2" i],
  [style*="background:#fee2e2" i], [style*="background: #fee2e2" i]
) { background: var(--xz-err-soft) !important; background-color: var(--xz-err-soft) !important; }

html[data-xz-theme="dark"] body :is(
  [style*="background:#e8f8ef" i], [style*="background: #e8f8ef" i],
  [style*="background:#ecfdf5" i], [style*="background: #ecfdf5" i],
  [style*="background:#f0fdf4" i], [style*="background: #f0fdf4" i]
) { background: var(--xz-ok-soft) !important; background-color: var(--xz-ok-soft) !important; }

html[data-xz-theme="dark"] body :is(
  [style*="background:#fff7e6" i], [style*="background: #fff7e6" i],
  [style*="background:#fdf5e3" i], [style*="background: #fdf5e3" i],
  [style*="background:#fff3e0" i], [style*="background: #fff3e0" i],
  [style*="background:#fef3c7" i], [style*="background: #fef3c7" i]
) { background: var(--xz-warn-soft) !important; background-color: var(--xz-warn-soft) !important; }

html[data-xz-theme="dark"] body :is(
  [style*="background:#eef4fe" i], [style*="background: #eef4fe" i],
  [style*="background:#eef4ff" i], [style*="background: #eef4ff" i],
  [style*="background:#e8f0fd" i], [style*="background: #e8f0fd" i],
  [style*="background:#eff6ff" i], [style*="background: #eff6ff" i]
) { background: var(--xz-info-soft) !important; background-color: var(--xz-info-soft) !important; }

/* 白底容器里的白字：父元素已经变深，再把子元素的白字拉回正文色 */
html[data-xz-theme="dark"] body :is(
  [style*="background:#fff" i], [style*="background: #fff" i],
  [style*="background-color:#fff" i], [style*="background-color: #fff" i],
  [style*="background:white" i], [style*="background: white" i]
) :is(
  [style*="color:#fff" i], [style*="color: #fff" i],
  [style*="color:white" i], [style*="color: white" i],
  [style*="color:#ffffff" i], [style*="color: #ffffff" i]
) { color: var(--xz-ink) !important; }

/* ---- 深色内联文字提亮 ---- */
html[data-xz-theme="dark"] body :is(
  [style*="color:#000" i], [style*="color: #000" i],
  [style*="color:#111" i], [style*="color: #111" i],
  [style*="color:#222" i], [style*="color: #222" i],
  [style*="color:#333" i], [style*="color: #333" i],
  [style*="color:#1a202c" i], [style*="color: #1a202c" i],
  [style*="color:#1e293b" i], [style*="color: #1e293b" i]
) { color: var(--xz-ink) !important; }

html[data-xz-theme="dark"] body :is(
  [style*="color:#444" i], [style*="color: #444" i],
  [style*="color:#4a5568" i], [style*="color: #4a5568" i],
  [style*="color:#555" i], [style*="color: #555" i],
  [style*="color:#5b7089" i], [style*="color: #5b7089" i],
  [style*="color:#666" i], [style*="color: #666" i],
  [style*="color:#667" i], [style*="color: #667" i]
) { color: var(--xz-ink-2) !important; }

html[data-xz-theme="dark"] body :is(
  [style*="color:#777" i], [style*="color: #777" i],
  [style*="color:#888" i], [style*="color: #888" i],
  [style*="color:#8ba0b8" i], [style*="color: #8ba0b8" i],
  [style*="color:#93a3b8" i], [style*="color: #93a3b8" i],
  [style*="color:#999" i], [style*="color: #999" i],
  [style*="color:#aaa" i], [style*="color: #aaa" i],
  [style*="color:#bbb" i], [style*="color: #bbb" i],
  [style*="color:#ccc" i], [style*="color: #ccc" i]
) { color: var(--xz-ink-3) !important; }

/* 深色下品牌色/状态色也换成提亮版，保证对比度 */
html[data-xz-theme="dark"] body :is(
  [style*="color:#1e9fff" i], [style*="color: #1e9fff" i],
  [style*="color:#1b64d9" i], [style*="color: #1b64d9" i],
  [style*="color:#4b8ef0" i], [style*="color: #4b8ef0" i]
) { color: var(--xz-primary-dark) !important; }

html[data-xz-theme="dark"] body :is(
  [style*="color:#0f7a45" i], [style*="color: #0f7a45" i],
  [style*="color:#0f766e" i], [style*="color: #0f766e" i],
  [style*="color:#10b981" i], [style*="color: #10b981" i],
  [style*="color:#2ecc71" i], [style*="color: #2ecc71" i],
  [style*="color:#4caf50" i], [style*="color: #4caf50" i],
  [style*="color:#5fb878" i], [style*="color: #5fb878" i]
) { color: var(--xz-ok-ink) !important; }

html[data-xz-theme="dark"] body :is(
  [style*="color:#b91c1c" i], [style*="color: #b91c1c" i],
  [style*="color:#b3271f" i], [style*="color: #b3271f" i],
  [style*="color:#c4342c" i], [style*="color: #c4342c" i],
  [style*="color:#dc2626" i], [style*="color: #dc2626" i],
  [style*="color:#e74c3c" i], [style*="color: #e74c3c" i],
  [style*="color:#d9534f" i], [style*="color: #d9534f" i]
) { color: var(--xz-err-ink) !important; }

html[data-xz-theme="dark"] body :is(
  [style*="color:#8a5a00" i], [style*="color: #8a5a00" i],
  [style*="color:#b45309" i], [style*="color: #b45309" i],
  [style*="color:#b26a00" i], [style*="color: #b26a00" i],
  [style*="color:#f59e0b" i], [style*="color: #f59e0b" i],
  [style*="color:#ff5722" i], [style*="color: #ff5722" i]
) { color: var(--xz-warn-ink) !important; }

/* ---- layui / pear 的结构性组件 ---- */
html[data-xz-theme="dark"] body .layui-card,
html[data-xz-theme="dark"] body .layui-card-body,
html[data-xz-theme="dark"] body .layui-form,
html[data-xz-theme="dark"] body .layui-form-item,
html[data-xz-theme="dark"] body .layui-table-view,
html[data-xz-theme="dark"] body .layui-table-page {
  background-color: var(--xz-card-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-card-header,
html[data-xz-theme="dark"] body .layui-table-header,
html[data-xz-theme="dark"] body .layui-table-header table,
html[data-xz-theme="dark"] body .layui-table thead tr,
html[data-xz-theme="dark"] body .layui-table th,
html[data-xz-theme="dark"] body .layui-table-tool,
html[data-xz-theme="dark"] body .layui-colla-title,
html[data-xz-theme="dark"] body .layui-tab-title,
html[data-xz-theme="dark"] body .layui-table-total,
html[data-xz-theme="dark"] body .layui-table-total td {
  background-color: var(--xz-card-hd-bg) !important;
  color: var(--xz-ink-2) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-table td,
html[data-xz-theme="dark"] body .layui-table-cell {
  background-color: transparent !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-table tbody tr:hover,
html[data-xz-theme="dark"] body .layui-table-hover {
  background-color: var(--xz-row-hover) !important;
}
html[data-xz-theme="dark"] body .layui-table-tool-self .layui-inline,
html[data-xz-theme="dark"] body .layui-table-tool-temp { color: var(--xz-ink-2) !important; }

html[data-xz-theme="dark"] body .layui-btn-primary {
  background-color: var(--xz-card-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-btn-primary:hover {
  border-color: var(--xz-primary) !important;
  color: var(--xz-primary-dark) !important;
}
html[data-xz-theme="dark"] body .layui-table-cell .layui-btn,
html[data-xz-theme="dark"] body .layui-table-cell .layui-btn-xs {
  background: var(--xz-card-bg) !important;
  color: var(--xz-ink-2) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-table-cell .layui-btn-danger {
  color: var(--xz-err-ink) !important;
  border-color: var(--xz-err-soft) !important;
}

html[data-xz-theme="dark"] body .layui-input,
html[data-xz-theme="dark"] body .layui-textarea,
html[data-xz-theme="dark"] body .layui-select,
html[data-xz-theme="dark"] body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html[data-xz-theme="dark"] body select,
html[data-xz-theme="dark"] body textarea {
  background-color: var(--xz-card-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body input::placeholder,
html[data-xz-theme="dark"] body textarea::placeholder { color: var(--xz-ink-3) !important; }
html[data-xz-theme="dark"] body .layui-form-label,
html[data-xz-theme="dark"] body .layui-form-mid { color: var(--xz-ink-2) !important; }
html[data-xz-theme="dark"] body .layui-form-select dl,
html[data-xz-theme="dark"] body .layui-form-select .layui-anim {
  background: var(--xz-card) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-form-select dl dd { color: var(--xz-ink-2) !important; }
html[data-xz-theme="dark"] body .layui-form-select dl dd.layui-this {
  background: var(--xz-primary-soft) !important;
  color: var(--xz-primary-dark) !important;
}
html[data-xz-theme="dark"] body .layui-form-radio,
html[data-xz-theme="dark"] body .layui-form-checkbox { color: var(--xz-ink-2) !important; }

html[data-xz-theme="dark"] body .layui-layer,
html[data-xz-theme="dark"] body .layui-layer-page .layui-layer-content,
html[data-xz-theme="dark"] body .layui-layer-dialog .layui-layer-content {
  background: var(--xz-card) !important;
  color: var(--xz-ink) !important;
}
html[data-xz-theme="dark"] body .layui-layer-title {
  background: var(--xz-card-hd-bg) !important;
  color: var(--xz-ink) !important;
  border-bottom-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-layer-btn a {
  background: var(--xz-card-hd-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .layui-layer-btn .layui-layer-btn0 {
  background: var(--xz-primary) !important;
  color: #fff !important;
  border-color: var(--xz-primary) !important;
}

html[data-xz-theme="dark"] body .layui-tab-title .layui-this { color: var(--xz-primary-dark) !important; }
html[data-xz-theme="dark"] body .layui-elem-quote {
  background: var(--xz-info-soft) !important;
  border-color: var(--xz-primary) !important;
  color: var(--xz-ink-2) !important;
}
html[data-xz-theme="dark"] body .layui-colla-content { color: var(--xz-ink-2) !important; }
html[data-xz-theme="dark"] body .layui-progress { background: var(--xz-row-alt) !important; }
html[data-xz-theme="dark"] body .pear-btn-default {
  background: var(--xz-card-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}

/* 原生滚动条 / 选中文字 */
html[data-xz-theme="dark"] body ::selection { background: rgba(75, 142, 240, .35); color: #fff; }
html[data-xz-theme="dark"] body ::-webkit-scrollbar-thumb { background: #3a4b63; background-clip: content-box; }

/* ---- index.html 外壳：顶栏 / 内容区 / 开始菜单 ---- */
html[data-xz-theme="dark"] body .ct { background: var(--xz-bg) !important; }
html[data-xz-theme="dark"] body .ct::before {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
}
html[data-xz-theme="dark"] body .xz-top {
  background: var(--xz-card) !important;
  border-bottom-color: var(--xz-line) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.28) !important;
}
html[data-xz-theme="dark"] body .xz-top .xz-crumb b,
html[data-xz-theme="dark"] body .xz-brandchip .t { color: var(--xz-ink) !important; }
html[data-xz-theme="dark"] body .xz-top .xz-btn,
html[data-xz-theme="dark"] body .xz-top #xzLang,
html[data-xz-theme="dark"] body .xz-top .xz-search input {
  background: var(--xz-card-hd-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body .xz-top .xz-btn:hover {
  border-color: var(--xz-primary) !important;
  color: var(--xz-primary-dark) !important;
}
html[data-xz-theme="dark"] body .xz-top .xz-btn.teal { color: var(--xz-teal) !important; border-color: var(--xz-teal) !important; }
html[data-xz-theme="dark"] body .xz-top .xz-btn.teal:hover { background: var(--xz-teal) !important; color: #062a26 !important; }
html[data-xz-theme="dark"] body .xz-top .xz-search input:focus {
  background: var(--xz-card) !important;
  border-color: var(--xz-primary) !important;
}
html[data-xz-theme="dark"] body .xz-role {
  background: var(--xz-info-soft) !important;
  color: var(--xz-primary-dark) !important;
}
html[data-xz-theme="dark"] body #sm,
html[data-xz-theme="dark"] body #su,
html[data-xz-theme="dark"] body #nvStart {
  background: rgba(23, 33, 46, .98) !important;
  border-color: var(--xz-line) !important;
  color: var(--xz-ink) !important;
}
html[data-xz-theme="dark"] body #sm .ss input,
html[data-xz-theme="dark"] body #nvStart .srch input {
  background: var(--xz-card-bg) !important;
  color: var(--xz-ink) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body #nvStart .sh { border-bottom-color: var(--xz-line) !important; }
html[data-xz-theme="dark"] body #nvStart .sh .t,
html[data-xz-theme="dark"] body #nvStart .tile,
html[data-xz-theme="dark"] body #nvStart .tile .tx b { color: var(--xz-ink) !important; }
html[data-xz-theme="dark"] body #nvStart .sh .x {
  background: var(--xz-card-bg) !important;
  color: var(--xz-ink-2) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body #nvStart .tile:hover { background: var(--xz-row-hover) !important; border-color: var(--xz-line) !important; }
html[data-xz-theme="dark"] body #nvStart .tile .ic { background: var(--xz-info-soft) !important; color: var(--xz-primary-dark) !important; }
html[data-xz-theme="dark"] body #nvStart .kid {
  background: var(--xz-info-soft) !important;
  color: var(--xz-primary-dark) !important;
  border-color: var(--xz-line) !important;
}
html[data-xz-theme="dark"] body #nvStart .grp > h4,
html[data-xz-theme="dark"] body #nvStart .tile .tx i,
html[data-xz-theme="dark"] body #nvStart .none { color: var(--xz-ink-3) !important; }

/* --------------------------------------------------------------- 14 打印 */
@media print {
  body .xz-page { max-width: none; padding: 0; }
  body .xz-page-head__actions,
  body .xz-toolbar,
  body .xz-iconbtn { display: none !important; }
  body .xz-card,
  body .xz-table-wrap,
  body .xz-kpi { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; }
}

/* ------------------------------------------------------- 15 动效偏好 */
@media (prefers-reduced-motion: reduce) {
  body .xz-kpi,
  body .xz-btn,
  body .layui-btn,
  body .xz-iconbtn,
  body .layui-input { transition: none !important; }
  body .xz-kpi:hover { transform: none !important; }
}