/* ============================================================================
 * theme.css — 代理后台主题
 *
 * 接入：在 public/index.html 的 layui.css 之后追加一行
 *   <link href="./res/style/theme.css" rel="stylesheet">
 * 回退：删掉上面那一行即可。本文件对原项目零侵入，不改动任何既有文件。
 *
 * ── 设计地基（改这个文件前先读懂这条，否则会把它改回一套普通后台）──
 *
 * 颜色在这里不是装饰，是【资金 + 操作重要性】的编码：
 *
 *   鎏金 --gold    = ①可提现余额(钱) ②需要着重看一眼的【主操作/重要操作】
 *                    (取钱、禁言、发全局邮件、执行发放/补偿这类)。用 .layui-btn-warm。
 *                    看到金色 → 要么是能拿的钱，要么是一个要慎重点的按钮。
 *   霜蓝 --frost   = 锁住/在途/待处理（待结算、审核中、未发货）。低饱和、往后退。
 *   松绿 --good    = 已完结（到账、通过、开启中）。语义色，不参与强调。
 *   赭红 --crit    = 出事了（驳回、失败、负余额、加载失败）。语义色，不参与强调。
 *
 * 所以：普通/次要按钮一律用墨色 --fg 或线框 btn-primary，不用金色 —— 一旦满屏都是金的，
 * "金色 = 要紧" 这条规则就废了。金色留给真正要紧的那一两个操作。
 * (反例已修: 导出数据、关闭通道 这类不算重要操作, 不该用 warm。)
 *
 * 数字是这块屏幕上真正被读的东西：金额一律 tabular-nums 等宽，
 * 上下两行的个位数必须对齐，否则 950 看着会比 12800 长。
 *
 * 双主题：所有颜色走 CSS 变量，暗色只重定义变量，组件自动跟随。
 * ========================================================================= */

/* ============================================================
 * 1. TOKEN
 * ========================================================== */
