diff --git a/ui/README.md b/ui/README.md
index a4dddc3..6ffdc7e 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -175,18 +175,21 @@ ui/
 - **刷新恢复**：DOMContentLoaded 先 `pendingHashView = viewFromHash()`；登录成功恢复 `pendingHashView || "dashboard"`（游客浏览 / 未登录态不冲突）；
 - **游客拦截**：游客访问受限 hash（如 `#/settings`）→ `switchView` 内 `GUEST_VIEWS` 拦截（toast 提示），视图与 URL 均保持原状、不入栈新条目。
 
-## 交易汇总条约定（v1.19，rant 2026-08-17T20:39:30 B）
+## 交易汇总卡约定（v1.19 → v1.23 改版，rant 2026-09-11T16:23:43 第 7 节）
 
-- 交易记录页卡片顶部（表格上方）有**紧凑汇总条** `#tx-summary`（`.tx-summary`，三列 inline，不引入新布局）：**总收入 / 总支出 / 净变化**，正数 `+` 绿（`var(--ok)`）、负数 `-` 红（`var(--danger-text)`）、零值中性显示 `0`；
-- **随 tab 过滤联动**：切换「全部 / 消费 / 收益」tab 即时重算；且与表格**列筛选**一致——汇总基于 `filterRows(list, TX_COLUMNS, txTable.filters)`（`buildDataTable` 的筛选逻辑抽出的公共函数），反映与表格可见行相同的过滤集，**不受分页影响**；
-- 窄屏（≤560px）自动收窄间距 / 字号，`flex-wrap` 换行兜底。
+- 交易记录页顶部为**汇总卡** `#tx-summary`（`.stat-grid` + 5 张 `.stat-card`，改用 PR3 通用组件层）：**消费 / 收益 / 点数变化 / Token 合计 / 记录数**，正数 `var(--ok)`、负数 `var(--danger-text)`、零值中性；
+- **口径不变**（数据契约未动）：汇总值来自后端 `summary` 全量 SQL 聚合（`filterRows(list, TX_COLUMNS, txTable.filters)` 为无 summary 时的兜底），**不受分页影响**；「记录数」取后端 `total`（真分页下即当前筛选条件的全量条数）；
+- 工具栏右侧 `#tx-count` 同步显示 `tx.pager.count`（共 N 条），与汇总卡的记录数同源；
+- 图表：`#tx-trend` 改用原型 `.trend` 双色柱状（消费 / 收益两柱 + `.legend`），数据源仍是 `/api/transactions/trend`；**x 轴按请求窗口补零，保证左→右时间递增且柱距恒定**（后端 GROUP BY 只返回有交易的桶，缺行会导致柱子左移——原型同款 bug 的根因）；
+- 窄屏（≤560px）`.stat-grid` 两列、`.trend` 高度收紧。
 
 ## select 美化约定（v1.19，rant 2026-08-17T20:39:30 C）
 
 - 全站 `select` **移除原生箭头**（`appearance:none` + `-webkit-appearance:none`），改用**自定义 SVG 下拉箭头**：`--select-arrow` CSS 变量（内联 data-URI，深色主题浅色箭头 `#aab6c8`、亮色主题深色箭头 `#55627a`，`url("data:image/svg+xml,…")` 内空格须 `%20` 编码）；
 - `padding-right` 预留箭头空间（`select.input` 30px / `.th-filter` 24px / page-size 22px）；**hover / focus 边框同 input**（`var(--accent)`，focus 加 `box-shadow: 0 0 0 1px var(--accent)` 光圈）；`disabled` 态 `opacity:.55` + `not-allowed`；
 - **覆盖所有 select 来源**：静态 `.input`（市场筛选、共享表单三级联动、设置页）、动态 `select.th-filter`（表格列筛选）、`select[data-page-size]`（分页器每页条数）；
-- ⚠️ 注意：这些选择器的规则**必须用 `background-color` 而非 `background` 简写**（简写会把 `background-image` 置 none 抹掉箭头）；`select.input option { background: var(--bg-card) }`（下拉项深色）与 `select.input.input-error`（错误红边框）保持不动。
+- ⚠️ 注意：这些选择器的规则**必须用 `background-color` 而非 `background` 简写**（简写会把 `background-image` 置 none 抹掉箭头）；`select.input option { background: var(--bg-card) }`（下拉项深色）与 `select.input.input-error`（错误红边框）保持不动；
+- ⚠️ `.th-filter` 自带 `width:100%`（表头列筛选需要撑满单元格），因此**工具栏里的直属 select 必须显式 `width:auto`**（`.toolbar > select`）——否则交易页时间范围下拉会拉伸到整行（C1978 视觉复查发现）。
 
 ## toast 队列约定（v1.19，rant 2026-08-17T20:39:30 D）
 
@@ -259,7 +262,7 @@ ui/
 
 ## 交易记录导出 CSV 约定（v1.20，rant 2026-08-17T20:46:57 E）
 
-- 入口：交易页 tab 下右对齐 **`#tx-export-btn`「导出 CSV」**（`.toolbar` justify-end + `btn-ghost`），`bindEvents` 绑 `exportTxCsv`；
+- 入口：交易页 page-head 右上 **`#tx-export-btn`「导出 CSV」**（`.btn.btn-secondary.btn-sm`），`bindEvents` 绑 `exportTxCsv`；
 - 数据范围：**当前筛选可见行** = tab（全部/消费/收益）→ `filterRows(list, TX_COLUMNS, txTable.filters)`（与表格、汇总条同一数据源）；无数据 → toast info 不导出；
 - 格式：**UTF-8 BOM**（`"\uFEFF"` 前缀）+ `\r\n` 换行 + 表头 `时间,类型,模型 / Key,Token 用量,点数,状态`；类型用 `TX_TYPE` 中文映射；点数正负号原值；字段含 `,`/`"`/换行按 RFC4180 双引号转义（`cell()` 助手）；
 - 下载：`Blob(type="text/csv;charset=utf-8")` → `URL.createObjectURL` → 临时 `<a download>` click → `remove()` → `setTimeout 1s` revoke；文件名 **`aitokenpool-transactions-YYYYMMDD.csv`**（`new Date()` 本地日期）；
@@ -304,7 +307,7 @@ ui/
 
 ## 界面国际化 i18n 约定（v1.21.1，rant 2026-08-18T20:49:22 + 21:40:10 去中英混排）
 
-- **语言包**：`ui/js/i18n.js` 零依赖 IIFE，`I18N = { zh, en }` 双词典（563 键 ×2，覆盖导航/登录/视图标题/通用/仪表盘/市场/共享/钱包/交易/设置/管理/运营/聊天/游客/相对时间/帮助/tour/主题/错误映射）；`window.t(key, vars)` 查当前语言，**缺失回退 zh，再缺回退 key 本身**；`{var}` 占位符插值；
+- **语言包**：`ui/js/i18n.js` 零依赖 IIFE，`I18N = { zh, en }` 双词典（733 键 ×2，覆盖导航/登录/视图标题/通用/仪表盘/市场/共享/钱包/交易/设置/管理/运营/聊天/游客/相对时间/帮助/tour/主题/错误映射）；`window.t(key, vars)` 查当前语言，**缺失回退 zh，再缺回退 key 本身**；`{var}` 占位符插值；
 - **切换机制**：设置页「偏好 → 界面语言」下拉（`#prefs-lang`，zh/en）→ `I18n.setLang()`：写 `localStorage('atp_lang')` + `document.documentElement.lang` 同步（zh→`zh-CN` / en→`en`）+ 派发 `atp:langchange` → app.js 重渲染 `renderNav()` + `renderView(activeView)` + `document.title`（引导中额外 `renderTourStep()`）；**首载**：localStorage → `navigator.language` 前缀（`zh*`→zh，否则 en）→ 默认 zh；切换即时生效无需刷新；
 - **静态文案**：`index.html` 内静态中文用 `data-i18n` / `data-i18n-ph`（placeholder）/ `data-i18n-title`（title）标记，`applyStatic()` 启动时与每次切换时批量替换；**容器含表单控件的 `<label>` 用 `<label><span data-i18n="KEY">文本</span><input…></label>` 结构**（避免 innerHTML 替换销毁控件）；
 - **动态文案**：`app.js` 面向用户字符串全部走 `t('key')`；**语言敏感常量存 key 而非文案**（NAV/VIEW_TITLE/TOUR_STEPS/HELP_KEYS 存 key，渲染时 `T()` 解析；SHARE_STATUS/RAISE_STATUS 的 `text` 为函数；TX_COLUMNS 的 `title`/`options` 为函数；`DAY_LABELS` 动态 `T("share.day."+n)`）——保证切换语言后重渲染即时生效；
