/* 记账报账系统 —— 主样式。设计基调：干净的中文财务应用，米白底 + 靛蓝主色 + 收绿支红。
   审美判据：家族四层审美判据卷（禁纯黑白、配对令牌、focus-visible 定制、reduced-motion 降级、
   间距出自间距尺 4/8/12/16/24/32；1–2px 发丝级微调不入尺）。机检：test/ui-style.test.js */
:root {
  color-scheme: light; /* 浅色纸感、无暗色适配：系统深色下滚动条/日期控件仍按浅色渲染 */
  --primary: #3b5bdb;
  --primary-dark: #2f4ab8;
  --primary-foreground: #f5f7ff; /* 主色填充上的近白前景（配对令牌，禁纯白） */
  --income: #27ae60;
  --income-foreground: #f4fbf6;
  --expense: #e2554d;
  --expense-foreground: #fdf6f5;
  --bg: #f6f7f9;
  --card: #fcfcfd;               /* 近白卡面，比 --bg 亮一档但不到纯白 */
  --card-foreground: #24292f;
  --border: #e6e8ec;
  --text: #24292f;
  --text-2: #6a737d;
  --ring: #3b5bdb;               /* 键盘焦点环 */
  --expense-dark: #c1352c;
  --tag-draft-bg: #eef1f6;
  --tag-draft-fg: #57606a;
  --tag-submit-bg: #fff3d6;
  --tag-submit-fg: #9a6700;
  --tag-ok-bg: #ddf4e4;
  --tag-ok-fg: #1a7f37;
  --tag-reject-bg: #ffe1de;
  --tag-paid-bg: #dbe4ff;
  --progress-track: #eef0f3;
  --warn: #f2994a;
  --toast-fg: #e9edf5;
  --toast-action: #8ab4ff;
  --print-bg: #fdfdfd;
  --print-line: #333333;
  --print-muted: #444444;
  /* 账本摘要出口「纸张」卡专用：米黄纸底 / 深墨 / 纸纤维边线 / 朱砂章 */
  --paper-bg: #f3ead8;
  --paper-fg: #24302a;
  --paper-fg-muted: #5f6963;    /* 纸底上的辅助文字：--text-2 在米黄底只有 4.0:1，此值 ≥4.5:1 */
  --paper-line: #d4c4a8;
  --paper-edge: #efe6d4;
  --paper-stamp: #8f3b32;
  --radius: 12px;
  --radius-sm: 8px;
  --fs-aux: 14px;
  --fs-xs: 12px;                /* 全站字号下限：旗标、盖章、打印页脚注 */
  --font-num: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 3px rgba(20, 30, 60, .07);
  --shadow-md: 0 4px 16px rgba(20, 30, 60, .14);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --leading-tight: 1.5;
  --leading-body: 1.6;
  --leading-relaxed: 1.7;
  --kb-inset: 0px; /* visualViewport 写入：软键盘顶起高度，记一笔提交条避让 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6; /* --leading-body */
}

/* 键盘焦点可见（交互 MUST：focus-visible 定制，禁全裸）：
   鼠标点按不弹环、Tab 导航必有环；顶栏深底换亮环否则环色沉底 */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
header.topbar :focus-visible { outline-color: var(--primary-foreground); }

.skip-link {
  position: absolute;
  left: max(var(--space-2), env(safe-area-inset-left, 0px));
  top: max(var(--space-2), env(safe-area-inset-top, 0px));
  z-index: 80;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; }

/* ── 顶栏与导航 ───────────────────────── */
header.topbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--primary-foreground);
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px))
    max(var(--space-5), env(safe-area-inset-right, 0px)) 0
    max(var(--space-5), env(safe-area-inset-left, 0px));
}
.topbar .brand { display: flex; align-items: baseline; gap: var(--space-2); }
.topbar h1 { font-size: 20px; font-weight: 700; letter-spacing: 1px; line-height: var(--leading-tight); }
.topbar .slogan { font-size: var(--fs-aux); line-height: var(--leading-tight); opacity: .78; }

.topbar .hub-back {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  margin-left: auto; color: inherit; text-decoration: none; font-size: var(--fs-aux);
}

