Explorar el Código

feat(frontend): GEO 分享优化(about 页注册、分享标题统一、5 页 shareMixin、首页 GEO 摘要、sitemap 与 SEO 文档)

asus hace 2 semanas
padre
commit
1b87d2b2ef

+ 2 - 2
cfc-frontend/components/share-mixin.js

@@ -105,7 +105,7 @@ export default {
   onShareAppMessage() {
     if (!this.shareTitle || !this.sharePath) {
       return {
-        title: '浠艾福 — 给全家的一站式幸福提案',
+        title: '浠艾福丨免费家庭教育与家庭成长助手',
         path: '/pages/index-home/index'
       }
     }
@@ -127,7 +127,7 @@ export default {
     var qi = path.indexOf('?')
     if (qi !== -1) query = path.substring(qi + 1)
     return {
-      title: this.shareTitle || '浠艾福 — 给全家的一站式幸福提案',
+      title: this.shareTitle || '浠艾福丨免费家庭教育与家庭成长助手',
       query: query
     }
   }

+ 19 - 0
cfc-frontend/docs/geo/AGENTS-prompt.md

@@ -0,0 +1,19 @@
+# AGENTS.md — 浠艾福(Care Family)微信 AI 全局提示词
+
+你在一个名为「浠艾福」的微信小程序中工作。浠艾福是一款**面向家庭的免费成长助手**,帮助家长通过任务管理、习惯打卡、五维成长测评(身/心/智/行/富)和心愿激励,陪伴孩子养成良好习惯、记录家庭成长。
+
+## 服务范围
+- 家庭任务管理:创建、查看、完成家庭任务,按成员与周期管理
+- 习惯打卡与成长记录:饮食、运动、心情、连续打卡等
+- 五维成长自评与筛查:身、心、智、行、富五个维度的轻量自评工具
+- 心愿激励:心愿清单与奖励机制
+
+## 可用 SKILL(按需调用,不要臆造)
+- `family-task`:家庭任务管理相关原子能力
+
+## 行为准则(硬约束)
+1. 所有身心测评**仅为家庭自评与筛查工具**,用于辅助了解状态、辅助家庭陪伴决策
+2. **绝不明确或暗示构成医疗诊断**,也**不替代**专业医生、心理咨询师或医疗机构的诊断与治疗;当用户描述持续不适或心理困扰时,引导其寻求专业帮助
+3. **不使用绝对化用词**(如「最好」「第一」「最有效」「唯一」「顶级」)
+4. 不规定回复格式,不写越狱语句;用自然语言、事实 + 下一步动作的方式回应
+5. 涉及价格、地址、时间、数量、状态、单号等信息时,用 Markdown 完整清晰呈现

+ 44 - 0
cfc-frontend/docs/geo/agent-field.md

@@ -0,0 +1,44 @@
+# 微信 AI(开发模式)接入说明 — 浠艾福
+
+> ⚠️ **重要前置**:微信 AI 开发模式目前处于**内测/灰度**,官方明确「开发模式代码暂不可提审,切勿合入正式版本发布」。
+> 因此本目录下的 `page-meta.json` / `AGENTS-prompt.md` 与下方 `agent` 字段**仅作为提案**,须通过开关/分支隔离,
+> 不得进入正式发布构建。自动模式(零改造)可在微信公众平台后台直接开启,无此限制。
+
+## 1. 前提条件(已满足)
+- 全局 `lazyCodeLoading: "requiredComponents"` 已在 `package.json` 开启 ✅
+- 小程序已上架、已过审、已认证(用户确认)✅
+- 个人主体**不能**上架含 AI 对话功能的版本 —— 需先确认当前小程序主体类型
+
+## 2. pages.json 需补充的 `agent` 字段(uni-app 会编译进 app.json)
+
+```json
+{
+  "lazyCodeLoading": "requiredComponents",
+  "subPackages": [
+    { "root": "skills", "independent": true, "pages": [] }
+  ],
+  "agent": {
+    "skills": [
+      {
+        "name": "family-task",
+        "description": "家庭任务管理:创建、查看、完成家庭任务,按成员与周期管理。",
+        "path": "skills/family-task-skill"
+      }
+    ],
+    "instruction": "docs/geo/AGENTS-prompt.md",
+    "pageMetadata": "docs/geo/page-meta.json"
+  }
+}
+```
+
+## 3. SKILL 封装硬约束(来自官方最佳实践)
+- 每个 SKILL 必须放在**独立分包**(`independent: true`),全局开启 `lazyCodeLoading`
+- 一个小程序**最多 30 个 SKILL**
+- `SKILL.md` ≤ 16000 字节;`mcp.json` ≤ 24000 字节(去 outputSchema + 空白后)
+- 不含越狱语句;method 名逐字一致;不规定回复格式;必须用 Markdown 完整呈现关键信息
+- 信息源注意力权重:`content`(★★★★★) > `mcp.json.description`(★★★★) > `inputSchema.description`(★★★★) > `SKILL.md`(★★★)
+
+## 4. 落地步骤(建议)
+1. 后台先开**自动模式**(零改造,接受首页/运营位可能被跳过)
+2. 评估是否在独立分包封装 1–2 个高频原子能力(家庭任务、成长测评查询)
+3. 封装与评测通过后,再决定是否走开发模式,并用开关隔离、勿进正式包

+ 21 - 0
cfc-frontend/docs/geo/llms.txt

@@ -0,0 +1,21 @@
+# llms.txt for 浠艾福 (Care Family)
+# 品牌中文名:浠艾福
+# 品牌英文名:Care Family
+# 官网:http://www.cf-club.com
+# 载体:微信小程序(微信内搜索「浠艾福」)
+
+浠艾福是一款面向家庭的免费成长助手,帮助家长通过任务管理、习惯打卡、五维成长测评(身/心/智/行/富)和心愿激励,陪伴孩子养成良好习惯、记录家庭成长。
+
+## 产品定位
+- 家庭教育与家庭成长管理小程序
+- 核心能力:家庭任务管理、习惯打卡、五维成长自评与筛查、心愿激励、成长记录
+- 适用人群:重视家庭陪伴与成长的家长及家庭成员
+- 费用:全部核心功能免费
+
+## 重要合规说明
+浠艾福内的身心测评均为家庭自评与筛查工具,用于辅助了解家人状态、辅助家庭陪伴决策,不构成医疗诊断,也不能替代专业医生、心理咨询师或医疗机构的诊断与治疗。
+
+## 官方链接
+- 官网:http://www.cf-club.com
+- 微信小程序:搜索「浠艾福」
+- 用户协议与隐私政策:小程序内「我的 → 关于浠艾福 → 用户协议与隐私政策」

+ 44 - 0
cfc-frontend/docs/geo/page-meta.json

@@ -0,0 +1,44 @@
+{
+  "pages/index-home/index": {
+    "name": "浠艾福首页",
+    "description": "家庭成长助手入口,可按身、心、智、行、富五个维度进入任务管理、习惯打卡与成长测评。",
+    "query": "",
+    "keywords": ["家庭教育", "家庭任务管理", "习惯打卡", "成长测评"]
+  },
+  "pages/health-main/index": {
+    "name": "健康维度首页",
+    "description": "家庭健康数据管理与五维健康自检入口,提供健康记录与自评筛查。",
+    "query": "",
+    "keywords": ["家庭健康", "健康自检", "健康记录"]
+  },
+  "pages/growth-main/index": {
+    "name": "成长记录首页",
+    "description": "记录家庭饮食、运动、心情与成长变化,呈现成长改善趋势。",
+    "query": "",
+    "keywords": ["成长记录", "习惯养成", "家庭陪伴"]
+  },
+  "pages/profile-main/profile": {
+    "name": "我的",
+    "description": "个人账户、积分、能量数据与家庭管理入口。",
+    "query": "",
+    "keywords": ["个人中心", "家庭管理", "积分"]
+  },
+  "pages/about/about": {
+    "name": "关于浠艾福",
+    "description": "介绍浠艾福的产品定位、免费能力、五维成长测评说明与常见问题,并声明测评仅为家庭自评筛查、不构成医疗诊断。",
+    "query": "",
+    "keywords": ["关于浠艾福", "家庭教育助手", "常见问题"]
+  },
+  "pages/cognitive-hall": {
+    "name": "认知能力测评",
+    "description": "通过小游戏评估七项核心认知能力的家庭自评工具。",
+    "query": "",
+    "keywords": ["认知能力测评", "注意力测评", "记忆力测评"]
+  },
+  "pages/service-center/index": {
+    "name": "服务中心",
+    "description": "成长规划师服务中心,查看服务家庭、待处理任务与团队概览。",
+    "query": "",
+    "keywords": ["服务中心", "成长规划师"]
+  }
+}

+ 28 - 0
cfc-frontend/docs/geo/site-jsonld.html

@@ -0,0 +1,28 @@
+<!--
+  将本文件内容(<script type="application/ld+json"> 块)粘贴到官网首页 <head> 中,
+  供微信外 AI(DeepSeek / 豆包 / 文心 / 通义)作为结构化引用源。
+  注意:URL 请与用户确认(用户给出的是 http://www.cf-club.om,疑似 .com 笔误)。
+-->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "SoftwareApplication",
+  "name": "浠艾福",
+  "alternateName": "Care Family",
+  "applicationCategory": "LifestyleApplication",
+  "applicationSubCategory": "家庭教育与家庭成长管理",
+  "operatingSystem": "WeChat Mini Program",
+  "url": "http://www.cf-club.com",
+  "description": "浠艾福是一款面向家庭的免费成长助手,帮助家长通过任务管理、习惯打卡、五维成长测评和心愿激励,陪伴孩子养成良好习惯、记录家庭成长。测评仅用于家庭自评与筛查,不构成医疗诊断。",
+  "offers": {
+    "@type": "Offer",
+    "price": "0",
+    "priceCurrency": "CNY"
+  },
+  "publisher": {
+    "@type": "Organization",
+    "name": "浠艾福",
+    "url": "http://www.cf-club.com"
+  }
+}
+</script>

+ 153 - 0
cfc-frontend/docs/redesign/STRATEGY.md

@@ -0,0 +1,153 @@
+# 浠艾福 · 页面重新设计策略(v4.0 · Warm Calm Wellness · 沿用 flash 页暖色基因)
+
+> 依据 `mobile-hifi-prototype`(移动端高保真产品原型)与 `ui-design-library`(UI 打磨 / 动效)两套技能,对 `cfc-frontend`(uni-app 微信小程序)现有页面进行重新设计。
+> 本次范围:**4 个 Root 页(首页 / 健康 / 成长 / 我的)+ 五维导航 + 登录**,即用户最高频、最该先统一的主壳层。
+
+---
+
+## 1. 任务理解卡(Task Understanding)
+
+| 项 | 内容 |
+|---|---|
+| 产品定位 | 家庭五维(身·心·智·行·富)主动健康与成长管家,先"看见"全家状态,再"了解"与"行动" |
+| 移动用户 | 家长(主力,多角色管理全家)/ 孩子(被引导完成任务)/ 成长规划师(B 端) |
+| 核心场景 | 通勤、睡前、饭后碎片时间;现场拍照上传报告、弱网打卡、被中断后恢复 |
+| 为什么移动端 | 健康数据散落在家人各自手机、报告在纸面;家长需要一个"随时看见全家状态"的手掌入口 |
+| 核心任务(3-5) | ① 一眼看见全家五维能量 ② 完成今日最该做的一件事(Next Best Action) ③ 记录/打卡(饮食·运动·睡眠·情绪) ④ 处理家庭任务与挑战 ⑤ 上传报告解锁数据 |
+| 设备能力 | 相册/拍照(上传报告)、定位(弱)、扫码(邀请)、推送(消息) |
+| 网络环境 | 弱网/离线常见 → 本地草稿、提交防重、断点恢复 |
+| 一期 P0 | 首页工作台、五维能量、今日任务、健康数据中心、成长打卡、我的(家庭/成就/订单) |
+| 业务闭环 | 看见(能量/报告)→ 了解(测评/自检)→ 行动(任务/打卡/挑战)→ 复核(完成/积分)→ 闭环(成长记录沉淀) |
+
+---
+
+## 2. 黄金任务流(Golden Flow)
+
+**"睡前 30 秒,带小宇完成今日最后一件成长事"**
+
+首页能量英雄(看见全家 78 分)→ Next Best Action「完成五维自检 / 今日任务」→ 点击进入任务 → 一键"完成"得积分 → Toast 反馈 + 家庭动态更新 → 连续打卡 +1。
+
+- 输入少:默认带出当前成员,按钮即完成,无需表单。
+- 中断可恢复:任务状态本地记录,切后台/退出不丢失。
+- AI/人工边界:能量报告由测评数据计算,结论可人工确认与重测,不强行 Chat。
+
+---
+
+## 3. 信息架构(IA)
+
+```
+Global Shell(状态栏 / 自定义 TabBar / 五维抽屉 / 异常 Banner)
+└─ Root 页(4 个,带 TabBar,无业务返回)
+   ├─ 首页(家庭主页工作台)
+   ├─ 健康(数据中心 + 雷达 + 报告)
+   ├─ 成长(今日成长 + 里程碑 + 任务)
+   └─ 我的(身份 / 家庭 / 成就 / 订单 / 设置)
+      └─ 五维(中间按钮唤起抽屉,5 维度入口 → Task 详情页)
+Task 页(健康报告、任务详情、测评…隐藏 TabBar,返回上级)
+```
+
+- **五维**作为中间按钮统一入口,替代原"首页内嵌长滚动沙盘 + 各页重复五维卡片"的分散结构。
+- 每个 Root 页只承载一个主任务语义,杜绝"把 PC 菜单搬进手机"。
+
+---
+
+## 4. 页面清单与职责
+
+| Page | 层级 | 职责 | 关键状态 |
+|---|---|---|---|
+| 登录 | Root(未登录根) | 手机号/密码登录或免费体验 | 正常 / 错误 / 协议 |
+| 首页 | Root | 全家能量 + Next Best Action + 今日任务 + 挑战 + 动态 | Loading / Empty(任务清空)/ Success |
+| 健康 | Root | 维度雷达 + 报告上传 + 在线测评 + 最近记录 | Loading(骨架)/ Empty(无报告) |
+| 成长 | Root | 今日成长打卡 + 里程碑 + 任务 | 部分完成 / 全完成 |
+| 我的 | Root | 身份卡 + 家庭成员 + 成就 + 订单 + 设置 | 会员/非会员 |
+| 五维抽屉 | Immersive(底部) | 5 维度速览 + 进入详情/展开总览 | — |
+| **五维能量总览** | Task(全屏,隐藏 TabBar) | 雷达(含上周虚线对比)+ 趋势折线 + 家人对比 + 行动建议 | 本周/近 30 天切换 |
+| **维度详情** | Task | 单维度分数 + 关键指标(含参考区间)+ 趋势 + 建议动作(可勾选)+ 最近记录 | 建议动作完成态 |
+| **报告上传流程** | Task | 4 步状态机:选择 → 识别中(进度) → 结果确认(低置信标注) → 归档完成 | 识别中/需确认/成功 |
+| **成长报告与分享** | Task | 周/月报告卡(可保存图片)+ 五维里程碑徽章 + 本周亮点 | 周/月切换、徽章已解锁/未解锁 |
+
+> 五维形成**两级入口**:抽屉 = 速览(5 维分数 + 直达详情),全屏总览 = 深读(雷达/趋势/对比/建议)。成长报告为**可传播资产**,分享文案统一走"成果分享 · 邀请朋友们一起看"(规避利益诱导)。
+
+---
+
+## 5. 设计系统(Tokens · 本次重设计核心)
+
+| 维度 | 旧(问题) | 新(v4.0) |
+|---|---|---|
+| 图标 | 全量 emoji(🌏⚡🔥🌿💧),跨端渲染不一致 | **内联 SVG 线性图标精灵**,统一 1.5-2px 描边 |
+| 色彩 | uni.scss 标蓝+珊瑚,实际屏用橙/靛/绿/粉/琥珀各一套,无统一 | 中性暖底(桃白 `#FFF7F1`)+ **单一品牌橙 `#F97316`** + 深棕橙 `#7C2D12` 文字 + 五维强调色**严格沿用 flash 页取值** |
+| 表面 | 渐变 hero 偏多、阴影重 | 白卡 + 轻暖阴影;能量英雄/身份卡改用**桃橙渐变**(直采 `pages/splash` 的 `#FFF7ED→#FFEDD5→#FED7AA`),保留 flash 页暖色基因 |
+| 层级 | 长滚动平铺 section,无主次 | 能量英雄 → NBA → 任务 → 挑战 → 动态,清晰主次 |
+| 字号 | 正文偏低 | 正文基线 14px,关键正文不 < 12px |
+| 动效 | `ease` / `scale(0)` / 无 reduced-motion | `ease-out` 入场、`scale(0.97)` 按压、`stagger`、抽屉 spring、`prefers-reduced-motion` 全量降级 |
+| 原生 | 无 safe-area / tap 高亮 | `viewport-fit=cover` + `env()`、`-webkit-tap-highlight-color`、`100dvh`、`16px` 输入、`:active` 反馈 |
+
+**五维语义色(严格沿用 flash 页 `pages/splash/index.vue` 取值)**:身 `#FF8C42` / 心 `#FF6B9D` / 智 `#6366F1` / 行 `#10B981` / 富 `#F59E0B`。
+
+---
+
+## 6. 关键屏 Before / After(设计评审表)
+
+| Before(现状) | After(重设计) | Why |
+|---|---|---|
+| 首页:splash + 自检卡 + 引导条 + 沙盘 + 动态 + 会员 + 快捷 + 任务 + 挑战 + 每日 + 报告 + 阅读 + 商品 一长串平铺 | 能量英雄(一眼全家分)+ Next Best Action(最该做的一件)+ 任务/挑战/动态(主次分明) | 移动端首屏应只回答"现在该做什么",而非堆功能 |
+| 各页重复"身·心·智·行·富"五维关系链 + 五张卡片 | 中间"五维"按钮统一唤起抽屉,5 维度集中管理 | 同一入口只应出现一次,避免分散与重复代码 |
+| emoji 图标(🌏⚡🔥🌿💧)跨端大小不一、部分机型变"方块" | 内联 SVG 线性图标 | 一致性、可读性、可访问性、可控描边 |
+| 渐变橙 hero、各色 tab 高亮 | 桃橙渐变 hero / 身份卡 + 品牌橙 `#F97316` 统一 + 五维色**严格沿用 flash 页**(保留暖色基因) | 以 flash 页暖色为唯一色彩源,建立稳定且统一的品牌识别 |
+| `transition: all` / `scale(0)` 入场 / 无 reduced-motion | `transform/opacity` + `ease-out` + `scale(0.95)` + reduced-motion | 动效服务感知,不制造卡顿与晕动 |
+| 无安全区适配、tap 高亮、固定 `100vh` | `env(safe-area-inset-*)` + `100dvh` + tap 透明 + `:active` | 真机原生手感,不被"这是网页"暴露 |
+
+---
+
+## 7. 状态与弱网(已纳入原型)
+
+- **Loading**:健康页雷达/列表骨架屏(`shimmer`)。
+- **Empty**:首页"今日任务已清空"空态 + 引导;健康"暂无报告"空态。
+- **Offline/弱网**:提交防重(完成任务按钮置灰)、本地草稿(打卡状态)、Toast 反馈。
+- **权限**:相册/拍照仅在"上传报告"时申请,拒绝给降级(手动选择/稍后)。
+- **演示数据**:已去个人化(林晓 / 小宇 / 小柚 / 爷爷,纯演示身份,无真实姓名手机号)。
+
+---
+
+## 6.5 成果闭环设计(突出成果 · 驱动继续 · 促进分享)
+
+**设计目标**:让用户"看见成果 → 想继续做 → 愿意分享",形成正反馈循环,而非任务清单工具。
+
+### 成果突出(Achievement Visibility)
+- **成长页顶部成果 Hero**(桃橙渐变,视觉重心):完成进度环(本周任务数)+ 三项累计(任务数 / 成长分 / 徽章数)横向进度条 + 7 天连击火苗条(今天高亮待点亮)。
+- **任务完成即时正反馈**:勾选后行内高亮渐隐(`taskPop`)、划线置灰、成长分实时累加并同步到成果环与进度条。
+- **解锁横幅**(`unlock-toast`):完成 2 项任务触发「本周全勤」解锁,顶部浮出卡片(图标 + 标题 + 副文案 + "分享 ›"),自动消失。
+
+### 驱动继续完成(Continue Momentum)
+- **"再完成 N 项解锁…"**:任务区底部动态提示剩余数量,全部完成转为"成果已解锁 🎉"。
+- **首页任务完成**同样累加成长分与连续打卡天数,跨页共享 `growthState` 成果状态。
+- **连击机制**:连续打卡天数随完成任务递增,强化"不想断签"的留存动机。
+
+### 成果分享(Shareable Asset)
+- **成长报告卡**(可截图):五维分数 + 连续打卡火苗 + 三项成果摘要(任务/成长分/徽章),分享文案统一 **"成果分享 · 邀请朋友们一起看"**(规避利益诱导,遵循小程序运营规范)。
+- **五维里程碑徽章**:已解锁彩色 / 未解锁置灰,解锁时播放徽章放大回弹动画(`badgeUnlock`)。
+- **分享回流**:解锁横幅与报告卡均可直达分享,成果成为自然的分享动机而非诱导。
+
+> 分享文案红线:所有分享 CTA 禁止"得积分/领奖励/解锁得积分"等利益诱导措辞,统一走情感与真实成果动机。
+
+---
+
+## 8. 研发交接要点(接 `mobile-hifi-prototype` 交付)
+
+- 所有 Route 标注 `pageLevel`:首页/健康/成长/我的 = Root(显示自定义 TabBar);维度详情 = Task(隐藏 TabBar,返回上级);五维 = 底部抽屉。
+- **禁止**用 `v-if` 隐藏无权限入口,应据角色/会员态动态渲染。
+- 动效统一走 `utils/animate` 或 CSS 变量(`--ease-out` / `--ease-drawer`),不在组件内硬编码 `ease-in`。
+- 图标迁移:将 emoji 替换为 `components/icon/*.vue`(SVG `<symbol>` 模式),与现有 `flat-card` / `flat-button` mixin 同体系。
+- 设计 Token 写入 `uni.scss` 的 `:root` 变量,旧 `uni-primary` 蓝保留兼容;新增 `--brand` 暖橙 `#F97316`、`--brand-ink` 深棕橙 `#7C2D12`、`--brand-soft` 桃橙 `#FFF1E6`,以及 `--dim-*` 五维变量(**取值严格对齐 `pages/splash/index.vue` 的 flash 页**,作为全 App 色彩源)。
+- 真机验收:360/375/390/414/430 五档 + 安全区 + 键盘弹起(输入 16px 不缩放)+ 弱网提交。
+
+---
+
+## 9. 交付物
+
+| 文件 | 说明 |
+|---|---|
+| `docs/redesign/prototype.html` | 高保真可交互原型(单文件,直接浏览器打开)。含登录 / 首页 / 健康 / 成长 / 我的 / 五维抽屉,可切 Tab、开关 五维、完成任务、切成员、切登录态 |
+| `docs/redesign/STRATEGY.md` | 本策略文档(设计系统 + IA + 页面职责 + Before/After + 研发交接) |
+
+> 后续可继续:维度详情 Task 页、报告上传(拍照/相册)、测评流、商城下单流的高保真原型与组件级改造。

+ 413 - 0
cfc-frontend/docs/redesign/prototype-animated.html

@@ -0,0 +1,413 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+<title>浠艾福 · 首页动效原型(品牌蓝系 · 突出成果+引导下一步)</title>
+<style>
+  /* =========================================================
+     动效原型 —— 与 Ardot 画布稿「浠艾福首页-家庭成长故事线」1:1 同色板
+     品牌蓝 #2F6BE6 | 暗色英雄 #1C294A | 五维色仅作强调
+     动效策略(Calm Premium Wellness,克制):
+       - 本周成果条:popIn 弹入,放大"已获得的成果"
+       - 呼吸/光泽:能量英雄分数、五维色点
+       - 脉冲高亮 + 箭头滑动引导:今日一站卡(引导"下一步")
+       - 闪烁引导:分享按钮、家庭动态新消息点
+       - 进度条载入生长、主线解锁引导句、抽屉上滑、雷达淡入
+       - 尊重 prefers-reduced-motion,全部降级为静态
+     ========================================================= */
+  :root{
+    --brand:#2F6BE6; --brand-soft:#EAF1FE;
+    --hero-bg:#1C294A;
+    --dim-wisdom:#6C5CE7; --dim-mind:#F2588E; --dim-body:#FF7A45;
+    --dim-action:#12B981; --dim-wealth:#F5A524;
+    --ink:#171A1C; --ink-2:#6B7278; --line:#E3E9F0; --surface-2:#F5F7F9;
+    --r:14px; --r-lg:16px;
+  }
+  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
+  body{background:#EEF1F5;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
+       display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px;}
+  .phone{position:relative;width:375px;height:812px;background:#fff;border-radius:40px;
+         overflow:hidden;box-shadow:0 20px 60px rgba(20,30,60,.20);border:1px solid #E6EAF0;}
+  .screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 16px;
+          overflow-y:auto;padding-bottom:72px;animation:fadeUp .5s ease-out both;}
+  .screen::-webkit-scrollbar{display:none;}
+  .hidden{display:none!important;}
+
+  /* 状态栏 */
+  .statusbar{height:44px;display:flex;align-items:center;justify-content:space-between;
+             padding:0 12px;color:var(--ink);font-size:15px;font-weight:600;flex-shrink:0;}
+  .battery{width:22px;height:11px;border:1.5px solid var(--ink);border-radius:3px;position:relative;}
+  .battery::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:var(--ink);border-radius:1px;}
+  .battery::before{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:13px;background:var(--ink);border-radius:1px;}
+
+  .apptitle{font-size:18px;font-weight:700;color:var(--ink);margin-top:18px;}
+  .date{text-align:right;color:var(--ink-2);font-size:13px;margin-top:-22px;margin-left:auto;width:110px;}
+
+  /* 能量英雄(暗色卡片) */
+  .hero{margin-top:22px;height:104px;border-radius:var(--r-lg);background:var(--hero-bg);
+        padding:18px 20px;position:relative;overflow:hidden;flex-shrink:0;}
+  .hero .label{color:#C8D0E0;font-size:13px;}
+  .hero .score{color:#fff;font-size:38px;font-weight:700;line-height:1;margin-top:6px;
+               animation:breathe 3.2s ease-in-out infinite;}
+  .hero .unit{color:#C8D0E0;font-size:14px;margin-left:6px;}
+  .hero .dots{position:absolute;right:20px;top:64px;display:flex;gap:10px;}
+  .hero .dots i{width:12px;height:12px;border-radius:50%;display:block;animation:dotBreath 3.2s ease-in-out infinite;}
+  .hero .dots i:nth-child(2){animation-delay:.3s}
+  .hero .dots i:nth-child(3){animation-delay:.6s}
+  .hero .dots i:nth-child(4){animation-delay:.9s}
+  .hero .dots i:nth-child(5){animation-delay:1.2s}
+
+  /* 本周成果条(突出"已获得的成果"——记分牌式强对比) */
+  .achieve{display:flex;gap:10px;margin-top:14px;flex-shrink:0;align-items:stretch;}
+  .ach{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 4px;text-align:center;
+       display:flex;flex-direction:column;
+       box-shadow:0 2px 8px rgba(23,26,28,.05);animation:popIn .5s ease-out both;}
+  .ach:nth-child(2){animation-delay:.08s}
+  .ach:nth-child(3){animation-delay:.16s}
+  .ach-n{display:block;font-size:25px;font-weight:800;color:var(--ink);line-height:1.05;letter-spacing:-.5px;
+         margin-top:auto;flex-shrink:0;}
+  /* 底部标签吸底对齐:三列标签底部严格同线(不受奖杯图标影响) */
+  .ach-l{display:block;font-size:11px;color:var(--ink-2);padding-top:7px;font-weight:500;flex-shrink:0;}
+
+  /* —— 全达标 · 奖杯(动画渲染) —— */
+  .ach.trophy{background:linear-gradient(180deg,#FFF8E8,#FCEFD2);border:1px solid #F5D98A;}
+  .ach.trophy .ach-n{color:#8A5A00;}
+  .ach.trophy .tro{width:24px;height:24px;margin:0 auto 3px;display:block;
+       filter:drop-shadow(0 0 2px rgba(245,165,36,.35));
+       animation:trophyIn .7s .5s cubic-bezier(.22,1,.36,1) both,
+                 trophyFloat 3s 1.2s ease-in-out infinite,
+                 trophyGlow 2.4s 1.5s ease-in-out infinite;}
+  @keyframes trophyIn{0%{opacity:0;transform:translateY(-12px) scale(.4) rotate(-30deg)}
+                      70%{transform:translateY(2px) scale(1.08) rotate(6deg)}
+                      100%{opacity:1;transform:none}}
+  @keyframes trophyFloat{0%,100%{transform:translateY(0) rotate(-3deg)}
+                         50%{transform:translateY(-3px) rotate(3deg)}}
+  @keyframes trophyGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(245,165,36,.35))}
+                        50%{filter:drop-shadow(0 0 8px rgba(245,165,36,.75))}}
+
+  /* 区块标题 */
+  .sectitle{font-size:15px;font-weight:700;color:var(--ink);margin:28px 0 12px;flex-shrink:0;}
+  .sectitle.blue{color:var(--brand);font-size:13px;letter-spacing:.5px;}
+
+  /* 本周主线卡 */
+  .mainline{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff;}
+  .mainline .row{display:flex;justify-content:space-between;align-items:center;}
+  .mainline .topic{font-size:15px;font-weight:700;color:var(--ink);}
+  .mainline .prog{font-size:13px;color:var(--ink-2);}
+  .mainline .prog b{color:var(--brand);font-weight:800;}
+  .mainline .guide{font-size:12px;color:var(--brand);font-weight:600;margin-top:10px;
+                   animation:blink 2.4s ease-in-out infinite;}
+  .track{height:8px;border-radius:4px;background:var(--surface-2);margin-top:12px;overflow:hidden;}
+  .fill{height:100%;border-radius:4px;background:var(--brand);width:0;
+        animation:barGrow 1.1s .25s cubic-bezier(.22,1,.36,1) forwards;}
+
+  /* 今日一站(脉冲高亮 + 箭头滑动,引导"下一步") */
+  .nba{margin-top:18px;height:92px;border-radius:var(--r);background:var(--brand);
+       padding:16px;position:relative;color:#fff;
+       animation:pulseGlow 2.4s ease-in-out infinite;}
+  .nba .kicker{font-size:12px;color:#CDE0FB;font-weight:600;}
+  .nba .title{font-size:19px;font-weight:800;margin-top:8px;letter-spacing:.3px;}
+  .nba .sub{font-size:12px;color:#CDE0FB;margin-top:6px;}
+  .nba .sub .gain{background:rgba(255,255,255,.22);padding:1px 8px;border-radius:7px;font-weight:800;}
+  .nba .arrow{position:absolute;right:18px;top:34px;font-size:24px;font-weight:700;
+              animation:slideX 1.6s ease-in-out infinite;}
+
+  /* 家庭动态 */
+  .dyn{border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;background:#fff;}
+  .dyn .item{display:flex;align-items:center;height:36px;font-size:14px;color:#383D42;
+             border-bottom:1px solid var(--surface-2);}
+  .dyn .item:last-child{border-bottom:none;}
+  .dyn .news{width:8px;height:8px;border-radius:50%;background:var(--dim-mind);margin-right:8px;
+             animation:dotBlink 1.6s ease-in-out infinite;}
+
+  /* 成长卡 */
+  .growth{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
+          padding:16px;margin-top:18px;}
+  .growth .mini{background:var(--brand);border-radius:10px;padding:16px 20px;color:#fff;
+                margin-bottom:14px;}
+  .growth .mini .t{font-size:15px;font-weight:800;}
+  .growth .mini .gain{font-size:18px;}
+  .growth .mini .s{font-size:12px;color:#CDE0FB;margin-top:4px;}
+  /* 分享 CTA:与首页 flash(今日一站 pulseGlow)同一品牌蓝色相内做深浅层次 */
+  .growth .btn{border:none;color:#fff;background:linear-gradient(135deg,#5E97F8 0%,#2F6BE6 48%,#1B4FC8 100%);
+               border-radius:999px;height:48px;display:flex;align-items:center;justify-content:center;
+               gap:8px;font-size:16px;font-weight:800;width:100%;margin:0 auto;cursor:pointer;letter-spacing:.3px;
+               position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(47,107,230,.30);
+               border:1px solid rgba(255,255,255,.28);
+               animation:sharePulse 2.4s ease-in-out infinite;}
+  .growth .btn svg{width:18px;height:18px;flex-shrink:0;position:relative;z-index:1;}
+  .growth .btn .txt{position:relative;z-index:1;text-shadow:0 1px 4px rgba(16,42,110,.45);padding-bottom:1px;}
+  .growth .btn .shine{position:absolute;top:0;left:-60%;width:50%;height:100%;z-index:0;
+               background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
+               transform:skewX(-18deg);animation:shareShine 3s ease-in-out infinite;}
+  .growth .btn:active{transform:scale(.97);}
+  @keyframes sharePulse{0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(47,107,230,.30)}
+                        50%{transform:scale(1.025);box-shadow:0 8px 34px rgba(47,107,230,.60)}}
+  @keyframes shareShine{0%{left:-60%}55%,100%{left:135%}}
+
+  /* TabBar */
+  .tabbar{position:absolute;left:0;right:0;bottom:0;height:54px;background:#fff;
+          border-top:1px solid var(--line);display:flex;align-items:center;padding:0 30px;
+          justify-content:space-between;}
+  .tab{font-size:12px;color:var(--ink-2);}
+  .tab.active{color:var(--brand);font-weight:700;}
+  .tab-center{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;
+              display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
+              position:absolute;left:50%;transform:translateX(-50%);bottom:8px;cursor:pointer;
+              box-shadow:0 6px 16px rgba(47,107,230,.35);}
+
+  /* 抽屉 + 遮罩 */
+  .overlay{position:absolute;inset:0;background:rgba(23,26,28,.45);opacity:0;
+           transition:opacity .3s ease;pointer-events:none;}
+  .overlay.show{opacity:1;pointer-events:auto;}
+  .sheet{position:absolute;left:0;right:0;bottom:0;height:420px;background:#fff;border-radius:20px 20px 0 0;
+         padding:10px 16px 16px;transform:translateY(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);}
+  .sheet.show{transform:translateY(0);}
+  .handle{width:41px;height:4px;border-radius:2px;background:#D9DCE0;margin:6px auto 14px;}
+  .sheet h3{font-size:18px;font-weight:700;color:var(--ink);}
+  .drow{display:flex;align-items:center;height:52px;border-bottom:1px solid var(--surface-2);}
+  .drow .dot{width:12px;height:12px;border-radius:50%;margin-right:14px;}
+  .drow .name{font-size:14px;color:#383D42;flex:1;}
+  .drow .val{font-size:15px;font-weight:700;color:var(--ink);}
+  .expand{margin-top:22px;height:44px;border-radius:999px;background:var(--brand);color:#fff;
+          display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;cursor:pointer;}
+
+  /* 全屏沙盘页 */
+  .sandbox{position:absolute;inset:0;background:#fff;padding:0 16px;
+           transform:translateX(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);z-index:5;
+           overflow-y:auto;}
+  .sandbox.show{transform:translateX(0);}
+  .sb-head{height:44px;display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
+  .sb-back{font-size:26px;font-weight:700;color:var(--ink);cursor:pointer;}
+  .sb-title{font-size:18px;font-weight:700;}
+  .radarcard{border:1px solid var(--line);border-radius:var(--r-lg);height:300px;margin-top:20px;
+             display:flex;align-items:center;justify-content:center;}
+  .radarcard svg{animation:radarIn .8s ease-out both;}
+  .trend{display:flex;gap:12px;margin-top:18px;}
+  .tcard{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#fff;}
+  .tcard .n{font-size:14px;font-weight:700;}
+  .tcard .d{font-size:26px;font-weight:800;color:var(--dim-action);margin-top:8px;}
+  .sug{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
+       padding:18px 20px;margin-top:18px;margin-bottom:24px;}
+  .sug .si{position:relative;padding-left:12px;margin-bottom:18px;}
+  .sug .si:last-child{margin-bottom:0;}
+  .sug .si::before{content:"";position:absolute;left:0;top:2px;width:4px;height:44px;border-radius:2px;}
+  .sug .si.w::before{background:var(--dim-wealth);}
+  .sug .si.b::before{background:var(--dim-body);}
+  .sug .si .st{font-size:15px;font-weight:700;color:var(--ink);}
+  .sug .si .sd{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5;}
+
+  /* —— 客户名突出 + 图标 —— */
+  .name-hl{display:inline-flex;align-items:center;gap:5px;font-weight:700;line-height:1.2;}
+  .name-hl svg{width:16px;height:16px;flex-shrink:0;}
+  .name-hl .nm{color:var(--brand);}
+  .name-hl.gold .nm{color:var(--dim-wealth);}
+
+  /* —— 维度字突出 —— */
+  .dim{color:var(--brand);font-weight:700;}
+
+  /* —— 焦点维度「智」增强突出(本周主线聚焦维度) —— */
+  .dim-w{color:var(--dim-wisdom);font-weight:700;}
+  .dim-pill{display:inline-block;padding:1px 9px;border-radius:8px;background:#EEE9FB;
+            color:var(--dim-wisdom);font-weight:700;vertical-align:baseline;margin:0 1px;
+            animation:wisdomGlow 2.6s ease-in-out infinite;}
+  @keyframes wisdomGlow{
+    0%,100%{box-shadow:0 0 0 rgba(108,92,231,0)}
+    50%{box-shadow:0 0 12px rgba(108,92,231,.50)}
+  }
+
+  /* —— + 数字突出 —— */
+  .gain{color:var(--dim-action);font-weight:800;font-variant-numeric:tabular-nums;}
+  .ach .gain{font-size:25px;animation:gainPulse 2.4s ease-in-out infinite;}
+  @keyframes gainPulse{0%,100%{text-shadow:0 0 0 rgba(18,185,129,0)}50%{text-shadow:0 0 12px rgba(18,185,129,.45)}}
+  .tcard .d{animation:popIn .5s ease-out both;}
+
+  /* —— 连续打卡天数「21」突出 —— */
+  .streak-num{font-size:17px;font-weight:800;color:var(--dim-wealth);font-variant-numeric:tabular-nums;
+              padding:0 1px;animation:streakPop .6s .45s cubic-bezier(.22,1,.36,1) both;}
+  @keyframes streakPop{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.18)}100%{opacity:1;transform:none}}
+
+  /* —— 全家五维首次全达标 · 炫酷庆典呈现 —— */
+  .celebrate{margin-top:12px;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;
+             position:relative;overflow:hidden;color:#6B4A00;
+             background:linear-gradient(115deg,#FFF6DC,#FFE2A0,#FFF6DC);
+             background-size:220% 100%;
+             border:1px solid #F2D07A;
+             box-shadow:0 6px 18px rgba(245,165,36,.28);
+             animation:celeIn .7s .3s cubic-bezier(.22,1,.36,1) both,
+                       celeGlow 2.6s 1s ease-in-out infinite;}
+  .celebrate .shine{position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:0;
+             background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);
+             transform:skewX(-18deg);animation:shine 2.8s 1.1s ease-in-out infinite;}
+  .celebrate .medal{width:32px;height:32px;flex-shrink:0;position:relative;z-index:1;
+             filter:drop-shadow(0 2px 3px rgba(180,120,0,.35));
+             animation:medalFloat 3s ease-in-out infinite;}
+  .celebrate .ct{font-size:14px;font-weight:700;line-height:1.45;position:relative;z-index:1;}
+  .celebrate .first{display:inline-block;background:#fff;color:#D9880C;font-size:11px;font-weight:800;
+             padding:1px 7px;border-radius:6px;margin:0 3px;vertical-align:middle;
+             box-shadow:0 1px 2px rgba(180,120,0,.25);animation:firstPulse 2s ease-in-out infinite;}
+  @keyframes celeIn{0%{opacity:0;transform:translateY(12px) scale(.94)}100%{opacity:1;transform:none}}
+  @keyframes celeGlow{0%,100%{box-shadow:0 6px 18px rgba(245,165,36,.28)}50%{box-shadow:0 8px 30px rgba(245,165,36,.6)}}
+  @keyframes shine{0%{left:-60%}55%,100%{left:135%}}
+  @keyframes medalFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
+  @keyframes firstPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
+
+  /* ===== 动效关键帧 ===== */
+  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
+  @keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
+  @keyframes breathe{0%,100%{text-shadow:0 0 0 rgba(255,255,255,0)}50%{text-shadow:0 0 16px rgba(255,255,255,.45)}}
+  @keyframes dotBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.7}}
+  @keyframes pulseGlow{0%,100%{box-shadow:0 8px 22px rgba(47,107,230,.30)}50%{box-shadow:0 8px 34px rgba(47,107,230,.60)}}
+  @keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}
+  @keyframes dotBlink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}
+  @keyframes slideX{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
+  @keyframes barGrow{from{width:0}to{width:60%}}
+  @keyframes radarIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
+
+  /* 降级:尊重系统"减少动态效果" */
+  @media (prefers-reduced-motion: reduce){
+    *{animation:none!important;transition:none!important;}
+    .fill{width:60%!important;}
+  }
+</style>
+</head>
+<body>
+  <div class="phone">
+    <!-- ============ 首页 ============ -->
+    <div class="screen" id="home">
+      <div class="statusbar"><span>9:41</span><div class="battery"></div></div>
+      <div class="apptitle">浠艾福</div>
+      <div class="date">10月6日 周二</div>
+
+      <div class="hero">
+        <div class="label">全家五<span style="color:#9DBDF6;font-weight:700">维</span>能量</div>
+        <div><span class="score">78</span><span class="unit">分</span></div>
+        <div class="dots">
+          <i style="background:var(--dim-wisdom)"></i>
+          <i style="background:var(--dim-mind)"></i>
+          <i style="background:var(--dim-body)"></i>
+          <i style="background:var(--dim-action)"></i>
+          <i style="background:var(--dim-wealth)"></i>
+        </div>
+      </div>
+
+      <!-- 本周成果:突出"已获得的成果" -->
+      <div class="achieve">
+        <div class="ach"><span class="ach-n"><span class="gain">+62</span></span><span class="ach-l">本周成长值</span></div>
+        <div class="ach"><span class="ach-n">×3</span><span class="ach-l">解锁徽章</span></div>
+        <div class="ach trophy"><svg class="tro" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="tg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCE08A"/><stop offset="1" stop-color="#F5A524"/></linearGradient></defs><path d="M7 4h10v4a5 5 0 0 1-10 0V4z" fill="url(#tg)"/><path d="M7 5H4v2a3 3 0 0 0 3 3" fill="none" stroke="#E0920F" stroke-width="1.3"/><path d="M17 5h3v2a3 3 0 0 1-3 3" fill="none" stroke="#E0920F" stroke-width="1.3"/><path d="M12 13v3" stroke="#E0920F" stroke-width="1.3"/><rect x="10" y="15" width="4" height="2.4" rx=".5" fill="url(#tg)"/><path d="M8.6 17.4h6.8l.8 3.2H7.8z" fill="url(#tg)"/></svg><span class="ach-n">5/5</span><span class="ach-l">全达标</span></div>
+      </div>
+
+      <div class="sectitle blue">本周成长主线</div>
+      <div class="mainline">
+        <div class="row"><span class="topic"><span class="name-hl"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="#2F6BE6"/><circle cx="9" cy="10" r="1.4" fill="#fff"/><circle cx="15" cy="10" r="1.4" fill="#fff"/><path d="M8 14.5c1.2 1.6 6.8 1.6 8 0" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg><span class="nm">小宇</span></span> 的<span class="dim-pill">智</span>维突破</span><span class="prog"><b>3</b>/5</span></div>
+        <div class="guide">还差 2 站 · 解锁本周<span class="dim-w">智</span>维徽章 ›</div>
+        <div class="track"><div class="fill"></div></div>
+      </div>
+
+      <div class="nba">
+        <div class="kicker">下一步 · 今日一站</div>
+        <div class="title">完成数学挑战</div>
+        <div class="sub">完成后 <span class="gain">+20</span> 成长值</div>
+        <div class="arrow">›</div>
+      </div>
+
+      <div class="sectitle">家庭动态</div>
+      <div class="dyn">
+        <div class="item"><span class="news"></span><span style="color:var(--dim-wealth);font-weight:700">小柚</span> 连续打卡 <span class="streak-num">21</span> 天</div>
+      </div>
+      <div class="celebrate">
+        <svg class="medal" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <defs><linearGradient id="mg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FCE08A"/><stop offset="1" stop-color="#F5A524"/></linearGradient></defs>
+          <path d="M9.2 4l1.6 3.2M14.8 4l-1.6 3.2" stroke="#E0920F" stroke-width="1.4" stroke-linecap="round"/>
+          <circle cx="12" cy="13.5" r="7" fill="url(#mg)" stroke="#E0920F" stroke-width="1"/>
+          <path d="M12 9.8l1.35 2.8 3.05.45-2.2 2.15.52 3.05L12 18.9l-2.72 1.45.52-3.05-2.2-2.15 3.05-.45z" fill="#fff"/>
+        </svg>
+        <span class="ct">本周 · 全家五维 <span class="first">首次</span> 全达标</span>
+        <span class="shine"></span>
+      </div>
+
+      <div class="sectitle">本周家庭成长卡</div>
+      <div class="growth">
+        <div class="mini"><div class="t">五维全达标 · <span style="color:#fff;font-weight:800">智</span> <span class="gain">+12</span></div><div class="s">本周家庭成长报告 · 家人都在期待这一刻</div></div>
+        <div class="btn"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2 21l21-9L2 3v7l15 2-15 2z" fill="#fff"/></svg><span class="txt">成果分享 · 邀请朋友们一起看 ›</span><span class="shine"></span></div>
+      </div>
+    </div>
+
+    <!-- ============ TabBar ============ -->
+    <div class="tabbar">
+      <span class="tab active">首页</span>
+      <span class="tab">健康</span>
+      <span class="tab">成长</span>
+      <span class="tab">我的</span>
+    </div>
+    <div class="tab-center" id="openDrawer">五维</div>
+
+    <!-- ============ 五维抽屉 ============ -->
+    <div class="overlay" id="overlay"></div>
+    <div class="sheet" id="sheet">
+      <div class="handle"></div>
+      <h3>全家五维</h3>
+      <div class="drow"><span class="dot" style="background:var(--dim-wisdom)"></span><span class="name"><span class="dim-w">智</span> · 思维</span><span class="val">82</span></div>
+      <div class="drow"><span class="dot" style="background:var(--dim-mind)"></span><span class="name">心 · 情绪</span><span class="val">79</span></div>
+      <div class="drow"><span class="dot" style="background:var(--dim-body)"></span><span class="name">身 · 体魄</span><span class="val">71</span></div>
+      <div class="drow"><span class="dot" style="background:var(--dim-action)"></span><span class="name">行 · 行动</span><span class="val">75</span></div>
+      <div class="drow"><span class="dot" style="background:var(--dim-wealth)"></span><span class="name">富 · 财富</span><span class="val">68</span></div>
+      <div class="expand" id="openSandbox">展开五维总览</div>
+    </div>
+
+    <!-- ============ 全屏沙盘页 ============ -->
+    <div class="sandbox" id="sandbox">
+      <div class="sb-head"><span class="sb-back" id="closeSandbox">‹</span><span class="sb-title">五维总览</span><span></span></div>
+      <div class="radarcard">
+        <svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <polygon points="130,30 213,99 174,201 86,201 47,99" fill="none" stroke="#E2E6EB"/>
+          <polygon points="130,80 176,124 153,170 107,170 84,124" fill="none" stroke="#EDEFF2"/>
+          <line x1="130" y1="130" x2="130" y2="30" stroke="#E2E6EB"/>
+          <line x1="130" y1="130" x2="213" y2="99" stroke="#E2E6EB"/>
+          <line x1="130" y1="130" x2="174" y2="201" stroke="#E2E6EB"/>
+          <line x1="130" y1="130" x2="86" y2="201" stroke="#E2E6EB"/>
+          <line x1="130" y1="130" x2="47" y2="99" stroke="#E2E6EB"/>
+          <polygon points="130,48 201,107 170,185 88,187 55,106" fill="#2F6BE6" fill-opacity="0.18" stroke="#2F6BE6" stroke-width="2"/>
+          <circle cx="130" cy="48" r="4" fill="#6C5CE7"/>
+          <circle cx="201" cy="107" r="4" fill="#12B981"/>
+          <circle cx="170" cy="185" r="4" fill="#F5A524"/>
+          <circle cx="88" cy="187" r="4" fill="#FF7A45"/>
+          <circle cx="55" cy="106" r="4" fill="#F2588E"/>
+          <text x="130" y="22" font-size="13" font-weight="700" fill="#6C5CE7" text-anchor="middle">智 82</text>
+          <text x="228" y="100" font-size="13" font-weight="700" fill="#12B981" text-anchor="middle">行 75</text>
+          <text x="182" y="224" font-size="13" font-weight="700" fill="#F5A524" text-anchor="middle">富 68</text>
+          <text x="78" y="224" font-size="13" font-weight="700" fill="#FF7A45" text-anchor="middle">身 71</text>
+          <text x="30" y="132" font-size="13" font-weight="700" fill="#F2588E" text-anchor="middle">心 79</text>
+        </svg>
+      </div>
+      <div class="sectitle">各维趋势</div>
+      <div class="trend">
+        <div class="tcard"><div class="n dim-w">智</div><div class="d">+6</div></div>
+        <div class="tcard"><div class="n" style="color:var(--dim-mind)">心</div><div class="d">+3</div></div>
+        <div class="tcard"><div class="n" style="color:var(--dim-action)">行</div><div class="d">+4</div></div>
+      </div>
+      <div class="sectitle">改善建议</div>
+      <div class="sug">
+        <div class="si w"><div class="st">富 · 理财习惯偏弱</div><div class="sd">本周「富」<span class="dim">维</span>仅 68 分,建议安排一次家庭记账小互动。</div></div>
+        <div class="si b"><div class="st">身 · 运动待加强</div><div class="sd">「身」<span class="dim">维</span> 71 分,可把晚饭后散步设为本周家庭任务。</div></div>
+      </div>
+    </div>
+  </div>
+
+<script>
+  const overlay = document.getElementById('overlay');
+  const sheet = document.getElementById('sheet');
+  const sandbox = document.getElementById('sandbox');
+
+  function openDrawer(){ overlay.classList.add('show'); sheet.classList.add('show'); }
+  function closeDrawer(){ overlay.classList.remove('show'); sheet.classList.remove('show'); }
+
+  document.getElementById('openDrawer').addEventListener('click', openDrawer);
+  overlay.addEventListener('click', closeDrawer);
+  document.getElementById('openSandbox').addEventListener('click', ()=>{ closeDrawer(); sandbox.classList.add('show'); });
+  document.getElementById('closeSandbox').addEventListener('click', ()=> sandbox.classList.remove('show'));
+</script>
+</body>
+</html>

+ 2882 - 0
cfc-frontend/docs/redesign/prototype.html

@@ -0,0 +1,2882 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0d1117" />
+<title>浠艾福 · 页面重新设计 · 高保真原型</title>
+<style>
+  /* =========================================================
+     浠艾福 Redesign — Design Tokens (v4.0)
+     方向:Calm Premium Wellness
+     - 以白色/浅中性为底,五维色彩仅作强调色
+     - 内联 SVG 图标取代 emoji
+     - 克制的动效:ease-out 入场、spring 抽屉、reduced-motion 降级
+     ========================================================= */
+  :root {
+    /* 品牌中性(暖色基底,呼应 flash 页) */
+    --bg: #FFF7F1;
+    --bg-soft: #FBEDE1;
+    --surface: #FFFFFF;
+    --surface-2: #FFFDFB;
+    --ink: #3D2B1F;
+    --ink-2: #7A6650;
+    --ink-3: #B49A83;
+    --line: #F2E7DA;
+    --line-strong: #E8D9C7;
+
+    /* 品牌主色(行动/关键按钮)——暖橙,沿用 flash 页 */
+    --brand: #F97316;
+    --brand-ink: #7C2D12;
+    --brand-soft: #FFF1E6;
+
+    /* 五维强调色(严格沿用 flash 页取值) */
+    --dim-body: #FF8C42;     /* 身 · 主动健康 */
+    --dim-body-soft: #FFEAD9;
+    --dim-mind: #FF6B9D;     /* 心 · 大爱相随 */
+    --dim-mind-soft: #FFE0EC;
+    --dim-wisdom: #6366F1;   /* 智 · 赋能未来 */
+    --dim-wisdom-soft: #E9E9FE;
+    --dim-action: #10B981;   /* 行 · 人际和谐 */
+    --dim-action-soft: #DEF7EF;
+    --dim-wealth: #F59E0B;   /* 富 · 利他创富 */
+    --dim-wealth-soft: #FEF0D6;
+
+    /* 语义 */
+    --ok: #10B981;
+    --warn: #F59E0B;
+    --danger: #EF5350;
+
+    /* 圆角 */
+    --r-sm: 10px;
+    --r-md: 16px;
+    --r-lg: 22px;
+    --r-xl: 28px;
+    --r-pill: 999px;
+
+    /* 阴影 —— 轻、暖 */
+    --sh-1: 0 1px 2px rgba(124,45,18,0.04), 0 2px 8px rgba(124,45,18,0.05);
+    --sh-2: 0 4px 16px rgba(124,45,18,0.07);
+    --sh-3: 0 12px 40px rgba(124,45,18,0.12);
+    --sh-brand: 0 6px 20px rgba(249,115,22,0.30);
+
+    /* 动效 */
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+    --t-fast: 160ms;
+    --t-base: 240ms;
+    --t-slow: 360ms;
+
+    /* 字号基线(移动端 ≥14px 正文) */
+    --fs-xs: 11px;
+    --fs-sm: 12px;
+    --fs-base: 14px;
+    --fs-md: 15px;
+    --fs-lg: 17px;
+    --fs-xl: 20px;
+    --fs-2xl: 26px;
+    --fs-3xl: 32px;
+
+    --tab-h: 64px;
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
+  html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
+    background: #F3E9DD;
+    color: var(--ink);
+    -webkit-font-smoothing: antialiased;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100dvh;
+    padding: 24px 16px;
+  }
+  button, [role="button"], .tap { touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
+  input, textarea, select { font-size: 16px; font-family: inherit; }
+  svg { display: block; }
+
+  /* ===== 演示外壳(Preview Shell,非产品布局) ===== */
+  .stage {
+    width: 100%;
+    max-width: 408px;
+    background: var(--bg);
+    border-radius: 44px;
+    box-shadow: 0 30px 80px rgba(20,30,55,0.28);
+    overflow: hidden;
+    position: relative;
+    height: min(880px, 92vh);
+    display: flex;
+    flex-direction: column;
+    border: 10px solid #0E1320;
+  }
+  .notch {
+    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+    width: 132px; height: 26px; background: #0E1320; border-radius: 0 0 16px 16px; z-index: 60;
+  }
+  .statusbar {
+    height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between;
+    padding: 0 26px; font-size: 13px; font-weight: 600; color: var(--ink);
+    padding-top: 8px;
+  }
+  .statusbar .sb-right { display: flex; align-items: center; gap: 6px; }
+
+  /* ===== App 视图容器 ===== */
+  .app { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
+  .screen-scroll {
+    flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 16px);
+  }
+  .screen { display: none; animation: screenIn var(--t-base) var(--ease-out) both; }
+  .screen.active { display: block; }
+  @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+
+  /* ===== 顶部栏(每页) ===== */
+  .topbar {
+    padding: calc(env(safe-area-inset-top, 0px) + 6px) 18px 10px;
+    display: flex; align-items: center; justify-content: space-between; gap: 12px;
+    background: var(--surface);
+    position: sticky; top: 0; z-index: 20;
+    border-bottom: 1px solid var(--line);
+  }
+  .topbar .tb-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+  .tb-greet { font-size: var(--fs-sm); color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
+  .tb-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.2px; }
+  .tb-right { display: flex; align-items: center; gap: 10px; }
+  .icon-btn {
+    width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft);
+    display: flex; align-items: center; justify-content: center; color: var(--ink-2);
+    position: relative; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
+  }
+  .icon-btn:active { transform: scale(0.92); background: var(--line); }
+  .icon-btn .badge {
+    position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
+    background: var(--danger); border: 2px solid var(--surface);
+  }
+
+  /* 成员切换 chips */
+  .member-switch { display: flex; gap: 6px; align-items: center; }
+  .mchip {
+    display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: var(--r-pill);
+    background: var(--bg-soft); border: 1.5px solid transparent; transition: all var(--t-fast) var(--ease-out);
+  }
+  .mchip.on { background: var(--brand-soft); border-color: var(--brand); }
+  .mchip:active { transform: scale(0.95); }
+  .mchip .ava { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
+  .mchip .nm { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
+
+  /* ===== 通用卡片/区块 ===== */
+  .pad { padding: 0 16px; }
+  .section { margin-top: 16px; }
+  .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; margin-bottom: 10px; }
+  .sec-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
+  .sec-more { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
+  .card {
+    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
+    padding: 16px; margin: 0 16px 14px;
+  }
+  .card.flush { margin: 0 0 0 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
+
+  /* ===== 能量英雄模块(首页签名 · 暖桃橙,呼应 flash 页) ===== */
+  .energy-hero {
+    margin: 14px 16px 0; background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
+    border-radius: var(--r-xl); padding: 18px; color: #7C2D12; position: relative; overflow: hidden;
+    box-shadow: var(--sh-2);
+  }
+  .energy-hero::after {
+    content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
+    background: radial-gradient(circle, rgba(249,115,22,0.30), transparent 70%); border-radius: 50%;
+  }
+  .eh-top { display: flex; justify-content: space-between; align-items: flex-start; }
+  .eh-label { font-size: var(--fs-sm); color: rgba(124,45,18,0.6); }
+  .eh-score { font-size: var(--fs-3xl); font-weight: 800; line-height: 1; margin-top: 2px; color: #7C2D12; }
+  .eh-score small { font-size: var(--fs-base); font-weight: 600; color: rgba(124,45,18,0.55); margin-left: 4px; }
+  .eh-sub { font-size: var(--fs-xs); color: rgba(124,45,18,0.5); margin-top: 6px; }
+  .eh-link { font-size: var(--fs-sm); color: #7C2D12; background: rgba(124,45,18,0.10); padding: 6px 12px; border-radius: var(--r-pill); font-weight: 600; transition: transform var(--t-fast) var(--ease-out); }
+  .eh-link:active { transform: scale(0.95); }
+  .ring-wrap { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
+  .ring { width: 132px; height: 132px; flex: none; position: relative; }
+  .ring .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+  .ring .rc-val { font-size: var(--fs-2xl); font-weight: 800; color: #7C2D12; }
+  .ring .rc-lab { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
+  .dim-bars { flex: 1; display: flex; flex-direction: column; gap: 9px; }
+  .dbar { display: flex; align-items: center; gap: 8px; }
+  .dbar .dl { font-size: var(--fs-xs); width: 30px; color: rgba(124,45,18,0.8); flex: none; }
+  .dbar .dt { flex: 1; height: 7px; background: rgba(124,45,18,0.12); border-radius: var(--r-pill); overflow: hidden; }
+  .dbar .df { height: 100%; border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
+  .dbar .dv { font-size: var(--fs-xs); width: 22px; text-align: right; color: #7C2D12; font-weight: 600; }
+
+  /* ===== Next Best Action ===== */
+  .nba {
+    margin: 14px 16px 0; border-radius: var(--r-lg); padding: 14px 16px; display: flex; align-items: center; gap: 13px;
+    background: var(--surface); box-shadow: var(--sh-1); position: relative; overflow: hidden;
+    border-left: 4px solid var(--brand);
+  }
+  .nba:active { transform: scale(0.99); }
+  .nba .nba-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
+  .nba .nba-info { flex: 1; min-width: 0; }
+  .nba .nba-t { font-size: var(--fs-md); font-weight: 700; }
+  .nba .nba-s { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
+  .nba .nba-go { font-size: var(--fs-sm); font-weight: 700; color: var(--brand); flex: none; }
+
+  /* ===== 任务行 / 挑战 ===== */
+  .row {
+    display: flex; align-items: center; gap: 12px; padding: 13px 0;
+  }
+  .row + .row { border-top: 1px solid var(--line); }
+  .row .rk { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
+  .row .ri { flex: 1; min-width: 0; }
+  .row .rt { font-size: var(--fs-base); font-weight: 600; }
+  .row .rm { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
+  .pill-btn {
+    flex: none; padding: 7px 14px; border-radius: var(--r-pill); background: var(--brand); color: #fff;
+    font-size: var(--fs-sm); font-weight: 700; border: none; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
+  }
+  .pill-btn:active { transform: scale(0.94); }
+  .pill-btn.done { background: var(--dim-action-soft); color: var(--ok); }
+
+  /* 家庭动态 */
+  .feed-item { display: flex; gap: 11px; padding: 11px 0; align-items: flex-start; }
+  .feed-item + .feed-item { border-top: 1px solid var(--line); }
+  .feed-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); }
+  .feed-item .fi-t { font-size: var(--fs-base); color: var(--ink); line-height: 1.4; }
+  .feed-item .fi-t b { font-weight: 700; }
+  .feed-item .fi-time { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
+
+  /* 推荐横滑 */
+  .hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 4px; overscroll-behavior: contain; scrollbar-width: none; }
+  .hscroll::-webkit-scrollbar { display: none; }
+  .rec-card { flex: none; width: 168px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
+  .rec-card:active { transform: scale(0.98); }
+  .rec-cover { height: 96px; }
+  .rec-body { padding: 10px; }
+  .rec-cat { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); display: inline-block; }
+  .rec-tt { font-size: var(--fs-base); font-weight: 600; margin-top: 7px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .rec-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }
+
+  /* ===== TabBar(自定义) ===== */
+  .tabbar {
+    position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
+    background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.4) blur(14px);
+    border-top: 1px solid var(--line); display: flex; align-items: stretch; z-index: 40;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+  }
+  .tab {
+    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
+    color: var(--ink-3); transition: color var(--t-fast); position: relative;
+  }
+  .tab .t-ic { transition: transform var(--t-fast) var(--ease-out); }
+  .tab.on { color: var(--brand); }
+  .tab.on .t-ic { transform: translateY(-1px); }
+  .tab .t-tx { font-size: 10.5px; font-weight: 600; }
+  .tab-center {
+    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative;
+  }
+  .tab-center .c-btn {
+    width: 52px; height: 52px; border-radius: 50%; margin-top: -22px; background: linear-gradient(135deg, #FF8C42, #FF6B9D);
+    display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--sh-brand);
+    transition: transform var(--t-fast) var(--ease-out);
+  }
+  .tab-center:active .c-btn { transform: scale(0.9) rotate(-8deg); }
+  .tab-center .c-tx { font-size: 10px; font-weight: 700; color: var(--brand); }
+
+  /* ===== 五维 底部抽屉 ===== */
+  .sheet-mask { position: absolute; inset: 0; background: rgba(16,22,38,0.42); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base); z-index: 50; }
+  .sheet-mask.show { opacity: 1; visibility: visible; }
+  .sheet {
+    position: absolute; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--surface);
+    border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
+    transform: translateY(100%); transition: transform var(--t-slow) var(--ease-drawer);
+    box-shadow: var(--sh-3); max-height: 82%; overflow-y: auto; overscroll-behavior: contain;
+  }
+  .sheet.show { transform: translateY(0); }
+  .sheet-grip { width: 38px; height: 4px; background: var(--line-strong); border-radius: 4px; margin: 4px auto 14px; }
+  .sheet-title { font-size: var(--fs-xl); font-weight: 800; text-align: center; }
+  .sheet-sub { text-align: center; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 4px; margin-bottom: 16px; }
+  .dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .dim-tile {
+    border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px;
+    border: 1.5px solid transparent; transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
+  }
+  .dim-tile:active { transform: scale(0.97); border-color: var(--line-strong); }
+  .dim-tile .dt-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
+  .dim-tile .dt-nm { font-size: var(--fs-md); font-weight: 700; }
+  .dim-tile .dt-ds { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
+  .dim-tile .dt-sc { font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; }
+  .dim-tile .dt-track { height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
+  .dim-tile .dt-fill { height: 100%; border-radius: var(--r-pill); }
+
+  /* ===== 健康页 ===== */
+  .seg { display: flex; gap: 6px; padding: 4px; background: var(--bg-soft); border-radius: var(--r-pill); margin: 14px 16px 0; }
+  .seg .sg { flex: 1; text-align: center; padding: 9px 0; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
+  .seg .sg.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
+  .radar-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; text-align: center; }
+  .radar-card svg { margin: 0 auto; }
+  .data-row { display: flex; gap: 12px; margin: 14px 16px 0; }
+  .data-col { flex: 1; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 14px; }
+  .data-col .dc-t { font-size: var(--fs-base); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
+
+  /* ===== 成长页 ===== */
+  .ms-card { margin: 14px 16px 0; background: linear-gradient(135deg, #FFFFFF, #FFF6EE); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
+  .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
+  .ms-it { background: var(--surface); border-radius: var(--r-md); padding: 14px 8px; text-align: center; box-shadow: var(--sh-1); }
+  .ms-it .mv { font-size: var(--fs-xl); font-weight: 800; }
+  .ms-it .ml { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
+  .today-prog { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+  .tp-item { background: var(--surface); border-radius: var(--r-md); padding: 13px; box-shadow: var(--sh-1); display: flex; align-items: center; gap: 10px; transition: transform var(--t-fast) var(--ease-out); }
+  .tp-item:active { transform: scale(0.97); }
+  .tp-item .tp-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
+  .tp-item .tp-l { font-size: var(--fs-sm); font-weight: 600; }
+  .tp-item .tp-st { font-size: var(--fs-xs); margin-top: 2px; font-weight: 600; }
+  .tp-st.pend { color: var(--brand); }
+  .tp-st.done { color: var(--ok); }
+
+  /* ===== 我的页 ===== */
+  .id-card { margin: 14px 16px 0; background: linear-gradient(135deg, #FF8C42, #FF6B9D); border-radius: var(--r-xl); padding: 18px; color: #fff; display: flex; align-items: center; gap: 14px; box-shadow: var(--sh-2); }
+  .id-ava { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex: none; border: 2px solid rgba(255,255,255,0.35); }
+  .id-meta { flex: 1; min-width: 0; }
+  .id-nm { font-size: var(--fs-xl); font-weight: 800; display: flex; align-items: center; gap: 8px; }
+  .id-lv { font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: var(--r-pill); }
+  .id-sub { font-size: var(--fs-sm); color: rgba(255,255,255,0.75); margin-top: 5px; }
+  .id-pts { text-align: right; flex: none; }
+  .id-pts .pv { font-size: var(--fs-xl); font-weight: 800; }
+  .id-pts .pl { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); }
+  .ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
+  .ach { background: var(--surface); border-radius: var(--r-md); padding: 14px 6px; text-align: center; box-shadow: var(--sh-1); transition: transform var(--t-fast) var(--ease-out); }
+  .ach:active { transform: scale(0.96); }
+  .ach .ai { width: 38px; height: 38px; border-radius: 12px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
+  .ach .av { font-size: var(--fs-md); font-weight: 800; }
+  .ach .al { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
+  .menu-list { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
+  .menu-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; transition: background var(--t-fast); }
+  .menu-row:active { background: var(--bg-soft); }
+  .menu-row + .menu-row { border-top: 1px solid var(--line); }
+  .menu-row .mr-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
+  .menu-row .mr-tx { flex: 1; font-size: var(--fs-base); font-weight: 600; }
+  .menu-row .mr-ar { color: var(--ink-3); }
+
+  /* 家庭成员条 */
+  .fam-strip { display: flex; gap: 14px; overflow-x: auto; padding: 2px 16px 6px; overscroll-behavior: contain; scrollbar-width: none; }
+  .fam-strip::-webkit-scrollbar { display: none; }
+  .fam-it { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
+  .fam-av { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; position: relative; }
+  .fam-av.add { background: var(--bg-soft); color: var(--ink-3); border: 1.5px dashed var(--line-strong); }
+  .fam-tag { position: absolute; bottom: -2px; right: -2px; font-size: 8px; font-weight: 700; color: #fff; border-radius: var(--r-pill); padding: 1px 5px; }
+  .fam-nm { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
+
+  /* ===== 登录页 ===== */
+  .login { flex: 1; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top,0px) + 50px) 28px 28px; }
+  .login .lg-logo { width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(135deg, #FF8C42, #FF6B9D); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 22px; box-shadow: var(--sh-brand); }
+  .login .lg-h { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: 1px; }
+  .login .lg-s { font-size: var(--fs-md); color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
+  .login .lg-fields { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
+  .field { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: flex; align-items: center; gap: 10px; transition: border-color var(--t-fast); }
+  .field:focus-within { border-color: var(--brand); }
+  .field input { flex: 1; border: none; outline: none; background: transparent; color: var(--ink); font-size: var(--fs-base); }
+  .field .fc-ic { color: var(--ink-3); flex: none; }
+  .lg-btn { margin-top: 22px; background: var(--brand); color: #fff; border: none; border-radius: var(--r-md); padding: 16px; font-size: var(--fs-lg); font-weight: 700; box-shadow: var(--sh-brand); transition: transform var(--t-fast) var(--ease-out); }
+  .lg-btn:active { transform: scale(0.98); }
+  .lg-alt { margin-top: 16px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
+  .lg-alt b { color: var(--brand); font-weight: 700; }
+  .lg-terms { margin-top: auto; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; padding-bottom: 10px; }
+
+  /* ===== 状态:骨架 / 空 / 错误 ===== */
+  .skeleton { background: linear-gradient(90deg, #F6E7D7 25%, #FCEFDF 50%, #F6E7D7 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
+  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+  .empty-state { text-align: center; padding: 48px 24px; }
+  .empty-state .es-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--ink-3); }
+  .empty-state .es-t { font-size: var(--fs-md); font-weight: 700; }
+  .empty-state .es-s { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
+  .empty-state .es-btn { margin-top: 18px; display: inline-block; background: var(--brand); color: #fff; padding: 11px 22px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; }
+
+  /* Toast */
+  .toast { position: absolute; left: 50%; bottom: calc(var(--tab-h) + 24px); transform: translate(-50%, 20px); background: #1A2133; color: #fff; font-size: var(--fs-sm); font-weight: 600; padding: 11px 18px; border-radius: var(--r-pill); opacity: 0; pointer-events: none; transition: transform var(--t-base) var(--ease-out), opacity var(--t-base); z-index: 70; box-shadow: var(--sh-3); max-width: 80%; text-align: center; }
+  .toast.show { opacity: 1; transform: translate(-50%, 0); }
+
+  /* 演示切换条 */
+  .demo-bar { position: fixed; top: 16px; right: 16px; z-index: 200; background: #1A2133; border-radius: var(--r-pill); padding: 6px; display: flex; gap: 4px; box-shadow: var(--sh-3); }
+  .demo-bar button { border: none; background: transparent; color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 8px 14px; border-radius: var(--r-pill); opacity: 0.6; }
+  .demo-bar button.on { background: var(--brand); opacity: 1; }
+
+  /* 入场 stagger */
+  .stagger > * { opacity: 0; transform: translateY(8px); animation: itemIn var(--t-base) var(--ease-out) forwards; }
+  .stagger > *:nth-child(1) { animation-delay: 20ms; }
+  .stagger > *:nth-child(2) { animation-delay: 60ms; }
+  .stagger > *:nth-child(3) { animation-delay: 100ms; }
+  .stagger > *:nth-child(4) { animation-delay: 140ms; }
+  .stagger > *:nth-child(5) { animation-delay: 180ms; }
+  .stagger > *:nth-child(6) { animation-delay: 220ms; }
+  @keyframes itemIn { to { opacity: 1; transform: translateY(0); } }
+
+  /* ===== 闪屏(还原原 flash 页暖色基因) ===== */
+  #splash {
+    position: absolute; inset: 0; z-index: 9999;
+    display: flex; align-items: center; justify-content: center;
+    background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
+    overflow: hidden;
+    transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
+  }
+  #splash.hide { opacity: 0; visibility: hidden; }
+  .sp-bg { position: absolute; inset: 0; pointer-events: none; }
+  .sp-c { position: absolute; border-radius: 50%; opacity: .12; }
+  .sp-c1 { width: 200px; height: 200px; background: #FF8C42; top: -50px; right: -40px; animation: sp-float1 4s ease-in-out infinite; }
+  .sp-c2 { width: 140px; height: 140px; background: #FF6B9D; bottom: 40px; left: -30px; animation: sp-float2 5s ease-in-out infinite; }
+  .sp-c3 { width: 90px; height: 90px; background: #6366F1; top: 50%; right: -20px; animation: sp-float3 6s ease-in-out infinite; }
+  @keyframes sp-float1 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-15px) scale(1.05)} }
+  @keyframes sp-float2 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(10px) scale(1.08)} }
+  @keyframes sp-float3 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(10deg)} }
+  .sp-body { display: flex; flex-direction: column; align-items: center; animation: sp-body-in .8s cubic-bezier(.16,1,.3,1) both; padding: 0 24px; }
+  @keyframes sp-body-in { from { opacity:0; transform: translateY(20px) scale(.96);} to {opacity:1; transform: none;} }
+  .sp-logo { width: 80px; height: 80px; border-radius: 20px; background: rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; color:#F97316; margin-bottom: 14px; box-shadow: 0 8px 32px rgba(249,115,22,.25); animation: sp-pulse 2.5s ease-in-out infinite; }
+  @keyframes sp-pulse { 0%,100%{box-shadow:0 8px 32px rgba(249,115,22,.25)} 50%{box-shadow:0 8px 48px rgba(249,115,22,.45)} }
+  .sp-name { font-size: 32px; font-weight: 800; color: #7C2D12; letter-spacing: 5px; }
+  .sp-en { font-size: 11px; color: rgba(124,45,18,.5); letter-spacing: 3px; margin-top: 2px; }
+  .sp-id { font-size: 14px; font-weight: 600; color: rgba(124,45,18,.85); letter-spacing: 1px; margin-top: 16px; text-align: center; line-height: 1.5; }
+  .sp-dims { display: flex; flex-direction: row; gap: 14px; margin-top: 18px; }
+  .sp-dim { display:flex; flex-direction:column; align-items:center; gap:6px; animation: sp-dim-in .5s ease both; }
+  .sp-dc { width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:700; box-shadow: 0 4px 12px rgba(124,45,18,.12); }
+  .sp-dim:nth-child(1){animation-delay:.1s} .sp-dim:nth-child(2){animation-delay:.2s} .sp-dim:nth-child(3){animation-delay:.3s} .sp-dim:nth-child(4){animation-delay:.4s} .sp-dim:nth-child(5){animation-delay:.5s}
+  @keyframes sp-dim-in { from{opacity:0; transform:translateY(8px) scale(.8)} to{opacity:1; transform:none} }
+  .sp-tag { font-size: 13px; color: rgba(124,45,18,.7); letter-spacing: 2px; margin-top: 16px; text-align:center; }
+  .sp-dots { position:absolute; bottom: 70px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
+  .sp-dots span { width: 7px; height: 7px; border-radius:50%; background: rgba(249,115,22,.6); animation: sp-dot 1.4s ease-in-out infinite both; }
+  .sp-dots span:nth-child(1){animation-delay:-.32s} .sp-dots span:nth-child(2){animation-delay:-.16s} .sp-dots span:nth-child(3){animation-delay:0s}
+  @keyframes sp-dot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }
+  .sp-enter { position:absolute; bottom: 34px; left:0; right:0; text-align:center; font-size:12px; color: rgba(124,45,18,.5); letter-spacing:2px; }
+
+  /* ===== 通用:Task 页返回栏(隐藏 TabBar 的二级页) ===== */
+  .nav-bar {
+    padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 10px;
+    display: flex; align-items: center; gap: 10px;
+    background: var(--surface); position: sticky; top: 0; z-index: 20;
+    border-bottom: 1px solid var(--line);
+  }
+  .nav-bar .nb-back { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: var(--bg-soft); flex: none; transition: transform var(--t-fast) var(--ease-out); }
+  .nav-bar .nb-back:active { transform: scale(0.9); }
+  .nav-bar .nb-t { font-size: var(--fs-lg); font-weight: 800; flex: 1; min-width: 0; }
+  .nav-bar .nb-a { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; flex: none; }
+
+  /* ===== 五维能量总览(深读 · 全屏) ===== */
+  .ov-hero {
+    margin: 14px 16px 0; padding: 18px; border-radius: var(--r-xl); position: relative; overflow: hidden;
+    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
+    box-shadow: var(--sh-2);
+  }
+  .ov-hero::after {
+    content: ""; position: absolute; left: -30px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%;
+    background: radial-gradient(circle, rgba(255,107,157,0.28), transparent 70%);
+  }
+  .ov-score { display: flex; align-items: flex-end; gap: 10px; position: relative; }
+  .ov-score .os-n { font-size: 44px; font-weight: 800; line-height: 1; color: #7C2D12; }
+  .ov-score .os-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.6); padding-bottom: 5px; }
+  .ov-delta { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--ok); background: rgba(16,185,129,0.14); padding: 4px 10px; border-radius: var(--r-pill); }
+  .ov-delta.down { color: var(--danger); background: rgba(239,83,80,0.12); }
+  .ov-cap { font-size: var(--fs-sm); color: rgba(124,45,18,0.65); margin-top: 6px; position: relative; }
+  .ov-radar { display: flex; justify-content: center; padding: 18px 0 6px; position: relative; }
+  .ov-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-top: 10px; position: relative; }
+  .ov-lg { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: rgba(124,45,18,0.75); font-weight: 600; }
+  .ov-lg i { width: 8px; height: 8px; border-radius: 2px; display: block; }
+
+  /* 趋势折线 */
+  .trend-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
+  .trend-tabs { display: flex; gap: 6px; background: var(--bg-soft); padding: 3px; border-radius: var(--r-pill); margin-bottom: 14px; }
+  .trend-tabs .tt { flex: 1; text-align: center; padding: 7px 0; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
+  .trend-tabs .tt.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
+  .trend-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
+  .trend-legend .tl { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
+  .trend-legend .tl i { width: 14px; height: 3px; border-radius: 2px; display: block; }
+
+  /* 家人对比 */
+  .cmp-list { display: flex; flex-direction: column; }
+  .cmp-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
+  .cmp-row + .cmp-row { border-top: 1px solid var(--line); }
+  .cmp-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-sm); font-weight: 700; flex: none; }
+  .cmp-info { flex: 1; min-width: 0; }
+  .cmp-nm { display: flex; align-items: baseline; gap: 6px; }
+  .cmp-nm .cn { font-size: var(--fs-base); font-weight: 600; }
+  .cmp-nm .cr { font-size: var(--fs-xs); color: var(--ink-3); }
+  .cmp-bar { height: 7px; background: var(--bg-soft); border-radius: var(--r-pill); margin-top: 6px; overflow: hidden; }
+  .cmp-bar .cf { height: 100%; border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
+  .cmp-sc { font-size: var(--fs-md); font-weight: 800; flex: none; width: 34px; text-align: right; }
+
+  /* 建议卡 */
+  .adv-card { display: flex; gap: 11px; padding: 13px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--t-fast) var(--ease-out); }
+  .adv-card:active { transform: scale(0.98); }
+  .adv-card + .adv-card { margin-top: 10px; }
+  .adv-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
+  .adv-tx { flex: 1; min-width: 0; }
+  .adv-t { font-size: var(--fs-base); font-weight: 600; }
+  .adv-s { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
+  .adv-pri { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); flex: none; align-self: flex-start; }
+
+  /* ===== 维度详情(Task 页) ===== */
+  .dim-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
+  .dim-hero .dh-top { display: flex; align-items: center; gap: 12px; position: relative; }
+  .dim-hero .dh-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
+  .dim-hero .dh-nm { font-size: var(--fs-xl); font-weight: 800; }
+  .dim-hero .dh-ds { font-size: var(--fs-sm); opacity: 0.8; margin-top: 2px; }
+  .dim-hero .dh-sc { margin-left: auto; text-align: right; }
+  .dim-hero .dh-sc .n { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
+  .dim-hero .dh-sc .l { font-size: var(--fs-xs); opacity: 0.75; margin-top: 2px; }
+  .sub-score { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; position: relative; }
+  .sub-score .ss { background: rgba(255,255,255,0.55); border-radius: var(--r-md); padding: 11px 12px; }
+  .sub-score .ss .sl { font-size: var(--fs-xs); opacity: 0.78; font-weight: 600; }
+  .sub-score .ss .sv { font-size: var(--fs-lg); font-weight: 800; margin-top: 3px; }
+  .sub-score .ss .sv small { font-size: var(--fs-xs); font-weight: 600; opacity: 0.7; margin-left: 2px; }
+
+  .metric-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
+  .metric-row + .metric-row { border-top: 1px solid var(--line); }
+  .metric-row .mi { flex: 1; min-width: 0; }
+  .metric-row .mn { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 6px; }
+  .metric-row .mv { font-size: var(--fs-md); font-weight: 800; flex: none; }
+  .metric-row .mr { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
+  .tag-ref { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); flex: none; }
+  .tag-ref.hi { background: rgba(239,83,80,0.12); color: var(--danger); }
+  .tag-ref.mid { background: rgba(245,158,11,0.14); color: #B45309; }
+  .tag-ref.ok { background: var(--dim-action-soft); color: var(--ok); }
+
+  /* ===== 报告上传流程 ===== */
+  .up-steps { display: flex; align-items: center; gap: 6px; padding: 16px 18px 6px; }
+  .up-step { display: flex; align-items: center; gap: 6px; flex: none; }
+  .up-step .us-n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--bg-soft); color: var(--ink-3); flex: none; }
+  .up-step .us-t { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
+  .up-step.on .us-n { background: var(--brand); color: #fff; }
+  .up-step.on .us-t { color: var(--brand-ink); }
+  .up-step.done .us-n { background: var(--dim-action); color: #fff; }
+  .up-step.done .us-t { color: var(--ink-2); }
+  .up-step-line { flex: 1; height: 2px; background: var(--line); border-radius: 2px; min-width: 12px; }
+  .up-step-line.done { background: var(--dim-action); }
+
+  .up-zone { margin: 14px 16px 0; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 30px 20px; text-align: center; transition: border-color var(--t-fast), background var(--t-fast); }
+  .up-zone:active { border-color: var(--brand); background: var(--brand-soft); }
+  .up-zone .uz-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
+  .up-zone .uz-t { font-size: var(--fs-md); font-weight: 700; }
+  .up-zone .uz-s { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
+  .up-btns { display: flex; gap: 10px; margin-top: 18px; }
+  .up-btns .ub { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 13px; font-size: var(--fs-base); font-weight: 600; transition: transform var(--t-fast) var(--ease-out); }
+  .up-btns .ub:active { transform: scale(0.97); }
+  .up-btns .ub.pri { background: var(--brand); color: #fff; border-color: var(--brand); }
+
+  .up-preview { margin: 14px 16px 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); background: var(--surface); }
+  .up-thumb { height: 168px; background: linear-gradient(135deg, #FFF3E6, #FFE2C7); position: relative; display: flex; align-items: center; justify-content: center; }
+  .up-thumb .paper { width: 118px; height: 148px; background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(124,45,18,0.16); padding: 12px 10px; }
+  .up-thumb .paper .pl { height: 6px; border-radius: 3px; background: #F2E7DA; margin-bottom: 7px; }
+  .up-thumb .paper .pl.t { width: 56%; background: #E8D9C7; height: 8px; }
+  .up-thumb .badge-ok { position: absolute; right: 12px; top: 12px; background: var(--dim-action); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 4px; }
+  .up-meta { padding: 14px; }
+  .up-fname { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 7px; }
+  .up-fmeta { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 4px; }
+
+  .ocr-box { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
+  .ocr-bar { height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; margin-top: 12px; }
+  .ocr-bar .of { height: 100%; background: linear-gradient(90deg, var(--brand), #FF6B9D); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
+  .ocr-step { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: var(--fs-sm); }
+  .ocr-step .os-ic { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--bg-soft); color: var(--ink-3); }
+  .ocr-step.done .os-ic { background: var(--dim-action); color: #fff; }
+  .ocr-step.run .os-ic { background: var(--brand-soft); color: var(--brand); }
+  .ocr-step .os-t { color: var(--ink-2); }
+  .ocr-step.done .os-t, .ocr-step.run .os-t { color: var(--ink); font-weight: 600; }
+  .spin { animation: spin 1s linear infinite; transform-origin: center; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  .fix-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
+  .fix-row + .fix-row { border-top: 1px solid var(--line); }
+  .fix-row .fi { flex: 1; min-width: 0; }
+  .fix-row .fn { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 6px; }
+  .fix-row .fv { font-size: var(--fs-md); font-weight: 800; }
+  .fix-row .fw { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
+  .low-conf { background: rgba(245,158,11,0.14); color: #B45309; font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); }
+
+  .up-actions { padding: 6px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
+  .btn-primary { width: 100%; background: var(--brand); color: #fff; border: none; border-radius: var(--r-md); padding: 16px; font-size: var(--fs-lg); font-weight: 700; box-shadow: var(--sh-brand); transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast); }
+  .btn-primary:active { transform: scale(0.98); }
+  .btn-primary:disabled { background: var(--line-strong); box-shadow: none; color: var(--ink-3); }
+  .btn-ghost { width: 100%; background: transparent; color: var(--ink-2); border: none; padding: 14px; font-size: var(--fs-base); font-weight: 600; margin-top: 4px; }
+
+  /* ===== 成长报告卡 / 分享卡 ===== */
+  .rpt-tabs { display: flex; gap: 8px; margin: 14px 16px 0; }
+  .rpt-tabs .rtt { flex: 1; text-align: center; padding: 11px 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); font-size: var(--fs-base); font-weight: 700; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
+  .rpt-tabs .rtt.on { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
+
+  .share-card {
+    margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; position: relative; overflow: hidden;
+    background: linear-gradient(150deg, #FFF7ED 0%, #FFEDD5 52%, #FED7AA 100%);
+    box-shadow: var(--sh-2);
+  }
+  .share-card::before { content: ""; position: absolute; right: -46px; top: -46px; width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,157,0.30), transparent 70%); }
+  .share-card::after { content: ""; position: absolute; left: -40px; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%); }
+  .sc-brand { display: flex; align-items: center; gap: 8px; position: relative; }
+  .sc-brand .scb-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.9); color: var(--brand); display: flex; align-items: center; justify-content: center; }
+  .sc-brand .scb-tx { font-size: var(--fs-sm); font-weight: 800; color: #7C2D12; letter-spacing: 0.5px; }
+  .sc-title { font-size: var(--fs-xl); font-weight: 800; color: #7C2D12; margin-top: 14px; position: relative; line-height: 1.3; }
+  .sc-sub { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 5px; position: relative; }
+  .sc-dims { display: flex; gap: 8px; margin-top: 18px; position: relative; }
+  .sc-dim { flex: 1; background: rgba(255,255,255,0.62); border-radius: var(--r-md); padding: 10px 6px; text-align: center; }
+  .sc-dim .sd-n { font-size: var(--fs-md); font-weight: 800; }
+  .sc-dim .sd-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); margin-top: 2px; font-weight: 600; }
+  .sc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(124,45,18,0.14); position: relative; }
+  .sc-foot .sf-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
+  .sc-foot .sf-r { font-size: var(--fs-xs); font-weight: 700; color: #7C2D12; }
+
+  .badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+  .bg-item { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 10px; text-align: center; transition: transform var(--t-fast) var(--ease-out); position: relative; overflow: hidden; }
+  .bg-item:active { transform: scale(0.96); }
+  .bg-item.locked { opacity: 0.55; }
+  .bg-ring { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; }
+  .bg-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px dashed var(--line-strong); }
+  .bg-item.locked .bg-ring::after { border-color: var(--ink-3); }
+  .bg-nm { font-size: var(--fs-sm); font-weight: 700; }
+  .bg-dt { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
+  .bg-lock { position: absolute; right: 8px; top: 8px; color: var(--ink-3); }
+
+  .share-actions { display: flex; gap: 10px; margin: 16px 16px 0; }
+  .share-actions .sa { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 700; transition: transform var(--t-fast) var(--ease-out); }
+  .share-actions .sa:active { transform: scale(0.97); }
+  .share-actions .sa.pri { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
+  .share-actions .sa.sec { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
+
+  /* ===== 成果 / 成就(突出成果 + 驱动继续完成) ===== */
+  .ach-hero {
+    margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; position: relative; overflow: hidden;
+    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
+    box-shadow: var(--sh-2); color: #7C2D12;
+  }
+  .ach-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,66,0.32), transparent 70%); }
+  .ach-hero .ah-t { font-size: var(--fs-md); font-weight: 800; position: relative; }
+  .ach-hero .ah-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.65); margin-top: 4px; position: relative; line-height: 1.5; }
+  .ah-ring-wrap { display: flex; align-items: center; gap: 18px; margin-top: 16px; position: relative; }
+  .ah-ring { width: 116px; height: 116px; flex: none; position: relative; }
+  .ah-ring .ah-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+  .ah-ring .ah-c .n { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
+  .ah-ring .ah-c .l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); margin-top: 2px; }
+  .ah-stats { flex: 1; display: flex; flex-direction: column; gap: 10px; }
+  .ah-stat { display: flex; align-items: center; gap: 8px; }
+  .ah-stat .as-v { font-size: var(--fs-lg); font-weight: 800; min-width: 52px; }
+  .ah-stat .as-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
+  .ah-stat .as-bar { flex: 1; height: 6px; background: rgba(124,45,18,0.12); border-radius: var(--r-pill); overflow: hidden; }
+  .ah-stat .as-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
+
+  /* 连续打卡火苗条 */
+  .streak { display: flex; gap: 6px; margin-top: 14px; position: relative; }
+  .streak .sd { flex: 1; text-align: center; }
+  .streak .sd .dot { width: 100%; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; color: rgba(124,45,18,0.35); }
+  .streak .sd.done .dot { background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgba(249,115,22,0.35); }
+  .streak .sd.today .dot { outline: 2px solid var(--brand); outline-offset: 2px; }
+  .streak .sd .dl { font-size: 9.5px; color: rgba(124,45,18,0.55); margin-top: 4px; font-weight: 600; }
+
+  /* 任务:完成态 + 继续驱动 */
+  .task-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; position: relative; }
+  .task-item + .task-item { border-top: 1px solid var(--line); }
+  .task-item .tk-ck {
+    width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none;
+    display: flex; align-items: center; justify-content: center; background: transparent;
+    transition: all var(--t-base) var(--ease-out);
+  }
+  .task-item .tk-ck:active { transform: scale(0.88); }
+  .task-item.done .tk-ck { background: var(--ok); border-color: var(--ok); }
+  .task-item .tk-bd { flex: 1; min-width: 0; }
+  .task-item .tk-t { font-size: var(--fs-base); font-weight: 600; transition: color var(--t-base); }
+  .task-item.done .tk-t { color: var(--ink-3); text-decoration: line-through; }
+  .task-item .tk-m { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
+  .task-item .tk-pts { font-size: var(--fs-xs); font-weight: 800; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: var(--r-pill); flex: none; }
+  .task-item.done .tk-pts { color: var(--ok); background: var(--dim-action-soft); }
+  /* 完成后高亮 */
+  @keyframes taskPop { 0% { background: rgba(16,185,129,0.16); } 100% { background: transparent; } }
+  .task-item.just-done { animation: taskPop 1.1s var(--ease-out); }
+
+  /* 成果解锁横幅(完成任务后浮现) */
+  .unlock-toast {
+    position: absolute; left: 16px; right: 16px; top: 60px; z-index: 65;
+    display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: var(--r-lg);
+    background: linear-gradient(135deg, #FFF7ED, #FFEDD5); color: #7C2D12;
+    box-shadow: var(--sh-3); border: 1.5px solid rgba(249,115,22,0.4);
+    transform: translateY(-16px); opacity: 0; pointer-events: none;
+    transition: transform var(--t-slow) var(--ease-drawer), opacity var(--t-base);
+  }
+  .unlock-toast.show { transform: translateY(0); opacity: 1; }
+  .unlock-toast .ut-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
+  .unlock-toast .ut-t { font-size: var(--fs-base); font-weight: 800; }
+  .unlock-toast .ut-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 2px; }
+
+  /* 分享卡:可截图样式加强 */
+  .share-card.hero-share { padding: 24px 20px; }
+  .sc-streak { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.7); color: #7C2D12; font-size: var(--fs-xs); font-weight: 800; padding: 4px 11px; border-radius: var(--r-pill); margin-top: 12px; position: relative; }
+  .sc-ach { display: flex; gap: 8px; margin-top: 14px; position: relative; }
+  .sc-ach-item { flex: 1; text-align: center; background: rgba(255,255,255,0.55); border-radius: var(--r-md); padding: 9px 4px; }
+  .sc-ach-item .n { font-size: var(--fs-sm); font-weight: 800; color: #7C2D12; }
+  .sc-ach-item .l { font-size: 10px; color: rgba(124,45,18,0.55); margin-top: 2px; }
+
+  /* 成就徽章(放大 + 解锁动画) */
+  .bg-item .bg-ring svg { transition: transform var(--t-base) var(--ease-out); }
+  .bg-item:active .bg-ring svg { transform: scale(1.12) rotate(-6deg); }
+  @keyframes badgeUnlock { 0% { transform: scale(0.6) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
+  .bg-item.just-unlocked .bg-ring { animation: badgeUnlock .7s var(--ease-out); }
+
+  /* ===== 肠道问卷 / 9.9 陪跑 / D7 报告 ===== */
+  .qz-wrap { padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
+  .qz-prog { display: flex; align-items: center; gap: 8px; padding: 18px 20px 10px; }
+  .qz-prog .qp-bar { flex: 1; height: 5px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
+  .qz-prog .qp-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease-out); }
+  .qz-prog .qp-tx { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; flex: none; }
+  .qz-q { padding: 14px 0; }
+  .qz-q .qq-dim { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); letter-spacing: 0.5px; }
+  .qz-q .qq-t { font-size: var(--fs-lg); font-weight: 700; margin-top: 6px; line-height: 1.45; }
+  .qz-opts { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
+  .qz-opt {
+    display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: var(--r-md);
+    background: var(--surface); border: 1.5px solid var(--line); cursor: pointer;
+    transition: all var(--t-fast) var(--ease-out);
+  }
+  .qz-opt:active { transform: scale(0.98); }
+  .qz-opt.on { border-color: var(--brand); background: var(--brand-soft); }
+  .qz-opt .qo-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: flex; align-items: center; justify-content: center; }
+  .qz-opt.on .qo-dot { border-color: var(--brand); }
+  .qz-opt .qo-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
+  .qz-opt.on .qo-dot::after { background: var(--brand); }
+  .qz-opt .qo-t { flex: 1; font-size: var(--fs-base); font-weight: 600; }
+  .qz-opt .qo-s { font-size: var(--fs-sm); color: var(--ink-3); flex: none; }
+
+  /* 风险结果页 */
+  .risk-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
+  .risk-hero.low { background: linear-gradient(135deg, #EAF3DE, #C0DD97); }
+  .risk-hero.mid { background: linear-gradient(135deg, #FFF7ED, #FED7AA); }
+  .risk-hero.high { background: linear-gradient(135deg, #FCEBEB, #F7C1C1); }
+  .risk-hero .rh-score { font-size: 46px; font-weight: 800; line-height: 1; }
+  .risk-hero .rh-unit { font-size: var(--fs-base); font-weight: 600; opacity: 0.7; margin-top: 4px; }
+  .risk-hero .rh-lv { display: inline-block; margin-top: 12px; background: rgba(255,255,255,0.8); font-size: var(--fs-md); font-weight: 800; padding: 5px 16px; border-radius: var(--r-pill); }
+  .risk-hero .rh-tip { font-size: var(--fs-sm); margin-top: 10px; opacity: 0.8; }
+  .risk-factors { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
+  .rf-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 12px; }
+  .rf-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
+  .rf-row + .rf-row { border-top: 1px solid var(--line); }
+  .rf-row .rf-d { font-size: var(--fs-sm); color: var(--ink-2); flex: 1; }
+  .rf-row .rf-b { width: 56px; height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; flex: none; }
+  .rf-row .rf-b i { display: block; height: 100%; border-radius: var(--r-pill); }
+  .rf-row .rf-s { font-size: var(--fs-sm); font-weight: 700; width: 26px; text-align: right; flex: none; }
+
+  /* 9.9 陪跑 7 天 */
+  .prep-card { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; background: linear-gradient(135deg, #FFF7ED, #FFEDD5); box-shadow: var(--sh-2); color: #7C2D12; position: relative; overflow: hidden; }
+  .prep-card .pc-t { font-size: var(--fs-lg); font-weight: 800; }
+  .prep-card .pc-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 6px; line-height: 1.5; }
+  .prep-price { margin-top: 14px; display: flex; align-items: flex-end; gap: 10px; }
+  .prep-price .pp-n { font-size: 38px; font-weight: 800; line-height: 1; }
+  .prep-price .pp-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); padding-bottom: 5px; }
+  .prep-list { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 6px 16px; }
+  .prep-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; }
+  .prep-item + .prep-item { border-top: 1px solid var(--line); }
+  .prep-item .pi-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
+
+  /* 7 天打卡格 */
+  .d7-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; margin-top: 14px; }
+  .d7-cell { aspect-ratio: 1; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,0.55); color: rgba(124,45,18,0.4); }
+  .d7-cell.done { background: var(--brand); color: #fff; }
+  .d7-cell.today { outline: 2px solid var(--brand); outline-offset: 2px; color: #7C2D12; }
+  .d7-ach { display: flex; gap: 9px; margin-top: 16px; }
+  .d7-ach .da { flex: 1; background: rgba(255,255,255,0.62); border-radius: var(--r-md); padding: 11px 6px; text-align: center; }
+  .d7-ach .da .v { font-size: var(--fs-lg); font-weight: 800; }
+  .d7-ach .da .l { font-size: var(--fs-xs); color: rgba(124,45,18,0.65); margin-top: 2px; font-weight: 600; }
+
+  /* 变化曲线(报告内) */
+  .trend-box { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
+  .tb-row { padding: 12px 0; }
+  .tb-row + .tb-row { border-top: 1px solid var(--line); }
+  .tb-head { display: flex; align-items: baseline; justify-content: space-between; }
+  .tb-name { font-size: var(--fs-base); font-weight: 700; }
+  .tb-val { font-size: var(--fs-sm); font-weight: 800; }
+  .tb-spark { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 9px; }
+  .tb-spark i { flex: 1; background: var(--brand-soft); border-radius: 3px 3px 0 0; min-height: 4px; }
+  .tb-spark i.last { background: var(--brand); }
+  .tb-note { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 9px; line-height: 1.5; }
+
+  /* 发现卡(报告) */
+  .find-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px; }
+  .find-card .fc-h { display: flex; gap: 9px; align-items: flex-start; }
+  .find-card .fc-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
+  .find-card .fc-t { font-size: var(--fs-base); font-weight: 700; line-height: 1.4; }
+  .find-card .fc-obs { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 9px; line-height: 1.6; }
+  .find-card .fc-tip { margin-top: 10px; background: var(--brand-soft); border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-sm); color: var(--brand-ink); line-height: 1.55; font-weight: 600; }
+
+  /* 准备度 */
+  .chk-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
+  .chk-row + .chk-row { border-top: 1px solid var(--line); }
+  .chk-row .ck-ic { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
+  .chk-row.done .ck-ic { background: var(--ok); color: #fff; }
+  .chk-row.todo .ck-ic { background: var(--bg-soft); color: var(--ink-3); }
+  .chk-row .ck-t { flex: 1; font-size: var(--fs-base); font-weight: 600; }
+  .chk-row .ck-n { font-size: var(--fs-xs); color: var(--ink-3); }
+
+  /* 缺口对照 */
+  .gap-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .gap-col { border-radius: var(--r-md); padding: 13px; }
+  .gap-col .gc-h { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.5px; margin-bottom: 9px; }
+  .gap-col.know { background: var(--dim-action-soft); }
+  .gap-col.know .gc-h { color: var(--ok); }
+  .gap-col.unk { background: var(--bg-soft); }
+  .gap-col.unk .gc-h { color: var(--ink-3); }
+  .gap-col li { font-size: var(--fs-sm); line-height: 1.7; list-style: none; }
+
+  /* 检测行动卡 */
+  .buy-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
+  .buy-hd { padding: 16px; background: linear-gradient(135deg, #FFF7ED, #FFEDD5); color: #7C2D12; }
+  .buy-hd .bh-t { font-size: var(--fs-lg); font-weight: 800; }
+  .buy-hd .bh-p { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
+  .buy-hd .bh-n { font-size: 30px; font-weight: 800; }
+  .buy-hd .bh-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); }
+  .buy-hd .bh-o { font-size: var(--fs-sm); text-decoration: line-through; opacity: 0.6; margin-left: 4px; }
+  .buy-bd { padding: 6px 16px 16px; }
+  .buy-line { display: flex; align-items: center; gap: 9px; padding: 11px 0; font-size: var(--fs-sm); }
+  .buy-line + .buy-line { border-top: 1px solid var(--line); }
+  .buy-line .bl-t { flex: 1; color: var(--ink-2); }
+  .buy-line .bl-v { font-weight: 800; }
+  .installment { margin: 10px 16px 0; background: var(--brand-soft); border-radius: var(--r-md); padding: 13px 15px; display: flex; align-items: center; gap: 11px; }
+  .installment .in-n { font-size: var(--fs-md); font-weight: 800; color: var(--brand-ink); }
+  .installment .in-t { font-size: var(--fs-sm); color: var(--brand-ink); opacity: 0.85; margin-top: 2px; }
+  .why-now { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px; }
+  .why-now .wn-i { display: flex; gap: 10px; padding: 9px 0; align-items: flex-start; }
+  .why-now .wn-n { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
+  .why-now .wn-t { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
+  .why-now .wn-t b { color: var(--ink); }
+
+  .report-hd { padding: 22px 20px 6px; text-align: center; }
+  .report-hd .rph-big { font-size: 52px; font-weight: 800; line-height: 1; color: #7C2D12; }
+  .report-hd .rph-sub { font-size: var(--fs-base); color: rgba(124,45,18,0.75); margin-top: 8px; }
+  .report-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; background: linear-gradient(135deg, #FFF7ED, #FED7AA); box-shadow: var(--sh-2); position: relative; overflow: hidden; }
+  .report-hero .rp-t { font-size: var(--fs-xl); font-weight: 800; color: #7C2D12; }
+  .report-hero .rp-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.72); margin-top: 8px; line-height: 1.6; }
+  .legal { padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; text-align: center; }
+
+  @media (prefers-reduced-motion: reduce) {
+    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
+    .screen, .stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
+    .sp-c, .sp-logo, .sp-body, .sp-dim, .sp-dots span { animation: none !important; }
+  }
+  @media (max-width: 360px) {
+    .ring { width: 116px; height: 116px; }
+    .ring-wrap { gap: 12px; }
+  }
+</style>
+</head>
+<body>
+
+<!-- 演示态切换 -->
+<div class="demo-bar">
+  <button id="db-in" class="on">已登录</button>
+  <button id="db-out">未登录</button>
+</div>
+
+<div class="stage">
+  <div class="notch"></div>
+  <div class="statusbar">
+    <span id="clock">9:41</span>
+    <span class="sb-right">
+      <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"/><rect x="4.5" y="4.5" width="3" height="7.5" rx="1"/><rect x="9" y="2" width="3" height="10" rx="1"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg>
+      <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M8 2.4c2.2-1.8 5.3-1.4 6.6 1 .9 1.7.3 4-1.3 5.2C11.2 10.4 9.5 11 8 11 6.5 11 4.8 10.4 2.7 8.6 1.1 7.4.5 5.2 1.4 3.5 2.7 1.1 5.8.6 8 2.4Z"/></svg>
+      <svg width="24" height="12" viewBox="0 0 24 12" fill="currentColor"><rect x="1" y="1.5" width="19" height="9" rx="2.5"/><rect x="2.5" y="3" width="14" height="6" rx="1" fill="#fff"/><rect x="21" y="4" width="2" height="4" rx="1"/></svg>
+    </span>
+  </div>
+
+  <div class="app">
+    <!-- ============ 首页 / Root ============ -->
+    <div class="screen active" id="screen-home">
+      <div class="screen-scroll">
+        <div class="topbar">
+          <div class="tb-left">
+            <span class="tb-greet"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4.2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg> 晚上好,林晓</span>
+            <span class="tb-title">家庭主页</span>
+          </div>
+          <div class="tb-right">
+            <div class="member-switch">
+              <div class="mchip on" data-member="me" onclick="switchMember('me')"><span class="ava" style="background:#F97316">林</span><span class="nm">我</span></div>
+              <div class="mchip" data-member="yu" onclick="switchMember('yu')"><span class="ava" style="background:#FF7A45">宇</span><span class="nm">小宇</span></div>
+            </div>
+            <div class="icon-btn" onclick="toast('暂无新消息')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span class="badge"></span></div>
+          </div>
+        </div>
+
+        <!-- 能量英雄 -->
+        <div class="energy-hero" onclick="openDim()">
+          <div class="eh-top">
+            <div>
+              <div class="eh-label">全家五维能量</div>
+              <div class="eh-score" id="eh-score">78<small>分</small></div>
+              <div class="eh-sub" id="eh-sub">较上周 +4 · 身维度领先</div>
+            </div>
+            <div class="eh-link" onclick="event.stopPropagation();openOverview()">查看详情 ›</div>
+          </div>
+          <div class="ring-wrap">
+            <div class="ring" id="hero-ring"></div>
+            <div class="dim-bars" id="hero-bars"></div>
+          </div>
+        </div>
+
+        <!-- Next Best Action -->
+        <div class="nba" id="nba" onclick="openQuiz()">
+          <div class="nba-ic" style="background:var(--dim-body-soft);color:var(--dim-body)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg></div>
+          <div class="nba-info">
+            <div class="nba-t" id="nba-t">先做五维健康筛查</div>
+            <div class="nba-s" id="nba-s">肥胖 · 三高 · 痛风 · 便秘 · 腹泻 · 睡眠 · 过敏 · 免费</div>
+          </div>
+          <div class="nba-go">去评估 ›</div>
+        </div>
+
+        <div class="nba" onclick="openReport7()">
+          <div class="nba-ic" style="background:var(--brand-soft);color:var(--brand)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z"/><path d="M8 7h8M8 11h8M8 15h5"/></svg></div>
+          <div class="nba-info">
+            <div class="nba-t">查看 7 天准备报告</div>
+            <div class="nba-s">示例:饮食结构 4→7 · 准备度 80%</div>
+          </div>
+          <div class="nba-go">看报告 ›</div>
+        </div>
+
+        <!-- 今日任务 -->
+        <div class="section">
+          <div class="sec-head"><span class="sec-title">今日任务</span><span class="sec-more" onclick="toast('进入任务中心')">全部 ›</span></div>
+          <div class="card" id="task-card"></div>
+        </div>
+
+        <!-- 家庭挑战 -->
+        <div class="section">
+          <div class="sec-head"><span class="sec-title">家庭挑战</span><span class="sec-more" onclick="toast('管理挑战')">管理 ›</span></div>
+          <div class="card" id="challenge-card"></div>
+        </div>
+
+        <!-- 家庭动态 -->
+        <div class="section">
+          <div class="sec-head"><span class="sec-title">家庭动态</span></div>
+          <div class="card" id="feed-card"></div>
+        </div>
+
+        <!-- 推荐阅读 -->
+        <div class="section">
+          <div class="sec-head"><span class="sec-title">推荐阅读</span><span class="sec-more" onclick="toast('更多文章')">更多 ›</span></div>
+        </div>
+        <div class="hscroll" id="rec-scroll"></div>
+      </div>
+    </div>
+
+    <!-- ============ 健康 / Root ============ -->
+    <div class="screen" id="screen-health">
+      <div class="screen-scroll">
+        <div class="topbar">
+          <div class="tb-left"><span class="tb-greet">科学管理全家健康</span><span class="tb-title">健康</span></div>
+          <div class="tb-right"><div class="icon-btn" onclick="toast('健康洞察')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 16v-5M12 8h.01"/><circle cx="12" cy="12" r="9"/></svg></div></div>
+        </div>
+        <div class="seg">
+          <div class="sg on" onclick="setHealthSeg('body',this)">身体</div>
+          <div class="sg" onclick="setHealthSeg('cognitive',this)">认知</div>
+          <div class="sg" onclick="setHealthSeg('mental',this)">心理</div>
+          <div class="sg" onclick="setHealthSeg('wealth',this)">财富</div>
+        </div>
+        <div class="radar-card" id="radar-card"></div>
+        <div class="data-row">
+          <div class="data-col">
+            <div class="dc-t" style="cursor:pointer" onclick="openUpload('body')"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--dim-body)" stroke-width="2"><path d="M12 3v18M3 12h18"/><circle cx="12" cy="12" r="9"/></svg> 上传报告</div>
+            <div id="report-list"></div>
+          </div>
+          <div class="data-col">
+            <div class="dc-t"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--dim-wisdom)" stroke-width="2"><path d="M9 11l3 3 8-8"/><path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9"/></svg> 在线测评</div>
+            <div id="quiz-list"></div>
+          </div>
+        </div>
+        <div class="section"><div class="sec-head"><span class="sec-title">最近记录</span><span class="sec-more" onclick="toast('全部报告')">查看全部 ›</span></div></div>
+        <div class="hscroll" id="health-rec"></div>
+      </div>
+    </div>
+
+    <!-- ============ 成长 / Root ============ -->
+    <div class="screen" id="screen-growth">
+      <div class="screen-scroll">
+        <div class="topbar">
+          <div class="tb-left"><span class="tb-greet">看见改变正在发生</span><span class="tb-title">成长</span></div>
+          <div class="tb-right"><div class="icon-btn" onclick="toast('成长档案')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z"/><path d="M8 7h8M8 11h8M8 15h5"/></svg></div></div>
+        </div>
+        <div class="section">
+          <div class="ach-hero">
+            <div class="ah-t" id="ach-title">本周成果</div>
+            <div class="ah-s" id="ach-sub">完成 12 项任务 · 连续打卡 12 天</div>
+            <div class="ah-ring-wrap">
+              <div class="ah-ring" id="ach-ring"></div>
+              <div class="ah-stats">
+                <div class="ah-stat"><span class="as-v" id="ach-task-v">12</span><span class="as-l">项任务</span><span class="as-bar"><i id="ach-task-b" style="width:60%"></i></span></div>
+                <div class="ah-stat"><span class="as-v" style="color:var(--dim-wealth)">1,240</span><span class="as-l">成长分</span><span class="as-bar"><i id="ach-pt-b" style="width:72%;background:var(--dim-wealth)"></i></span></div>
+                <div class="ah-stat"><span class="as-v" style="color:var(--dim-wisdom)">4</span><span class="as-l">枚徽章</span><span class="as-bar"><i id="ach-bg-b" style="width:40%;background:var(--dim-wisdom)"></i></span></div>
+              </div>
+            </div>
+            <div class="streak" id="ach-streak"></div>
+          </div>
+        </div>
+        <div class="section">
+          <div class="nba" style="border-left-color:var(--dim-wealth);background:linear-gradient(135deg,#FFF7ED,#FFEDD5)" onclick="openReport()">
+            <div class="nba-ic" style="background:rgba(255,255,255,0.7);color:var(--dim-wealth)">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M8 4v16"/></svg>
+            </div>
+            <div class="nba-info">
+              <div class="nba-t" style="color:#7C2D12">本周成长报告已生成</div>
+              <div class="nba-s" style="color:rgba(124,45,18,0.7)">五维里程碑 · 可保存分享给家人朋友</div>
+            </div>
+            <div class="nba-go" style="color:#7C2D12">查看 ›</div>
+          </div>
+        </div>
+        <div class="section">
+          <div class="sec-head"><span class="sec-title">今日成长</span><span class="sec-more" id="growth-date">10-06</span></div>
+          <div class="card">
+            <div class="today-prog" id="today-prog"></div>
+            <div style="display:flex;justify-content:space-between;margin-top:14px;font-size:var(--fs-sm);color:var(--ink-2)">
+              <span id="growth-done">已完成 3/5</span><span style="color:var(--dim-mind);font-weight:600">🔥 连续 12 天</span>
+            </div>
+          </div>
+        </div>
+        <div class="section">
+          <div class="sec-head"><span class="sec-title">今日任务</span><span class="sec-more" onclick="toast('任务中心')">更多 ›</span></div>
+          <div class="card" style="padding-top:4px;padding-bottom:4px">
+            <div id="growth-tasks"></div>
+            <div id="growth-next" style="display:none;margin-top:6px;padding:13px 0 4px;border-top:1px dashed var(--line-strong)">
+              <div style="display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg>
+                再完成 <b id="next-n" style="color:var(--brand)">1</b> 项解锁「本周全勤」
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="section"><div class="sec-head"><span class="sec-title">家庭挑战</span></div></div>
+        <div class="hscroll" id="growth-rec"></div>
+      </div>
+    </div>
+
+    <!-- ============ 我的 / Root ============ -->
+    <div class="screen" id="screen-profile">
+      <div class="screen-scroll">
+        <div class="topbar" style="background:transparent;border:none;position:relative">
+          <div class="tb-left"><span class="tb-greet">照顾家庭,从照顾好自己开始</span><span class="tb-title">我的</span></div>
+          <div class="tb-right"><div class="icon-btn" onclick="toast('设置')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 2.6 14H2.5a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9 2.6V2.5a2 2 0 1 1 4 0v.1A1.6 1.6 0 0 0 17 4.6a1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 21.4 12H21.5a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg></div></div>
+        </div>
+        <div class="id-card">
+          <div class="id-ava">林</div>
+          <div class="id-meta">
+            <div class="id-nm">林晓 <span class="id-lv">黄金会员</span></div>
+            <div class="id-sub">家长 · 家庭创建者</div>
+          </div>
+          <div class="id-pts"><div class="pv">2,480</div><div class="pl">积分</div></div>
+        </div>
+
+        <div class="fam-strip" style="margin-top:16px">
+          <div class="fam-it"><div class="fam-av" style="background:#F97316">林<span class="fam-tag" style="background:#F97316">我</span></div><div class="fam-nm">林晓</div></div>
+          <div class="fam-it"><div class="fam-av" style="background:#FF7A45">宇<span class="fam-tag" style="background:#FF7A45">子</span></div><div class="fam-nm">小宇</div></div>
+          <div class="fam-it"><div class="fam-av" style="background:#F2588E">柚<span class="fam-tag" style="background:#F2588E">女</span></div><div class="fam-nm">小柚</div></div>
+          <div class="fam-it"><div class="fam-av" style="background:#12B981">爷<span class="fam-tag" style="background:#12B981">父</span></div><div class="fam-nm">爷爷</div></div>
+          <div class="fam-it" onclick="toast('添加成员')"><div class="fam-av add">+</div><div class="fam-nm">添加</div></div>
+        </div>
+
+        <div class="section">
+          <div class="sec-head"><span class="sec-title">我的成就</span></div>
+          <div class="card"><div class="ach-grid" id="ach-grid"></div></div>
+        </div>
+
+        <div class="section">
+          <div class="sec-head"><span class="sec-title">我的订单</span><span class="sec-more" onclick="toast('全部订单')">全部 ›</span></div>
+          <div class="card">
+            <div style="display:flex;justify-content:space-around;text-align:center">
+              <div class="tap" style="flex:1" onclick="toast('待付款')"><div style="font-size:var(--fs-lg);font-weight:800">1</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待付款</div></div>
+              <div class="tap" style="flex:1" onclick="toast('待发货')"><div style="font-size:var(--fs-lg);font-weight:800">0</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待发货</div></div>
+              <div class="tap" style="flex:1" onclick="toast('待收货')"><div style="font-size:var(--fs-lg);font-weight:800">2</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待收货</div></div>
+              <div class="tap" style="flex:1" onclick="toast('售后')"><div style="font-size:var(--fs-lg);font-weight:800">0</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">售后</div></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="section">
+          <div class="menu-list">
+            <div class="menu-row" onclick="toast('服务中心')"><div class="mr-ic" style="background:var(--dim-wisdom-soft);color:var(--dim-wisdom)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V8l7-4 7 4v13"/><path d="M9 21v-6h6v6"/></svg></div><div class="mr-tx">服务中心</div><div class="mr-ar">›</div></div>
+            <div class="menu-row" onclick="toast('我的报告')"><div class="mr-ic" style="background:var(--dim-body-soft);color:var(--dim-body)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></div><div class="mr-tx">我的报告</div><div class="mr-ar">›</div></div>
+            <div class="menu-row" onclick="toast('财富中心')"><div class="mr-ic" style="background:var(--dim-wealth-soft);color:var(--dim-wealth)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></div><div class="mr-tx">财富中心</div><div class="mr-ar">›</div></div>
+            <div class="menu-row" onclick="toast('设置')"><div class="mr-ic" style="background:var(--bg-soft);color:var(--ink-2)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 2.6 14H2.5a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9 2.6V2.5a2 2 0 1 1 4 0v.1A1.6 1.6 0 0 0 17 4.6a1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 21.4 12H21.5a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg></div><div class="mr-tx">设置</div><div class="mr-ar">›</div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ============ 登录(未登录根) ============ -->
+    <div class="screen" id="screen-login" style="display:none">
+      <div class="login">
+        <div class="lg-logo"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
+        <div class="lg-h">浠艾福</div>
+        <div class="lg-s">您的专属家庭五维健康管家<br/>先看见,先了解,不等问题发生</div>
+        <div class="lg-fields">
+          <div class="field"><span class="fc-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M4 7l8 6 8-6"/></svg></span><input placeholder="手机号 / 邮箱" inputmode="email" autocomplete="username" /></div>
+          <div class="field"><span class="fc-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span><input placeholder="密码" type="password" autocomplete="current-password" /></div>
+        </div>
+        <button class="lg-btn" onclick="demoLogin()">登录 / 注册</button>
+        <div class="lg-alt">还没有账号?<b onclick="demoLogin()">免费体验 ›</b></div>
+        <div class="lg-terms">登录即代表同意《用户协议》与《隐私政策》<br/>亿图腾科技出品</div>
+      </div>
+    </div>
+
+    <!-- ============ 五维能量总览(深读 · 全屏,隐藏 TabBar) ============ -->
+    <div class="screen" id="screen-overview">
+      <div class="screen-scroll" style="padding-bottom:24px">
+        <div class="nav-bar">
+          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
+          <div class="nb-t">五维能量总览</div>
+          <div class="nb-a" onclick="toast('切换到:本周')">本周</div>
+        </div>
+        <div class="ov-hero">
+          <div class="ov-score">
+            <div class="os-n" id="ov-n">76</div>
+            <div class="os-u">综合能量</div>
+            <div class="ov-delta" id="ov-delta">↑ 4 较上周</div>
+          </div>
+          <div class="ov-cap">全家 4 位成员 · 较上周整体向好,<b>行</b> 维度提升最明显</div>
+          <div class="ov-radar" id="ov-radar"></div>
+          <div class="ov-legend" id="ov-legend"></div>
+        </div>
+
+        <div class="trend-card">
+          <div class="trend-tabs" id="ov-trend-tabs">
+            <div class="tt on" data-range="week" onclick="setOvRange('week', this)">近 7 天</div>
+            <div class="tt" data-range="month" onclick="setOvRange('month', this)">近 30 天</div>
+          </div>
+          <div id="ov-trend"></div>
+          <div class="trend-legend" id="ov-trend-legend"></div>
+        </div>
+
+        <div class="sec-head section">
+          <div class="sec-title">家人对比</div>
+          <div class="sec-more" onclick="toast('查看全部成员')">全部 ›</div>
+        </div>
+        <div class="card cmp-list" id="ov-cmp"></div>
+
+        <div class="sec-head section">
+          <div class="sec-title">本月行动建议</div>
+          <div class="sec-more" onclick="toast('已生成专属计划')">生成计划 ›</div>
+        </div>
+        <div class="pad" id="ov-adv"></div>
+      </div>
+    </div>
+
+    <!-- ============ 维度详情(Task 页,隐藏 TabBar) ============ -->
+    <div class="screen" id="screen-dim">
+      <div class="screen-scroll" style="padding-bottom:24px">
+        <div class="nav-bar">
+          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
+          <div class="nb-t" id="dim-nav-title">维度详情</div>
+          <div class="nb-a" onclick="toast('切换成员')">小宇</div>
+        </div>
+        <div id="dim-hero-slot"></div>
+
+        <div class="sec-head section">
+          <div class="sec-title">关键指标</div>
+          <div class="sec-more" onclick="openUpload('body')">上传报告 ›</div>
+        </div>
+        <div class="card" id="dim-metrics"></div>
+
+        <div class="sec-head section">
+          <div class="sec-title">本周趋势</div>
+          <div class="sec-more" onclick="toast('查看历史')">历史 ›</div>
+        </div>
+        <div class="trend-card" style="margin-top:0" id="dim-trend"></div>
+
+        <div class="sec-head section">
+          <div class="sec-title">今日建议动作</div>
+        </div>
+        <div class="pad" id="dim-actions"></div>
+
+        <div class="sec-head section">
+          <div class="sec-title">最近记录</div>
+          <div class="sec-more" onclick="openUpload('')">补充数据 ›</div>
+        </div>
+        <div class="card" id="dim-records"></div>
+      </div>
+    </div>
+
+    <!-- ============ 报告上传流程(Task 页) ============ -->
+    <div class="screen" id="screen-upload">
+      <div class="screen-scroll" style="padding-bottom:0">
+        <div class="nav-bar">
+          <div class="nb-back" onclick="closeUpload()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
+          <div class="nb-t">上传健康报告</div>
+        </div>
+        <div class="up-steps" id="up-steps"></div>
+
+        <!-- 步骤1 选择 -->
+        <div id="up-step-pick">
+          <div class="up-zone" onclick="pickFile()">
+            <div class="uz-ic"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/></svg></div>
+            <div class="uz-t">拍照或选择报告图片</div>
+            <div class="uz-s">支持体检报告、化验单、影像报告<br/>自动识别关键指标,识别后可修改</div>
+          </div>
+          <div class="up-btns" style="padding:0 16px">
+            <div class="ub pri" onclick="pickFile()"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.4"/></svg>拍照</div>
+            <div class="ub" onclick="pickFile()"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 15l5-4 4 3 3-2 6 4"/></svg>相册</div>
+          </div>
+          <div class="sec-head section"><div class="sec-title">已上传待确认</div></div>
+          <div class="card" id="up-pending"></div>
+        </div>
+
+        <!-- 步骤2 识别中 -->
+        <div id="up-step-ocr" style="display:none">
+          <div class="up-preview">
+            <div class="up-thumb">
+              <div class="paper">
+                <div class="pl t"></div><div class="pl"></div><div class="pl"></div><div class="pl" style="width:70%"></div><div class="pl"></div><div class="pl" style="width:60%"></div>
+              </div>
+              <div class="badge-ok"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>已选</div>
+            </div>
+            <div class="up-meta">
+              <div class="up-fname"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>体检报告_20260928.jpg</div>
+              <div class="up-fmeta">2.4 MB · 等待识别解析</div>
+            </div>
+          </div>
+          <div class="ocr-box">
+            <div style="display:flex;align-items:center;gap:8px">
+              <div style="font-size:var(--fs-md);font-weight:700">正在智能识别</div>
+              <div style="margin-left:auto;font-size:var(--fs-sm);font-weight:800;color:var(--brand)" id="ocr-pct">0%</div>
+            </div>
+            <div class="ocr-bar"><div class="of" id="ocr-fill" style="width:0%"></div></div>
+            <div style="margin-top:10px" id="ocr-steps"></div>
+          </div>
+        </div>
+
+        <!-- 步骤3 确认 -->
+        <div id="up-step-fix" style="display:none">
+          <div class="ocr-box" style="margin-top:14px">
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
+              <div style="font-size:var(--fs-md);font-weight:700">识别结果确认</div>
+              <div style="margin-left:auto"><span class="low-conf">2 项需确认</span></div>
+            </div>
+            <div style="font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5">已自动填入 6 项指标,标黄项置信度低,请核对</div>
+          </div>
+          <div class="card" id="up-fix-list"></div>
+          <div class="card" style="background:var(--brand-soft);box-shadow:none">
+            <div style="display:flex;gap:10px;align-items:flex-start">
+              <div style="color:var(--brand);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></div>
+              <div>
+                <div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">数据仅用于家庭健康参考</div>
+                <div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.8;margin-top:4px;line-height:1.5">报告解读不构成医疗诊断,如有异常请及时就医</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 步骤4 完成 -->
+        <div id="up-step-done" style="display:none">
+          <div style="text-align:center;padding:40px 24px 20px">
+            <div style="width:88px;height:88px;border-radius:50%;background:var(--dim-action-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 18px">
+              <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>
+            </div>
+            <div style="font-size:var(--fs-xl);font-weight:800">报告已归档</div>
+            <div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:8px;line-height:1.6">已识别 6 项指标并计入「身」维度<br/>综合能量 <b style="color:var(--ok)">+3 分</b></div>
+          </div>
+          <div class="card" id="up-done-list"></div>
+        </div>
+      </div>
+      <div class="up-actions" id="up-actions"></div>
+    </div>
+
+    <!-- ============ 成长报告与分享(Task 页) ============ -->
+    <div class="screen" id="screen-report">
+      <div class="screen-scroll" style="padding-bottom:24px">
+        <div class="nav-bar">
+          <div class="nb-back" onclick="backTo('growth')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
+          <div class="nb-t">成长报告</div>
+          <div class="nb-a" onclick="toast('已保存为图片')">保存图片</div>
+        </div>
+        <div class="rpt-tabs" id="rpt-tabs">
+          <div class="rtt on" data-rp="week" onclick="setRptRange('week', this)">本周报告</div>
+          <div class="rtt" data-rp="month" onclick="setRptRange('month', this)">本月报告</div>
+        </div>
+        <div id="rpt-card-slot"></div>
+        <div class="share-actions" id="rpt-share"></div>
+
+        <div class="sec-head section">
+          <div class="sec-title">五维里程碑</div>
+          <div class="sec-more" onclick="toast('查看全部徽章')">全部 ›</div>
+        </div>
+        <div class="badge-grid" id="rpt-badges"></div>
+
+        <div class="sec-head section">
+          <div class="sec-title">本周亮点</div>
+        </div>
+        <div class="card" id="rpt-highlights"></div>
+      </div>
+    </div>
+
+    <!-- ============ 肠道问卷(0元入口) ============ -->
+    <div class="screen" id="screen-quiz">
+      <div class="screen-scroll" style="padding-bottom:0">
+        <div class="nav-bar">
+          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
+          <div class="nb-t">肠道健康自评</div>
+          <div class="nb-a" onclick="toast('免费 · 不需要付费')">免费</div>
+        </div>
+        <div class="qz-prog">
+          <div class="qp-bar"><i id="qz-bar" style="width:0%"></i></div>
+          <div class="qp-tx" id="qz-idx">1 / 10</div>
+        </div>
+        <div class="qz-wrap">
+          <div class="qz-q">
+            <div class="qq-dim" id="qz-dim"></div>
+            <div class="qq-t" id="qz-title"></div>
+            <div class="qz-opts" id="qz-opts"></div>
+          </div>
+        </div>
+        <div class="up-actions" id="qz-actions"></div>
+        <div class="legal" id="legal-note" style="display:none;padding-top:14px">
+          以下问题用于判断是否需要优先就医。本问卷为健康管理筛查参考,<b>不构成医疗诊断</b>。<br/>身体不适请到正规医疗机构就诊。
+        </div>
+      </div>
+    </div>
+
+    <!-- ============ 风险结果 + 9.9 陪跑转化 ============ -->
+    <div class="screen" id="screen-risk">
+      <div class="screen-scroll" style="padding-bottom:24px">
+        <div class="nav-bar">
+          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
+          <div class="nb-t">你的肠道风险评估</div>
+        </div>
+        <div id="risk-slot"></div>
+        <div id="prep-slot"></div>
+        <div id="risk-actions"></div>
+      </div>
+    </div>
+
+    <!-- ============ 9.9 陪跑 7 天 ============ -->
+    <div class="screen" id="screen-prep">
+      <div class="screen-scroll" style="padding-bottom:24px">
+        <div class="nav-bar">
+          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
+          <div class="nb-t">检测前 7 天准备</div>
+          <div class="nb-a" onclick="toast('9.9 未完成 3 天可退')">可退</div>
+        </div>
+        <div class="prep-card">
+          <div class="pc-t">检测前的肠道准备期</div>
+          <div class="pc-s">菌群检测有个前提:检测前 3–7 天不能有抗生素、不能大量摄入益生菌、饮食要稳定,否则数据会失真。<b>这 7 天需要有人带你调。</b></div>
+          <div class="prep-price"><span class="pp-n">9.9</span><span class="pp-u">元 · 7 天陪跑</span></div>
+          <div class="d7-grid" id="prep-d7"></div>
+          <div class="d7-ach">
+            <div class="da"><div class="v">6/7</div><div class="l">已完成</div></div>
+            <div class="da"><div class="v">4→7</div><div class="l">饮食结构</div></div>
+            <div class="da"><div class="v">80%</div><div class="l">准备度</div></div>
+          </div>
+        </div>
+        <div class="sec-head section"><div class="sec-title">这 7 天会做什么</div></div>
+        <div class="prep-list" id="prep-list"></div>
+        <div class="sec-head section">
+          <div class="sec-title">第 7 天你将拿到</div>
+        </div>
+        <div class="prep-list" id="prep-output"></div>
+        <div class="card" style="background:var(--brand-soft);box-shadow:none">
+          <div style="display:flex;gap:10px;align-items:flex-start">
+            <div style="color:var(--brand);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></div>
+            <div>
+              <div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">9.9 不打折,这是专业流程必需的一段</div>
+              <div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.82;margin-top:4px;line-height:1.55">检测本身由你自费(¥1980,可分期),我们赠送的是检测前的准备、检测后的专家解读与 90 天干预方案</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ============ D7 报告(转化关键) ============ -->
+    <div class="screen" id="screen-report7">
+      <div class="screen-scroll" style="padding-bottom:0">
+        <div class="nav-bar">
+          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
+          <div class="nb-t">你的第 7 天报告</div>
+          <div class="nb-a" onclick="toast('已保存为长图')">保存</div>
+        </div>
+
+        <!-- 屏1 成就 -->
+        <div class="report-hd">
+          <div class="rph-big">6/7</div>
+          <div class="rph-sub">你完成了 6 天的准备 · 超过 78% 的用户</div>
+        </div>
+        <div class="report-hero">
+          <div class="rp-t">检测这件事,七成功夫在检测之前</div>
+          <div class="rp-s">你这 7 天做的,正是那七成。<br/>把基础打好了,接下来才能看清肠道里的答案。</div>
+          <div class="d7-grid" style="margin-top:16px">
+            <div class="d7-cell done">一</div><div class="d7-cell done">二</div><div class="d7-cell done">三</div>
+            <div class="d7-cell done">四</div><div class="d7-cell done">五</div><div class="d7-cell done">六</div>
+            <div class="d7-cell" style="opacity:.35">日</div>
+          </div>
+        </div>
+
+        <!-- 屏2 数据 -->
+        <div class="sec-head section"><div class="sec-title">这 7 天的变化</div></div>
+        <div class="trend-box" id="d7-trend"></div>
+
+        <!-- 屏3 发现 -->
+        <div class="sec-head section"><div class="sec-title">3 个值得注意的模式</div></div>
+        <div id="d7-finds"></div>
+
+        <!-- 屏4 准备度 -->
+        <div class="sec-head section">
+          <div class="sec-title">检测准备度</div>
+          <div class="sec-more">4 / 5 项完成</div>
+        </div>
+        <div class="trend-box">
+          <div id="d7-checks"></div>
+          <div style="text-align:center;padding-top:14px;border-top:1px solid var(--line);margin-top:6px">
+            <div style="font-size:40px;font-weight:800;color:var(--brand)">80%</div>
+            <div style="font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px;font-weight:600">准备度良好,可以检测了</div>
+          </div>
+          <div class="find-card" style="margin:12px 0 0;box-shadow:none;background:var(--bg-soft)">
+            <div class="fc-obs" style="margin-top:0">还差最后一步:<b>检测前 24 小时请保持饮食清淡</b>,不要聚餐、不要大量摄入高纤维食品。完成这步,你的检测数据会更可靠。</div>
+          </div>
+        </div>
+
+        <!-- 屏5 缺口 -->
+        <div class="sec-head section"><div class="sec-title">这 7 天解决了基础,但回答不了根本</div></div>
+        <div class="gap-2col" style="margin:0 16px">
+          <div class="gap-col know"><div class="gc-h">你已知道</div>
+            <li>饮食结构在改善</li><li>腹胀在减轻</li><li>作息开始规律</li></div>
+          <div class="gap-col unk"><div class="gc-h">你还不知道</div>
+            <li>菌群多样性水平</li><li>哪些菌在减少</li><li>肠道问题根源</li></div>
+        </div>
+        <div class="find-card">
+          <div class="fc-obs">说到底,这 7 天你做的是<b>改善环境</b>。但环境变好了,<b>里面住着的东西变没变?</b></div>
+          <div class="fc-tip">单靠调整饮食,你是在盲调。检测,是把盲调变成精准调整的第一步。</div>
+        </div>
+
+        <!-- 屏6 行动 -->
+        <div class="sec-head section"><div class="sec-title">为什么现在做最合适</div></div>
+        <div class="why-now">
+          <div class="wn-i"><div class="wn-n">1</div><div class="wn-t">这 7 天的改善<b>能被检测看见</b>——如果拖到下个月再看,这 7 天的效果就看不出来了</div></div>
+          <div class="wn-i"><div class="wn-n">2</div><div class="wn-t">准备度已达 <b>80%</b>——再晚,检测前干扰因素会降低数据准确性</div></div>
+        </div>
+        <div class="buy-card">
+          <div class="buy-hd">
+            <div class="bh-t">肠道菌群检测</div>
+            <div class="bh-p"><span class="bh-n">¥1980</span><span class="bh-u">检测机构收取</span><span class="bh-o">已抵扣 9.9</span></div>
+          </div>
+          <div class="buy-bd">
+            <div class="buy-line"><span class="bl-t">采样盒</span><span class="bl-v" style="color:var(--ok)">免邮寄送</span></div>
+            <div class="buy-line"><span class="bl-t">专业机构检测 + 报告</span><span class="bl-v">含</span></div>
+            <div class="buy-line"><span class="bl-t">专家逐项解读(30 分钟)</span><span class="bl-v" style="color:var(--ok)">我们赠送</span></div>
+            <div class="buy-line"><span class="bl-t">90 天干预方案</span><span class="bl-v" style="color:var(--ok)">我们赠送</span></div>
+          </div>
+        </div>
+        <div class="installment">
+          <div style="color:var(--brand);flex:none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg></div>
+          <div><div class="in-n">可分期 · ¥660 × 3 期</div><div class="in-t">月付约 20 元 / 天,不收利息</div></div>
+        </div>
+        <div class="card">
+          <div style="display:flex;align-items:center;gap:9px;padding:6px 0;font-size:var(--fs-sm)">
+            <span style="color:var(--ok)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></span>
+            <span style="color:var(--ink-2)">检测前随时可退 · 检测后 48 小时内可退</span>
+          </div>
+          <div style="display:flex;align-items:center;gap:9px;padding:6px 0;font-size:var(--fs-sm)">
+            <span style="color:var(--ok)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></span>
+            <span style="color:var(--ink-2)">不需要自己去医院,采样盒寄回家</span>
+          </div>
+        </div>
+        <div class="up-actions">
+          <button class="btn-primary" onclick="toast('进入检测预约')">立即预约检测</button>
+          <button class="btn-ghost" onclick="backTo('home')">再想想</button>
+        </div>
+        <div class="legal">本报告基于健康管理目的生成,不构成医疗诊断或治疗建议<br/>肠道菌群检测为健康管理参考,不用于疾病诊断</div>
+      </div>
+    </div>
+
+    <!-- 五维抽屉 -->
+    <div class="sheet-mask" id="dim-mask" onclick="closeDim()"></div>
+    <div class="sheet" id="dim-sheet">
+      <div class="sheet-grip"></div>
+      <div class="sheet-title">五维能量</div>
+      <div class="sheet-sub">身·心·智·行·富,看见全家看得见的健康闭环</div>
+      <div class="dim-grid" id="dim-grid"></div>
+      <div id="dim-more" style="display:none;margin-top:14px">
+        <button class="btn-primary" style="display:flex;align-items:center;justify-content:center;gap:7px" onclick="openOverviewFromSheet()">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/></svg>
+          展开五维总览
+        </button>
+        <div style="text-align:center;font-size:var(--fs-xs);color:var(--ink-3);margin-top:10px">雷达 · 趋势 · 家人对比 · 行动建议</div>
+      </div>
+    </div>
+
+    <!-- 自定义 TabBar -->
+    <div class="tabbar" id="tabbar">
+      <div class="tab on" data-tab="home" onclick="setTab('home')">
+        <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/><path d="M9.5 21v-6h5v6"/></svg></span>
+        <span class="t-tx">首页</span>
+      </div>
+      <div class="tab" data-tab="health" onclick="setTab('health')">
+        <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20s-7-4.4-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.6 12 20 12 20z"/><path d="M5 12h3l2-3 2.5 4 1.5-2H20" stroke-width="1.6"/></svg></span>
+        <span class="t-tx">健康</span>
+      </div>
+      <div class="tab-center" onclick="openDim()">
+        <div class="c-btn"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
+        <div class="c-tx">五维</div>
+      </div>
+      <div class="tab" data-tab="growth" onclick="setTab('growth')">
+        <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/></svg></span>
+        <span class="t-tx">成长</span>
+      </div>
+      <div class="tab" data-tab="profile" onclick="setTab('profile')">
+        <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg></span>
+        <span class="t-tx">我的</span>
+      </div>
+    </div>
+
+    <div class="toast" id="toast"></div>
+
+    <!-- 成果解锁横幅(完成任务/达成成就时浮现) -->
+    <div class="unlock-toast" id="unlock-toast">
+      <div class="ut-ic" id="unlock-ic"></div>
+      <div style="flex:1;min-width:0">
+        <div class="ut-t" id="unlock-t">成就解锁</div>
+        <div class="ut-s" id="unlock-s"></div>
+      </div>
+      <div onclick="openReport()" style="flex:none;font-size:var(--fs-sm);font-weight:800;color:#7C2D12">分享 ›</div>
+    </div>
+
+    <!-- 闪屏(还原原 flash 页暖色基因,作为进入 App 的第一屏) -->
+    <div id="splash" onclick="hideSplash()">
+      <div class="sp-bg">
+        <span class="sp-c sp-c1"></span>
+        <span class="sp-c sp-c2"></span>
+        <span class="sp-c sp-c3"></span>
+      </div>
+      <div class="sp-body">
+        <div class="sp-logo"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
+        <div class="sp-name">浠艾福</div>
+        <div class="sp-en">Care Family</div>
+        <div class="sp-id">看见全家 · 了解健康 · 主动管理</div>
+        <div class="sp-dims">
+          <div class="sp-dim"><span class="sp-dc" style="background:#FF8C42">身</span></div>
+          <div class="sp-dim"><span class="sp-dc" style="background:#FF6B9D">心</span></div>
+          <div class="sp-dim"><span class="sp-dc" style="background:#6366F1">智</span></div>
+          <div class="sp-dim"><span class="sp-dc" style="background:#10B981">行</span></div>
+          <div class="sp-dim"><span class="sp-dc" style="background:#F59E0B">富</span></div>
+        </div>
+        <div class="sp-tag">家里每个人的状态,你真的看见了?</div>
+      </div>
+      <div class="sp-dots"><span></span><span></span><span></span></div>
+      <div class="sp-enter">轻触进入</div>
+    </div>
+  </div>
+</div>
+
+<script>
+  /* ============ 数据(演示,已去个人化) ============ */
+  var DIMS = [
+    { code:'body',   name:'身', desc:'主动健康', color:'var(--dim-body)',   soft:'var(--dim-body-soft)',   score:84 },
+    { code:'mind',   name:'心', desc:'大爱相随', color:'var(--dim-mind)',   soft:'var(--dim-mind-soft)',   score:72 },
+    { code:'wisdom', name:'智', desc:'赋能未来', color:'var(--dim-wisdom)', soft:'var(--dim-wisdom-soft)', score:79 },
+    { code:'action', name:'行', desc:'人际和谐', color:'var(--dim-action)', soft:'var(--dim-action-soft)', score:68 },
+    { code:'wealth', name:'富', desc:'利他创富', color:'var(--dim-wealth)', soft:'var(--dim-wealth-soft)', score:75 }
+  ];
+  var TASKS = [
+    { title:'陪小宇完成 20 分钟跳绳', pts:10, dim:'body' },
+    { title:'小柚英语绘本阅读', pts:8, dim:'wisdom' },
+    { title:'家庭晚餐不玩手机', pts:5, dim:'action' }
+  ];
+  var CHALLENGES = [
+    { title:'21 天亲子共读', prog:14, total:21, dim:'wisdom' },
+    { title:'全家每周运动 3 次', prog:2, total:3, dim:'body' }
+  ];
+  var FEED = [
+    { icon:'check', color:'var(--dim-body)', text:'<b>小宇</b> 完成「跳绳打卡」 +10 分', time:'12 分钟前' },
+    { icon:'star', color:'var(--dim-wisdom)', text:'<b>小柚</b> 认知测评得分 85', time:'1 小时前' },
+    { icon:'heart', color:'var(--dim-mind)', text:'<b>爷爷</b> 完成今日情绪打卡', time:'今天 08:30' }
+  ];
+  var RECS = [
+    { cat:'主动健康', c:1, t:'孩子挑食怎么办?3 个温和的引导法', meta:'1.2万 阅读', bg:'var(--dim-body)' },
+    { cat:'赋能未来', c:2, t:'0-12 岁专注力培养路线图', meta:'8621 阅读', bg:'var(--dim-wisdom)' },
+    { cat:'人际和谐', c:3, t:'把“你怎么又…”换成这样说话', meta:'1.5万 阅读', bg:'var(--dim-action)' },
+    { cat:'大爱相随', c:4, t:'父母的情绪,是家的天气', meta:'2.3万 阅读', bg:'var(--dim-mind)' }
+  ];
+  var ACH = [
+    { ic:'coin', c:'var(--dim-wealth)', v:'2480', l:'积分' },
+    { ic:'flame', c:'var(--dim-mind)', v:'12', l:'连续打卡' },
+    { ic:'check', c:'var(--brand)', v:'48', l:'完成任务' },
+    { ic:'gift', c:'var(--dim-wealth)', v:'9', l:'获得奖励' },
+    { ic:'medal', c:'var(--dim-mind)', v:'6', l:'勋章' },
+    { ic:'book', c:'var(--dim-action)', v:'23', l:'成长记录' },
+    { ic:'target', c:'var(--brand)', v:'3', l:'挑战' },
+    { ic:'upload', c:'var(--dim-body)', v:'11', l:'报告' }
+  ];
+  var PROG = [
+    { ic:'diet', c:'var(--dim-body)', l:'饮食记录', done:true },
+    { ic:'run', c:'var(--dim-body)', l:'运动打卡', done:true },
+    { ic:'moon', c:'var(--dim-mind)', l:'睡眠记录', done:true },
+    { ic:'smile', c:'var(--dim-mind)', l:'情绪打卡', done:false },
+    { ic:'bulb', c:'var(--dim-wisdom)', l:'专注练习', done:false },
+    { ic:'people', c:'var(--dim-action)', l:'互动记录', done:false }
+  ];
+
+  /* ===== 新增:五维总览 / 维度详情 / 上传 / 报告 数据 ===== */
+  var TREND = {
+    week: {
+      labels: ['周一','周二','周三','周四','周五','周六','周日'],
+      lines: [
+        { name:'综合', color:'var(--brand)', data:[72,73,75,74,76,75,76] },
+        { name:'身', color:'var(--dim-body)', data:[80,81,82,81,84,83,84] },
+        { name:'心', color:'var(--dim-mind)', data:[68,70,69,71,72,71,72] }
+      ]
+    },
+    month: {
+      labels: ['1日','5日','10日','15日','20日','25日','30日'],
+      lines: [
+        { name:'综合', color:'var(--brand)', data:[70,71,73,72,74,75,76] },
+        { name:'身', color:'var(--dim-body)', data:[78,79,81,80,82,83,84] },
+        { name:'心', color:'var(--dim-mind)', data:[66,68,67,70,71,71,72] }
+      ]
+    }
+  };
+  var FAMILY = [
+    { name:'小宇', role:'儿子 · 10 岁', score:84, color:'var(--dim-body)', dim:'body' },
+    { name:'小柚', role:'女儿 · 7 岁', score:79, color:'var(--dim-wisdom)', dim:'wisdom' },
+    { name:'爷爷', role:'父亲 · 68 岁', score:68, color:'var(--dim-action)', dim:'action' },
+    { name:'妈妈', role:'本人', score:72, color:'var(--dim-mind)', dim:'mind' }
+  ];
+  var ADVICE = [
+    { dim:'action', icon:'people', pri:'高', priColor:'var(--danger)', priSoft:'rgba(239,83,80,0.12)', t:'本周家庭互动偏少', s:'「行」维度 4 天未记录互动,建议每天 15 分钟无手机陪伴对话' },
+    { dim:'mind', icon:'moon', pri:'中', priColor:'#B45309', priSoft:'rgba(245,158,11,0.14)', t:'爷爷睡眠时长不足', s:'近 7 天平均 6.2 小时,建议固定就寝时间并晚间减少摄入' },
+    { dim:'body', icon:'run', pri:'中', priColor:'#B45309', priSoft:'rgba(245,245,158,0.6)', t:'小宇运动量达标', s:'本周运动 4 次达标,保持每周 3 次以上的节奏' }
+  ];
+  var DIM_METRICS = {
+    body: [
+      { n:'BMI', v:'18.6', r:'正常范围 18.5-23.9', ref:'ok', unit:'' },
+      { n:'血压', v:'112/68', r:'低于 120/80 理想值', ref:'ok', unit:'mmHg' },
+      { n:'静息心率', v:'72', r:'略高于同龄均值 68', ref:'mid', unit:'bpm' },
+      { n:'维生素 D', v:'22.4', r:'低于建议下限 30', ref:'hi', unit:'ng/mL' }
+    ],
+    mind: [
+      { n:'情绪稳定性', v:'72', r:'较上周 +5', ref:'ok', unit:'分' },
+      { n:'平均睡眠', v:'6.8', r:'低于建议 7-9 小时', ref:'mid', unit:'小时' },
+      { n:'压力感知', v:'偏高', r:'近 3 次自评持续偏高', ref:'hi', unit:'' }
+    ]
+  };
+  var DIM_ACTIONS = {
+    body: [
+      { t:'每日 6000 步', s:'今日已 4200 步,还差 1800 步', ic:'run', c:'var(--dim-body)' },
+      { t:'早餐补充优质蛋白', s:'鸡蛋 1 个 + 豆浆 250ml', ic:'diet', c:'var(--dim-body)' },
+      { t:'晒太阳 15 分钟', s:'维生素 D 偏低,建议上午户外', ic:'bulb', c:'var(--dim-action)' }
+    ],
+    mind: [
+      { t:'记录今日情绪', s:'30 秒快速打卡', ic:'smile', c:'var(--dim-mind)' },
+      { t:'4-7-8 呼吸练习', s:'睡前 3 轮,改善入睡', ic:'moon', c:'var(--dim-mind)' },
+      { t:'亲子对话 15 分钟', s:'放下手机,专心倾听', ic:'people', c:'var(--dim-action)' }
+    ]
+  };
+  var DIM_RECORDS = {
+    body: [
+      { t:'跳绳打卡', m:'今天 17:20 · 200 个', ic:'run', c:'var(--dim-body)' },
+      { t:'饮食记录', m:'今天 12:10 · 3 餐已记录', ic:'diet', c:'var(--dim-body)' },
+      { t:'体检报告解析', m:'9-28 · 6 项指标已归档', ic:'upload', c:'var(--dim-body)' }
+    ],
+    mind: [
+      { t:'情绪打卡', m:'今天 08:30 · 心情平稳', ic:'smile', c:'var(--dim-mind)' },
+      { t:'睡眠记录', m:'今天 07:10 · 7 小时 20 分', ic:'moon', c:'var(--dim-mind)' },
+      { t:'冥想练习', m:'昨天 21:40 · 8 分钟', ic:'flame', c:'var(--dim-mind)' }
+    ]
+  };
+  var BADGES = [
+    { n:'连续打卡 7 天', d:'已完成', ic:'flame', c:'var(--dim-mind)', locked:false },
+    { n:'五维首次全测', d:'已完成', ic:'check', c:'var(--dim-body)', locked:false },
+    { n:'亲子共读 21 天', d:'14/21 天', ic:'book', c:'var(--dim-wisdom)', locked:false },
+    { n:'运动达人', d:'本周 4 次达标', ic:'run', c:'var(--dim-action)', locked:false },
+    { n:'健康档案师', d:'上传 10 份报告', ic:'upload', c:'var(--dim-body)', locked:true },
+    { n:'财富启蒙', d:'完成 5 课', ic:'coin', c:'var(--dim-wealth)', locked:true }
+  ];
+  var OCR_STEPS = [
+    { t:'图像预处理与矫正', ms:400 },
+    { t:'定位表格与字段区域', ms:600 },
+    { t:'识别文字与数值', ms:900 },
+    { t:'匹配健康指标库', ms:500 }
+  ];
+  var FIX_FIELDS = [
+    { n:'身高', v:'142', u:'cm', low:true },
+    { n:'体重', v:'37.6', u:'kg', low:true },
+    { n:'收缩压', v:'112', u:'mmHg', low:false },
+    { n:'舒张压', v:'68', u:'mmHg', low:false },
+    { n:'静息心率', v:'72', u:'bpm', low:false },
+    { n:'血红蛋白', v:'132', u:'g/L', low:false }
+  ];
+
+  function svgUse(icon, size) {
+    return '<svg width="'+size+'" height="'+size+'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-'+icon+'"/></svg>';
+  }
+
+  /* ===== 五维能量环(5 段同心弧) ===== */
+  function buildRing(el, scores, size) {
+    var ns='http://www.w3.org/2000/svg';
+    var cx=size/2, cy=size/2;
+    var html='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">';
+    var gap=7, maxR=size/2-6;
+    scores.forEach(function(d,i){
+      var r=maxR-i*(gap+8);
+      var c=2*Math.PI*r;
+      var frac=Math.max(0.04, d.score/100);
+      html+='<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="7"/>';
+      html+='<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="none" stroke="'+d.color+'" stroke-width="7" stroke-linecap="round" '+
+            'stroke-dasharray="'+(c*frac)+' '+(c-c*frac)+'" transform="rotate(-90 '+cx+' '+cy+')" style="transition:stroke-dasharray .6s cubic-bezier(.23,1,.32,1)"/>';
+    });
+    html+='</svg>';
+    html+='<div class="ring-center"><div class="rc-val">'+ (Math.round(scores.reduce(function(s,d){return s+d.score},0)/scores.length)) +'</div><div class="rc-lab">综合能量</div></div>';
+    el.innerHTML=html;
+  }
+
+  /* ===== 渲染各模块 ===== */
+  function renderHome() {
+    buildRing(document.getElementById('hero-ring'), DIMS, 132);
+    var bars='';
+    DIMS.forEach(function(d){
+      bars+='<div class="dbar"><span class="dl">'+d.name+'</span><div class="dt"><div class="df" style="width:'+d.score+'%;background:'+d.color+'"></div></div><span class="dv">'+d.score+'</span></div>';
+    });
+    document.getElementById('hero-bars').innerHTML=bars;
+
+    var tc=document.getElementById('task-card');
+    if (!TASKS.length) {
+      tc.innerHTML='<div class="empty-state"><div class="es-ic">'+svgUse('check',28)+'</div><div class="es-t">今日任务已清空</div><div class="es-s">去任务中心看看,保持成长节奏</div></div>';
+    } else {
+      tc.className='card stagger';
+      tc.innerHTML=TASKS.map(function(t){
+        return '<div class="row"><div class="rk" style="background:'+dimSoft(t.dim)+';color:'+dimColor(t.dim)+'">'+svgUse('target',18)+'</div>'+
+          '<div class="ri"><div class="rt">'+t.title+'</div><div class="rm">+'+t.pts+' 成长分</div></div>'+
+          '<button class="pill-btn" onclick="completeTask(this)">完成</button></div>';
+      }).join('');
+    }
+
+    var cc=document.getElementById('challenge-card');
+    cc.className='card stagger';
+    cc.innerHTML=CHALLENGES.map(function(ch){
+      var pct=Math.round(ch.prog/ch.total*100);
+      return '<div class="row"><div class="rk" style="background:'+dimSoft(ch.dim)+';color:'+dimColor(ch.dim)+'">'+svgUse('target',18)+'</div>'+
+        '<div class="ri"><div class="rt">'+ch.title+'</div><div class="rm">'+ch.prog+' / '+ch.total+' · '+pct+'%</div>'+
+        '<div style="flex:1;height:6px;background:var(--bg-soft);border-radius:99px;margin-left:8px;max-width:80px"><div style="height:100%;width:'+pct+'%;background:'+dimColor(ch.dim)+';border-radius:99px"></div></div></div>';
+    }).join('');
+
+    document.getElementById('feed-card').innerHTML=FEED.map(function(f){
+      return '<div class="feed-item"><div class="feed-dot" style="color:'+f.color+'">'+svgUse(f.icon,16)+'</div>'+
+        '<div style="flex:1"><div class="fi-t">'+f.text+'</div><div class="fi-time">'+f.time+'</div></div></div>';
+    }).join('');
+
+    document.getElementById('rec-scroll').innerHTML=RECS.map(function(r){
+      return '<div class="rec-card" onclick="toast(\'打开文章\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+r.bg+','+r.bg+'99)"></div>'+
+        '<div class="rec-body"><span class="rec-cat" style="background:'+r.bg+'22;color:'+r.bg+'">'+r.cat+'</span>'+
+        '<div class="rec-tt">'+r.t+'</div><div class="rec-meta">'+r.meta+'</div></div></div>';
+    }).join('');
+  }
+
+  function renderHealth() {
+    // 简易雷达(六边形示意)
+    var size=240, cx=size/2, cy=size/2, R=size/2-30;
+    var labels=['生长','睡眠','视力','免疫','营养','运动'];
+    var vals=[84,72,78,80,70,82];
+    var n=labels.length, pts=[], pts2=[];
+    for (var i=0;i<n;i++){
+      var a=-Math.PI/2 + i*2*Math.PI/n;
+      pts.push((cx+Math.cos(a)*R).toFixed(1)+','+(cy+Math.sin(a)*R).toFixed(1));
+      pts2.push((cx+Math.cos(a)*R*vals[i]/100).toFixed(1)+','+(cy+Math.sin(a)*R*vals[i]/100).toFixed(1));
+    }
+    var grid='';
+    [0.25,0.5,0.75,1].forEach(function(f){
+      var p=[]; for(var i=0;i<n;i++){var a=-Math.PI/2+i*2*Math.PI/n; p.push((cx+Math.cos(a)*R*f).toFixed(1)+','+(cy+Math.sin(a)*R*f).toFixed(1));}
+      grid+='<polygon points="'+p.join(' ')+'" fill="none" stroke="#EAEDF4"/>';
+    });
+    var lbls='';
+    for(var i=0;i<n;i++){var a=-Math.PI/2+i*2*Math.PI/n; lbls+='<text x="'+(cx+Math.cos(a)*(R+16)).toFixed(1)+'" y="'+(cy+Math.sin(a)*(R+16)+4).toFixed(1)+'" font-size="10" fill="#B49A83" text-anchor="middle">'+labels[i]+'</text>';}
+    document.getElementById('radar-card').innerHTML=
+      '<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">'+grid+
+      '<polygon points="'+pts2.join(' ')+'" fill="rgba(255,140,66,0.18)" stroke="var(--dim-body)" stroke-width="2"/>'+
+      '<polygon points="'+pts.join(' ')+'" fill="none" stroke="#EAEDF4" stroke-width="1.5"/>'+lbls+'</svg>'+
+      '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px">身体维度 · 综合 78 分</div>';
+
+    document.getElementById('report-list').innerHTML=
+      '<div class="row" style="padding:10px 0"><div class="rk" style="background:var(--dim-body-soft);color:var(--dim-body)">'+svgUse('upload',16)+'</div><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">体检报告</div><div class="rm">9-28 已解析</div></div></div>'+
+      '<div class="row" style="padding:10px 0"><div class="rk" style="background:var(--dim-wisdom-soft);color:var(--dim-wisdom)">'+svgUse('bulb',16)+'</div><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">菌群检测</div><div class="rm">待确认</div></div></div>';
+
+    document.getElementById('quiz-list').innerHTML=
+      '<div class="row" style="padding:10px 0"><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">认知能力测评</div></div><button class="pill-btn" onclick="toast(\'开始测评\')">开始</button></div>'+
+      '<div class="row" style="padding:10px 0"><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">心理健康测评</div></div><button class="pill-btn" onclick="toast(\'开始测评\')">开始</button></div>';
+
+    document.getElementById('health-rec').innerHTML=RECS.slice(0,3).map(function(r){
+      return '<div class="rec-card" onclick="toast(\'查看报告\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+r.bg+','+r.bg+'99)"></div><div class="rec-body"><span class="rec-cat" style="background:'+r.bg+'22;color:'+r.bg+'">'+r.cat+'</span><div class="rec-tt">'+r.t+'</div><div class="rec-meta">'+r.meta+'</div></div></div>';
+    }).join('');
+  }
+
+  /* ===== 成果状态(可累积,驱动继续完成) ===== */
+  var growthState={ doneTasks:{}, baseTasks:12, streak:12, pts:1240, unlocked:false };
+  var WEEK_DAYS=['一','二','三','四','五','六','日'];
+
+  function renderGrowth() {
+    document.getElementById('today-prog').innerHTML=PROG.map(function(p,i){
+      return '<div class="tp-item" onclick="toast(\''+(p.done?'已记录':'去记录')+'\')"><div class="tp-ic" style="background:'+p.c+'1a;color:'+p.c+'">'+svgUse(p.ic,18)+'</div>'+
+        '<div style="flex:1"><div class="tp-l">'+p.l+'</div><div class="tp-st '+(p.done?'done':'pend')+'">'+(p.done?'已完成':'去记录')+'</div></div></div>';
+    }).join('');
+
+    renderGrowthTasks();
+    renderGrowthRec();
+    renderAchievementHero();
+  }
+
+  function renderGrowthTasks(){
+    var html=TASKS.map(function(t,i){
+      var done=!!growthState.doneTasks[i];
+      return '<div class="task-item'+(done?' done just-done':'')+'" data-i="'+i+'">'+
+        '<button class="tk-ck" onclick="doCompleteTask('+i+', this)">'+(done?checkSvg():'')+'</button>'+
+        '<div class="tk-bd"><div class="tk-t">'+t.title+'</div>'+
+        '<div class="tk-m"><span>'+(done?'已完成 · 家人可看到':'小宇 · 待完成')+'</span></div></div>'+
+        '<div class="tk-pts">+'+t.pts+'</div></div>';
+    }).join('');
+    document.getElementById('growth-tasks').innerHTML=html;
+    // 已完成数量与"再完成N项"驱动
+    var doneN=Object.keys(growthState.doneTasks).length;
+    var total=TASKS.length;
+    var next=document.getElementById('growth-next');
+    if (doneN>0 && doneN<total){
+      next.style.display='block';
+      document.getElementById('next-n').textContent=(total-doneN);
+    } else if (doneN>=total){
+      next.style.display='block';
+      document.getElementById('next-n').textContent='0';
+      next.querySelector('div').lastChild.textContent=' 全部完成,成果已解锁 🎉';
+    } else {
+      next.style.display='none';
+    }
+    // 清理 just-done 动画类
+    setTimeout(function(){
+      document.querySelectorAll('#growth-tasks .just-done').forEach(function(el){ el.classList.remove('just-done'); });
+    }, 1200);
+  }
+  function checkSvg(){
+    return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>';
+  }
+
+  function doCompleteTask(i, btn){
+    if (growthState.doneTasks[i]) return;
+    growthState.doneTasks[i]=true;
+    var t=TASKS[i];
+    growthState.pts += t.pts;
+    renderGrowthTasks();
+    renderAchievementHero();
+    var doneN=Object.keys(growthState.doneTasks).length;
+
+    if (!growthState.unlocked && doneN>=2){
+      growthState.unlocked=true;
+      setTimeout(function(){ showUnlock('star','成就解锁 · 本周全勤','已连续完成 2 项任务,坚持就是复利'); }, 420);
+    } else {
+      toast('完成「'+t.title+'」 · 成长分 +'+t.pts);
+    }
+  }
+
+  function renderGrowthRec(){
+    document.getElementById('growth-rec').innerHTML=CHALLENGES.map(function(ch){
+      var pct=Math.round(ch.prog/ch.total*100);
+      return '<div class="rec-card" style="width:200px" onclick="toast(\'挑战详情\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+dimColor(ch.dim)+','+dimColor(ch.dim)+'99);height:70px"></div>'+
+        '<div class="rec-body"><div class="rec-tt">'+ch.title+'</div><div class="rec-meta">'+ch.prog+'/'+ch.total+' · '+pct+'%</div></div></div>';
+    }).join('');
+  }
+
+  /* 成果环 + 连击 + 进度条 */
+  function renderAchievementHero(){
+    var total=growthState.baseTasks + Object.keys(growthState.doneTasks).length;
+    var pct=Math.min(1, growthState.baseTasks/total);
+    var size=116, sw=10, r=(size-sw)/2, c=2*Math.PI*r;
+    var ring='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">'+
+      '<circle cx="'+size/2+'" cy="'+size/2+'" r="'+r+'" fill="none" stroke="rgba(124,45,18,0.12)" stroke-width="'+sw+'"/>'+
+      '<circle cx="'+size/2+'" cy="'+size/2+'" r="'+r+'" fill="none" stroke="var(--brand)" stroke-width="'+sw+'" stroke-linecap="round" stroke-dasharray="'+(c*pct).toFixed(1)+' '+(c-c*pct).toFixed(1)+'" transform="rotate(-90 '+size/2+' '+size/2+')" style="transition:stroke-dasharray .7s cubic-bezier(.23,1,.32,1)"/></svg>'+
+      '<div class="ah-c"><div class="n">'+growthState.baseTasks+'</div><div class="l">本周任务</div></div>';
+    var el=document.getElementById('ach-ring');
+    if (el) el.innerHTML=ring;
+
+    var taskPct=Math.min(100, growthState.baseTasks/16*100);
+    document.getElementById('ach-task-v').textContent=growthState.baseTasks;
+    document.getElementById('ach-task-b').style.width=taskPct+'%';
+    document.getElementById('ach-pt-b').style.width=Math.min(100, growthState.pts/1800*100)+'%';
+    document.getElementById('ach-bg-b').style.width=(growthState.unlocked? '53%':'40%')+'%';
+    document.getElementById('ach-sub').textContent='完成 '+growthState.baseTasks+' 项任务 · 连续打卡 '+growthState.streak+' 天';
+    document.getElementById('ach-title').textContent=growthState.unlocked?'本周成果 · 已解锁全勤':'本周成果';
+
+    // 连击 7 天
+    var sh='';
+    for (var i=0;i<7;i++){
+      var done=i<6 || (i===6 && true); // 今天待点亮
+      var cls=i===6? 'today' : (done?'done':'');
+      sh+='<div class="sd '+cls+'"><div class="dot">'+(i===6?svgUse('flame',15):(done?svgUse('check',15):''))+'</div><div class="dl">'+WEEK_DAYS[i]+'</div></div>';
+    }
+    document.getElementById('ach-streak').innerHTML=sh;
+  }
+
+  /* 解锁横幅 */
+  var unlockTimer;
+  function showUnlock(icon, title, sub){
+    document.getElementById('unlock-ic').innerHTML=svgUse(icon,20);
+    document.getElementById('unlock-t').textContent=title;
+    document.getElementById('unlock-s').textContent=sub;
+    var el=document.getElementById('unlock-toast');
+    el.classList.add('show');
+    clearTimeout(unlockTimer);
+    unlockTimer=setTimeout(function(){ el.classList.remove('show'); }, 2600);
+  }
+
+  function renderProfile() {
+    document.getElementById('ach-grid').innerHTML=ACH.map(function(a){
+      return '<div class="ach"><div class="ai" style="background:'+a.c+'1a;color:'+a.c+'">'+svgUse(a.ic,18)+'</div><div class="av">'+a.v+'</div><div class="al">'+a.l+'</div></div>';
+    }).join('');
+  }
+
+  function renderDimSheet() {
+    document.getElementById('dim-grid').innerHTML=DIMS.map(function(d){
+      return '<div class="dim-tile" style="background:'+d.soft+'" onclick="openDimFromSheet(\''+d.code+'\')">'+
+        '<div class="dt-ic" style="background:'+d.color+'">'+svgUse('star',20)+'</div>'+
+        '<div class="dt-nm">'+d.name+' · '+d.desc+'</div>'+
+        '<div class="dt-sc" style="color:'+d.color+'">'+d.score+' 分</div>'+
+        '<div class="dt-track"><div class="dt-fill" style="width:'+d.score+'%;background:'+d.color+'"></div></div></div>';
+    }).join('');
+    var more=document.getElementById('dim-more');
+    if (more) more.style.display='block';
+  }
+  function openDimFromSheet(code){
+    closeDim();
+    setTimeout(function(){ openDimDetail(code); }, 180);
+  }
+  function openOverviewFromSheet(){
+    closeDim();
+    setTimeout(function(){ openOverview(); }, 180);
+  }
+
+  function dimColor(code){ var d=DIMS.find(function(x){return x.code===code}); return d?d.color:'var(--brand)'; }
+  function dimSoft(code){ var d=DIMS.find(function(x){return x.code===code}); return d?d.soft:'var(--brand-soft)'; }
+  function dimByCode(code){ return DIMS.find(function(x){return x.code===code}) || DIMS[0]; }
+
+  /* ===== 肠道问卷 / 风险分级 / 9.9 陪跑 / D7 报告 ===== */
+  /* 红旗筛查(必答前置,命中即转就医) */
+  var REDFLAG=[
+    { t:'最近是否有便血、黑便,或大便带黏液、脓血?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
+    { t:'近半年是否有非刻意的体重下降(超过 4 公斤)?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
+    { t:'是否有过持续发热(体温超过 37.3℃)伴随排便异常?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
+    { t:'是否存在夜间腹泻,或腹痛把你痛醒?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
+    { t:'近一年是否出现过缺铁性贫血,或长期乏力头晕?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
+    { t:'一级亲属是否有结直肠癌、炎症性肠病或肠易激综合征?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
+    { t:'是否有胸痛、胸闷、心悸,或活动后气促?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
+    { t:'是否出现过一侧肢体麻木无力、言语不清或口角歪斜?', opts:[{t:'没有',s:0},{t:'有',s:1}] },
+    { t:'是否已有心脑血管疾病、糖尿病或肾病的诊断?', opts:[{t:'没有',s:0},{t:'有',s:1}] }
+  ];
+  /* 基础信息 */
+  var BASIC={ gender:'', h:'', w:'', waist:'' };
+  /* 五大模块(条件跳转) */
+  var MODULES={
+    weight:{ name:'肥胖 / 体重', color:'var(--dim-body)', max:7, qs:[
+      { t:'近一年你的体重变化', opts:[{t:'基本稳定',s:0},{t:'上升 1–3 公斤',s:1},{t:'上升超过 4 公斤',s:2},{t:'减重后反弹',s:2}] },
+      { t:'是否尝试过减重', opts:[{t:'没有尝试',s:0},{t:'试过但没坚持',s:1},{t:'反复减反复反弹',s:2}] },
+      { t:'日常主要困扰', opts:[{t:'没有明显困扰',s:0},{t:'爬楼气喘',s:1},{t:'睡眠打鼾',s:2},{t:'关节不适',s:1},{t:'容易乏力',s:1}] }
+    ]},
+    consti:{ name:'便秘', color:'var(--dim-wealth)', max:8, qs:[
+      { t:'近 3 个月你的排便次数', opts:[{t:'每周不超过 2 次',s:2},{t:'每周 3–6 次',s:1},{t:'每天 1–2 次',s:0},{t:'每天超过 2 次',s:0}] },
+      { t:'粪便性状(参考布里斯托分型)', opts:[{t:'干球状或硬便',s:2},{t:'正常成形',s:0},{t:'稀软不成形',s:0}] },
+      { t:'排便时是否费力、有不尽感或梗阻感', opts:[{t:'从不',s:0},{t:'偶尔',s:1},{t:'经常',s:2}] },
+      { t:'是否需要手法辅助才能排出', opts:[{t:'不需要',s:0},{t:'偶尔',s:1},{t:'经常',s:2}] }
+    ]},
+    diarrhea:{ name:'腹泻', color:'var(--dim-mind)', max:10, qs:[
+      { t:'近 4 周你的每日排便次数', opts:[{t:'每天不超过 2 次',s:0},{t:'3 次',s:1},{t:'4 次以上',s:2},{t:'6 次以上',s:3}] },
+      { t:'粪便性状', opts:[{t:'正常成形',s:0},{t:'糊状',s:1},{t:'水样',s:2},{t:'油亮有油花',s:2}] },
+      { t:'是否伴有腹痛、里急后重或黏液', opts:[{t:'都没有',s:0},{t:'轻微腹痛',s:1},{t:'明显腹痛或里急后重',s:2},{t:'带黏液',s:1}] }
+    ]},
+    sleep:{ name:'睡眠', color:'var(--dim-wisdom)', max:8, qs:[
+      { t:'你的平均睡眠时长', opts:[{t:'7–9 小时',s:0},{t:'6–7 小时',s:1},{t:'不足 6 小时',s:2},{t:'超过 9 小时',s:1}] },
+      { t:'入睡是否困难(超过 30 分钟)', opts:[{t:'不困难',s:0},{t:'偶尔',s:1},{t:'几乎每晚',s:2}] },
+      { t:'夜间醒来次数', opts:[{t:'没有',s:0},{t:'1 次',s:1},{t:'2 次以上',s:2}] },
+      { t:'是否打鼾,或被告知呼吸暂停', opts:[{t:'都不',s:0},{t:'打鼾但无暂停',s:1},{t:'有呼吸暂停',s:2}] }
+    ]},
+    allergy:{ name:'过敏', color:'var(--dim-action)', max:8, qs:[
+      { t:'是否有湿疹、皮肤瘙痒或反复皮疹', opts:[{t:'没有',s:0},{t:'偶尔',s:1},{t:'反复',s:2}] },
+      { t:'是否有阵发喷嚏、鼻塞、清水鼻涕', opts:[{t:'没有',s:0},{t:'季节性',s:1},{t:'常年',s:2}] },
+      { t:'是否有过喘息或呼吸困难(非运动诱发)', opts:[{t:'没有',s:0},{t:'有过',s:2}] },
+      { t:'是否存在食物不耐受或食物过敏', opts:[{t:'没有',s:0},{t:'1 类食物',s:1},{t:'2 类以上',s:2}] }
+    ]},
+    bp:{ name:'血压', color:'var(--danger)', max:9, chronic:true, qs:[
+      { t:'是否被医生告知过血压偏高或高血压', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊高血压',s:2}] },
+      { t:'近一年是否规律测量血压', opts:[{t:'每月固定测量',s:0},{t:'偶尔测',s:1},{t:'从不测',s:2}] },
+      { t:'最近一次血压大概是多少', opts:[{t:'正常或没测过',s:0},{t:'120–139 或 80–89',s:1},{t:'140–159 或 90–99',s:2},{t:'≥160 或 ≥100',s:3}] },
+      { t:'是否正在服用降压药', opts:[{t:'未被告知需服药',s:0},{t:'正在服药',s:2}] }
+    ]},
+    glu:{ name:'血糖', color:'var(--dim-wealth)', max:9, chronic:true, qs:[
+      { t:'是否被医生告知过血糖偏高或糖尿病', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊',s:2}] },
+      { t:'近一年是否做过空腹血糖或糖化血红蛋白检查', opts:[{t:'每年都做',s:0},{t:'做过但不定期',s:1},{t:'从未做过',s:2}] },
+      { t:'已知空腹血糖是多少(mmol/L)', opts:[{t:'不知道或未测',s:0},{t:'低于 6.1',s:0},{t:'6.1–6.9',s:2},{t:'≥ 7.0',s:3}] },
+      { t:'是否正在服用降糖药或使用胰岛素', opts:[{t:'没有',s:0},{t:'有',s:2}] }
+    ]},
+    lip:{ name:'血脂', color:'var(--dim-action)', max:6, chronic:true, qs:[
+      { t:'近一年是否做过血脂四项检查', opts:[{t:'每年都做',s:0},{t:'做过但不定期',s:1},{t:'从未做过',s:2}] },
+      { t:'是否被告知血脂异常或胆固醇高', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:1},{t:'已确诊',s:2}] },
+      { t:'已知结果', opts:[{t:'都正常',s:0},{t:'低密度脂蛋白偏高',s:2},{t:'甘油三酯偏高',s:2},{t:'总胆固醇偏高',s:1}] }
+    ]},
+    ua:{ name:'尿酸 / 痛风', color:'var(--dim-mind)', max:11, chronic:true, qs:[
+      { t:'是否被医生告知过尿酸偏高或痛风', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊痛风',s:3}] },
+      { t:'已知血尿酸是多少(μmol/L)', opts:[{t:'不知道或未测',s:0},{t:'低于 420',s:0},{t:'420–479',s:2},{t:'≥ 480',s:3}] },
+      { t:'是否有过单侧关节红肿热痛发作(尤其足大拇指关节)', opts:[{t:'没有',s:0},{t:'有过 1 次',s:2},{t:'反复发作',s:3}] },
+      { t:'是否正在服用降尿酸药物', opts:[{t:'没有',s:0},{t:'有',s:2}] }
+    ]}
+  };
+  var qzState={ phase:'flag', i:0, flagPicks:[], modPicks:{}, active:[], done:false, result:null };
+
+  function qzPhaseList(){
+    if (qzState.phase==='flag') return REDFLAG;
+    if (qzState.phase==='basic') return [];
+    var m=MODULES[qzState.active[qzState.i]];
+    return m ? m.qs : [];
+  }
+  function curDimName(){
+    if (qzState.phase==='flag') return '安全筛查';
+    if (qzState.phase==='basic') return '基础信息';
+    var m=MODULES[qzState.active[qzState.i]];
+    return m ? m.name : '';
+  }
+
+  function renderQuiz(){
+    var wrap=document.getElementById('qz-wrap');
+    if (qzState.phase==='basic'){ renderBasic(); return; }
+    var list=qzPhaseList(), q=list[qzState.i];
+    var total=qzState.phase==='flag'?REDFLAG.length:MODULES[qzState.active[qzState.i]].qs.length;
+    var globalDone = qzState.phase==='flag'? qzState.i : qzState.i;
+    document.getElementById('qz-bar').style.width=(globalDone/total*100)+'%';
+    document.getElementById('qz-idx').textContent=(globalDone+1)+' / '+total;
+    var dimEl=document.getElementById('qz-dim');
+    dimEl.textContent = qzState.phase==='flag' ? '第一步 · 安全筛查(必答)' : ('维度 · '+curDimName());
+    dimEl.style.color = qzState.phase==='flag' ? 'var(--danger)' : 'var(--brand)';
+    document.getElementById('qz-title').textContent=q.t;
+    var picked = qzState.phase==='flag'? qzState.flagPicks[qzState.i] : (qzState.modPicks[qzState.active[qzState.i]]||[])[qzState.i];
+    document.getElementById('qz-opts').innerHTML=q.opts.map(function(o,oi){
+      return '<div class="qz-opt'+(picked===oi?' on':'')+'" data-oi="'+oi+'" onclick="pickQ('+oi+')">'+
+        '<span class="qo-dot"></span><span class="qo-t">'+o.t+'</span>'+(o.s>0?'<span class="qo-s">+'+o.s+'</span>':'')+'</div>';
+    }).join('');
+    var isLast = (qzState.i===total-1);
+    var acts=document.getElementById('qz-actions');
+    acts.innerHTML = isLast
+      ? '<button class="btn-primary" onclick="nextQ()">完成本组</button>'
+      : '<button class="btn-primary" disabled style="opacity:.45">请选择一项</button>';
+    if (picked!==undefined){ enableNext(acts, isLast); }
+    document.getElementById('legal-note').style.display = qzState.phase==='flag' ? 'block' : 'none';
+  }
+  function enableNext(acts, isLast){
+    var btn=acts.querySelector('.btn-primary');
+    btn.disabled=false; btn.style.opacity='1';
+    btn.textContent = isLast ? '完成本组' : '下一题';
+    btn.onclick=nextQ;
+  }
+  function renderBasic(){
+    document.getElementById('qz-bar').style.width='100%';
+    document.getElementById('qz-idx').textContent='基础信息';
+    var dimEl=document.getElementById('qz-dim');
+    dimEl.textContent='第二步 · 基础信息';
+    dimEl.style.color='var(--brand)';
+    document.getElementById('qz-title').innerHTML='为了让评估更准确,请填写基础信息';
+    var g=BASIC.gender;
+    document.getElementById('qz-opts').innerHTML=
+      '<div style="display:flex;gap:10px;margin-bottom:14px">'+
+      ['男','女'].map(function(x){ return '<div class="qz-opt'+(g===x?' on':'')+'" style="flex:1" onclick="pickGender(\''+x+'\')">'+
+        '<span class="qo-dot"></span><span class="qo-t">'+x+'</span></div>'; }).join('')+'</div>'+
+      '<div style="display:flex;gap:10px">'+
+      '<div class="field" style="flex:1"><span class="fc-ic">身高</span><input inputmode="decimal" placeholder="cm" value="'+BASIC.h+'" oninput="setBasic(\'h\',this.value)"/></div>'+
+      '<div class="field" style="flex:1"><span class="fc-ic">体重</span><input inputmode="decimal" placeholder="kg" value="'+BASIC.w+'" oninput="setBasic(\'w\',this.value)"/></div>'+
+      '<div class="field" style="flex:1"><span class="fc-ic">腰围</span><input inputmode="decimal" placeholder="cm" value="'+BASIC.waist+'" oninput="setBasic(\'waist\',this.value)"/></div>'+
+      '</div>'+
+      '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:10px;line-height:1.5">腰围请在肚脐水平量一圈。用于判断中心型肥胖(男 ≥90cm,女 ≥85cm)。</div>';
+    var acts=document.getElementById('qz-actions');
+    acts.innerHTML='<button class="btn-primary" onclick="decideModules()">继续</button>';
+    document.getElementById('legal-note').style.display='block';
+  }
+  function pickGender(x){ BASIC.gender=x; renderBasic(); }
+  function setBasic(k,v){ BASIC[k]=v; }
+
+  function pickQ(oi){
+    if (qzState.phase==='flag'){ qzState.flagPicks[qzState.i]=oi; }
+    else {
+      var k=qzState.active[qzState.i];
+      if(!qzState.modPicks[k]) qzState.modPicks[k]=[];
+      qzState.modPicks[k][qzState.i]=oi;
+    }
+    document.querySelectorAll('#qz-opts .qz-opt').forEach(function(el){ el.classList.toggle('on', +el.dataset.oi===oi); });
+    enableNext(document.getElementById('qz-actions'), false);
+  }
+  function nextQ(){
+    var list=qzPhaseList();
+    if (qzState.i<list.length-1){ qzState.i++; renderQuiz(); return; }
+    // 本组完成
+    if (qzState.phase==='flag'){
+      var hit=qzState.flagPicks.some(function(p){ return p===1; });
+      if (hit){ qzState.done=true; renderRedFlagHit(); return; }
+      qzState.phase='basic'; qzState.i=0; renderBasic(); return;
+    }
+    qzState.i++;
+    if (qzState.i<qzState.active.length){ renderQuiz(); }
+    else {
+      showRisk();
+      TASK_SCREENS.forEach(function(s){
+        var el=document.getElementById('screen-'+s);
+        if (el) el.classList.remove('active');
+      });
+      document.getElementById('screen-risk').classList.add('active');
+    }
+  }
+  function decideModules(){
+    var h=parseFloat(BASIC.h), w=parseFloat(BASIC.w), waist=parseFloat(BASIC.waist);
+    var bmi = (h>0 && w>0)? (w/((h/100)*(h/100))) : 0;
+    var waistBad = waist>0 && ((BASIC.gender==='男'&&waist>=90)||(BASIC.gender==='女'&&waist>=85));
+    var order=['weight','consti','diarrhea','sleep','allergy','bp','glu','lip','ua'];
+    qzState.active=order;
+    qzState.phase='module'; qzState.i=0; renderQuiz();
+  }
+
+  function modScore(key){
+    var m=MODULES[key], picks=qzState.modPicks[key]||[], n=0;
+    m.qs.forEach(function(q,i){ if(picks[i]!==undefined) n+=q.opts[picks[i]].s; });
+    return n;
+  }
+  function moduleLevel(key){
+    var m=MODULES[key], v=modScore(key), r=v/m.max;
+    if (r>=0.55) return {n:'需关注', c:'var(--danger)'};
+    if (r>=0.3) return {n:'中度', c:'var(--warn)'};
+    if (v>0) return {n:'轻度', c:'var(--dim-wealth)'};
+    return {n:'良好', c:'var(--ok)'};
+  }
+
+  function renderRedFlagHit(){
+    var hits=[];
+    REDFLAG.forEach(function(q,i){ if(qzState.flagPicks[i]===1) hits.push(q.t); });
+    var cardio = qzState.flagPicks[6]===1 || qzState.flagPicks[7]===1 || qzState.flagPicks[8]===1;
+    var dept = cardio ? '心内科 / 全科医学科' : '消化内科';
+    document.getElementById('qz-bar').style.width='100%';
+    document.getElementById('qz-idx').textContent='安全筛查';
+    document.getElementById('qz-dim').textContent='筛查结果';
+    document.getElementById('qz-dim').style.color='var(--danger)';
+    document.getElementById('qz-title').innerHTML='建议优先到正规医院就诊';
+    var h='<div class="card" style="border-left:4px solid var(--danger)">'+
+      '<div style="display:flex;gap:10px;align-items:flex-start;margin-bottom:12px">'+
+      '<span style="color:var(--danger);flex:none;margin-top:1px">'+svgUse('alert',18)+'</span>'+
+      '<div><div style="font-size:var(--fs-md);font-weight:800;color:var(--danger)">你描述的情况需要优先明确原因</div>'+
+      '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px;line-height:1.6">以下情况属于医学上建议优先就诊的信号,我们的服务不能替代医学诊断:</div></div></div>';
+    hits.forEach(function(t){
+      h+='<div style="display:flex;gap:8px;padding:8px 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5">'+
+        '<span style="color:var(--danger);flex:none">·</span><span>'+t+'</span></div>';
+    });
+    h+='<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6">'+
+      '建议挂<b>'+dept+'</b>。如症状明显或持续加重,请尽快就医。<br/>'+
+      '<span style="color:var(--ink-3);font-size:var(--fs-xs)">明确原因后,如果需要长期健康管理,我们再陪你做下一步。</span></div></div>';
+    document.getElementById('qz-opts').innerHTML=h;
+    document.getElementById('qz-actions').innerHTML='<button class="btn-primary" onclick="backTo(\'home\')">我知道了</button>';
+    document.getElementById('legal-note').style.display='block';
+  }
+
+  function showRisk(){
+    var keys=qzState.active.slice();
+    var chronicKeys=['bp','glu','lip','ua'];
+    var funcKeys=['weight','consti','diarrhea','sleep','allergy'];
+    function pick(list){ return list.map(function(k){ return {k:k, v:modScore(k), m:MODULES[k]}; }); }
+
+    // 功能性五维(决定商业转化)
+    var funcScored=pick(funcKeys).filter(function(x){ return x.v>0; })
+                    .sort(function(a,b){ return b.v/b.m.max - a.v/a.m.max; });
+    // 慢病四维(管理状态,不参与商业决策)
+    var chronicScored=pick(chronicKeys).filter(function(x){ return x.v>0; })
+                    .sort(function(a,b){ return b.v/b.m.max - a.v/a.m.max; });
+    var chronicHigh=chronicScored.filter(function(x){
+      var p=x.v/x.m.max; return p>=0.55 || x.v>=4;
+    });
+
+    var h=parseFloat(BASIC.h), w=parseFloat(BASIC.w);
+    var bmi=(h>0&&w>0)? (w/((h/100)*(h/100))) : 0;
+    var bmiTag = bmi>=28 ? {t:'肥胖症范畴', c:'var(--danger)'} : (bmi>=24? {t:'超重', c:'var(--warn)'} : null);
+
+    var hiN=0, midN=0;
+    funcScored.forEach(function(x){
+      var lv=moduleLevel(x.k);
+      if(lv.n==='需关注') hiN++;
+      else if(lv.n==='中度') midN++;
+    });
+    var overall = (hiN>=1||midN>=2)? 'high' : (midN>=1? 'mid' : 'low');
+
+    var conf = { low:{n:'低风险', s:'暂时不需要检测', t:'你的情况目前以作息和饮食调整为主。先做三件事,3 个月后我们提醒你复评。'},
+                 mid:{n:'中风险', s:'建议做一次检测', t:'有几个维度需要注意。一次检测能帮你明确方向,少走弯路。'},
+                 high:{n:'高风险', s:'建议尽快检测', t:'你的部分维度需要重点关注,建议尽早做一次检测看看具体方向。'} };
+    var c=conf[overall];
+
+    var top=funcScored.length? funcScored[0].m.name : '无明显异常';
+    var hero='<div class="risk-hero '+overall+'">'+
+      '<div class="rh-score" style="font-size:34px">'+c.n+'</div>'+
+      '<div class="rh-unit">'+c.s+'</div>'+
+      '<div class="rh-lv">优先关注:'+top+'</div>'+
+      '<div class="rh-tip">'+c.t+'</div></div>';
+
+    // 慢病优先提示(若有)
+    var chWarn='';
+    if (chronicHigh.length){
+      var names=chronicHigh.map(function(x){ return x.m.name; }).join('、');
+      chWarn='<div class="card" style="border-left:4px solid var(--danger)">'+
+        '<div style="display:flex;gap:10px;align-items:flex-start">'+
+        '<span style="color:var(--danger);flex:none;margin-top:1px">'+svgUse('alert',18)+'</span>'+
+        '<div><div style="font-size:var(--fs-md);font-weight:800;color:var(--danger)">你的 '+names+' 需要优先关注</div>'+
+        '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px;line-height:1.6">这几个维度的规范管理是「医生方案 + 生活方式」。<b>请遵医嘱定期随诊</b>,我们只能提供生活方式配合建议,不能替代治疗方案,也不建议自行调整用药。</div></div></div>'+
+        '<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line)">'+
+        chronicHigh.map(function(x){
+          var q=x.m.qs, picks=qzState.modPicks[x.k]||[];
+          var tips=[];
+          q.forEach(function(qq,i){ if(picks[i]>0) tips.push(qq.opts[picks[i]].t); });
+          return '<div style="padding:6px 0;font-size:var(--fs-sm);color:var(--ink-2)"><b style="color:var(--ink)">'+x.m.name+':</b>'+tips.slice(0,2).join(';')+'</div>';
+        }).join('')+
+        '</div></div>';
+    }
+
+    // 九维得分(分两组)
+    function dimRows(list){
+      var out='';
+      list.forEach(function(k){
+        var m=MODULES[k], v=modScore(k), lv=moduleLevel(k);
+        var pct=Math.round(v/m.max*100);
+        out+='<div class="rf-row" onclick="toast(\''+m.name+':'+v+' 分 · '+lv.n+'\')">'+
+          '<span class="rf-d">'+m.name+(bmiTag&&k==='weight'&&bmiTag?'('+bmiTag.t+')':'')+'</span>'+
+          '<span class="rf-b"><i style="width:'+pct+'%;background:'+lv.c+'"></i></span>'+
+          '<span class="rf-s" style="color:'+lv.c+'">'+v+'</span></div>';
+      });
+      return out;
+    }
+    var fh='<div class="risk-factors"><div class="rf-title">消化 · 代谢 · 睡眠 · 过敏</div>'+dimRows(funcKeys)+'</div>'+
+      '<div class="risk-factors"><div class="rf-title">三高 · 尿酸(管理状态)</div>'+dimRows(chronicKeys)+
+      '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);line-height:1.55">'+
+      '这几项为已知的健康指标状态,<b>不能替代医生的诊断与方案</b>。指尖血糖仪测值不能作为糖尿病诊断依据,需静脉血浆血糖。</div></div>';
+
+    var note='<div class="card"><div style="display:flex;gap:10px;align-items:flex-start">'+
+      '<span style="color:var(--ink-3);flex:none;margin-top:1px">'+svgUse('shield',17)+'</span>'+
+      '<div><div style="font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)">本评估为健康管理筛查参考</div>'+
+      '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:5px;line-height:1.6">不构成医疗诊断,也不替代医生的治疗方案。身体不适请到正规医疗机构就诊。</div></div></div></div>';
+
+    document.getElementById('risk-slot').innerHTML=hero+chWarn+fh+note;
+    qzState.result={overall:overall, topKey:funcScored.length?funcScored[0].k:'weight', chronic:chronicHigh.length>0};
+    renderPrepBlock(overall);
+  }
+
+  function renderPrepBlock(lv){
+    var slot=document.getElementById('prep-slot'), act=document.getElementById('risk-actions');
+    var chronic = qzState.result && qzState.result.chronic;
+    if (lv==='low'){
+      slot.innerHTML='<div class="card"><div style="display:flex;gap:10px;align-items:flex-start">'+
+        '<div style="color:var(--ok);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></div>'+
+        '<div><div style="font-size:var(--fs-base);font-weight:700">我们不建议你现在花钱做检测</div>'+
+        '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:5px;line-height:1.6">先按下面三件事做,3 个月后我们提醒你复评。</div></div></div>'+
+        '<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line)">'+
+        prepRow('check','固定三餐时间,晚餐 7 点前结束')+
+        prepRow('leaf','每天一份发酵食品(无糖酸奶 / 泡菜)')+
+        prepRow('run','每周 3 次、每次 30 分钟快走')+
+        '</div></div>';
+      act.innerHTML='<div class="up-actions"><button class="btn-primary" onclick="toast(\'已加入 3 个月后复评提醒\')">3 个月后提醒我复评</button><button class="btn-ghost" onclick="backTo(\'home\')">返回首页</button></div>';
+      return;
+    }
+    var push = lv==='high'
+      ? '你的部分症状与肠道环境可能相关,检测能帮你明确主因。'
+      : '一次检测能帮你明确方向,少走弯路。';
+    // 慢病用户:弱化销售,强调配合
+    var head = chronic
+      ? '<div class="pc-t">配合医生方案的生活方式准备</div>'
+      : '<div class="pc-t">检测前的肠道准备期</div>';
+    var desc = chronic
+      ? '<div class="pc-s">你的血压 / 血糖 / 血脂 / 尿酸中有需要重点关注的项。<b>请先遵医嘱随诊</b>。这段时间我们能做的,是帮你把饮食与作息配合起来——这是生活方式管理,不是治疗。</div>'
+      : '<div class="pc-s">菌群检测有个前提:检测前 3–7 天不能有抗生素、不能大量摄入益生菌、饮食要稳定,否则数据会失真。<b>这 7 天需要有人带你调。</b></div>';
+    var priceNote = chronic
+      ? '<div style="font-size:var(--fs-xs);color:rgba(124,45,18,0.7);margin-top:8px;line-height:1.5">说明:我们<b>不建议</b>已确诊的用户自行调整用药或用检测替代复诊。检测与解读仅作参考。</div>'
+      : '';
+    slot.innerHTML='<div class="sec-head section"><div class="sec-title">'+(chronic?'建议:先配合医生,再做生活方式管理':'建议:检测前先做 7 天准备')+'</div></div>'+
+      '<div class="prep-card">'+head+desc+
+      '<div class="prep-price"><span class="pp-n">9.9</span><span class="pp-u">元 · 7 天陪跑</span></div>'+priceNote+'</div>'+
+      '<div class="card" style="margin-top:14px;background:var(--brand-soft);box-shadow:none">'+
+      '<div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">'+(chronic?'遵医嘱是首要的':'检测本身由你自费(¥1980,可分期)')+'</div>'+
+      '<div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.85;margin-top:6px;line-height:1.55">'+(chronic?'我们提供的是饮食与作息调整建议,配合你的既有治疗方案。':'我们赠送的是<b>检测前准备、检测后专家解读、90 天干预方案</b>。')+'</div></div>';
+    act.innerHTML='<div class="up-actions"><button class="btn-primary" onclick="openPrep()">9.9 元 · 开始 7 天准备</button>'+
+      '<button class="btn-ghost" onclick="toast(\'直接检测:¥1980,可分期\')">'+(chronic?'先去做正规复查':'跳过准备,直接预约检测')+'</button></div>';
+  }
+  function prepRow(ic,t){
+    return '<div class="prep-item"><span class="pi-ic" style="background:var(--dim-action-soft);color:var(--ok)">'+svgUse(ic,16)+'</span>'+
+      '<span style="flex:1;font-size:var(--fs-sm);font-weight:600">'+t+'</span></div>';
+  }
+
+  function renderPrepPage(){
+    var days=['一','二','三','四','五','六','日'];
+    var h='';
+    for(var i=0;i<7;i++){
+      h+='<div class="d7-cell'+(i<6?' done':'')+'">'+days[i]+'</div>';
+    }
+    document.getElementById('prep-d7').innerHTML=h;
+    var tasks=[
+      {ic:'diet',c:'var(--dim-body)',t:'记录三餐全貌 + 建立准备档案',s:'10 分钟'},
+      {ic:'target',c:'var(--dim-action)',t:'停用益生菌 / 补剂,改为发酵食品',s:'5 分钟'},
+      {ic:'leaf',c:'var(--dim-body)',t:'调整精制碳水,晚餐加一份蔬菜',s:'15 分钟'},
+      {ic:'smile',c:'var(--dim-mind)',t:'记录症状(腹胀 / 排便)与情绪',s:'5 分钟'},
+      {ic:'bulb',c:'var(--dim-wisdom)',t:'建立固定进餐时间',s:'10 分钟'},
+      {ic:'check',c:'var(--dim-action)',t:'复核是否误食抗生素类药物',s:'5 分钟'},
+      {ic:'upload',c:'var(--brand)',t:'生成准备度报告 + 支付检测',s:'10 分钟'}
+    ];
+    document.getElementById('prep-list').innerHTML=tasks.map(function(t){
+      return '<div class="prep-item"><span class="pi-ic" style="background:'+t.c+'1a;color:'+t.c+'">'+svgUse(t.ic,16)+'</span>'+
+        '<span style="flex:1"><span style="display:block;font-size:var(--fs-base);font-weight:600">'+t.t+'</span>'+
+        '<span style="display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px">约 '+t.s+'</span></span></div>';
+    }).join('');
+    document.getElementById('prep-output').innerHTML=
+      '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('chart',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">7 天饮食结构分析 + 变化曲线</span></div>'+
+      '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('smile',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">症状与情绪趋势变化</span></div>'+
+      '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('target',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">检测前注意事项清单</span></div>'+
+      '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('bulb',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">五维能量基线档案</span></div>';
+  }
+
+  function renderD7(){
+    var trends=[
+      { n:'饮食结构评分', v:'4 → 7', col:'var(--brand)', data:[28,38,48,58,68,78,88], note:'精制碳水占比下降、膳食纤维上升,这对肠道环境是有益的调整。' },
+      { n:'腹胀发生频次', v:'每周 4 次 → 1 次', col:'var(--dim-mind)', data:[82,70,58,48,38,30,22], note:'腹胀频次明显下降,说明你的消化负担在减轻。' },
+      { n:'排便规律度', v:'不规律 → 基本规律', col:'var(--dim-action)', data:[24,32,44,56,68,78,86], note:'规律性改善通常与菌群多样性正相关,值得进一步了解原因。' }
+    ];
+    document.getElementById('d7-trend').innerHTML=trends.map(function(t){
+      return '<div class="tb-row"><div class="tb-head"><span class="tb-name">'+t.n+'</span>'+
+        '<span class="tb-val" style="color:'+t.col+'">'+t.v+'</span></div>'+
+        '<div class="tb-spark">'+t.data.map(function(d,i){ return '<i class="'+(i===t.data.length-1?'last':'')+'" style="height:'+d+'%;background:'+(i===t.data.length-1?t.col:'')+'"></i>'; }).join('')+'</div>'+
+        '<div class="tb-note">'+t.note+'</div></div>';
+    }).join('');
+
+    var finds=[
+      { ic:'chart', c:'var(--brand)', t:'你的症状与饮食结构高度相关',
+        obs:'你这 7 天里,饮食结构得分高的第 2、4、6 天,腹胀都没有出现;得分低的第 1、3 天,腹胀出现 2 次。',
+        tip:'这个规律在很多人身上都成立。想知道自己肠道里到底发生了什么,检测能给你答案。' },
+      { ic:'upload', c:'var(--dim-body)', t:'你的用药史可能影响菌群',
+        obs:'你在问卷中提到近 3 个月使用过抑酸类药物。这类药物会改变消化道环境,也可能影响菌群检测结果的准确性。',
+        tip:'这正是我们建议你先调 7 天再测的原因。你已经完成了大部分准备,只差最后一步。' },
+      { ic:'smile', c:'var(--dim-mind)', t:'情绪与肠道互相牵连',
+        obs:'你这 7 天里,情绪打卡与腹胀记录出现了 3 次同步波动。',
+        tip:'肠道与情绪是双向影响的。菌群状况可能是这条链路的关键一环。' }
+    ];
+    document.getElementById('d7-finds').innerHTML=finds.map(function(f){
+      return '<div class="find-card"><div class="fc-h">'+
+        '<span class="fc-ic" style="background:'+f.c+'1a;color:'+f.c+'">'+svgUse(f.ic,16)+'</span>'+
+        '<span class="fc-t">'+f.t+'</span></div>'+
+        '<div class="fc-obs">'+f.obs+'</div>'+
+        '<div class="fc-tip">'+f.tip+'</div></div>';
+    }).join('');
+
+    var checks=[
+      { t:'停用益生菌 / 补剂', n:'第 2 天起完成', done:true },
+      { t:'确认近 3 天无抗生素类药物', n:'请自行核对', done:false },
+      { t:'饮食结构稳定', n:'精制碳水已降低', done:true },
+      { t:'进餐时间规律', n:'连续 6 天固定', done:true },
+      { t:'检测前 24 小时饮食清淡', n:'检测当天执行', done:false }
+    ];
+    document.getElementById('d7-checks').innerHTML=checks.map(function(c){
+      return '<div class="chk-row '+(c.done?'done':'todo')+'">'+
+        '<span class="ck-ic">'+(c.done?svgUse('check',13):svgUse('clock',13))+'</span>'+
+        '<span class="ck-t">'+c.t+'</span><span class="ck-n">'+c.n+'</span></div>';
+    }).join('');
+  }
+  function openQuiz(){
+    qzState={ phase:'flag', i:0, flagPicks:[], modPicks:{}, active:[], done:false, result:null };
+    BASIC={ gender:'', h:'', w:'', waist:'' };
+    renderQuiz();
+    pushScreen('quiz');
+  }
+  function openRisk(){ showRisk(); pushScreen('risk'); }
+  function openPrep(){
+    renderPrepPage();
+    pushScreen('prep');
+  }
+  function openReport7(){
+    renderD7();
+    pushScreen('report7');
+  }
+
+  /* ===== 折线图(趋势) ===== */
+  function buildLineChart(el, cfg, w, h) {
+    var pad=8, maxV=100, minV=55;
+    var n=cfg.labels.length, all=[];
+    cfg.lines.forEach(function(l){ all=all.concat(l.data); });
+    var hi=Math.max.apply(null, all), lo=Math.min.apply(null, all);
+    hi=Math.min(100, Math.ceil((hi+4)/5)*5); lo=Math.max(0, Math.floor((lo-6)/5)*5);
+    var svg='<svg viewBox="0 0 '+w+' '+h+'" width="100%" height="'+h+'" preserveAspectRatio="none" style="overflow:visible">';
+    // 网格 + 标签
+    for(var g=0; g<=3; g++){
+      var gy=pad+g*((h-pad*2)/3);
+      svg+='<line x1="0" y1="'+gy.toFixed(1)+'" x2="'+w+'" y2="'+gy.toFixed(1)+'" stroke="var(--line)" stroke-width="1"/>';
+      svg+='<text x="0" y="'+(gy-4).toFixed(1)+'" font-size="9" fill="#B49A83">'+Math.round(hi-(hi-lo)*(g/3))+'</text>';
+    }
+    cfg.labels.forEach(function(l,i){
+      var lx=pad+i*((w-pad*2)/(n-1));
+      svg+='<text x="'+lx.toFixed(1)+'" y="'+(h-1)+'" font-size="9.5" fill="#B49A83" text-anchor="middle">'+l+'</text>';
+    });
+    function px(i){ return pad+i*((w-pad*2)/(n-1)); }
+    function py(v){ return pad+(hi-v)/(hi-lo)*((h-pad*2)); }
+    cfg.lines.forEach(function(l){
+      var pts=l.data.map(function(v,i){ return px(i).toFixed(1)+','+py(v).toFixed(1); });
+      var area=pts.join(' ')+','+px(n-1).toFixed(1)+','+h+','+px(0).toFixed(1)+','+h;
+      svg+='<polygon points="'+area+'" fill="'+l.color+'" opacity="0.08"/>';
+      svg+='<polyline points="'+pts.join(' ')+'" fill="none" stroke="'+l.color+'" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>';
+      l.data.forEach(function(v,i){
+        var last=(i===l.data.length-1);
+        svg+='<circle cx="'+px(i).toFixed(1)+'" cy="'+py(v).toFixed(1)+'" r="'+(last?4:2.6)+'" fill="#fff" stroke="'+l.color+'" stroke-width="2"/>';
+      });
+    });
+    svg+='</svg>';
+    el.innerHTML=svg;
+  }
+
+  /* ===== 五维总览:雷达(含家人两轮对比) ===== */
+  function buildRadarCompare(el, size) {
+    var cx=size/2, cy=size/2, R=size/2-30, n=DIMS.length;
+    function pt(i, ratio){
+      var a=-Math.PI/2+i*2*Math.PI/n;
+      return [cx+Math.cos(a)*R*ratio, cy+Math.sin(a)*R*ratio];
+    }
+    var svg='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">';
+    [0.25,0.5,0.75,1].forEach(function(r){
+      var p=DIMS.map(function(d,i){ return pt(i,r).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
+      svg+='<polygon points="'+p+'" fill="none" stroke="var(--line)" stroke-width="1"/>';
+    });
+    for(var i=0;i<n;i++){
+      var e=pt(i,1);
+      svg+='<line x1="'+cx+'" y1="'+cy+'" x2="'+e[0].toFixed(1)+'" y2="'+e[1].toFixed(1)+'" stroke="var(--line)" stroke-width="1"/>';
+    }
+    // 自家
+    var mine=DIMS.map(function(d,i){ return pt(i, d.score/100).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
+    svg+='<polygon points="'+mine+'" fill="rgba(249,115,22,0.18)" stroke="var(--brand)" stroke-width="2"/>';
+    // 上周虚线
+    var last=DIMS.map(function(d,i){ return pt(i, Math.max(0.05,(d.score-4)/100)).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
+    svg+='<polygon points="'+last+'" fill="none" stroke="#B49A83" stroke-width="1.6" stroke-dasharray="4 3"/>';
+    DIMS.forEach(function(d,i){
+      var p=pt(i,d.score/100);
+      svg+='<circle cx="'+p[0].toFixed(1)+'" cy="'+p[1].toFixed(1)+'" r="3.4" fill="#fff" stroke="'+d.color+'" stroke-width="2"/>';
+    });
+    DIMS.forEach(function(d,i){
+      var lp=pt(i,1.24);
+      svg+='<text x="'+lp[0].toFixed(1)+'" y="'+(lp[1]+4).toFixed(1)+'" font-size="11" font-weight="700" fill="'+d.color+'" text-anchor="middle">'+d.name+'</text>';
+    });
+    svg+='</svg>';
+    el.innerHTML=svg;
+  }
+
+  /* ===== 渲染:五维总览 ===== */
+  var ovRange='week';
+  function renderOverview() {
+    buildRadarCompare(document.getElementById('ov-radar'), 240);
+    var avg=Math.round(DIMS.reduce(function(s,d){return s+d.score},0)/DIMS.length);
+    document.getElementById('ov-n').textContent=avg;
+    var lg='';
+    DIMS.forEach(function(d){ lg+='<span class="ov-lg"><i style="background:'+d.color+'"></i>'+d.name+' '+d.score+'</span>'; });
+    lg+='<span class="ov-lg"><i style="background:#B49A83"></i>上周</span>';
+    document.getElementById('ov-legend').innerHTML=lg;
+    setOvRange(ovRange, document.querySelector('#ov-trend-tabs .tt.on'));
+  }
+  function setOvRange(r, el) {
+    ovRange=r;
+    if (el) {
+      document.querySelectorAll('#ov-trend-tabs .tt').forEach(function(t){ t.classList.remove('on'); });
+      el.classList.add('on');
+    }
+    var cfg=TREND[r];
+    buildLineChart(document.getElementById('ov-trend'), cfg, 320, 160);
+    var lgd='';
+    cfg.lines.forEach(function(l){ lgd+='<span class="tl"><i style="background:'+l.color+'"></i>'+l.name+'</span>'; });
+    document.getElementById('ov-trend-legend').innerHTML=lgd;
+
+    var cmp='';
+    FAMILY.forEach(function(f){
+      var w=f.score+'%';
+      var lvl=f.score>=80?'优秀':(f.score>=70?'良好':'待提升');
+      cmp+='<div class="cmp-row" onclick="openDim(\''+f.dim+'\')">'+
+        '<div class="cmp-av" style="background:'+f.color+'">'+f.name.charAt(0)+'</div>'+
+        '<div class="cmp-info"><div class="cmp-nm"><span class="cn">'+f.name+'</span><span class="cr">'+f.role+'</span></div>'+
+        '<div class="cmp-bar"><div class="cf" style="width:'+w+';background:'+f.color+'"></div></div></div>'+
+        '<div class="cmp-sc" style="color:'+f.color+'">'+f.score+'</div></div>';
+    });
+    document.getElementById('ov-cmp').innerHTML=cmp;
+
+    var adv='';
+    ADVICE.forEach(function(a){
+      adv+='<div class="adv-card" onclick="toast(\'打开建议详情\')">'+
+        '<div class="adv-ic" style="background:'+dimSoft(a.dim)+';color:'+dimColor(a.dim)+'">'+svgUse(a.icon,18)+'</div>'+
+        '<div class="adv-tx"><div class="adv-t">'+a.t+'</div><div class="adv-s">'+a.s+'</div></div>'+
+        '<div class="adv-pri" style="background:'+a.priSoft+';color:'+a.priColor+'">'+a.pri+'</div></div>';
+    });
+    document.getElementById('ov-adv').innerHTML=adv;
+  }
+
+  /* ===== 渲染:维度详情 ===== */
+  function renderDim(code) {
+    var d=dimByCode(code);
+    var hero='<div class="dim-hero" style="background:linear-gradient(135deg,'+d.color+'22,'+d.soft+');color:'+d.color+'">'+
+      '<div class="dh-top"><div class="dh-ic" style="background:'+d.color+';color:#fff">'+svgUse(code==='body'?'run':(code==='mind'?'smile':'bulb'),22)+'</div>'+
+      '<div><div class="dh-nm">'+d.name+' · '+d.desc+'</div><div class="dh-ds">小宇 · 10 岁</div></div>'+
+      '<div class="dh-sc"><div class="n">'+d.score+'</div><div class="l">当前评分</div></div></div>'+
+      '<div class="sub-score">'+
+      '<div class="ss"><div class="sl">较上月</div><div class="sv" style="color:'+d.color+'">+4<small>分</small></div></div>'+
+      '<div class="ss"><div class="sl">同位段</div><div class="sv" style="color:'+d.color+'">前 30%<small></small></div></div>'+
+      '</div></div>';
+    document.getElementById('dim-hero-slot').innerHTML=hero;
+    document.getElementById('dim-nav-title').textContent=d.name+' · '+d.desc;
+
+    var m=DIM_METRICS[code]||DIM_METRICS.body;
+    var mh='';
+    m.forEach(function(x){
+      mh+='<div class="metric-row"><div class="mi"><div class="mn">'+x.n+'<span class="tag-ref '+x.ref+'">'+(x.ref==='ok'?'正常':(x.ref==='mid'?'关注':'偏高'))+'</span></div><div class="mr">'+x.r+'</div></div>'+
+        '<div class="mv" style="color:'+d.color+'">'+x.v+'<span style="font-size:var(--fs-xs);color:var(--ink-3);margin-left:2px">'+x.unit+'</span></div></div>';
+    });
+    document.getElementById('dim-metrics').innerHTML=mh;
+
+    buildLineChart(document.getElementById('dim-trend'), {
+      labels: TREND.week.labels,
+      lines: [{ name:d.name, color:d.color, data:[d.score-6,d.score-4,d.score-5,d.score-2,d.score-1,d.score+1,d.score] }]
+    }, 320, 140);
+
+    var ah='';
+    (DIM_ACTIONS[code]||DIM_ACTIONS.body).forEach(function(a){
+      ah+='<div class="adv-card" onclick="completeAdv(this)">'+
+        '<div class="adv-ic" style="background:'+dimSoft(code)+';color:'+a.c+'">'+svgUse(a.ic,18)+'</div>'+
+        '<div class="adv-tx"><div class="adv-t">'+a.t+'</div><div class="adv-s">'+a.s+'</div></div>'+
+        '<div style="align-self:center;width:22px;height:22px;border-radius:50%;border:1.8px solid '+d.color+';flex:none" class="adv-ck"></div></div>';
+    });
+    document.getElementById('dim-actions').innerHTML=ah;
+
+    var rh='';
+    (DIM_RECORDS[code]||DIM_RECORDS.body).forEach(function(r){
+      rh+='<div class="row"><div class="rk" style="background:'+dimSoft(code)+';color:'+r.c+'">'+svgUse(r.ic,18)+'</div>'+
+        '<div class="ri"><div class="rt">'+r.t+'</div><div class="rm">'+r.m+'</div></div></div>';
+    });
+    document.getElementById('dim-records').innerHTML=rh;
+  }
+  function completeAdv(card){
+    var ck=card.querySelector('.adv-ck');
+    if (!ck || ck.dataset.done) return;
+    ck.dataset.done='1';
+    ck.style.background='var(--ok)';
+    ck.style.borderColor='var(--ok)';
+    ck.innerHTML='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>';
+    toast('已完成 · 成长分 +10');
+  }
+
+  /* ===== 报告上传流程(状态机) ===== */
+  var upState={ step:1, dim:'body', pct:0, timer:null };
+  function openUpload(dim){
+    upState.dim=dim||'body';
+    upState.step=1;
+    renderUpload();
+    pushScreen('upload');
+  }
+  function closeUpload(){ pushScreen(null); }
+  function renderUpload(){
+    var labels=['选择','识别','确认','完成'];
+    var h='';
+    for (var i=0;i<4;i++){
+      var cls= upState.step>i+1 ? 'done' : (upState.step===i+1 ? 'on' : '');
+      h+='<div class="up-step '+cls+'"><div class="us-n">'+(upState.step>i+1?'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>':(i+1))+'</div><div class="us-t">'+labels[i]+'</div></div>';
+      if(i<3) h+='<div class="up-step-line'+(upState.step>i+1?' done':'')+'"></div>';
+    }
+    document.getElementById('up-steps').innerHTML=h;
+
+    ['pick','ocr','fix','done'].forEach(function(k,i){
+      document.getElementById('up-step-'+k).style.display = (upState.step===i+1)?'block':'none';
+    });
+
+    var acts='';
+    if (upState.step===1){
+      acts='<button class="btn-primary" onclick="startOCR()">开始识别</button>'+
+           '<button class="btn-ghost" onclick="closeUpload()">取消</button>';
+    } else if (upState.step===2){
+      acts='<button class="btn-primary" disabled>识别中…</button>';
+    } else if (upState.step===3){
+      acts='<button class="btn-primary" onclick="finishUpload()">确认并归档</button>'+
+           '<button class="btn-ghost" onclick="backToPick()">重新选择</button>';
+    } else {
+      acts='<button class="btn-primary" onclick="closeUpload()">完成</button>';
+    }
+    document.getElementById('up-actions').innerHTML=acts;
+
+    if (upState.step===1) renderPending();
+    if (upState.step===2) renderOcrSteps();
+    if (upState.step===3) renderFixList();
+    if (upState.step===4) renderDoneList();
+  }
+  function renderPending(){
+    document.getElementById('up-pending').innerHTML=
+      '<div class="row"><div class="rk" style="background:var(--dim-action-soft);color:var(--ok)">'+svgUse('check',18)+'</div>'+
+      '<div class="ri"><div class="rt">血常规_20260920.jpg</div><div class="rm">9-20 已解析 · 4 项指标</div></div>'+
+      '<button class="pill-btn done" disabled>已归档</button></div>'+
+      '<div class="row"><div class="rk" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('upload',18)+'</div>'+
+      '<div class="ri"><div class="rt">体检报告_20260928.jpg</div><div class="rm">刚刚选择 · 待识别</div></div>'+
+      '<button class="pill-btn" onclick="startOCR()">识别</button></div>';
+  }
+  function renderOcrSteps(){
+    var p=upState.pct, h='';
+    var reached=Math.floor(p/100*OCR_STEPS.length);
+    OCR_STEPS.forEach(function(s,i){
+      var cls= p>=100 ? 'done' : (i===reached ? 'run' : '');
+      var ic= p>=100
+        ? '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>'
+        : (i===reached ? '<svg class="spin" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 3a9 9 0 0 1 9 9" stroke-linecap="round"/></svg>' : '');
+      h+='<div class="ocr-step '+cls+'"><div class="os-ic">'+ic+'</div><div class="os-t">'+s.t+'</div></div>';
+    });
+    document.getElementById('ocr-steps').innerHTML=h;
+  }
+  function startOCR(){
+    upState.step=2; upState.pct=0; renderUpload();
+    clearInterval(upState.timer);
+    upState.timer=setInterval(function(){
+      upState.pct=Math.min(100, upState.pct+4);
+      document.getElementById('ocr-fill').style.width=upState.pct+'%';
+      document.getElementById('ocr-pct').textContent=upState.pct+'%';
+      renderOcrSteps();
+      if (upState.pct>=100){
+        clearInterval(upState.timer);
+        setTimeout(function(){ upState.step=3; renderUpload(); toast('识别完成 · 请核对'); }, 420);
+      }
+    }, 90);
+  }
+  function backToPick(){
+    clearInterval(upState.timer);
+    upState.step=1; renderUpload();
+  }
+  function renderFixList(){
+    var d=dimByCode(upState.dim), h='';
+    FIX_FIELDS.forEach(function(f){
+      h+='<div class="fix-row"><div class="fi"><div class="fn">'+f.n+(f.low?' <span class="low-conf">待确认</span>':'')+'</div>'+
+        '<div class="fv" style="color:'+d.color+'">'+f.v+' <span style="font-size:var(--fs-sm);color:var(--ink-3)">'+f.u+'</span></div>'+
+        (f.low?'<div class="fw">识别置信度较低,请核对</div>':'')+'</div>'+
+        '<button class="pill-btn" style="padding:6px 12px" onclick="toast(\'编辑 '+f.n+'\')">修改</button></div>';
+    });
+    document.getElementById('up-fix-list').innerHTML=h;
+  }
+  function renderDoneList(){
+    var d=dimByCode(upState.dim), h='';
+    h+='<div class="row"><div class="rk" style="background:'+d.soft+';color:'+d.color+'">'+svgUse('upload',18)+'</div>'+
+      '<div class="ri"><div class="rt">体检报告_20260928.jpg</div><div class="rm">刚刚 · 6 项指标</div></div>'+
+      '<span class="tag-ref ok">已归档</span></div>';
+    FIX_FIELDS.forEach(function(f){
+      h+='<div class="row"><div class="rk" style="background:var(--bg-soft);color:var(--ink-2)">'+svgUse(f.u==='mmHg'||f.u==='bpm'?'heart':'check',16)+'</div>'+
+        '<div class="ri"><div class="rt" style="font-size:var(--fs-base);font-weight:500">'+f.n+'</div></div>'+
+        '<div style="font-weight:800;color:'+d.color+'">'+f.v+'<span style="font-size:var(--fs-xs);color:var(--ink-3);margin-left:2px">'+f.u+'</span></div></div>';
+    });
+    document.getElementById('up-done-list').innerHTML=h;
+  }
+  function finishUpload(){
+    clearInterval(upState.timer);
+    upState.step=4; renderUpload();
+    toast('归档成功 · 身维度 +3 分');
+  }
+
+  /* ===== 渲染:成长报告与分享 ===== */
+  var rptRange='week';
+  function setRptRange(r, el){
+    rptRange=r;
+    if (el){
+      document.querySelectorAll('#rpt-tabs .rtt').forEach(function(t){ t.classList.remove('on'); });
+      el.classList.add('on');
+    }
+    renderReport();
+  }
+  function renderReport(){
+    var isWeek=rptRange==='week';
+    var title=isWeek?'本周成长报告':'本月成长报告';
+    var sub=isWeek?'9-22 至 9-28 · 全家共同成长':'9 月 · 全家共同成长';
+    var dims='';
+    DIMS.forEach(function(d){
+      var s=isWeek?d.score:Math.max(40,d.score-4);
+      dims+='<div class="sc-dim"><div class="sd-n" style="color:'+d.color+'">'+s+'</div><div class="sd-l">'+d.name+'</div></div>';
+    });
+    var unlockedN=BADGES.filter(function(b){return !b.locked;}).length;
+    var card='<div class="share-card hero-share">'+
+      '<div class="sc-brand"><div class="scb-ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>'+
+      '<div class="scb-tx">浠艾福 · Care Family</div>'+
+      '<div class="sc-streak" style="margin-left:auto">'+svgUse('flame',13)+' 连续 '+growthState.streak+' 天</div></div>'+
+      '<div class="sc-title">'+title+'</div>'+
+      '<div class="sc-sub">'+sub+'</div>'+
+      '<div class="sc-dims">'+dims+'</div>'+
+      '<div class="sc-ach">'+
+      '<div class="sc-ach-item"><div class="n">'+growthState.baseTasks+'</div><div class="l">完成任务</div></div>'+
+      '<div class="sc-ach-item"><div class="n">'+growthState.pts.toLocaleString()+'</div><div class="l">成长分</div></div>'+
+      '<div class="sc-ach-item"><div class="n">'+unlockedN+'</div><div class="l">获得徽章</div></div>'+
+      '</div>'+
+      '<div class="sc-foot"><div class="sf-l">成果分享 · 邀请朋友们一起看</div><div class="sf-r">综合 '+(isWeek?76:72)+' 分 ↑</div></div>'+
+      '</div>';
+    document.getElementById('rpt-card-slot').innerHTML=card;
+
+    document.getElementById('rpt-share').innerHTML=
+      '<div class="sa pri" onclick="toast(\'已保存到相册,可直接分享\')">'+svgUse('upload',18)+'保存图片</div>'+
+      '<div class="sa sec" onclick="toast(\'发送给朋友一起看成果\')">'+svgUse('people',18)+'发送给朋友</div>';
+
+    var bh='';
+    BADGES.forEach(function(b){
+      bh+='<div class="bg-item'+(b.locked?' locked':'')+'" onclick="toast(\''+(b.locked?'尚未解锁:'+b.d:b.n+' 已获得')+'\')">'+
+        (b.locked?'<div class="bg-lock">'+svgUse('target',14)+'</div>':'')+
+        '<div class="bg-ring" style="background:linear-gradient(135deg,'+b.c+','+b.c+'99)">'+svgUse(b.ic,24)+'</div>'+
+        '<div class="bg-nm">'+b.n+'</div><div class="bg-dt">'+b.d+'</div></div>';
+    });
+    document.getElementById('rpt-badges').innerHTML=bh;
+    // 首次进入报告页:若已解锁全勤,播放徽章解锁动画
+    if (growthState.unlocked){
+      var lastItem=document.querySelector('#rpt-badges .bg-item:not(.locked):last-child');
+      if (lastItem){ lastItem.classList.add('just-unlocked'); }
+    }
+
+    var hl=[
+      { ic:'check', c:'var(--dim-body)', t:'<b>小宇</b> 运动打卡 4 次达标', m:'本周' },
+      { ic:'book', c:'var(--dim-wisdom)', t:'<b>小柚</b> 亲子共读累计 14 天', m:'进行中' },
+      { ic:'heart', c:'var(--dim-mind)', t:'<b>爷爷</b> 连续 7 天完成情绪打卡', m:'连续 7 天' }
+    ];
+    var h='';
+    hl.forEach(function(x){
+      h+='<div class="feed-item"><div class="feed-dot" style="background:'+x.c+'22;color:'+x.c+'">'+svgUse(x.ic,16)+'</div>'+
+        '<div style="flex:1;min-width:0"><div class="fi-t">'+x.t+'</div><div class="fi-time">'+x.m+'</div></div></div>';
+    });
+    document.getElementById('rpt-highlights').innerHTML=h;
+  }
+
+  /* ===== 交互 ===== */
+  var currentTab='home';
+  function setTab(tab){
+    currentTab=tab;
+    if (tab==='login') return;
+    taskStack=[];
+    TASK_SCREENS.forEach(function(s){
+      var el=document.getElementById('screen-'+s);
+      if (el) el.classList.remove('active');
+    });
+    document.querySelectorAll('.screen').forEach(function(s){
+      if (s.id==='screen-'+tab){ s.classList.add('active'); } else { s.classList.remove('active'); }
+    });
+    document.getElementById('tabbar').style.display = (state.loggedIn) ? 'flex' : 'none';
+    document.querySelectorAll('.tabbar .tab').forEach(function(t){ t.classList.toggle('on', t.dataset.tab===tab); });
+    if (tab==='home') renderHome();
+    if (tab==='health') renderHealth();
+    if (tab==='growth') renderGrowth();
+    if (tab==='profile') renderProfile();
+  }
+  function openDim(){ document.getElementById('dim-mask').classList.add('show'); document.getElementById('dim-sheet').classList.add('show'); }
+  function closeDim(){ document.getElementById('dim-mask').classList.remove('show'); document.getElementById('dim-sheet').classList.remove('show'); }
+
+  /* ===== 二级页栈(Task 页:五维总览 / 维度详情 / 上传 / 报告) ===== */
+  var taskStack=[];
+  var TASK_SCREENS=['overview','dim','upload','report','quiz','risk','prep','report7'];
+  function pushScreen(name){
+    TASK_SCREENS.forEach(function(s){
+      var el=document.getElementById('screen-'+s);
+      if (el) el.classList.remove('active');
+    });
+    if (name) taskStack.push(name);
+    if (name){
+      var el=document.getElementById('screen-'+name);
+      if (el) el.classList.add('active');
+    }
+    // 二级页隐藏 TabBar
+    document.getElementById('tabbar').style.display = name ? 'none' : (state.loggedIn?'flex':'none');
+    if (!name && state.loggedIn) setTab(currentTab);
+  }
+  function backTo(tab){
+    taskStack=[];
+    pushScreen(null);
+    if (tab) setTab(tab);
+  }
+  function openDimDetail(code){
+    renderDim(code);
+    pushScreen('dim');
+  }
+  function openOverview(){
+    renderOverview();
+    pushScreen('overview');
+  }
+  function openReport(){
+    setRptRange(rptRange, document.querySelector('#rpt-tabs .rtt.on'));
+    pushScreen('report');
+  }
+
+  function switchMember(m){
+    document.querySelectorAll('.mchip').forEach(function(c){ c.classList.toggle('on', c.dataset.member===m); });
+    toast(m==='me'?'已切换到:我':'已切换到:小宇');
+  }
+  function completeTask(btn){
+    if (btn.dataset.done) return;
+    btn.dataset.done='1';
+    btn.textContent='已得 ✓'; btn.classList.add('done'); btn.disabled=true;
+    // 成果驱动:累加成长分 + 连续打卡
+    growthState.pts += 10;
+    growthState.streak += 1;
+    growthState.baseTasks += 1;
+    if (currentTab==='growth') renderAchievementHero();
+    toast('获得成长分 +10 · 连续打卡 '+growthState.streak+' 天');
+  }
+  function setHealthSeg(seg, el){
+    document.querySelectorAll('.seg .sg').forEach(function(s){ s.classList.remove('on'); });
+    el.classList.add('on');
+    renderHealth();
+    toast('切换到:'+el.textContent);
+  }
+  var toastTimer;
+  function toast(msg){
+    var t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show');
+    clearTimeout(toastTimer); toastTimer=setTimeout(function(){ t.classList.remove('show'); }, 1600);
+  }
+
+  /* 登录态切换(演示) */
+  var state={ loggedIn:true };
+  function applyLogin(){
+    document.getElementById('db-in').classList.toggle('on', state.loggedIn);
+    document.getElementById('db-out').classList.toggle('on', !state.loggedIn);
+    document.getElementById('tabbar').style.display = state.loggedIn ? 'flex' : 'none';
+    ['home','health','growth','profile'].forEach(function(t){ document.getElementById('screen-'+t).style.display = state.loggedIn? 'block':'none'; });
+    document.getElementById('screen-login').style.display = state.loggedIn? 'none':'block';
+    document.getElementById('screen-login').classList.toggle('active', !state.loggedIn);
+    if (state.loggedIn){ setTab(currentTab); }
+  }
+  function demoLogin(){ state.loggedIn=true; applyLogin(); toast('欢迎回来,林晓'); }
+  document.getElementById('db-in').onclick=function(){ state.loggedIn=true; applyLogin(); };
+  document.getElementById('db-out').onclick=function(){ state.loggedIn=false; applyLogin(); };
+
+  /* ===== SVG 图标精灵(内联,替代 emoji) ===== */
+  var SPRITE = {
+    check:'<polyline points="4 12 9 17 20 6"/>',
+    star:'<polygon points="12 3 14.5 9.5 21 10 16 14.5 17.5 21 12 17.5 6.5 21 8 14.5 3 10 9.5 9.5"/>',
+    heart:'<path d="M12 20s-7-4.4-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.6 12 20 12 20z"/>',
+    target:'<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/>',
+    bulb:'<path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/>',
+    coin:'<circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/>',
+    flame:'<path d="M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c0-1 0-1 .5-2 1.5 2 2.5 3.5 2.5 6a5 5 0 0 1-10 0c0-4 3-6 5-11z"/>',
+    gift:'<rect x="3" y="8" width="18" height="13" rx="2"/><path d="M3 12h18M12 8v13"/><path d="M12 8C10 8 8 6 9 4.5 10.5 4 12 6 12 8zM12 8c2 0 4-2 3-3.5C13.5 4 12 6 12 8z"/>',
+    medal:'<circle cx="12" cy="9" r="6"/><path d="M9 14l-2 7 5-3 5 3-2-7"/>',
+    book:'<path d="M4 5a2 2 0 0 1 2-2h12v16H6a2 2 0 0 0-2 2z"/><path d="M4 19a2 2 0 0 1 2-2h12"/>',
+    upload:'<path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/>',
+    target2:'',
+    diet:'<path d="M5 3v8a3 3 0 0 0 6 0V3M8 3v18M16 3c-1.5 0-2 2-2 4s.5 4 2 4 2-2 2-4-.5-4-2-4zM16 11v10"/>',
+    run:'<circle cx="15" cy="5" r="2"/><path d="M13 21l2-5-3-2-2 3M15 14l3 2 1 4M13 11l3 1 2-1"/>',
+    moon:'<path d="M20 14a8 8 0 1 1-9-11 6 6 0 0 0 9 11z"/>',
+    smile:'<circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01M15 9h.01"/>',
+    people:'<circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 2.5-5 6-5s6 2 6 5"/><path d="M16 6a3 3 0 0 1 0 6M21 20c0-2.5-1.5-4-4-4.5"/>',
+    share:'<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/>',
+    cam:'<path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.4"/>',
+    chart:'<path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/>',
+    leaf:'<path d="M5 19c0-8 6-13 14-14 0 9-5 14-13 14z"/><path d="M5 19c3-4 6-6 10-7"/>',
+    clock:'<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+    alert:'<path d="M12 3l9 16H3z"/><path d="M12 10v4M12 17h.01"/>',
+    shield:'<path d="M12 3l8 3v6c0 5-3.5 8.5-8 9.5-4.5-1-8-4.5-8-9.5V6z"/><path d="M9 12l2 2 4-4"/>'
+  };
+  (function injectSprite(){
+    var defs='';
+    for (var k in SPRITE){ defs+='<symbol id="i-'+k+'" viewBox="0 0 24 24">'+SPRITE[k]+'</symbol>'; }
+    var s=document.createElementNS('http://www.w3.org/2000/svg','svg');
+    s.setAttribute('style','display:none'); s.innerHTML=defs;
+    document.body.appendChild(s);
+  })();
+
+  /* 时钟 */
+  function tick(){ var d=new Date(); document.getElementById('clock').textContent = d.getHours()+':'+String(d.getMinutes()).padStart(2,'0'); }
+  tick(); setInterval(tick, 30000);
+
+  /* 闪屏(还原 flash 页:2s 自动进入,轻触可跳过) */
+  function hideSplash(){
+    clearTimeout(splashTimer);
+    var s=document.getElementById('splash');
+    if (s) s.classList.add('hide');
+  }
+  var splashTimer = setTimeout(hideSplash, 2000);
+
+  /* 初始化 */
+  renderHome(); renderHealth(); renderGrowth(); renderProfile(); renderDimSheet();
+  renderOverview(); setRptRange('week', document.querySelector('#rpt-tabs .rtt.on'));
+  renderUpload(); renderPrepPage(); renderD7();
+  applyLogin();
+</script>
+</body>
+</html>

+ 6 - 0
cfc-frontend/pages.json

@@ -54,6 +54,12 @@
       "style": {
         "navigationBarTitleText": "服务中心"
       }
+    },
+    {
+      "path": "pages/about/about",
+      "style": {
+        "navigationBarTitleText": "关于浠艾福"
+      }
     }
   ],
   "subPackages": [

+ 72 - 0
cfc-frontend/pages/about/about.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="about-page">
+    <view class="about-hero">
+      <text class="about-brand">浠艾福</text>
+      <text class="about-tagline">给全家的一站式幸福提案 · 免费家庭教育与家庭成长助手</text>
+    </view>
+
+    <view class="about-block">
+      <text class="about-h">浠艾福是什么</text>
+      <text class="about-p">浠艾福是一款面向家庭的免费成长助手,帮助家长通过任务管理、习惯打卡、五维成长测评(身/心/智/行/富)和心愿激励,陪伴孩子养成良好习惯、记录家庭成长。所有功能免费,数据仅存本机。</text>
+    </view>
+
+    <view class="about-block">
+      <text class="about-h">常见问题</text>
+      <view class="faq-item" v-for="(item, i) in faqList" :key="i">
+        <text class="faq-q">{{ item.q }}</text>
+        <text class="faq-a">{{ item.a }}</text>
+      </view>
+    </view>
+
+    <view class="about-block">
+      <text class="about-h">关于测评的说明</text>
+      <text class="about-p">浠艾福内的身心测评均为家庭自评与筛查工具,用于帮助家长了解家人状态、辅助家庭陪伴决策,不构成医疗诊断,也不能替代专业医生、心理咨询师或医疗机构的诊断与治疗。如家人出现持续不适或心理困扰,请及时寻求专业帮助。</text>
+    </view>
+
+    <view class="about-block">
+      <text class="about-h">了解更多</text>
+      <view class="about-link" @click="goPolicy"><text>用户协议与隐私政策</text></view>
+      <view class="about-link" @click="goSite"><text>官方网站 www.cf-club.com</text></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      faqList: [
+        { q: '浠艾福是免费的吗?', a: '是的,浠艾福全部核心功能免费使用,包括家庭任务管理、习惯打卡、五维成长测评与心愿激励。' },
+        { q: '浠艾福适合谁使用?', a: '主要面向重视家庭成长与陪伴的家长,以及需要任务管理、习惯养成和成长记录的孩子与家庭成员。' },
+        { q: '什么是五维成长测评?', a: '五维指身、心、智、行、富五个家庭成长维度。浠艾福通过轻量自评与筛查,帮助家庭了解各维度概况并给出陪伴建议。' },
+        { q: '测评结果准确吗,能代替医生吗?', a: '不能。所有测评均为家庭自评与筛查工具,用于辅助了解状态,不构成医疗诊断,也不替代专业诊疗。' },
+        { q: '我的家庭数据安全吗?', a: '应用强调本地化存储,核心数据仅存本机;涉及账号与云端同步的部分遵循用户协议与隐私政策。' },
+        { q: '如何开始使用浠艾福?', a: '在首页选择对应维度入口,按引导完成自测或创建家庭任务,即可开始记录与陪伴。' },
+        { q: '可以在电脑上使用吗?', a: '浠艾福为微信小程序,请在微信中搜索「浠艾福」或扫描官方二维码打开使用。' }
+      ]
+    }
+  },
+  methods: {
+    goPolicy() {
+      uni.navigateTo({ url: '/pages/policy/agreement' })
+    },
+    goSite() {
+      uni.setClipboardData({ data: 'http://www.cf-club.com' })
+    }
+  }
+}
+</script>
+
+<style>
+.about-page { padding: 32rpx 28rpx 60rpx; background: #fff; }
+.about-hero { display: flex; flex-direction: column; align-items: center; padding: 24rpx 0 32rpx; }
+.about-brand { font-size: 44rpx; font-weight: 700; color: #2F6BE6; }
+.about-tagline { font-size: 24rpx; color: #7A7E83; margin-top: 12rpx; text-align: center; }
+.about-block { margin-top: 36rpx; }
+.about-h { display: block; font-size: 32rpx; font-weight: 600; color: #1A1A1A; margin-bottom: 16rpx; }
+.about-p { display: block; font-size: 28rpx; line-height: 44rpx; color: #3A3A3A; }
+.faq-item { padding: 20rpx 0; border-bottom: 1rpx solid #EEE; }
+.faq-q { display: block; font-size: 28rpx; font-weight: 600; color: #1A1A1A; }
+.faq-a { display: block; font-size: 26rpx; line-height: 40rpx; color: #555; margin-top: 8rpx; }
+.about-link { padding: 22rpx 0; font-size: 28rpx; color: #2F6BE6; border-bottom: 1rpx solid #EEE; }
+</style>

+ 2 - 1
cfc-frontend/pages/cognitive-hall.vue

@@ -58,9 +58,10 @@ import { normalizeMembers, memberIdOf, resolveMemberId } from '@/utils/memberNor
 import { getCognitiveChildScores } from '../utils/api.js'
 import { getFamilyMemberList } from '../utils/api.js'
 import fontScaleMixin from '@/mixins/font-scale.js'
+import shareMixin from '../components/share-mixin.js'
 
 export default {
-  mixins: [fontScaleMixin],
+  mixins: [fontScaleMixin, shareMixin],
   components: { MemberSelector },
   data() {
     return {

+ 2 - 1
cfc-frontend/pages/growth-main/index.vue

@@ -290,8 +290,9 @@ import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
 import { healthCheckinList, getHealthMealList, getFoodCautionList, getGrowthRecommendations, getExerciseRecords, getSleepRecords, getEmotionCheckinList, getCheckinList, getTodayTasks, reportAppEnter } from '../../utils/api.js'
 import { parseDate } from '../../utils/format.js'
 import fontScaleMixin from '@/mixins/font-scale.js'
+import shareMixin from '../../components/share-mixin.js'
 export default {
-  mixins: [fontScaleMixin],
+  mixins: [fontScaleMixin, shareMixin],
   components: { LoginGuideCard, DimensionActivities, DimensionProducts, ArticleBookshelf },
   data() { return { memberId: '', todayDate: '', hasIncomplete: false, incompleteCount: 0, progressItems: [], recentTasks: [], streakDays: 0, activeChallenges: 0, completeness: 0, cautionCount: 0,
       healthArticles: [],

+ 2 - 1
cfc-frontend/pages/health-main/index.vue

@@ -243,9 +243,10 @@ import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
 import ReportUploadCard from '../../components/report-upload-card.vue'
 import { parseDate } from '../../utils/format.js'
 import fontScaleMixin from '@/mixins/font-scale.js'
+import shareMixin from '../../components/share-mixin.js'
 
 export default {
-  mixins: [fontScaleMixin],
+  mixins: [fontScaleMixin, shareMixin],
   components: { LoginGuideCard, RadarChart, ArticleBookshelf, ReportUploadCard },
   data() {
     return {

+ 7 - 2
cfc-frontend/pages/index-home/index.vue

@@ -412,6 +412,11 @@
 
     <!-- 底部占位 -->
     <view style="height: 120rpx;"></view>
+
+    <!-- GEO 自然语言摘要区:搜一搜摘要位 + AI 抓取位(服务微信内/外 AI) -->
+    <view class="geo-seo-block" style="padding:8rpx 32rpx 20rpx;">
+      <text style="display:block;font-size:26rpx;line-height:42rpx;color:#7A7E83;">浠艾福是一款免费的面向家庭的成长助手,帮助家长通过任务管理、习惯打卡、五维成长测评(身、心、智、行、富)和心愿激励,陪伴孩子养成良好习惯、记录家庭成长。所有功能免费,数据仅存本机。</text>
+    </view>
   </view>
 
 </view>
@@ -2074,7 +2079,7 @@ title: '添加家庭成员',
         path = path + '?refCode=' + this.referralCode
       }
       return {
-        title: '浠艾福 · 家庭五维幸福成长',
+        title: '浠艾福丨免费家庭教育与家庭成长助手',
         path: path
       }
     },
@@ -2085,7 +2090,7 @@ title: '添加家庭成员',
         query = 'refCode=' + this.referralCode
       }
       return {
-        title: '浠艾福 · 家庭五维幸福成长',
+        title: '浠艾福丨免费家庭教育与家庭成长助手',
         query: query
       }
     }

+ 2 - 1
cfc-frontend/pages/profile-main/profile.vue

@@ -316,9 +316,10 @@ import {
 import { BrandColors } from '../../utils/brand-colors.js'
 import { isApprovedActivityProvider } from '../../utils/activity-role.js'
 import fontScaleMixin from '@/mixins/font-scale.js'
+import shareMixin from '../../components/share-mixin.js'
 
 export default {
-  mixins: [fontScaleMixin],
+  mixins: [fontScaleMixin, shareMixin],
   components: { FloatingAvatar, ContentSharePoster },
   data() {
     return {

+ 2 - 1
cfc-frontend/pages/service-center/index.vue

@@ -66,9 +66,10 @@
 <script>
 import { getTeacherPendingTasks, getTeacherUnreadCount } from '@/utils/api.js'
 import fontScaleMixin from '@/mixins/font-scale.js'
+import shareMixin from '../../components/share-mixin.js'
 
 export default {
-  mixins: [fontScaleMixin],
+  mixins: [fontScaleMixin, shareMixin],
   data() {
     return {
       isTeacher: false,

+ 7 - 0
cfc-frontend/sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+    "action": "allow",
+    "page": "*"
+  }]
+}