diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6202d13..be23c48 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -38,6 +38,8 @@ jobs:
         run: pip install -e '.[dev]'
       - name: Install frontend browser dependencies
         run: npm ci
+      - name: Install deterministic CJK screenshot font
+        run: sudo apt-get update && sudo apt-get install -y fonts-noto-cjk
       - name: Install Playwright Firefox
         run: npx playwright install --with-deps firefox
       - name: Validate frontend script syntax
@@ -46,6 +48,16 @@ jobs:
         run: python -m pytest tests/test_frontend_contract.py -q
       - name: Multi-viewport browser regression test
         run: npm run test:browser
+      - name: Upload visual baselines and failure diffs
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: theme-release-gate
+          if-no-files-found: ignore
+          path: |
+            tests/browser/*-snapshots/*.png
+            test-results/**/*.png
+            test-results/**/*.zip
 
   test:
     runs-on: ubuntu-latest
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5605eca..38a3a89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## v4.6.29 - 2026-08-15
+
+- Unified public chat, Support, status, settings, account, onboarding, and
+  operational state colors behind one light/dark semantic token contract.
+- Split info/success/warning/error foreground, surface, and opaque border roles
+  so components cannot accidentally reuse a background token as text.
+- Added a browser release gate for computed alpha-composited contrast across
+  desktop and 390x844, plus checked-in visual baselines and CI diff artifacts.
+- Fixed previously untested low-contrast borders on recommendation chips and
+  settings cards, and added an explicit accessible name to account settings.
+
 ## Unreleased
 
 ## v4.6.28 - 2026-08-15
diff --git a/docs/theme-system.md b/docs/theme-system.md
new file mode 100644
index 0000000..1ffaaa1
--- /dev/null
+++ b/docs/theme-system.md
@@ -0,0 +1,55 @@
+# Theme system and visual release gate
+
+The public UI has one semantic color contract in the `:root` and
+`html[data-theme="light"]` blocks of `web/styles.css`. Components must consume
+those tokens; they must not encode a light or dark palette locally.
+
+## Token roles
+
+- `--bg`, `--bg-deep`: page canvas.
+- `--surface`, `--surface-solid`, `--surface-soft`, `--surface-muted`,
+  `--surface-raised`, `--surface-inset`: elevation and containment.
+- `--text-primary`, `--text-secondary`, `--muted`: text hierarchy.
+- `--line`, `--line-strong`: decorative separators.
+- `--control-border`, `--focus-ring`: interactive boundaries and keyboard focus.
+- `--info-*`, `--success-*`, `--warning-*`, `--error-*`: separate
+  `surface`, `text`, and `border` roles. Never reuse a surface token as text.
+- `--action-*`, `--send-*`: composer actions and their state changes.
+
+SVG icons use `currentColor`. Selected, processing, disabled, error, and
+success states require a non-color cue such as a border, ring, icon, or label.
+
+## Release gate
+
+`tests/browser/onboarding-responsive.spec.js` exercises both themes at desktop
+and 390x844. It audits final computed colors after alpha composition for the
+chat landing page, a completed answer with Support references, system status,
+settings, account forms, and success/warning/error states.
+
+The gate enforces:
+
+- normal text contrast of at least 4.5:1;
+- tested control boundaries of at least 3:1;
+- no horizontal overflow at either viewport;
+- checked-in Firefox screenshot baselines for the light/dark status route.
+
+Run the gate with:
+
+```bash
+npm ci
+sudo apt-get install fonts-noto-cjk
+npx playwright install firefox
+npx playwright test tests/browser/onboarding-responsive.spec.js
+```
+
+Intentional visual changes require local review before updating snapshots with
+`--update-snapshots`. CI uploads the baselines and failure diffs for review.
+
+## New component checklist
+
+1. Use semantic tokens only; do not add component-local black/white RGBA colors.
+2. Verify default, hover, focus-visible, selected, processing, disabled,
+   loading, empty, success, warning, and error states where applicable.
+3. Add the component's rendered selectors to the computed-style audit.
+4. Check light/dark at desktop and 390x844, including keyboard focus.
+5. Update a screenshot baseline only after inspecting the rendered image.
diff --git a/pyproject.toml b/pyproject.toml
index af64dc2..16b6f88 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "sage-mate"
-version = "4.6.28"
+version = "4.6.29"
 description = "Sage Mate multi-profile local and hosted assistant built on SAGE and vllm-hust"
 readme = "README.md"
 license = {file = "LICENSE"}
diff --git a/src/sage_faculty_twin/__init__.py b/src/sage_faculty_twin/__init__.py
index 16a18be..44d79d7 100644
--- a/src/sage_faculty_twin/__init__.py
+++ b/src/sage_faculty_twin/__init__.py
@@ -1,5 +1,5 @@
 """Sage Mate application package."""
 
-__version__ = "4.6.28"
+__version__ = "4.6.29"
 
 __all__ = ["__version__"]
diff --git a/src/sage_faculty_twin/api.py b/src/sage_faculty_twin/api.py
index 327a54b..8977a9a 100644
--- a/src/sage_faculty_twin/api.py
+++ b/src/sage_faculty_twin/api.py
@@ -1269,7 +1269,7 @@ async def home() -> FileResponse:
 
 @llm_app.api_route("/styles.css", methods=["GET", "HEAD"], include_in_schema=False)
 @llm_app.api_route("/styles.4217.css", methods=["GET", "HEAD"], include_in_schema=False)
-@llm_app.api_route("/styles.4220.css", methods=["GET", "HEAD"], include_in_schema=False)
+@llm_app.api_route("/styles.4221.css", methods=["GET", "HEAD"], include_in_schema=False)
 async def styles() -> FileResponse:
     return frontend_asset("styles.css")
 
@@ -1284,7 +1284,7 @@ async def homepage_redirect() -> RedirectResponse:
 @llm_app.api_route("/app.js", methods=["GET", "HEAD"], include_in_schema=False)
 @llm_app.api_route("/app.4217.js", methods=["GET", "HEAD"], include_in_schema=False)
 @llm_app.api_route("/app.4218.js", methods=["GET", "HEAD"], include_in_schema=False)
-@llm_app.api_route("/app.4220.js", methods=["GET", "HEAD"], include_in_schema=False)
+@llm_app.api_route("/app.4221.js", methods=["GET", "HEAD"], include_in_schema=False)
 async def app_js() -> FileResponse:
     return frontend_asset("app.js")
 