nav.tabs { display: flex; gap: var(--space-1); margin-top: var(--space-3); }
nav.tabs button {
  appearance: none; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.85);
  padding: var(--space-2) var(--space-5); font-size: 14px; line-height: var(--leading-tight);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: background .15s;
}
nav.tabs button:hover { background: rgba(255,255,255,.22); }
nav.tabs button.active { background: var(--bg); color: var(--primary); font-weight: 600; }
@media (max-width: 480px) {
  nav.tabs button { padding: 8px 0; flex: 1; font-size: var(--fs-aux); white-space: nowrap; }
}

main { max-width: 1080px; margin: 0 auto; padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-6) max(var(--space-4), env(safe-area-inset-left, 0px)); }
section.page { display: none; }
section.page.active { display: block; }

/* ── 卡片与栅格 ───────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--space-4); margin-bottom: var(--space-4);
  color: var(--card-foreground);
}
.card h2 { font-size: calc(var(--fs-aux) + 1px); line-height: var(--leading-tight); margin-bottom: var(--space-3); color: var(--card-foreground); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* 汇总卡保持一行三列（画师快赢②）：塌成单列会把「记一笔」压出首屏——记账应用的核心动线 */
  #ledger-summary { grid-template-columns: repeat(3, 1fr); }
  #ledger-summary .value { font-size: 17px; }
}

/* ── 正文段落（收编静态页内联样式；行高 1.7 落在中文正文 1.5–1.8 区间） ── */
.note { color: var(--text-2); font-size: var(--fs-aux); line-height: var(--leading-relaxed); margin: var(--space-3) 0 var(--space-2); }
.card h2 + .note, .note:first-child { margin-top: 0; }
.muted-aux { color: var(--text-2); font-size: var(--fs-aux); line-height: var(--leading-tight); }
.muted-aux.hint-tight { margin-top: 6px; }
.muted-aux.is-danger { color: var(--expense); }
.muted-aux.is-warn { color: var(--warn); }

/* ── 汇总数字 ───────────────────────── */
.stat { text-align: center; padding: var(--space-2) var(--space-1); }
.stat .label { font-size: var(--fs-aux); line-height: var(--leading-tight); color: var(--text-2); }
.stat .value { font-size: 22px; font-weight: 700; line-height: var(--leading-tight); margin-top: var(--space-1); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.stat .value.income { color: var(--income); }
.stat .value.expense { color: var(--expense); }
/* 结余用复式记账的账本双下划线，缩到数字本身而不是整列宽 */
#ledger-summary .ledger-balance {
  display: inline-block;
  border-bottom: 3px double currentColor;
  padding-bottom: 2px;
}

