fix(ui): restyle personal report pages to the product reading room

The report centre and reader were a second newspaper identity. They now reuse canvas, hairline, and serif display tokens so the document feels like the rest of Jyotisha.

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

frontend/DESIGN.md

@@ -35,15 +35,16 @@ Jyotisha feels like a private reading room: warm, editorial, grounded, and quiet
 | Error | `--color-danger` | `#9a2f2f` | Errors and destructive actions |
 | Accessible focus | `--color-focus` | `#85432f` | Keyboard focus and input focus |
 
-The personal report carries a second, narrower palette for its printed-paper
-surface. It is deliberately separate — the report is a document, not app chrome —
-and nothing outside `.personal-report-*` may use it.
+The personal report reuses the product palette. `--report-*` tokens exist so
+print can pin a light sheet independently of the screen theme; they are the
+canvas, hairline, and action colors, not a second visual identity. Nothing
+outside `.personal-report-*` and `.report-center-*` may use them.
 
 | Role | Token | Value | Usage |
 |---|---|---:|---|
-| Report paper | `--report-paper` | `#f8f5ee` | The report sheet itself |
-| Report rule | `--report-rule` | `#c9c2b7` | Rules and dividers inside the sheet |
-| Report accent | `--report-accent` | `#85432f` | Report headings, same hue as the action color |
+| Report paper | `--report-paper` | `#fbfaf7` | Same as `--color-canvas`; the reading sheet |
+| Report rule | `--report-rule` | `#d8d6cf` | Same as `--color-border`; rules inside the sheet |
+| Report accent | `--report-accent` | `#85432f` | Same as `--color-action`; scarce evidence links |
 
 Rules: neutrals stay warm; the action color is scarce; roughly ninety percent of the interface remains light. Dark ink is punctuation, never a page-scale surface. No raw color may appear in UI styles outside these tokens and their documented alpha mixes.
 
@@ -337,8 +338,24 @@ Text release is paced, not animated: the frame buffer commits at most once per a
 
 ### Personal report centre
 
-- A ready report keeps “查看报告” as the primary document action and may add the quieter “专业参考版（导出）” action beside it. The reference action downloads Markdown through the authenticated same-origin report route; it is absent for generating and failed records.
-- Export work uses the shared inline spinner inside the initiating button, reports a short row-local error, and never changes the stored report or starts a second writing flow.
+- **Structure:** full-page archive on the page floor. A compact back control, serif page title, supporting copy, one generate action, then a list of report cards.
+- **Surface:** `--color-canvas-soft` floor; cards use `--color-canvas`, a warm hairline, and `--radius-lg`. No drop shadow. Status is a caption badge, not a colored block.
+- **Typography:** page title uses `--type-display-lg` / `--font-display` at weight 400 with `text-wrap: balance`. Card titles are `--type-title-md` at weight 500. Body stays `--type-body-md` or `--type-body-sm`.
+- **Width:** 900px centered, matching long-form chat reading. Cards stack below 720px.
+- **Actions:** “生成完整报告” is the one filled action. A ready report keeps “查看报告” as the primary document action and may add the quieter “专业参考版（导出）” action beside it. The reference action downloads Markdown through the authenticated same-origin report route; it is absent for generating and failed records.
+- **States:** loading, empty, populated, generating, ready, failed, unauthorized, list error. Export work uses the shared inline spinner inside the initiating button, reports a short row-local error, and never changes the stored report or starts a second writing flow.
+- **Accessibility:** back, generate, refresh, and row actions are 44px. Status text uses a live region while a report is generating.
+
+### Personal report reader
+
+- **Structure:** sticky screen chrome (back, print), then an answer-first document: cover, executive judgement, natal chart evidence, thematic sections, appendix, provenance.
+- **Surface:** page floor `--color-canvas-soft`; the document is a `--color-canvas` sheet with a hairline and `--radius-lg`. Print flattens the sheet, hides chrome, and pins the light palette.
+- **Typography:** the subject name uses `--type-display-lg` serif at weight 400. Section titles use `--type-display-sm` serif at weight 400. Theme headings are `--type-title-md` sans at weight 500. Narrative is `--type-body-md` at 1.65, the same measure as chat answers. Labels stay 12–13px.
+- **Accent:** claim-status pills and evidence links may use the action color; headings stay ink. Dark ink is never a page-scale rule or card edge.
+- **Charts:** North-Indian SVG uses theme ink and canvas fills, never hardcoded light-only hex.
+- **Width:** 900px for the document; chart and evidence columns stack at 760px.
+- **States:** loading, generating, timed-out, unauthorized, not-found, failed, invalid, network-error, ready. Waiting uses `InlineSpinner`.
+- **Accessibility:** back, print, and appendix disclosure are 44px. Generating copy uses `role="status"`. Print remains keyboard-initiated from the chrome button.
 
 ### Product entrypoint card