diff --git a/ui/css/style.css b/ui/css/style.css
index 19c8045..314b992 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -343,53 +343,16 @@ select.input option { background: var(--bg-card); }
    定义见本节末尾「通用组件层」；此处保留 .sub 副说明的历史写法 */
 .stat-card .sub { color: var(--text-dim); font-size: 12px; }
 
-/* 交易汇总条（rant 20:39:30 B：紧凑 inline 条，随 tab/筛选联动） */
-.tx-summary { display: flex; flex-wrap: wrap; gap: 28px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
-.tx-summary .ts-item { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
-.tx-summary .ts-label { color: var(--text-mute); font-size: 12px; }
-.tx-summary .ts-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
-.tx-summary .ts-value.ok { color: var(--ok); }
-.tx-summary .ts-value.danger { color: var(--danger-text); }
-
-/* 交易趋势图（rant 2026-08-23T16:01:07 需求 2）：SVG 折线图，无外部依赖 */
-.tx-trend { padding: 8px 16px 6px; border-bottom: 1px solid var(--border); }
-.tx-trend-title { color: var(--text-mute); font-size: 11px; margin-bottom: 1px; }
-/* 指标切换（rant 2026-08-23T16:17:18 需求 2） */
-.tx-trend-switch { display: flex; gap: 5px; margin: 4px 0 6px; flex-wrap: wrap; }
-.tsw-btn {
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-dim);
-  padding: 2px 10px;
-  border-radius: 999px;
-  cursor: pointer;
-  font-size: 11px;
-}
-.tsw-btn:hover { color: var(--text); }
-.tsw-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
-.tx-trend-chart { position: relative; }
-.tx-trend svg { width: 100%; height: auto; display: block; }
-.tx-trend-axis { fill: var(--text-mute); font-size: 8px; }
-/* 平滑折线 + 渐变面积（sparkline 化，rant 2026-08-24T10:51:57.821209：
-   无网格线、无数据点圆、渐变 0.35→0、teal 主题色系——消费用主强调色区分） */
-.tx-trend svg .trend-line { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
-.tx-trend svg .trend-area { stroke: none; }
-/* 悬停引导线 + tooltip */
-.tx-trend-guide { position: absolute; top: 2px; bottom: 6px; width: 1px; background: var(--text-dim); opacity: 0.45; display: none; pointer-events: none; }
-.tx-trend-tip {
-  position: absolute; display: none; pointer-events: none;
-  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
-  padding: 6px 9px; font-size: 12px; color: var(--text);
-  box-shadow: var(--shadow); z-index: 5; white-space: nowrap; line-height: 1.5;
-}
-.tx-trend-tip b { color: var(--accent-text); font-weight: 600; }
-.tx-trend-legend { display: flex; gap: 10px; font-size: 10px; color: var(--text-mute); padding-top: 2px; align-items: center; }
-.tx-trend-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
-.tx-trend-dot.exp { background: var(--accent); }
-.tx-trend-dot.inc { background: var(--ok); }
-.tx-trend-dot.net { background: var(--accent-text); }
-.tx-trend-dot.tok { background: var(--warn); }
-.tx-trend-empty { color: var(--text-mute); font-size: 13px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
+/* 交易汇总卡（rant 2026-09-11T16:23:43 第 7 节：原型 .stat-grid + .stat-card 取代旧 inline 汇总条；
+   .stat-grid 的 auto-fit 栅格已在上方定义，卡片内不再需要底部分隔线） */
+
+/* 交易趋势卡（rant 2026-09-11T16:23:43 第 7 节）：改用原型 .trend 双色柱状图渲染
+   （renderTxTrend → .trend-col/.trend-pair/.trend-bar，类定义见上方「图表」节），
+   旧 SVG 折线图（.tx-trend-title / .tx-trend-switch / .tsw-btn / .tx-trend-chart /
+   .tx-trend-axis / .trend-line / .trend-area / 悬停 guide+tip / .tx-trend-legend/dot）
+   及 .tx-trend-empty 随之移除——趋势空态复用 .empty.compact。
+   .trend 高度固定（150px），窄屏由媒体查询收窄。 */
+
 
 .table-wrap { overflow-x: auto; }
 .table-wrap.compact { margin-top: 4px; }
@@ -409,9 +372,7 @@ select.input option { background: var(--bg-card); }
 .table th.num { text-align: right; }
 .table th.num .th-sort { text-align: right; }
 /* Token 用量明细（rant 2026-08-21T14:53:20：输入/缓存命中/输出 随行展示，等宽小字） */
-.tx-brk { margin-top: 2px; font-size: 11px; line-height: 1.2; color: var(--text-dim); white-space: nowrap; }
-.tx-brk .brk-c { color: var(--accent); }
-.tx-brk .brk-o { color: var(--ok); }
+
 /* 斑马纹（rant 15:50:05 A.3：行 hover 高亮保留，hover 覆盖斑马纹） */
 .table tbody tr:nth-child(even) { background: var(--table-stripe); }
 .table tbody tr:hover { background: var(--bg-hover); }
@@ -453,8 +414,11 @@ select.input option { background: var(--bg-card); }
 .badge.accent { color: var(--accent-text); border-color: color-mix(in oklch, var(--accent) 40%, transparent); background: var(--accent-soft); }
 .badge.dim { color: var(--text-mute); }
 
-.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
+.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
 .toolbar .input { max-width: 240px; }
+/* 工具栏内的下拉不得占满整行：.th-filter 的 width:100% 是给表头列筛选行的，
+   直接放进 flex 工具栏会被拉伸到整宽（C1978 视觉复查发现）。工具栏直属 select 一律按内容宽度。 */
+.toolbar > select { width: auto; max-width: 240px; }
 .toolbar-count { align-self: center; color: var(--text-mute); font-size: 12px; margin-left: auto; }
 
 /* 搜索增强（rant 18:06:09 D：清空 × 按钮 + <mark> 关键词高亮；
@@ -849,10 +813,22 @@ mark {
 .page-head p { color: var(--text-mute); margin-top: 2px; }
 
 .wallet-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
-.balance-big { font-size: 42px; font-weight: 800; color: var(--accent-text); line-height: 1.2; }
+.balance-big {
+  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
+  font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -0.03em; line-height: 1;
+  color: var(--accent-text); margin-top: 8px;
+}
+.balance-big .unit { font-size: 16px; font-weight: 500; color: var(--text-mute); margin-left: 6px; }
+/* wallet-hero 的标签/提示（原型 h3 12px muted + hint 行；rant 2026-09-11T16:23:43 第 6 节） */
+.wallet-hero-label { font-size: 12px; color: var(--text-mute); margin-bottom: 0; }
+.wallet-hero-hint { display: block; margin-top: 10px; }
+.wallet-hero-hint b { color: var(--text); font-weight: 600; }
+.wallet-hero-note { display: block; margin-top: 10px; }
 .wallet-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .wallet-note { font-size: 12px; }
 .wallet-hint { color: var(--text-mute); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+/* 充值/加额表单动作行（原型 .row：横向按钮排布，不占满整行） */
+.form .row, .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 
 /* ---------- 消费模拟（聊天 Mock · US-6） ---------- */
 
@@ -875,10 +851,10 @@ mark {
 .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
 .modal-head h3 { font-size: 16px; margin: 0; }
 
-/* 模态框操作行 / 充值预设（US-4） */
-.topup-presets { display: flex; gap: 8px; margin-top: 6px; }
-.topup-presets .btn { min-width: 72px; }
-.topup-presets .btn.active { background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 50%, transparent); color: var(--accent-text); }
+/* 模态框操作行 / 充值预设（US-4；rant 2026-09-11T16:23:43 第 6 节：改用原型 .chip + .on 选中态）*/
+.topup-presets { gap: 8px; margin-top: 2px; }
+.topup-presets .chip { min-width: 64px; justify-content: center; }
+.topup-presets .chip.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
 .chat-log {
   flex: 1; overflow-y: auto;
   background: var(--bg-soft); border: 1px solid var(--border);
@@ -1189,9 +1165,8 @@ textarea.input:focus { border-color: var(--accent); }
   /* 网关端点卡片窄屏：chip 与 URL 上下排（原型 responsive 规则） */
   .gw-ep { grid-template-columns: 1fr; gap: 6px; }
   .gw-chip { justify-self: start; }
-  /* 交易汇总条窄屏（rant 20:39:30 B） */
-  .tx-summary { gap: 18px; padding: 10px 12px 8px; }
-  .tx-summary .ts-value { font-size: 16px; }
+  /* 交易汇总卡窄屏（rant 2026-09-11T16:23:43 第 7 节：stat-grid 两列，与仪表盘一致） */
+  .tx-summary { padding: 0; }
   /* 移动端表格卡片化（rant 18:06:09 C：隐藏表头，行 → label:value 卡片，不再横滚） */
   .table { display: block; }
   .table thead { display: none; }
diff --git a/ui/index.html b/ui/index.html
index 1d960eb..3130f43 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -345,66 +345,72 @@ <h3 data-i18n="share.list">我的共享列表</h3>
     <!-- 钱包 Wallet -->
     <section class="view hidden" id="view-wallet">
       <header class="page-head">
-        <h2 data-i18n="view.wallet">钱包</h2>
-        <p data-i18n="view.wallet.sub">点数余额 · 充值 / 提现（收支明细见【交易记录】）</p>
+        <div>
+          <div class="crumb" data-i18n="wallet.crumb">/ 钱包</div>
+          <h2 data-i18n="view.wallet">钱包</h2>
+          <p data-i18n="view.wallet.sub">点数余额 · 充值 / 申请加额（收支明细见【交易记录】）</p>
+        </div>
       </header>
       <div class="card wallet-hero">
         <div>
-          <h3 data-i18n="wallet.balance">点数余额</h3>
-          <div class="balance-big" id="wallet-balance">0</div>
+          <h3 class="wallet-hero-label" data-i18n="wallet.balance">点数余额</h3>
+          <div class="balance-big"><span id="wallet-balance">0</span><span class="unit" data-i18n="common.points">点</span></div>
+          <p class="hint wallet-hero-hint"><span data-i18n="wallet.forever">永久点数</span>
+            <b class="num" id="wallet-forever">0</b>
+            <span data-i18n="wallet.gift.note">· 每日赠送点数当日有效</span></p>
         </div>
         <div class="wallet-actions">
           <button class="btn btn-primary" id="topup-btn" data-i18n="wallet.topup">充值</button>
-          <button class="btn btn-ghost" id="raise-btn" data-i18n="wallet.raise">申请加额</button>
-          <button class="btn btn-ghost" id="withdraw-btn" disabled data-i18n="wallet.withdraw">提现</button>
-          <span class="muted wallet-note" data-i18n="wallet.note">充值（演示流程，真实支付后续接入） · 提现暂不支持</span>
+          <button class="btn btn-secondary" id="raise-btn" data-i18n="wallet.raise">申请加额</button>
+          <button class="btn btn-secondary" id="withdraw-btn" disabled data-i18n="wallet.withdraw">提现</button>
         </div>
       </div>
+      <p class="hint wallet-hero-note" data-i18n="wallet.note">充值（演示流程，真实支付后续接入） · 提现暂不支持</p>
       <!-- 充值：行内展开卡片（US-4 · 少用弹窗原则 v1.13：充值改行内，替代原 topup-modal） -->
-      <div class="card" id="topup-card" hidden>
+      <div class="card mt16" id="topup-card" hidden>
         <h3 data-i18n="wallet.topup.title">充值点数</h3>
-        <p class="muted" style="margin-bottom:12px" data-i18n="wallet.topup.sub">演示流程：真实支付通道后续接入。</p>
+        <p class="card-sub" data-i18n="wallet.topup.sub">演示流程：真实支付通道后续接入。</p>
         <div class="form">
-          <label><span data-i18n="wallet.topup.choose">选择金额（点数）</span>
-            <div class="topup-presets">
-              <button type="button" class="btn btn-ghost" data-topup-amt="100">100</button>
-              <button type="button" class="btn btn-ghost" data-topup-amt="500">500</button>
-              <button type="button" class="btn btn-ghost" data-topup-amt="1000">1000</button>
-            </div>
-          </label>
-          <label><span data-i18n="wallet.topup.custom">或自定义金额</span>
+          <label class="f" data-i18n="wallet.topup.choose">选择金额（点数）</label>
+          <div class="chips topup-presets">
+            <button type="button" class="chip" data-topup-amt="100">100</button>
+            <button type="button" class="chip" data-topup-amt="500">500</button>
+            <button type="button" class="chip" data-topup-amt="1000">1000</button>
+            <button type="button" class="chip" data-topup-amt="5000">5000</button>
+          </div>
+          <label class="f"><span data-i18n="wallet.topup.custom">或自定义金额</span>
             <input id="topup-custom" type="number" min="1" step="0.01" class="input" data-i18n-ph="wallet.topup.ph" placeholder="如 300 或 25.5">
           </label>
-          <div class="form-row">
+          <div class="row">
             <button type="button" class="btn btn-primary" id="topup-confirm" data-i18n="wallet.topup.confirm">确认充值</button>
             <button type="button" class="btn btn-ghost" id="topup-cancel" data-i18n="wallet.topup.cancel">取消</button>
           </div>
         </div>
       </div>
       <!-- 申请加额：行内展开卡片（US-20 · 少用弹窗原则：替代原 raise-modal） -->
-      <div class="card" id="raise-card" hidden>
+      <div class="card mt16" id="raise-card" hidden>
         <h3 data-i18n="wallet.raise.title">申请加额</h3>
-        <p class="muted" style="margin-bottom:12px" data-i18n="wallet.raise.sub">余额低时可申请更多点数，提交后等待管理员审批（US-20）。</p>
+        <p class="card-sub" data-i18n="wallet.raise.sub">余额低时可申请更多点数，提交后等待管理员审批（US-20）。</p>
         <div class="form">
-          <label><span data-i18n="wallet.raise.amount">申请点数</span>
+          <label class="f"><span data-i18n="wallet.raise.amount">申请点数</span>
             <input id="raise-amount" type="number" min="1" step="1" class="input" data-i18n-ph="wallet.raise.amount.ph" placeholder="如 5000">
           </label>
-          <label><span data-i18n="wallet.raise.reason">申请原因</span>
+          <label class="f"><span data-i18n="wallet.raise.reason">申请原因</span>
             <input id="raise-reason" class="input" data-i18n-ph="wallet.raise.reason.ph" placeholder="如：本月配额已用完，需要继续开发">
           </label>
-          <div class="form-row">
+          <div class="row">
             <button type="button" class="btn btn-primary" id="raise-confirm" data-i18n="wallet.raise.submit">提交申请</button>
             <button type="button" class="btn btn-ghost" id="raise-cancel" data-i18n="wallet.raise.cancel">取消</button>
           </div>
         </div>
       </div>
-      <div class="card">
+      <div class="card mt16">
         <h3 data-i18n="wallet.month">本月点数变化</h3>
         <div class="mini-list" id="month-changes"></div>
       </div>
-      <div class="card">
+      <div class="card mt16">
         <p class="wallet-hint"><span data-i18n="wallet.hint">收支明细已统一到</span>
-          <button class="btn btn-ghost" id="wallet-goto-tx" data-i18n="wallet.tx">交易记录</button>
+          <button class="btn btn-ghost btn-sm" id="wallet-goto-tx" data-i18n="wallet.tx">交易记录</button>
           <span data-i18n="wallet.hint.suffix">——涵盖消费、收益、充值、提现、赠送</span></p>
       </div>
     </section>
@@ -412,15 +418,20 @@ <h3 data-i18n="wallet.month">本月点数变化</h3>
     <!-- 交易记录 Transactions -->
     <section class="view hidden" id="view-transactions">
       <header class="page-head">
-        <h2 data-i18n="view.transactions">交易记录</h2>
-        <p data-i18n="view.transactions.sub">涵盖消费、收益、充值、提现、赠送</p>
+        <div>
+          <div class="crumb" data-i18n="tx.crumb">/ 交易记录</div>
+          <h2 data-i18n="view.transactions">交易记录</h2>
+          <p data-i18n="view.transactions.sub">涵盖消费、收益、充值、提现、赠送 · 三档 token 明细透明可见</p>
+        </div>
+        <button type="button" class="btn btn-secondary btn-sm" id="tx-export-btn" data-i18n-title="tx.export.title" data-i18n="tx.export" title="导出当前筛选的交易记录为 CSV">导出 CSV</button>
       </header>
       <div class="tabs" id="tx-tabs">
         <button class="tab active" data-tx-tab="all" data-i18n="tx.tab.all">全部</button>
         <button class="tab" data-tx-tab="consume" data-i18n="tx.tab.consume">消费</button>
         <button class="tab" data-tx-tab="earn" data-i18n="tx.tab.earn">收益</button>
       </div>
-      <div class="toolbar" style="justify-content:flex-end">
+      <!-- 工具栏：时间范围（含原型未体现的 24h / 自定义，不得删减）+ 记录数 -->
+      <div class="toolbar">
         <select id="tx-range" class="th-filter" data-i18n-title="tx.range.title" title="时间范围">
           <option value="24h" data-i18n="tx.range.24h">最近 24 小时</option>
           <option value="7d" data-i18n="tx.range.7d">最近 7 天</option>
@@ -430,11 +441,27 @@ <h2 data-i18n="view.transactions">交易记录</h2>
         </select>
         <input type="datetime-local" id="tx-range-start" class="tx-range-input" style="display:none" data-i18n-title="tx.range.start" title="开始时间">
         <input type="datetime-local" id="tx-range-end" class="tx-range-input" style="display:none" data-i18n-title="tx.range.end" title="结束时间">
-        <button type="button" class="btn btn-ghost" id="tx-export-btn" data-i18n-title="tx.export.title" data-i18n="tx.export" title="导出当前筛选的交易记录为 CSV">导出 CSV</button>
+        <span class="grow"></span>
+        <span class="num muted tx-count" id="tx-count"></span>
       </div>
+      <!-- 汇总卡（.stat-grid）：消费 / 收益 / 点数变化 / Token 合计 / 记录数 -->
       <div class="card">
-        <div class="tx-summary" id="tx-summary"></div>
-        <div class="tx-trend" id="tx-trend"></div>
+        <div class="stat-grid" id="tx-summary"></div>
+      </div>
+      <!-- 每日消费 / 收益（.trend 双色柱状，x 轴左→右时间递增） -->
+      <div class="card mt16">
+        <h3 data-i18n="tx.trend.card">每日消费 / 收益</h3>
+        <p class="card-sub" data-i18n="tx.trend.card.sub">单位：点数 · 随上方时间段与筛选联动</p>
+        <div class="trend" id="tx-trend"></div>
+        <div class="legend">
+          <span><i class="consume"></i><span data-i18n="tx.trend.metric.expense">消费</span></span>
+          <span><i class="earn"></i><span data-i18n="tx.trend.metric.income">收入</span></span>
+        </div>
+      </div>
+      <!-- 明细：表头排序 + 列筛选行 + 后端真分页（#tx-table 由 buildDataTable 渲染，勿改为静态 table） -->
+      <div class="card mt16">
+        <h3 data-i18n="tx.detail">明细</h3>
+        <p class="card-sub" data-i18n="tx.detail.sub">输入（非缓存）/ 缓存命中 / 输出 三档 token</p>
         <div class="table-wrap compact" id="tx-table"></div>
       </div>
     </section>
diff --git a/ui/js/app.js b/ui/js/app.js
index 9e21d63..52e95e6 100644
--- a/ui/js/app.js
+++ b/ui/js/app.js
@@ -17,7 +17,6 @@
   let txRange = "24h"; // 交易时间段快捷范围：24h / 7d / 30d / all / custom（默认最近 24 小时，rant 2026-08-22T10:50:00）
   let txCustomStart = ""; // 自定义开始（datetime-local 值，本地时区）
   let txCustomEnd = ""; // 自定义结束
-  let txTrendMetric = "expense"; // 趋势图指标（rant 2026-08-23T16:17:18 需求 2）：expense / income / net / tokens，默认消费点数
   let isGuest = false; // 游客模式（US-1：未登录可浏览市场）
   let pendingHashView = null; // URL hash 路由（rant 20:39:30 A）：刷新后登录时恢复上次视图
   let mkExpanded = null; // 市场行展开（rant 20:39:30 F）：当前展开的模型 id，null=全部收起；仅展开当前行
@@ -1138,6 +1137,12 @@
     // 钱包只做余额与资金操作；收支明细统一到【交易记录】（见 index.html wallet-hint）
     $("#side-balance").textContent = D.fmt(D.USER.balance);
     $("#wallet-balance").textContent = D.fmt(D.USER.balance);
+    // 永久点数（原型 wallet-hero hint）：/api/wallet 的 balance 即永久余额（available = 永久 + 当日赠送）
+    const fv = $("#wallet-forever");
+    if (fv) {
+      const w = Live.wallet;
+      fv.textContent = D.fmt(w && typeof w.balance === "number" ? w.balance : D.USER.balance);
+    }
     // 本月点数变化（近 1 月按类型汇总收支，与仪表盘一致）
     renderMonthChanges();
   }
@@ -1146,7 +1151,7 @@
 
   function openTopup() {
     $("#topup-custom").value = "";
-    $$("#topup-card .topup-presets .btn").forEach((b) => b.classList.remove("active"));
+    $$("#topup-card .topup-presets .chip").forEach((b) => b.classList.remove("on"));
     $("#topup-card").hidden = false;
     $("#raise-card").hidden = true; // 互斥：开充值收起加额
     clearFieldError($("#topup-custom"));
@@ -1158,7 +1163,7 @@
   }
 
   function confirmTopup() {
-    const preset = document.querySelector("#topup-card .topup-presets .btn.active");
+    const preset = document.querySelector("#topup-card .topup-presets .chip.on");
     const customRaw = $("#topup-custom").value;
     let amt;
     if (preset && !customRaw) amt = Number(preset.dataset.topupAmt);
@@ -1306,14 +1311,16 @@
       render: (t) => t.status === "处理中" ? '<span class="pill pill-warn">' + esc(txStatus(t.status)) + "</span>" : esc(txStatus(t.status)) },
   ];
 
-  // 交易汇总条（rant 20:39:30 B + 00:04:21 + 00:07:08：改用后端 summary 全量 SQL 聚合，
-  // 不再对当前页本地加总；口径 = income 白名单（earn/topup/gift）为正、consume 为负；
-  // 附带 Token 统计 总/输入/缓存/输出，M 单位）
+  // 交易汇总卡（rant 2026-09-11T16:23:43 第 7 节：改用原型 .stat-grid + .stat-card；
+  // 数据口径不变 —— 后端 summary 全量 SQL 聚合（含列筛选），不再对当前页本地加总；
+  // 口径 = income 白名单（earn/topup/gift）为正、consume 为负；附带 Token 总/输入/缓存/输出）
   function renderTxSummary(list) {
+    const el = $("#tx-summary");
+    if (!el) return;
     const s = (Live.transactions && Live.transactions.summary) ? Live.transactions.summary : null;
     // rant 2026-08-25T10:33:26：后端 summary 已随列筛选全量 SQL 聚合（income 白名单 earn/topup/gift
     // 为正、consume 为负；token 口径一致）——登录态一律用后端 summary，本地加总仅作无 summary 的兜底。
-    let income = 0, expense = 0, tokens = 0, inputT = 0, cachedT = 0, outputT = 0;
+    let income = 0, expense = 0, tokens = 0, inputT = 0, cachedT = 0, outputT = 0, count = 0;
     if (s) {
       income = s.income_pts || 0;
       expense = s.expense_pts || 0;
@@ -1332,132 +1339,97 @@
         if (typeof t.outputRaw === "number") outputT += t.outputRaw;
       });
     }
+    // 记录数 = 后端 total（真分页下即筛选项下的全量条数；无 total 时退化为当前可见行数）
+    count = (Live.transactions && typeof Live.transactions.total === "number")
+      ? Live.transactions.total
+      : list.length;
     const net = income - expense;
-    const cls = (n) => (n > 0 ? "ok" : n < 0 ? "danger" : "");
-    const fmt = (n) => (n > 0 ? "+" : n < 0 ? "-" : "") + D.fmt(Math.abs(n));
+    const signed = (n) => (n > 0 ? "+" : n < 0 ? "-" : "") + D.fmt(Math.abs(n));
+    const colour = (n) => (n > 0 ? "var(--ok)" : n < 0 ? "var(--danger-text)" : "inherit");
     const fmtM = (n) => (n >= 1e6 ? (n / 1e6).toFixed(2) + "M" : (n >= 1000 ? Math.round(n / 1000) + "K" : String(Math.round(n))));
-    let html =
-      '<div class="ts-item"><span class="ts-label">' + T("tx.summary.income") + "</span><span class='ts-value num ' + cls(income) + '\'>" + fmt(income) + "</span></div>" +
-      '<div class="ts-item"><span class="ts-label">' + T("tx.summary.expense") + "</span><span class='ts-value num ' + cls(-expense) + '\'>" + fmt(-expense) + "</span></div>" +
-      '<div class="ts-item"><span class="ts-label">' + T("tx.summary.net") + "</span><span class='ts-value num ' + cls(net) + '\'>" + fmt(net) + "</span></div>";
-    // Token 统计：总 / 输入 / 缓存 / 输出（后端 summary 或本地筛选后加总均可提供）
-    html +=
-      '<div class="ts-item"><span class="ts-label">' + T("tx.summary.tokens") + "</span><span class='ts-value num '>" + fmtM(tokens) + "</span></div>" +
-      '<div class="ts-item"><span class="ts-label">' + T("tx.summary.input") + "</span><span class='ts-value num '>" + fmtM(inputT) + "</span></div>" +
-      '<div class="ts-item"><span class="ts-label">' + T("tx.summary.cached") + "</span><span class='ts-value num '>" + fmtM(cachedT) + "</span></div>" +
-      '<div class="ts-item"><span class="ts-label">' + T("tx.summary.output") + "</span><span class='ts-value num '>" + fmtM(outputT) + "</span></div>";
-    $("#tx-summary").innerHTML = html;
-  }
-
-  // 交易趋势图（rant 2026-08-23T16:01:07 需求 2 + 16:17:18 优化 + 2026-08-24T10:51:57 重做）：
-  // 参考仪表盘 sparkline()：渐变面积（0.35→0）、连续平滑曲线（round 连接）、无网格极简坐标、
-  // teal 主题配色、紧凑高度（viewBox 85，原 170 减半，rant 10:51:57.821928）；
-  // 保留指标切换（消费/收入/净变化/Token，默认消费）与悬停 tooltip。
-  let _trendCtx = null; // 悬停 tooltip 上下文（renderTxTrend 写入，事件委托读取）
+    // 复用 PR4 的 stat()（.stat-card）与原型卡片顺序：消费 / 收益 / 点数变化 / Token 合计 / 记录数；
+    // Token 卡的 sub 承载输入·缓存·输出三档明细（原型「三档 token 之和」口径）
+    el.innerHTML =
+      stat(T("tx.summary.expense"), D.fmt(Math.abs(expense)), T("tx.summary.expense.sub")) +
+      stat(T("tx.summary.income"), '<span style="color:' + colour(income) + '">' + signed(income) + "</span>", T("tx.summary.income.sub")) +
+      stat(T("tx.summary.net"), '<span style="color:' + colour(net) + '">' + signed(net) + "</span>", T("tx.summary.net.sub")) +
+      stat(T("tx.summary.tokens"), fmtM(tokens),
+        T("tx.summary.brk", { i: fmtM(inputT), c: fmtM(cachedT), o: fmtM(outputT) })) +
+      stat(T("tx.summary.count"), D.fmt(count), T("tx.summary.count.sub"));
+  }
+
+  // 每日消费/收益趋势（rant 2026-09-11T16:23:43 第 7 节 + PR4 的 renderDashTrend 先例）：
+  // 改用原型 .trend 双色柱状图（消费 = accent、收益 = ok），柱高按当日 max 归一、最小 2%；
+  // 数据源仍是 /api/transactions/trend（与列表同 type/时间段/列筛选口径）。
+  // GROUP BY 只返回有交易的桶（无交易的日子缺行）→ 按请求窗口补 0，保持 x 轴左→右时间递增、
+  // 柱距恒定（原型 x 轴递增 bug 的根因即「缺行导致柱子左移」，此处一并规避）。
+  const TX_TREND_MAX_COLS = 40; // 桶数上限（hour 桶 24h 窗口 + 余量），超出则抽稀标签
+  function txTrendDays(buckets, bucket) {
+    const byKey = new Map();
+    const keyOf = (d) => {
+      const p = (n) => String(n).padStart(2, "0");
+      const md = d.getUTCFullYear() + "-" + p(d.getUTCMonth() + 1) + "-" + p(d.getUTCDate());
+      return bucket === "hour" ? md + "-" + p(d.getUTCHours()) : md;
+    };
+    buckets.forEach((b) => {
+      const d = new Date(b.t);
+      if (!isNaN(d.getTime())) byKey.set(keyOf(d), b);
+    });
+    const now = new Date();
+    // 窗口右端：custom/end 已指定则用 end，否则用「现在」（UTC 对齐到桶，与后端 strftime 口径一致）
+    let end;
+    if (txRange === "custom" && txCustomEnd) {
+      end = new Date(txCustomEnd);
+      if (isNaN(end.getTime())) end = now;
+    } else {
+      end = now;
+    }
+    const p = (n) => String(n).padStart(2, "0");
+    const utcFloor = (d) => bucket === "hour"
+      ? Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), d.getUTCHours())
+      : Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
+    const step = bucket === "hour" ? 36e5 : bucket === "week" ? 7 * 864e5 : 864e5;
+    // 窗口长度：跟随实际数据跨度（先算最早桶到右端的桶数），避免 24h/自定义短窗口补出几百根空柱
+    const earliest = buckets.length
+      ? buckets.reduce((min, b) => { const t = new Date(b.t).getTime(); return isNaN(t) ? min : Math.min(min, t); }, Infinity)
+      : NaN;
+    let cols = isFinite(earliest) ? Math.round((utcFloor(end) - utcFloor(new Date(earliest))) / step) + 1 : 1;
+    cols = Math.max(1, Math.min(cols, TX_TREND_MAX_COLS));
+    const start = utcFloor(end) - (cols - 1) * step;
+    const days = [];
+    for (let i = 0; i < cols; i++) {
+      const d = new Date(start + i * step);
+      const key = keyOf(d);
+      const b = byKey.get(key);
+      days.push(b ? Object.assign({ t: d.toISOString() }, b) : { t: d.toISOString(), income: 0, expense: 0, tokens: 0, count: 0 });
+    }
+    return days;
+  }
+
   function renderTxTrend() {
     const el = $("#tx-trend");
+    if (!el) return;
     const tr = (Live.transactions && Live.transactions.trend) ? Live.transactions.trend : null;
-    const buckets = (tr && Array.isArray(tr.buckets)) ? tr.buckets : [];
-    if (!buckets.length) {
-      el.innerHTML = '<div class="tx-trend-empty">' + esc(T("tx.trend.empty")) + "</div>";
-      _trendCtx = null;
+    const raw = (tr && Array.isArray(tr.buckets)) ? tr.buckets : [];
+    if (!raw.length) {
+      // 空态：未加载 / 加载失败 / 窗口内无交易，三者文案区分（零 mock 语义）
+      el.innerHTML = '<div class="empty compact">' +
+        esc(tr === null ? T("dash.trend.fail") : T("tx.trend.empty")) + "</div>";
       return;
     }
     const bucket = tr.bucket || "day";
-    const METRICS = [
-      { key: "expense", label: T("tx.trend.metric.expense"), pick: (b) => b.expense || 0, cls: "exp", stroke: "var(--accent)" },
-      { key: "income", label: T("tx.trend.metric.income"), pick: (b) => b.income || 0, cls: "inc", stroke: "var(--ok)" },
-      { key: "net", label: T("tx.trend.metric.net"), pick: (b) => (b.net === undefined ? (b.income || 0) - (b.expense || 0) : b.net) || 0, cls: "net", signed: true, stroke: "var(--accent-text)" },
-      { key: "tokens", label: T("tx.trend.metric.tokens"), pick: (b) => b.tokens || 0, cls: "tok", stroke: "var(--warn)" },
-    ];
-    const m = METRICS.find((x) => x.key === txTrendMetric) || METRICS[0];
-    const vals = buckets.map(m.pick);
-    const lbl = (b) => bucketLabel(b.t, bucket);
-    const fmtSigned = (n) => (n > 0 ? "+" : n < 0 ? "-" : "") + D.fmt(Math.abs(n));
-    const fmtAxis = (n) => {
-      const a = Math.abs(n);
-      const s = a >= 1e6 ? (a / 1e6).toFixed(2).replace(/\.?0+$/, "") + "M"
-        : a >= 1000 ? Math.round(a / 1000) + "K"
-        : (Math.round(a * 10) / 10).toString();
-      return (n < 0 ? "-" : "") + s;
-    };
-    // 自适应刻度：nice 上限（1/2/5×10^n）；负值指标（净变化）±maxV 对称，零轴居中
-    const neg = vals.some((v) => v < 0);
-    const absMax = Math.max(0, ...vals.map((v) => Math.abs(v)));
-    const np = Math.pow(10, Math.floor(Math.log10(Math.max(absMax, 1e-9))));
-    const nm = Math.max(absMax, 1e-9) / np;
-    const maxV = Math.max((nm <= 1 ? 1 : nm <= 2 ? 2 : nm <= 5 ? 5 : 10) * np, 4);
-    const minV = neg ? -maxV : 0;
-    // 紧凑几何 + 动态 viewBox（rant 2026-08-24T14:29:57 真正根因）：SVG width:100% 在宽容器
-    // 会被等比放大 ~2.4x（1534px 容器 / 640 viewBox → canvasScale 2.397），使 CSS 像素
-    // （stroke-width 1.4 / font-size 8px）实际渲染 ≈3.4px / ≈19px——v0.7.15→v0.7.16 调细后
-    // "看起来没变化"即被此放大吞掉。修复：viewBox 宽 = 容器宽 → 1 viewBox 单位 ≈ 1 物理像素，
-    // 线宽/字号按 CSS 值真实呈现；窄屏（容器 ≤ 设计宽 640）保持 s=1 原样等比缩小，避免变形。
-    const DW = 640, DH = 85;
-    const cw = el.clientWidth - 32; // .tx-trend 水平 padding 16px*2 → svg 实际可用宽
-    const s = Math.max(1, (cw > 0 ? cw : DW) / DW);
-    const W = DW * s, H = DH * s, PL = 32 * s, PR = 8 * s, PT = 6 * s, PB = 14 * s;
-    const iw = W - PL - PR, ih = H - PT - PB;
-    const X = (i) => PL + (buckets.length === 1 ? iw / 2 : iw * i / (buckets.length - 1));
-    const Y = (v) => PT + ih * (maxV - v) / (maxV - minV || 1);
-    const pts = vals.map((v, i) => [X(i), Y(v)]);
-    // 平滑折线（Catmull-Rom → 三次贝塞尔，单点退化为点）
-    const smoothPath = (p) => {
-      if (!p.length) return "";
-      if (p.length === 1) return "M" + p[0][0].toFixed(1) + "," + p[0][1].toFixed(1) + " L" + (p[0][0] + 1).toFixed(1) + "," + p[0][1].toFixed(1);
-      let d = "M" + p[0][0].toFixed(1) + "," + p[0][1].toFixed(1);
-      for (let i = 0; i < p.length - 1; i++) {
-        const p0 = p[Math.max(0, i - 1)], p1 = p[i], p2 = p[i + 1], p3 = p[Math.min(p.length - 1, i + 2)];
-        const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
-        const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
-        d += " C" + c1x.toFixed(1) + "," + c1y.toFixed(1) + " " + c2x.toFixed(1) + "," + c2y.toFixed(1) + " " + p2[0].toFixed(1) + "," + p2[1].toFixed(1);
-      }
-      return d;
-    };
-    // 极简坐标（rant 10:51:57.821209：去生硬网格）：仅顶/底 2 个纵轴刻度标签，无网格线
-    let axis =
-      '<text class="tx-trend-axis" x="' + (PL - 4) + '" y="' + (PT + 3).toFixed(1) + '" text-anchor="end">' + fmtAxis(maxV) + "</text>" +
-      '<text class="tx-trend-axis" x="' + (PL - 4) + '" y="' + (H - PB + 3).toFixed(1) + '" text-anchor="end">' + fmtAxis(minV) + "</text>";
-    // 横轴标签：首 / 中 / 尾（紧凑小字号）
-    const idxs = [0, Math.floor((buckets.length - 1) / 2), buckets.length - 1].filter((v, i, a) => a.indexOf(v) === i);
-    let xlabels = "";
-    idxs.forEach((i) => {
-      xlabels += '<text class="tx-trend-axis" x="' + X(i).toFixed(1) + '" y="' + (H - 4) + '" text-anchor="middle">' + esc(lbl(buckets[i])) + "</text>";
-    });
-    // 渐变面积（基线：负值指标取零轴，正值指标取图表底）+ 平滑曲线；
-    // 不画数据点圆（rant 10:51:57.821209：空白圆点造成折线断点/锯齿，sparkline 化优雅降级）
-    const yBase = Y(neg ? 0 : minV);
-    const areaPath = pts.length
-      ? smoothPath(pts) + " L" + pts[pts.length - 1][0].toFixed(1) + "," + yBase.toFixed(1) + " L" + pts[0][0].toFixed(1) + "," + yBase.toFixed(1) + " Z"
-      : "";
-    const switchHtml =
-      '<div class="tx-trend-switch" role="tablist" aria-label="' + esc(T("tx.trend.metricLabel")) + '">' +
-      METRICS.map((x) =>
-        '<button type="button" class="tsw-btn' + (x.key === m.key ? " active" : "") + '" data-metric="' + x.key + '" role="tab" aria-selected="' + (x.key === m.key) + '">' + esc(x.label) + "</button>"
-      ).join("") +
-      "</div>";
-    const stroke = m.stroke || "var(--accent)";
-    const gid = "spark-grad-" + (++_sparkId); // 每实例唯一 id，防多次渲染/多图冲突（rant 12:32:18：CSS class 设 stop 色在 Chrome 不可靠 → 内联属性）
-    const total = vals.reduce((a, b) => a + b, 0);
-    const html =
-      '<div class="tx-trend-title">' + esc(T("tx.trend.title")) + "</div>" +
-      switchHtml +
-      '<div class="tx-trend-chart">' +
-      '<svg viewBox="0 0 ' + W + " " + H + '" role="img" aria-label="' + esc(T("tx.trend.title")) + '">' +
-      '<defs><linearGradient id="' + gid + '" x1="0" y1="0" x2="0" y2="1">' +
-      '<stop offset="0%" stop-color="' + stroke + '" stop-opacity="0.35"/>' +
-      '<stop offset="100%" stop-color="' + stroke + '" stop-opacity="0"/>' +
-      "</linearGradient></defs>" +
-      axis + xlabels +
-      '<path class="trend-area" d="' + areaPath + '" fill="url(#' + gid + ')"/>' +
-      '<path class="trend-line" d="' + smoothPath(pts) + '" stroke="' + stroke + '"/>' +
-      "</svg>" +
-      '<div class="tx-trend-guide" id="tx-trend-guide"></div>' +
-      '<div class="tx-trend-tip" id="tx-trend-tip"></div>' +
-      "</div>" +
-      '<div class="tx-trend-legend"><i class="tx-trend-dot ' + m.cls + '"></i><span>' + esc(m.label) + " · " + (m.signed ? fmtSigned(total) : D.fmt(total)) + "</span></div>";
-    el.innerHTML = html;
-    _trendCtx = { buckets, vals, m, lbl, X, iw, W, PL };
+    const days = txTrendDays(raw, bucket);
+    const max = Math.max(1, ...days.map((b) => Math.max(b.expense || 0, b.income || 0)));
+    el.innerHTML = days.map((b) => {
+      const c = b.expense || 0, e = b.income || 0;
+      const lbl = bucketLabel(b.t, bucket);
+      const h = (v) => Math.max(2, (v / max) * 100).toFixed(1);
+      const tip = lbl + " " + T("tx.trend.metric.expense") + " " + D.fmt(c) + " / " + T("tx.trend.metric.income") + " " + D.fmt(e);
+      return '<div class="trend-col" title="' + esc(tip) + '"><div class="trend-pair">' +
+        '<div class="trend-bar consume" style="height:' + h(c) + '%"></div>' +
+        '<div class="trend-bar earn" style="height:' + h(e) + '%"></div>' +
+        '</div><span class="trend-x">' + esc(lbl) + "</span></div>";
+    }).join("");
   }
 
   // 趋势桶标签：hour → "MM-DD HH:00"；day/week → "MM-DD"（bucket 起点均为 UTC，转本地显示）
@@ -1495,6 +1467,8 @@
     if (loggedIn() && !Live.transactions) {
       renderTxSummary([]);
       renderTxTrend();
+      const c = $("#tx-count");
+      if (c) c.textContent = "";
       $("#tx-table").innerHTML = loadErrorHtml(T("tx.loadFail"), null, T("err.loadFail"));
       return;
     }
@@ -1505,8 +1479,16 @@
       return;
     }
     let list = Live.transactions ? txsToView(Live.transactions.items || []) : [];