/* ── 表单 ───────────────────────── */
form .row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
label.field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-aux); line-height: var(--leading-tight); color: var(--text-2); flex: 1; min-width: 130px; }
/* 条件字段（转出/转入/调整原因/星期几/哪个月）用 hidden 属性切换：flex 容器会盖掉 UA 的 [hidden]，须显式压回 */
label.field[hidden] { display: none; }
/* 字段级错误提示（金额即时校验）：常驻在字段旁，不像 toast 会自动消失 */
.field-error { color: var(--expense); font-size: var(--fs-aux); line-height: var(--leading-tight); }
#tx-form .field input,
#tx-form .field select {
  scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--kb-inset, 0px));
}
#tx-form .tx-submit-bar {
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px) + var(--kb-inset, 0px));
}
#tx-submit-kbd { white-space: nowrap; }
@media (max-width: 480px) {
  #tx-form .tx-submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--card);
    margin-bottom: 0;
    padding-top: var(--space-2);
  }
  #tx-submit-btn { width: 100%; min-height: 44px; }
  #tx-submit-kbd { display: none; }
}
/* 全局保存失败横幅：所有页签可见，不像 toast 会自动消失 */
.save-error-banner { margin: 0 var(--space-4) var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: rgba(224, 49, 49, .08); border: 1px solid rgba(224, 49, 49, .25); font-size: var(--fs-aux); line-height: var(--leading-tight); }
.backup-remind-banner { margin: 0 var(--space-4) var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: rgba(59, 91, 219, .08); border: 1px solid rgba(59, 91, 219, .22); font-size: var(--fs-aux); line-height: var(--leading-tight); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.backup-remind-banner .btn { margin: 0; }
.data-health-banner, .sync-status-banner {
  margin: 0 var(--space-4) var(--space-3); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font-size: var(--fs-aux); line-height: var(--leading-tight);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.data-health-banner { background: rgba(224, 49, 49, .08); border: 1px solid rgba(224, 49, 49, .25); }
.sync-status-banner { background: rgba(59, 91, 219, .08); border: 1px solid rgba(59, 91, 219, .22); }
.data-health-banner .btn, .sync-status-banner .btn { margin: 0; }
/* 类＋属性两级特异性已压过上面的 display:flex，不必强制优先 */
.data-health-banner[hidden], .sync-status-banner[hidden], .backup-remind-banner[hidden], .save-error-banner[hidden] {
  display: none;
}
.data-health-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#st-plain-hint { margin-top: 0; }
#ledger-health-slots { margin: var(--space-2) 0 0; padding-left: 1.2em; }
#ledger-health-slots li { margin: var(--space-1) 0; line-height: var(--leading-tight); }
#ledger-health-slots .btn { margin: 0 0 0 var(--space-2); }
/* 密度失衡矫正（画师快赢①）：周期表单最多七件一行、报销明细行五件＋删行，
   改自适应网格后条件字段（星期几/哪个月）出现时整行按格重排，不再随机挤压换行 */
#rc-form .row, #rb-items [data-rb-item] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* 勾选框件（画师快赢④）：收编内联样式并给触屏加大热区 */
.field.checkbox span { display: flex; align-items: center; min-height: 44px; }
.field.checkbox input { width: 18px; height: 18px; }
input, select, textarea {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-size: 14px; line-height: var(--leading-tight); font-family: inherit;
  background: var(--card); color: var(--card-foreground); width: 100%;
}
input[inputmode="decimal"] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(59, 91, 219, .25); border-color: var(--primary); }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: none; background: var(--card); padding: var(--space-2) var(--space-4); cursor: pointer; font-size: 14px; line-height: var(--leading-tight); color: var(--text-2); }
.seg button:not(.active):hover { background: var(--tag-draft-bg); color: var(--text); }
.seg button.active { background: var(--primary); color: var(--primary-foreground); }
.seg button.active.expense { background: var(--expense); color: var(--expense-foreground); }
.seg button.active.income { background: var(--income); color: var(--income-foreground); }
.seg button.active.adjust { background: var(--text-2); color: var(--bg); }

button.btn {
  appearance: none; border: none; cursor: pointer;
  background: var(--primary); color: var(--primary-foreground);
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm); font-size: 14px; line-height: var(--leading-tight);
  transition: background .15s;
}
button.btn:not(:disabled):hover { background: var(--primary-dark); }
button.btn.ghost { background: var(--card); color: var(--primary); border: 1px solid var(--primary); }
button.btn.danger { background: var(--card); color: var(--expense); border: 1px solid var(--expense); }
/* 白底按钮此前悬停无任何反馈（被 .ghost/.danger 同特异性后置盖掉）：给一层主色/红色淡晕 */
button.btn.ghost:not(:disabled):hover { background: rgba(59, 91, 219, .08); }
button.btn.danger:not(:disabled):hover { background: rgba(226, 85, 77, .08); }
/* 禁用态全站统一（OCC 面板「合并未冲突明细」「另存新草稿」会被 disabled，此前与可点无异） */
button.btn:disabled { opacity: .55; cursor: not-allowed; }
button.btn.small { padding: 8px 12px; font-size: var(--fs-aux); min-height: 44px; }
nav.tabs button, button.btn, .seg button { min-height: 44px; }
/* 危险分级（画师快赢⑤）：实心红只给全应用最毁灭性的「清空全部数据」；
   列表行内高频小「删除」维持白底红边（有确认兜底，实心红会让每行都在尖叫） */
#clear-data { background: var(--expense); color: var(--expense-foreground); border: none; }
#clear-data:hover { background: var(--expense-dark); }

