/* ============================================================
   费用报销管理系统 · 设计系统 v2
   现代化重设计：设计令牌 / 侧边栏 / 顶栏 / 卡片 / 表格 / 表单 /
   模态框 / 流程节点 / 模板网格 / 下载菜单 / 打印单据
   ============================================================ */

:root {
  /* 色板（Apple 风格） */
  --bg: #f5f5f7;
  --panel: #ffffff;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #aeaeb2;
  --line: #e8e8ed;
  --line-2: #f0f0f3;
  --brand: #0071e3;
  --brand-d: #0060c0;
  --brand-soft: #eaf3ff;
  --side-1: #1d1d1f;
  --side-2: #2c2c2e;
  --side-line: rgba(0, 0, 0, .08);
  --ok: #34c759;
  --ok-soft: #e6f8eb;
  --warn: #ff9500;
  --warn-soft: #fff4e5;
  --bad: #ff3b30;
  --bad-soft: #fdecec;
  --info-soft: #eaf3ff;
  --shadow-sm: 0 1px 2px rgba(23, 29, 49, .05), 0 1px 6px rgba(23, 29, 49, .04);
  --shadow: 0 2px 6px rgba(23, 29, 49, .05), 0 10px 30px rgba(23, 29, 49, .07);
  --shadow-lg: 0 8px 24px rgba(23, 29, 49, .12), 0 24px 64px rgba(23, 29, 49, .14);
  --radius: 14px;
  --radius-sm: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
::selection { background: rgba(0, 122, 255, .16); }
a { color: var(--brand); }
.muted { color: var(--ink-soft); font-size: 12px; }

/* ---------- 登录 ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 500px at 80% -10%, rgba(0, 122, 255, .28), transparent 60%),
              radial-gradient(700px 500px at 0% 110%, rgba(22, 160, 106, .16), transparent 55%),
              linear-gradient(150deg, #141927, #1e2643 60%, #232c4e); }
.login-card { width: 392px; background: #fff; border-radius: 20px; padding: 38px 34px; box-shadow: var(--shadow-lg); }
.login-brand { text-align: center; margin-bottom: 22px; }
.logo { width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(180deg, #3478f6, #0a6cf5);
  color: #fff; font-weight: 800; font-size: 27px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
  box-shadow: 0 8px 20px rgba(0, 122, 255, .35); }
.login-brand h1 { font-size: 20px; margin: 6px 0 4px; letter-spacing: .5px; }
.login-brand p { color: var(--ink-soft); font-size: 12px; margin: 0; }
.login-card label { display: block; font-size: 12px; color: var(--ink-soft); margin: 14px 0 6px; font-weight: 600; }
.login-card input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); outline: none; transition: border-color .15s, box-shadow .15s; }
.login-card input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 122, 255, .14); }
.login-card button[type=submit] { width: 100%; margin-top: 20px; padding: 12px; border: none; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand), var(--brand-d)); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 122, 255, .3); transition: .15s; }
.login-card button[type=submit]:hover { filter: brightness(1.06); }
.err { color: var(--bad); font-size: 12px; min-height: 16px; margin-top: 8px; text-align: center; }
.login-hint { margin-top: 18px; font-size: 11px; color: var(--ink-soft); line-height: 1.8; text-align: center;
  background: #f8f9fd; border-radius: var(--radius-sm); padding: 10px 12px; }
.login-hint b { color: var(--brand); }
.sso-btns { margin-top: 18px; }
.sso-sep { display: flex; align-items: center; color: var(--ink-faint); font-size: 11px; margin: 14px 0 10px; }
.sso-sep::before, .sso-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sso-sep span { padding: 0 10px; }
.sso-btn { display: block; text-align: center; text-decoration: none; padding: 11px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: 14px; font-weight: 600; background: #fafbff; transition: .15s; }
.sso-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.fx-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-soft); border: 1px solid #dfe3ff; border-radius: 8px; padding: 3px 6px 3px 8px; font-size: 13px; }
.fx-chip .fxDel { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.fx-chip .fxDel:hover { color: var(--bad); }

/* ---------- 公司主体（多主体切换） ---------- */
.ent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.ent-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fbfcff; display: flex; flex-direction: column; gap: 10px; transition: .15s; }
.ent-card.active { border-color: #b9d5ff; background: linear-gradient(180deg, #f6faff, #fdfeff); box-shadow: 0 2px 10px rgba(0, 122, 255, .08); }
.ent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ent-head b { font-size: 14px; }
.ent-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.ent-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
.ent-fields .ent-wide { grid-column: 1 / -1; }
.ent-fields input { border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font-size: 12.5px; color: var(--ink); background: #fff; outline: none; font-family: inherit; }
.ent-fields input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0, 122, 255, .12); }
.ent-card .entSave { align-self: flex-start; }
/* 单据抬头：报销主体 + 收款账户 */
.dc-info .dc-bank { font-size: 12px; line-height: 1.7; word-break: break-all; }