-    // 交易汇总条：与 tab + 列筛选联动，与表格可见行一致（rant 20:39:30 B）
+    // 交易汇总卡：与 tab + 列筛选联动，与表格可见行一致（rant 20:39:30 B；记录数走后端 total）
     renderTxSummary(filterRows(list, TX_COLUMNS, txTable.filters));
+    // 记录数（原型 #tx-count）：后端 total（真分页下即筛选后的全量条数）
+    const cntEl = $("#tx-count");
+    if (cntEl) {
+      const n = (Live.transactions && typeof Live.transactions.total === "number")
+        ? Live.transactions.total
+        : filterRows(list, TX_COLUMNS, txTable.filters).length;
+      cntEl.textContent = (Live.transactions || !loggedIn()) ? T("tx.pager.count", { n: n }) : "";
+    }
     // 趋势图：跟随 tab + 外部时间段（rant 2026-08-23T16:01:07 需求 2）
     renderTxTrend();
     buildDataTable({
@@ -3444,10 +3426,10 @@
         if (e.key === "Escape") { document.getElementById(id).hidden = true; }
       });
     });
-    $$("#topup-card .topup-presets .btn").forEach((b) =>
+    $$("#topup-card .topup-presets .chip").forEach((b) =>
       b.addEventListener("click", () => {
-        $$("#topup-card .topup-presets .btn").forEach((x) => x.classList.remove("active"));
-        b.classList.add("active");
+        $$("#topup-card .topup-presets .chip").forEach((x) => x.classList.remove("on"));
+        b.classList.add("on");
         $("#topup-custom").value = "";
       })
     );
@@ -3484,42 +3466,11 @@
       showCustom();
     }
 