/* ── 列表 / 表格 ───────────────────────── */
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); font-size: var(--fs-aux); line-height: var(--leading-tight); }
table.list th { color: var(--text-2); font-weight: 500; font-size: var(--fs-aux); }
table.list td.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
table.list td .amount.income { color: var(--income); font-weight: 600; }
table.list td .amount.expense { color: var(--expense); font-weight: 600; }
table.list td .amount.transfer { color: var(--primary); font-weight: 600; }
table.list td .amount.adjust { color: var(--text); font-weight: 600; }
/* 六列流水行横向扫读辅助；触屏 :hover 会粘住，只在有指针的设备开 */
@media (hover: hover) {
  table.list tbody tr:hover > td { background: var(--bg); }
}
.empty-tip { color: var(--text-2); text-align: center; padding: var(--space-5) 0; font-size: var(--fs-aux); line-height: var(--leading-body); }
.filter-summary { text-align: right; padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-aux); line-height: var(--leading-tight); color: var(--text-2); font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.tag {
  display: inline-block; padding: var(--space-1) var(--space-2); border-radius: 999px;
  font-size: var(--fs-aux); line-height: var(--leading-tight); background: var(--tag-draft-bg); color: var(--text-2);
}
.tag.st-草稿 { background: var(--tag-draft-bg); color: var(--tag-draft-fg); }
.tag.st-已提交 { background: var(--tag-submit-bg); color: var(--tag-submit-fg); }
.tag.st-已批准 { background: var(--tag-ok-bg); color: var(--tag-ok-fg); }
.tag.st-已驳回 { background: var(--tag-reject-bg); color: var(--expense-dark); }
.tag.st-已打款 { background: var(--tag-paid-bg); color: var(--primary-dark); }
/* 通用语义别名（画师快赢③）：流水标记/周期规则不再借用报销单状态类——
   st-* 回归单据状态专用，调整单据配色不会误伤别处 */
.tag.ok { background: var(--tag-ok-bg); color: var(--tag-ok-fg); }
.tag.pending { background: var(--tag-submit-bg); color: var(--tag-submit-fg); }

/* ── 预算进度条 ───────────────────────── */
.budget-row { margin-bottom: var(--space-3); }
.budget-row .meta { display: flex; justify-content: space-between; font-size: var(--fs-aux); line-height: var(--leading-tight); margin-bottom: var(--space-1); }
.progress { height: 8px; background: var(--progress-track); border-radius: 999px; overflow: hidden; }
.progress .fill { height: 100%; border-radius: 999px; background: var(--income); transition: width .3s; }
.progress .fill.warn { background: var(--warn); }
.progress .fill.over { background: var(--expense); }

/* ── 图表区 ───────────────────────── */
canvas.chart { width: 100%; height: 240px; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: var(--fs-aux); line-height: var(--leading-tight); color: var(--text-2); }
.legend .dot { display: inline-block; width: var(--radius-sm); height: var(--radius-sm); border-radius: 50%; margin-right: 4px; }
.legend .dot.income { background: var(--income); }
.legend .dot.expense { background: var(--expense); }

/* ── 工具条 ───────────────────────── */
.toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.toolbar .spacer { flex: 1; }
/* 工具条内的卡片标题与说明段：由工具条负责外边距，自身归零（收编原 index.html 内联 margin:0） */
.toolbar h2 { margin: 0; }
.toolbar-note { margin: 0; flex: 1; }
.toolbar.form-tail-bar { margin-bottom: 0; }              /* 表单末行按钮条：卡片 padding 已够 */
.toolbar.chart-head { margin-bottom: var(--space-1); }    /* 图表卡标题条：紧贴画布 */
/* 筛选控件收窄（收编原内联 max-width；480px 以下由各 *-filter-bar 规则放开） */
#tx-search { max-width: 220px; }
#tx-filter-type { max-width: 130px; }
#tx-filter-cat { max-width: 150px; }
#rb-search { max-width: 260px; }
#rb-filter-status { max-width: 130px; }
.rb-batch-bar .field { max-width: 240px; }
#account-new-name { max-width: 200px; }
.month-nav { display: flex; align-items: center; gap: var(--space-2); }
.month-nav[hidden] { display: none; }
.month-nav button { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); cursor: pointer; line-height: var(--leading-tight); min-height: 44px; min-width: 44px; }
.month-nav button:hover { background: var(--bg); border-color: var(--text-2); }
/* 统计页自定义区间（起 · 至 · 止 · 应用）：hidden 属性切换。
   日期框按内容宽、允许折行：此前 width:100% 的日期框把「应用」挤成两行，390px 下更是把按钮推出视口 */
