fix(web): keep the settings dialog one size and move billing into it (BUG-554)

The four account panes now share a fixed frame, chart profiles open as list then detail, and membership lives in the homepage dialog instead of a separate page.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/DESIGN.md

@@ -169,7 +169,7 @@ Radii have two visual steps. Controls use 8px (`--radius-md`; `--radius-xs` and
 - Admin content width: 1200px, centered.
 - Desktop shell: 288px sidebar plus flexible reading panel.
 - Layout breakpoints: mobile below 768px, tablet 768–1023px, desktop 1024px and above. These three decide the shell — sidebar mode, grid columns, drawer versus rail.
-- Component breakpoints are separate and narrower, each owned by one surface rather than the shell: 900px and 480px (redemption and profile forms), 760px and 720px (personal report and report centre), 640px (rectification candidates), 639px (membership header), 620px (onboarding cards), 430px (toasts and the conversational rectification panel). Do not repurpose one for another surface, and do not assume testing the three layout tiers covers them.
+- Component breakpoints are separate and narrower, each owned by one surface rather than the shell: 900px and 480px (redemption and profile forms), 760px and 720px (personal report and report centre), 640px (rectification candidates), 767px (settings dialog mobile full-screen), 620px (onboarding cards), 430px (toasts and the conversational rectification panel). Do not repurpose one for another surface, and do not assume testing the three layout tiers covers them.
 - All full-height surfaces use `100dvh`. Touch targets are at least 44px. Where adjacent controls sit closer than 44px, the hit expands to the largest size that does not overlap; those exceptions are locked by `frontend/tests/touch-target-contract.test.ts`.
 
 ## 5. Components
@@ -183,7 +183,7 @@ Radii have two visual steps. Controls use 8px (`--radius-md`; `--radius-xs` and
 
 ### Button
 
-- **Implementation:** report surfaces and membership use `@/components/ui/button`. Login, onboarding, and birth-time dialogs still use `.button-primary` / `.button-secondary`, which share the same 44px height, 8px radius, and action tokens. Those CSS classes stay until those surfaces can move without growing `page.tsx`.
+- **Implementation:** report surfaces and the billing pane use `@/components/ui/button`. Login, onboarding, and birth-time dialogs still use `.button-primary` / `.button-secondary`, which share the same 44px height, 8px radius, and action tokens. Those CSS classes stay until those surfaces can move without growing `page.tsx`.
 - **Variants:** ink primary, cream secondary, text, circular icon, deep-brown emphasis.
 - **Spacing:** 44px minimum height; radii 8px for standard and full radius for icon-only.
 - **States:** default, hover, active, focus-visible, disabled, loading.
@@ -379,27 +379,26 @@ Text release is paced, not animated: the frame buffer commits at most once per a
 
 ### Account popover
 
-- **Structure:** identity header, profile action, redeem action with balance, administrator-only code-management link, divider, and logout action.
+- **Structure:** identity header, then 个人资料 / 星盘资料 / 通用设置 / 账户与点数 (with the current balance), theme preference, divider, and logout.
 - **Surface:** 280px elevated canvas popover anchored above the sidebar account trigger; warm hairline, existing elevated shadow, no nested cards.
-- **States:** closed, open, hover, focus-visible, administrator, and logout routing.
+- **States:** closed, open, hover, focus-visible, and logout confirmation.
 - **Accessibility:** `aria-expanded`, `aria-controls`, menu semantics, 44px rows, outside-click and Escape dismissal, and focus return.
+- **Billing:** the 账户与点数 row opens the settings dialog on the billing pane. It does not leave the homepage.
 
-### Profile dialog
+### Settings dialog
 
-- **Structure:** profile title, existing profile fields, inline result, and save action.
-- **Width:** 560px desktop maximum with viewport-safe spacing and internal scrolling.
-- **States:** open, invalid, saving, success, and error.
+- **Structure:** one fixed chrome for four panes — 个人资料, 星盘资料, 账户与点数, 通用设置. Left nav is 176px and does not scroll; the title bar stays put; only the right-hand content pane scrolls. Logout stays a separate 400px confirmation.
+- **Width / height:** desktop `width: min(100vw - 32px, 880px); height: min(84dvh, 640px)`. Switching panes does not change the frame. At ≤767px the dialog is full-screen with four equal tabs along the top.
+- **Personal profile:** one row of avatar editing (48px preview, eight palettes, 换一个形象) plus nickname and login email. No duplicate 管理星盘资料 button.
+- **Chart library:** list first (self row, other rows, 添加其他人). A row opens a detail with ← 星盘资料. Other details own 设为默认 / 删除 / 用于合盘 and that person's synastry history. The add form is a view, not an always-on stack.
+- **States:** open, pane switch, list / self / other / add, saving, success, and error.
 
-### Redeem dialog
+### Billing pane
 
-- **Structure:** current balance, redemption-code form, and inline result.
-- **Width:** 420px desktop maximum.
-- **States:** open, submitting, success, and error.
-
-### Membership
-
-- **Structure:** full-page archive on the page floor. Header chrome is back, orders, and redeem; the hero names the current plan; tabs switch membership vs credits; each plan/credit card carries one purchase action.
-- **Actions:** header chrome stays hairline `--color-ink-secondary`. The one filled terracotta control is the recommended-plan purchase (`Button` default). Other plan and credit buys use `Button` outline. Redeem opens a dialog; it is not a second filled button on the same screen.
+- **Structure:** summary line (balance · membership / expiry), then tabs 会员套餐 / 点数包 / 兑换码 / 订单记录.
+- **Actions:** recommended-plan purchase is `Button` default. Other plan and credit buys use `Button` outline. Cashier still opens with `window.open` in a new tab. Paying copy is 跳转收银台…; pending copy is 等待支付结果. Redeem is an inline form on its tab, not a nested dialog.
+- **Deep links:** `/?settings=billing&source=…[&plan=…][&tab=…]` open this pane on `/` and are then stripped. `/membership` and `/membership/orders` redirect here.
+- **Waiting:** the summary renders from the in-memory account. Package cards stay empty until `/api/payment/packages` arrives. No spinner, skeleton, or 「正在加载」.
 
 ### Logout dialog