diff --git a/src/sage_faculty_twin/web/index.html b/src/sage_faculty_twin/web/index.html
index 805638b..adcca49 100644
--- a/src/sage_faculty_twin/web/index.html
+++ b/src/sage_faculty_twin/web/index.html
@@ -21,7 +21,7 @@
     <link
         href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
         rel="stylesheet" media="print" onload="this.media='all'" />
-    <link rel="stylesheet" href="./styles.4220.css" />
+    <link rel="stylesheet" href="./styles.4221.css" />
     <link rel="stylesheet" href="./companion.css" />
     <style>
         html {
@@ -154,7 +154,8 @@ <h1 id="topbar-title" class="topbar-title">张书豪</h1>
                         </div>
                     </div>
                     <div class="rail-bottom">
-                        <button type="button" id="sidebar-user-icon" class="rail-user rail-btn" title="账号设置">
+                        <button type="button" id="sidebar-user-icon" class="rail-user rail-btn" title="账号设置"
+                            aria-label="账号设置">
                             <div class="rail-user-avatar"><svg class="ui-icon" aria-hidden="true"><use href="#icon-user"></use></svg></div>
                             <span class="rail-label" id="sidebar-user-name">用户</span>
                         </button>
@@ -1442,7 +1443,7 @@ <h3 class="analytics-section-title">待补知识草稿</h3>
     </section>
 
     <script src="./companion.js" defer></script>
-    <script src="./app.4220.js" defer></script>
+    <script src="./app.4221.js" defer></script>
 </body>
 
 </html>
diff --git a/src/sage_faculty_twin/web/styles.css b/src/sage_faculty_twin/web/styles.css
index 02445d6..9dd08e2 100644
--- a/src/sage_faculty_twin/web/styles.css
+++ b/src/sage_faculty_twin/web/styles.css
@@ -6,12 +6,16 @@
     --surface-soft: rgba(20, 43, 77, 0.84);
     --surface-hover: rgba(31, 61, 105, 0.92);
     --surface-muted: #122847;
+    --surface-raised: #102542;
+    --surface-inset: #09182d;
     --ink: #f4f7ff;
     --text-primary: #f4f7ff;
     --text-secondary: #c3d0e5;
     --muted: #9dafc9;
     --line: rgba(166, 201, 255, 0.18);
     --line-strong: rgba(166, 201, 255, 0.32);
+    --control-border: #7892b8;
+    --focus-ring: #27d5e9;
     --accent: #6d7cff;
     --accent-deep: #4656dc;
     --accent-2: #27d5e9;
@@ -22,14 +26,16 @@
     --user: #172f54;
     --success-surface: rgba(35, 211, 160, 0.14);
     --success-text: #7ff2ca;
+    --success-border: #4e9e83;
     --warning-surface: rgba(245, 184, 75, 0.16);
     --warning-text: #ffd98a;
+    --warning-border: #b88937;
     --error-surface: rgba(255, 107, 138, 0.15);
     --error-text: #ffb1c3;
-    /* Compatibility aliases: these names are backgrounds, not foregrounds. */
-    --success: var(--success-surface);
-    --warning: var(--warning-surface);
-    --error: var(--error-surface);
+    --error-border: #bd6177;
+    --info-surface: #132f5e;
+    --info-text: #c8d9ff;
+    --info-border: #7892b8;
     --shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
     --shadow-strong: 0 24px 68px rgba(0, 0, 0, 0.36);
     --glow: 0 0 28px rgba(109, 124, 255, 0.22);
@@ -72,12 +78,16 @@ html[data-theme="light"] {
     --surface-soft: #f4f8fd;
     --surface-hover: #e7f0fb;
     --surface-muted: #dce8f6;
+    --surface-raised: #ffffff;
+    --surface-inset: #e7eef8;
     --ink: #13243d;
     --text-primary: #13243d;
     --text-secondary: #3b506d;
     --muted: #5d718d;
     --line: rgba(42, 77, 119, 0.16);
     --line-strong: rgba(42, 77, 119, 0.3);
+    --control-border: #607894;
+    --focus-ring: #087f9f;
     --accent: #4d5ee5;
     --accent-deep: #3649c7;
     --accent-2: #087f9f;
@@ -88,13 +98,16 @@ html[data-theme="light"] {
     --user: #e2edfb;
     --success-surface: #e4f8f1;
     --success-text: #087657;
+    --success-border: #4b8d76;
     --warning-surface: #fff4d9;
     --warning-text: #8a5b00;
+    --warning-border: #987127;
     --error-surface: #ffebef;
     --error-text: #a52f4b;
-    --success: var(--success-surface);
-    --warning: var(--warning-surface);
-    --error: var(--error-surface);
+    --error-border: #a9586d;
+    --info-surface: #e4ecff;
+    --info-text: #3045a8;
+    --info-border: #607894;
     --shadow: 0 18px 46px rgba(40, 68, 106, 0.14);
     --shadow-strong: 0 24px 68px rgba(40, 68, 106, 0.2);
     --glow: 0 0 28px rgba(77, 94, 229, 0.16);
@@ -2894,8 +2907,9 @@ body.drawer-pinned .history-rail {
     min-height: 22px;
     padding: 0 9px;
     border-radius: 999px;
-    background: rgba(184, 107, 56, 0.12);
-    color: var(--warm-accent);
+    background: var(--info-surface);
+    color: var(--info-text);
+    border: 1px solid var(--info-border);
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: 0.08em;
@@ -2915,13 +2929,13 @@ body.drawer-pinned .history-rail {
 }
 
 .notification-card-sent {
-    border-color: rgba(53, 127, 84, 0.14);
-    background: rgba(239, 250, 243, 0.86);
+    border-color: var(--success-border);
+    background: var(--success-surface);
 }
 
 .notification-card-failed {
-    border-color: rgba(167, 53, 53, 0.18);
-    background: rgba(255, 241, 239, 0.92);
+    border-color: var(--error-border);
+    background: var(--error-surface);
 }
 
 .notification-card-skipped {
@@ -2949,8 +2963,9 @@ body.drawer-pinned .history-rail {
     border-radius: 999px;
     font-size: 0.78rem;
     font-weight: 700;
-    color: var(--accent-deep);
-    background: rgba(31, 122, 224, 0.1);
+    color: var(--info-text);
+    background: var(--info-surface);
+    border: 1px solid var(--info-border);
 }
 
 .notification-card-summary,
@@ -2995,8 +3010,8 @@ body.drawer-pinned .history-rail {
     gap: 4px;
     padding: 10px 12px;
     border-radius: 14px;
-    border: 1px dashed rgba(22, 35, 56, 0.12);
-    background: rgba(255, 252, 246, 0.72);
+    border: 1px dashed var(--control-border);
+    background: var(--surface-raised);
 }
 
 .message-knowledge-item span {
@@ -3042,8 +3057,9 @@ body.drawer-pinned .history-rail {
     min-height: 24px;
     padding: 0 10px;
     border-radius: 999px;
-    background: rgba(39, 213, 233, 0.14);
-    color: var(--accent-2);
+    background: var(--info-surface);
+    color: var(--info-text);
+    border: 1px solid var(--info-border);
     font-size: 0.78rem;
     font-weight: 600;
 }
@@ -3118,7 +3134,7 @@ body.drawer-pinned .history-rail {
     padding: 12px 14px;
     border-top: 1px dashed var(--line);
     border-radius: 16px;
-    background: rgba(255, 255, 255, 0.42);
+    background: var(--surface-soft);
 }
 
 .message-feedback-actions {
@@ -3379,7 +3395,7 @@ html[data-theme="light"] .inline-status-error { background: var(--error-surface)
 .chat-shell.chat-empty .seed-chip {
     min-height: 38px;
     padding: 8px 15px;
-    border-color: var(--line-strong);
+    border-color: var(--control-border);
     background: var(--surface-solid);
 }
 
@@ -3776,9 +3792,9 @@ body.onboarding-active .chat-shell .onboarding-done {
     margin: 16px auto 0;
     padding: 20px 22px;
     border-radius: 16px;
-    background: linear-gradient(135deg, rgba(248, 248, 252, 0.92), rgba(243, 244, 251, 0.95));
-    border: 1.5px solid rgba(99, 102, 241, 0.15);
-    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
+    background: var(--surface-raised);
+    border: 1.5px solid var(--control-border);
+    box-shadow: var(--shadow);
     animation: onboarding-fade-in 0.3s ease;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
@@ -3803,8 +3819,9 @@ body.onboarding-active .chat-shell .onboarding-done {
 .onboarding-badge {
     font-size: 0.7rem;
     font-weight: 600;
-    color: #6366f1;
-    background: rgba(99, 102, 241, 0.1);
+    color: var(--info-text);
+    background: var(--info-surface);
+    border: 1px solid var(--info-border);
     padding: 3px 10px;
     border-radius: 999px;
     letter-spacing: 0.02em;
@@ -3814,7 +3831,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 .onboarding-progress {
     flex: 1;
     height: 4px;
-    background: rgba(0, 0, 0, 0.06);
+    background: var(--surface-inset);
     border-radius: 999px;
     overflow: hidden;
 }
@@ -3829,7 +3846,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 
 .onboarding-step-label {
     font-size: 0.75rem;
-    color: rgba(0, 0, 0, 0.4);
+    color: var(--muted);
     font-weight: 500;
     white-space: nowrap;
 }
@@ -3842,7 +3859,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 
 .onboarding-step-copy {
     font-size: 0.85rem;
-    color: rgba(0, 0, 0, 0.55);
+    color: var(--text-secondary);
     margin: 0;
     font-weight: 500;
 }
@@ -3852,8 +3869,8 @@ body.onboarding-active .chat-shell .onboarding-done {
 }
 
 .onboarding-question-card {
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: var(--surface-soft);
+    border: 1px solid var(--control-border);
     border-radius: 12px;
     padding: 14px 16px;
     display: flex;
@@ -3867,7 +3884,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 
 .onboarding-question-text {
     font-size: 0.9rem;
-    color: rgba(0, 0, 0, 0.8);
+    color: var(--text-primary);
     margin: 0;
     line-height: 1.5;
     font-weight: 500;
@@ -3875,7 +3892,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 
 .onboarding-question-hint {
     font-size: 0.78rem;
-    color: rgba(99, 102, 241, 0.7);
+    color: var(--info-text);
     margin: 0;
     font-style: italic;
     transition: opacity 0.3s ease;
@@ -3891,9 +3908,9 @@ body.onboarding-active .chat-shell .onboarding-done {
     gap: 6px;
     padding: 8px 14px;
     border-radius: 999px;
-    border: 1.5px solid rgba(99, 102, 241, 0.35);
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.07), rgba(99, 102, 241, 0.13));
-    color: #6366f1;
+    border: 1.5px solid var(--info-border);
+    background: var(--info-surface);
+    color: var(--info-text);
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
@@ -3903,9 +3920,9 @@ body.onboarding-active .chat-shell .onboarding-done {
 }
 
 .onboarding-random-btn:hover {
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.2));
-    border-color: rgba(99, 102, 241, 0.55);
-    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.18);
+    background: var(--surface-hover);
+    border-color: var(--focus-ring);
+    box-shadow: 0 0 0 3px var(--action-ring);
     transform: translateY(-1px);
 }
 
@@ -3941,7 +3958,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 
 .onboarding-cta {
     font-size: 0.8rem;
-    color: rgba(0, 0, 0, 0.45);
+    color: var(--muted);
     margin: 4px 0 0 0;
     font-style: italic;
 }
@@ -4019,13 +4036,13 @@ body.onboarding-active .chat-shell .onboarding-done {
 .onboarding-done-title {
     font-size: 1rem;
     font-weight: 600;
-    color: #6366f1;
+    color: var(--info-text);
     margin: 0;
 }
 
 .onboarding-done-copy {
     font-size: 0.82rem;
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--text-secondary);
     margin: 0;
 }
 
@@ -4034,7 +4051,7 @@ body.onboarding-active .chat-shell .onboarding-done {
     align-items: center;
     gap: 7px;
     font-size: 0.8rem;
-    color: rgba(0, 0, 0, 0.55);
+    color: var(--text-secondary);
     cursor: pointer;
     margin-top: 6px;
     user-select: none;
@@ -4044,7 +4061,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 .onboarding-dismiss-label input[type="checkbox"] {
     width: 14px;
     height: 14px;
-    accent-color: #6366f1;
+    accent-color: var(--accent);
     cursor: pointer;
     flex-shrink: 0;
 }
@@ -4066,18 +4083,18 @@ body.onboarding-active .chat-shell .onboarding-done {
     border: none;
     border-radius: 10px;
     background: transparent;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--text-secondary);
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease;
 }
 
 .mobile-sidebar-btn:hover {
-    background: rgba(0, 0, 0, 0.06);
-    color: rgba(0, 0, 0, 0.85);
+    background: var(--surface-hover);
+    color: var(--text-primary);
 }
 
 .mobile-sidebar-btn:active {
-    background: rgba(0, 0, 0, 0.10);
+    background: var(--surface-muted);
 }
 
 /* Backdrop overlay (hidden by default) */
@@ -4206,7 +4223,8 @@ body.onboarding-active .chat-shell .onboarding-done {
     display: flex;
     gap: 0.25rem;
     padding: 0.25rem;
-    background: rgba(0, 0, 0, 0.04);
+    background: var(--surface-inset);
+    border: 1px solid var(--line-strong);
     border-radius: 0.5rem;
     margin-bottom: 1.25rem;
 }
@@ -4217,7 +4235,7 @@ body.onboarding-active .chat-shell .onboarding-done {
     border: none;
     border-radius: 0.375rem;
     background: transparent;
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--text-secondary);
     font-weight: 500;
     font-size: 0.9rem;
     cursor: pointer;
@@ -4225,12 +4243,14 @@ body.onboarding-active .chat-shell .onboarding-done {
 }
 
 .account-tab:hover {
-    color: rgba(0, 0, 0, 0.8);
+    color: var(--text-primary);
+    background: var(--surface-hover);
 }
 
 .account-tab.active {
-    background: #6366f1;
-    color: #fff;
+    background: var(--accent-deep);
+    color: #ffffff;
+    box-shadow: inset 0 0 0 1px var(--focus-ring);
 }
 
 .account-tab-panel {
@@ -4240,9 +4260,9 @@ body.onboarding-active .chat-shell .onboarding-done {
 .account-link-card {
     margin-top: 1rem;
     padding: 1rem;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--control-border);
     border-radius: 8px;
-    background: rgba(255, 255, 255, 0.78);
+    background: var(--surface-raised);
 }
 
 .account-link-card-head {
@@ -4260,7 +4280,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 .account-link-card p,
 .account-link-steps {
     margin: 0;
-    color: rgba(0, 0, 0, 0.58);
+    color: var(--text-secondary);
     font-size: 0.86rem;
 }
 
@@ -4268,7 +4288,9 @@ body.onboarding-active .chat-shell .onboarding-done {
     margin: 0.85rem 0;
     padding: 0.75rem;
     border-radius: 8px;
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--surface-inset);
+    color: var(--text-primary);
+    border: 1px solid var(--line-strong);
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     font-size: 1.25rem;
     letter-spacing: 0;
@@ -4294,7 +4316,7 @@ body.onboarding-active .chat-shell .onboarding-done {
 /* Restyle drawer content inside chat-view for clean look */
 .chat-view .drawer-card {
     background: var(--surface-solid);
-    border: 1px solid var(--line-strong);
+    border: 1px solid var(--control-border);
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 8px;
@@ -5466,7 +5488,7 @@ input,
 textarea,
 select {
     width: 100%;
-    border: 1px solid var(--line);
+    border: 1px solid var(--control-border);
     border-radius: 16px;
     background: var(--surface-solid);
     padding: 13px 14px;
@@ -5483,10 +5505,11 @@ textarea::placeholder,
 }
 
 input:focus,
-textarea:focus {
+textarea:focus,
+select:focus {
     outline: none;
-    border-color: rgba(31, 122, 224, 0.45);
-    box-shadow: 0 0 0 4px rgba(31, 122, 224, 0.12);
+    border-color: var(--focus-ring);
+    box-shadow: 0 0 0 4px var(--action-ring);
 }
 
 textarea {
@@ -6141,9 +6164,9 @@ label span {
     padding: 7px 12px;
     font-size: 0.82rem;
     font-weight: 600;
-    color: var(--accent-deep);
-    background: rgba(31, 122, 224, 0.08);
-    border: 1px solid rgba(31, 122, 224, 0.12);
+    color: var(--info-text);
+    background: var(--info-surface);
+    border: 1px solid var(--info-border);
 }
 
 .drawer-group {
@@ -6154,8 +6177,8 @@ label span {
 .drawer-card {
     padding: 14px;
     border-radius: 18px;
-    border: 1px solid rgba(22, 35, 56, 0.08);
-    background: linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(244, 238, 229, 0.94));
+    border: 1px solid var(--control-border);
+    background: var(--surface-raised);
 }
 
 .drawer-group-head {
@@ -6189,8 +6212,9 @@ label span {
 }
 
 .drawer-card .ghost-button.drawer-button {
-    border-color: rgba(22, 35, 56, 0.1);
-    background: rgba(255, 255, 255, 0.6);
+    border-color: var(--control-border);
+    background: var(--surface-soft);
+    color: var(--text-primary);
 }
 
 .drawer-card .primary-button.drawer-button {
@@ -7588,17 +7612,17 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .workflow-step-completed {
-    border-color: rgba(53, 127, 84, 0.12);
+    border-color: var(--success-border);
 }
 
 .workflow-step-completed .workflow-step-index {
-    background: rgba(53, 127, 84, 0.12);
-    color: #25603d;
-    box-shadow: 0 0 0 6px rgba(53, 127, 84, 0.08);
+    background: var(--success-surface);
+    color: var(--success-text);
+    box-shadow: 0 0 0 6px var(--success-surface);
 }
 
 .workflow-step-skipped {
-    background: #fffdf5;
+    background: var(--surface-muted);
 }
 
 .workflow-step-active {
@@ -7607,8 +7631,8 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .workflow-step-current {
-    border-color: rgba(31, 122, 224, 0.38);
-    background: linear-gradient(180deg, rgba(226, 237, 251, 0.92), rgba(248, 244, 237, 0.94));
+    border-color: var(--info-border);
+    background: var(--info-surface);
     box-shadow: var(--shadow-strong);
 }
 
@@ -7623,19 +7647,20 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .workflow-step-current .workflow-step-title {
-    color: var(--accent-deep);
+    color: var(--info-text);
 }
 
 .workflow-step-current .workflow-step-summary {
-    color: #35516f;
+    color: var(--text-secondary);
 }
 
 .workflow-step-pending {
-    background: #fbfcfe;
+    background: var(--surface-soft);
 }
 
 .workflow-step-error {
-    background: var(--error);
+    background: var(--error-surface);
+    border-color: var(--error-border);
 }
 
 .workflow-step-empty .workflow-step-index {
@@ -7659,19 +7684,19 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .inline-status-success {
-    border-color: rgba(35, 211, 160, 0.42);
+    border-color: var(--success-border);
     background: var(--success-surface);
     color: var(--success-text);
 }
 
 .inline-status-error {
-    border-color: rgba(255, 107, 138, 0.44);
+    border-color: var(--error-border);
     background: var(--error-surface);
     color: var(--error-text);
 }
 
 .inline-status-warning {
-    border-color: rgba(245, 184, 75, 0.42);
+    border-color: var(--warning-border);
     background: var(--warning-surface);
     color: var(--warning-text);
 }
@@ -7689,9 +7714,9 @@ body.profile-code-assistant .composer-tools-row {
     position: relative;
     border-radius: 16px;
     padding: 16px;
-    background: linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(245, 239, 231, 0.96));
-    border: 1px solid rgba(22, 35, 56, 0.08);
-    box-shadow: 0 12px 24px rgba(33, 42, 56, 0.05);
+    background: var(--surface-raised);
+    border: 1px solid var(--control-border);
+    box-shadow: var(--shadow);
     display: grid;
     gap: 10px;
     overflow: hidden;
@@ -7718,11 +7743,12 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .list-card-booking-pending {
-    background: linear-gradient(180deg, rgba(247, 251, 243, 0.98), rgba(239, 247, 241, 0.98));
+    background: var(--success-surface);
+    border-color: var(--success-border);
 }
 
 .list-card-booking-resolved {
-    background: linear-gradient(180deg, rgba(251, 248, 242, 0.96), rgba(243, 238, 230, 0.96));
+    background: var(--surface-muted);
 }
 
 .list-card-suggestion::before {
@@ -7730,7 +7756,8 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .list-card-suggestion {
-    background: linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(246, 239, 231, 0.98));
+    background: var(--info-surface);
+    border-color: var(--info-border);
 }
 
 .list-card-memory::before {
@@ -7742,11 +7769,12 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .list-card-escalation-pending {
-    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 241, 228, 0.98));
+    background: var(--warning-surface);
+    border-color: var(--warning-border);
 }
 
 .list-card-escalation-resolved {
-    background: linear-gradient(180deg, rgba(250, 245, 238, 0.96), rgba(243, 237, 230, 0.96));
+    background: var(--surface-muted);
 }
 
 .list-card-analytics::before {
@@ -7754,23 +7782,28 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .list-card-analytics-cluster {
-    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(231, 240, 252, 0.98));
+    background: var(--info-surface);
+    border-color: var(--info-border);
 }
 
 .list-card-analytics-gap {
-    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(252, 239, 225, 0.98));
+    background: var(--warning-surface);
+    border-color: var(--warning-border);
 }
 
 .list-card-analytics-unresolved {
-    background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(252, 231, 231, 0.98));
+    background: var(--error-surface);
+    border-color: var(--error-border);
 }
 
 .list-card-analytics-handoff {
-    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.98));
+    background: var(--warning-surface);
+    border-color: var(--warning-border);
 }
 
 .list-card-analytics-draft {
-    background: linear-gradient(180deg, rgba(245, 243, 255, 0.98), rgba(237, 233, 254, 0.98));
+    background: var(--info-surface);
+    border-color: var(--info-border);
 }
 
 .list-card h3 {
@@ -7799,7 +7832,7 @@ body.profile-code-assistant .composer-tools-row {
     gap: 12px;
     flex-wrap: wrap;
     padding-top: 10px;
-    border-top: 1px dashed rgba(22, 35, 56, 0.12);
+    border-top: 1px dashed var(--control-border);
 }
 
 .inline-action-button {
@@ -7877,37 +7910,37 @@ body.profile-code-assistant .composer-tools-row {
 .status-badge-pending {
     background: var(--warning-surface);
     color: var(--warning-text);
-    border-color: rgba(245, 184, 75, 0.42);
+    border-color: var(--warning-border);
 }
 
 .status-badge-confirmed {
     background: var(--success-surface);
     color: var(--success-text);
-    border-color: rgba(35, 211, 160, 0.42);
+    border-color: var(--success-border);
 }
 
 .status-badge-rejected {
     background: var(--error-surface);
     color: var(--error-text);
-    border-color: rgba(255, 107, 138, 0.44);
+    border-color: var(--error-border);
 }
 
 .status-badge-review {
-    background: rgba(31, 122, 224, 0.1);
-    color: var(--accent-deep);
-    border-color: rgba(31, 122, 224, 0.16);
+    background: var(--info-surface);
+    color: var(--info-text);
+    border-color: var(--info-border);
 }
 
 .status-badge-info {
-    background: var(--accent-soft);
-    color: var(--accent-deep);
-    border-color: rgba(36, 90, 166, 0.14);
+    background: var(--info-surface);
+    color: var(--info-text);
+    border-color: var(--info-border);
 }
 
 .status-badge-handoff {
-    background: #fff4db;
-    color: #8a5a16;
-    border-color: rgba(181, 126, 36, 0.18);
+    background: var(--warning-surface);
+    color: var(--warning-text);
+    border-color: var(--warning-border);
 }
 
 .availability-grid {
@@ -8634,7 +8667,8 @@ body.profile-code-assistant .composer-tools-row {
     display: flex;
     gap: 0.25rem;
     padding: 0.25rem;
-    background: rgba(0, 0, 0, 0.04);
+    background: var(--surface-inset);
+    border: 1px solid var(--line-strong);
     border-radius: 0.5rem;
     margin-bottom: 1.25rem;
 }
@@ -8645,7 +8679,7 @@ body.profile-code-assistant .composer-tools-row {
     border: none;
     border-radius: 0.375rem;
     background: transparent;
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--text-secondary);
     font-weight: 500;
     font-size: 0.9rem;
     cursor: pointer;
@@ -8653,12 +8687,14 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .auth-tab:hover {
-    color: rgba(0, 0, 0, 0.8);
+    color: var(--text-primary);
+    background: var(--surface-hover);
 }
 
 .auth-tab.active {
-    background: #6366f1;
-    color: #fff;
+    background: var(--accent-deep);
+    color: #ffffff;
+    box-shadow: inset 0 0 0 1px var(--focus-ring);
 }
 
 .auth-panels {
@@ -8699,15 +8735,15 @@ body.profile-code-assistant .composer-tools-row {
     border: none;
     border-radius: 10px;
     background: transparent;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--text-secondary);
     cursor: pointer;
     flex-shrink: 0;
     transition: background 0.15s ease, color 0.15s ease;
 }
 
 .sidebar-toggle-btn:hover {
-    background: rgba(0, 0, 0, 0.06);
-    color: rgba(0, 0, 0, 0.85);
+    background: var(--surface-hover);
+    color: var(--text-primary);
 }
 
 /* Sidebar quick action buttons */
@@ -8716,7 +8752,7 @@ body.profile-code-assistant .composer-tools-row {
     flex-direction: column;
     gap: 0.25rem;
     padding: 0.75rem 1rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+    border-bottom: 1px solid var(--line-strong);
 }
 
 .sidebar-action-btn {
@@ -8727,7 +8763,7 @@ body.profile-code-assistant .composer-tools-row {
     border: none;
     border-radius: 0.5rem;
     background: transparent;
-    color: rgba(0, 0, 0, 0.7);
+    color: var(--text-secondary);
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
@@ -8737,7 +8773,8 @@ body.profile-code-assistant .composer-tools-row {
 }
 
 .sidebar-action-btn:hover {
-    background: rgba(0, 0, 0, 0.06);
+    background: var(--surface-hover);
+    color: var(--text-primary);
 }
 
 .history-section-title {
@@ -8745,7 +8782,7 @@ body.profile-code-assistant .composer-tools-row {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: rgba(0, 0, 0, 0.4);
+    color: var(--muted);
     padding: 1rem 1rem 0.5rem;
 }
 
@@ -8802,7 +8839,7 @@ body.profile-code-assistant .composer-tools-row {
     align-items: center;
     gap: 6px;
     padding: 7px 14px;
-    border: 1px solid var(--line-strong);
+    border: 1px solid var(--control-border);
     border-radius: 999px;
     background: var(--surface-solid);
     color: var(--text-secondary);
diff --git a/tests/browser/onboarding-responsive.spec.js b/tests/browser/onboarding-responsive.spec.js
index eeeeca1..96b121a 100644
--- a/tests/browser/onboarding-responsive.spec.js
+++ b/tests/browser/onboarding-responsive.spec.js
@@ -28,11 +28,11 @@ function handleFixtureRequest(request, response) {
     sendFile(response, "index.html", "text/html; charset=utf-8");
     return;
   }
-  if (pathname === "/styles.4220.css" || pathname === "/styles.css") {
+  if (pathname === "/styles.4221.css" || pathname === "/styles.css") {
     sendFile(response, "styles.css", "text/css; charset=utf-8");
     return;
   }
-  if (pathname === "/app.4220.js" || pathname === "/app.js") {
+  if (pathname === "/app.4221.js" || pathname === "/app.js") {
     sendFile(response, "app.js", "text/javascript; charset=utf-8");
     return;
   }
@@ -51,7 +51,7 @@ function handleFixtureRequest(request, response) {
     });
     response.end(JSON.stringify({
       status: "ok",
-      app_version: "4.6.26",
+      app_version: "4.6.29",
       model_name: "vllm-ascend/DeepSeek-V4-Flash-w8a8-mtp",
       engine_image: "vllm-ascend-hust:graph-runtime",
       npu_devices: "0,1,2,3,4,5,6,7",
@@ -83,7 +83,16 @@ function handleFixtureRequest(request, response) {
       "content-type": "text/event-stream; charset=utf-8",
     });
     response.end([
-      `data: ${JSON.stringify({ type: "answer_done", response: { answer: "这是测试回答。" } })}\n\n`,
+      `data: ${JSON.stringify({ type: "answer_done", response: {
+        answer: "这是测试回答，包含可核验的公开资料。",
+        answer_basis: [{
+          basis_label: "公开资料",
+          source_label: "研究主页",
+          title: "研究方向与公开项目",
+          detail: "依据公开主页与项目文档整理。",
+        }],
+        knowledge_hits: [{ title: "研究方向与公开项目", source_name: "研究主页" }],
+      } })}\n\n`,
       `data: ${JSON.stringify({ type: "complete" })}\n\n`,
     ].join(""));
     return;
@@ -94,12 +103,17 @@ function handleFixtureRequest(request, response) {
       "content-type": "application/json; charset=utf-8",
     });
     response.end(JSON.stringify({
-      answer: "这是测试回答。",
+      answer: "这是测试回答，包含可核验的公开资料。",
       conversation_id: "fixture-conversation",
       workflow_trace: [],
-      answer_basis: [],
+      answer_basis: [{
+        basis_label: "公开资料",
+        source_label: "研究主页",
+        title: "研究方向与公开项目",
+        detail: "依据公开主页与项目文档整理。",
+      }],
       follow_up_actions: [],
-      knowledge_hits: [],
+      knowledge_hits: [{ title: "研究方向与公开项目", source_name: "研究主页" }],
     }));
     return;
   }
@@ -134,7 +148,16 @@ async function openOnboarding(page, viewport) {
     contentType: "text/event-stream; charset=utf-8",
     headers: { "cache-control": "no-store" },
     body: [
-      `data: ${JSON.stringify({ type: "answer_done", response: { answer: "这是测试回答。" } })}\n\n`,
+      `data: ${JSON.stringify({ type: "answer_done", response: {
+        answer: "这是测试回答，包含可核验的公开资料。",
+        answer_basis: [{
+          basis_label: "公开资料",
+          source_label: "研究主页",
+          title: "研究方向与公开项目",
+          detail: "依据公开主页与项目文档整理。",
+        }],
+        knowledge_hits: [{ title: "研究方向与公开项目", source_name: "研究主页" }],
+      } })}\n\n`,
       `data: ${JSON.stringify({ type: "complete" })}\n\n`,
     ].join(""),
   }));
@@ -143,12 +166,17 @@ async function openOnboarding(page, viewport) {
     contentType: "application/json; charset=utf-8",
     headers: { "cache-control": "no-store" },
     body: JSON.stringify({
-      answer: "这是测试回答。",
+      answer: "这是测试回答，包含可核验的公开资料。",
       conversation_id: "fixture-conversation",
       workflow_trace: [],
-      answer_basis: [],
+      answer_basis: [{
+        basis_label: "公开资料",
+        source_label: "研究主页",
+        title: "研究方向与公开项目",
+        detail: "依据公开主页与项目文档整理。",
+      }],
       follow_up_actions: [],
-      knowledge_hits: [],
+      knowledge_hits: [{ title: "研究方向与公开项目", source_name: "研究主页" }],
     }),
   }));
   await page.goto(fixtureBaseUrl, { waitUntil: "domcontentloaded" });
@@ -552,15 +580,217 @@ test("active chat exposes a usable stop control and sends server cancellation",
   const stopButton = page.getByRole("button", { name: "停止生成" });
   await expect(stopButton).toBeEnabled();
   await expect(stopButton).toHaveAttribute("data-mode", "stop");
-  const stopGlyph = await stopButton.locator(".send-button-spinner").evaluate((element) => ({
-    opacity: getComputedStyle(element).opacity,
-    borderRadius: getComputedStyle(element).borderRadius,
-  }));
-  expect(stopGlyph.opacity).toBe("1");
-  expect(stopGlyph.borderRadius).toBe("3px");
+  await expect.poll(
+    () => stopButton.locator(".send-button-spinner").evaluate(
+      (element) => getComputedStyle(element).opacity,
+    ),
+  ).toBe("1");
+  await expect.poll(
+    () => stopButton.locator(".send-button-spinner").evaluate(
+      (element) => getComputedStyle(element).borderRadius,
+    ),
+  ).toBe("3px");
 
   await stopButton.click();
   await expect(page.getByText("已停止生成。你可以修改问题后重新发送。")).toBeVisible();
   await expect(page.getByRole("button", { name: "发送问题" })).toHaveAttribute("data-mode", "send");
   expect(cancelRequestUrl).toContain("/chat/cancel?request_id=");
 });
+
+async function openThemeFixture(page, theme, viewport) {
+  await page.setViewportSize(viewport);
+  await page.route("https://fonts.**", (route) => route.abort());
+  await page.goto(fixtureBaseUrl, { waitUntil: "domcontentloaded" });
+  await page.evaluate((selectedTheme) => {
+    localStorage.setItem("sageMateTheme", selectedTheme);
+    localStorage.setItem("sageOnboardingCompleted", "true");
+    localStorage.setItem("sageOnboardingDismissed", "true");
+  }, theme);
+  await page.reload({ waitUntil: "domcontentloaded" });
+  await expect(page.locator("html")).toHaveAttribute("data-theme", theme);
+}
+
+async function openRailView(page, buttonName, viewport) {
+  if (viewport.width <= 720) {
+    const menu = page.getByRole("button", { name: "打开菜单" });
+    if (await menu.isVisible()) {
+      await menu.click();
+    }
+  }
+  const target = buttonName === "账号设置"
+    ? page.locator("#sidebar-user-icon")
+    : page.getByRole("button", { name: buttonName });
+  await target.click();
+}
+
+async function auditThemeSelectors(page, selectors) {
+  return page.evaluate((requestedSelectors) => {
+    const parseColor = (value) => {
+      const values = String(value || "").match(/[\d.]+/g)?.map(Number) || [0, 0, 0, 0];
+      return { r: values[0], g: values[1], b: values[2], a: values[3] ?? 1 };
+    };
+    const blend = (front, back) => ({
+      r: front.r * front.a + back.r * (1 - front.a),
+      g: front.g * front.a + back.g * (1 - front.a),
+      b: front.b * front.a + back.b * (1 - front.a),
+      a: 1,
+    });
+    const backdrop = (element, includeSelf = true) => {
+      const layers = [];
+      for (let node = includeSelf ? element : element.parentElement; node; node = node.parentElement) {
+        const style = getComputedStyle(node);
+        layers.push({ color: parseColor(style.backgroundColor), opacity: Number(style.opacity || 1) });
+      }
+      return layers.reverse().reduce((result, layer) => {
+        const color = { ...layer.color, a: layer.color.a * layer.opacity };
+        return color.a > 0 ? blend(color, result) : result;
+      }, { r: 255, g: 255, b: 255, a: 1 });
+    };
+    const luminance = ({ r, g, b }) => {
+      const channels = [r, g, b].map((value) => {
+        const channel = value / 255;
+        return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+      });
+      return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
+    };
+    const contrast = (firstColor, secondColor) => {
+      const first = luminance(firstColor);
+      const second = luminance(secondColor);
+      return (Math.max(first, second) + 0.05) / (Math.min(first, second) + 0.05);
+    };
+    return requestedSelectors.map((selector) => {
+      const element = document.querySelector(selector);
+      if (!element) {
+        return { selector, missing: true };
+      }
+      const style = getComputedStyle(element);
+      const bounds = element.getBoundingClientRect();
+      const hidden = style.display === "none" || style.visibility === "hidden" || bounds.width === 0 || bounds.height === 0;
+      const ownBackdrop = backdrop(element);
+      const outsideBackdrop = backdrop(element, false);
+      const foreground = blend(parseColor(style.color), ownBackdrop);
+      const border = blend(parseColor(style.borderTopColor), outsideBackdrop);
+      return {
+        selector,
+        hidden,
+        color: style.color,
+        background: style.backgroundColor,
+        border: style.borderTopColor,
+        textContrast: contrast(foreground, ownBackdrop),
+        borderContrast: style.borderTopStyle === "none" || Number.parseFloat(style.borderTopWidth) === 0
+          ? null
+          : contrast(border, outsideBackdrop),
+      };
+    });
+  }, selectors);
+}
+
+function expectThemeAuditPasses(audit, { requireBorders = [] } = {}) {
+  expect(audit.filter((sample) => sample.missing || sample.hidden)).toEqual([]);
+  for (const sample of audit) {
+    expect(sample.textContrast, `${sample.selector} text contrast`).toBeGreaterThanOrEqual(4.5);
+    if (requireBorders.includes(sample.selector)) {
+      expect(sample.borderContrast, `${sample.selector} border contrast`).toBeGreaterThanOrEqual(3);
+    }
+  }
+}
+
+test("semantic theme contract covers chat, Support, status, account, settings, and feedback states", async ({ page }) => {
+  const viewports = [{ width: 1280, height: 800 }, { width: 390, height: 844 }];
+  for (const theme of ["dark", "light"]) {
+    for (const viewport of viewports) {
+      await openThemeFixture(page, theme, viewport);
+      expectThemeAuditPasses(await auditThemeSelectors(page, [
+        ".greeting-text",
+        ".greeting-subtitle",
+        ".seed-chips-label",
+        ".seed-chip",
+        "#chat-question",
+        ".composer-pill-toggle .pill-toggle-label",
+        "#lucky-question-button",
+        ".token-usage-toggle",
+      ]), { requireBorders: [".seed-chip", "#lucky-question-button", ".token-usage-toggle"] });
+
+      await page.locator("#chat-question").fill("请介绍研究方向并给出依据");
+      await page.getByRole("button", { name: "发送问题" }).click();
+      await expect(page.locator(".message-ready")).toBeVisible();
+      expectThemeAuditPasses(await auditThemeSelectors(page, [
+        ".message-ready .message-body",
+        ".message-section-title",
+        ".message-basis-copy",
+        ".message-basis-tag",
+        ".message-basis-title",
+        ".message-basis-detail",
+      ]), { requireBorders: [".message-basis-tag"] });
+
+      await openRailView(page, "系统状态", viewport);
+      await expect(page.locator("#status-view")).toBeVisible();
+      expectThemeAuditPasses(await auditThemeSelectors(page, [
+        ".chat-view-title",
+        ".status-section-title",
+        "#view-model-name .status-label",
+        "#view-model-name .status-value",
+      ]));
+
+      await openRailView(page, "账号设置", viewport);
+      await expect(page.locator("#settings-view")).toBeVisible();
+      await page.locator("#settings-view-body").evaluate((element) => {
+        const states = document.createElement("section");
+        states.id = "theme-contract-states";
+        states.innerHTML = `
+          <p class="inline-status inline-status-success">成功状态：操作已完成</p>
+          <p class="inline-status inline-status-warning">警告状态：需要确认</p>
+          <p class="inline-status inline-status-error">错误状态：请重试</p>
+        `;
+        element.prepend(states);
+      });
+      expectThemeAuditPasses(await auditThemeSelectors(page, [
+        "#settings-view .chat-view-title",
+        "#settings-view .drawer-card",
+        ".inline-status-success",
+        ".inline-status-warning",
+        ".inline-status-error",
+      ]), {
+        requireBorders: [
+          "#settings-view .drawer-card",
+          ".inline-status-success",
+          ".inline-status-warning",
+          ".inline-status-error",
+        ],
+      });
+
+      await page.locator("#open-user-register").click();
+      await expect(page.locator("#account-view")).toBeVisible();
+      expectThemeAuditPasses(await auditThemeSelectors(page, [
+        "#account-view .chat-view-title",
+        "#account-view .chat-view-desc",
+        ".account-tab.active",
+        ".account-tab:not(.active)",
+        "#user-register-name",
+        "#user-register-profile-select",
+      ]), { requireBorders: ["#user-register-name", "#user-register-profile-select"] });
+
+      const pageWidth = await page.evaluate(() => ({
+        clientWidth: document.documentElement.clientWidth,
+        scrollWidth: document.documentElement.scrollWidth,
+      }));
+      expect(pageWidth.scrollWidth).toBeLessThanOrEqual(pageWidth.clientWidth);
+    }
+  }
+});
+
+test("theme release screenshots remain stable across light, dark, desktop, and narrow layouts", async ({ page }) => {
+  for (const theme of ["dark", "light"]) {
+    for (const viewport of [{ width: 1280, height: 800 }, { width: 390, height: 844 }]) {
+      await openThemeFixture(page, theme, viewport);
+      await openRailView(page, "系统状态", viewport);
+      await expect(page.locator("#status-view")).toBeVisible();
+      await expect(page).toHaveScreenshot(`theme-${theme}-${viewport.width}x${viewport.height}-status.png`, {
+        animations: "disabled",
+        caret: "hide",
+        fullPage: true,
+        maxDiffPixelRatio: 0.005,
+      });
+    }
+  }
+});
diff --git a/tests/browser/onboarding-responsive.spec.js-snapshots/theme-dark-1280x800-status-firefox-linux.png b/tests/browser/onboarding-responsive.spec.js-snapshots/theme-dark-1280x800-status-firefox-linux.png
new file mode 100644
index 0000000..aae18d2
Binary files /dev/null and b/tests/browser/onboarding-responsive.spec.js-snapshots/theme-dark-1280x800-status-firefox-linux.png differ
diff --git a/tests/browser/onboarding-responsive.spec.js-snapshots/theme-dark-390x844-status-firefox-linux.png b/tests/browser/onboarding-responsive.spec.js-snapshots/theme-dark-390x844-status-firefox-linux.png
new file mode 100644
index 0000000..3f07075
Binary files /dev/null and b/tests/browser/onboarding-responsive.spec.js-snapshots/theme-dark-390x844-status-firefox-linux.png differ
diff --git a/tests/browser/onboarding-responsive.spec.js-snapshots/theme-light-1280x800-status-firefox-linux.png b/tests/browser/onboarding-responsive.spec.js-snapshots/theme-light-1280x800-status-firefox-linux.png
new file mode 100644
index 0000000..f59b9e7
Binary files /dev/null and b/tests/browser/onboarding-responsive.spec.js-snapshots/theme-light-1280x800-status-firefox-linux.png differ
diff --git a/tests/browser/onboarding-responsive.spec.js-snapshots/theme-light-390x844-status-firefox-linux.png b/tests/browser/onboarding-responsive.spec.js-snapshots/theme-light-390x844-status-firefox-linux.png
new file mode 100644
index 0000000..ac4a103
Binary files /dev/null and b/tests/browser/onboarding-responsive.spec.js-snapshots/theme-light-390x844-status-firefox-linux.png differ
diff --git a/tests/test_frontend_contract.py b/tests/test_frontend_contract.py
index 39bcc44..7bcc059 100644
--- a/tests/test_frontend_contract.py
+++ b/tests/test_frontend_contract.py
@@ -344,3 +344,22 @@ def test_active_onboarding_collapses_to_viewport_safe_mobile_column() -> None:
     assert "right: auto;" in responsive_css
     assert "bottom: auto;" in responsive_css
     assert "minmax(280px" not in responsive_css
+
+
+def test_cross_route_theme_contract_uses_split_semantic_roles() -> None:
+    html = (WEB_DIR / "index.html").read_text(encoding="utf-8")
+    css = (WEB_DIR / "styles.css").read_text(encoding="utf-8")
+
+    for role in ("info", "success", "warning", "error"):
+        assert f"--{role}-surface:" in css
+        assert f"--{role}-text:" in css
+        assert f"--{role}-border:" in css
+    assert "--control-border:" in css
+    assert "--focus-ring:" in css
+    assert "--success:" not in css
+    assert "--warning:" not in css
+    assert "--error:" not in css
+    assert 'id="sidebar-user-icon" class="rail-user rail-btn" title="账号设置"' in html
+    assert 'aria-label="账号设置"' in html
+    assert 'href="./styles.4221.css"' in html
+    assert 'src="./app.4221.js"' in html
diff --git a/uv.lock b/uv.lock
index 5290ce3..3369dae 100644
--- a/uv.lock
+++ b/uv.lock
@@ -2613,7 +2613,7 @@ wheels = [
 
 [[package]]
 name = "sage-mate"
-version = "4.6.28"
+version = "4.6.29"
 source = { editable = "." }
 dependencies = [
     { name = "cloudpickle" },