#st-custom-range { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; max-width: 100%; }
#st-custom-range[hidden] { display: none; }
#st-custom-range input[type="date"] { width: auto; }
#st-custom-range .btn { white-space: nowrap; }
.search-all-label { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: normal; min-height: 44px; }
.ledger-pending-rb { margin-top: calc(var(--space-2) * -1); color: var(--tag-submit-fg); }
.ledger-recent-rb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: calc(var(--space-2) * -1);
}
.ledger-recent-rb[hidden] { display: none; }
.rb-recent-bar[hidden] { display: none; }
.rb-recent-pick-bar { margin-bottom: var(--space-2); }
.rb-recent-groups { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.rb-recent-group-title { font-size: var(--fs-aux); color: var(--text-2); margin: var(--space-1) 0 0; }
.rb-recent-pick-row,
.rb-recent-targets label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--fs-aux);
  line-height: var(--leading-tight);
}
.rb-recent-pick-row input,
.rb-recent-targets input { width: 18px; height: 18px; margin-top: 4px; flex: 0 0 auto; }
.rb-recent-target-set {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.rb-recent-target-set legend { padding: 0 var(--space-1); font-size: var(--fs-aux); }
.rb-recent-targets { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.rb-inbox {
  animation: rb-inbox-in 180ms ease-out;
}
@keyframes rb-inbox-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.rb-inbox-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-4);
  align-items: start;
}
.rb-inbox-step {
  font-size: var(--fs-aux);
  letter-spacing: 0.08em;
  color: var(--text-2);
  border-bottom: 1px dashed var(--border);
  padding-bottom: var(--space-1);
  margin: 0 0 var(--space-3);
  font-weight: 600;
}
.rb-inbox-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.rb-inbox-period { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.rb-inbox-new-fields { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.rb-inbox-new-fields[hidden] { display: none; }
.rb-recent-pick-row {
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.rb-recent-pick-row:has(input:checked) {
  background: rgba(59, 91, 219, .07);
  box-shadow: inset 3px 0 0 var(--primary);
}
.rb-inbox-mismatch {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--warn);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  background: rgba(242, 153, 74, .08);
  font-size: var(--fs-aux);
  line-height: var(--leading-tight);
}
.rb-inbox-mismatch[hidden] { display: none; }
.rb-inbox-flag {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 6px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text);
  background: rgba(242, 153, 74, .12);
}
.rb-recent-targets label.is-mismatch {
  box-shadow: inset 3px 0 0 var(--warn);
  background: rgba(242, 153, 74, .06);
}
.rb-inbox-stale {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-aux);
}
.rb-inbox-stale[hidden] { display: none; }
.rb-inbox-summary {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(59, 91, 219, .06);
  border: 1px solid rgba(59, 91, 219, .18);
  font-size: var(--fs-aux);
  line-height: var(--leading-relaxed);
}
.rb-inbox-actions { margin: 0; }
/* #rb-recent-confirm 的禁用态已并入全站 button.btn:disabled */
@media (max-width: 760px) {
  .rb-inbox-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rb-recent-bar,
  .rb-recent-pick-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .rb-recent-bar button,
  .rb-recent-pick-bar button,
  #rb-recent-confirm,
  #rb-recent-cancel,
  #tx-go-recent-rb,
  #rb-occ-refresh,
  #rb-occ-save-as,
  #rb-occ-merge,
  #rb-occ-back {
    width: 100%;
    min-height: 44px;
  }
}
@media (max-width: 480px) {
  .tx-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .tx-filter-bar #tx-search,
  .tx-filter-bar #tx-filter-type,
  .tx-filter-bar #tx-filter-cat {
    max-width: none;
    width: 100%;
  }
  .tx-filter-bar .search-all-label,
  .tx-filter-bar #tx-mark-pending-rb {
    width: 100%;
    justify-content: flex-start;
  }
}
input[type="file"] { min-height: 44px; }

