/* ============================================================
   智凯云 全站共享样式（oa-ui.css）
   统一设计语言：商务蓝默认 + 深色科技 / 极简轻灰 / 金色典雅 4 套主题
   仅覆盖视觉属性（颜色/圆角/阴影/动效/字体），不改布局与业务逻辑
   ============================================================ */

/* ===== 一、设计令牌：4 套主题变量（与门户一致，全站共享） ===== */
:root, [data-theme="business"] {
  --bg: #f4f6fb;
  --card: #ffffff;
  --border: #e8ecf4;
  --text: #333a4d;
  --text-sub: #8a93a8;
  --title: #2b3a67;
  --num: #1f3d8a;
  --primary: #4c7dff;
  --primary-hover: #3a67e8;
  --primary-soft: #eef3ff;
  --nav-bg: rgba(255, 255, 255, .88);
  --nav-shadow: rgba(16, 24, 40, .06);
  --card-shadow: rgba(16, 24, 40, .04);
  --hover-shadow: rgba(76, 125, 255, .14);
  --ok: #2ec27e;   --ok-soft: #e8faf0;
  --bad: #e0526a;  --bad-soft: #ffecef;
  --warn: #d97706; --warn-soft: #fff4e0;
  --ring: rgba(76, 125, 255, .16);
  --grad: linear-gradient(135deg, #5b8cff 0%, #4c7dff 48%, #3d6ef0 100%);
  --thead-bg: #f7f9fd;
  --row-hover: #f6f9ff;
  --dvc-card: #f8fafd;      /* 详情弹窗卡片底 */
  --dvc-panel: #f0f4fb;     /* 详情弹窗流程面板底 */
}
[data-theme="dark"] {
  --bg: #0a0e1a;
  --card: #161e34;
  --border: rgba(56, 189, 248, .13);
  --text: #c8d2e8;
  --text-sub: #7b8aa8;
  --title: #7dd3fc;
  --num: #f0c96b;
  --primary: #38bdf8;
  --primary-hover: #2aa8e0;
  --primary-soft: rgba(56, 189, 248, .12);
  --nav-bg: rgba(10, 14, 26, .9);
  --nav-shadow: rgba(56, 189, 248, .08);
  --card-shadow: rgba(56, 189, 248, .05);
  --hover-shadow: rgba(56, 189, 248, .22);
  --ok: #34d399;   --ok-soft: rgba(52, 211, 153, .14);
  --bad: #fb7185;  --bad-soft: rgba(251, 113, 133, .14);
  --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .14);
  --ring: rgba(56, 189, 248, .22);
  --grad: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  --thead-bg: rgba(56, 189, 248, .07);
  --row-hover: rgba(56, 189, 248, .06);
  --dvc-card: rgba(148, 163, 184, .05);
  --dvc-panel: #10182c;
}
[data-theme="minimal"] {
  --bg: #fafafa;
  --card: #ffffff;
  --border: #f0f0f0;
  --text: #444;
  --text-sub: #999;
  --title: #111;
  --num: #111;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff6ff;
  --nav-bg: rgba(255, 255, 255, .9);
  --nav-shadow: rgba(0, 0, 0, .04);
  --card-shadow: rgba(0, 0, 0, .03);
  --hover-shadow: rgba(37, 99, 235, .1);
  --ok: #16a34a;   --ok-soft: #ecfdf5;
  --bad: #dc2626;  --bad-soft: #fef2f2;
  --warn: #d97706; --warn-soft: #fffbeb;
  --ring: rgba(37, 99, 235, .12);
  --grad: linear-gradient(135deg, #3b82f6, #2563eb);
  --thead-bg: #f9fafb;
  --row-hover: #f5f8ff;
  --dvc-card: #fafafa;
  --dvc-panel: #f4f4f4;
}
[data-theme="gold"] {
  --bg: #faf6f0;
  --card: #fffdf9;
  --border: #f0e8da;
  --text: #5c5344;
  --text-sub: #a99e8c;
  --title: #7a5c2e;
  --num: #a8761f;
  --primary: #c9972e;
  --primary-hover: #b3832a;
  --primary-soft: #faf0dc;
  --nav-bg: rgba(255, 253, 249, .9);
  --nav-shadow: rgba(122, 92, 46, .08);
  --card-shadow: rgba(122, 92, 46, .06);
  --hover-shadow: rgba(201, 151, 46, .18);
  --ok: #2e9e63;   --ok-soft: #eaf6ef;
  --bad: #cf5b6d;  --bad-soft: #fbeef1;
  --warn: #b97d12; --warn-soft: #fbf2df;
  --ring: rgba(201, 151, 46, .2);
  --grad: linear-gradient(135deg, #d9a53f 0%, #c9972e 100%);
  --thead-bg: #faf5ec;
  --row-hover: #fdf9f1;
  --dvc-card: #fbf7ee;
  --dvc-panel: #f6efe2;
}

/* ===== 二、基础层 ===== */
body {
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 420px at 15% -8%, rgba(76, 125, 255, .07), transparent 60%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-theme="gold"] body {
  background:
    radial-gradient(1200px 420px at 15% -8%, rgba(201, 151, 46, .09), transparent 60%),
    var(--bg);
}
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 420px at 15% -8%, rgba(56, 189, 248, .08), transparent 60%),
    var(--bg);
}
/* 细腻滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(139, 148, 170, .35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 148, 170, .55); }
::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(123, 138, 168, .3); }

/* 内容区载入动效 */
.container { animation: uiFadeUp .38s ease both; }
@keyframes uiFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 三、顶栏：玻璃拟态 + 全站统一布局（2026-10-03 收口） =====
   flex 布局/高度/内边距/吸顶/返回链接间距原散落各页面级，现全局统一；
   页面级只允许覆盖背景色等主题差异，禁止再重复定义布局 */
.topbar {
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px var(--nav-shadow);
  display: flex; align-items: center; height: 52px; padding: 0 24px;
  position: sticky; top: 0; z-index: 100;
}
.topbar .back { margin-right: 14px; }
.topbar .title, .topbar .page-title {
  letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; color: var(--title);
}
.topbar .title::before, .topbar .page-title::before {
  content: "";
  width: 4px; height: 16px; border-radius: 2px;
  background: var(--grad);
  flex-shrink: 0;
}
.topbar .back {
  color: var(--primary); text-decoration: none; font-size: 14px;
  transition: all .2s;
}
.topbar .back:hover { opacity: .75; text-decoration: none; }
.topbar .back-btn {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-sub);
}
.topbar .back-btn:hover { background: var(--primary-soft); color: var(--primary); }
.identity-tag {
  background: var(--primary-soft);
  border-radius: 999px; padding: 5px 14px;
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
}
.identity-tag .it-name { color: var(--primary); font-weight: 700; }
.identity-tag .it-pos { color: var(--text-sub); }
/* 身份胶囊靠右；主题按钮由 oa-theme.js 注入到胶囊前时，靠右由按钮内联 margin-left:auto 接管（2026-09-18） */
.topbar .identity-tag:last-child { margin-left: auto; }

/* 主题切换按钮（全站通用，无按钮的页面由 oa-theme.js 自动注入） */
.theme-btn {
  height: 30px; padding: 0 13px;
  border: 1px solid var(--border);
  background: var(--card); color: var(--text-sub);
  border-radius: 999px; font-size: 12px; cursor: pointer;
  font-family: inherit;
  transition: all .2s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 1px 2px var(--card-shadow);
}
.theme-btn:hover { color: var(--primary); border-color: var(--primary); box-shadow: 0 2px 10px var(--hover-shadow); }