:root {
  /* 宣 — 冷调屏幕纸。不是奶油白，也不是纯白；它得和墨同一个色系 */
  --t-bg:         #eef1f6;
  --t-surface:    #ffffff;
  --t-surface-2:  #f6f8fb;
  --t-line:       #dce1e9;
  --t-line-soft:  #e9edf3;

  /* 墨 — 带蓝调的近黑，不是纯黑 */
  --t-fg:         #161a23;
  --t-fg-2:       #4d5768;
  --t-fg-3:       #5f6a7c;   /* 弱文字。⚠改前跑对比度: 需在 surface-2/bg 上 ≥4.5(WCAG AA)。原 #8792a3 只有 2.96=看不清, 见文件头对比度铁律 */

  /* 鎏 — 唯一强调色：现在能拿走的钱 */
  --t-gold:       #c1873c;
  --t-gold-hover: #a97430;
  --t-gold-fg:    #8a5f24;
  --t-gold-wash:  #f7eeda;
  --t-gold-line:  #e2cba0;

  /* 冻 — 锁住/在途 */
  --t-frost:      #5b7089;
  --t-frost-fg:   #48596e;
  --t-frost-wash: #e3e8ee;

  /* 语义色（不参与强调） */
  --t-good:       #387058;   /* 达标: 在 bg 上 5.11(原 4.44 略欠) */
  --t-good-wash:  #e5efea;
  --t-crit:       #b3423a;
  --t-crit-wash:  #f8e7e5;

  /* 侧边栏 */
  --t-side:       #161a23;
  --t-side-2:     #1e232e;
  --t-side-fg:    #a3adbb;
  --t-side-fg-2:  #6f7a89;

  --t-r:          6px;
  --t-r-sm:       4px;
  --t-shadow:     0 1px 2px rgba(22, 26, 35, .04);
  --t-shadow-up:  0 8px 24px -10px rgba(22, 26, 35, .28);

  --t-cjk:  "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --t-num:  -apple-system, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}

/* 暗色只在页面明确设置 data-theme="dark" 时启用，避免系统暗色偏好把旧版模板切成白底白字。 */
:root[data-theme="dark"] {
  --t-bg: #10131a;  --t-surface: #181d26;  --t-surface-2: #1e242f;
  --t-line: #2b3340;  --t-line-soft: #232a35;
  --t-fg: #e7eaf0;  --t-fg-2: #a6b0be;  --t-fg-3: #828d9d;
  --t-gold: #dda155;  --t-gold-hover: #e8b06a;  --t-gold-fg: #e8bd80;
  --t-gold-wash: #2f2619;  --t-gold-line: #5a4526;
  --t-frost: #829ab6;  --t-frost-fg: #9ab0c8;  --t-frost-wash: #212934;
  --t-good: #5a9b81;  --t-good-wash: #1c2a25;
  --t-crit: #dd6f67;  --t-crit-wash: #31201f;
  --t-side: #0b0e14;  --t-side-2: #141922;  --t-side-fg: #8d97a5;  --t-side-fg-2: #5d6875;
}
:root[data-theme="light"] {
  --t-bg: #eef1f6;  --t-surface: #ffffff;  --t-surface-2: #f6f8fb;
  --t-line: #dce1e9;  --t-line-soft: #e9edf3;
  --t-fg: #161a23;  --t-fg-2: #4d5768;  --t-fg-3: #5f6a7c;
  --t-gold: #c1873c;  --t-gold-hover: #a97430;  --t-gold-fg: #8a5f24;
  --t-gold-wash: #f7eeda;  --t-gold-line: #e2cba0;
  --t-frost: #5b7089;  --t-frost-fg: #48596e;  --t-frost-wash: #e3e8ee;
  --t-good: #387058;  --t-good-wash: #e5efea;
  --t-crit: #b3423a;  --t-crit-wash: #f8e7e5;
  --t-side: #161a23;  --t-side-2: #1e232e;  --t-side-fg: #a3adbb;  --t-side-fg-2: #6f7a89;
}

/* ============================================================
 * 2. 基础
 * ========================================================== */
body {
  font-family: var(--t-cjk);
  background-color: var(--t-bg);
  color: var(--t-fg);
  -webkit-font-smoothing: antialiased;
}
.layui-layout-admin .layui-body { background-color: var(--t-bg); }

/* 数字：全站等宽对齐。个位数对个位数，扫一眼就能比大小 */
.layui-table td,
.layui-table th,
.layui-input,
.layui-badge,
.layui-laypage {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ============================================================
 * 3. Admin 骨架
 * ========================================================== */
.layui-layout-admin .layui-header {
  background-color: var(--t-surface);
  border-bottom: 1px solid var(--t-line);
  box-shadow: none;
}
.layui-layout-admin .layui-header a,
.layui-layout-admin .layui-header .layui-nav-item > a { color: var(--t-fg-2); }
.layui-layout-admin .layui-header .layui-nav-item > a:hover { color: var(--t-fg); }
.layui-layout-admin .layui-logo {
  background-color: var(--t-side);
  color: var(--t-surface);
  font-weight: 650;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--t-side-2);
}

/* ============================================================
 * 4. 侧边栏
 * ========================================================== */
.layui-layout-admin .layui-side,
.layui-side-scroll { background-color: var(--t-side); }

.layui-nav-tree { background-color: var(--t-side); }
.layui-nav-tree .layui-nav-item > a { color: var(--t-side-fg); font-size: 14px; }
.layui-nav-tree .layui-nav-item > a:hover { background-color: var(--t-side-2); color: #fff; }
.layui-nav-tree .layui-nav-child { background-color: var(--t-side-2); }
.layui-nav-tree .layui-nav-child a { color: var(--t-side-fg-2); }
.layui-nav-tree .layui-nav-child a:hover { color: #fff; background-color: transparent; }

/* 🔴 当前项 + 导航条 —— 这里有个比链接色更隐蔽的坑, 改前必读:
 *
 *    layuiAdmin 有一套【运行时换肤】系统: 读 localStorage.adminui.theme.color.selected
 *    (默认 #16baaa 青色, 调色板在 res/config.js:87 theme.color[]), 用 JS 生成一段
 *    <style> 动态注入到 <head>【最末尾】, 把所有"选中/导航条/页签高亮"染成该色, 且带
 *    !important。它的选择器是 `.layui-nav-tree .layui-this` = 特异性 (0,2,0)。
 *
 *    这段是 JS 运行时注入、永远排在 theme.css 之后, 所以同特异性 + 同 !important 时它必胜
 *    —— 实测我原来写 `.layui-nav-tree .layui-this{...!important}` (也是 0,2,0) 被它完全压掉,
 *    侧边栏选中项仍是青色。
 *    解法: 前缀 .layui-side 提到 (0,3,0) > (0,2,0), 同 !important 下靠特异性赢。
 *    (不去改 config.js 的调色板 —— 那是 layuiAdmin 核心 setter, 且用户仍可切换主题, 改了也白改。
 *     用 CSS 特异性压制才是零侵入且换肤无关的正解。)
 * ========================================================== */
.layui-side .layui-nav-tree .layui-nav-bar { background-color: var(--t-gold) !important; width: 2px; }

/* 唯一允许金色出现在导航里的是那条 2px 定位条, 不是整块底色 */
.layui-side .layui-nav-tree .layui-this,
.layui-side .layui-nav-tree .layui-this > a,
.layui-side .layui-nav-tree .layui-this > a:hover,
.layui-side .layui-nav-tree .layui-nav-child dd.layui-this,
.layui-side .layui-nav-tree .layui-nav-child dd.layui-this a {
  background-color: var(--t-side-2) !important;
  color: #fff !important;
}
.layui-side .layui-nav-tree .layui-this > a { box-shadow: inset 2px 0 0 var(--t-gold); }

/* ============================================================
 * 5. 卡片
 * ========================================================== */
.layui-card {
  background-color: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r);
  box-shadow: var(--t-shadow);
}
.layui-card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--t-line-soft);
  color: var(--t-fg);
  font-weight: 650;
  font-size: 15px;
  height: auto;
  line-height: 1.6;
  padding: 13px 18px;
  border-radius: var(--t-r) var(--t-r) 0 0;
}
.layui-card-body { color: var(--t-fg-2); padding: 16px 18px; }

