Ledger Glass 账本玻璃

Ledger Glass（账本玻璃） 抽象自 ledger.robby.wang 旅行账本的默认 classic 主题与 liquid-glass 材质层。

一句话：内容安静，浮层带玻璃。 页面是一张暖纸色的底，四角各有一团很淡的雾色光（暖金、灰蓝、沙色）；承载数据的卡片是半透明的“柔光面”，不做背景模糊；只有真正浮在内容之上的东西——底部 Tab Dock、输入胶囊、弹出菜单、对话框——才用 backdrop-filter 做成玻璃。

产品气质：私人、克制、可信。像一本好用的随身账本，而不是一块花哨的仪表盘。中文优先，移动端优先，单手操作优先；数字永远等宽对齐。

两套配色（light / dark）一一对应，全部通过 CSS 变量切换，跟随 prefers-color-scheme。

• 底色 bg (#f3f0e9 / #161914)：暖纸色。暗色模式不是纯黑，而是带一点橄榄绿的墨色。
• 正文 text (#302c24) 与 次要 muted (#726754)：暖褐灰，不用纯黑纯灰。
• 强调 accent (#89661f) / accent-strong (#624613)：旧金/铜色，全站唯一的交互色。主按钮背景、选中 Tab 文字、焦点环都用它；暗色模式变为香槟金 (#d5b66f / #f2d48b)。
• 语义色：positive (#26785a) 只用于“应收/结算完成/成功提示”；danger (#a0443e) 只用于删除与错误。两者都偏低饱和。
• 分隔线 line / line-strong：带绿调的极淡透明线（11% / 22%），绝不用实心灰线。
• **玻璃色 glass-***：白色半透明叠层，glass-surface 74% 用于内容卡，glass-field 66% 用于输入框和数字块，glass-inset 是 5.5% 的绿灰凹陷，用于分段控件底和次按钮。glass-rim 是卡片上沿的高光描边。
• **人员色 people.***：8 个柔和色（金、海蓝、蕨绿、雪山蓝、珊瑚、紫罗兰、岩灰、天空蓝），只以小圆点、选中芯片底色（13% 混色）和边框（65% 混色）出现，从不做大面积填充。

强调色混色规则：选中/高亮背景一律 color-mix(in srgb, var(--accent) 10–14%, transparent)，焦点环 0 0 0 3px 14% 混色。

只用系统字体栈：-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif，不引 Web 字体。

• 字重只用 400 / 500 / 600 / 650 四档。标题 600–650，大数字 650。
• 标题与大数字使用负字距（-0.025em ~ -0.045em），正文不加字距。
• 所有金额、时间、汇率都加 font-variant-numeric: tabular-nums。
• 输入框字号不小于 16px（防 iOS 缩放）。
• 层级靠字号与 muted 颜色区分，而不是加粗一切：标签 13px muted，说明 12px muted，正文 15–16px。
• 典型屏幕：页面标题 20px/650，汇总大数字 30–40px/650，分项金额 20px/600，列表金额 17px/600。

- 内容最大宽度 920px，居中；移动端左右边距 12px，桌面 20px。 - 间距基于 4px：4 / 8 / 12 / 16 / 20 / 24。卡片之间 12px，卡片内边距 16px（汇总卡 14px 16px）。 - 最小点击区 44px，主要控件高度 48px。 - 主导航是底部浮动 Dock：距底 10px + safe-area，左右 12px，最大宽 760px；页面底部要预留 Dock 高度的内边距。 - 移动端一屏只讲一件事：顶部紧凑标题行（标题 + 下拉箭头 + 右侧头像），下面依次是卡片。 - 网格：汇总数字 4 列 → 700px 以下 2 列 → 480px 以下表单单列。

三种材质，界限分明：

• 柔光面（content surface）：glass-surface 底 + 145° 从 glass-field 到透明的渐变 + 1px glass-rim 描边 + inset 0 1px 0 glass-glint 上沿高光 + 很浅的双层阴影 surface。不加 backdrop-filter，长列表和图表上做模糊会卡顿且显脏。
• 常规玻璃（menu glass）：弹出菜单、排序、导出、对话框。glass-menu 93% 底 + blur(26px) saturate(1.5) + float 阴影。
• 透明玻璃（dock glass）：底部 Dock 与输入胶囊。几乎透明的 dock-tint（12%），靠 blur(8px) saturate(1.25)、高光 rim、内阴影和第二道细轮廓线读出玻璃边缘，不把中间刷白。

页面背景用 body::before 固定三团径向雾光（右上暖、左中蓝、右下沙），整个页面只此一处装饰。

圆角随层级递增：标签/小按钮 8–12px → 输入框 13px → 主按钮/分段 15px → 数字块 16px → 菜单 20px → 内容卡 22px → 对话框 28px → Dock 34px → 头像/胶囊全圆。

嵌套圆角保持同心：外层圆角 = 内层圆角 + 内边距（分段控件 15px 外 / 11px 内，3px 内边距）。

所有组件类名统一前缀 rs-（Robby Style），同一套类名在不同风格间可互换。完整实现见 style.css，示例页见 example.html。

• rs-surface：内容卡片。标题行用 rs-section-heading（左标题、右文字按钮）。
• rs-stat：汇总数字块，左上小圆点+名字，下方大数字，再下方 muted 原币明细。
• rs-button --primary / --secondary / --text：主按钮是 170° 的微渐变金铜色，带 1px 深色描边与内高光；按下 scale(.98)。
• rs-field：输入、下拉、多行。下拉箭头用 CSS 渐变画，不用图片。焦点时边框变强调色并加 3px 光环。
• rs-segmented：凹陷底 + 选中项浮起（玻璃高光 + 1px 阴影 + 强调色文字 600）。
• rs-chip：人员/筛选多选，--person-color 驱动选中底色与边框。
• rs-list / rs-list-row：长列表不做卡片，行间只有顶部 1px line，左信息、右等宽金额。
• rs-menu：弹出层，内部选项 14px 圆角，hover 用 glass-selected。
• rs-dock：底部浮动 Tab，4 个等宽按钮（图标 23px + 12px 文字），选中项有一块滑动的半透明底板（320ms），文字变 accent-strong。
• rs-composer：Dock 上方的输入胶囊：左图片按钮、中间输入、右麦克风，全高 54px。

Do

• 先用 CSS 变量，再写组件；暗色模式只换变量。
• 让数据卡片安静：柔光面、无模糊、阴影极浅。
• 玻璃只给浮层（Dock、菜单、对话框）。
• 金额、日期统一等宽数字；货币符号前置（≈ ¥200.00），原币明细放在下方 muted 小字。
• 点击区 ≥ 44px，输入框字号 ≥ 16px，支持 safe-area、prefers-reduced-motion、prefers-contrast: more、forced-colors。
• 文案简短直接的中文，按钮用动词（保存、记一笔、全选）。

Don't

• 不要给长列表、图表、整页加 backdrop-filter。
• 不要使用纯黑 #000、纯白大底或冷灰；不要第二个强调色。
• 不要大面积使用人员色或语义色；红绿只表达状态。
• 不要粗重投影、霓虹渐变、拟物纹理、Emoji 装饰标题。
• 不要在 hover 时改变文字或点击区尺寸（反馈要“安静、本地”）。
• 不要引入 Web 字体或图标字体；图标用 1.8px 描边的内联 SVG。