/* ==========================================================================
   V2.3.0 前端界面与导航统一收尾 · 增量样式
   --------------------------------------------------------------------------
   1. 视觉基线来自 web/assets/styles.css 的逐字节副本 assets/base.css；
      本文件只补充新功能需要的组件（KPI、页签、图表、分桶、内联表单），
      颜色、字体、圆角、阴影、按钮、表格、筛选框全部复用 base.css 的变量，
      不引入第二套主题。
   2. 不写 !important 覆盖既有组件；不改变侧栏、顶栏、卡片、表格的既有规则。
   ========================================================================== */

/* 顶部筛选条（与 .toolbar 同源，仅作为视图内的第一条工具栏） */
.view > .view-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}

/* KPI 卡片 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1180px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.kpi .k {
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi .v {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  margin-top: 2px;
  word-break: break-all;
}
.kpi .v.in { color: var(--danger); }
.kpi .v.out { color: var(--ok); }
.kpi .s { font-size: 11px; color: var(--muted); margin-top: 3px; }
.kpi .rows { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.kpi .rows .r {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* 页签（工资 / 供应商 / 收付款共用；与侧栏导航不是同一层） */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.tabs .tab {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  cursor: pointer;
}
.tabs .tab:hover { border-color: var(--line-strong); color: var(--navy); }
.tabs .tab.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}

/* 图表 */
.chart-box { padding: 4px 2px 8px; }
.chart-box svg { width: 100%; height: auto; display: block; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11.5px; color: var(--muted); margin-bottom: 6px;
}
.chart-legend i {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 5px; vertical-align: middle;
}
.chart-note { font-size: 11.5px; color: var(--faint); margin-top: 6px; }

/* 分类分布条形（横向，按币种分组） */
.dist-list { display: flex; flex-direction: column; gap: 2px; }
.dist-list .dist-row { grid-template-columns: 150px 1fr 120px 64px; }
.dist-list .dist-row .cnt { color: var(--faint); font-size: 11.5px; text-align: right; }