/* 面包屑条（data.html 等页面顶部的 .layadmin-header） */
.layui-card.layadmin-header { box-shadow: none; border: 0; background: transparent; }
.layui-breadcrumb a { color: var(--t-fg-3) !important; }
.layui-breadcrumb a:hover { color: var(--t-fg) !important; }
.layui-breadcrumb a cite { color: var(--t-fg); font-weight: 600; }
.layui-breadcrumb span[lay-separator] { color: var(--t-fg-3); }

/* ============================================================
 * 6. 表格 —— 这块屏幕上信息密度最高的东西
 * ========================================================== */
.layui-table,
.layui-table-view { border-color: var(--t-line); }
.layui-table { background-color: var(--t-surface); color: var(--t-fg-2); }

.layui-table thead tr,
.layui-table-header,
.layui-table th {
  background-color: var(--t-surface-2) !important;
  color: var(--t-fg-3) !important;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
}
.layui-table th,
.layui-table td { border-color: var(--t-line-soft); }
.layui-table tbody tr:hover,
.layui-table-hover { background-color: var(--t-surface-2) !important; }
.layui-table td { color: var(--t-fg-2); }

.layui-table-tool,
.layui-table-page {
  background-color: var(--t-surface);
  border-color: var(--t-line);
  color: var(--t-fg-3);
}
.layui-table-view .layui-table[lay-even] tr:nth-child(even) { background-color: transparent; }

/* 金额单元格自动右对齐 —— 账本的规矩：个位数对个位数，扫一眼就能比大小。
   靠 :has() 认出"这一格里装的是钱"，页面不用改 table 的列配置。 */
.layui-table td:has(.t-amt) { text-align: right; }