/* ── 报销单详情 ───────────────────────── */
.rb-detail .items-editor .row { align-items: flex-end; }
.rb-history { font-size: var(--fs-aux); line-height: var(--leading-relaxed); color: var(--text-2); margin-top: var(--space-2); }
.rb-history li { margin-left: var(--space-4); }
.rb-pack-preview {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-aux);
  line-height: var(--leading-relaxed);
  color: var(--text-2);
}
.rb-pack-preview p { margin: 0 0 4px; }
.rb-pack-preview[hidden] { display: none; }
@media (max-width: 480px) {
  .rb-pack-bar,
  .rb-batch-bar,
  .rb-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .rb-batch-bar .field,
  .rb-batch-bar select,
  .rb-batch-bar button,
  .rb-filter-bar #rb-search,
  .rb-filter-bar #rb-filter-status,
  .rb-pack-bar select,
  .rb-pack-bar button {
    max-width: none;
    width: 100%;
  }
  /* 报销包工具条由 app.js 渲染，其 .field 仍带内联 max-width:240px，只有这一处必须强制优先压过内联 */
  .rb-pack-bar .field {
    max-width: none !important;
    width: 100%;
  }
}

/* ── 提示 ───────────────────────── */
#toast {
  /* bottom 72px：34px 时会盖住卡片尾部的合计与操作区（反馈遮住它反馈的对象） */
  position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: rgba(30, 34, 44, .92); color: var(--toast-fg); /* 暗底不用纯白文本（暗色三律） */
  padding: var(--space-3) max(var(--space-5), env(safe-area-inset-right, 0px)) var(--space-3) max(var(--space-5), env(safe-area-inset-left, 0px)); border-radius: 999px; font-size: var(--fs-aux); line-height: var(--leading-tight);
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  max-width: min(80vw, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 2 * var(--space-4))); z-index: 99;
}
#toast.show { opacity: 1; }
#toast.actionable { pointer-events: auto; }
#toast #toast-action {
  appearance: none; cursor: pointer; margin-left: 12px;
  background: transparent; color: var(--toast-action); border: 1px solid rgba(138, 180, 255, .6);
  border-radius: 999px; padding: 2px 12px; font-size: var(--fs-aux);
  min-height: 44px;
}
#toast #toast-action:hover { background: rgba(138, 180, 255, .15); }

footer.foot { text-align: center; color: var(--text-2); font-size: var(--fs-aux); line-height: var(--leading-body); padding: var(--space-4) 0 calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }

/* ── 发票缩略图与灯箱 ───────────────────────── */
.invoice-thumb {
  width: 54px; height: 54px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in;
  vertical-align: middle;
}
#lightbox {
  position: fixed; inset: 0; z-index: 100;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: rgba(10, 12, 20, .8);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
#lightbox[hidden] { display: none; }
#rb-occ-panel {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgba(20, 30, 60, .45);
}
#rb-occ-panel[hidden] { display: none; }
.rb-occ-card {
  width: min(520px, 100%);
  max-height: min(80vh, 80dvh);
  overflow: auto;
  background: var(--card);
  color: var(--card-foreground);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
}
#rb-occ-title { margin: 0 0 var(--space-3); font-size: 1.1rem; }
#rb-occ-title:focus { outline: none; }
#rb-occ-title:focus-visible { box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius-sm); }
#rb-occ-msg { margin: 0 0 var(--space-3); color: var(--text); }
#rb-occ-summary { margin: 0 0 var(--space-3); color: var(--text); font-size: var(--fs-aux); }
#rb-occ-diff { font-size: var(--fs-aux); color: var(--text-2); margin-bottom: var(--space-4); }
#rb-occ-diff ul { margin: var(--space-2) 0 var(--space-3); padding-left: 1.2em; }
.rb-occ-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}
.rb-occ-actions .btn { min-height: 44px; }
#page-ledger { scroll-margin-top: calc(var(--space-2) + env(safe-area-inset-top, 0px)); }
#lightbox img { max-width: 92vw; max-height: 92vh; max-height: 92dvh; border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow-md); }

