优化详情与移动关键页视觉 Wave3（05-27-pc-detail-mobile-visual-wave3）

.trellis/spec/hyb-oa/frontend-react-vite-design.md

@@ -77,6 +77,45 @@ change the visual treatment once while preserving component contracts.
 - Focused Playwright screenshot coverage when changing login, Portal, primary
   PC list pages or command-bar/table styling.
 
+## Convention: Detail And Mobile Command Surfaces
+
+**What**: PC detail pages and notification-like flows should reuse the Wave3
+surface classes in `client/src/index.css` before adding page-local Tailwind
+card systems:
+
+- `detail-workspace-grid` for the main PC detail two-column workspace.
+- `detail-command-panel`, `detail-fact-grid` and `detail-fact-card` for compact
+  status, summary, payment, export and evidence facts.
+- `detail-evidence-card` for attachments, invoices and other proof material.
+- `detail-timeline` and `detail-timeline-item` for approval progress and
+  history.
+- `detail-action-stack` and `detail-action-card` for approve/reject/return,
+  payment and other high-risk command groups.
+- `notification-inbox`, `notification-row-card` and
+  `notification-row-card--unread` for PC notification streams; avoid reverting
+  notifications to a desktop table unless a task explicitly requires tabular
+  comparison.
+
+Mobile key pages should reuse the mobile command classes in
+`client/src/styles/mobile-touch.css`:
+
+- `mobile-focus-card` for the current task, current list or account summary.
+- `mobile-command-surface` for tabs, search and filters.
+- `mobile-list-card--focus` and `mobile-list-card--unread` for state emphasis.
+
+**Why**: Detail pages should feel like quiet command surfaces: status, summary,
+primary action, evidence and history have predictable places. Mobile pages
+should stay card/list based, with no PC tables, no horizontal overflow and no
+button text squeeze.
+
+**Tests Required**:
+
+- `cd client && npm run typecheck`
+- `cd client && npm run build`
+- Focused Playwright screenshot coverage for changed PC detail, notification
+  and mobile pages.
+- UI design rules check when changing shared visual classes.
+
 ## Scenario: Auth Pages And PWA Updates
 
 ### 1. Scope / Trigger