/* ---------- 布局（Apple 风格浅色侧栏） ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 226px; flex-shrink: 0; display: flex; flex-direction: column;
  background: rgba(246, 246, 248, .86);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  color: #1d1d1f; position: sticky; top: 0; height: 100vh; overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, .08);
}
.side-brand { padding: 18px 16px 14px; font-weight: 700; font-size: 15px; color: #1d1d1f; display: flex; align-items: center; gap: 10px; letter-spacing: .2px; flex-shrink: 0; }
.logo.sm { width: 30px; height: 30px; font-size: 15px; border-radius: 8.5px; background: linear-gradient(180deg, #3478f6, #0a6cf5); box-shadow: 0 1px 3px rgba(0, 100, 240, .35); }
.nav { flex: 1 1 0; min-height: 0; padding: 4px 10px 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9c9ce transparent; }
.nav-group-title { font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #86868b; margin: 16px 12px 5px; user-select: none; }
.nav-group-title:first-child { margin-top: 8px; }
.nav a {
  display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 8px;
  color: #1d1d1f; text-decoration: none; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; position: relative;
  transition: background .12s, color .12s;
}
.nav a:hover { background: rgba(0, 0, 0, .05); }
.nav a.active { background: #007aff; color: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 122, 255, .35); }
.nav a.active:hover { background: #0071ec; }
.nav-ico { display: flex; align-items: center; justify-content: center; width: 18px; flex-shrink: 0; }
.nav-ico svg { width: 13px; height: 13px; opacity: .78; }
.nav a.active .nav-ico svg { opacity: 1; }
/* 彩色 3D 图标（轻量版）：18px 小瓷砖、降低饱和与投影，让菜单文字成为视觉主体 */
.nav-ico3d {
  position: relative; width: 18px; height: 18px; border-radius: 5px; overflow: hidden;
  background: linear-gradient(150deg, var(--g1), var(--g2));
  filter: saturate(.8) brightness(1.03);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .34), inset 0 -2px 2px rgba(0, 0, 0, .08),
    0 1px 2px rgba(0, 0, 0, .09);
  transition: transform .15s, box-shadow .15s;
}
.nav-ico3d::before { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: 1px; height: 36%; border-radius: 4px 4px 8px 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)); pointer-events: none; }
.nav-ico3d svg { position: relative; width: 11px; height: 11px; opacity: .95 !important; filter: drop-shadow(0 1px .5px rgba(0, 0, 0, .16)); }
.nav a:hover .nav-ico3d { transform: translateY(-1px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .42), inset 0 -2px 3px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .14); }
.nav a.active .nav-ico3d { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .5); }
.side-foot { padding: 12px 14px 14px; border-top: 1px solid rgba(0, 0, 0, .08); flex-shrink: 0; background: transparent; }
.side-user { font-size: 12px; color: #6e6e73; margin-bottom: 10px; line-height: 1.6; }
.side-user b { color: #1d1d1f; font-size: 13px; }
.btn-ghost { width: 100%; padding: 8px; border: none; background: rgba(0, 0, 0, .06); color: #1d1d1f; border-radius: 8px; font-size: 13px; font-weight: 500; transition: .13s; }
.btn-ghost:hover { background: rgba(0, 0, 0, .12); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  min-height: 60px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between;
  padding: 10px 26px; position: sticky; top: 0; z-index: 5; gap: 12px;
}
.view-title { font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.top-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.content { padding: 22px 26px 34px; flex: 1; }

/* ---------- 通用组件 ---------- */
.btn {
  padding: 9px 16px; border: none; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-d));
  color: #fff; font-weight: 600; font-size: 13px; transition: .15s; box-shadow: 0 2px 8px rgba(0, 122, 255, .22);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 122, 255, .3); }
.btn:active { transform: none; }
.btn.ok { background: linear-gradient(180deg, #34c759, #2aa74a); box-shadow: 0 2px 8px rgba(52, 199, 89, .28); }
.btn.warn { background: linear-gradient(180deg, #ff9500, #e68600); box-shadow: 0 2px 8px rgba(255, 149, 0, .26); }
.btn.bad { background: linear-gradient(180deg, #ff453a, #e0362c); box-shadow: 0 2px 8px rgba(255, 59, 48, .26); }
.btn.ghost { background: #f1f3f9; color: var(--ink); box-shadow: none; border: 1px solid transparent; }
.btn.ghost:hover { background: #e6e9f4; filter: none; }
.btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.grid { display: grid; gap: 16px; }
.cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: .15s;
}
.stat:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #3478f6, #0a6cf5); border-radius: 0 3px 3px 0; }
.stat .label { color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.stat .value { font-size: 26px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .value.money { color: var(--brand); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table.tbl { width: 100%; min-width: 820px; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
table.tbl th, table.tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-2); font-size: 13px; }
table.tbl th { background: #f8f9fd; color: var(--ink-soft); font-weight: 600; font-size: 12px; letter-spacing: .3px; white-space: nowrap; }
table.tbl td { transition: background .1s; }
table.tbl tr:hover td { background: #f7f9ff; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr.clickable { cursor: pointer; }
.money { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.draft { background: #eef1f8; color: #5b6675; }
.badge.pending { background: var(--warn-soft); color: #b56a14; }
.badge.gm { background: #5a3fb0; color: #fff; }
.badge.finance { background: #e6f6ff; color: #1f7fc4; }
.badge.paid { background: var(--ok-soft); color: #10855a; }
.badge.rejected { background: var(--bad-soft); color: #c7383d; }
.badge.over { background: var(--bad-soft); color: #c7383d; margin-left: 6px; }
.badge.info { background: var(--brand-soft); color: var(--brand); margin-left: 6px; }
.badge.warn { background: var(--warn-soft); color: #a86e12; margin-left: 6px; }
.badge.bad { background: var(--bad-soft); color: #c7383d; margin-left: 6px; }

.empty { text-align: center; color: var(--ink-faint); padding: 56px 20px; }
.empty::before { content: '📭'; display: block; font-size: 34px; margin-bottom: 10px; opacity: .75; }
.section-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: 9px; outline: none; background: #fff; transition: border-color .13s, box-shadow .13s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 122, 255, .12); }

/* ---------- 模态框 ---------- */
.modal-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; }
/* 弹窗打开时锁定背景滚动（打印时解除，避免影响打印单分页） */
body.modal-open { overflow: hidden; }
@media print { body.modal-open { overflow: visible; } }
.modal-mask { position: absolute; inset: 0; background: rgba(16, 21, 38, .55); backdrop-filter: blur(3px); }
.modal-box { position: relative; background: #fff; border-radius: 18px; margin-top: 40px; width: 880px; max-width: 94vw; max-height: 88vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); z-index: 2; }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.modal-close { border: none; background: transparent; font-size: 24px; color: var(--ink-faint); line-height: 1; border-radius: 8px; width: 40px; height: 40px; cursor: pointer; }
.modal-close:hover { background: #f1f3f9; color: var(--ink); }
.modal-body { padding: 22px; overflow-x: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); }
/* 操作键统一靠左；末位（关闭 / 确认类）按钮推到最右，保持退出位习惯 */
.modal-foot .btn:last-child { margin-left: auto; }
.modal-foot .btn { white-space: nowrap; }
/* 全屏工作台模式：报销单编辑弹窗放大到接近整屏，头部 / 底部固定，仅内容区滚动 */
.modal-box.modal-full {
  width: calc(100vw - 36px); max-width: none;
  height: calc(100vh - 36px); max-height: none;
  margin-top: 18px; display: flex; flex-direction: column; overflow: hidden;
}
.modal-box.modal-full .modal-head { flex: 0 0 auto; position: static; padding: 15px 26px; }
.modal-box.modal-full .modal-body { flex: 1 1 auto; overflow: auto; padding: 26px; background: linear-gradient(180deg, #f7f9fd 0%, #fff 220px); }
.modal-box.modal-full .modal-foot { flex: 0 0 auto; position: static; padding: 14px 26px; }

/* ---------- 下载多格式菜单 ---------- */
.dd { position: relative; display: inline-block; }
.dd-caret { font-size: 10px; opacity: .7; }
.dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 30; display: none; animation: ddIn .14s ease;
}
.dd-menu.open { display: block; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes ddInUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* 弹窗底部等场景：菜单向上弹出，避免被滚动容器裁剪 */
.dd.dropup .dd-menu { top: auto; bottom: calc(100% + 8px); animation: ddInUp .14s ease; }
.dd-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); transition: .12s; }
.dd-item:hover { background: var(--brand-soft); }
.dd-item b { font-size: 13px; }
.dd-item span { font-size: 11px; color: var(--ink-soft); }

/* 明细 / 审批时间线 */
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 13px; }
.kv .k { color: var(--ink-soft); }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 10px 0; border-left: 2px solid var(--line); margin-left: 8px; padding-left: 16px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.timeline li.reject::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.timeline .who { font-weight: 600; }
.timeline .when { color: var(--ink-faint); font-size: 12px; }
.timeline .cmt { color: var(--ink-soft); margin-top: 2px; }

.alert { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; border: 1px solid transparent; }
.alert.warn { background: var(--warn-soft); color: #9a5b1c; border-color: #f3e0be; }
.alert.bad { background: var(--bad-soft); color: #a83236; border-color: #f5cfcf; }
.alert.info { background: var(--info-soft); color: #1c6a9c; border-color: #cde5f7; }

.chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 80px; gap: 10px; align-items: center; font-size: 12px; }
.bar-track { background: #edf0f7; border-radius: 6px; height: 16px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #3478f6, #5aa2ff); border-radius: 6px; }
.bar-fill.over { background: linear-gradient(90deg, #ff9500, #ff3b30); }

/* ---------- 打印报销单 ---------- */
@media print {
  @page { size: A4; margin: 10mm; }
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  .modal-root { position: static !important; display: block !important; }
  .modal-mask, .modal-head, .no-print, .print-toolbar { display: none !important; }
  .modal-box { position: static !important; width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  .modal-box.modal-full { display: block !important; height: auto !important; }
  .modal-box.modal-full .modal-body { overflow: visible !important; background: none !important; padding: 0 !important; }
  .print-stage { padding: 0 !important; background: #fff !important; }
  #printArea { position: static !important; width: 100% !important; padding: 0 !important; }
  .a4-sheet { width: 100% !important; min-height: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; page-break-after: always; break-after: page; }
  .a4-sheet:last-child { page-break-after: auto; break-after: auto; }
  .ap-grid { height: 255mm !important; }
}
#printArea { background: #fff; }
.rp { width: 100%; max-width: 760px; margin: 0 auto; padding: 30px 34px; color: #111; font-size: 13px; }
.rp h2 { text-align: center; font-size: 22px; letter-spacing: 4px; margin: 0 0 4px; }
.rp .sub { text-align: center; color: #555; font-size: 12px; margin-bottom: 18px; }
.rp .rp-head { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 13px; }
.rp table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.rp table, .rp th, .rp td { border: 1px solid #333; }
.rp th, .rp td { padding: 7px 8px; text-align: left; }
.rp .cap { margin: 10px 0; font-weight: 700; }
.rp .signs { display: flex; justify-content: space-between; margin-top: 30px; font-size: 13px; }
.rp .signs div { width: 30%; }
.rp .sign-line { border-top: 1px solid #333; margin-top: 36px; padding-top: 4px; }
.rp .rp-foot { margin-top: 40px; font-size: 11px; color: #666; display: flex; justify-content: space-between; }
.receipt-thumb { max-width: 60px; max-height: 60px; border: 1px solid #ccc; }

/* ---------- 数据看板 / 图表 ---------- */
.mini-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.mini { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; font-size: 12px; color: var(--ink-soft); box-shadow: var(--shadow-sm); }
.mini b { color: var(--ink); font-size: 14px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.chart-svg { width: 100%; height: auto; display: block; }
.ax { font-size: 11px; fill: var(--ink-soft); }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { width: 180px; height: 180px; flex-shrink: 0; }
.donut-num { font-size: 26px; font-weight: 800; fill: var(--ink); }
.donut-label { font-size: 11px; fill: var(--ink-soft); }
.legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 130px; }
.legend.inline { flex-direction: row; flex-wrap: wrap; gap: 16px; justify-content: flex-start; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.lg-item { display: flex; align-items: center; font-size: 12px; color: var(--ink-soft); }
.lg-item span { flex: 1; }
.lg-item b { color: var(--ink); font-size: 13px; }
.budget-bars { display: flex; flex-direction: column; gap: 10px; }
.bb-row { display: grid; grid-template-columns: 76px 1fr 140px; gap: 10px; align-items: center; font-size: 12px; }
.bb-name { color: var(--ink-soft); }
.bb-track { background: #edf0f7; border-radius: 6px; height: 14px; overflow: hidden; min-width: 60px; }
.bb-fill { height: 100%; background: linear-gradient(90deg, #3478f6, #5aa2ff); border-radius: 6px; transition: width .4s ease; }
.bb-fill.over { background: linear-gradient(90deg, #ff9500, #ff3b30); }
.bb-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.bb-val.over { color: var(--bad); font-weight: 700; }
.link { color: var(--brand); text-decoration: none; font-size: 12px; font-weight: 400; float: right; }
.link:hover { text-decoration: underline; }

/* ---------- 预警列表 ---------- */
.alert-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12px; }
.alert-item.warn { background: var(--warn-soft); border: 1px solid #f3e0be; }
.alert-item.bad { background: var(--bad-soft); border: 1px solid #f5cfcf; }
.ai-tag { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #fff; }
.alert-item.warn .ai-tag { background: var(--warn); }
.alert-item.bad .ai-tag { background: var(--bad); }
.ai-text { line-height: 1.6; color: var(--ink); }

/* ---------- 标签页 ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 9px 16px; font-size: 13px; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
.tab:hover { color: var(--brand); background: var(--brand-soft); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }

/* ---------- 发票导入 ---------- */
.channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.channel-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); transition: .15s; }
.channel-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.ch-icon { width: 38px; height: 38px; border-radius: 10px; color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ch-body { flex: 1; min-width: 0; }
.ch-body b { font-size: 13px; }
.ch-desc { font-size: 11px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.gen-bar { position: sticky; bottom: 0; margin-top: 16px; background: var(--side-1); color: #fff; border-radius: var(--radius); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: var(--shadow-lg); }
.gen-bar b { font-size: 15px; }
.gen-bar .money { color: #9fb2ff; }

/* ---------- 规则配置 ---------- */
.sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; margin: 14px 0 18px; }
.sw-row { display: flex; gap: 10px; align-items: flex-start; background: #fafbfe; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer; transition: .13s; }
.sw-row:hover { border-color: #cdd5f0; background: #f7f9ff; }
.sw-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand); }
.sw-row span { display: flex; flex-direction: column; gap: 2px; }
.sw-row b { font-size: 13px; }
.sw-row i { font-size: 11px; color: var(--ink-soft); font-style: normal; line-height: 1.5; }

/* ---------- 工具类 ---------- */
.c { text-align: center; }
.r { text-align: right; }
.sm { font-size: 11px; }
.mini-select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }
.hidden-box { display: none; }

/* ---------- 打印预览 / A4 单据 ---------- */
.print-toolbar { padding: 12px 22px; background: #f8f9fd; border-bottom: 1px solid var(--line); }
.pt-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pt-row:last-child { margin-bottom: 0; justify-content: flex-end; }
.pt-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.pt-field select, .pt-field input[type=checkbox] { padding: 6px; border: 1px solid var(--line); border-radius: 6px; }
.pt-field input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand); }
.pt-info { flex: 1; font-size: 12px; color: var(--ink-soft); }
.print-stage { background: #e8ebf3; padding: 20px; }
.a4-sheet { width: 100%; max-width: 210mm; min-height: 260mm; margin: 0 auto 20px; background: #fff;
  padding: 16mm 13mm; box-sizing: border-box; color: #111; font-size: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.16); }
.doc-head { text-align: center; border-bottom: 2px solid #111; padding-bottom: 8px; }
.doc-company { font-size: 17px; font-weight: 800; letter-spacing: 1px; }
.doc-sub { font-size: 10px; color: #555; margin-top: 3px; }
.doc-title { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 6px; margin: 12px 0 10px; }
.doc-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 11px; margin-bottom: 10px; }
.doc-meta b { color: #111; }
.doc-bar { margin-left: auto; display: flex; flex-direction: column; align-items: center; }
.barcode { width: 120px; height: 26px; }
.doc-bar i { font-size: 8px; font-style: normal; letter-spacing: 1px; }
.doc-info, .doc-items, .doc-sign { width: 100%; border-collapse: collapse; margin: 8px 0; }
.doc-info th, .doc-info td, .doc-items th, .doc-items td, .doc-sign th, .doc-sign td { border: 1px solid #333; padding: 6px 8px; }
.doc-info th, .doc-sign th { background: #f2f4f8; font-weight: 700; width: 90px; }
.doc-section { font-weight: 700; margin: 12px 0 4px; }
.doc-items th { background: #f2f4f8; }
.doc-items td { vertical-align: top; }
.doc-items .alloc { color: #555; font-size: 10px; margin-top: 2px; }
.doc-items tfoot td { background: #f7f8fb; }
.doc-total { display: flex; justify-content: space-between; border: 1px solid #333; border-top: none; padding: 8px; font-size: 12px; }
.doc-sign { margin-top: 16px; }
.doc-sign td { height: 56px; vertical-align: bottom; font-size: 11px; }
.doc-footer { margin-top: 14px; border-top: 1px dashed #999; padding-top: 6px; font-size: 10px; color: #555; display: flex; justify-content: space-between; }
.list-head { font-size: 15px; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 10px; }
.list-note { margin-top: 14px; padding: 10px; border: 1px dashed #999; font-size: 11px; line-height: 1.7; }

/* 附件清单页下方：发票影像缩略图（多张自动横向排列，>4 张自动换行） */
.list-thumbs-title { font-weight: 700; font-size: 12.5px; margin: 14px 0 8px; }
.list-thumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.lt-cell { border: 1px solid #8a8f9c; padding: 5px; display: flex; flex-direction: column; break-inside: avoid; page-break-inside: avoid; box-sizing: border-box; }
.lt-img { height: 50mm; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lt-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lt-cap { font-size: 9.5px; color: #333; border-top: 1px dashed #bbb; margin-top: 4px; padding-top: 3px; display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.ap-head { display: flex; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: 8px; font-size: 12px; margin-bottom: 10px; }
.ap-grid { display: grid; gap: 10px; height: 240mm; }
.ap-grid.up1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ap-grid.up2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.ap-grid.up4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ap-cell { border: 1px dashed #888; padding: 8px; display: flex; flex-direction: column; min-height: 0; position: relative; }
.ap-label { font-size: 11px; border-bottom: 1px dashed #bbb; padding-bottom: 5px; }
.ap-img { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
.ap-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ap-foot { display: flex; justify-content: space-between; font-size: 10px; color: #444; border-top: 1px dashed #bbb; padding-top: 5px; }
.ap-tag { position: absolute; right: 8px; top: 30px; font-size: 9px; background: #e6f7ee; color: #1d9e6c; padding: 2px 6px; border-radius: 4px; }
.ap-note { margin-top: 8px; font-size: 10px; color: #555; border-top: 1px dashed #999; padding-top: 6px; }

/* ---------- 详情弹窗：正式单据卡片 ---------- */
.doc-card { background: #fff; border: 1px solid #d3d9e6; border-radius: 10px; padding: 22px 24px; box-shadow: var(--shadow-sm); color: #1a2230; }
.dc-head { text-align: center; border-bottom: 2px solid #2b3446; padding-bottom: 10px; }
.dc-company { font-size: 17px; font-weight: 800; letter-spacing: 1px; }
.dc-sub { font-size: 10px; color: #6b7688; margin-top: 3px; }
.dc-title { font-size: 20px; font-weight: 800; letter-spacing: 6px; margin: 10px 0; }
.dc-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 11px; color: #5b6675; }
.dc-meta b { color: #1f2733; }
.dc-bar { margin-left: auto; }
.dc-info, .dc-items, .dc-sign { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; }
.dc-info th, .dc-info td, .dc-items th, .dc-items td, .dc-sign th, .dc-sign td { border: 1px solid #ccd4e2; padding: 7px 9px; }
.dc-info th, .dc-sign th { background: #f5f7fc; font-weight: 700; width: 96px; color: #4a5668; }
.dc-section { font-weight: 700; font-size: 13px; margin: 14px 0 6px; padding-left: 8px; border-left: 3px solid var(--brand); }
.dc-items th { background: #f5f7fc; font-weight: 600; }
.dc-items td { vertical-align: top; }
.dc-items tfoot td { background: #f7f9fd; }
.dc-items .alloc { color: #7a8699; font-size: 10px; margin-top: 3px; line-height: 1.5; }
.dc-total { display: flex; justify-content: space-between; background: #f7f9fd; border: 1px solid #ccd4e2; padding: 10px 12px; font-size: 13px; }
.dc-att { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dc-att-card { display: flex; gap: 8px; border: 1px dashed #ccd4e2; border-radius: 8px; padding: 8px; font-size: 11px; }
.dc-att-card img { width: 52px; height: 52px; object-fit: cover; border: 1px solid #dde3ee; border-radius: 4px; }
.dc-sign td { color: #4a5668; }
.dc-foot { margin-top: 12px; border-top: 1px dashed #ccd4e2; padding-top: 8px; font-size: 10px; color: #7a8699; }
.timeline.chain { max-height: 200px; overflow-y: auto; }
.timeline.chain li { padding: 7px 0; font-size: 12px; }
.alloc-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.alloc-toggle input { width: 15px; height: 15px; accent-color: var(--brand); }
.alloc-box { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }

/* ---------- 附件预览 ---------- */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.att-card { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; padding: 10px; background: #fff; }
.att-t { font-size: 12px; margin-bottom: 8px; font-weight: 600; }
.att-card img { width: 100%; height: 150px; object-fit: contain; background: #f8f9fd; border-radius: 6px; }
.att-na { height: 150px; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 12px; background: #f8f9fd; border-radius: 6px; }
.att-d { font-size: 11px; margin: 8px 0; line-height: 1.6; color: var(--ink-soft); }
.att-note { color: var(--ink-soft); margin-top: 4px; }

/* ---------- 批量审批 / 通知 ---------- */
.batch-bar { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; flex-wrap: wrap; font-size: 13px; box-shadow: var(--shadow-sm); }
.chk-cell { width: 36px; }
.chk-cell input, .rowChk { width: 15px; height: 15px; accent-color: var(--brand); }
.bell { position: relative; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 12px; transition: .13s; }
.bell:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.bell svg { vertical-align: middle; }
.nt-badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10px; line-height: 17px; text-align: center; padding: 0 4px; font-weight: 700; box-shadow: 0 2px 6px rgba(229,72,77,.4); }
.nt-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.nt-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 12px; background: #fff; }
.nt-item.unread { background: #f5f8ff; border-color: #cfdcff; }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; background: #d5dce8; margin-top: 5px; flex-shrink: 0; }
.nt-item.unread .nt-dot { background: var(--brand); }
.nt-item > div { flex: 1; }
.nt-body { color: var(--ink-soft); margin-top: 3px; line-height: 1.6; }
.nt-time { color: #9aa6b8; font-size: 11px; margin-top: 4px; }

/* ---------- 预算 ---------- */
.stack-bar { display: flex; height: 14px; background: #edf0f7; border-radius: 5px; overflow: hidden; min-width: 120px; }
.stack-bar i { display: block; height: 100%; }
.s-used { background: linear-gradient(90deg, #3478f6, #5aa2ff); }
.s-frozen { background: linear-gradient(90deg, #ffb340, #ff9500); }
.tpl-preview { border: 1px solid #d3d9e6; border-radius: 8px; padding: 20px; background: #fff; }
.tp-company { text-align: center; font-weight: 800; font-size: 16px; }
.tp-title { text-align: center; letter-spacing: 5px; font-weight: 800; margin: 10px 0; }
.tp-meta { text-align: center; font-size: 11px; color: var(--ink-soft); border-bottom: 2px solid #2b3446; padding-bottom: 10px; }
.tp-grid { display: grid; gap: 8px; margin: 14px 0; min-height: 120px; }
.tp-grid.up1 { grid-template-columns: 1fr; }
.tp-grid.up2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.tp-grid.up4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tp-cell { border: 1px dashed #bbb; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 12px; min-height: 54px; }
.tp-foot { border-top: 1px dashed #bbb; padding-top: 8px; font-size: 10px; color: var(--ink-soft); }

/* 单据表格在窄屏可横向滚动，避免列被压成竖排 */
.dc-info, .dc-items, .dc-sign { min-width: 620px; }

/* ---------- 常用申请模板网格 ---------- */
.tmpl-panel { margin-bottom: 16px; padding: 16px 18px; }
.tmpl-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tmpl-panel-head b { font-size: 14px; }
.tmpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tmpl-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  background: #fafbfe; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 13px;
  transition: .14s; min-height: 84px; justify-content: center;
}
.tmpl-card:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 122, 255, .14); }
.tmpl-card:active { transform: none; }
.tmpl-ico { font-size: 21px; line-height: 1; margin-bottom: 3px; }
.tmpl-card.blank .tmpl-ico { color: var(--brand); font-weight: 800; }
.tmpl-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tmpl-desc { font-size: 11px; color: var(--ink-soft); line-height: 1.4; }

/* ---------- 审批意见模板（胶囊） ---------- */
.tmpl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tmpl-btn { font-size: 12px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); transition: .15s; }
.tmpl-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------- 审批流程节点图（stepper）---------- */
.flow { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; margin: 6px 0 4px; }
.flow-step { flex: 1 1 120px; min-width: 110px; text-align: center; position: relative; padding: 0 4px; }
.flow-dot { width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; background: #c2cbd9; border: 2px solid #c2cbd9; transition: .2s; }
.flow-label { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.flow-who { font-size: 11px; color: var(--brand); margin-top: 2px; }
.flow-time { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.flow-bar { flex: 0 0 18px; align-self: flex-start; height: 2px; margin-top: 15px; background: var(--line); }
.flow-step.done .flow-dot { background: var(--ok); border-color: var(--ok); }
.flow-step.done .flow-label { color: var(--ink); }
.flow-step.active .flow-dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 122, 255, .15); animation: flowpulse 1.4s infinite; }
.flow-step.active .flow-label { color: var(--brand); font-weight: 600; }
.flow-step.active ~ .flow-bar { background: var(--line); }
.flow-step.rejected .flow-dot { background: var(--bad); border-color: var(--bad); }
.flow-step.rejected .flow-label { color: var(--bad); }
.flow-step.pending .flow-dot { background: #fff; color: var(--ink-faint); }
@keyframes flowpulse { 0% { box-shadow: 0 0 0 0 rgba(0, 122, 255, .30); } 70% { box-shadow: 0 0 0 8px rgba(0, 122, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); } }

/* ---------- 关联事前申请单 ---------- */
.linked-app { background: #f8f9fd; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; }
.linked-app select { width: 100%; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 9px; margin-top: 6px; background: #fff; }

/* ---------- 审批时效 / SLA 看板 ---------- */
tr.row-overdue td { background: #fff6f6; }
table.tbl tr.row-overdue:hover td { background: #ffecec; }
.sla-over { color: var(--bad); font-weight: 600; }
.sla-ok { color: var(--ok); }
.ai-open { color: var(--brand); text-decoration: none; cursor: pointer; }
.ai-open:hover { text-decoration: underline; }

/* ---------- 智能风控聚合条（看板置顶） ---------- */
.risk-strip { display: flex; align-items: flex-start; gap: 12px; background: #fff5f5; border: 1px solid #f5cfcf; border-left: 4px solid var(--bad);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; }
.rs-icon { font-size: 20px; line-height: 1; margin-top: 2px; }
.rs-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.rs-main b { font-size: 14px; color: #b23030; }
.rs-main span { font-size: 12px; color: var(--ink-soft); }
.rs-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rs-link { font-size: 12px; background: #fff; border: 1px solid #f0cccc; border-radius: 999px; padding: 4px 11px; color: var(--ink); cursor: pointer; }
.rs-link:hover { border-color: var(--bad); color: var(--bad); }
.rs-link b { font-weight: 700; margin-right: 4px; }

/* ---------- 信用报销 ---------- */
.credit-chip { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer; }
.credit-chip.good { background: var(--ok-soft); color: #10855a; }
.credit-chip.info { background: var(--brand-soft); color: var(--brand); }
.credit-chip.warn { background: var(--warn-soft); color: #b56a14; }
.credit-chip.bad { background: var(--bad-soft); color: #c7383d; }
.credit-hero { border-radius: var(--radius); padding: 18px; margin-bottom: 8px; color: #fff; box-shadow: var(--shadow); }
.credit-hero.good { background: linear-gradient(135deg, #34c759, #24b364); }
.credit-hero.info { background: linear-gradient(180deg, #3478f6, #0a6cf5); }
.credit-hero.warn { background: linear-gradient(135deg, #ff9500, #ffb340); }
.credit-hero.bad { background: linear-gradient(135deg, #ff3b30, #ff6961); }
.credit-hero .ch-score { font-size: 40px; font-weight: 800; line-height: 1; }
.credit-hero .ch-level { font-size: 15px; margin: 4px 0 8px; font-weight: 600; }
.credit-ev-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.credit-ev { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.credit-ev:last-child { border-bottom: none; }
.ce-delta { font-weight: 700; min-width: 42px; }
.ce-delta.plus { color: var(--ok); }
.ce-delta.minus { color: var(--bad); }
.ce-reason { flex: 1; color: var(--ink); }
.ce-time { color: var(--ink-faint); font-size: 11px; }

/* ---------- 移动端适配 ---------- */
.menu-btn { display: none; }
.side-overlay { position: fixed; inset: 0; background: rgba(16, 21, 38, .45); z-index: 40; backdrop-filter: blur(2px); }

@media (max-width: 860px) {
  /* 侧边栏变为抽屉，默认隐藏 */
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; max-width: 82vw; z-index: 45;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border: 1px solid var(--line); background: #fff; border-radius: 9px; font-size: 19px; color: var(--ink); margin-right: 4px; }
  .topbar { flex-wrap: wrap; height: auto; align-items: center; padding: 8px 14px; gap: 8px; }
  .view-title { flex: 1; font-size: 15px; }
  .top-actions { width: 100%; order: 3; justify-content: flex-start; flex-wrap: wrap; }
  .top-actions .btn { flex: 1 1 auto; text-align: center; }

  .content { padding: 14px; }
  .cards-row, .chart-grid, .sw-grid, .channel-grid, .tmpl-grid { grid-template-columns: 1fr 1fr; }
  .row { gap: 8px; }
  .field input, .field select, .field textarea { font-size: 16px; } /* 防止 iOS 聚焦缩放 */

  /* 模态框近全屏 */
  .modal-box { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin-top: 0; border-radius: 0; }
  .modal-body { padding: 16px; }
  .modal-head { padding: 14px 16px; }
  /* 底部按钮改两列网格：详情弹窗按钮多（6 个），竖排全宽会占掉半屏并遮住录入表单 */
  .modal-foot { padding: 10px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .modal-foot .btn { width: auto; margin-left: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  .modal-foot .btn.full-row { grid-column: 1 / -1; }
  /* 「下载多格式」下拉容器在网格中占满一格，内嵌按钮与格子等宽 */
  .modal-foot .dd { min-width: 0; }
  .modal-foot .dd > .btn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal-foot .dd-menu { max-width: 82vw; }

  .if-modes { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .if-modes::-webkit-scrollbar { display: none; }
  /* 三个录入方式 tab 在窄屏文字会被挤成一字一行，禁止换行改为横向滑动 */
  .if-mode { white-space: nowrap; flex-shrink: 0; padding: 7px 10px 9px; font-size: 12px; }

  .kv { grid-template-columns: 92px 1fr; }
  .dc-att, .att-grid { grid-template-columns: 1fr 1fr; }
  .login-card { width: 92vw; padding: 28px 22px; }
  .gen-bar { position: fixed; left: 0; right: 0; bottom: 0; border-radius: 0; z-index: 30; }
  .content { padding-bottom: 84px; }
}

@media (max-width: 480px) {
  .dc-att, .att-grid, .tmpl-grid, .cards-row { grid-template-columns: 1fr; }
  .view-title { font-size: 14px; }
  .top-actions .btn { font-size: 12px; padding: 9px 8px; }
  .stat .value { font-size: 22px; }
  .content { padding: 12px; }
  .pt-field { width: 100%; }
}

/* ---------- 滚动条美化 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c9d0e0; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #aab4c8; }
.nav::-webkit-scrollbar-thumb { background: #c9c9ce; border-color: transparent; }

/* ---------- ERP 分录预览 ---------- */
.erp-je { display: flex; align-items: center; gap: 6px; padding: 1px 0; font-size: 12px; }
.erp-dir { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fff; flex-shrink: 0; }
.erp-dir.j { background: var(--brand); }
.erp-dir.d { background: #8a6d1f; }
.erp-je b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- 拖拽上传（发票 / 票据） ---------- */
.dropzone { position: relative; border: 2px dashed var(--line); border-radius: 9px; padding: 7px 10px; background: #fafbfe; transition: .15s; cursor: pointer; }
.dropzone input[type=file] { width: 100%; }
.dropzone:hover { border-color: #b9c6e8; }
.dropzone.dragover { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(0, 122, 255, .12); }
.dz-hint { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 5px; line-height: 1.5; }
.drop-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 122, 255, .14); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; }
.drop-overlay.show { display: flex; }
.drop-overlay-box { background: #fff; border: 2.5px dashed var(--brand); border-radius: 22px; padding: 36px 52px; text-align: center; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--shadow-lg); pointer-events: none; }
.drop-overlay-box b { font-size: 17px; }
.drop-overlay-box span { font-size: 12px; color: var(--ink-soft); }
.drop-overlay-box .dz-big { font-size: 42px; line-height: 1; }

/* ---------- 常用事由快捷胶囊 ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; margin-top: 2px; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; transition: .13s; line-height: 1.6; }
.chip:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.chip:active { transform: scale(.95); }

/* ---------- 同步发票设置 ---------- */
.sync-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
.sb-info { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; }
.sb-info b { font-size: 13.5px; }
.sb-info > span:last-child { color: var(--ink-soft); }
.sb-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sb-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }
.sb-dot.off { background: var(--ink-faint); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
.sb-actions { display: flex; gap: 8px; }
.channel-card.ch-off { opacity: .58; }
.channel-card.ch-off .ch-sync { cursor: not-allowed; }
.ch-body .badge { font-size: 10px; padding: 1px 6px; vertical-align: 1px; }
.ss-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 9px; }
.ss-ch { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .13s; }
.ss-ch:hover { border-color: var(--brand); background: var(--brand-soft); }
.ss-ch input { width: 16px; height: 16px; accent-color: var(--brand); }
.ch-icon.sm { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; flex-shrink: 0; }

/* ---------- 添加费用明细：紧凑网格排版 ---------- */
.item-form-card { margin-top: 16px !important; background: #fafbff; padding: 14px 16px 12px; }
/* 录入区在打印单据内部（明细表正下方）：屏幕预览收敛边距，打印时整块隐藏 */
.doc-card .item-form-card { margin: 12px 0 16px !important; border: 1px solid #dfe6f5; box-shadow: none; border-radius: 10px; }
@media print { .doc-card .item-form-card { display: none !important; } }
.if-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; font-size: 15px; font-weight: 700; }
.if-title span { font-size: 11.5px; font-weight: 400; color: var(--ink-soft); }
.if-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px 12px; align-items: end; }
.if-grid > .field { margin: 0; min-width: 0; }
.if-grid .field label { font-size: 11.5px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-grid .field input, .if-grid .field select { padding: 7px 10px; border-radius: 8px; font-size: 13px; height: 36px; }
.if-span2 { grid-column: span 2; }
.if-full { grid-column: 1 / -1; }
.if-half { grid-column: span 3; }
.if-grid .chip-row { flex: none; margin: -3px 0 0; }
.if-grid .dropzone { padding: 4px 9px; min-height: 36px; }
.if-grid .dz-hint { font-size: 10px; margin-top: 2px; line-height: 1.35; }
/* 发票导入中心上传区：加高、居中，强调可拖拽 */
.dropzone-tall { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.dropzone-tall input[type=file] { max-width: 300px; margin: 0 auto; }
.dropzone-tall .dz-hint { font-size: 12px; margin-top: 12px; line-height: 1.6; }
.if-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.if-foot .alloc-toggle { margin-top: 0; }
.if-foot .btn { padding: 9px 18px; }
.item-form-card .alloc-box { margin-top: 10px; }
/* 录入区头部：步骤提示 + 实时汇总（费用明细 N 笔 / 合计） */
.if-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.if-head .if-title { margin-bottom: 10px; }
.if-summary { flex-shrink: 0; font-size: 12px; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.if-summary b { color: var(--brand); font-variant-numeric: tabular-nums; }
/* 「添加 / 选取」双入口 */
.if-modes { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.if-mode { border: none; background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 7px 14px 9px; cursor: pointer; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; transition: .13s; }
.if-mode:hover { color: var(--brand); background: var(--brand-soft); }
.if-mode.active { color: var(--brand); border-bottom-color: var(--brand); }
.if-subsec { font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: .3px; margin-top: 2px; padding-top: 7px; border-top: 1px dashed var(--line); }
.if-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.item-form-card.just-added { animation: ifFlash .9s ease; }
@keyframes ifFlash { 0% { box-shadow: 0 0 0 3px rgba(52, 199, 89, .35); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } }
/* 从票夹批量带入 */
.batch-panel { margin-top: 4px; }
.bp-head { font-size: 12px; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.6; }
.bp-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.bp-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12.5px; transition: .12s; }
.bp-row:last-child { border-bottom: none; }
.bp-row:hover { background: var(--brand-soft); }
.bp-row input { width: 15px; height: 15px; accent-color: var(--brand); flex-shrink: 0; }
.bp-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-amt { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bp-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
/* 「带入选中发票」等操作键统一靠左（与其他操作按钮一致），不再右推 */
.bp-foot .btn { margin-left: 0; }
.dc-items .btn.sm { padding: 3px 8px; font-size: 11px; }

/* ---------- 我的报销：草稿多选删除 ---------- */
.my-toolbar { justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tool-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-right .sm { color: var(--ink-soft); }
.tool-right a.btn.sm { color: var(--ink); } /* 同类误伤防护：导出链接不应吃灰色提示色 */
.chk-na { color: var(--ink-faint); font-size: 12px; }
.row-actions .btn.sm { padding: 3px 8px; font-size: 11px; }
.del-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.9; }
.del-list li b { font-variant-numeric: tabular-nums; }
/* 危险操作按钮：描边红字（替代高饱和实心红，避免图标/文字挤压变形） */
.btn.danger-line {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #d93a2f;
  border: 1px solid #f2c6c1; box-shadow: none; font-weight: 600;
}
.btn.danger-line:hover { background: #fff6f5; border-color: #e59a93; filter: none; box-shadow: 0 1px 4px rgba(217, 58, 47, .12); }
.btn.danger-line:active { background: #ffeeec; }
.btn.danger-line:disabled { background: #fbfcfe; color: var(--ink-faint); border-color: var(--line); opacity: 1; transform: none; box-shadow: none; }
.btn.danger-line svg { flex-shrink: 0; display: block; }
.ds-count {
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: #d93a2f; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
}
.ds-count[hidden] { display: none; }

/* 管理员 / 财务：新建时就地展开的代发起小菜单（非弹窗） */
.behalf-pop {
  position: fixed; z-index: 260; width: 240px; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid var(--line); box-shadow: 0 14px 38px rgba(20, 32, 60, .16);
}
.hp-head { padding: 9px 12px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 2px; }
.hp-head span { font-weight: 400; font-size: 10.5px; color: var(--ink-soft); }
.hp-list { max-height: 252px; overflow-y: auto; padding: 5px; }
.hp-item { width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 7px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; font-family: inherit; }
.hp-item:hover { background: var(--brand-soft); }
.hp-item b { font-size: 12.5px; }
.hp-item span { font-size: 10.5px; color: var(--ink-soft); }
.hp-empty { padding: 14px 8px; font-size: 12px; color: var(--ink-faint); text-align: center; }

/* 单据抬头行内编辑：报销主体下拉 / 报销事由直接改字 */
.dc-info .dc-edit-cell { padding: 2px 4px; }
/* 所属项目：按钮 + 菜单（单击选用 / 双击改名 / 自定义新建） */
.prj-wrap { position: relative; display: inline-block; max-width: 100%; }
.prj-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 180px;
  border: 1px solid transparent; background: rgba(255, 255, 255, .55); border-radius: 5px;
  padding: 3px 8px; font-size: 12px; color: inherit; font-family: inherit; outline: none; cursor: pointer; transition: .12s;
}
.prj-btn:hover { border-color: var(--line); background: #fff; }
.prj-caret { color: var(--ink-soft); font-size: 10px; }
.prj-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; width: 240px;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 14px 38px rgba(20, 32, 60, .18);
  padding: 10px; text-align: left;
}
.prj-menu-head { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.prj-menu-head span { font-weight: 400; color: var(--ink-soft); font-size: 10.5px; margin-left: 6px; }
.prj-items { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.prj-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
  border: 1.5px solid transparent; background: none; border-radius: 8px; padding: 6px 9px;
  font-size: 12.5px; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink);
}
.prj-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.prj-item.active { border-color: var(--brand); color: var(--brand); font-weight: 700; background: var(--brand-soft); }
.prj-item.active > span:first-of-type::after { content: ' ✓'; font-size: 11px; }
.prj-inline { width: 100%; box-sizing: border-box; border: 1px solid var(--brand); border-radius: 6px; padding: 4px 7px; font-size: 12px; outline: none; font-family: inherit; }
/* 项目条目删除按钮（仅管理员渲染）：仿费用项目 × 样式 */
.prj-del { color: var(--ink-faint); font-size: 13px; line-height: 1; flex: 0 0 auto; }
.prj-del:hover { color: var(--bad); }
/* 项目条目改名按钮（显式 ✎，替代不可靠的双击） */
.prj-ren { color: var(--ink-faint); font-size: 12px; line-height: 1; flex: 0 0 auto; }
.prj-ren:hover { color: var(--brand); }
.prj-add { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
/* 表单场景（费用申请 / 发票生成报销单等）：选择器按钮与下拉框视觉一致 */
.prj-wrap-form { display: block; width: 100%; }
.prj-btn-form { width: 100%; max-width: 100%; justify-content: space-between; box-sizing: border-box; padding: 9px 12px; font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.prj-btn-form:hover { border-color: var(--brand); }
/* 删除项目行内确认（避免弹窗套弹窗冲掉已填表单） */
.prj-item.prj-confirming { border-color: var(--bad); background: #fff5f5; }
.prj-item.prj-confirming:hover { border-color: var(--bad); background: #fff5f5; }
.prj-confirm-text { font-size: 12px; color: var(--bad); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prj-confirm-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.prj-yes, .prj-no { border: none; border-radius: 6px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.prj-yes { background: var(--bad); color: #fff; }
.prj-no { background: #f1f3f9; color: var(--ink); }
/* 弹窗底部空间不足时菜单向上展开 */
.prj-menu.prj-menu-up { top: auto; bottom: calc(100% + 6px); }
.prj-add input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; outline: none; font-family: inherit; }
.prj-add input:focus { border-color: var(--brand); }
.prj-add .btn { padding: 5px 10px; flex-shrink: 0; }
.dc-info-sel, .dc-info-title {
  width: 100%; box-sizing: border-box; border: 1px solid transparent; background: rgba(255, 255, 255, .55);
  border-radius: 5px; padding: 3px 5px; font-size: 12px; color: inherit; font-family: inherit; outline: none; transition: .12s;
}
.dc-info-sel { cursor: pointer; }
.dc-info-sel:hover, .dc-info-title:hover { border-color: var(--line); background: #fff; }
.dc-info-sel:focus, .dc-info-title:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px rgba(0, 122, 255, .12); }
.dc-info-print { display: none; }

/* ---------- Excel 式明细网格 ---------- */
.dc-section-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dc-sec-left { display: flex; align-items: center; gap: 10px; }
.grid-hint { font-size: 11px; color: var(--ink-soft); }
.dc-section-line .dc-section { margin-bottom: 8px; }
.grid-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.grid-tools .sm { color: var(--ink-soft); font-size: 11px; }
/* 「＋ 新建明细」：白底描边蓝字。注意 .sm 的灰色提示色会按 (.grid-tools .sm) 命中按钮，
   这里必须显式覆盖，否则灰字压在蓝底上几乎不可读 */
.grid-tools .btn.sm {
  background: #fff; color: var(--brand); border: 1.5px solid rgba(0, 122, 255, .5);
  box-shadow: none; font-weight: 700; padding: 5px 12px;
}
.grid-tools .btn.sm:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); filter: none; box-shadow: 0 1px 5px rgba(0, 122, 255, .18); }
.grid-tools .btn.sm:active { background: #eaf2ff; }
/* 「＋ 新建明细」主按钮：蓝底实心，置于明细标题左侧，醒目易点 */
.grid-tools .btn.grid-add {
  background: var(--brand); border: 1.5px solid var(--brand); color: #fff;
  font-weight: 700; padding: 5px 14px; box-shadow: 0 1px 6px rgba(0, 122, 255, .28);
}
.grid-tools .btn.grid-add:hover { background: #2f8bff; border-color: #2f8bff; color: #fff; filter: none; box-shadow: 0 2px 8px rgba(0, 122, 255, .32); }
.grid-tools .btn.grid-add:active { background: #0a84ff; }
.dc-items .cell-text { display: none; }
.dc-items .cell-edit { width: 100%; min-width: 62px; max-width: 100%; box-sizing: border-box; border: 1px solid transparent; background: rgba(255, 255, 255, .65); border-radius: 5px; padding: 3px 5px; font-size: 12px; color: inherit; outline: none; }
.dc-items .cell-edit:hover { border-color: var(--line); background: #fff; }
.dc-items .cell-edit:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px rgba(0, 122, 255, .12); }
.dc-items .cell-amt { text-align: right; font-variant-numeric: tabular-nums; }
.dc-items tr.grid-new { background: #f3f8ff; }
.dc-items tr.grid-new td { border-color: #cfe0ff; }
.dc-items .grid-empty-row td { color: var(--ink-faint); }
@media print {
  .dc-items .cell-text { display: inline !important; }
  .dc-items .cell-edit, .grid-tools { display: none !important; }
  .dc-items tr.grid-new { display: none !important; } /* 未保存的新建行不打印 */
  /* 抬头行编辑控件打印时还原为纯文本 */
  .dc-info-sel, .dc-info-title { display: none !important; }
  .dc-info-print { display: inline !important; }
  .dc-info .dc-edit-cell { padding: 0; }
}

/* ---------- 费用项目菜单栏（位于费用明细之前） ---------- */
.ep-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; margin: 14px 0 10px; padding: 8px 10px; background: #f7f9ff; border: 1px solid var(--line); border-radius: 9px; }
.ep-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); flex-shrink: 0; }
.ep-current { border: 1.5px solid var(--brand); background: #fff; color: var(--brand); border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ep-current.ep-empty { border-style: dashed; border-color: var(--line); color: var(--ink-faint); font-weight: 500; }
.ep-custom { width: 240px; border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 12px; outline: none; }
.ep-custom:focus { border-color: var(--brand); }
.ep-toggle { border: 1.5px solid var(--line); background: #fff; border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--ink-soft); }
.ep-menu { flex: 1 1 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 10px; margin-top: 4px; }
.ep-menu-head { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.ep-menu-head span { font-weight: 400; color: var(--ink-soft); font-size: 11px; margin-left: 6px; }
.ep-items { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-item { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 9px; font-size: 12px; cursor: pointer; }
.ep-item:hover { border-color: var(--brand); }
.ep-item.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.ep-del { color: var(--ink-faint); font-size: 13px; line-height: 1; }
.ep-del:hover { color: var(--bad); }
.ep-empty-tip, .ep-inline { font-size: 12px; color: var(--ink-soft); }
.ep-inline { border: 1.5px solid var(--brand); border-radius: 8px; padding: 5px 10px; outline: none; width: 220px; }
@media print {
  .ep-bar { background: none; border: none; padding: 2px 0; margin: 6px 0; }
  .ep-current { border: none; background: none; padding: 0; color: #1a2230; font-size: 13px; }
}
@media (max-width: 900px) {
  .if-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .if-span2, .if-half { grid-column: 1 / -1; }
}