feat: add RecommendationListCard and RoutePlanCard components with styles and mocks

- Implemented RecommendationListCard component for displaying a list of recommendations with titles, descriptions, and badges.
- Created RoutePlanCard component to show route details, including nodes and tips, with a detailed view toggle.
- Added ScenicImageCard component for showcasing images with optional captions.
- Developed SharedVisual components: CardShell, BadgePill, MediaFrame, ActionRow, and DetailShell for reusable UI elements.
- Introduced SCSS styles for all new components and updated existing styles for consistency.
- Created test page to preview and interact with all components using mock data.
- Added new utility classes for background colors, borders, colors, display, flex, font sizes, font weights, heights, positions, rounded corners, and widths.

.superpowers/brainstorm/3476-1778668926.99711/content/component-scope-approach.html

@@ -0,0 +1,53 @@
+<h2>ChatModule 组件还原范围确认</h2>
+<p class="subtitle">我已扫描 14 个 HTML 视觉稿。下面按实现视角分组：相同视觉结构会抽共享基础卡片/媒体/详情页容器，组件只还原 <!-- 组件部分开始 --> 到 <!-- 组件部分结束 --> 之间的内容。</p>
+
+<div class="section">
+  <div class="label">Detected component families</div>
+  <div class="cards">
+    <div class="card" data-choice="core-cards" onclick="toggleSelect(this)">
+      <div class="card-body">
+        <h3>内容/详情卡</h3>
+        <p>C0 长文本卡、C0+ 组合卡、C13 公告卡：列表态 + 详情态，复用详情页头部、返回、富文本正文、行动区。</p>
+      </div>
+    </div>
+    <div class="card" data-choice="poi-list-route" onclick="toggleSelect(this)">
+      <div class="card-body">
+        <h3>POI / 列表 / 路线</h3>
+        <p>C1 POI 详情、C2 列表、C2 多 POI、C3 对比、C4 路线、C5 设施位置：复用卡片壳、标签、图片缩略图、信息行。</p>
+      </div>
+    </div>
+    <div class="card" data-choice="media-actions" onclick="toggleSelect(this)">
+      <div class="card-body">
+        <h3>媒体 / 操作卡</h3>
+        <p>C7 大图、C8 地图导航、C10 AIGC 合照、C12 FAQ：复用媒体卡壳、底部说明、主按钮/入口行。</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <div class="label">Recommended implementation direction</div>
+  <div class="options">
+    <div class="option" data-choice="props-first" onclick="toggleSelect(this)">
+      <div class="letter">A</div>
+      <div class="content">
+        <h3>Props-first 组件库（推荐）</h3>
+        <p>每个新 ChatModule 组件只接收 props，不在组件内拉接口；示例数据放到独立 mock 文件或父级传入，避免硬编码。</p>
+      </div>
+    </div>
+    <div class="option" data-choice="api-wrapper" onclick="toggleSelect(this)">
+      <div class="letter">B</div>
+      <div class="content">
+        <h3>容器组件 + 展示组件</h3>
+        <p>每个视觉组件拆成容器和纯展示两层；适合马上接真实接口，但文件数量和接线工作更多。</p>
+      </div>
+    </div>
+    <div class="option" data-choice="static-demo" onclick="toggleSelect(this)">
+      <div class="letter">C</div>
+      <div class="content">
+        <h3>静态视觉还原优先</h3>
+        <p>先按 HTML 固定数据还原，再二次抽数据；最快看见 UI，但违反“mock 数据不要硬编码”的风险最高。</p>
+      </div>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/3476-1778668926.99711/state/server-info

@@ -0,0 +1 @@
+{"type":"server-started","port":63006,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:63006","screen_dir":"E:\\zn\\YGChatCS\\.superpowers\\brainstorm\\3476-1778668926.99711\\content","state_dir":"E:\\zn\\YGChatCS\\.superpowers\\brainstorm\\3476-1778668926.99711\\state"}