-    // 趋势图指标切换 + 悬停 tooltip（rant 2026-08-23T16:17:18 需求 1/2：事件委托，重渲染不丢绑定）
+    // 趋势图：原型 .trend 双色柱状（消费/收益）为纯 CSS 柱 + title 原生 tooltip，
+    // 无需 JS 绑定（旧 SVG 折线图的指标切换/悬停定位/动态 viewBox 随实现一并移除）。
+    // 仅保留 resize 重渲染（窄屏时柱宽由 flex 自适应，重渲染保证标签密度与数据一致）
     const txTrendEl = $("#tx-trend");
     if (txTrendEl) {
-      txTrendEl.addEventListener("click", (e) => {
-        const b = e.target.closest ? e.target.closest(".tsw-btn") : null;
-        if (!b || b.dataset.metric === txTrendMetric) return;
-        txTrendMetric = b.dataset.metric;
-        renderTxTrend();
-      });
-      txTrendEl.addEventListener("mousemove", (e) => {
-        const ctx = _trendCtx;
-        const tip = $("#tx-trend-tip"), guide = $("#tx-trend-guide");
-        const svg = txTrendEl.querySelector("svg"), chartEl = txTrendEl.querySelector(".tx-trend-chart");
-        if (!ctx || !tip || !guide || !svg || !chartEl) return;
-        const rect = svg.getBoundingClientRect();
-        if (!rect.width) return;
-        const vb = svg.getAttribute("viewBox").split(" ").map(Number);
-        const x = (e.clientX - rect.left) / rect.width * vb[2];
-        const step = ctx.buckets.length > 1 ? ctx.X(1) - ctx.X(0) : ctx.iw;
-        const i = Math.max(0, Math.min(ctx.buckets.length - 1, Math.round((x - ctx.PL) / step)));
-        const v = ctx.vals[i];
-        const cr = chartEl.getBoundingClientRect();
-        const valTxt = ctx.m.signed ? (v > 0 ? "+" : v < 0 ? "-" : "") + D.fmt(Math.abs(v)) : D.fmt(v);
-        tip.innerHTML = esc(ctx.lbl(ctx.buckets[i])) + "<br><b>" + esc(ctx.m.label) + " " + valTxt + "</b>";
-        tip.style.display = "block";
-        guide.style.display = "block";
-        guide.style.left = (ctx.X(i) / vb[2] * cr.width) + "px";
-        tip.style.left = Math.min(Math.max(e.clientX - cr.left + 14, 4), Math.max(cr.width - tip.offsetWidth - 4, 4)) + "px";
-        tip.style.top = Math.min(Math.max(e.clientY - cr.top - tip.offsetHeight - 10, 4), Math.max(cr.height - tip.offsetHeight - 4, 4)) + "px";
-      });
-      txTrendEl.addEventListener("mouseleave", () => {
-        const tip = $("#tx-trend-tip"), guide = $("#tx-trend-guide");
-        if (tip) tip.style.display = "none";
-        if (guide) guide.style.display = "none";
-      });
-      // 窗口 resize → 重渲染趋势图（动态 viewBox 需跟随容器宽度，debounce 防抖；视图隐藏时跳过）
       let _txTrendResizeT = null;
       window.addEventListener("resize", () => {
         if (txTrendEl.offsetParent === null) return;
diff --git a/ui/js/i18n.js b/ui/js/i18n.js
index 6c16ed2..b4ab72b 100644
--- a/ui/js/i18n.js
+++ b/ui/js/i18n.js
@@ -307,6 +307,9 @@
 
     /* ---- 钱包 ---- */
     "wallet.balance": "点数余额",
+    "wallet.crumb": "/ 钱包",
+    "wallet.forever": "永久点数",
+    "wallet.gift.note": "· 每日赠送点数当日有效",
     "wallet.topup": "充值",
     "wallet.raise": "申请加额",
     "wallet.withdraw": "提现",
@@ -340,6 +343,7 @@
 
     /* ---- 交易记录 ---- */
     "tx.tab.all": "全部",
+    "tx.crumb": "/ 交易记录",
     "tx.tab.consume": "消费",
     "tx.tab.earn": "收益",
     "tx.range.title": "时间范围",
@@ -355,17 +359,18 @@
     "tx.summary.income": "总收入",
     "tx.summary.expense": "总支出",
     "tx.summary.net": "净变化",
+    "tx.summary.brk": "输入 {i} · 缓存 {c} · 输出 {o}",
+    "tx.summary.expense.sub": "当期消费合计",
+    "tx.summary.income.sub": "共享分成等收益",
+    "tx.summary.net.sub": "收益 − 消费",
+    "tx.summary.count": "记录数",
+    "tx.summary.count.sub": "当前筛选",
     "tx.summary.tokens": "总 Token",
-    "tx.summary.input": "输入",
-    "tx.summary.cached": "缓存",
-    "tx.summary.output": "输出",
-    "tx.trend.title": "点数趋势",
     "tx.trend.empty": "当前时间段暂无趋势数据",
-    "tx.trend.metricLabel": "趋势图指标",
     "tx.trend.metric.expense": "消费",
     "tx.trend.metric.income": "收入",
-    "tx.trend.metric.net": "净变化",
-    "tx.trend.metric.tokens": "Token",
+    "tx.trend.card": "每日消费 / 收益",
+    "tx.trend.card.sub": "单位：点数 · 随上方时间段与筛选联动",
     "tx.col.time": "时间",
     "tx.col.type": "类型",
     "tx.col.user": "用户",
@@ -402,6 +407,8 @@
     "tx.export.none": "没有可导出的交易记录",
     "tx.export.ok": "已导出 {n} 条交易记录",
     "tx.sort.title": "点击排序 · Shift+点击叠加多列",
+    "tx.detail": "明细",
+    "tx.detail.sub": "输入（非缓存）/ 缓存命中 / 输出 三档 token",
 
     /* ---- 设置 ---- */
     "settings.tour": "重新查看引导",
@@ -1062,6 +1069,9 @@
     "share.priceUnit": "pts/1M",
 
     "wallet.balance": "Points balance",
+    "wallet.crumb": "/ Wallet",
+    "wallet.forever": "Permanent points",
+    "wallet.gift.note": "· daily bonus points expire the same day",
     "wallet.topup": "Top up",
     "wallet.raise": "Request more",
     "wallet.withdraw": "Withdraw",
@@ -1094,6 +1104,7 @@
     "wallet.withdraw.disabled": "Withdraw is not supported yet",
 
     "tx.tab.all": "All",
+    "tx.crumb": "/ Transactions",
     "tx.tab.consume": "Consume",
     "tx.tab.earn": "Earn",
     "tx.range.title": "Time range",
@@ -1109,17 +1120,18 @@
     "tx.summary.income": "Income",
     "tx.summary.expense": "Expense",
     "tx.summary.net": "Net",
+    "tx.summary.brk": "In {i} · Cache {c} · Out {o}",
+    "tx.summary.expense.sub": "Total spent in range",
+    "tx.summary.income.sub": "Sharing earnings etc.",
+    "tx.summary.net.sub": "Earnings − spend",
+    "tx.summary.count": "Records",
+    "tx.summary.count.sub": "Current filter",
     "tx.summary.tokens": "Total",
-    "tx.summary.input": "Input",
-    "tx.summary.cached": "Cached",
-    "tx.summary.output": "Output",
-    "tx.trend.title": "Points Trend",
     "tx.trend.empty": "No trend data in this range",
-    "tx.trend.metricLabel": "Trend metric",
     "tx.trend.metric.expense": "Spend",
     "tx.trend.metric.income": "Income",
-    "tx.trend.metric.net": "Net",
-    "tx.trend.metric.tokens": "Tokens",
+    "tx.trend.card": "Daily spend / earnings",
+    "tx.trend.card.sub": "Unit: points · follows the range and filters above",
     "tx.col.time": "Time",
     "tx.col.type": "Type",
     "tx.col.user": "User",
@@ -1156,6 +1168,8 @@
     "tx.export.none": "No transactions to export",
     "tx.export.ok": "Exported {n} transactions",
     "tx.sort.title": "Click to sort · Shift+click for multi-column",
+    "tx.detail": "Details",
+    "tx.detail.sub": "Input (non-cache) / cache hits / output token breakdown",
 
     "settings.tour": "Replay tour",
     "settings.endpoints": "API Endpoints",