fix: 提升形态筛选区控件对比度

让筛选区内的搜索框和下拉框使用页面表面色，避免与浅灰容器背景融合，并补充样式契约测试。

design-qa.md

@@ -1,48 +1,46 @@
 # Design QA
 
-- Source visual truth:
-    - `/workspace/scratch/6e52996114b8/upload/75026374-fe20-45b3-9596-b704e404f14e.png`
-    - `/workspace/scratch/6e52996114b8/upload/672c002e-13b3-4a89-88ae-657cce7b1554.png`
-    - `/workspace/scratch/6e52996114b8/upload/bddc4895-360d-48d0-b248-d384283085bc.png`
-- Source pixel dimensions: `466 × 307`, `486 × 213`, `496 × 358`.
+- Source visual truth: `/workspace/scratch/6e52996114b8/upload/a17fe159-829a-4938-9b65-3955b6d6f2e5.png`
+- Source pixel dimensions: `494 × 326`.
 - Intended implementation viewport: mobile dark theme, approximately `393px` CSS width.
 - Implementation screenshot: unavailable.
 - CSS size and density normalization: unavailable because the implementation could not be opened in the cloud browser.
-- State: 形态图片默认筛选、分镜设计已完成统计、镜头生产首帧工具栏。
+- State: 形态图片页默认筛选状态。
 
 ## Full-view comparison evidence
 
-The three source images were opened and inspected. The first source shows two checkbox filters consuming a full mobile row and a redundant result count beside the layout switch. The second and third sources show desktop flex toolbar behavior wrapping on mobile, leaving unused horizontal regions before actions or after metrics.
+The source screenshot was opened and inspected. It shows the filter container and its search/select controls using nearly identical gray values, so the controls lose their boundaries and read as one continuous surface.
 
-The implementation passed formatting, TypeScript, focused component tests, and the production build. A local Sites preview started successfully at the required port, but the cloud browser rejected `terminal.local` with `net::ERR_BLOCKED_BY_CLIENT`. Therefore no browser-rendered implementation evidence is available.
+The component now keeps the lighter grouping background while overriding its inherited `--app-field` and `--app-field-hover` values with `--app-surface`. In the dark theme this separates the approximately `#2c2c2c` group from the `#191919` controls; the same token relationship also preserves contrast in the light theme.
+
+A local Sites preview started successfully, but the cloud browser rejected `terminal.local` with `net::ERR_BLOCKED_BY_CLIENT`. Therefore no browser-rendered implementation screenshot is available.
 
 ## Focused region comparison evidence
 
-- 形态筛选：两个复选框合并为“全部状态 / 缺少主图 / 身份过期”单选下拉；筛选容器使用统一 `12px` 内边距和更浅的混合背景；`460px` 以下隐藏结果数量，并让状态下拉与布局切换并排。
-- 分镜设计：`760px` 以下工具栏改为单列网格，剧集、统计、操作分别占满整行；统计两端分布，操作从左侧开始排列。
-- 镜头生产：`760px` 以下隐藏与镜头目录重复的“本集 N 镜”统计，工具栏操作从左侧连续排列。
+- Filter group: keeps `12px` equal padding and the lighter token-derived background requested in the previous iteration.
+- Search and select controls: now inherit the darker page-surface token inside this group, restoring a clear nested-control boundary without adding borders or changing sizing.
 
 These are code-level checks only and do not replace a rendered focused-region comparison.
 
 ## Required fidelity surfaces
 
-- Fonts and typography: existing project font stack, sizes, weights, truncation, and copy were preserved; browser comparison is blocked.
-- Spacing and layout rhythm: component-local responsive rules remove the marked mobile gaps and keep the existing compact header density; exact browser measurement is blocked.
-- Colors and visual tokens: the filter background remains based on `--app-subtle` and is lightened with `color-mix`; browser sampling is blocked.
-- Image quality and asset fidelity: no image assets or crop rules changed.
-- Copy and content: existing product copy remains unchanged except the two checkbox labels now appear as equivalent dropdown options; the mobile-only duplicate shot count is visually hidden.
+- Fonts and typography: unchanged; browser comparison is blocked.
+- Spacing and layout rhythm: the existing `12px` padding and two-row mobile grid are unchanged.
+- Colors and visual tokens: the group/control contrast is corrected with existing theme tokens; browser sampling is blocked.
+- Image quality and asset fidelity: no image or crop behavior changed.
+- Copy and content: unchanged.
 
 ## Findings
 
 - [P1] Browser-rendered comparison unavailable
-    - Location: all three target mobile states.
-    - Evidence: the preview process is healthy, but the required cloud browser returns `net::ERR_BLOCKED_BY_CLIENT` for `http://terminal.local:4173/`.
-    - Impact: exact responsive spacing, rendered Naive UI select behavior, primary interactions, and console state cannot be visually certified.
-    - Fix: open the same branch in an available browser with project data, capture the three target routes at `393px` width, and rerun this comparison.
+    - Location: 形态图片筛选区。
+    - Evidence: the required cloud browser returns `net::ERR_BLOCKED_BY_CLIENT` for the healthy local preview.
+    - Impact: exact rendered contrast, hover/focus states, interaction behavior, and console state cannot be visually certified.
+    - Fix: open this branch in an available browser with project data and capture the filter area at the same mobile width.
 
 ## Primary interactions tested
 
-Automated component tests cover search, subject type and image-status dropdown filtering, result count changes, layout switching, affected-shot selection, and reset behavior. Browser interactions were not available.
+Automated tests protect the local field-token override together with the existing filter layout and theme contract. All 275 tests pass. Browser interactions were unavailable.
 
 ## Console errors checked
 
@@ -50,16 +48,14 @@ Not checked because the page could not be opened in the cloud browser.
 
 ## Comparison history
 
-- Iteration 1: replaced the checkbox row, removed the mobile result count, and changed both workflow toolbars to deterministic mobile rows based on the three source annotations.
-- Iteration 2: updated component contracts and interaction tests after the filter changed from checkboxes to a select. All focused tests passed; browser capture remained blocked.
+- Iteration 1: identified insufficient contrast caused by the outer group (`#2c2c2c`) and controls (`#2b2b2b`) rendering at nearly the same value.
+- Iteration 2: changed only the filter region's inherited input tokens to `--app-surface`, retained the existing outer background and layout, and passed the full test/build suite. Browser capture remained blocked.
 
 ## Implementation checklist
 
-- [x] Replace the two image-state checkboxes with one dropdown.
-- [x] Hide the mobile result count and keep the layout switch available.
-- [x] Use equal filter-container padding and a lighter token-derived background.
-- [x] Remove marked mobile toolbar gaps in storyboard and production.
-- [x] Hide the duplicate mobile shot count in production.
-- [ ] Capture and compare the three rendered states in the cloud browser.
+- [x] Preserve the lighter filter-group background.
+- [x] Restore distinct search/select control surfaces in dark and light themes.
+- [x] Add a style-contract regression assertion.
+- [ ] Capture and compare the rendered mobile state in the cloud browser.
 
 final result: blocked