优化 AI 用量页订阅额度卡片的视觉与窄宽度体验

[Spc-jgs]

背景

提交 4b3f3d4 已完成订阅额度卡片的第一轮重构：账号信息、剩余百分比、进度、重置时间与刷新状态已有明确层级，额度窗口按 Provider 原始语义顺序展示。

当前尚未完成真实 UI 体验验收，需要继续确认多账号、多窗口和窄宽度场景下的信息密度与视觉稳定性。

优化与验收范围

• 使用真实 Codex 与 Antigravity 账号检查 2 个、4 个额度窗口的卡片布局。
• 确认 Gemini 与 Claude/GPT 的 5 小时、每周窗口成组清晰，不因排序或换行产生误配。
• 检查约 300px 卡片宽度下的长账号名、邮箱、套餐名和窗口标题，避免关键语义被截断。
• 检查剩余额度正常、偏低、危险和未知状态的层级与对比度。
• 检查浅色、深色模式，以及较长的相对重置时间文案。
• 检查刷新中的布局稳定性，避免时间胶囊、进度和按钮跳动。
• 检查 Reduce Motion、键盘操作与 VoiceOver 标签。

不变量

• 不改变额度事实源、百分比计算或重置时间语义。
• 不在 View 中重新聚合 Provider 数据。
• 不改变 Provider 给出的窗口语义顺序。
• 无官方真值时继续显示不可用，不推算额度、Credits 或费用。

验收标准

• 用户能快速区分账号、模型家族、5 小时与每周额度。
• 两窗口和四窗口卡片在常见窗口宽度下无重叠、无歧义截断。
• 明暗主题、低额度状态及加载状态视觉清晰。
• Experience 层由真实运行与用户验收确认，不以 Release 构建代替。