VOZEB UI Migration 02 · M37 Billing plan surfaces

状态：LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST

任务边界

• Task ID：M37-BILLING-PLANS
• Base SHA：bb82022（codex/vozeb-retail-next-migration）
• 目标用户结果：套餐中心与升级套餐弹层在浅色、深色和窄屏下使用统一 Ocean Air / Liquid Glass 材质，价格、优惠、积分和选择操作保持原有语义。
• 允许修改：web/src/components/billing/billing-plans-modal.tsx、web/src/components/billing/billing-plan-grid.tsx、对应测试、本文档，以及 web/src/app/styles/global-profile-overrides.css 中的 billing plan 选择器。
• 非目标：API、支付、订单、路由、加载/选择回调、账务规则、模型目录和其它页面。

实现说明

• Modal、套餐卡、移动端 tab、空态和 Ant 主按钮统一读取 --ocean-air-* 与 --ocean-glass-* token；Modal 只保留一层外部 hairline，避免重复边框。
• 通过 data-ocean-component="billing-plan-grid|billing-plan-card|billing-plans-modal" 登记 Foundation 视觉契约；卡片与 tab 使用中性正文，主色只用于操作焦点和图形语义，优惠使用 danger 语义色。
• 保留产品请求、推荐方案计算、价格/折扣显示、移动 tab 选中、onSelect 回调与空/加载状态。
• 提供 prefers-reduced-motion、prefers-reduced-transparency、forced-colors 和不支持 backdrop-filter 时的可读降级。

验收证据

定向检查：

• BillingPlanGrid Vitest：2 tests passed。
• TypeScript、ESLint、Prettier、生产构建与 git diff --check：以本候选提交回传结果为准。

本切片未执行真实支付、真实账务写入或正式 Testing/Operations 验收；候选状态不提升为 Gate 通过。