/* 待办分桶 */
.bucket-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 1180px) { .bucket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bucket {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-alt); padding: 11px 13px;
}
.bucket .k { font-size: 11.5px; color: var(--muted); }
.bucket .v {
  font-size: 17px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.bucket .n { font-size: 11px; color: var(--faint); }
.bucket.warn { border-color: #f3dcc6; background: var(--warn-100); }
.bucket.warn .v { color: var(--warn); }
.bucket.danger { border-color: #f3cfca; background: var(--danger-100); }
.bucket.danger .v { color: var(--danger); }

/* 内联表单（替代浏览器 prompt，统一使用同一输入样式）
 *
 * 列数必须固定。此前用 repeat(auto-fit, minmax(190px, 1fr))：
 *   - 主内容区 1500px 左右会排到 7~8 列，每列被压到 190px，
 *     「对方（供应商 / 收款人）」「到期日（待付款用）」这类标签被迫折行；
 *   - auto-fit 会把空轨道折叠、把 1fr 分给已有列，导致同一行里
 *     字段宽窄不一（有的是 190px，有的被拉到 300px+）；
 *   - align-items: end 让带 hint / 长标签的字段上下错位，
 *     照片里一行输入框高低不齐就是这个原因。
 * 改成固定 3 列等宽 + 顶部对齐，字段多了自动换行，行末不再被拉伸。 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: start;
}

/* 跨整行：说明 / 摘要 / 备注这类长输入 */
.form-grid .full,
.form-grid .field-block.full,
.form-grid .field.full { grid-column: 1 / -1; }

/* 标签统一单行、固定高度，下方输入框才能落在同一条水平线上；
 * 超长标签用省略号收尾，完整文案见 title（由渲染层补）。 */
.form-grid .field-block > label,
.form-grid .field > label {
  display: block; height: 16px; line-height: 16px;
  font-size: 11.5px; color: var(--muted);
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 两种写法（field-block / field）视觉必须一致，否则同一张表单里
 * 输入框高度、边框、字号都会不一样。 */
.form-grid .field-block > input,
.form-grid .field-block > select,
.form-grid .field > input,
.form-grid .field > select {
  width: 100%; height: 32px; padding: 0 9px; font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.form-grid .field-block > input:focus,
.form-grid .field-block > select:focus,
.form-grid .field > input:focus,
.form-grid .field > select:focus { border-color: var(--navy-600); outline: none; }
.form-grid .field-block > textarea,
.form-grid .field > textarea { width: 100%; }

@media (max-width: 1180px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* 弹窗内部宽度只有 600~700px，3 列会把「GATE-CN · 门禁演练虚构公司」
 * 这类长下拉截断、把 hint 折成三行撑高整行，因此弹窗内降为 2 列。
 * 档案类长表单（dense3）在弹窗里本来就是 3 列紧凑排版，保持不动。 */
#modal .form-grid:not(.dense3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 档案类长表单：字段多、带必填说明，固定 3 列（窄屏 2 列 / 1 列），
   不让 auto-fit 在 1440 宽屏把 10 个字段挤成一行、把备注顶到半行。 */
.form-grid.dense3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.form-grid.dense3 .field-block { display: flex; flex-direction: column; gap: 5px; }
.form-grid.dense3 .field-block > label { font-size: 11.5px; color: var(--muted); }
.form-grid.dense3 .field-block > input,
.form-grid.dense3 .field-block > select,
.form-grid.dense3 .field-block > textarea {
  width: 100%; height: 32px; padding: 0 9px; font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.form-grid.dense3 .field-block.full { grid-column: 1 / -1; }
@media (max-width: 1180px) { .form-grid.dense3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .form-grid.dense3 { grid-template-columns: 1fr; } }
/* .field 与 .field-block 用同一套间距：label 高 16px + gap 5px，
 * 这样两种字段混排时输入框仍在同一水平线。 */
.form-grid .field { display: flex; flex-direction: column; gap: 5px; }
.form-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 10px;
}

/* 行内操作按钮组 */
.ops { display: flex; gap: 4px; flex-wrap: wrap; }
/* V2.3.15 货款明细：一行三个按钮（付款/备注/下钻），列宽不够时不允许竖排换行 */
table.table td.ops-cell { white-space: nowrap; }
table.table td.ops-cell .ops { flex-wrap: nowrap; }
.ops .btn { height: 24px; padding: 0 8px; font-size: 11.5px; }

/* 明确拒绝 / 范围说明 */
.deny {
  background: var(--warn-100);
  border: 1px solid #f3dcc6;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--warn);
  font-size: 12.5px;
}
.scope-note {
  background: var(--surface-sunken);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--muted);
  font-size: 12px;
}

/* 角色徽标 */
.role-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted);
  background: var(--surface-alt);
}
.role-tag.admin { border-color: #d5e4f1; background: var(--navy-100); color: var(--navy-600); }
.role-tag.finance { border-color: #cbe7e2; background: var(--teal-100); color: var(--teal); }
.role-tag.staff { border-color: #efdfb9; background: var(--gold-100); color: var(--gold); }

/* 导出预览：等宽、可横向滚动，不改变表格既有样式 */
.csv-preview { max-height: 320px; overflow: auto; }
.csv-preview table { font-family: var(--font-mono); font-size: 11.5px; }

/* ==========================================================================
   高密度侧栏（19 项菜单）
   --------------------------------------------------------------------------
   base.css 的间距是按原始 12 项菜单定的；并入 B3 四项 / B4 / B5 后共 19 项、
   7 个分组，按原间距在 1280×768 下只能看到 7 项。这里只压间距、不改风格：
   同一字体、同一字号、同一激活色，仅把纵向留白收紧，并给滚动条一个可见提示。
   ========================================================================== */
.nav { padding: 8px 8px 2px; scrollbar-width: thin; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb {
  background: #d7dee8; border-radius: 999px;
}
.nav::-webkit-scrollbar-thumb:hover { background: #c3cddb; }
.nav-group { margin-top: 5px; }
.nav-group-label {
  font-size: 9.5px; letter-spacing: 0.9px; padding: 3px 10px 1px;
}
.nav-item { padding: 4px 9px; margin: 0; font-size: 12.5px; }
.nav-item + .nav-item { margin-top: 1px; }
.sidebar-foot {
  padding: 8px 14px 10px; font-size: 10.5px; line-height: 1.55;
  background: #fbfcfe;   /* 与侧栏同色，滚动时不透出菜单 */
  /* 菜单可滚动：给分界线加一点投影，滚动到折叠线时能看出「上面还有」 */
  box-shadow: 0 -7px 10px -9px rgba(20, 48, 76, 0.45);
}
.brand { padding: 14px 16px 10px; }
.brand .title { font-size: 13px; line-height: 1.3; }
.brand .env { margin-top: 7px; }

/* 页头：标题永不断行，说明文字在窄屏换行到自己那一行 */
.page-head { flex-wrap: wrap; align-items: baseline; }
.page-head .page-title { white-space: nowrap; flex: none; }
.page-head .page-desc { flex: 1 1 360px; min-width: 0; }

/* 卡片头的主操作按钮：与既有 .btn-sm 同尺寸，只把左侧说明文字挤开 */
.card-head .btn + .btn { margin-left: 6px; }
.card-head .grow { flex: 1; }

/* 从档案列表点「＋ 新增」跳到底部表单时，短暂描边提示落点（不改变布局） */
.card.flash {
  box-shadow: 0 0 0 2px rgba(20, 48, 76, 0.28);
  transition: box-shadow 0.25s ease;
}

/* ==========================================================================
   V2.3.1 员工与工资方案合并：同一张表 + 行内展开历史版本
   ========================================================================== */
.form-section {
  margin: 2px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}
.form-grid + .form-section { margin-top: 14px; }

/* 行内操作按钮：不换行，右对齐，与表格数字列同一基线 */
.table td.row-actions {
  white-space: nowrap;
  text-align: right;
}
.table td.row-actions .btn + .btn { margin-left: 5px; }

/* 展开行：淡底色 + 内嵌白卡，视觉上从属于上一行 */
.table tbody tr.sub-row > td {
  background: #f5f8fc;
  padding: 8px 10px 10px;
  border-bottom: 0;
}
.table tbody tr.sub-row:hover > td { background: #f5f8fc; }
.sub-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.sub-panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sub-panel-head b { font-size: 13px; color: var(--navy); }
.sub-panel-head .grow { flex: 1; }
.sub-panel .table th,
.sub-panel .table td,
.table-compact th,
.table-compact td {
  font-size: 12px;
  padding: 5px 8px;
}

/* 只读字段（如员工所属公司）在编辑态明确显示不可改，避免「点了没反应」 */
select:disabled,
input:disabled {
  background: #f2f5f9;
  color: var(--muted);
  cursor: not-allowed;
}

/* 行内操作列右侧留出内边距，按钮不贴表格边线 */
.table td.row-actions { padding-right: 14px; }

/* ==========================================================================
   V2.3.2 新建公司 / 成员 / 账户
   ========================================================================== */
/* 成员授权账户：多选清单，账户多时在框内滚动，不把页面撑长 */
.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 5px 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  max-height: 176px;
  overflow: auto;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  cursor: pointer;
}
.check-item > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* base.css 给 .field-block input 设了 width:100%，会把复选框撑满整行、
   把后面的文字挤成竖排 —— 这里必须显式收回宽度 */
.field-block .check-item input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.check-item em { font-style: normal; font-size: 11.5px; }

/* 表单内联提示：默认灰字，出错变红，位置固定不跳动 */
.form-msg { min-height: 17px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.form-msg.error { color: #c0392b; }

/* --------------------------------------------------------------------------
   窄屏：页头改纵向后，.page-desc 的 flex-basis 必须收回
   本文件第 238 行给它设的是 flex: 1 1 360px（宽屏按宽度占位）。
   base.css 在 ≤760px 把 .page-head 改成 column，此时 360px 变成「高度」基准，
   描述块会被撑成 360px 高的空白，标题到卡片之间像断了层，
   使用者会以为页面没加载出来。本文件在 base.css 之后加载，
   因此这条修正必须写在这里才能覆盖第 238 行。
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .page-head .page-desc { flex: 0 1 auto; }
}

/* --------------------------------------------------------------------------
   自绘下拉层（替代原生 <select> 弹层）
   原生弹层由浏览器在窗口坐标系单独绘制，在内嵌/缩放预览环境里会错位到页面
   左上角；本层用 position: fixed + 元素自身 rect 定位，位置永远贴着下拉框。
   z-index 200 高于 modal(95) / drawer(90) / overlay(80) / toast(120)。
   -------------------------------------------------------------------------- */
.pick-layer {
  position: fixed;
  z-index: 200;
  box-sizing: border-box;
  min-width: 132px;
  max-width: 460px;
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(16, 31, 51, 0.18);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  animation: pick-in 0.12s ease-out;
}
@keyframes pick-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.pick-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.pick-item:hover, .pick-item.cur { background: var(--navy-100); }
.pick-item.on { background: var(--navy); color: #fff; }
.pick-item.on:hover, .pick-item.on.cur { background: var(--navy-600); }
.pick-item.off { color: var(--faint); cursor: not-allowed; background: transparent; }
.pick-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.pick-tick { flex: none; width: 12px; text-align: center; font-size: 12px; opacity: .9; }

/* V2.3.3：字段标签右侧的轻量跳转（如「＋ 管理分类」），不占整行、不改变字段高度 */
.field-link {
  float: right; font-weight: 400; font-size: 12px; line-height: 1.4;
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.field-link:hover { text-decoration: underline; }

/* ============================================================================
   V2.3.16 资金账户「对公 / 对私 / 内部」
   ========================================================================== */

/* 开户行 / 纳税人识别号：默认收起，只有选「对公」才展开（跨整行，内部再分两列） */
.corp-extra { display: none; grid-column: 1 / -1; }
.corp-extra.show {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* 账户性质筛选按钮组：一排小按钮，选中的用主色 */
.seg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 10px;
}
.seg-row .btn { font-size: 12px; padding: 3px 10px; }

/* 待标注提醒条：比 scope-note 更醒目一点，但仍是提示而非错误 */
.scope-note.warn-soft {
  background: var(--warn-100);
  border-color: #f3dcc6;
  color: #7a4a12;
}

/* ============================================================================
   V2.3.17 附件与凭证
   ========================================================================== */

/* 附件列表：弹窗内独立滚动，不把弹窗撑到超出屏幕 */
.att-table { margin-top: 4px; }
.att-table th, .att-table td { padding: 6px 8px; font-size: 12.5px; }
.att-table td.att-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.att-table tr.att-dead { opacity: .55; }
.att-table tr.att-dead td.att-name { text-decoration: line-through; }

/* 行内删除确认：原因输入框跟按钮同排，不弹第二个弹窗 */
.att-table .att-why {
  width: 148px;
  height: 26px;
  padding: 2px 8px;
  font-size: 12px;
  margin-right: 4px;
}

/* 附件数量小结 */
.att-sum {
  margin: 12px 0 2px;
  font-size: 12.5px;
  color: var(--muted);
}

/* 货款明细操作列 4 个按钮：压缩内边距，保证 1216px 内容区不出现横向滚动 */
#sup-body table.table td.ops-cell .ops .btn { padding-left: 8px; padding-right: 8px; }

/* ============================================================================
   V2.3.18 合同/发票缺件提示与缺口台账
   ========================================================================== */

/* 凭证列：只放一个 pill，宽度压到最小，给 13 列腾空间 */
#sup-body table.table td.cell-doc { white-space: nowrap; width: 76px; }
#sup-body table.table td.cell-doc .pill { font-size: 11.5px; padding: 1px 6px; }

/* 13 列之后再把「说明」与「供应商」各收一点，1216px 内容区不出现横向滚动 */
#sup-body table.table td.cell-note { max-width: 132px; }
#sup-body table.table td.cell-sup { max-width: 112px; min-width: 96px; }

/* 顶部计数里的强调数字 */
.warn-text { color: #b45309; }

/* 付款弹窗里的缺口黄条内部说明 */
.scope-note.warn-soft .gap-note {
  margin: 6px 0 0;
  line-height: 1.55;
  font-size: 12.5px;
  color: #7a4a12;
}
.scope-note.warn-soft .field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #7a4a12;
}
.scope-note.warn-soft textarea {
  width: 100%;
  min-height: 62px;
  padding: 6px 8px;
  font-size: 12.5px;
  border: 1px solid #f3dcc6;
  border-radius: var(--r-sm, 6px);
  background: #fff;
  resize: vertical;
}

/* 缺口台账：理由列单行省略，已撤回行整体变淡 */
#gap-card table.table td.cell-reason {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#gap-card table.table tr.row-dim { opacity: .55; }

/* V2.4.5b 图片附件「小眼睛」在线预览 ---------------------------------------
   灯箱是独立层级（z-index 200 > modal 95 / toast 120）：核对发票时要连着看
   几张，不能因为点了眼睛就把底下的单据详情或附件弹窗关掉。 */
.att-line { display: flex; align-items: center; gap: 8px; }
.att-line .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.att-eye {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--teal); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.att-eye:hover { border-color: var(--teal); background: var(--teal-100); }
.att-eye:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.att-eye.att-eye-doc { color: var(--muted); font-size: 13px; font-weight: 600; }
.att-eye.att-eye-doc:hover { border-color: var(--navy-600); background: var(--navy-100); }
.att-eye-btn { display: inline-flex; align-items: center; gap: 4px; color: var(--teal); }
.att-eye-btn svg { vertical-align: middle; }

.att-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: rgba(12, 25, 42, .82);
  animation: att-lb-in .16s ease-out;
}
@keyframes att-lb-in { from { opacity: 0; } to { opacity: 1; } }
.att-lb-head, .att-lb-foot {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--surface);
}
.att-lb-head { border-bottom: 1px solid var(--line); }
.att-lb-foot { border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); }
.att-lb-head .grow { flex: 1; min-width: 0; }
.att-lb-head b { display: block; font-size: 14px; color: var(--navy); overflow-wrap: anywhere; }
.att-lb-head .sub { font-size: 11.5px; color: var(--muted); }
.att-lb-esc {
  display: inline-block; margin-left: 2px; padding: 0 4px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  font-size: 10px; color: var(--muted);
}
.att-lb-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 64px;
}
.att-lb-stage img {
  max-width: 100%; max-height: calc(100vh - 180px);
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .15s; background: #fff;
}
.att-lb-stage img.on { opacity: 1; }
.att-lb-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: none; padding: 10px 16px; border-radius: 8px;
  background: rgba(12, 25, 42, .7); color: #eaf1f8; font-size: 13px;
  max-width: 80%; text-align: center; cursor: pointer;
}
.att-lb-msg.on { display: block; }
.att-lb-msg.error { color: #ffd0c7; }
.att-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%; background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.att-lb-nav:hover { background: rgba(255, 255, 255, .28); }
.att-lb-prev { left: 14px; }
.att-lb-next { right: 14px; }
@media (max-width: 720px) {
  .att-lb-stage { padding: 12px 12px; }
  .att-lb-nav { width: 32px; height: 32px; }
  .att-lb-prev { left: 4px; }
  .att-lb-next { right: 4px; }
  .att-lb-foot .muted { display: none; }
}

/* ==========================================================================
   V2.4.5 · 收入 / 支出 CSV 批量导入弹窗
   只增样式，不改既有组件；浅色主题变量沿用 base.css。
   ========================================================================== */
.imp-note {
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 12px; line-height: 1.75; color: var(--text-2);
}
.imp-note b { display: block; margin-bottom: 4px; color: var(--navy); font-size: 12.5px; }
.imp-note strong { color: var(--navy); }
.imp-steps { margin: 12px 0 10px; font-size: 12px; font-weight: 600; color: var(--teal); }
.imp-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.imp-file-label {
  font-size: 12px; color: var(--text-2);
  display: flex; align-items: center; gap: 6px;
}
.imp-file-label input { font-size: 12px; max-width: 270px; }
.imp-ok {
  color: var(--ok); background: var(--ok-100); border: 1px solid #bfe5cf;
  border-radius: 6px; padding: 5px 10px; font-size: 11.5px;
}
.imp-bad {
  color: var(--danger); background: var(--danger-100); border: 1px solid #f5c6c0;
  border-radius: 6px; padding: 8px 12px; font-size: 12px;
  margin-bottom: 8px; line-height: 1.65;
}
.imp-lead { display: block; font-size: 12.5px; line-height: 1.8; padding: 12px 14px; margin-bottom: 10px; }
.imp-lead b { font-size: 13px; }
.imp-muted { font-size: 11px; color: var(--muted); line-height: 1.65; margin: 8px 0; }
.imp-tbl { margin-top: 10px !important; font-size: 11.5px; width: 100%; }
.imp-tbl th, .imp-tbl td { padding: 7px 9px !important; vertical-align: top; }
.imp-tbl td { line-height: 1.6; }
.imp-code { font-family: var(--font-mono); white-space: nowrap; color: var(--navy); font-weight: 600; }

/* ==========================================================================
   V2.4.5 · 待收款（应收账款）工作台
   只增样式：筛选条件较多需要换行，汇总/明细里的关键金额加重。
   ========================================================================== */
#recv-filter-wrap .toolbar { flex-wrap: wrap; row-gap: 8px; }
#recv-body table.table td.num.strong,
#recv-body table.table td.num.amt-in { font-weight: 700; }
#recv-body .imp-note { margin: 0; }

/* ==========================================================================
   V2.4.6 · 待收款二期：催收提醒 / 催收备注弹窗 / 批量收款向导
   只增样式，沿用 base.css 的浅色主题变量。
   ========================================================================== */
.recv-remind-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 18px; font-size: 12px; color: var(--text-2);
}
.recv-remind-bar b { color: var(--navy); font-size: 12.5px; }
.recv-remind-bar strong { color: var(--navy); font-size: 14px; }
.recv-remind-bar .amt-out { font-weight: 700; }

.recv-note-cell {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; min-width: 118px;
}
.recv-note-cell .btn { margin-top: 2px; }
.recv-remind-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 10.5px; line-height: 1.5;
  background: #eef2f7; color: var(--text-2); border: 1px solid #dde5ee;
  white-space: nowrap;
}
.recv-remind-tag.warn { background: var(--warn-100); color: var(--warn); border-color: #f3dcc6; }
.recv-remind-tag.bad  { background: var(--danger-100); color: var(--danger); border-color: #f5c6c0; font-weight: 600; }

.recv-bulk {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 4px 2px; font-size: 12px; color: var(--text-2);
}
.recv-bulk b { color: var(--navy); font-size: 13px; }

#modal .rb-input {
  width: 100%; min-width: 100px; font-size: 12px;
  padding: 5px 7px; box-sizing: border-box;
}
#modal .rb-input[type="text"] { max-width: 150px; }
#modal table.table td:has(.rb-input) { padding: 5px 6px !important; vertical-align: middle; }
#modal textarea#rc-note-text {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  resize: vertical;
}