/* ── 移动端表格横向滚动 ───────────────────────── */
#tx-list, #rb-list, #st-category-table, #st-account-table, #rc-list { overflow-x: auto; }

/* ── 触屏设备：交互控件抬到 44px 触控基线，防列表里误触隔壁的「删除」 ── */
@media (pointer: coarse) {
  nav.tabs button, button.btn, .seg button, .month-nav button,
  select, input:not([type="checkbox"]), #toast #toast-action { min-height: 44px; }
  button.btn.small { padding: 8px 16px; font-size: var(--fs-aux); }
  .month-nav button { padding: 8px 16px; }
  table.list th, table.list td { padding: var(--space-3); }
  .field.checkbox span { min-height: 44px; } /* 勾选热区靠整行 label 撑满 */
  .field.checkbox input { width: 24px; height: 24px; }
}

/* 账本纸张 / 深墨 / 克制盖章：能力出口独有性格，不套实验室科幻皮或夜色金边 */
#cap-export-card.cap-export-paper {
  position: relative;
  background: var(--paper-bg);
  color: var(--paper-fg);
  border: 1px solid var(--paper-line);
  box-shadow: 0 1px 0 var(--paper-edge), 0 8px 24px rgba(36, 48, 42, .08);
  overflow: hidden;
}
#cap-export-card.cap-export-paper h2 { color: var(--paper-fg); letter-spacing: 0.08em; }
/* 纸底上的说明文字换深一档的墨灰：--text-2 落在米黄底只有 4.0:1，不够 AA */
#cap-export-card.cap-export-paper .note { color: var(--paper-fg-muted); }
#cap-export-card .cap-export-will { padding-left: var(--space-5); margin: var(--space-2) 0 var(--space-3); }
#cap-export-card .cap-export-actions .btn { min-height: 44px; }
#cap-export-card.is-unfolded {
  animation: cap-export-unfold .45s ease-out;
}
.cap-export-stamp {
  position: absolute;
  right: var(--space-4);
  top: var(--space-4);
  transform: rotate(-12deg);
  border: 2px solid var(--paper-stamp);
  color: var(--paper-stamp);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: .42;
  pointer-events: none;
}
.cap-export-stamp.is-inked {
  opacity: .92;
  animation: cap-export-stamp .35s ease-out;
}

@keyframes cap-export-unfold {
  from { transform: translateY(6px); opacity: .65; }
  to { transform: none; opacity: 1; }
}
@keyframes cap-export-stamp {
  from { transform: rotate(-12deg) scale(1.25); opacity: 0; }
  to { transform: rotate(-12deg) scale(1); opacity: .92; }
}

/* ── 动效降级（动效 MUST：任何过渡都要能被系统「减弱动态效果」关掉） ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  #cap-export-card.cap-export-paper,
  #cap-export-card.is-unfolded,
  .cap-export-stamp,
  .cap-export-stamp.is-inked {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
  .cap-export-stamp { opacity: .7; transform: rotate(-12deg); }
}

#print-area { display: none; }
/* 打印块位于全表末尾且同特异性后置：#lightbox/#rb-occ-panel 的 display:flex 与 #print-area 的 none 均被按序覆盖；
   显隐全部走 hidden 属性后不再有内联 display 需要强制压制 */
@media print {
  body > header, body > main, body > footer, #toast, #lightbox, #rb-occ-panel { display: none; }
  #print-area { display: block; }
  body { background: var(--print-bg); }
}
#print-area .p-title { text-align: center; font-size: 22px; letter-spacing: 6px; margin: 8px 0 4px; }
#print-area .p-meta { display: flex; justify-content: space-between; margin: 8px 0; font-size: 13px; }
#print-area table { width: 100%; border-collapse: collapse; font-size: 13px; }
#print-area th, #print-area td { border: 1px solid var(--print-line); padding: 4px 8px; text-align: left; }
#print-area .p-total td { font-weight: 700; }
#print-area .p-sign { display: flex; justify-content: space-between; margin-top: 32px; font-size: 13px; }
#print-area .p-sign span { min-width: 28%; }
#print-area .p-history { margin-top: 16px; font-size: var(--fs-xs); color: var(--print-muted); }