/* 表格内的操作按钮是次要动作，不该是一列黑块。降成轻量线框。 */
.layui-table td .layui-btn-xs,
.layui-table td .layui-btn-sm {
  background-color: var(--t-surface);
  border: 1px solid var(--t-line);
  color: var(--t-fg-2);
}
.layui-table td .layui-btn-xs:hover,
.layui-table td .layui-btn-sm:hover {
  border-color: var(--t-fg-3);
  background-color: var(--t-surface-2);
  color: var(--t-fg);
}
/* 但危险动作(封禁/驳回)和取钱动作(提现)必须保住自己的颜色 */
.layui-table td .layui-btn-danger { background-color: var(--t-crit); border-color: var(--t-crit); color: #fff; }
.layui-table td .layui-btn-danger:hover { color: #fff; }
.layui-table td .layui-btn-warm { background-color: var(--t-gold); border-color: var(--t-gold); color: #fff; }
.layui-table td .layui-btn-warm:hover { color: #fff; }

/* ============================================================
 * 7. 表单
 * ========================================================== */
.layui-input,
.layui-select,
.layui-textarea {
  background-color: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-sm);
  color: var(--t-fg);
  height: 38px;
  line-height: 38px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.layui-textarea { height: auto; line-height: 1.6; padding: 9px 10px; }
.layui-input:hover,
.layui-textarea:hover,
.layui-select:hover { border-color: var(--t-fg-3); }
.layui-input:focus,
.layui-textarea:focus,
.layui-select:focus {
  border-color: var(--t-fg-2) !important;
  box-shadow: 0 0 0 3px var(--t-line-soft) !important;
}
.layui-input::placeholder,
.layui-textarea::placeholder { color: var(--t-fg-3); }
.layui-form-label { color: var(--t-fg-2); font-weight: 500; }
.layui-form-select dl { background-color: var(--t-surface); border-color: var(--t-line); border-radius: var(--t-r-sm); }
.layui-form-select dl dd { color: var(--t-fg-2); }
.layui-form-select dl dd:hover { background-color: var(--t-surface-2); }
.layui-form-select dl dd.layui-this { background-color: var(--t-surface-2); color: var(--t-fg); font-weight: 600; }
.layui-form-checked[lay-skin="primary"] i { border-color: var(--t-fg) !important; background-color: var(--t-fg); }
.layui-form-switch.layui-form-onswitch { border-color: var(--t-fg); background-color: var(--t-fg); }

/* ============================================================
 * 8. 按钮
 *    默认全是墨色。金色是稀缺资源，只给 .layui-btn-warm（取钱类操作）。
 * ========================================================== */
.layui-btn {
  background-color: var(--t-fg);
  color: #fff;
  border-radius: var(--t-r-sm);
  border: 1px solid transparent;
  font-size: 14px;
  height: 36px;
  line-height: 34px;
  padding: 0 16px;
  transition: background-color .12s ease;
}
.layui-btn:hover { background-color: var(--t-fg-2); color: #fff; }
.layui-btn:focus-visible { outline: 2px solid var(--t-gold); outline-offset: 2px; }

.layui-btn-primary {
  background-color: var(--t-surface);
  border-color: var(--t-line);
  color: var(--t-fg-2);
}
.layui-btn-primary:hover { border-color: var(--t-fg-3); background-color: var(--t-surface-2); color: var(--t-fg); }

.layui-btn-normal { background-color: var(--t-fg); }
.layui-btn-normal:hover { background-color: var(--t-fg-2); }

/* 唯一的金色按钮：取钱。别把它用在别处 */
.layui-btn-warm { background-color: var(--t-gold); color: #fff; }
.layui-btn-warm:hover { background-color: var(--t-gold-hover); color: #fff; }

.layui-btn-danger { background-color: var(--t-crit); }
.layui-btn-danger:hover { background-color: var(--t-crit); filter: brightness(.92); }

.layui-btn-disabled,
.layui-btn-disabled:hover {
  background-color: var(--t-surface-2) !important;
  border-color: var(--t-line) !important;
  color: var(--t-fg-3) !important;
}
.layui-btn-sm { height: 30px; line-height: 28px; padding: 0 12px; font-size: 13px; }
.layui-btn-xs { height: 24px; line-height: 22px; padding: 0 9px; font-size: 12px; }

/* ============================================================
 * 9. 状态色 —— 核心
 *    layui 原本 5 个颜色按"好看"分配，同一个"待处理"在三个页面是三种颜色。
 *    这里全部重映射到语义：能不能动这笔钱。
 *    注意：没有任何一个映射到鎏金 —— 金色只属于"可提现"。
 * ========================================================== */
.layui-badge,
.layui-badge-rim {
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  height: auto;
  line-height: 1.6;
  padding: 2px 8px;
  border: 1px solid transparent;
}

/* 冻结 / 在途 —— 蓝、青、紫、橙全部收敛到霜蓝 */
.layui-bg-blue,
.layui-bg-cyan,
.layui-bg-purple,
.layui-bg-orange {
  background-color: var(--t-frost-wash) !important;
  color: var(--t-frost-fg) !important;
  border-color: color-mix(in srgb, var(--t-frost) 26%, transparent) !important;
}
/* 完结 */
.layui-bg-green {
  background-color: var(--t-good-wash) !important;
  color: var(--t-good) !important;
  border-color: color-mix(in srgb, var(--t-good) 30%, transparent) !important;
}
/* 出事 */
.layui-bg-red {
  background-color: var(--t-crit-wash) !important;
  color: var(--t-crit) !important;
  border-color: color-mix(in srgb, var(--t-crit) 32%, transparent) !important;
}
/* 中性 */
.layui-bg-gray,
.layui-bg-black {
  background-color: var(--t-surface-2) !important;
  color: var(--t-fg-3) !important;
  border-color: var(--t-line) !important;
}

/* ============================================================
 * 10. 分页
 * ========================================================== */
.layui-laypage a,
.layui-laypage span {
  border-color: var(--t-line);
  background-color: var(--t-surface);
  color: var(--t-fg-2);
  border-radius: var(--t-r-sm);
}
.layui-laypage a:hover { color: var(--t-fg); border-color: var(--t-fg-3); }
.layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: var(--t-fg); border-radius: var(--t-r-sm); }
.layui-laypage-skip { color: var(--t-fg-3); }
.layui-laypage input,
.layui-laypage button { border-color: var(--t-line); border-radius: var(--t-r-sm); color: var(--t-fg-2); }

/* ============================================================
 * 11. 弹层
 * ========================================================== */
.layui-layer {
  border-radius: var(--t-r);
  box-shadow: var(--t-shadow-up);
  background-color: var(--t-surface);
}
.layui-layer-title {
  background-color: var(--t-surface);
  border-bottom: 1px solid var(--t-line-soft);
  color: var(--t-fg);
  font-weight: 650;
  border-radius: var(--t-r) var(--t-r) 0 0;
}
.layui-layer-content { color: var(--t-fg-2); }
.layui-layer-btn { border-top: 1px solid var(--t-line-soft); padding: 12px 16px; }
.layui-layer-btn a {
  border-radius: var(--t-r-sm);
  border: 1px solid var(--t-line);
  background-color: var(--t-surface);
  color: var(--t-fg-2);
  height: 32px; line-height: 30px;
}
.layui-layer-btn .layui-layer-btn0 {
  background-color: var(--t-fg);
  border-color: var(--t-fg);
  color: #fff;
}

/* ============================================================
 * 11.5 链接
 *    layuiAdmin 的默认链接是青色, 不属于这套体系。收敛到墨色 ——
 *    链接是"可点的文字", 不是一个需要抢注意力的状态。
 *
 * 🔴 这里有个坑, 改本文件前必读:
 *    adminui 的 admin.css 写着 `.layadmin-link{color:#029789!important}`,
 *    而 admin.css 不在 index.html 里静态引入 —— 它由 layui 模块系统动态 <link>
 *    进 <head> 末尾, 也就是【排在 theme.css 之后】。
 *    同为 !important + 同特异性时后加载者胜, 所以光写 `.layadmin-link{...!important}`
 *    是压不住它的(实测无效)。必须提高特异性: `a.layadmin-link` (0,1,1) > (0,1,0)。
 *    admin.css 全文只有 8 处 !important, 涉及颜色的仅 3 条, 这是唯一需要处理的一条。
 * ========================================================== */
a.layadmin-link,
a.layadmin-user-jump-change { color: var(--t-fg-2) !important; }
a.layadmin-link:hover,
a.layadmin-user-jump-change:hover { color: var(--t-fg) !important; opacity: 1; text-decoration: underline; }

/* 登录页 */
.layadmin-user-login-main { background-color: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-r); box-shadow: var(--t-shadow); }
.layadmin-user-login-box .layui-form-label { color: var(--t-fg-3); }
.layadmin-user-login-footer { color: var(--t-fg-3); }
.layadmin-user-login-footer a { color: var(--t-fg-3); }

/* ============================================================
 * 12. 页签 / Tab
 * ========================================================== */
.layui-tab-title li { color: var(--t-fg-3); }
.layui-tab-title .layui-this { color: var(--t-fg); font-weight: 600; }
.layui-tab-brief > .layui-tab-title .layui-this:after { border-bottom-color: var(--t-gold); }

/* 页签选中态的高亮条: 同样被 layuiAdmin 换肤 inline style 染青
 * (`.layadmin-pagetabs .layui-tab-title li.layui-this::after` 0,3,0 !important)。
 * 用同结构 + 追加一个 :not(#_) 提到 (1,3,0) 压过它。金色 = 你正看的这一页。 */
.layadmin-pagetabs .layui-tab-title li.layui-this:not(#_)::after {
  border-bottom-color: var(--t-gold) !important;
  background-color: var(--t-gold) !important;
}
/* 右上角 admin 顶栏选中/hover 的青色高亮 */
.layui-layout-admin .layui-header .layui-nav .layui-this a,
.layui-layout-admin .layui-header .layui-nav-bar { background-color: transparent !important; }
.layui-layout-admin .layui-header .layui-nav-bar { display: none; }

/* ============================================================
 * 13. 工具类
 *    页面里想要"财报式金额"或"状态 chip"时用这些，别再手写颜色。
 * ========================================================== */

/* 金额：¥ 缩小降对比，小数降一级，等宽右对齐 */
.t-amt {
  font-family: var(--t-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.02em;
  font-weight: 650;
  color: var(--t-fg);
  white-space: nowrap;
}
.t-amt .cur { font-size: .62em; font-weight: 500; opacity: .5; margin-right: .1em; vertical-align: .08em; }
.t-amt .dec { font-size: .72em; font-weight: 500; opacity: .55; }
.t-amt-gold { color: var(--t-gold-fg); }
.t-num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* 编号/时间：给人复制的，不是给人读的 —— 降级成 mono 小字 */
.t-code { font-family: var(--t-mono); font-size: .86em; color: var(--t-fg-3); font-variant-numeric: tabular-nums; }

/* 状态 chip：颜色 + 形状双编码，色弱也能分辨 */
.t-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px; border-radius: 3px;
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.t-chip i { width: 7px; height: 7px; flex: none; }
.t-chip-lock   { background: var(--t-frost-wash); color: var(--t-frost-fg); border-color: color-mix(in srgb, var(--t-frost) 26%, transparent); }
.t-chip-lock i { background: repeating-linear-gradient(-45deg, transparent 0 2px, currentColor 2px 3px); }   /* 斜纹 = 锁住 */
.t-chip-flight { background: var(--t-frost-wash); color: var(--t-frost-fg); border-color: color-mix(in srgb, var(--t-frost) 26%, transparent); }
.t-chip-flight i { background: currentColor; }                                                                /* 实心 = 在途 */
.t-chip-gold   { background: var(--t-gold-wash); color: var(--t-gold-fg); border-color: var(--t-gold-line); }
.t-chip-gold i { background: currentColor; }
.t-chip-good   { background: var(--t-good-wash); color: var(--t-good); border-color: color-mix(in srgb, var(--t-good) 30%, transparent); }
.t-chip-good i { background: currentColor; border-radius: 50%; }                                              /* 圆点 = 完结 */
.t-chip-crit   { background: var(--t-crit-wash); color: var(--t-crit); border-color: color-mix(in srgb, var(--t-crit) 32%, transparent); }
.t-chip-crit i { background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }                    /* 三角 = 出事 */

/* 台账式统计格：替代原来那些蓝紫渐变卡片 */
.t-stat { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; min-width: 0; }
.t-stat .k { font-size: 12px; color: var(--t-fg-3); white-space: nowrap; }
.t-stat .v { font-size: 22px; }
.t-stat .d { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--t-fg-3); }
.t-stat .d.up   { color: var(--t-good); }
.t-stat .d.down { color: var(--t-crit); }
.t-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--t-line);
  border: 1px solid var(--t-line); border-radius: var(--t-r); overflow: hidden;
}
.t-stat-grid > .t-stat { background: var(--t-surface); }

/* ============================================================
 * 14. 移动端（≤760px）
 *    上一版就死在这：flex 子项默认 min-width:auto 不肯收缩，
 *    容器挤不下时中文只能一个字一行地竖排换行。逐层放开收缩，
 *    并且让金额永不压缩 —— 宁可把说明文字截断，也不让数字换行。
 * ========================================================== */
@media (max-width: 760px) {
  .layui-layout-admin .layui-side {
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .layui-layout-admin .layui-side.layadmin-side-shrink { transform: translateX(0); }
  .layui-layout-admin .layui-body { left: 0 !important; }
  .layui-layout-admin .layui-header { left: 0 !important; }

  /* 表单单列堆叠 + 触屏友好高度 */
  .layui-form-item .layui-input-inline { width: 100% !important; margin-left: 0 !important; float: none; }
  .layui-form-label { width: auto !important; float: none; text-align: left; padding: 0 0 6px; }
  .layui-input-block { margin-left: 0 !important; }
  .layui-input, .layui-select, .layui-textarea { height: 42px; line-height: 42px; font-size: 15px; }

  /* 表格横向滚动，绝不让它把页面撑破 */
  .layui-table-box,
  .layui-table-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .layui-table td, .layui-table th { white-space: nowrap; }

  /* 允许收缩：这四行是上一版移动端崩掉的解药 */
  .t-stat { min-width: 0; }
  .t-stat .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-stat .v { white-space: nowrap; }
  .t-stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .layui-card-body { padding: 13px 14px; }
  .layui-btn { height: 38px; line-height: 36px; }

  /* 资金流轴图例: 三列在窄屏放不下金额, 改单列堆叠 */
  .rev-legend { grid-template-columns: 1fr !important; }
}

/* ============================================================
 * 15. layui 组件【内建】低对比文字修正
 *
 * 🔴 根因(2026-07-14 第三层): layui.css 自带一批 color:#999 / #c2c2c2 / #d2d2d2 的
 *    组件内建样式(分页省略号/跳页、空数据提示、日期控件头、辅助文字、面包屑…), 这些
 *    class 我的主题层没逐一覆盖, 于是全站分页/日期/空态都是浅灰 #999(白底对比度 2.85,
 *    看不清)。前两层修的是"我自己的 token 值"和"页面/JS 里的硬编码", 这一层是"组件库
 *    自带的低对比色" —— 必须显式列出这些 layui class 统一改到达标的 --t-fg-3(#5f6a7c)。
 *
 *    教训: 主题化一个组件库, 不只改自己写的色, 还要审计【组件库内建的低对比色】并覆盖。
 *    排查法: CDP 遍历真实 DOM 找 <3:1 的元素 → 看它的 class 来自组件库 → grep 组件库
 *    css 找同类 class 一次全覆盖(别逐页逐元素打补丁)。
 * ========================================================== */
.layui-laypage .layui-laypage-spr,
.layui-laypage .layui-laypage-skip,
.layui-laypage .layui-laypage-count,
.layui-laypage .layui-laypage-limits,
.layui-laypage-skip,
.layui-word-aux,
.layui-text-em,
.layui-font-gray,
.layui-none,
.layui-select-none,
.layui-select-tips,
.layui-table-body .layui-none,
.layui-table-view .layui-none,
.layui-laydate-header,
.layui-laydate-footer,
.layui-upload-choose,
.layui-breadcrumb a {
  color: var(--t-fg-3) !important;   /* #5f6a7c, 已过 WCAG (原 layui 内建 #999 只有 2.85) */
}
/* 日期控件面板文字/星期头 也用 layui 浅灰 */
.layui-laydate .layui-this,
.layui-laydate td,
.layui-laydate th { color: var(--t-fg-2); }
.layui-laydate-header i { color: var(--t-fg-2) !important; }