/* ===== 四、按钮体系 ===== */
.btn {
  border: none; border-radius: 10px;
  background: none;   /* 兜底：杜绝浏览器默认 buttonface 灰底，按钮一律配 btn-primary/plain/danger 修饰类 */
  height: 36px; padding: 0 18px;
  font-size: 13.5px; cursor: pointer; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; white-space: nowrap;
}
/* 按钮式 label（如上传收据）：防止被 .form-item label 的 display:block 压成块级导致文字不居中 */
.form-item label.btn { display: inline-flex; align-items: center; justify-content: center; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn, .mini-btn, .add-line-btn, .new-app-btn, .filter-btn {
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
.btn-primary {
  background: var(--grad);
  box-shadow: 0 3px 10px var(--hover-shadow);
  border-radius: 10px;
}
.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 5px 16px var(--hover-shadow);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px var(--hover-shadow); }
.btn-plain { background: var(--primary-soft); color: var(--title); border-radius: 10px; }
.btn-plain:hover { background: var(--border); opacity: 1; }
.btn-danger { background: var(--bad-soft); color: var(--bad); border-radius: 10px; }
.btn-danger:hover { background: var(--bad); color: #fff; }
.mini-btn {
  border: 1px solid var(--border); background: var(--card); color: var(--primary);
  border-radius: 8px;
}
.mini-btn:hover { border-color: var(--primary); box-shadow: 0 2px 8px var(--hover-shadow); }
/* 主操作变体（2026-09-25）：列表行内最优先动作（如审批通过）填充高亮 */
.mini-btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.mini-btn.ok:hover { background: var(--ok); filter: brightness(.92); border-color: var(--ok); box-shadow: 0 2px 8px var(--hover-shadow); }
.mini-btn.danger { color: var(--bad); border-color: var(--bad); }
.mini-btn.danger:hover { border-color: var(--bad); background: var(--bad-soft); }
.add-line-btn { border-radius: 10px; }
.add-line-btn:hover { background: var(--primary-soft); border-style: solid; }
.filter-btn {
  border: 1px solid var(--border); background: var(--card); color: var(--text-sub);
  border-radius: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.filter-btn:hover { color: var(--primary); border-color: var(--primary); }

/* ===== 五、卡片与面板 ===== */
.panel, .log-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px var(--card-shadow), 0 6px 18px rgba(16, 24, 40, .03);
}
.panel-title, .apps-title, .dept-title, .role-list-title {
  color: var(--title);
  display: flex; align-items: center; gap: 8px;
}
.panel-title::before {
  content: "";
  width: 4px; height: 15px; border-radius: 2px;
  background: var(--grad);
}
.panel-title .sub { font-size: 12px; color: var(--text-sub); font-weight: 400; margin-left: auto; }
.stat-card, .app-card {
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.stat-card:hover, .app-card:hover {
  transform: translateY(-3px);
  border-color: rgba(76, 125, 255, .35);
  box-shadow: 0 8px 22px var(--hover-shadow);
}
[data-theme="gold"] .stat-card:hover, [data-theme="gold"] .app-card:hover { border-color: rgba(201, 151, 46, .4); }
[data-theme="dark"] .stat-card:hover, [data-theme="dark"] .app-card:hover { border-color: rgba(56, 189, 248, .4); }
.stat-num, .acc-card .acc-balance, .total-bar .val {
  font-variant-numeric: tabular-nums;
}
.app-card.add-card { border: 1px dashed var(--border); }

/* ===== 六、表格 ===== */
table { width: 100%; border-collapse: collapse; font-size: 13px; }   /* 表格铺满容器（2026-10-03 收口：width/border-collapse 原散落各页面级） */
thead th {
  background: var(--thead-bg);
  color: var(--text-sub);
  font-weight: 600;
  letter-spacing: .3px;
  text-align: left;   /* 全站表头左对齐（HTML 默认 th 居中，与左对齐数据行错位；2026-10-08 收口） */
}
tbody td { color: var(--text); }
/* 2026-09-25 用户定稿：全站列表去行横线（行与行、表头与数据区之间无线，靠留白/表头底色/悬停高亮区分）；
   页内 <style> 不得再定义表格行/表头 border-bottom（弹窗内明细表同样无线） */
table tbody td { border-bottom: none; }
table thead th { border-bottom: none; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--row-hover); }
tbody td:first-child, thead th:first-child { padding-left: 14px; }
tbody td:last-child, thead th:last-child { padding-right: 14px; }
.pager { color: var(--text-sub); }
/* 列表窄列单行省略（2026-09-25）：申请人/部门等列悬停 title 看全文 */
td.ellip { max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 无边框空气感表格（2026-09-25）：行卡片化替代传统横线，左侧状态色条 + 悬停上浮 ===== */
.tbl-air table { border-collapse: separate; border-spacing: 0 6px; }
.tbl-air thead th { background: transparent; border-bottom: none; padding-bottom: 2px; }
.tbl-air tbody tr { background: var(--card); border-radius: 10px;
  box-shadow: 0 1px 3px var(--card-shadow); transition: box-shadow .18s, transform .18s; }
.tbl-air tbody tr:hover { background: var(--card); box-shadow: 0 4px 14px var(--hover-shadow); transform: translateY(-1px); }
.tbl-air tbody td { border: none; }
.tbl-air tbody td:first-child { border-left: 3px solid transparent; border-radius: 10px 0 0 10px; }
.tbl-air tbody td:last-child { border-radius: 0 10px 10px 0; }
.tbl-air tr.row-draft td:first-child { border-left-color: var(--border); }
.tbl-air tr.row-pending td:first-child { border-left-color: var(--warn); }
.tbl-air tr.row-approved td:first-child { border-left-color: var(--primary); }
.tbl-air tr.row-paid td:first-child { border-left-color: var(--ok); }
.tbl-air tr.row-rejected td:first-child { border-left-color: var(--bad); }

/* ===== 七、表单 ===== */
.search-box, .form-item input, .form-item select, .form-item textarea,
.line-row input, .form-input {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 9px;
  transition: border-color .18s, box-shadow .18s;
}
.search-box:focus, .form-item input:focus, .form-item select:focus,
.form-item textarea:focus, .line-row input:focus, .form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
/* 美化复选框（2026-09-27）：圆角描边 + 主题渐变填充 + 平滑过渡，全站统一；
   :is(.form-item …) 提高特异性防页面级 .form-item input 宽高覆盖；
   .switch/.chip 内 display:none 的复选框不受影响 */
:is(input[type="checkbox"], .form-item input[type="checkbox"]) {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--text-sub);
  background: var(--card);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
:is(input[type="checkbox"], .form-item input[type="checkbox"]):hover:not(:disabled) { border-color: var(--primary); }
:is(input[type="checkbox"], .form-item input[type="checkbox"]):checked {
  background: var(--grad);
  border-color: transparent;
}
:is(input[type="checkbox"], .form-item input[type="checkbox"]):checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4.5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
:is(input[type="checkbox"], .form-item input[type="checkbox"]):focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
:is(input[type="checkbox"], .form-item input[type="checkbox"]):disabled { opacity: .45; cursor: not-allowed; }
:is(input[type="checkbox"], .form-item input[type="checkbox"]):indeterminate { background: var(--grad); border-color: transparent; }
:is(input[type="checkbox"], .form-item input[type="checkbox"]):indeterminate::after {
  content: "";
  position: absolute;
  left: 3.2px;
  top: 6.6px;
  width: 9px;
  height: 2px;
  border: 0;
  border-radius: 1px;
  background: #fff;
  transform: none;
}
/* 表单统一样式规则（2026-09-13 用户确定，新模块一律沿用）：
   字段标题加粗 + 主题标题色（不用浅灰）；简短字段用 .form-grid 两列排布（条件显示字段排前，隐藏后同行字段自动补位）；
   .wide/.span2 独占整行；手机端 ≤640px 强制一列；二选一用下拉框不用竖排单选 */
.form-item label, .form-label { color: var(--title); font-weight: 600; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .wide, .form-grid .span2 { grid-column: 1 / -1; }
.line-del {
  background: var(--bad-soft); color: var(--bad);
  border-radius: 8px;
  transition: all .18s;
}
.line-del:hover { background: var(--bad); color: #fff; }
.line-total b { color: var(--title); }

/* ===== 八、状态标签 ===== */
.tag, .flow-tag, .perm-tag, .role-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.tag.draft { background: var(--border); color: var(--text-sub); }
.tag.pending { background: var(--warn-soft); color: var(--warn); }
.tag.approved { background: var(--primary-soft); color: var(--primary); }
.tag.paid { background: var(--ok-soft); color: var(--ok); }
.tag.rejected { background: var(--bad-soft); color: var(--bad); }
.tag.wage { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--border);
  padding: 2px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; } /* D2 随薪状态胶囊（2026-10-07 全站统一全圆角） */
.tag.over { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--border); } /* 发票多开徽章（2026-09-25） */
.tag.in { background: var(--ok-soft); color: var(--ok); }
.tag.out { background: var(--bad-soft); color: var(--bad); }
.tag-inactive, .tag.inactive { background: var(--border); color: var(--text-sub); }

/* PDF 原文件徽标（img 无法渲染 PDF，onerror 替换为醒目 PDF 标志，点击新窗口打开原文件） */
.pdf-badge {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  width: 60px; height: 60px; flex: 0 0 auto;
  background: #e0526a; color: #fff;
  font-size: 21px; font-weight: 800; letter-spacing: .5px;
  border-radius: 8px; cursor: pointer; vertical-align: middle;
  box-shadow: 0 2px 8px rgba(224, 82, 106, .35);
}
.pdf-badge:hover { background: #d1425a; }

/* ===== 九、说明条 ===== */
.flow-note, .src-note {
  border-radius: 12px;
  position: relative;
  box-shadow: 0 1px 2px var(--card-shadow);
  /* 通用（无收支修饰类）说明条：随主题变化，避免深色主题下出现亮色块 */
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid rgba(76, 125, 255, .25);
}
[data-theme="gold"] .flow-note, [data-theme="gold"] .src-note { border-color: rgba(201, 151, 46, .35); }
[data-theme="dark"] .flow-note, [data-theme="dark"] .src-note { border-color: rgba(56, 189, 248, .3); }
.flow-note.expense { background: var(--bad-soft); border: 1px solid rgba(224, 82, 106, .25); color: var(--bad); }
.flow-note.income { background: var(--ok-soft); border: 1px solid rgba(46, 194, 126, .25); color: var(--ok); }
.src-note {
  background: var(--primary-soft); border: 1px solid rgba(76, 125, 255, .25); color: var(--primary);
}
[data-theme="gold"] .src-note { border-color: rgba(201, 151, 46, .35); }
[data-theme="dark"] .src-note { border-color: rgba(56, 189, 248, .3); }

/* ===== 十、弹窗 ===== */
/* 弹窗打开锁定背景滚动（2026-10-17 用户报滚动穿透：弹窗内滚到底后背景跟着滚）；
   body:has() 一处收口全站弹窗，老内核不支持时自动降级为原有行为 */
body:has(.modal-mask.show) { overflow: hidden; }
.modal-mask {
  background: rgba(13, 18, 32, .5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.modal-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(8, 14, 30, .25);
}
.modal-mask.show .modal-box { animation: uiModalPop .24s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes uiModalPop {
  from { opacity: 0; transform: scale(.95) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title {
  color: var(--title);
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.detail-grid .k { color: var(--text-sub); font-weight: 600; }
.detail-grid .v { color: var(--text); }
.timeline b { color: var(--text); }

/* ===== 十一、财务账户页 ===== */
.acc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px var(--card-shadow);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.acc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
  opacity: .85;
}
.acc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px var(--hover-shadow); }
.acc-card .acc-name { color: var(--text-sub); }
.acc-card .acc-balance { color: var(--num); }
.acc-card .acc-meta { color: var(--text-sub); }
.total-bar {
  background: var(--grad);
  border-radius: 14px;
  box-shadow: 0 6px 18px var(--hover-shadow);
  position: relative;
  overflow: hidden;
}
.total-bar::after {
  content: "";
  position: absolute; right: -40px; top: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.total-bar .val { font-variant-numeric: tabular-nums; }
.snap-src { border-radius: 999px; }
.ok-badge { color: var(--ok); }
.bad-badge { color: var(--bad); }
.amount { font-weight: 600; }   /* 列表金额统一加粗（2026-09-25） */
.amount-in, .amount.income { color: var(--ok); }
.amount-out, .amount.expense { color: var(--bad); }
.balance-masked { color: var(--text-sub); }

/* ===== 十二、出纳付款 / 业务单据页 ===== */
/* 列表工具栏与搜索框基础（2026-10-03 收口：flex 布局与输入框尺寸原散落各页面级，全局统一；
   页面级只允许覆盖主题差异，禁止再重复定义布局） */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.search-box { height: 34px; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; font-size: 13.5px; background: var(--card); color: var(--text); outline: none; }
.search-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.toolbar .search-box { min-width: 200px; }
/* 工具栏状态下拉（2026-09-25）：列表状态筛选通用样式 */
.toolbar select { height: 34px; border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 8px; padding: 0 8px; font-size: 13px; }
.toolbar select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
/* 工具栏日期/月份/数字输入框（2026-10-06）：与 select 同主题变量，深色主题不白底；border-box 防撑高既有 height */
.toolbar input { border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 8px; padding: 6px 8px; font-size: 13px; box-sizing: border-box; }
.toolbar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); outline: none; }
/* 可搜索下拉（oa-search-select）在工具栏（2026-09-29）：与 .toolbar select 同高同宽底线 */
.toolbar .oa-ss { min-width: 160px; }
.toolbar .oa-ss-input { height: 34px; border: 1px solid var(--border); background: var(--card);
  color: var(--text); border-radius: 8px; padding: 0 8px; font-size: 13px; }
.toolbar .oa-ss-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.empty {
  color: var(--text-sub);
  letter-spacing: .5px;
}
.reject-reason { background: var(--bad-soft); color: var(--bad); border-radius: 10px; }

/* ===== 十三、系统管理页 ===== */
.tabs {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: inline-flex;
  gap: 4px;
  box-shadow: 0 1px 2px var(--card-shadow);
}
.tabs .tab {
  border: none; background: transparent;
  color: var(--text-sub);
  padding: 8px 18px; border-radius: 9px;
  font-size: 13px; cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.tabs .tab:hover { color: var(--primary); }
.tabs .tab.active {
  background: var(--grad);
  color: #fff;
}
.dept-panel, .user-panel, .role-list-panel, .perm-panel, .log-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px var(--card-shadow);
  overflow: hidden;
}
.dept-title, .role-list-title, .perm-panel-head, .user-panel-head {
  color: var(--title);
}
.dept-item {
  border-radius: 9px;
  transition: background .16s, color .16s;
}
.dept-item:hover { background: var(--row-hover); }
.dept-item.active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  font-weight: 600;
}
.role-list-item {
  border-radius: 9px;
  transition: background .16s;
}
.role-list-item:hover { background: var(--row-hover); }
.role-list-item.active { background: var(--primary-soft); color: var(--primary); }
.perm-check-row, .check-row, .grant-check, .radio-opt {
  border-radius: 8px;
  transition: background .15s;
}
.perm-check-row:hover, .check-row:hover, .grant-check:hover { background: var(--row-hover); }
.log-table tbody tr:hover { background: var(--row-hover); }

/* ===== 十四、深色主题补充 ===== */
[data-theme="dark"] .topbar { border-bottom-color: var(--border); }
[data-theme="dark"] .modal-box { border-color: var(--border); }
[data-theme="dark"] .btn-plain { color: var(--text); }
[data-theme="dark"] .user-role { background: var(--primary-soft); color: var(--primary); }
[data-theme="dark"] .line-del { color: var(--bad); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #5d6b8a; }
[data-theme="dark"] select option { background: #161e34; color: #c8d2e8; }

/* ===== 十五、手机端微调 ===== */
@media (max-width: 640px) {
  /* 手机端卡片化 td 是 flex 容器，省略号失效：恢复自然换行 */
  td.ellip { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
  /* 空气表格手机端：卡片化自带间隔，重置双倍留白与左侧色条（mob-list tr 卡片已是圆角） */
  .tbl-air table { border-spacing: 0; }
  .tbl-air tbody td:first-child { border-left: none; border-radius: 0; }
  .tbl-air tbody td:last-child { border-radius: 0; }
  .topbar .title::before, .topbar .page-title::before { height: 13px; }
  .topbar { padding: 0 14px; }   /* 全站顶栏手机端统一（2026-09-18） */
  .container { padding: 14px 12px 40px; }   /* 全站容器手机端统一；biz/cashier 页内特例 12px 10px 48px */
  .identity-tag { padding: 4px 10px; }
  .identity-tag .it-pos { display: none; }   /* 手机上身份胶囊只留姓名，全站统一（2026-09-18） */
  .theme-btn span:nth-child(2) { display: none; }   /* 手机上只留图标 */
  .modal-box { border-radius: 14px; padding: 16px 14px; }
  .panel-title .sub { width: 100%; margin-left: 0; }   /* 副说明手机端换行到标题下方 */
  .toolbar { padding: 12px 10px; }
  .th-hide, .td-hide { display: none; }   /* 手机上隐藏次要列工具类 */
  table thead th, table tbody td { padding: 10px 10px; }   /* 手机表格紧凑化；高特异性压过十六段 thead th/tbody td（mob-list 卡片不受影响） */
  .tabs { display: flex; width: 100%; overflow-x: auto; }
  .tabs .tab { flex: 1; text-align: center; padding: 8px 6px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ===== 十六、排版层级（宜搭式字号体系） ===== */
.topbar .title, .topbar .page-title { font-size: 17px; }
.panel-title { font-size: 15px; }
table { font-size: 13.5px; }
thead th { font-size: 12.5px; padding: 11px 12px; letter-spacing: .4px; }
tbody td { padding: 12px 12px; line-height: 1.55; }
.form-item label { font-size: 12.5px; margin-bottom: 6px; }
.flow-note, .src-note { font-size: 13px; line-height: 1.7; padding: 11px 18px; }
.stat-label, .app-desc, .acc-card .acc-meta { font-size: 12px; }
.stat-num { font-size: 26px; }
.acc-card .acc-balance { font-size: 24px; }
.app-name { font-size: 13.5px; }
.app-desc { font-size: 11.5px; }
.timeline { font-size: 12.5px; line-height: 2; }
.pager { font-size: 12.5px; }
.empty { font-size: 13px; }
.mini-btn { font-size: 12px; padding: 5px 12px; }
.modal-title { font-size: 16.5px; }

/* ===== 十七、区域划分（宜搭式：卡片头部区 + 统一间距节奏） ===== */
.panel { margin-bottom: 20px; padding: 0; overflow: hidden; }
.panel > .toolbar {
  padding: 14px 18px; margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.panel > .panel-title {
  padding: 16px 20px; margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.panel > .pager {
  padding: 12px 20px; margin-top: 0;
  border-top: 1px solid var(--border);
}
.panel > .pager > span:first-child { margin-right: auto; }
.tbl-wrap { padding: 0; }   /* 2026-10-03 归零：与 .panel .tbl-wrap 兜底统一，表格左右铺满容器 */
.acc-row { gap: 12px; margin-bottom: 6px; }
.total-bar { margin-bottom: 12px; }
.src-note { margin-bottom: 20px; }
.flow-note { margin-bottom: 16px; }
.tabs { margin-bottom: 18px; }

@media (max-width: 640px) {
  .panel > .toolbar { padding: 12px 14px; }
  .panel > .panel-title { padding: 14px 16px; }
  .panel > .pager { padding: 10px 14px; }
  .tbl-wrap { padding: 0 10px 12px; }   /* 页面主体表格容器留白（必须在 PC 段 .tbl-wrap 0 4px 之后才能生效） */
  .panel .tbl-wrap { padding: 0; }   /* panel 内表格容器不额外留白 */
}

/* ===== 十八、统一分页组件（oa-pager.js 配套样式：共X条 + ‹› + 页码输入 + 条/页下拉） ===== */
.oa-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 12px; padding: 10px 16px; font-size: 13px; color: var(--text-sub); flex-wrap: wrap; }
.oa-pager .pg-total { margin-right: 4px; }
.oa-pager .pg-btn { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer; font-size: 15px; line-height: 1; transition: all .15s; }
.oa-pager .pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.oa-pager .pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.oa-pager .pg-input { width: 48px; height: 30px; text-align: center; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; }
.oa-pager .pg-input::-webkit-outer-spin-button,
.oa-pager .pg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oa-pager .pg-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.oa-pager .pg-pages { min-width: 42px; text-align: center; }
.oa-pager .pg-size { height: 30px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 13px; padding: 0 6px; cursor: pointer; }
@media (max-width: 640px) {
  .oa-pager { justify-content: center; padding: 10px 8px; gap: 5px; font-size: 12px; flex-wrap: nowrap; }
  .oa-pager .pg-total { margin-right: 0; white-space: nowrap; }
  .oa-pager .pg-btn { min-width: 26px; height: 26px; padding: 0 5px; font-size: 13px; }
  .oa-pager .pg-input { width: 38px; height: 26px; font-size: 12px; }
  .oa-pager .pg-pages { min-width: 34px; white-space: nowrap; }
  .oa-pager .pg-size { height: 26px; font-size: 12px; padding: 0 4px; }
}

/* ===== 十九、单据详情弹窗统一布局（双栏骨架 + 卡片化分组 + 审批流程时间线） =====
   PC：左栏数据卡片区 + 右栏流程面板（284px）
   窄屏≤900px：上下堆叠；字段改「标题左、值右」一行式
   手机≤640px：全屏弹窗 + 底部固定操作栏 + 表格卡片化（.mob-list）
   新模块详情弹窗直接挂 .dvc 系列类即可，无需重复写样式 */
.dvc-modal { max-height: calc(100vh - 40px); }  /* 桌面端限高防低视口垂直溢出（2026-10-17），手机段全屏规则覆盖 */
.dvc { display: flex; flex-direction: column; min-height: 0; }
.dvc-head { padding: 16px 22px 13px; border-bottom: 1px solid var(--border); position: relative; }
.dvc-head .t { font-size: 16px; font-weight: 700; color: var(--title); padding-right: 48px; }
.dvc-head .sub { font-size: 12px; color: var(--text-sub); margin-top: 4px; }
.dvc-close { position: absolute; right: 18px; top: 12px; width: 32px; height: 32px; border-radius: 9px;
  border: 1.5px solid var(--bad); background: var(--bad); color: #fff;
  font-size: 18px; cursor: pointer; line-height: 1; transition: all .18s; }
.dvc-close:hover { filter: brightness(1.12); }
.dvc-head-btn { display: none; position: absolute; right: 58px; top: 12px; height: 32px;
  padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-sub); font-size: 12px; cursor: pointer; }
.dvc-body { display: flex; min-height: 0; flex: 1; overflow: hidden; }
.dvc-left { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px; }
.dvc-right { width: 284px; flex: 0 0 284px; background: var(--dvc-panel);
  border-left: 1px solid var(--border); overflow-y: auto; padding: 16px 14px 20px; }
.dvc-foot { border-top: 1px solid var(--border); padding: 10px 20px;
  display: flex; align-items: center; gap: 12px; }
.dvc-foot .hint { font-size: 11.5px; color: var(--text-sub); margin-right: auto; }

/* 卡片化分组：详情块一律包 .dvc-card（卡片底随主题） */
.dvc-card { background: var(--dvc-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 16px; }
.dvc-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dvc-card-h::before { content: ""; width: 3px; height: 12px; border-radius: 2px;
  background: var(--grad); flex-shrink: 0; }
.dvc-card-h .t { font-size: 13px; font-weight: 700; color: var(--title); }
.dvc-card-h .extra { margin-left: auto; font-size: 11.5px; color: var(--text-sub); }

/* 审批流程时间线（右栏面板专用；ok=已通过 now=当前 wait=未开始） */
.flow-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.flow-head .t { font-size: 13.5px; font-weight: 700; color: var(--title); }
.flow-head .sum { font-size: 11px; color: var(--primary); background: var(--primary-soft);
  border-radius: 999px; padding: 3px 10px; }
.flow-node { display: flex; gap: 9px; }
.flow-rail { width: 22px; display: flex; flex-direction: column; align-items: center; }
.flow-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; border: 1px solid; }
.flow-node.ok .flow-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.flow-node.bad .flow-dot { background: var(--bad); border-color: var(--bad); color: #fff; }
.flow-node.now .flow-dot { background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 0 0 4px var(--ring); }
.flow-node.wait .flow-dot { background: transparent; border-color: var(--text-sub); color: var(--text-sub); }
.flow-line { width: 2px; flex: 1; min-height: 10px; background: var(--border); }
/* 最后一个节点是流程终点：不画下方线段，避免悬空线头 */
.flow-node:last-of-type .flow-line { display: none; }
.flow-node.ok .flow-line { background: var(--ok); opacity: .35; }
.flow-node.bad .flow-line { background: var(--bad); opacity: .35; }
.flow-card { flex: 1; min-width: 0; background: var(--dvc-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; }
.flow-node.now .flow-card { border-color: var(--primary); box-shadow: 0 0 10px var(--ring); }
.flow-lv { font-size: 12px; font-weight: 700; color: var(--title); display: flex;
  align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-tag { font-size: 10px; font-weight: 400; color: var(--text-sub); background: var(--primary-soft);
  border-radius: 4px; padding: 1px 6px; }
.flow-user { font-size: 12px; color: var(--text); margin-top: 5px; display: flex;
  align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.flow-time { font-size: 10.5px; color: var(--text-sub); margin-top: 4px; }
.flow-cmt { font-size: 11px; color: var(--text-sub); margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed var(--border); }
.flow-cmt b { color: var(--text); font-weight: 500; }
.flow-end { text-align: center; font-size: 10.5px; color: var(--text-sub); padding-top: 4px; margin: 0; }
/* 流程节点状态徽章（done 已通过 / doing 进行中 / bad 已驳回 / waiting 等待） */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 3px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.pill.waiting { color: var(--text-sub); background: var(--border); border-color: transparent; }
.pill.doing { color: var(--warn); background: var(--warn-soft); border-color: rgba(217,119,6,.25); }
.pill.done { color: var(--ok); background: var(--ok-soft); border-color: rgba(46,194,126,.3); }
.pill.bad { color: var(--bad); background: var(--bad-soft); border-color: rgba(240,80,90,.3); }
/* 中性描边胶囊（2026-10-08 用户定：枚举值/中性信息统一用它，如发票类型/结算方式/合同模板） */
.pill.plain { color: var(--text); background: var(--card); border-color: var(--border); }
/* 附件/票据存证链接芯片（2026-10-11 公共化：业务详情与审批中心共用的文件查看链接——
   申请附件/发票存证/收据照片，替代各页自造 .inv-chip link；
   .plain 变体=不可点击的纯文本票据信息条（发票号/收票方/金额）） */
.doc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; border: 1px solid var(--border);
  background: var(--primary-soft); color: var(--primary); cursor: pointer;
  text-decoration: none; margin: 2px 6px 2px 0; white-space: nowrap; }
.doc-chip:hover { border-color: var(--primary); }
.doc-chip.plain { background: var(--card); color: var(--text); cursor: default; }
.doc-chip.plain:hover { border-color: var(--border); }
/* 卡片颜色分区（2026-10-08 用户定：详情卡片按业务语义给标题竖条配色，一眼识别区块；
   蓝=基本信息 紫=条款约定 青=票据台账 绿=明细金额 橙=付款/审批 红=签署证据） */
.dvc-card.c-blue .dvc-card-h::before { background: #3b6bf0; }
.dvc-card.c-green .dvc-card-h::before { background: #1fa36b; }
.dvc-card.c-cyan .dvc-card-h::before { background: #14b8a6; }
.dvc-card.c-orange .dvc-card-h::before { background: #e8890c; }
.dvc-card.c-purple .dvc-card-h::before { background: #8a5ae0; }
.dvc-card.c-red .dvc-card-h::before { background: #dd4a5c; }

/* 直达内嵌模式（2026-10-08 代提草稿通知直达链路）：URL 带 ?embed=1 且有定位参数时
   body 加 embed-mode，隐藏页面主体只显示弹窗；白名单=全站弹窗 .modal-mask + 通用浮层
   （toast/图片灯箱/加载指示/长标题气泡/ⓘ 悬浮注释卡片）。approval.html 页面级白名单与本规则同口径。 */
body.embed-mode > *:not(.modal-mask):not(#toast):not(#embedLoading):not(.img-lb-mask):not(.lp-tip):not(.oa-hint-tip) { display: none !important; }
/* 可点击文字链接：四页公共（2026-10-02 收编，此前 shift/approval 无 .link 定义，a 标签落入浏览器默认深蓝，深色背景看不清） */
.link { color: var(--primary); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
/* 现场照「查看现场照」链接：比主题蓝更醒目的青色，深色底亮青、浅色底深青（2026-10-02 用户反馈蓝色看不清） */
.photo-link { color: #0e7490; }
.photo-link:hover { color: #0891b2; }
[data-theme="dark"] .photo-link { color: #22d3ee; }
[data-theme="dark"] .photo-link:hover { color: #67e8f9; }

/* 发票/收据文字 chip：点击直接看存证（.link 修饰表示可点），不挂缩略图与 PDF 徽标 */
.inv-chip { display: inline-block; background: var(--primary-soft); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 12px; color: var(--title);
  vertical-align: middle; text-decoration: none; }
.inv-chip.link { cursor: pointer; color: var(--primary); border-color: rgba(76,125,255,.35); }
.inv-chip.link:hover { color: var(--primary-hover); border-color: var(--primary); background: var(--ring); }
/* 表格内「查看存证」小链接（替代缩略图列） */
.src-link { color: var(--primary); cursor: pointer; font-size: 12px; text-decoration: none; }
.src-link:hover { color: var(--primary-hover); text-decoration: underline; }
/* 可点击票据文字链接（2026-09-24）：iOS 微信/钉钉 WKWebView 只对 cursor:pointer 或 <a>
   元素合成 click 事件，缺失则点击无反应（“点不开图片/PDF”根因）；全站统一在此兜底 */
.inv-chip.link { cursor: pointer; }
.inv-chip.link:hover { color: var(--primary); }

/* 卡片内嵌元素收敛：详情网格/表格/时间线在卡片里不带外边距，操作区按钮行贴底 */
.dvc-card .detail-grid { margin-bottom: 0; }
.dvc-card .detail-table { margin-top: 0; }
/* 弹窗内表格：列宽锁定（由表头定死）+ 长文本长串在列内断行，内容再多不撑破布局 */
.dvc-card .detail-table table { table-layout: fixed; width: 100%; }
.dvc-card .detail-table th, .dvc-card .detail-table td { overflow-wrap: anywhere; word-break: break-word; }
.dvc-card .timeline { margin-top: 0; }
.dvc-actions .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 0; }
/* 审批意见框（公共，2026-10-02 从 approval/biz 页面级收编）：60px/13px/圆角 8px/主题变量边框背景，
   报销/审批中心/劳务/值班四页操作卡共用 */
.dvc-actions textarea { width: 100%; min-height: 60px; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; background: var(--bg);
  color: var(--text); outline: none; resize: vertical; box-sizing: border-box;
  margin-bottom: 10px; }
.dvc-actions textarea:focus { border-color: var(--primary); }
/* 审批操作卡片说明行（公共，原 approval.html 页面级，2026-10-02 提升供各审批详情复用） */
.agree-note { font-size: 12px; color: var(--text-sub); margin: 2px 0 8px; }
/* 驳回原因红条 + 金额小字说明（公共，2026-10-02 从 approval/biz 页面级收编，三审批页共用） */
.reject-reason { background: var(--bad-soft); color: var(--bad); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; margin-top: 8px; }
.money-note { font-size: 11px; color: var(--text-sub); font-weight: 400; margin-left: 4px; }

/* 手机端审批进度抽屉（≤640px 才显示）：头部唤出按钮 + 抽屉收起按钮 */
.flow-head-btn { display: none; }
.sheet-close { display: none; }

/* 详情卡片左右分栏（≤900px：上下堆叠，body 成为唯一滚动容器）——
   left 不再嵌套 overflow（嵌套滚动容器在 iOS WebView 触屏滚动失效高发，
   2026-10-03 用户反馈「审批操作卡片溢出不能上下滑」修复） */
@media (max-width: 900px) {
  .dvc-body { flex-direction: column; overflow: auto; -webkit-overflow-scrolling: touch; }
  .dvc-left { flex: none; overflow-y: visible; }
  .dvc-right { width: 100%; flex: none; border-left: none; border-top: 1px solid var(--border); }
}

/* ===== 数据标题公共样式已迁至 oa-doc.css（2026-09-18）：列表页引入 oa-doc.css 即可，此处不再重复 ===== */

/* 手机端三规则：全屏弹窗 + 底部固定操作栏 + 表格卡片化 */
@media (max-width: 640px) {
  .dvc-modal { width: 100vw !important; max-width: none !important;
    height: 100vh; height: 100dvh;   /* 老 WebView 不支持 dvh 时 100vh 兑底（高度失效会导致卡片溢出且不可滚动，2026-10-03） */
    max-height: none !important; border-radius: 0 !important; border: none !important; }
  .dvc-head-btn { display: inline-flex; align-items: center; }
  .dvc-head { position: sticky; top: 0; z-index: 5; background: var(--card); }
  .dvc-head .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* 手机端长标题单行截断（2026-09-28） */
  .dvc-left { padding: 12px 12px 24px; gap: 10px; }   /* 操作卡片已回归文档流（2026-10-02），无需底部大预留 */
  .dvc-card { padding: 11px 12px; border-radius: 10px; }
  /* 手机端：审批进度收起为底部抽屉（默认隐藏，悬浮按钮唤出）
     box-sizing:border-box 防 width:100%+padding 溢出（approval.html 无全局 border-box，2026-09-23） */
  .dvc-right { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
    box-sizing: border-box;
    transform: translateY(105%); visibility: hidden;
    transition: transform .28s ease, visibility .28s;
    max-height: 64vh; overflow: auto; border-radius: 16px 16px 0 0;
    padding: 10px 14px 20px; box-shadow: 0 -8px 24px rgba(8, 14, 30, .28); }
  .dvc-right.sheet-open { transform: translateY(0); visibility: visible; }
  /* 头部唤出按钮：放 sticky 头部栏（非数据区，永不挡内容），带状态圆点 */
  .flow-head-btn { display: inline-flex; position: absolute; right: 104px; top: 14px; height: 28px;
    align-items: center; gap: 4px; padding: 0 9px; border-radius: 8px;
    border: 1px solid var(--border); background: transparent; color: var(--text-sub);
    font-size: 13px; cursor: pointer; }
  .flow-head-btn .dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
  .flow-head-btn .dot.ok { background: #22c55e; }
  .flow-head-btn .dot.doing { background: #f59e0b; }
  .flow-head-btn .dot.bad { background: #ef4444; }
  /* 有唤出按钮时标题避让头部按钮区，避免长标题被压住 */
  .dvc-head:has(.flow-head-btn) .t { padding-right: 150px; }
  .sheet-close { display: inline-block; margin-left: auto; border: none; background: none;
    color: var(--primary); font-size: 12px; cursor: pointer; padding: 2px 6px; }
  .dvc-foot { display: none; }
  /* 在位编辑（2026-10-02 用户要求）：操作卡片回归文档流，跟随详情滚动至末尾可见，
     不再悬浮遮挡上方档案信息（原 fixed 底部悬浮方案弃用） */
  .dvc-actions { position: static; left: auto; right: auto; bottom: auto; z-index: auto;
    border-radius: 16px; padding: 12px 14px; margin: 0;
    box-shadow: 0 8px 24px rgba(8, 14, 30, .18); }
  /* 意见框手机端不再覆盖 min-height/字号/圆角：全端统一公共 60px/13px/8px（2026-10-02） */
  .dvc-actions .modal-actions { display: flex; gap: 10px; }
  .dvc-actions .btn { height: 40px; font-size: 14.5px; flex: 1; }
  /* 手机端流程节点：长徽章（随薪待发/已并入工资等）允许换行不撑破抽屉；时间/结尾长文断词 */
  .flow-user .pill { white-space: normal; line-height: 1.4; max-width: 100%; }
  .flow-time { overflow-wrap: anywhere; }
  .flow-end { overflow-wrap: anywhere; }
  /* 表格 → 卡片列表：表格容器挂 .mob-list，单元格需带 data-label（表头文字） */
  .mob-list table, .mob-list tbody, .mob-list tr, .mob-list td, .mob-list th { display: block; }
  .mob-list thead { display: none; }
  .mob-list tr { border: 1px solid var(--border); border-radius: 10px;
    background: var(--dvc-card); padding: 8px 12px; margin-bottom: 8px; }
  .mob-list td { display: flex; align-items: flex-start;
    gap: 10px; border: none; padding: 5px 0; font-size: 12.5px; }
  .mob-list td::before { content: attr(data-label); color: var(--text-sub); flex-shrink: 0;
    width: 5.5em; text-align: left; }
  .mob-list td[style*="text-align"] { text-align: left; }
  /* 关键对齐修复：全局样式对首列/末列有 14px 左右补白，卡片化后必须归零，
     否则「明细项目/发票号码/卡片头」比其余字段行多 14px，label 列纵向不齐 */
  .mob-list td:first-child { padding-left: 0; }
  .mob-list td:last-child { padding-right: 0; }
  /* 卡片防撑破（2026-10-03）：td 值区 min-width 归零，覆盖行内 nowrap（卡片头/操作列），
     否则长姓名+日期+班次不换行，卡片固有宽>容器产生内部横向溢出（云端实测溢出 35px） */
  .mob-list td { min-width: 0; }
  .mob-list td > * { min-width: 0; }
  .mob-list td.no-lb { white-space: normal !important; }
  .mob-list td.no-lb .doc-title { white-space: normal; }
  .mob-list td.no-lb .doc-title::after { flex-shrink: 0; }
  /* 手机端「查看存证」链接保持可点；存证列已改为文字链接，不再有缩略图 */
  .mob-list .src-link { display: inline-block; padding: 2px 0; }
  /* 列表页表格卡片化：首列（no-lb）变卡片头部，其余「标签:值」行，空态居中 */
  .mob-list tr { box-shadow: 0 2px 8px rgba(8, 14, 30, .05); }
  .mob-list td.no-lb { display: block; }
  .mob-list td.no-lb::before { display: none; }
  .mob-list td[data-col="amount"] .amount { font-size: 16px; }
  .mob-list td.empty { display: block; text-align: center; padding: 26px 12px; }
  .mob-list .mini-btn { padding: 7px 12px; border-radius: 8px; }
}

/* ===== 单据详情弹窗：合计金额发光字体（PC 与手机通用；2026-09-22 用户反馈光晕太大，收为单层微光） ===== */
#docTotal { color: #ffb45c; font-weight: 800; font-size: 17px;
  text-shadow: 0 0 3px rgba(255, 170, 60, .35); }

/* ===== 二十、单据详情字段网格一行式（2026-09-18 用户定稿：全站详情页统一模板） =====
   布局：标签定宽 auto + 值 1fr 紧跟标签左对齐，一行一字段，中间无大片空白；
   标题加粗（.detail-grid .k 见上方 383 行）；PC/手机全窗口一行式；
   长文本 .v.oneline 自动换行完整显示（2026-10-11 用户定：PC/手机全端换行不省略）；
   状态行 .v.vrow 徽章+说明同行左对齐；
   全宽字段 .full 独占整行；字段密度差异页（finance/commission/salary_external）用 .modal-box .detail-grid 高特异性覆盖 */
.detail-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; font-size: 13px; line-height: 1.8; margin-bottom: 14px; }
.detail-grid .v { text-align: left; word-break: break-all; }
.detail-grid .v.oneline { white-space: normal; overflow: visible; }
.detail-grid .v.vrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.detail-grid .tip { font-size: 12px; color: var(--text-sub); white-space: nowrap; }
.detail-grid .full { grid-column: 1 / -1; text-align: left; }
/* 手机端：tip 说明小字允许换行（如结算方式的长说明），否则 nowrap 撑破值列溢出（2026-10-03） */
@media (max-width: 640px) {
  .detail-grid .tip { white-space: normal; }
}

/* ===== 审批中心基本信息徽章美化（2026-09-25）=====
   状态徽章（圆点+彩底）/业务模块徽章（色块标签）/申请人头像圆；
   颜色用 rgba 底+固定色文字，浅色/深色主题均协调 */
.basic-st-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.8; }
.basic-st-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.basic-st-badge.st-pending { background: rgba(232,137,12,.12); color: #e8890c; }
.basic-st-badge.st-waitpay { background: rgba(59,107,240,.1); color: #3b6bf0; }
.basic-st-badge.st-paid { background: rgba(31,163,107,.1); color: #1fa36b; }
.basic-st-badge.st-rejected { background: rgba(221,74,92,.1); color: #dd4a5c; }
.basic-st-badge.st-voided { background: rgba(139,148,170,.13); color: #70788d; }
.basic-st-badge.st-draft { background: rgba(139,148,170,.14); color: #8b94aa; }
.basic-st-badge.st-salary { background: rgba(138,90,224,.1); color: #8a5ae0; }
/* 班次胶囊（2026-10-03 用户定：白/中/夜三班次分开做胶囊，连班多值各自独立显示，
   配色与 shift.html 台账 .pill 一致：白=蓝 中=橙 夜=红） */
.shift-pill { display: inline-flex; align-items: center; padding: 2px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.8; }
.shift-pill.shift-day { background: var(--primary-soft); color: var(--primary); }
.shift-pill.shift-mid { background: var(--warn-soft); color: var(--warn); }
.shift-pill.shift-night { background: var(--bad-soft); color: var(--bad); }
.shift-pill.shift-unknown { background: rgba(139,148,170,.14); color: #8b94aa; }
.basic-mod-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
  border-radius: 7px; font-size: 12px; font-weight: 600; }
.basic-mod-badge::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; flex: none; }
.basic-mod-badge.m-expense { background: rgba(59,107,240,.09); color: #3b6bf0; }
.basic-mod-badge.m-income { background: rgba(31,163,107,.1); color: #1fa36b; }
/* 支出类型徽章（2026-09-25）：青绿色块，与业务模块徽章同结构不同色；
   字号与人名徽章一致 12.5px，颜色用亮青绿（2026-09-25 用户反馈调整） */
.basic-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
  border-radius: 7px; font-size: 12.5px; font-weight: 600; background: rgba(20,184,166,.13); color: #14b8a6; }
.basic-type-badge::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; flex: none; }
/* 申请人一体徽章（2026-09-25）：头像圆嵌左 + 人名包胶囊，浅蓝底圆角胶囊 */
.basic-user-badge { display: inline-flex; align-items: center; padding: 2px 11px 2px 3px; gap: 7px;
  border-radius: 999px; background: rgba(76,125,255,.1); border: 1px solid rgba(76,125,255,.28); }
.basic-user-badge .basic-avatar { width: 20px; height: 20px; font-size: 11px; }
.basic-user-badge .name { font-size: 12.5px; font-weight: 600; color: var(--primary); line-height: 1.4; }
.basic-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--grad, linear-gradient(135deg,#6c8cff,#4c7dff)); flex: none; }
.basic-extra-pill { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  border: 1px solid; line-height: 1.6; display: inline-block; }
.basic-extra-pill.p-ext { background: #f3e8ff; color: #7c3aed; border-color: #ddd0f2; }
.basic-extra-pill.p-staff { background: var(--primary-soft); color: var(--primary); border-color: var(--border); }
.basic-extra-pill.p-ok { background: #e6f7ef; color: #16a34a; border-color: #c9ecd9; }

/* ===== 审批收集字段修订留痕公共样式（2026-10-09 从 approval.html 上收全局，
   任何模块页时间线/字段行通用）===== */
/* 「修订/填写/清空」小徽章：字段值在审批中被修订/首填/清空，详情看审批进度 */
.fill-badge { display: inline-block; font-size: 10px; line-height: 1; padding: 2px 5px;
  border-radius: 8px; color: var(--warn); background: var(--warn-soft);
  border: 1px solid rgba(217,119,6,.25); margin-left: 6px; vertical-align: middle; }
/* 收集值改动展示：旧值灰 → 新值橙加粗（一眼看出改了什么，带数值） */
.fb-old { color: var(--text-sub); }
.fb-ar { color: var(--text-sub); margin: 0 4px; }
.fb-new { color: var(--warn); font-weight: 700; }
/* 清空动作：被后级清空的值画删除线 */
.fb-strike { text-decoration: line-through; }
/* 时间线字段变更记录：谁改、何时、原值→新值 */
.flow-fills { margin-top: 6px; }
.flow-fill { display: inline-block; font-size: 11.5px; line-height: 1.7; color: var(--warn);
  background: var(--warn-soft); border: 1px solid rgba(217,119,6,.2); border-radius: 6px;
  padding: 1px 8px; margin: 2px 6px 0 0; }

/* ===== 二十一、收条批量弹窗公共组件（labor-settle / labor-reimburse 共用，2026-09-21） =====
   标题区：主标题 + 副说明 + 「处理月份」选择栏（带统计摘要）；
   操作引导：三步卡片（勾选批次 → 打印 → 拍照上传），替换整段说明文字；
   上传区：按钮行 + 文件状态胶囊（未选/已选/上传中三态） */
.m-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.m-head .m-sub { font-size: 12.5px; color: var(--text-sub); font-weight: 400; }
.m-month-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.m-month-lb { font-size: 13px; font-weight: 600; color: var(--title); }
.m-month-bar input[type="month"] { height: 30px; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 8px; font-size: 13px; background: var(--bg); color: var(--text); outline: none; }
.m-month-bar .m-stat { margin-left: auto; font-size: 12.5px; color: var(--text-sub); }
.m-month-bar .m-stat b { color: var(--title); }
.m-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-step { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-soft);
  border: 1px solid rgba(76, 125, 255, .25); border-radius: 10px; padding: 10px 12px; }
.g-step .g-n { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--grad); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.g-step b { font-size: 13px; color: var(--title); }
.g-step .g-d { font-size: 12px; color: var(--text-sub); line-height: 1.6; margin-top: 2px; }
.m-upbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-file-tip { font-size: 12.5px; color: var(--text-sub); }
.m-file-tip.on { color: var(--primary); font-weight: 600; }
.m-file-tip.up { color: var(--warn); font-weight: 600; }
.m-cnt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--num); }
@media (max-width: 640px) {
  .m-guide { grid-template-columns: 1fr; }
  .m-month-bar .m-stat { margin-left: 0; width: 100%; }
}

/* ===== 二十二、发起申请弹窗四色分区卡片式（2026-09-23 全站推广自报销申请） =====
   结构：.modal-box.dc > .dc-head（标题+关闭）> .dc-body > .dc-main（分区卡片流）> .dc-foot（底部操作栏）
   分区：.dc-sec/.dc-panel + tone-{blue|green|purple|gold} 四色微染；
   主题：浅色主题变量驱动自动适配；dark 主题才启用深色科技全套（渐变底+发光描边+深色控件）；
   宽度：各页面内联 style 指定（biz 报销 1000px 左右分栏，其余模块 560~760px 单列） */
/* 布局（不分主题） */
.modal-box.dc { padding: 0; overflow: hidden; border-radius: 14px;
  max-height: calc(100vh - 24px); }  /* 覆盖页面级 .modal-box 的 max-height（如 84vh）：
    dc 弹窗由内部 dc-body 自行滚动，外层限高会把底部 dc-foot 操作栏裁出屏幕
    （2026-10-04 用户报：支出合同新建弹窗无保存按钮） */
.modal-box.dc .dc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; }
.modal-box.dc .dc-tt { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.modal-box.dc .dc-tt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.modal-box.dc .dc-x { width: 32px; height: 32px; border-radius: 9px; font-size: 18px; cursor: pointer; border: 1.5px solid; transition: all .18s; }
.modal-box.dc .dc-body { display: flex; gap: 14px; padding: 16px; align-items: flex-start; max-height: calc(92vh - 124px); overflow-y: auto; }
.modal-box.dc .dc-main { flex: 1.55; display: flex; flex-direction: column; gap: 14px; min-width: 0; order: 2; }
.modal-box.dc .dc-side { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 270px; position: sticky; top: 16px; order: 1; }
.modal-box.dc .dc-sec, .modal-box.dc .dc-panel { border-radius: 12px; padding: 14px 16px; border: 1px solid; }
.modal-box.dc .dc-sh { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid; }
.modal-box.dc .dc-ic { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; font-style: normal; font-weight: 800; }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop { display: block; border: 2px dashed; border-radius: 12px; padding: 16px 12px; text-align: center;
  cursor: pointer; transition: all .2s; }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-i { width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 10px; font-size: 17px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-t { font-size: 13px; font-weight: 700; }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-s { font-size: 11px; margin-top: 3px; }
.modal-box.dc .dc-foot { margin-top: 0; padding: 12px 22px; border-top: 1px solid; }
.modal-box.dc .dc-foot .btn-primary { font-weight: 700; }

/* 浅色主题配色（商务蓝/极简轻灰/金色典雅，全站变量驱动自动适配） */
.modal-box.dc { background: var(--card); box-shadow: 0 24px 80px rgba(16,24,40,.25), 0 0 0 1px var(--border); }
.modal-box.dc .dc-head { background: var(--primary-soft); border-bottom-color: var(--border); }
.modal-box.dc .dc-tt { color: var(--title); }
.modal-box.dc .dc-tt::before { background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.modal-box.dc .dc-x { background: var(--bad); border-color: var(--bad); color: #fff; }
.modal-box.dc .dc-x:hover { filter: brightness(1.12); }
.modal-box.dc .dc-sec, .modal-box.dc .dc-panel { background: var(--card); border-color: var(--border);
  box-shadow: 0 2px 12px var(--card-shadow); }
.modal-box.dc .dc-sh { color: var(--title); border-bottom-color: var(--border); }
.modal-box.dc .dc-ic { color: #fff; }
.modal-box.dc .dc-ic.c1 { background: var(--grad); }
.modal-box.dc .dc-ic.c2 { background: var(--warn); }
.modal-box.dc .dc-ic.c3 { background: var(--ok); }
.modal-box.dc .dc-ic.c4 { background: #8b5cf6; }
.modal-box.dc .dc-ic.c5 { background: #f43f5e; }   /* 危险动作红（2026-10-02 打卡作废弹窗） */
.modal-box.dc .dc-ic.c6 { background: #f59e0b; }   /* 橙色（2026-10-04 商务条款区块） */
.modal-box.dc .dc-sec.tone-blue { background: var(--primary-soft); border-color: var(--ring); }
.modal-box.dc .dc-sec.tone-blue .dc-sh { color: var(--primary); }
.modal-box.dc .dc-sec.tone-green { background: var(--ok-soft); border-color: rgba(46,194,126,.22); }
.modal-box.dc .dc-sec.tone-green .dc-sh { color: var(--ok); }
.modal-box.dc .dc-sec.tone-purple { background: rgba(139,92,246,.06); border-color: rgba(139,92,246,.2); }
.modal-box.dc .dc-sec.tone-purple .dc-sh { color: #7c3aed; }
.modal-box.dc .dc-panel.tone-gold { background: var(--warn-soft); border-color: rgba(217,119,6,.2); }
.modal-box.dc .dc-panel.tone-gold .dc-sh { color: var(--warn); }
.modal-box.dc .dc-sec.tone-red { background: var(--bad-soft); border-color: rgba(244,63,94,.22); }
.modal-box.dc .dc-sec.tone-red .dc-sh { color: var(--bad); }
.modal-box.dc .dc-sec.tone-orange { background: var(--warn-soft); border-color: rgba(217,119,6,.2); }
.modal-box.dc .dc-sec.tone-orange .dc-sh { color: var(--warn); }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: var(--card); }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop:hover, :is(.modal-box.dc, .modal-box.dvc) .dc-drop.over { border-color: var(--primary);
  background: var(--primary-soft); box-shadow: 0 0 16px var(--ring); }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-i { background: var(--grad); color: #fff; box-shadow: 0 4px 12px var(--hover-shadow); }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-t { color: var(--primary); }
:is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-s { color: var(--text-sub); }
.modal-box.dc .line-total b { color: var(--num); }
.modal-box.dc .dc-foot { background: var(--card); border-top-color: var(--border); }

/* 深色科技配色（仅 dark 主题） */
[data-theme="dark"] .modal-box.dc { background: linear-gradient(165deg, #0d1428 0%, #101b3a 55%, #0b1124 100%);
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(56,189,248,.16); }
[data-theme="dark"] .modal-box.dc .dc-head { background: linear-gradient(90deg, rgba(56,189,248,.16), rgba(56,189,248,.05) 55%, transparent);
  border-bottom-color: rgba(56,189,248,.16); }
[data-theme="dark"] .modal-box.dc .dc-tt { color: #7dd3fc; }
[data-theme="dark"] .modal-box.dc .dc-tt::before { background: #38bdf8; box-shadow: 0 0 12px #38bdf8; }
[data-theme="dark"] .modal-box.dc .dc-x { background: var(--bad); border-color: var(--bad); color: #fff; }
[data-theme="dark"] .modal-box.dc .dc-x:hover { filter: brightness(1.15); }
[data-theme="dark"] .modal-box.dc .dc-sec, [data-theme="dark"] .modal-box.dc .dc-panel { background: rgba(22,30,52,.85);
  border-color: rgba(56,189,248,.14); box-shadow: 0 2px 12px rgba(56,189,248,.05), inset 0 1px 0 rgba(125,211,252,.06); }
[data-theme="dark"] .modal-box.dc .dc-sh { color: #7dd3fc; border-bottom-color: rgba(56,189,248,.12); }
[data-theme="dark"] .modal-box.dc .dc-ic { color: #04121f; }
[data-theme="dark"] .modal-box.dc .dc-ic.c1 { background: linear-gradient(135deg, #38bdf8, #7dd3fc); box-shadow: 0 0 12px rgba(56,189,248,.5); }
[data-theme="dark"] .modal-box.dc .dc-ic.c2 { background: linear-gradient(135deg, #f0c96b, #fbbf24); box-shadow: 0 0 12px rgba(240,201,107,.5); }
[data-theme="dark"] .modal-box.dc .dc-ic.c3 { background: linear-gradient(135deg, #34d399, #6ee7b7); box-shadow: 0 0 12px rgba(52,211,153,.5); }
[data-theme="dark"] .modal-box.dc .dc-ic.c4 { background: linear-gradient(135deg, #a78bfa, #c4b5fd); box-shadow: 0 0 12px rgba(167,139,250,.5); }
[data-theme="dark"] .modal-box.dc .dc-ic.c5 { background: linear-gradient(135deg, #fb7185, #f43f5e); box-shadow: 0 0 12px rgba(244,63,94,.5); }
[data-theme="dark"] .modal-box.dc .dc-sec.tone-blue { background: linear-gradient(160deg, rgba(38,72,140,.42), rgba(22,30,52,.9)); border-color: rgba(96,165,250,.24); }
[data-theme="dark"] .modal-box.dc .dc-sec.tone-blue .dc-sh { color: #93c5fd; border-bottom-color: rgba(96,165,250,.18); }
[data-theme="dark"] .modal-box.dc .dc-sec.tone-green { background: linear-gradient(160deg, rgba(20,88,70,.42), rgba(22,30,52,.9)); border-color: rgba(52,211,153,.24); }
[data-theme="dark"] .modal-box.dc .dc-sec.tone-green .dc-sh { color: #6ee7b7; border-bottom-color: rgba(52,211,153,.18); }
[data-theme="dark"] .modal-box.dc .dc-sec.tone-purple { background: linear-gradient(160deg, rgba(66,48,110,.42), rgba(22,30,52,.9)); border-color: rgba(167,139,250,.24); }
[data-theme="dark"] .modal-box.dc .dc-sec.tone-purple .dc-sh { color: #a78bfa; border-bottom-color: rgba(167,139,250,.18); }
[data-theme="dark"] .modal-box.dc .dc-panel.tone-gold { background: linear-gradient(160deg, rgba(96,72,24,.4), rgba(22,30,52,.9)); border-color: rgba(240,201,107,.26); }
[data-theme="dark"] .modal-box.dc .dc-panel.tone-gold .dc-sh { color: #fbbf24; border-bottom-color: rgba(240,201,107,.18); }
[data-theme="dark"] .modal-box.dc .dc-sec.tone-red { background: linear-gradient(160deg, rgba(100,24,44,.42), rgba(22,30,52,.9)); border-color: rgba(244,63,94,.26); }
[data-theme="dark"] .modal-box.dc .dc-sec.tone-red .dc-sh { color: #fda4af; border-bottom-color: rgba(244,63,94,.18); }
/* 深色表单控件（字段标题沿用全局铁律：var(--title) 加粗，不再覆盖为灰蓝） */
[data-theme="dark"] .modal-box.dc .form-item input, [data-theme="dark"] .modal-box.dc .form-item select,
[data-theme="dark"] .modal-box.dc .form-item textarea, [data-theme="dark"] .modal-box.dc .line-row input {
  border: 1px solid rgba(56,189,248,.2); background: rgba(10,14,26,.65); color: #c8d2e8; }
[data-theme="dark"] .modal-box.dc .form-item input:focus, [data-theme="dark"] .modal-box.dc .form-item select:focus,
[data-theme="dark"] .modal-box.dc .form-item textarea:focus, [data-theme="dark"] .modal-box.dc .line-row input:focus {
  border-color: #38bdf8; background: #0a0e1a; box-shadow: 0 0 0 3px rgba(56,189,248,.15), 0 0 16px rgba(56,189,248,.22); }
[data-theme="dark"] .modal-box.dc ::placeholder { color: #47536b; }
[data-theme="dark"] .modal-box.dc select option { background: #0d1428; color: #c8d2e8; }
[data-theme="dark"] .modal-box.dc .checkbox-inline { color: #6b7a99; }
/* 深色明细行/按钮/合计 */
[data-theme="dark"] .modal-box.dc .line-row .line-del { background: rgba(251,113,133,.14); color: #fb7185; }
[data-theme="dark"] .modal-box.dc .l-amount.edited { border-color: #f0c96b !important; background: rgba(240,201,107,.1) !important; }
[data-theme="dark"] .modal-box.dc .amt-flag { color: #fbbf24; }
[data-theme="dark"] .modal-box.dc .add-line-btn { border-color: rgba(56,189,248,.35); background: rgba(56,189,248,.06); color: #7dd3fc; }
[data-theme="dark"] .modal-box.dc .line-total { color: #6b7a99; }
[data-theme="dark"] .modal-box.dc .line-total b { color: #f0c96b; filter: drop-shadow(0 0 8px rgba(240,201,107,.4)); font-size: 17px; }
/* 深色 OCR 拖拽大框 */
[data-theme="dark"] :is(.modal-box.dc, .modal-box.dvc) .dc-drop { border-color: rgba(56,189,248,.45); background: rgba(56,189,248,.07); }
[data-theme="dark"] :is(.modal-box.dc, .modal-box.dvc) .dc-drop:hover, [data-theme="dark"] :is(.modal-box.dc, .modal-box.dvc) .dc-drop.over { border-color: #38bdf8;
  background: rgba(56,189,248,.14); box-shadow: 0 0 18px rgba(56,189,248,.28); }
[data-theme="dark"] :is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-i { background: linear-gradient(135deg, #38bdf8, #2aa8e0); color: #04121f;
  box-shadow: 0 4px 14px rgba(56,189,248,.4); }
[data-theme="dark"] :is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-t { color: #7dd3fc; }
[data-theme="dark"] :is(.modal-box.dc, .modal-box.dvc) .dc-drop .dd-s { color: #6b7a99; }
[data-theme="dark"] .modal-box.dc .ocr-tip { color: #6b7a99; }
[data-theme="dark"] .modal-box.dc .ocr-tip.has { color: #34d399; }
/* 深色票据摘要/随薪提示条/发票收据卡 */
[data-theme="dark"] .modal-box.dc .ticket-summary { color: #7dd3fc; background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.28); }
[data-theme="dark"] .modal-box.dc .path-ok { background: rgba(46,194,126,.12); border-color: rgba(46,194,126,.35); color: #6ee7b7; }
[data-theme="dark"] .modal-box.dc .path-ok b { color: #6ee7b7; }
[data-theme="dark"] .modal-box.dc .path-warn { background: rgba(232,147,12,.12); border-color: rgba(232,147,12,.35); color: #fbbf24; }
[data-theme="dark"] .modal-box.dc .path-warn b { color: #fbbf24; }
[data-theme="dark"] .modal-box.dc .path-salary { background: rgba(76,125,255,.12); border-color: rgba(76,125,255,.35); color: #93c5fd; }
[data-theme="dark"] .modal-box.dc .path-salary b { color: #93c5fd; }
[data-theme="dark"] .modal-box.dc .inv-row2, [data-theme="dark"] .modal-box.dc .pay-list .inv-row2 { background: rgba(10,14,26,.5); border-color: rgba(56,189,248,.16); }
[data-theme="dark"] .modal-box.dc .inv-row2 .inv-no { color: #c8d2e8; }
[data-theme="dark"] .modal-box.dc .inv-row2 .inv-amt { color: #f0c96b; }
[data-theme="dark"] .modal-box.dc .inv-row2 .iv-sub { color: #6b7a99; }
[data-theme="dark"] .modal-box.dc .receipt-row { background: rgba(10,14,26,.5); border-color: rgba(56,189,248,.16); }
[data-theme="dark"] .modal-box.dc .receipt-row .inv-no { color: #c8d2e8; }
[data-theme="dark"] .modal-box.dc .mini-btn { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.25); color: #7dd3fc; }
[data-theme="dark"] .modal-box.dc .mini-btn:hover { background: rgba(56,189,248,.16); }
[data-theme="dark"] .modal-box.dc .inv-chip { background: rgba(10,14,26,.5); border-color: rgba(56,189,248,.16); color: #c8d2e8; }
/* 深色底部操作栏 */
[data-theme="dark"] .modal-box.dc .dc-foot { background: rgba(10,14,26,.55); border-top-color: rgba(56,189,248,.12); }
[data-theme="dark"] .modal-box.dc .dc-foot .btn-primary { background: linear-gradient(135deg, #38bdf8, #2aa8e0); color: #04121f;
  box-shadow: 0 0 16px rgba(56,189,248,.4); }
[data-theme="dark"] .modal-box.dc .dc-foot .btn-primary:hover { box-shadow: 0 0 26px rgba(56,189,248,.6); }
/* 弹窗内全部次级按钮（上传收据等）与底部按钮同风格，避免深色下突兀 */
[data-theme="dark"] .modal-box.dc .btn-plain { background: rgba(56,189,248,.08);
  border: 1px solid rgba(56,189,248,.25); color: #7dd3fc; }
[data-theme="dark"] .modal-box.dc .btn-plain:hover { background: rgba(56,189,248,.16); }
/* 手机端：分栏降级单列（票据面板置顶，表单下沉——先传票据再填表的工作流；发票行删除×随票据面板到可视区）；
   弹窗改弹性列布局：头部/底部按钮栏固定，中间 dc-body 收缩滚动，避免总高超视口时底部按钮被压出屏幕；
   遮罩统一居中（覆盖个别页面 flex-start+大 padding 的旧布局，防止弹窗超高时按钮沉底） */
@media (max-width: 640px) {
  .modal-mask { align-items: center; justify-content: center; padding: 8px; }
  .modal-box.dc { width: 94vw; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
    display: flex; flex-direction: column; }
  .modal-box.dc .dc-head { flex: none; }
  .modal-box.dc .dc-body { flex: 1 1 auto; min-height: 0; max-height: none; flex-direction: column; }
  .modal-box.dc .dc-main { order: 0; }
  .modal-box.dc .dc-side { order: -1; position: static; min-width: 0; width: 100%; }
  .modal-box.dc .dc-foot { flex: none; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ 权限铁律（2026-09-24）============
   带 data-perm 的元素默认不可见（visibility 保位防跳动），
   权限快照到达后由各页面 applyPerms 授权恢复可见；
   杜绝「页面首帧渲染全部按钮、权限返回后再闪回隐藏」。
   动态渲染的元素插入 DOM 即受本规则保护。 */
[data-perm] { visibility: hidden; }

/* ============ 收集字段表单控件（2026-09-24）============
   审批详情「基本信息」内嵌编辑控件 + 规则页字段预览共用。
   .nf-row/.nf-form 用于独立表单布局；
   基本信息 detail-grid 行内直接放 .nf-input（v 列内 100% 宽）。 */
.nf-form { display: flex; flex-direction: column; gap: 8px; }
.nf-row { display: flex; align-items: center; gap: 10px; }
.nf-label { font-size: 13px; color: var(--text); min-width: 92px; }
/* 必填标识（2026-10-03 去星号改颜色）：必填字段标签橙色加粗 */
.nf-req { color: var(--warn); font-weight: 700; }
.detail-grid .k.nf-req { color: var(--warn); font-weight: 700; }
/* 必填星号（表单 label 内 / 区块标题 .dc-sh 内，2026-09-26 提交节点字段设置用） */
.form-item label .req, .dc-sh .req { color: var(--bad); font-weight: 600; margin-left: 2px; }
.nf-hint { font-size: 11px; color: var(--text-sub); font-weight: 400; margin-left: 4px; }
.nf-val { flex: 1; font-size: 13px; color: var(--text); }
.nf-input { height: 32px; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; font-size: 13px; color: var(--text); background: var(--card);
  box-sizing: border-box; }  /* 2026-10-02：approval.html 无全局 border-box，input 的
    width:100% 按 content-box 会把 padding/border 加到框外右溢 22px（select 浏览器
    默认 border-box 无此问题）；统一声明消除溢出，其他有全局 border-box 的页面无影响 */
.nf-row .nf-input { flex: 1; min-width: 0; }
.detail-grid .v .nf-input { width: 100%; }
/* 发票五字段两列网格（2026-10-11 用户定：发票号独占一行，其余两列省空间；≤640px 单列回卡片式） */
.detail-grid.nfg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.detail-grid.nfg .nfg-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.detail-grid.nfg .nfg-row.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .detail-grid.nfg { grid-template-columns: 1fr; } }
/* 只读输入框（2026-10-11 用户定：发票五字段只读展示，仅 OCR 识别自动填充，不可手动编辑） */
.nf-input[readonly] { background: var(--bg); cursor: default; color: var(--text); }
.nf-input[readonly]:hover:not(:disabled), .nf-input[readonly]:focus:not(:disabled) { border-color: var(--border); box-shadow: none; }

/* ============ 图片弹层预览（2026-09-24）============
   点发票/收据/存证文字在页面内弹层看图（多图可切换），
   关闭只关弹层，不再新开标签页——避免关标签误关整个浏览器。
   弹层由 oa-auth.js 的 openImg/openImgUrl 动态创建。 */
.img-lb-mask { position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; background: rgba(10, 14, 30, .85); }
.img-lb { position: relative; display: flex; flex-direction: column; align-items: center; }
/* 看图容器（2026-09-24）：旋转/缩放/拖动平移在此区域内裁剪展示 */
.img-lb-stage { max-width: 90vw; max-height: 72vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab; }
.img-lb-stage:active { cursor: grabbing; }
.img-lb-img { max-width: 90vw; max-height: 72vh; border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5); background: #fff;
  transform-origin: center center; user-select: none; -webkit-user-drag: none; }
.img-lb-fb { margin-top: 12px; border: 1px solid rgba(255,255,255,.6); background: transparent;
  color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.img-lb-close { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
  border-radius: 50%; border: none; background: #fff; color: #555; font-size: 18px;
  line-height: 30px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
/* 手机端关闭按钮固定在视口右上角（2026-09-24）：图片几乎占满屏宽时
   absolute 偏移会溢出屏幕，改 fixed 并加大触控面积 */
@media (max-width: 640px) {
  .img-lb-close { position: fixed; top: 10px; right: 10px; width: 36px; height: 36px;
    line-height: 34px; font-size: 20px; z-index: 1001; }
}
.img-lb-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px;
  color: #fff; font-size: 14px; flex-wrap: wrap; justify-content: center; }
.img-lb-bar button { cursor: pointer; padding: 4px 12px; border-radius: 6px; font-size: 13px;
  border: 1px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; }
.img-lb-bar button:hover { background: rgba(255, 255, 255, .15); }
.img-lb-pct { min-width: 46px; text-align: center; }
.img-lb-prev, .img-lb-next { cursor: pointer; padding: 3px 12px;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 6px; user-select: none; }
.img-lb-prev:hover, .img-lb-next:hover { background: rgba(255, 255, 255, .15); }

/* ===== 二十三、明细分组展示（2026-09-25 定版：被拆交易单 = 主明细行 + 缩进子项） =====
   产品口径：识别交易单后一条且仅一条主明细，拆分只是构成解释（分次购买明细）；
   落库为主行被替换成多行子项（同 image_id），展示层按 image_id 分组还原：
   ① 被拆组：合成主行（收款方+「已拆 N 项」徽标+凭证总额+「查看」挂原图），背景与其他行一致，
      靠加粗+箭头+徽标区分；② 子项淡黄底缩进（品名+「拆」徽标+数量单位+金额+备注），无查看；
   ③ 未拆交易单一行直显带查看；④ 手工行无链接；⑤ 点主行收起/展开，「查看」a 标签不触发展开。
   渲染函数 window.renderDocLines 在 oa-auth.js；.dl-* 全站共用，页面禁止重复定义 */
tr.dl-grp { cursor: pointer; }
tr.dl-grp .dl-name { font-weight: 700; color: var(--title); }
/* 主行内部元素（箭头/商家名/徽标）垂直居中：flex 放内层 span，td 保持 table-cell 以免破坏表格列宽对齐 */
.dl-name-row { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; max-width: 100%; }
.dl-arrow { display: inline-block; width: 14px; color: var(--primary);
  font-size: 12px; font-weight: 400; text-decoration: none; transition: transform .15s; }
tr.dl-grp.open .dl-arrow { transform: rotate(90deg); }
.dl-badge { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.dl-mny { white-space: nowrap; }   /* 金额列禁止折行（防止“¥100.00”在窄列断成两行） */
tr.dl-sub td { background: var(--warn-soft); border-bottom: 1px dashed var(--border); font-size: 12.5px; }
tr.dl-sub-last td { border-bottom: 1px solid var(--border); }
tr.dl-sub td:first-child { padding-left: 48px; }
tr.dl-sub .dl-sname { color: var(--text-sub); }
tr.dl-sub .dl-sname::before { content: "└ "; color: var(--text-sub); opacity: .6; }
.dl-qty { font-size: 11.5px; color: var(--text-sub); margin-left: 6px; }
.dl-sp { display: inline-flex; align-items: center; font-size: 10.5px; padding: 0 6px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); font-weight: 700; margin-left: 6px; vertical-align: middle;
  border: 1px solid var(--warn); }
tr.dl-plain .dl-pname { font-weight: 600; }
tr.dl-sub.hidden { display: none; }

/* 手机端（≤640px）：卡片化下子项淡黄虚线卡片+缩进；收起隐藏压过 .mob-list tr 的 display:block；
   主行金额改左对齐（卡片内无列概念）；置于文件末尾保证覆盖 mob-list 同源规则 */
@media (max-width: 640px) {
  .mob-list tr.dl-sub { background: var(--warn-soft); border-style: dashed; }
  .mob-list tr.dl-sub td { padding-left: 26px; }
  .mob-list tr.dl-sub.hidden { display: none; }
  /* 子项「└」前缀覆盖了 data-label 标签，但标签槽仍占 5.5em 空白把名称顶到卡片 38% 处；
     收回标签槽宽度，名称紧贴行首靠左（2026-10-07 用户要求） */
  .mob-list tr.dl-sub .dl-sname::before { width: auto; }
  /* 手机端隐藏空「交易单」行（该列永远无值，占行徒增卡片高度；有「查看」链接的行保留）
     （2026-10-07 用户要求，仅手机端） */
  .mob-list td[data-label="交易单"]:empty { display: none; }
}

/* 支出合同商务条款分组折叠（2026-10-08 用户定：详情页字段分组折叠防页面爆炸）
   四组默认收起，点组名展开/收起；组内字段复用 detail-grid 一行式 */
.tpl-grp + .tpl-grp { margin-top: 8px; }
.tpl-grp .grp-t { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px;
  background: var(--primary-soft); color: var(--title); font-size: 13px; font-weight: 600;
  cursor: pointer; user-select: none; }
.tpl-grp .grp-t:hover { filter: brightness(.97); }
.tpl-grp .grp-ar { color: var(--text-sub); font-size: 12px; transition: transform .16s; }
.tpl-grp.open .grp-ar { transform: rotate(90deg); }
.tpl-grp .grp-cnt { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--text-sub); }
.tpl-grp .grp-b { display: none; padding-top: 6px; }
.tpl-grp.open .grp-b { display: block; }

/* 代填标注（2026-09-26 报销先例；2026-10-08 支出合同复用）：
   列表/详情展示「由 XX 代填」紫色小胶囊；表单申请人下拉下方紫色说明文字 */
.proxy-tag { color: #8a5cf6; background: rgba(138, 92, 246, .12);
  padding: 1px 7px; border-radius: 9px; white-space: nowrap; }
.proxy-tip { font-size: 12px; color: #8a5cf6; margin-top: 5px; }

/* 关联合同卡（2026-10-10 审批详情内查看合同参数与签署时间线） */
.cs-snap-body { max-height: 62vh; overflow: auto; padding: 0 18px; }
.cs-snap-body .dvc-card { margin-top: 10px; }
.cs-timeline { margin-top: 10px; padding: 0 4px; }
.cs-timeline .flow-node:last-child .flow-line { display: none; }
.cs-timeline .flow-card { padding-bottom: 6px; }
.cs-evs { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--text-sub); line-height: 1.9; }
.cs-ev-row { display: flex; gap: 8px; align-items: baseline; }
.cs-ev-label { flex-shrink: 0; color: var(--text-main); font-weight: 600; }
.cs-ev-label::after { content: "："; }

/* ===== 支出合同 ⓘ 悬浮（2026-10-10 审批详情/发起付款页共用） =====
   挂在「关联合同」名字旁的 ⓘ 小标识（复用公共 oa-hint.js 组件：悬停弹出/移开隐藏/
   触屏点击切换/点外关闭/防溢出，与全站标题注释 ⓘ 同款；2026-10-10 用户改定：胶囊换 ⓘ 符号）；
   合同卡作为悬浮卡片内容，去掉卡片外框阴影平铺在内（外层 .oa-hint-tip 自带白底圆角阴影）。 */
.oa-hint-tip .dvc-card { margin: 0; border: 0; border-radius: 0;
  box-shadow: none; padding: 0; background: transparent; }
.oa-hint-tip .dvc-card-h { margin-bottom: 8px; }

/* ===== 日期范围选择器（2026-10-18 全站公共化：源自销项发票双月历筛选器 2026-10-16） =====
   JS 组件：oa-datepicker.js（OADateRange.bind）；18 个快捷按钮合并一行横向滚动（2026-10-18 用户定）
   新页面接入：触发器 <div class="dp-trigger" id="xxx"></div> + bind 调用，样式无需自写 */
.dp-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; height: 36px;
  padding: 0 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-size: 13px;
  user-select: none; transition: border-color .15s; white-space: nowrap; }
.dp-trigger:hover { border-color: var(--primary); }
.dp-trigger .sep { color: var(--text-sub); }
.dp-trigger b { color: var(--primary); font-weight: 600; }
.dp-mask { position: fixed; inset: 0; background: rgba(2,6,23,.45); z-index: 600;
  display: none; align-items: flex-start; justify-content: center; }
.dp-mask.show { display: flex; }
.dp-pop { margin-top: 110px; background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45); width: 660px; max-width: 94vw;
  font-size: 13px; overflow: hidden; }
.dp-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.dp-head label { color: var(--text-sub); font-size: 12px; white-space: nowrap; }
.dp-head input { flex: 1; padding: 7px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; color: var(--text); background: var(--bg); min-width: 0; }
.dp-head input.placeholder { color: var(--text-sub); }
.dp-body { padding: 6px 16px 10px; }
.dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-nav .m-title { font-weight: 600; font-size: 14px; min-width: 108px; text-align: center; color: var(--text); }
.dp-nav .m-title.gray { color: var(--text-sub); font-weight: 500; }
.dp-nav .nav-btn { width: 26px; height: 26px; border: none; background: var(--primary-soft);
  color: var(--text); border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1; }
.dp-nav .nav-btn:hover { background: var(--primary); color: #fff; }
.dp-nav .nav-mid { display: flex; align-items: center; gap: 8px; }
.dp-months { display: flex; gap: 24px; }
.dp-month { flex: 1; }
.dp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.dp-week span { text-align: center; color: var(--text-sub); font-size: 11px; padding: 2px 0; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-cell { height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text); }
.dp-cell:hover { background: var(--primary-soft); }
.dp-cell.dim { color: var(--text-sub); opacity: .55; }
.dp-cell.today { box-shadow: inset 0 0 0 1.5px var(--primary); }
.dp-cell.range { background: var(--primary-soft); border-radius: 0; }
.dp-cell.range.end { border-radius: 0 6px 6px 0; }
.dp-cell.range.start { border-radius: 6px 0 0 6px; }
.dp-cell.range.start.end { border-radius: 6px; }
.dp-cell.sel { background: var(--primary); color: #fff; border-radius: 6px; }
.dp-foot { border-top: 1px solid var(--border); padding: 10px 16px 12px; }
/* 快捷日期一行横向滚动（2026-10-18 用户定：近7天等并入同一行，滚动条拖动选择） */
.dp-quick { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
  overflow-x: auto; padding-bottom: 6px; }
.dp-quick::-webkit-scrollbar { height: 6px; }
.dp-quick::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.dp-quick::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.dp-quick button { flex-shrink: 0; padding: 5px 10px; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font-size: 12px; cursor: pointer; }
.dp-quick button:hover { border-color: var(--primary); color: var(--primary); }
.dp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.dp-actions button { padding: 6px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 13px; cursor: pointer; }
.dp-actions .ok { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (max-width: 700px) { .dp-months { flex-direction: column; gap: 10px; }
  .dp-pop { width: 92vw; margin-top: 60px; } }