替代 header 里直白的「余额 ¥12.80」。用圆环灯管表达累计额度与已消耗比例，剩余部分用另一色发光段表示。点击/悬停可看具体金额。
方案 A 仅显示圆环 + 剩余百分比，不直接暴露金额，适合 header 紧凑场景。
当前：金额完全外露，像账单条目。
方案 A：圆环总长 = 累计充值；两段颜色从 12 点顺时针排列。中心显示剩余占比。
与 A 相同圆环，但浮层通过点击打开（避免手机无 hover）。适合需要明确金额时再展开。
点击圆环切换浮层；低余额时环色变黄，耗尽时红色脉冲。
保留简短文案「可用 26%」，圆环缩小嵌在胶囊左侧，比纯数字含蓄但仍有一行提示。
弹窗内可用 88px 大圆环 + 三项明细，与 header 小环视觉语言一致。
圆环语义：外圈总长 = 累计充值总额；琥珀段 = 已消耗；青绿段 = 当前余额。
计算公式：已消耗 = 累计充值 − 当前余额（需后端返回 totalRechargeCents，或从流水汇总）。
状态色：剩余 > ¥1 青绿；≤ ¥1 琥珀警告；≤ ¥0 红色脉冲 + 点击直达充值。
无障碍：aria-label="账户额度，剩余 26%"，浮层内展示具体金额。
推荐：Header 用 方案 A（纯圆环 + hover 浮层）；移动端同一组件点击展开（方案 B 行为）。