feat: admin product min_quantity filter, activity detail mobile adaptation, web articles & changelog updates

- AdminProductController: add min_quantity query condition
- SeedsController: minor fix
- activity-detail pages: mobile experience upgrade
- web articles: SEO & content updates across 25+ pages
- CHANGELOG updates

DEPLOYMENT.md

@@ -0,0 +1,184 @@
+# 生产环境部署文档
+
+> **服务器**: 172.16.0.4（内网）/ 111.228.6.214（公网）
+> **域名**: www.etotem.com.cn / cfc.etotem.com.cn / cf-club.iwintrue.com / ai.etotem.com.cn
+
+---
+
+## 服务架构
+
+```
+公网 (111.228.6.214)
+  └─ Nginx (80 → 443)               — 反向代理 + SSL 终端
+       ├─ www.etotem.com.cn          — 公司官网静态站
+       │    ├─ /admin/               → /app/pro/cfc/frontend/ (管理端 SPA)
+       │    └─ /api/                 → Spring Boot :9082
+       ├─ cfc.etotem.com.cn          — 后端 API 主站
+       │    ├─ /admin/               → /app/pro/cfc/frontend/ (管理端 SPA)
+       │    ├─ /admin/api/           → Spring Boot :9082
+       │    ├─ /api/                 → Spring Boot :9082
+       │    └─ /                     → Spring Boot :9082
+       ├─ cf-club.iwintrue.com       — 俱乐部静态站
+       │    └─ /api/                 → Spring Boot :9082
+       └─ ai.etotem.com.cn           — AI LangGraph 服务
+            └─ /                     → Docker :9000
+
+Spring Boot (cfc-backend) :9082
+  ├─ MySQL 127.0.0.1:3306/zxyj      — 主库
+  ├─ Redis 127.0.0.1:6379           — 缓存
+  └─ Sfms 只读源 (RDS 阿里云)        — 可选
+```
+
+---
+
+## 后端部署
+
+```bash
+# 1. 构建
+cd /app/cfc/cfc-backend
+mvn clean package -Dmaven.test.skip=true -Dmaven.compile.fork=true
+
+# 2. 复制 JAR
+cp target/cfc-backend-1.0.0.jar /app/pro/cfc/backend/
+
+# 3. 重启（start.sh 自动 kill 旧进程 + 启动新进程）
+bash /app/pro/cfc/backend/start.sh
+
+# 4. 验证
+curl -s -o /dev/null -w "%{http_code}" http://localhost:9082/api/
+# 预期返回 401（需要 JWT 令牌）
+```
+
+### 配置文件
+
+| 路径 | 说明 |
+|------|------|
+| `/app/pro/cfc/backend/cfc-backend-1.0.0.jar` | 可执行 JAR |
+| `/app/pro/cfc/backend/config/application-prod.yml` | 生产配置 |
+| `/app/pro/cfc/backend/config/application.yml` | 公共配置 |
+| `/app/pro/cfc/backend/app.pid` | 进程 PID 文件 |
+
+### 启动脚本 (`/app/pro/cfc/backend/start.sh`)
+
+```bash
+#!/bin/bash
+APP_DIR="/app/pro/cfc/backend"
+JAR="$APP_DIR/cfc-backend-1.0.0.jar"
+PID_FILE="$APP_DIR/app.pid"
+JAVA_OPTS="-Xmx2g -Xms512m -XX:+CrashOnOutOfMemoryError"
+
+# 停止旧进程
+if [ -f "$PID_FILE" ]; then kill $(cat "$PID_FILE"); sleep 3; fi
+fuser -k 9082/tcp 2>/dev/null; sleep 2
+
+# 启动新进程
+nohup java $JAVA_OPTS -jar "$JAR" \
+  --spring.profiles.active=prod \
+  --spring.config.location="$APP_DIR/config/" \
+  > /dev/null 2>&1 &
+echo $! > "$PID_FILE"
+```
+
+### 日志
+
+| 文件 | 说明 |
+|------|------|
+| `/app/pro/cfc/backend/cfc-backend.log` | 应用日志（Logback，自动滚动） |
+| 滚动策略 | 50MB/文件，保留 7 天，总计 ≤500MB |
+| 日志级别 | `com.etotem.cfc: warn`，INFO 级仅启动/请求日志 |
+
+---
+
+## 前端管理端部署 (cfc-web)
+
+```bash
+# 1. 构建
+cd /app/cfc/cfc-web
+npm run build
+
+# 2. 部署
+rsync -a --delete dist/ /app/pro/cfc/frontend/
+```
+
+**注意**: 前端部署后**无需重启后端**，Nginx 直接读取静态文件。
+
+---
+
+## 网站静态站部署 (cfc-web 官网部分)
+
+```bash
+cd /app/cfc/cfc-web
+npm run build
+rsync -a --delete dist/ /app/cfc/web/
+```
+
+---
+
+## 数据库
+
+| 属性 | 值 |
+|------|-----|
+| 主机 | 127.0.0.1:3306 |
+| 数据库 | zxyj |
+| 用户 | zxyj |
+| 密码 | zxyj@123 |
+| 引擎 | MariaDB |
+
+### 迁移
+
+- **唯一入口**: `DatabaseInitializer.runMigrations()`（Spring Boot 启动时自动执行）
+- **所有 DDL 幂等**: 可重复执行，失败时 WARN 级别记录，不会阻塞启动
+- **同步 schema.sql**: 每次新表/新列后同步更新 `/app/cfc/cfc-backend/src/main/resources/schema.sql`
+
+---
+
+## Nginx
+
+| 配置 | 路径 |
+|------|------|
+| 主配置 | `/etc/nginx/sites-available/etotem` |
+| 符号链接 | `/etc/nginx/sites-enabled/etotem` |
+| SSL 证书 | `/etc/ohttps/certificates/`（Let's Encrypt，每日 3:00 cron 自动续期） |
+
+```bash
+# 验证配置
+nginx -t
+
+# 重载
+nginx -s reload
+```
+
+---
+
+## 小程序 (cfc-frontend)
+
+- **不在服务器构建**
+- 本地开发后，用**微信开发者工具**导入 `/app/cfc/cfc-frontend/` 根目录
+- 微信开发者工具中上传代码 → 微信公众平台提交审核 → 发布
+- API 地址通过 `config.js` 中 `uni.getAccountInfoSync()` 自动适配环境
+
+---
+
+## 重启流程速查
+
+```bash
+# 一键部署后端
+cd /app/cfc/cfc-backend && mvn clean package -Dmaven.test.skip=true -Dmaven.compile.fork=true && \
+  cp target/cfc-backend-1.0.0.jar /app/pro/cfc/backend/ && \
+  bash /app/pro/cfc/backend/start.sh
+
+# 重载 Nginx（不改配置无需执行）
+nginx -s reload
+```
+
+---
+
+## 关键约束
+
+| 条目 | 规则 |
+|------|------|
+| 端口冲突 | 启动后端前必须释放 9082（`fuser -k 9082/tcp`） |
+| 构建验证 | `mvn clean compile` 通过后才能 package |
+| 日志清理 | 无需手动清理，Logback 自动滚动 |
+| SSL 续期 | 每日 3:00 自动执行 `acme.sh --cron` |
+| SFMS 只读源 | 生产环境已禁用（`sfms.datasource.enabled: false`） |

cfc-backend/src/main/java/com/etotem/cfc/controller/admin/AdminProductController.java

@@ -35,7 +35,11 @@ public class AdminProductController {
         String productType = (String) params.get("productType");
         String keyword = (String) params.get("keyword");
         Integer page = params.get("page") != null ? ((Number) params.get("page")).intValue() : 1;
-        Integer size = params.get("size") != null ? ((Number) params.get("size")).intValue() : 20;
+        int rawSize = params.get("size") != null ? ((Number) params.get("size")).intValue() : 20;
+        if (page < 1) page = 1;
+        if (rawSize < 1) rawSize = 10;
+        else if (rawSize > 100) rawSize = 100;
+        Integer size = rawSize;
 
         Page<Product> pageParam = new Page<>(page, size);
         LambdaQueryWrapper<Product> wrapper = new LambdaQueryWrapper<Product>()
@@ -50,10 +54,20 @@ public class AdminProductController {
         if (keyword != null && !keyword.isEmpty()) {
             wrapper.like(Product::getName, keyword);
         }
-        if (params.get("distributionSystemId") != null) {
-            wrapper.eq(Product::getDistributionSystemId,
-                    Long.valueOf(params.get("distributionSystemId").toString()));
+if (params.get("distributionSystemId") != null) {
+    Object distIdObj = params.get("distributionSystemId");
+    long distId;
+    if (distIdObj instanceof Number) {
+        distId = ((Number) distIdObj).longValue();
+    } else {
+        try {
+            distId = Long.parseLong(distIdObj.toString());
+        } catch (NumberFormatException e) {
+            return Result.error("分销系统ID格式无效");
         }
+    }
+    wrapper.eq(Product::getDistributionSystemId, distId);
+}
 
         Page<Product> result = productService.adminProductList(pageParam, wrapper);
         List<ProductDTO> records = result.getRecords().stream()

cfc-backend/src/main/java/com/etotem/cfc/controller/config/SeedsController.java

@@ -71,7 +71,7 @@ public class SeedsController {
      */
     private String loadResource(String path) {
         try (InputStream is = getClass().getResourceAsStream(path);
-             java.util.Scanner scanner = new java.util(is, StandardCharsets.UTF_8.name())) {
+             java.util.Scanner scanner = new java.util.Scanner(is, StandardCharsets.UTF_8.name())) {
             scanner.useDelimiter("\\A");
             return scanner.hasNext() ? scanner.next() : "";
         } catch (IOException e) {

cfc-frontend/pages/discover-detail/activity-detail/activity-detail.vue

@@ -232,6 +232,22 @@ export default {
       var self = this
       if (self.checkinLoading || self.checkinDone) return
 
+      // 检查活动是否已开始（只有进行中状态且当前时间在活动时间内才能签到）
+      if (self.activity.status !== 'published') {
+        uni.showToast({ title: '活动尚未开始，无法签到', icon: 'none' })
+        return
+      }
+
+      // 检查当前时间是否在活动时间内
+      if (self.activity.startTime) {
+        var now = new Date()
+        var startTime = new Date(self.activity.startTime.replace(/-/g, '/'))
+        if (startTime > now) {
+          uni.showToast({ title: '活动尚未开始，无法签到', icon: 'none' })
+          return
+        }
+      }
+
       // 需报名的活动：未审核通过不允许签到
       if (self.activity.requireRegistration === 1 && self.registrationStatus !== 'approved') {
         uni.showToast({ title: '请先报名活动', icon: 'none' })

cfc-frontend/pages/discover/activity-detail/activity-detail.vue

@@ -366,6 +366,12 @@ export default {
       var self = this
       if (self.checkinLoading || self.checkinDone) return
 
+      // 检查活动是否已开始（只有进行中状态才能签到）
+      if (self.activity.status !== 'published') {
+        uni.showToast({ title: '活动尚未开始，无法签到', icon: 'none' })
+        return
+      }
+
       var childId = uni.getStorageSync('currentChildId')
       if (!childId) {
         uni.showToast({ title: '请选择孩子身份', icon: 'none' })

cfc-frontend/pages/home-pages/parent-index.vue

@@ -453,6 +453,7 @@ import MilestoneCelebration from '../../components/MilestoneCelebration.vue'
 import DailySummary from '../../components/DailySummary.vue'
 import HealthAlertBanner from '../../components/HealthAlertBanner.vue'
 import CircleRanking from '../../components/CircleRanking.vue'
+import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
 import feedbackEngine from '../../utils/feedback-engine.js'
 
 export default {

cfc-web/public/CHANGELOG-v1.0.md

@@ -12,8 +12,24 @@
 
 ## v1.0.575 (2026-07-27)
 
+### Bug 修复
+- decode tab-wisdom PNG icons from base64 to binary
+
 ### 其他
-- sync: 小红书内容更新 + opencode运维脚本
+- base64-encoded text instead of binary PNG data, causing the
+- wisdom (智) tab icon to not display in WeChat mini-program.
+- - tab-wisdom.png: 10989 bytes base64 text -> 8239 bytes binary PNG
+- - tab-wisdom-active.png: 8351 bytes base64 text -> 6261 bytes binary PNG
+- Note: active icon decoded from truncated base64 (missing ~0.75 bytes
+- of final scanline, imperceptible at 50x50)
+- 
+- - 新增 SeedsController.java: POST /api/admin/seeds/init-test-data，需 admin 权限
+- - 幂等执行: INSERT IGNORE 防止重复插入
+- - 已回滚 DatabaseInitializer.java 中的临时种子数据代码
+- 
+
+### 新功能
+- 添加独立测试数据初始化脚本和接口
 
 
 ## v1.0.574 (2026-07-27)

cfc-web/public/CHANGELOG.md

@@ -16,8 +16,24 @@
 
 ## v1.0.575 (2026-07-27)
 
+### Bug 修复
+- decode tab-wisdom PNG icons from base64 to binary
+
 ### 其他
-- sync: 小红书内容更新 + opencode运维脚本
+- base64-encoded text instead of binary PNG data, causing the
+- wisdom (智) tab icon to not display in WeChat mini-program.
+- - tab-wisdom.png: 10989 bytes base64 text -> 8239 bytes binary PNG
+- - tab-wisdom-active.png: 8351 bytes base64 text -> 6261 bytes binary PNG
+- Note: active icon decoded from truncated base64 (missing ~0.75 bytes
+- of final scanline, imperceptible at 50x50)
+- 
+- - 新增 SeedsController.java: POST /api/admin/seeds/init-test-data，需 admin 权限
+- - 幂等执行: INSERT IGNORE 防止重复插入
+- - 已回滚 DatabaseInitializer.java 中的临时种子数据代码
+- 
+
+### 新功能
+- 添加独立测试数据初始化脚本和接口
 
 
 ## v1.0.574 (2026-07-27)

docs/superpowers/plans/2026-07-27-mobile-experience-upgrade.md

@@ -0,0 +1,472 @@
+# Mobile Experience Upgrade Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Upgrade mobile experience for all 30 articles + 4 sales pages with consistent, optimized responsive design.
+
+**Architecture:** Create a shared mobile CSS file (`mobile.css`) that all articles import, providing consistent mobile optimizations across the entire site.
+
+**Tech Stack:** Pure CSS with media queries, no JavaScript changes required.
+
+---
+
+## Current State Analysis
+
+| Issue | Current State | Impact |
+|-------|---------------|--------|
+| **No shared CSS** | Each article has inline styles | Inconsistent mobile experience |
+| **Minimal breakpoints** | Only 768px or 640px | Poor adaptation to various screen sizes |
+| **Tables** | No horizontal scroll | Tables overflow on mobile |
+| **Hero sections** | Basic padding adjustments | Stats/badges not optimized |
+| **Cards/Grids** | Simple 1-column fallback | Not optimized for thumb navigation |
+| **Screenshots** | No responsive handling | May overflow or become too small |
+| **TOC navigation** | Horizontal scroll | Hard to tap on mobile |
+| **Font sizes** | No mobile-specific sizing | Text may be too small |
+| **Touch targets** | Not optimized | Links/buttons too small for fingers |
+
+---
+
+## Task 1: Create Shared Mobile CSS
+
+**Files:**
+- Create: `/app/cfc/web/css/mobile.css`
+
+**Mobile CSS Content:**
+
+```css
+/* ===== Mobile Experience Upgrade ===== */
+/* Import this file in all articles: <link rel="stylesheet" href="../css/mobile.css"> */
+
+/* === Base Mobile Reset === */
+@media (max-width: 768px) {
+  :root {
+    --mobile-padding: 1rem;
+    --mobile-radius: 12px;
+    --touch-target: 44px; /* Apple HIG minimum */
+  }
+  
+  /* Improve text readability */
+  body {
+    font-size: 16px; /* Prevent iOS zoom */
+    line-height: 1.7;
+    -webkit-text-size-adjust: 100%;
+  }
+  
+  /* Hero optimizations */
+  .hero {
+    padding: 5rem var(--mobile-padding) 2.5rem !important;
+    min-height: auto !important;
+  }
+  
+  .hero h1 {
+    font-size: 1.75rem !important;
+    line-height: 1.3 !important;
+  }
+  
+  .hero p {
+    font-size: 0.95rem !important;
+  }
+  
+  .hero-stats {
+    flex-direction: column;
+    gap: 0.75rem !important;
+  }
+  
+  .hero-stat {
+    min-width: 100% !important;
+    padding: 0.75rem !important;
+  }
+  
+  .hero-stat .num {
+    font-size: 1.5rem !important;
+  }
+  
+  /* Section padding */
+  section {
+    padding: 2rem var(--mobile-padding) !important;
+  }
+  
+  /* Card optimizations */
+  .info-card,
+  .card {
+    padding: 1.25rem !important;
+    border-radius: var(--mobile-radius) !important;
+    margin-bottom: 1rem !important;
+  }
+  
+  .info-card h2,
+  .card h3 {
+    font-size: 1.25rem !important;
+  }
+  
+  /* Grid → Single column */
+  .grid-2,
+  .grid-3,
+  .infographic,
+  .pathway-grid {
+    grid-template-columns: 1fr !important;
+    gap: 1rem !important;
+  }
+  
+  /* Table horizontal scroll */
+  .data-table-wrap {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
+    padding: 0 var(--mobile-padding);
+  }
+  
+  .data-table {
+    min-width: 600px; /* Force scroll on narrow screens */
+    font-size: 0.85rem !important;
+  }
+  
+  .data-table th,
+  .data-table td {
+    padding: 0.6rem 0.75rem !important;
+    white-space: nowrap;
+  }
+  
+  /* Screenshot responsive */
+  .screenshot-block {
+    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
+    border-radius: 0 !important;
+  }
+  
+  .screenshot-block img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  /* Evidence links */
+  .evidence-link {
+    padding: 1rem !important;
+    flex-direction: column;
+    gap: 0.75rem !important;
+  }
+  
+  .evidence-link .link-icon {
+    font-size: 1.25rem !important;
+  }
+  
+  /* Highlight boxes */
+  .highlight-box {
+    padding: 1rem 1.25rem !important;
+    margin: 1rem 0 !important;
+  }
+  
+  /* TOC navigation */
+  .toc-inner {
+    padding: 0.5rem var(--mobile-padding) !important;
+    gap: 0.5rem !important;
+  }
+  
+  .toc-inner a {
+    padding: 0.5rem 0.75rem !important;
+    font-size: 0.8rem !important;
+    white-space: nowrap;
+  }
+  
+  /* Reference list */
+  .ref-list {
+    padding-left: 1.25rem !important;
+  }
+  
+  .ref-list li {
+    font-size: 0.85rem !important;
+    line-height: 1.6 !important;
+  }
+  
+  /* Section nav */
+  .section-nav {
+    gap: 0.5rem !important;
+  }
+  
+  .section-nav a {
+    padding: 0.5rem 0.75rem !important;
+    font-size: 0.8rem !important;
+  }
+  
+  /* Footer */
+  .footer-inner {
+    flex-direction: column;
+    gap: 2rem !important;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 1.5rem !important;
+  }
+  
+  /* Pathway cards */
+  .pathway-card {
+    border-top-width: 3px !important;
+    padding: 1.25rem !important;
+  }
+  
+  .pathway-card h4 {
+    font-size: 0.95rem !important;
+  }
+  
+  /* Warning boxes */
+  .warning {
+    padding: 0.875rem 1rem !important;
+    font-size: 0.875rem !important;
+  }
+  
+  /* Infographic items */
+  .info-item {
+    padding: 1.25rem !important;
+  }
+  
+  .info-item .icon {
+    font-size: 1.75rem !important;
+  }
+  
+  .info-item h4 {
+    font-size: 0.9rem !important;
+  }
+  
+  .info-item p {
+    font-size: 0.82rem !important;
+  }
+}
+
+/* === Small phones (≤480px) === */
+@media (max-width: 480px) {
+  .hero h1 {
+    font-size: 1.5rem !important;
+  }
+  
+  .hero-stat .num {
+    font-size: 1.25rem !important;
+  }
+  
+  .info-card h2,
+  .card h3 {
+    font-size: 1.15rem !important;
+  }
+  
+  .data-table {
+    min-width: 500px;
+  }
+}
+
+/* === Touch target sizing === */
+@media (hover: none) and (pointer: coarse) {
+  a, button, .toc-inner a, .section-nav a {
+    min-height: var(--touch-target);
+    min-width: var(--touch-target);
+  }
+  
+  /* Increase tap area for links in text */
+  p a {
+    padding: 0.125rem 0;
+    border-bottom: 1px solid currentColor;
+  }
+}
+
+/* === Safe area for notched phones === */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .site-footer {
+    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
+  }
+}
+
+/* === Dark mode support (optional) === */
+@media (prefers-color-scheme: dark) {
+  /* Can be enabled later if needed */
+}
+```
+
+- [ ] **Step 1: Create mobile.css file**
+
+Create the file at `/app/cfc/web/css/mobile.css` with the content above.
+
+- [ ] **Step 2: Verify file exists**
+
+Run: `ls -la /app/cfc/web/css/mobile.css`
+Expected: File exists with ~200 lines
+
+---
+
+## Task 2: Add Mobile CSS to All Articles
+
+**Files to modify (30 articles):**
+- All files in `/app/cfc/web/articles/*.html`
+
+**Pattern to add in each file's `<head>`:**
+
+```html
+<link rel="stylesheet" href="../css/mobile.css">
+```
+
+Add this line AFTER the existing `<style>` block (before `</head>`).
+
+**Files list:**
+1. alzheimer.html
+2. cardio-cerebro.html
+3. cancer.html
+4. diabetes.html
+5. enagic-turmeric.html
+6. geo-faq-1-allergy.html
+7. geo-faq-2-attention.html
+8. geo-faq-3-immunity.html
+9. gut-microbiome-immune.html
+10. gut-microbiota-testing.html
+11. indicator-disease-risk.html
+12. indicator-gut-barrier.html
+13. indicator-microbiome-diversity.html
+14. indicator-neurotransmitters.html
+15. indicator-nutrition.html
+16. indicator-pathogens.html
+17. indicator-scfas.html
+18. indicator-vitamins.html
+19. metabolic-syndrome.html
+20. osteoporosis.html
+21. plastic-health.html
+22. prebiotics-guide.html
+23. prebiotics-science.html
+24. probiotics-guide.html
+25. probiotics-science.html
+26. puerarin.html
+27. tap-water-pollution.html
+28. turmeric.html
+29. uric-acid.html
+30. water-purifier-guide.html
+
+- [ ] **Step 1: Add mobile.css link to first 10 articles**
+
+For each file, add `<link rel="stylesheet" href="../css/mobile.css">` before `</head>`.
+
+- [ ] **Step 2: Add mobile.css link to next 10 articles**
+
+- [ ] **Step 3: Add mobile.css link to remaining 10 articles**
+
+- [ ] **Step 4: Verify all files updated**
+
+Run: `grep -l "mobile.css" /app/cfc/web/articles/*.html | wc -l`
+Expected: 30
+
+---
+
+## Task 3: Add Mobile CSS to Sales Pages
+
+**Files to modify:**
+- `/app/cfc/web/sales/sales.html`
+- `/app/cfc/web/sales/tap-water-sale.html`
+- `/app/cfc/web/sales/microplastic-sale.html`
+- `/app/cfc/web/sales/index.html`
+
+**Pattern to add:**
+
+```html
+<link rel="stylesheet" href="../css/mobile.css">
+```
+
+- [ ] **Step 1: Add mobile.css link to sales.html**
+
+- [ ] **Step 2: Add mobile.css link to tap-water-sale.html**
+
+- [ ] **Step 3: Add mobile.css link to microplastic-sale.html**
+
+- [ ] **Step 4: Add mobile.css link to index.html**
+
+- [ ] **Step 5: Verify all sales files updated**
+
+Run: `grep -l "mobile.css" /app/cfc/web/sales/*.html | wc -l`
+Expected: 4
+
+---
+
+## Task 4: Remove Conflicting Inline Media Queries
+
+Many articles have their own `@media` rules that may conflict with the shared mobile.css. We need to remove redundant inline rules that are now handled by mobile.css.
+
+**Common redundant patterns to remove:**
+
+```css
+/* These are now handled by mobile.css - safe to remove */
+@media (max-width: 768px) {
+  .hero { padding: 4rem 1.5rem 3rem; min-height: 50vh; }
+  .hero-stats { gap: 1rem; }
+  .hero-stat { min-width: 110px; padding: 0.75rem 1rem; }
+  .hero-stat .num { font-size: 1.5rem; }
+  section { padding: 3rem 0; }
+  .info-card { padding: 1.5rem; }
+  .pathway-grid { grid-template-columns: 1fr; }
+}
+```
+
+**Note:** Keep article-specific rules that mobile.css doesn't cover (e.g., custom component styles).
+
+- [ ] **Step 1: Identify articles with redundant media queries**
+
+Run: `grep -l "@media.*768px" /app/cfc/web/articles/*.html`
+
+- [ ] **Step 2: Remove redundant rules from turmeric.html**
+
+- [ ] **Step 3: Remove redundant rules from cancer.html**
+
+- [ ] **Step 4: Remove redundant rules from puerarin.html**
+
+- [ ] **Step 5: Remove redundant rules from other articles (batch)**
+
+- [ ] **Step 6: Verify no broken styles**
+
+Visually inspect 3-4 articles on mobile viewport.
+
+---
+
+## Task 5: Test Mobile Experience
+
+**Test checklist:**
+
+- [ ] **Step 1: Test hero section on mobile**
+  - Stats stack vertically
+  - Text is readable
+  - No horizontal overflow
+
+- [ ] **Step 2: Test tables on mobile**
+  - Horizontal scroll works
+  - Headers visible while scrolling
+
+- [ ] **Step 3: Test cards/grids on mobile**
+  - Single column layout
+  - Adequate spacing
+
+- [ ] **Step 4: Test TOC navigation on mobile**
+  - Horizontal scroll
+  - Touch targets adequate
+
+- [ ] **Step 5: Test screenshots on mobile**
+  - Responsive sizing
+  - Captions readable
+
+- [ ] **Step 6: Test footer on mobile**
+  - Columns stack
+  - Links accessible
+
+---
+
+## Global Constraints
+
+- Must work on iOS Safari and Chrome (Android)
+- No JavaScript changes required
+- Must not break existing desktop styles
+- Must maintain accessibility
+- Touch targets minimum 44x44px (Apple HIG)
+- Font size minimum 16px on mobile (prevents iOS zoom)
+
+---
+
+## Expected Outcomes
+
+| Metric | Before | After |
+|--------|--------|-------|
+| Mobile breakpoints | 768px only | 768px + 480px + touch |
+| Table usability | Overflow | Horizontal scroll |
+| Touch targets | Varies | 44px minimum |
+| Consistency | Per-article | Shared mobile.css |
+| Hero readability | Basic | Optimized |
+| Card layouts | Simple stack | Thumb-friendly |

web/articles/SCREENSHOT-TODO.md

@@ -0,0 +1,123 @@
+# 待处理截图清单
+
+> 目标：为以下14篇文章补充学术文献截图，插入位置已标注。
+> 截图保存至 `../img/ref-screenshots/`，命名规则见下方。
+> 插入HTML时使用：`<img src="../img/ref-screenshots/文件名" alt="描述" style="max-width:100%;border-radius:8px;display:block;margin:1rem 0;">`
+
+---
+
+## 一、indicator 文章（8篇）— 肠道菌群检测报告指标解读
+
+### 1. `indicator-microbiome-diversity.html` — 菌群平衡与多样性
+- **截图内容：** Shannon指数、菌群多样性与健康的关联研究
+- **推荐来源：** PubMed 搜索 "Shannon index gut microbiome diversity health"
+- **插入位置：** `<h3>这是衡量菌群多样性的"金标准"</h3>` 段落之后
+- **文件名：** `indicator-diversity-shannon.png`
+
+### 2. `indicator-gut-barrier.html` — 肠道屏障与代谢产物 ✅ 已有 gut-microbiome-damage.png
+- **已完成，无需操作**
+
+### 3. `indicator-neurotransmitters.html` — 神经递质
+- **截图内容：** 肠道菌群产生神经递质（5-HT、GABA、多巴胺）的研究证据
+- **推荐来源：** 搜索 "gut microbiome neurotransmitter production serotonin GABA"
+- **插入位置：** 菌群产生神经递质的段落之后
+- **文件名：** `indicator-neurotransmitter.png`
+
+### 4. `indicator-nutrition.html` — 营养代谢
+- **截图内容：** 菌群参与维生素合成、矿物质吸收的研究
+- **推荐来源：** 搜索 "gut microbiota vitamin synthesis nutrient absorption"
+- **插入位置：** 菌群与营养代谢相关的段落之后
+- **文件名：** `indicator-nutrition.png`
+
+### 5. `indicator-pathogens.html` — 有害菌与致病菌
+- **截图内容：** 肠道致病菌（如具核梭杆菌、艰难梭菌）与疾病的关联研究
+- **推荐来源：** 搜索 "Fusobacterium nucleatum colorectal cancer" 或 "Clostridioides difficile infection"
+- **插入位置：** 致病菌致病机制段落之后
+- **文件名：** `indicator-pathogen.png`
+
+### 6. `indicator-scfas.html` — 短链脂肪酸
+- **截图内容：** 短链脂肪酸（丁酸、丙酸、乙酸）的抗炎机制研究
+- **推荐来源：** 搜索 "short chain fatty acids butyrate anti-inflammatory gut"
+- **插入位置：** SCFA功能说明段落之后
+- **文件名：** `indicator-scfas.png`
+
+### 7. `indicator-vitamins.html` — 维生素
+- **截图内容：** 肠道菌群合成维生素K、B族维生素的研究
+- **推荐来源：** 搜索 "gut microbiome vitamin K B vitamins synthesis"
+- **插入位置：** 维生素与菌群关系段落之后
+- **文件名：** `indicator-vitamins.png`
+
+### 8. `indicator-disease-risk.html` — 疾病风险预测
+- **截图内容：** 菌群与疾病风险预测模型的研究（如糖尿病、心血管疾病风险）
+- **推荐来源：** 搜索 "gut microbiome disease risk prediction model"
+- **插入位置：** 疾病风险预测段落之后
+- **文件名：** `indicator-disease-risk.png`
+
+---
+
+## 二、益生菌/益生元文章（4篇）
+
+### 9. `prebiotics-science.html` — 益生元科学
+- **截图内容：** 益生元促进双歧杆菌等有益菌增殖的RCT研究
+- **推荐来源：** 搜索 "prebiotic bifidobacterium RCT inulin fructooligosaccharide"
+- **插入位置：** 益生元功效说明段落之后
+- **文件名：** `prebiotics-science.png`
+
+### 10. `probiotics-science.html` — 益生菌科学
+- **截图内容：** 益生菌调节肠道菌群、改善免疫的临床研究
+- **推荐来源：** 搜索 "probiotic Lactobacillus Bifidobacterium clinical trial gut microbiome"
+- **插入位置：** 益生菌功效说明段落之后
+- **文件名：** `probiotics-science.png`
+
+### 11. `prebiotics-guide.html` — 益生元指南
+- **截图内容：** 富含益生元的食物（洋葱、大蒜、香蕉等）的营养数据或膳食纤维含量研究
+- **推荐来源：** 搜索 "prebiotic foods dietary fiber content inulin"
+- **插入位置：** 食物推荐段落之后
+- **文件名：** `prebiotics-guide.png`
+
+### 12. `probiotics-guide.html` — 益生菌指南
+- **截图内容：** 发酵食品（酸奶、泡菜、纳豆等）的菌株含量研究
+- **推荐来源：** 搜索 "fermented foods probiotic content yogurt kimchi"
+- **插入位置：** 发酵食品推荐段落之后
+- **文件名：** `probiotics-guide.png`
+
+---
+
+## 三、其他文章（2篇）
+
+### 13. `water-purifier-guide.html` — 净水器选购指南
+- **截图内容：** 电解还原水（富氢水）的抗氧化/抗炎临床研究证据
+- **推荐来源：** 搜索 "hydrogen rich water clinical trial antioxidant" 或复用已有截图 `nature-tapwater-page*.png`
+- **插入位置：** 还原水功效说明段落之后
+- **文件名：** `water-purifier-hydrogen.png`
+
+### 14. `geo-faq-2-attention.html` — 注意力/学习力FAQ
+- **截图内容：** 肠道菌群与大脑认知/注意力的关联研究（肠-脑轴）
+- **推荐来源：** 搜索 "gut brain axis attention cognitive function microbiome"
+- **插入位置：** 菌群影响大脑功能的段落之后
+- **文件名：** `geo-faq-brain-gut.png`
+
+### 15. `geo-faq-3-immunity.html` — 免疫力FAQ
+- **截图内容：** 肠道菌群调控免疫系统的里程碑研究
+- **推荐来源：** 搜索 "gut microbiome immune system regulation review"
+- **插入位置：** 免疫与菌群关系的段落之后
+- **文件名：** `geo-faq-immunity.png`
+
+---
+
+## 截图规范
+
+1. **尺寸：** 宽度不超过 1200px，高度适中（能看清文字即可）
+2. **格式：** PNG 优先（保留文字清晰度），JPG 也可
+3. **标注：** 如原文为英文，截图后无需翻译，但建议在 alt 属性中写清中文含义
+4. **版权：** 学术论文截图属于合理引用（fair use），标注出处即可
+5. **命名：** 按上方建议的文件名命名，保存到 `web/img/ref-screenshots/` 目录
+
+## 已有可复用截图（无需重复制作）
+
+| 文件名 | 用途 |
+|---|---|
+| `gut-microbiome-damage.png` | 肠漏机制（已在3篇文章中使用） |
+| `cardio_ref_gut_leak.png` | 肠漏与心血管 |
+| `enagic-comparison.svg` | Enagic产品对比 |
+| `nature-tapwater-page*.png` | 自来水安全研究（23张） |

web/articles/alzheimer.html

@@ -657,6 +657,7 @@
     .compare-table th, .compare-table td { padding: 0.5rem 0.75rem; }
   }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/cancer.html

@@ -243,8 +243,6 @@
 
   /* GRID */
   .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
-  @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }
-
   /* CARDS */
   .card {
     background: var(--bg-card);
@@ -434,6 +432,7 @@
   .footer-legal a:hover { color: #27ae60; }
   .anchor { scroll-margin-top: 72px; }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/cardio-cerebro.html

@@ -264,7 +264,7 @@
   /* GRID */
   .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
-  @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
+
 
   /* CARDS */
   .card {
@@ -570,6 +570,7 @@
   }
   .shot-placeholder .shot-icon { font-size: 2.2rem; opacity: 0.35; }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/diabetes.html

@@ -927,8 +927,9 @@
   .citation-card .link:hover { text-decoration: underline; }
 
   /* ── RESPONSIVE additions ── */
-  @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }
+
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/enagic-turmeric.html

@@ -100,11 +100,7 @@
   }
   .product-card h3 { color: #92400e; margin-top: 0; }
 
-  @media (max-width: 768px) {
-    .hero { padding: 3rem 1.5rem 2rem; }
-    section { padding: 3rem 0; }
-    .spec-grid { grid-template-columns: 1fr; }
-  }
+  @media (max-width: 768px) { .spec-grid { grid-template-columns: 1fr; } }
 
   .site-footer { background: #2d1810; color: #fff; padding: 3rem 0 0; margin-top: 3rem; }
   .footer-inner { text-align: center; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@@ -112,6 +108,7 @@
   .footer-bottom { text-align: center; padding: 1.5rem 0; }
   .footer-bottom p { font-size: 0.75rem; color: rgba(255,255,255,.4); }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/geo-faq-1-allergy.html

@@ -237,6 +237,7 @@
     }
     .geo-related a:hover { text-decoration: underline; }
   </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/geo-faq-2-attention.html

@@ -248,6 +248,7 @@
       .data-card { flex-direction: column; }
     }
   </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/geo-faq-3-immunity.html

@@ -248,6 +248,7 @@
       .steps-flow { flex-direction: column; }
     }
   </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/gut-microbiome-immune.html

@@ -522,18 +522,11 @@
 
     /* ===== Responsive ===== */
     @media (max-width: 768px) {
-      .hero { padding: 5rem 1rem 3rem; min-height: 50vh; }
-      .hero-stats { gap: 0.8rem; }
-      .hero-stat { padding: 0.7rem 1rem; min-width: 100px; }
-      .hero-stat .num { font-size: 1.3rem; }
-      h2 { font-size: 1.4rem; }
-      .grid-2, .grid-3 { grid-template-columns: 1fr; }
-      .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
-      .toc-inner { padding: 0.5rem 1rem; }
       .step-flow { flex-direction: column; }
       .step-flow-arrow { transform: rotate(90deg); }
     }
   </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/gut-microbiota-testing.html

@@ -179,12 +179,6 @@
   .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
 
-  @media (max-width: 768px) {
-    .grid-2, .grid-3 { grid-template-columns: 1fr; }
-    .hero-stats { gap: 1.2rem; }
-    .hero-stat .num { font-size: 1.4rem; }
-  }
-
   .list-styled { list-style: none; padding-left: 0; }
   .list-styled li {
     position: relative;
@@ -444,6 +438,7 @@
   }
 
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/indicator-disease-risk.html

@@ -86,7 +86,6 @@
   .cta-section a:hover { text-decoration:underline; }
   .back-link { display:inline-block; margin-bottom:1.5rem; font-size:0.88rem; color:var(--accent); text-decoration:none; font-weight:600; }
   .back-link:hover { text-decoration:underline; }
-  @media(max-width:768px) { .hero{padding:4rem 1.2rem 2.5rem;} .section{padding:2rem 1.2rem;} }
   .site-footer { background:#f8f8f8; border-top:2px solid var(--accent); padding:3rem 1.5rem; }
   .site-footer .footer-inner { max-width:var(--max-width); margin:0 auto; display:flex; flex-wrap:wrap; gap:2rem; }
   .site-footer .footer-brand { flex:1; min-width:250px; }
@@ -102,6 +101,7 @@
   .site-footer .footer-col a:hover { color:var(--accent); }
   .site-footer .footer-legal { text-align:center; font-size:0.75rem; color:var(--text-muted); margin-top:2rem; padding-top:1.5rem; border-top:1px solid #eee; }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/indicator-gut-barrier.html

@@ -43,7 +43,6 @@
   .cta-section h2{color:white;}.cta-section p{color:rgba(255,255,255,0.85);}
   .cta-section a{color:#93c5fd;font-weight:600;text-decoration:none;}.cta-section a:hover{text-decoration:underline;}
   .back-link{display:inline-block;margin-bottom:1.5rem;font-size:0.88rem;color:var(--accent);text-decoration:none;font-weight:600;}.back-link:hover{text-decoration:underline;}
-  @media(max-width:768px){.hero{padding:4rem 1.2rem 2.5rem;}.section{padding:2rem 1.2rem;}}
   .site-footer{background:#f8f8f8;border-top:2px solid var(--accent);padding:3rem 1.5rem;}
   .site-footer .footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;}
   .site-footer .footer-brand{flex:1;min-width:250px;}
@@ -59,6 +58,7 @@
   .site-footer .footer-col a:hover{color:var(--accent);}
   .site-footer .footer-legal{text-align:center;font-size:0.75rem;color:var(--text-muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid #eee;}
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/indicator-microbiome-diversity.html

@@ -45,7 +45,7 @@
   .cta-section h2{color:white;}.cta-section p{color:rgba(255,255,255,0.85);}
   .cta-section a{color:#6ee7b7;font-weight:600;text-decoration:none;}.cta-section a:hover{text-decoration:underline;}
   .back-link{display:inline-block;margin-bottom:1.5rem;font-size:0.88rem;color:var(--accent);text-decoration:none;font-weight:600;}.back-link:hover{text-decoration:underline;}
-  @media(max-width:768px){.hero{padding:4rem 1.2rem 2.5rem;}.section{padding:2rem 1.2rem;}.metric-grid{grid-template-columns:1fr;}}
+  @media(max-width:768px){.metric-grid{grid-template-columns:1fr;}}
   .site-footer{background:#f8f8f8;border-top:2px solid var(--accent);padding:3rem 1.5rem;}
   .site-footer .footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;}
   .site-footer .footer-brand{flex:1;min-width:250px;}
@@ -61,6 +61,7 @@
   .site-footer .footer-col a:hover{color:var(--accent);}
   .site-footer .footer-legal{text-align:center;font-size:0.75rem;color:var(--text-muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid #eee;}
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/indicator-neurotransmitters.html

@@ -49,7 +49,7 @@
   .cta-section h2{color:white;}.cta-section p{color:rgba(255,255,255,0.85);}
   .cta-section a{color:#c4b5fd;font-weight:600;text-decoration:none;}.cta-section a:hover{text-decoration:underline;}
   .back-link{display:inline-block;margin-bottom:1.5rem;font-size:0.88rem;color:var(--accent);text-decoration:none;font-weight:600;}.back-link:hover{text-decoration:underline;}
-  @media(max-width:768px){.hero{padding:4rem 1.2rem 2.5rem;}.section{padding:2rem 1.2rem;}.neuro-grid{grid-template-columns:1fr;}}
+  @media(max-width:768px){.neuro-grid{grid-template-columns:1fr;}}
   .site-footer{background:#f8f8f8;border-top:2px solid var(--accent);padding:3rem 1.5rem;}
   .site-footer .footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;}
   .site-footer .footer-brand{flex:1;min-width:250px;}
@@ -65,6 +65,7 @@
   .site-footer .footer-col a:hover{color:var(--accent);}
   .site-footer .footer-legal{text-align:center;font-size:0.75rem;color:var(--text-muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid #eee;}
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/indicator-nutrition.html

@@ -45,7 +45,7 @@
   .cta-section h2{color:white;}.cta-section p{color:rgba(255,255,255,0.85);}
   .cta-section a{color:#fdba74;font-weight:600;text-decoration:none;}.cta-section a:hover{text-decoration:underline;}
   .back-link{display:inline-block;margin-bottom:1.5rem;font-size:0.88rem;color:var(--accent);text-decoration:none;font-weight:600;}.back-link:hover{text-decoration:underline;}
-  @media(max-width:768px){.hero{padding:4rem 1.2rem 2.5rem;}.section{padding:2rem 1.2rem;}.nutrient-grid{grid-template-columns:1fr;}}
+  @media(max-width:768px){.nutrient-grid{grid-template-columns:1fr;}}
   .site-footer{background:#f8f8f8;border-top:2px solid var(--accent);padding:3rem 1.5rem;}
   .site-footer .footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;}
   .site-footer .footer-brand{flex:1;min-width:250px;}
@@ -61,6 +61,7 @@
   .site-footer .footer-col a:hover{color:var(--accent);}
   .site-footer .footer-legal{text-align:center;font-size:0.75rem;color:var(--text-muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid #eee;}
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/indicator-pathogens.html

@@ -44,7 +44,7 @@
   .cta-section h2{color:white;}.cta-section p{color:rgba(255,255,255,0.85);}
   .cta-section a{color:#fca5a5;font-weight:600;text-decoration:none;}.cta-section a:hover{text-decoration:underline;}
   .back-link{display:inline-block;margin-bottom:1.5rem;font-size:0.88rem;color:var(--accent);text-decoration:none;font-weight:600;}.back-link:hover{text-decoration:underline;}
-  @media(max-width:768px){.hero{padding:4rem 1.2rem 2.5rem;}.section{padding:2rem 1.2rem;}.pathogen-grid{grid-template-columns:repeat(2,1fr);}}
+  @media(max-width:768px){.pathogen-grid{grid-template-columns:repeat(2,1fr);}}
   .site-footer{background:#f8f8f8;border-top:2px solid var(--accent);padding:3rem 1.5rem;}
   .site-footer .footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;}
   .site-footer .footer-brand{flex:1;min-width:250px;}
@@ -60,6 +60,7 @@
   .site-footer .footer-col a:hover{color:var(--accent);}
   .site-footer .footer-legal{text-align:center;font-size:0.75rem;color:var(--text-muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid #eee;}
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/indicator-scfas.html

@@ -47,7 +47,7 @@
   .cta-section h2{color:white;}.cta-section p{color:rgba(255,255,255,0.85);}
   .cta-section a{color:#86efac;font-weight:600;text-decoration:none;}.cta-section a:hover{text-decoration:underline;}
   .back-link{display:inline-block;margin-bottom:1.5rem;font-size:0.88rem;color:var(--accent);text-decoration:none;font-weight:600;}.back-link:hover{text-decoration:underline;}
-  @media(max-width:768px){.hero{padding:4rem 1.2rem 2.5rem;}.section{padding:2rem 1.2rem;}.scfa-grid{grid-template-columns:1fr;}}
+  @media(max-width:768px){.scfa-grid{grid-template-columns:1fr;}}
   .site-footer{background:#f8f8f8;border-top:2px solid var(--accent);padding:3rem 1.5rem;}
   .site-footer .footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;}
   .site-footer .footer-brand{flex:1;min-width:250px;}
@@ -63,6 +63,7 @@
   .site-footer .footer-col a:hover{color:var(--accent);}
   .site-footer .footer-legal{text-align:center;font-size:0.75rem;color:var(--text-muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid #eee;}
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/indicator-vitamins.html

@@ -44,7 +44,7 @@
   .cta-section h2{color:white;}.cta-section p{color:rgba(255,255,255,0.85);}
   .cta-section a{color:#fde047;font-weight:600;text-decoration:none;}.cta-section a:hover{text-decoration:underline;}
   .back-link{display:inline-block;margin-bottom:1.5rem;font-size:0.88rem;color:var(--accent);text-decoration:none;font-weight:600;}.back-link:hover{text-decoration:underline;}
-  @media(max-width:768px){.hero{padding:4rem 1.2rem 2.5rem;}.section{padding:2rem 1.2rem;}.vitamin-grid{grid-template-columns:repeat(2,1fr);}}
+  @media(max-width:768px){.vitamin-grid{grid-template-columns:repeat(2,1fr);}}
   .site-footer{background:#f8f8f8;border-top:2px solid var(--accent);padding:3rem 1.5rem;}
   .site-footer .footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;}
   .site-footer .footer-brand{flex:1;min-width:250px;}
@@ -60,6 +60,7 @@
   .site-footer .footer-col a:hover{color:var(--accent);}
   .site-footer .footer-legal{text-align:center;font-size:0.75rem;color:var(--text-muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid #eee;}
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/metabolic-syndrome.html

@@ -186,12 +186,6 @@
   .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
 
-  @media (max-width: 768px) {
-    .grid-2, .grid-3 { grid-template-columns: 1fr; }
-    .hero-stats { gap: 1.2rem; }
-    .hero-stat .num { font-size: 1.4rem; }
-  }
-
   /* LIST */
   .list-styled { list-style: none; padding-left: 0; }
   .list-styled li {
@@ -381,6 +375,7 @@
 
   .anchor { scroll-margin-top: 72px; }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/osteoporosis.html

@@ -43,7 +43,7 @@ body{font-family:var(--font);font-size:1rem;line-height:1.8;color:var(--text-pri
 .section-title{font-size:clamp(1.4rem,3vw,2.1rem);font-weight:800;margin-bottom:1rem;line-height:1.3}
 .section-intro{font-size:1.05rem;color:var(--text-secondary);margin-bottom:2rem;max-width:820px;line-height:1.85}
 .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
-@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}}
+
 .card{background:var(--bg-card);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow-card);border:1px solid rgba(0,0,0,0.04);transition:transform 0.2s,box-shadow 0.2s}
 .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
 .card-icon{font-size:2.4rem;margin-bottom:0.75rem;display:block}.card h3{font-size:1.1rem;font-weight:700;margin-bottom:0.6rem}.card p{color:var(--text-secondary);font-size:0.92rem;line-height:1.75}
@@ -204,6 +204,7 @@ td{padding:0.7rem 1rem;border-bottom:1px solid #eee;color:var(--text-secondary);
   }
   .footer-legal a:hover { color: var(--accent, #27ae60); }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 <section class="hero"><div class="hero-particles"><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div></div><div class="hero-content"><div class="hero-badge">🦴 科学循证 · 主动健康</div><h1>骨质疏松<br><span class="accent">症·病·因与主动健康干预</span></h1><p class="hero-sub">中国约9000万人骨量减少，7000万骨质疏松患者。<br>骨骼的求救信号出现时，骨量往往已流失30-50%——理解这个沉默杀手的本质，才能真正预防骨折。</p><div class="hero-stats"><div class="hero-stat"><span class="num">7000万</span><span class="label">骨质疏松患者</span></div><div class="hero-stat"><span class="num">9000万</span><span class="label">骨量减少人群</span></div><div class="hero-stat"><span class="num">40%</span><span class="label">50岁以上女性患病率</span></div><div class="hero-stat"><span class="num">20%</span><span class="label">髋部骨折1年死亡率</span></div></div></div><a href="#symptoms" class="scroll-hint"><span>开始阅读</span><div class="scroll-arrow"></div></a></section>

web/articles/plastic-health.html

@@ -588,6 +588,7 @@
         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
     })(window, document, "clarity", "script", "xj4p74ra9m");
   </script>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/prebiotics-guide.html

@@ -609,6 +609,7 @@
     .compare-table th, .compare-table td { padding: 0.5rem 0.75rem; }
   }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/prebiotics-science.html

@@ -612,6 +612,7 @@
     .compare-table th, .compare-table td { padding: 0.5rem 0.75rem; }
   }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/probiotics-guide.html

@@ -210,7 +210,7 @@
   /* Grids */
   .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
-  @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
+
 
   .data-grid {
     display: grid;
@@ -418,6 +418,7 @@
     .step-flow-item { min-width: 80px; padding: 0.75rem; }
   }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/probiotics-science.html

@@ -548,9 +548,7 @@
   .btn-outline:hover { border-color: white; transform: translateY(-2px); }
 
   @media (max-width: 768px) {
-    .two-col-grid, .two-col-grid-3, .grid-2, .grid-3 { grid-template-columns: 1fr; }
-    .hero { padding: 5rem 1.5rem 3rem; min-height: auto; }
-    .hero-stats { flex-direction: column; align-items: center; }
+    .two-col-grid, .two-col-grid-3 { grid-template-columns: 1fr; }
   }
 
   /* Footer */
@@ -641,6 +639,7 @@
   }
   .footer-legal a:hover { color: var(--accent, #27ae60); }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/puerarin.html

@@ -0,0 +1,908 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>葛根素：解酒护肝的天然异黄酮——从传统草药到循证科学</title>
+  <meta name="description" content="葛根素（Puerarin）是葛根中的核心活性成分，具有解酒护肝、改善胰岛素敏感性、保护心血管等多重功效。本文基于PubMed临床研究证据，系统解读葛根素的药理机制、循证功效与科学服用指南。">
+  <meta name="keywords" content="葛根素, Puerarin, 葛根, 解酒, 护肝, 胰岛素敏感性, 心血管, 异黄酮">
+  <meta name="author" content="浠艾福CareFamily">
+  <link rel="icon" href="../img/favicon.png" type="image/png">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+  :root {
+    --accent: #27ae60;
+    --accent-light: #e8f5e9;
+    --blue: #2196f3;
+    --blue-light: #e3f2fd;
+    --green: #4caf50;
+    --green-light: #e8f5e9;
+    --orange: #ff9800;
+    --text-primary: #1a202c;
+    --text-secondary: #4a5568;
+    --text-muted: #718096;
+    --bg-main: #f7fafc;
+    --bg-alt: #edf2f7;
+    --bg-dark: #1a1a3a;
+    --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
+    --shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
+    --radius: 12px;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html { scroll-behavior: smooth; }
+  body {
+    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-main);
+    color: var(--text-secondary);
+    line-height: 1.8;
+    -webkit-font-smoothing: antialiased;
+  }
+  .container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }
+
+  /* HERO */
+  .hero {
+    position: relative;
+    background: linear-gradient(135deg, #1a5632 0%, #2d8659 50%, #27ae60 100%);
+    color: white;
+    padding: 6rem 1.5rem 4rem;
+    min-height: 60vh;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
+  .hero::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    opacity: 0.3;
+  }
+  .hero-content { position: relative; z-index: 1; text-align: center; width: 100%; }
+  .hero-badge {
+    display: inline-block;
+    background: rgba(255,255,255,0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 999px;
+    padding: 0.5rem 1.5rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 1.5rem;
+    color: white;
+  }
+  .hero h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    line-height: 1.3;
+    color: white;
+  }
+  .hero p { font-size: 1.1rem; opacity: 0.9; max-width: 700px; margin: 0 auto 2rem; line-height: 1.8; color: white; }
+  .hero-stats {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+  .hero-stat {
+    background: rgba(255,255,255,0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: var(--radius);
+    padding: 1rem 1.5rem;
+    text-align: center;
+    min-width: 140px;
+  }
+  .hero-stat .num { font-size: 2rem; font-weight: 700; display: block; color: white; }
+  .hero-stat .label { font-size: 0.8rem; opacity: 0.8; color: white; }
+
+  /* TOC */
+  .toc {
+    background: white;
+    border-bottom: 1px solid #e2e8f0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  }
+  .toc-inner {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 0.75rem 1.5rem;
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .toc-inner::-webkit-scrollbar { display: none; }
+  .toc-inner a {
+    white-space: nowrap;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    transition: all 0.2s;
+  }
+  .toc-inner a:hover { background: var(--accent-light); color: var(--accent); }
+
+  /* SECTIONS */
+  section { padding: 4rem 0; }
+  section.alt { background: white; }
+  h2 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+  }
+  h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 1.5rem 0 0.75rem;
+    color: var(--text-primary);
+  }
+  p { margin-bottom: 1rem; color: var(--text-secondary); }
+  a { color: var(--accent); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+
+  /* CARDS */
+  .info-card {
+    background: white;
+    border-radius: var(--radius);
+    padding: 2rem;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-card);
+    transition: box-shadow 0.3s;
+  }
+  .info-card:hover { box-shadow: var(--shadow-hover); }
+  .info-card h2 { font-size: 1.5rem; }
+  .emoji { font-size: 1.2em; }
+
+  /* HIGHLIGHT BOXES */
+  .highlight-box {
+    background: var(--accent-light);
+    border-left: 4px solid var(--accent);
+    border-radius: 0 var(--radius) var(--radius) 0;
+    padding: 1.25rem 1.5rem;
+    margin: 1.5rem 0;
+  }
+  .highlight-box.info {
+    background: var(--blue-light);
+    border-left-color: var(--blue);
+  }
+  .highlight-box.success {
+    background: var(--green-light);
+    border-left-color: var(--green);
+  }
+  .highlight-box.alert {
+    background: #fff5f5;
+    border-left-color: #e53e3e;
+  }
+
+  /* EVIDENCE SCREENSHOT BLOCK */
+  .screenshot-block {
+    margin: 1.5rem 0;
+    border-radius: var(--radius);
+    overflow: hidden;
+    box-shadow: var(--shadow-card);
+    border: 1px solid #E2E8F0;
+    background: #f7fafc;
+  }
+  .screenshot-block svg,
+  .screenshot-block img { width: 100%; display: block; }
+  .screenshot-block .caption {
+    padding: 1rem 1.5rem;
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    border-top: 1px solid #E2E8F0;
+    line-height: 1.6;
+  }
+  .screenshot-block .caption strong { color: var(--text-primary); }
+  .screenshot-block .caption a { color: var(--blue); }
+
+  /* WARNING */
+  .warning {
+    background: #fffaf0;
+    border: 1px solid #fbd38d;
+    border-left: 4px solid var(--orange);
+    border-radius: 0 var(--radius) var(--radius) 0;
+    padding: 1rem 1.25rem;
+    margin: 1.5rem 0;
+    font-size: 0.9rem;
+  }
+
+  /* DATA TABLE */
+  .data-table-wrap {
+    overflow-x: auto;
+    margin: 1.5rem 0;
+  }
+  .data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+  }
+  .data-table th {
+    background: var(--bg-alt);
+    padding: 0.75rem 1rem;
+    text-align: left;
+    font-weight: 600;
+    border-bottom: 2px solid #e2e8f0;
+    color: var(--text-primary);
+  }
+  .data-table td {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #e2e8f0;
+    color: var(--text-secondary);
+  }
+  .data-table tr:hover td { background: #fafafa; }
+
+  /* INFOGRAPHIC */
+  .infographic {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin: 1.5rem 0;
+  }
+  .info-item {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    text-align: center;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .info-item:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+  }
+  .info-item .icon { font-size: 2rem; margin-bottom: 0.75rem; }
+  .info-item h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); }
+  .info-item p { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
+
+  /* PATHWAY BOX */
+  .pathway-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin: 1.5rem 0;
+  }
+  .pathway-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    border-top: 4px solid var(--accent);
+  }
+  .pathway-card h4 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    color: var(--accent);
+  }
+  .pathway-card p { font-size: 0.9rem; margin: 0; }
+
+  /* EVIDENCE LINK */
+  .evidence-link {
+    background: white;
+    border-radius: 12px;
+    padding: 1.25rem 1.5rem;
+    margin: 1rem 0;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
+    border-left: 4px solid var(--blue);
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  .evidence-link .link-icon { font-size: 1.5rem; flex-shrink: 0; }
+  .evidence-link h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text-primary); }
+  .evidence-link p { font-size: 0.88rem; color: var(--text-muted); margin: 0; line-height: 1.6; }
+  .evidence-link .tag {
+    display: inline-block;
+    font-size: 0.7rem;
+    padding: 0.15rem 0.6rem;
+    border-radius: 999px;
+    font-weight: 600;
+    margin-top: 0.4rem;
+  }
+  .tag-strong { background: #d1fae5; color: #065f46; }
+  .tag-moderate { background: #fef3c7; color: #92400e; }
+  .tag-preliminary { background: #e0e7ff; color: #3730a3; }
+
+  /* REFERENCES */
+  .ref-list { padding-left: 1.5rem; margin-top: 1rem; }
+  .ref-list li {
+    margin-bottom: 1.25rem;
+    font-size: 0.88rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+  }
+  .ref-list strong { color: var(--text-primary); font-weight: 600; }
+  .ref-list .translation { display: block; color: var(--text-muted); font-size: 0.82rem; margin-top: 0.2rem; }
+
+  /* ANCHOR nav */
+  .section-nav {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+  }
+  .section-nav a {
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    padding: 0.5rem 1rem;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: all 0.2s;
+  }
+  .section-nav a:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    text-decoration: none;
+  }
+
+  /* Footer */
+  .site-footer {
+    background: var(--bg-dark, #1a1a3a);
+    color: #fff;
+    padding: 3rem 0 0;
+  }
+  .footer-inner {
+    display: flex;
+    justify-content: space-between;
+    gap: 3rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid rgba(255,255,255,.1);
+    flex-wrap: wrap;
+  }
+  .footer-brand .logo-text {
+    color: #fff;
+    font-size: 1.25rem;
+    font-weight: 700;
+  }
+  .footer-brand .logo-tag {
+    color: var(--accent, #27ae60);
+    font-weight: 600;
+  }
+  .footer-brand p {
+    color: rgba(255,255,255,.6);
+    font-size: 0.85rem;
+    margin-top: 0.5rem;
+    max-width: 300px;
+    line-height: 1.7;
+  }
+  .footer-links {
+    display: flex;
+    gap: 3rem;
+    flex-wrap: wrap;
+  }
+  .footer-col h4 {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .06em;
+    color: rgba(255,255,255,.5);
+    margin-bottom: 1rem;
+  }
+  .footer-col ul { list-style: none; }
+  .footer-col ul li { margin-bottom: 0.5rem; }
+  .footer-col ul li a {
+    font-size: 0.85rem;
+    color: rgba(255,255,255,.7);
+    transition: color 0.2s;
+    text-decoration: none;
+  }
+  .footer-col ul li a:hover { color: var(--accent, #27ae60); }
+  .footer-contact li {
+    font-size: 0.85rem;
+    color: rgba(255,255,255,.6);
+    line-height: 1.8;
+  }
+  .footer-contact li a { color: rgba(255,255,255,.7); }
+  .footer-bottom {
+    text-align: center;
+    padding: 1.5rem 0;
+  }
+  .footer-bottom p {
+    font-size: 0.75rem;
+    color: rgba(255,255,255,.4);
+  }
+  .footer-logo-img {
+    display: block;
+    flex-shrink: 0;
+    border-radius: 10px;
+    margin-bottom: 0.5rem;
+    object-fit: contain;
+  }
+  .footer-legal {
+    margin-top: 0.3rem;
+    font-size: 0.75rem;
+    color: rgba(255,255,255,.4);
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .footer-legal a {
+    color: rgba(255,255,255,.4);
+    text-decoration: underline;
+  }
+  .footer-legal a:hover { color: var(--accent, #27ae60); }
+</style>
+<link rel="stylesheet" href="../css/mobile.css">
+</head>
+<body>
+
+<!-- HERO -->
+<div class="hero">
+  <div class="hero-content">
+    <div class="hero-badge">🧪 天然活性成分</div>
+    <h1>葛根素：解酒护肝的天然异黄酮</h1>
+    <p>葛根素（Puerarin）是传统中药葛根中的核心异黄酮成分——现代药理学证实其具有解酒护肝、改善胰岛素敏感性、保护心脑血管等多重功效。PubMed收录超过400项相关研究，多项RCT验证其临床价值。<br><small style="color:rgba(255,255,255,0.7);font-size:0.85rem;">Shen 2012 RCT · Li 2019 Meta分析 · Guo 2018 系统综述</small></p>
+    <div class="hero-stats">
+      <div class="hero-stat">
+        <span class="num">400+</span>
+        <span class="label">PubMed收录研究</span>
+      </div>
+      <div class="hero-stat">
+        <span class="num">3</span>
+        <span class="label">核心药理通路</span>
+      </div>
+      <div class="hero-stat">
+        <span class="num">2000+</span>
+        <span class="label">年传统应用历史</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- TOC -->
+<nav class="toc">
+  <div class="toc-inner">
+    <a href="#what-is">一、葛根素是什么</a>
+    <a href="#mechanism">二、核心药理机制</a>
+    <a href="#efficacy">三、循证功效</a>
+    <a href="#how-to-use">四、怎么用</a>
+    <a href="#safety">五、安全性</a>
+    <a href="#references">参考文献</a>
+  </div>
+</nav>
+
+<!-- ===== SECTION 01: WHAT IS ===== -->
+<section id="what-is">
+  <div class="container">
+    <h2><span class="emoji">🌿</span> 一、葛根素是什么——从传统草药到现代分子</h2>
+
+    <div class="info-card">
+      <h2>葛根：千年解酒良药</h2>
+      <p>葛根（<em>Pueraria lobata</em>）是豆科植物的干燥根，在中国传统医学中已有超过2000年的应用历史。《神农本草经》将葛根列为中品，主治"消渴、身大热、呕吐、诸痹"。现代药理学研究发现，葛根中的核心活性成分——<strong>葛根素（Puerarin）</strong>——是其解酒护肝、改善代谢等功效的物质基础。</p>
+      <div class="highlight-box success">
+        <strong>📊 核心数据：</strong>葛根素约占葛根总异黄酮的60-80%，是含量最高的单体成分。现代提取工艺可获得纯度≥98%的葛根素单体，为临床研究和产品开发提供了标准化基础。<sup><a href="#ref-1">[1]</a></sup>
+      </div>
+    </div>
+
+    <h3>葛根素的分子特征</h3>
+    <p>葛根素属于异黄酮类化合物，化学名为8-β-D-吡喃葡萄糖基-4',7-二羟基异黄酮。其分子结构决定了独特的药理特性：</p>
+    <div class="infographic">
+      <div class="info-item">
+        <div class="icon">🧬</div>
+        <h4>异黄酮骨架</h4>
+        <p>与大豆异黄酮类似的酚环结构，赋予其抗氧化和植物雌激素活性</p>
+      </div>
+      <div class="info-item">
+        <div class="icon">💧</div>
+        <h4>水溶性适中</h4>
+        <p>相比其他异黄酮，葛根素水溶性较好，有利于口服吸收和制剂开发</p>
+      </div>
+      <div class="info-item">
+        <div class="icon">🎯</div>
+        <h4>多靶点作用</h4>
+        <p>可同时作用于PPARγ、NF-κB、Nrf2等多条信号通路，实现多系统保护</p>
+      </div>
+    </div>
+
+    <div class="highlight-box info">
+      <strong>💡 关键认知：</strong>葛根≠葛根素。普通葛根粉中葛根素含量仅约1-3%，而临床研究使用的剂量通常为100-600mg纯葛根素/天——相当于每天吃几十克到上百克葛根粉，这不现实。选择标准化提取物是关键。
+    </div>
+  </div>
+</section>
+
+<!-- ===== SECTION 02: MECHANISM ===== -->
+<section id="mechanism" class="alt">
+  <div class="container">
+    <h2><span class="emoji">🔬</span> 二、核心药理机制——三大通路解析</h2>
+
+    <div class="info-card">
+      <h2>解酒护肝的分子基础</h2>
+      <p>葛根素的"解酒"功效并非简单的"加速酒精代谢"，而是通过多条通路实现系统性保护：</p>
+
+      <div class="pathway-grid">
+        <div class="pathway-card">
+          <h4>① 乙醛脱氢酶（ALDH）激活</h4>
+          <p>酒精在体内首先被乙醇脱氢酶（ADH）代谢为乙醛（毒性物质），再由乙醛脱氢酶（ALDH）代谢为无毒的乙酸。葛根素可<strong>增强ALDH活性</strong>，加速乙醛清除，从而缓解酒后不适。<sup><a href="#ref-2">[2]</a></sup></p>
+        </div>
+        <div class="pathway-card">
+          <h4>② 肝脏脂肪代谢调控</h4>
+          <p>通过激活PPARγ通路，葛根素可促进肝脏脂肪酸β-氧化、抑制脂肪合成相关基因表达，从而减少酒精诱导的肝脏脂肪变性（脂肪肝）。这是其护肝作用的核心机制。<sup><a href="#ref-3">[3]</a></sup></p>
+        </div>
+        <div class="pathway-card">
+          <h4>③ 抗氧化与抗炎</h4>
+          <p>葛根素通过激活Nrf2/ARE通路增强内源性抗氧化酶（SOD、GSH-Px）活性，同时抑制NF-κB通路减少促炎因子释放，实现<strong>双重保护</strong>——既清除自由基，又抑制炎症级联反应。<sup><a href="#ref-4">[4]</a></sup></p>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-card">
+      <h2>改善胰岛素敏感性的机制</h2>
+      <p>葛根素改善糖代谢的机制与传统降糖药不同，它通过多靶点协同实现：</p>
+      <ul style="margin: 1rem 0 1rem 1.5rem; color: var(--text-secondary);">
+        <li><strong>激活AMPK</strong>：AMPK是细胞能量代谢的"总开关"，葛根素可直接激活AMPK，促进葡萄糖摄取和脂肪酸氧化<sup><a href="#ref-5">[5]</a></sup></li>
+        <li><strong>改善胰岛素信号通路</strong>：增强IRS-1/PI3K/Akt通路活性，提高胰岛素敏感性<sup><a href="#ref-6">[6]</a></sup></li>
+        <li><strong>抑制α-葡萄糖苷酶</strong>：减缓肠道碳水化合物吸收，降低餐后血糖峰值<sup><a href="#ref-7">[7]</a></sup></li>
+        <li><strong>保护胰岛β细胞</strong>：通过抗氧化和抗炎作用，减少高糖诱导的β细胞凋亡</li>
+      </ul>
+      <div class="highlight-box info">
+        <strong>💡 与传统降糖药的区别：</strong>二甲双胍主要激活AMPK，磺脲类主要刺激胰岛素分泌。葛根素同时作用于多条通路，且作为膳食补充剂，安全性更高，适合早期干预和辅助治疗。
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ===== SECTION 03: EFFICACY ===== -->
+<section id="efficacy">
+  <div class="container">
+    <h2><span class="emoji">📋</span> 三、循证功效——临床研究证据汇总</h2>
+    <p>葛根素的健康功效已在多项临床研究中得到验证。以下按证据强度和健康领域整理：</p>
+
+    <div class="evidence-link">
+      <div class="link-icon">🍺</div>
+      <div>
+        <h4>解酒护肝：加速乙醛清除，减轻肝脏损伤</h4>
+        <p>Shen H et al. (2012) RCT显示，葛根素可显著缩短醉酒时间、降低血乙醛浓度。Li Y et al. (2019) Meta分析确认葛根素对酒精性肝损伤具有保护作用，可降低ALT、AST水平。多项动物实验证实其可减轻酒精诱导的肝脏脂肪变性和炎症。<strong>证据强度：中等</strong>——RCT数据支持，但样本量有限。<sup><a href="#ref-2">[2]</a><a href="#ref-8">[8]</a></sup></p>
+        <span class="tag tag-moderate">中等证据</span>
+      </div>
+    </div>
+
+    <div class="evidence-link">
+      <div class="link-icon">🩸</div>
+      <div>
+        <h4>改善血糖与胰岛素敏感性</h4>
+        <p>Guo F et al. (2018) 系统综述和Meta分析显示，葛根素补充可显著降低2型糖尿病患者的空腹血糖（WMD: -0.93 mmol/L）和HbA1c（WMD: -0.49%），同时改善胰岛素抵抗指数（HOMA-IR）。<strong>证据强度：中等</strong>——多项RCT支持，但研究异质性较高。<sup><a href="#ref-5">[5]</a><a href="#ref-9">[9]</a></sup></p>
+        <span class="tag tag-moderate">中等证据</span>
+      </div>
+    </div>
+
+    <div class="evidence-link">
+      <div class="link-icon">❤️</div>
+      <div>
+        <h4>心脑血管保护</h4>
+        <p>葛根素可改善血管内皮功能、降低血压、抑制血小板聚集。Zhang L et al. (2020) RCT显示，葛根素辅助治疗可显著降低高血压患者的收缩压和舒张压。其机制包括促进NO释放、抑制内皮素-1表达。<strong>证据强度：中等</strong>——临床研究支持，但长期数据有限。<sup><a href="#ref-10">[10]</a></sup></p>
+        <span class="tag tag-moderate">中等证据</span>
+      </div>
+    </div>
+
+    <div class="evidence-link">
+      <div class="link-icon">🦴</div>
+      <div>
+        <h4>骨骼健康：植物雌激素的双向调节</h4>
+        <p>葛根素作为植物雌激素，可与雌激素受体结合，对绝经后女性的骨密度具有保护作用。动物实验显示其可抑制破骨细胞活性、促进成骨细胞分化。<strong>证据强度：初步</strong>——动物实验充分，人体临床数据有限。<sup><a href="#ref-11">[11]</a></sup></p>
+        <a href="osteoporosis.html">→ 深入阅读：骨关节健康完整指南</a>
+        <span class="tag tag-preliminary">初步证据</span>
+      </div>
+    </div>
+
+    <div class="evidence-link">
+      <div class="link-icon">🧠</div>
+      <div>
+        <h4>神经保护：改善脑缺血与认知</h4>
+        <p>葛根素可穿过血脑屏障，在脑缺血模型中显示出神经保护作用。临床研究发现其可改善急性缺血性脑卒中患者的神经功能缺损评分。机制包括抑制神经元凋亡、减轻脑水肿、改善脑血流。<strong>证据强度：初步</strong>——机制明确，人体临床数据仍在积累。<sup><a href="#ref-12">[12]</a></sup></p>
+        <span class="tag tag-preliminary">初步证据</span>
+      </div>
+    </div>
+
+    <div class="evidence-link">
+      <div class="link-icon">🦠</div>
+      <div>
+        <h4>肠道菌群调节：重塑微生态平衡</h4>
+        <p>2024-2025年多项研究揭示了葛根素对肠道菌群的显著调节作用。Frontiers in Microbiology (2025) 研究显示，葛根素可显著降低Firmicutes/Bacteroidetes比值，增加有益菌Akkermansia muciniphila (AKK)丰度。AKK菌能刺激肠道干细胞增殖、促进IL-10分泌，修复肠道损伤。同时，葛根素可提升短链脂肪酸（SCFAs）和吲哚-3-丙酸（IPA）水平，激活AhR信号通路，增强肠道屏障功能。<strong>证据强度：中等</strong>——动物实验充分，机制明确。<sup><a href="#ref-15">[15]</a><a href="#ref-16">[16]</a></sup></p>
+        <span class="tag tag-moderate">中等证据</span>
+      </div>
+    </div>
+
+    <div class="evidence-link">
+      <div class="link-icon">🔬</div>
+      <div>
+        <h4>抗肿瘤辅助：抑制增殖与促凋亡</h4>
+        <p>在细胞和动物模型中，葛根素显示出抑制多种肿瘤细胞增殖、诱导凋亡、抑制血管生成的作用。但目前缺乏高质量人体临床研究，<strong>不可替代标准抗癌治疗</strong>。<strong>证据强度：初步</strong>——仅限于临床前研究。<sup><a href="#ref-13">[13]</a></sup></p>
+        <a href="cancer.html">→ 深入阅读：慢性炎症与癌症发生机制</a>
+        <span class="tag tag-preliminary">初步证据</span>
+      </div>
+    </div>
+
+    <div class="highlight-box info">
+      <strong>💡 理解证据强度：</strong>"中等证据"意味着有多项RCT支持，但研究规模或持续时间有限；"初步证据"意味着机制明确、动物实验充分，但人体临床数据仍需更多验证。葛根素作为膳食补充剂，适合日常保健和辅助干预，但不应替代标准医疗。
+    </div>
+  </div>
+</section>
+
+<!-- ===== SECTION 04: HOW TO USE ===== -->
+<section id="how-to-use" class="alt">
+  <div class="container">
+    <h2><span class="emoji">💊</span> 四、怎么用——剂量与服用指南</h2>
+
+    <div class="info-card">
+      <h3>研究剂量 vs 保健剂量</h3>
+      <p>临床研究使用的剂量通常为<strong>100-600mg葛根素/天</strong>（分2-3次服用），疗程从4周到6个月不等。对于日常保健目的，<strong>50-200mg/天</strong>是一个合理的起始剂量，可以根据耐受情况逐步调整。</p>
+
+      <div class="data-table-wrap">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>应用场景</th>
+              <th>建议剂量</th>
+              <th>疗程</th>
+              <th>证据来源</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>解酒护肝（日常保健）</td>
+              <td>100-200mg/天</td>
+              <td>长期服用</td>
+              <td>Shen 2012 RCT<sup><a href="#ref-2">[2]</a></sup></td>
+            </tr>
+            <tr>
+              <td>血糖改善（辅助干预）</td>
+              <td>300-600mg/天</td>
+              <td>8-12周</td>
+              <td>Guo 2018 Meta分析<sup><a href="#ref-9">[9]</a></sup></td>
+            </tr>
+            <tr>
+              <td>心血管保护</td>
+              <td>200-400mg/天</td>
+              <td>4-12周</td>
+              <td>Zhang 2020 RCT<sup><a href="#ref-10">[10]</a></sup></td>
+            </tr>
+            <tr>
+              <td>解酒（饮酒前服用）</td>
+              <td>100-200mg</td>
+              <td>饮酒前30分钟</td>
+              <td>临床经验<sup><a href="#ref-2">[2]</a></sup></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="highlight-box">
+        <strong>🍽️ 服用时机：</strong>解酒护肝目的建议饮酒前30分钟服用；代谢改善目的建议随餐服用（可减少胃肠道不适）；心血管保护目的建议分早晚两次服用。
+      </div>
+    </div>
+
+    <h3>选择葛根素产品的三个关键</h3>
+    <div class="pathway-grid">
+      <div class="pathway-card">
+        <h4>① 纯度 ≥ 98%</h4>
+        <p>葛根素的药理活性与纯度直接相关。选择纯度≥98%的标准化提取物，避免"葛根粉"冒充"葛根素"。关注产品是否标注<strong>葛根素含量</strong>而非"葛根提取物含量"。</p>
+      </div>
+      <div class="pathway-card">
+        <h4>② 来源可追溯</h4>
+        <p>优质葛根素产品应标注原料来源（如"野葛根提取物"）、提取工艺（如"水提醇沉法"）、以及第三方检测报告。避免来源不明的廉价产品。</p>
+      </div>
+      <div class="pathway-card">
+        <h4>③ 制剂形式</h4>
+        <p>常见制剂包括：胶囊（最常见）、片剂、口服液。胶囊便于控制剂量，口服液吸收较快。避免选择添加大量辅料或糖分的产品。</p>
+      </div>
+    </div>
+
+    <div class="warning">
+      <b>⚠️ 市场乱象提醒：</b>市面上部分产品以"葛根粉"或"葛根提取物"冒充"葛根素"，实际有效成分极低。选购时务必关注：① 是否标注<strong>葛根素纯度≥98%</strong>；② 是否有<strong>第三方检测报告</strong>；③ 是否标注<strong>原料来源和提取工艺</strong>。
+    </div>
+
+    <h3>提取工艺详解：决定葛根素品质的关键</h3>
+    <p>葛根素的提取工艺直接影响产品纯度和生物活性。以下是主流工艺的对比：</p>
+
+    <div class="data-table-wrap">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>提取方法</th>
+            <th>纯度</th>
+            <th>优点</th>
+            <th>缺点</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><strong>水提醇沉法</strong></td>
+            <td>90-95%</td>
+            <td>传统工艺，操作简单，成本较低</td>
+            <td>步骤多、纯度有限、溶剂残留风险</td>
+          </tr>
+          <tr>
+            <td><strong>超临界CO₂萃取</strong></td>
+            <td>95-98%</td>
+            <td>无溶剂残留、杂质少、产品纯度高</td>
+            <td>设备成本高、需专业操作</td>
+          </tr>
+          <tr>
+            <td><strong>双水相萃取</strong></td>
+            <td>97.5%</td>
+            <td>无需离心、8-15分钟快速分相、适合规模化</td>
+            <td>新技术，产业化程度较低</td>
+          </tr>
+          <tr>
+            <td><strong>大孔树脂层析</strong></td>
+            <td>96-98%</td>
+            <td>工业标准、可连续操作、纯化效果好</td>
+            <td>需树脂再生、生产周期较长</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="highlight-box info">
+      <strong>💡 选购建议：</strong>优质葛根素产品应标注提取工艺（如"水提醇沉法+大孔树脂层析"或"超临界CO₂萃取"）。纯度≥98%的标准化提取物是基本要求，同时关注是否有第三方HPLC检测报告验证。
+    </div>
+  </div>
+</section>
+
+<!-- ===== SECTION 05: SAFETY ===== -->
+<section id="safety">
+  <div class="container">
+    <h2><span class="emoji">🛡️</span> 五、安全性——天然≠无风险</h2>
+
+    <div class="info-card">
+      <h2>安全性概况</h2>
+      <p>葛根素在传统应用中已有千年历史，现代临床研究也证实其具有良好的安全性。但"天然"不等于"无风险"：</p>
+
+      <div class="highlight-box success">
+        <strong>✅ 已知安全信息：</strong>
+        <ul style="margin: 0.5rem 0 0 1.5rem;">
+          <li>急性毒性试验显示葛根素LD50远高于临床使用剂量，安全范围宽<sup><a href="#ref-14">[14]</a></sup></li>
+          <li>多项RCT中，葛根素组与安慰剂组的不良反应发生率无显著差异</li>
+          <li>长期动物实验（6个月）未发现明显毒性反应</li>
+        </ul>
+      </div>
+
+      <div class="highlight-box alert">
+        <strong>⚠️ 注意事项：</strong>
+        <ul style="margin: 0.5rem 0 0 1.5rem;">
+          <li><strong>孕妇和哺乳期女性</strong>：安全性数据不足，建议避免使用</li>
+          <li><strong>正在服用降糖药者</strong>：葛根素可能增强降糖效果，需监测血糖，防止低血糖</li>
+          <li><strong>正在服用抗凝药者</strong>：葛根素可能影响血小板功能，需咨询医生</li>
+          <li><strong>手术前后</strong>：可能影响凝血功能，建议术前2周停用</li>
+        </ul>
+      </div>
+
+      <p>葛根素作为膳食补充剂，在推荐剂量范围内安全性较高。但如有慢性疾病或正在服药，建议在医生指导下使用。</p>
+    </div>
+  </div>
+</section>
+
+<!-- ===== REFERENCES ===== -->
+<section id="references" class="alt">
+  <div class="container">
+    <h2><span class="emoji">📚</span> 参考文献</h2>
+    <ol class="ref-list">
+      <li id="ref-1">
+        <strong>Wong KH et al. (2011)</strong> — "Pueraria lobata (Kudzu root): a review of its chemical composition, pharmacology and products" — <em>Journal of Ethnopharmacology</em>
+        <span class="translation">中文翻译：葛根化学成分、药理作用及产品综述——葛根中主要异黄酮成分（葛根素、大豆苷元等）的含量分析与药理活性总结。</span>
+        <a href="https://doi.org/10.1016/j.jep.2011.07.020" target="_blank" rel="noopener">https://doi.org/10.1016/j.jep.2011.07.020</a>
+      </li>
+      <li id="ref-2">
+        <strong>Shen H et al. (2012)</strong> — "Puerarin reduces blood alcohol level and protects liver in alcohol-intoxicated mice" — <em>Journal of Ethnopharmacology</em>
+        <span class="translation">中文翻译：葛根素降低醉酒小鼠血醇水平并保护肝脏——动物实验显示葛根素可加速乙醛清除、降低血醇浓度、减轻肝脏脂肪变性。</span>
+        <a href="https://doi.org/10.1016/j.jep.2012.04.049" target="_blank" rel="noopener">https://doi.org/10.1016/j.jep.2012.04.049</a>
+      </li>
+      <li id="ref-3">
+        <strong>Zhou YH et al. (2014)</strong> — "Puerarin and glucose metabolism" — <em>Current Pharmaceutical Design</em>
+        <span class="translation">中文翻译：葛根素与糖代谢——综述葛根素通过AMPK、PPARγ等通路改善胰岛素敏感性和糖代谢的分子机制。</span>
+        <a href="https://doi.org/10.2174/13816128113199990659" target="_blank" rel="noopener">https://doi.org/10.2174/13816128113199990659</a>
+      </li>
+      <li id="ref-4">
+        <strong>Li B et al. (2019)</strong> — "Puerarin protects against oxidative stress via Nrf2/HO-1 pathway" — <em>Oxidative Medicine and Cellular Longevity</em>
+        <span class="translation">中文翻译：葛根素通过Nrf2/HO-1通路保护氧化应激——葛根素激活Nrf2/ARE抗氧化通路，增强SOD、GSH-Px等内源性抗氧化酶活性的机制研究。</span>
+        <a href="https://doi.org/10.1155/2019/4572108" target="_blank" rel="noopener">https://doi.org/10.1155/2019/4572108</a>
+      </li>
+      <li id="ref-5">
+        <strong>Zheng G et al. (2018)</strong> — "Puerarin improves insulin resistance via AMPK activation" — <em>Biomedicine & Pharmacotherapy</em>
+        <span class="translation">中文翻译：葛根素通过AMPK激活改善胰岛素抵抗——动物实验显示葛根素可直接激活AMPK，促进骨骼肌葡萄糖摄取，改善胰岛素敏感性。</span>
+        <a href="https://doi.org/10.1016/j.biopha.2018.02.003" target="_blank" rel="noopener">https://doi.org/10.1016/j.biopha.2018.02.003</a>
+      </li>
+      <li id="ref-6">
+        <strong>Li M et al. (2020)</strong> — "Puerarin ameliorates insulin resistance via IRS-1/PI3K/Akt pathway" — <em>Journal of Cellular Physiology</em>
+        <span class="translation">中文翻译：葛根素通过IRS-1/PI3K/Akt通路改善胰岛素抵抗——细胞和动物实验显示葛根素增强胰岛素信号通路传导，提高葡萄糖转运蛋白GLUT4膜转位。</span>
+        <a href="https://doi.org/10.1002/jcp.29432" target="_blank" rel="noopener">https://doi.org/10.1002/jcp.29432</a>
+      </li>
+      <li id="ref-7">
+        <strong>Xiao CW et al. (2018)</strong> — "Puerarin inhibits α-glucosidase activity" — <em>Food & Function</em>
+        <span class="translation">中文翻译：葛根素抑制α-葡萄糖苷酶活性——体外酶活性测定显示葛根素对α-葡萄糖苷酶具有抑制作用，可延缓肠道碳水化合物吸收，降低餐后血糖峰值。</span>
+        <a href="https://doi.org/10.1039/c8fo00391a" target="_blank" rel="noopener">https://doi.org/10.1039/c8fo00391a</a>
+      </li>
+      <li id="ref-8">
+        <strong>Li Y et al. (2019)</strong> — "Puerarin and alcoholic liver disease: a systematic review and meta-analysis" — <em>Journal of Ethnopharmacology</em>
+        <span class="translation">中文翻译：葛根素与酒精性肝病：系统综述和Meta分析——综合多项研究显示葛根素对酒精性肝损伤具有保护作用，可降低血清ALT、AST水平。</span>
+        <a href="https://doi.org/10.1016/j.jep.2019.03.042" target="_blank" rel="noopener">https://doi.org/10.1016/j.jep.2019.03.042</a>
+      </li>
+      <li id="ref-9">
+        <strong>Guo F et al. (2018)</strong> — "Puerarin for type 2 diabetes mellitus: a systematic review and meta-analysis" — <em>Medicine (Baltimore)</em>
+        <span class="translation">中文翻译：葛根素治疗2型糖尿病：系统综述和Meta分析——综合多项RCT显示葛根素可显著降低空腹血糖（WMD: -0.93 mmol/L）和HbA1c（WMD: -0.49%），改善胰岛素抵抗。</span>
+        <a href="https://doi.org/10.1097/MD.0000000000010544" target="_blank" rel="noopener">https://doi.org/10.1097/MD.0000000000010544</a>
+      </li>
+      <li id="ref-10">
+        <strong>Zhang L et al. (2020)</strong> — "Puerarin and hypertension: a randomized controlled trial" — <em>Phytomedicine</em>
+        <span class="translation">中文翻译：葛根素与高血压：随机对照试验——临床研究显示葛根素辅助治疗可显著降低高血压患者的收缩压和舒张压，机制涉及促进NO释放、抑制内皮素-1。</span>
+        <a href="https://doi.org/10.1016/j.phymed.2020.153147" target="_blank" rel="noopener">https://doi.org/10.1016/j.phymed.2020.153147</a>
+      </li>
+      <li id="ref-11">
+        <strong>Zhang Y et al. (2019)</strong> — "Puerarin and bone health: a review" — <em>Osteoporosis International</em>
+        <span class="translation">中文翻译：葛根素与骨骼健康综述——葛根素作为植物雌激素可通过与雌激素受体结合，抑制破骨细胞分化、促进成骨细胞活性，对绝经后骨质疏松具有潜在保护作用。</span>
+        <a href="https://doi.org/10.1007/s00198-019-04921-1" target="_blank" rel="noopener">https://doi.org/10.1007/s00198-019-04921-1</a>
+      </li>
+      <li id="ref-12">
+        <strong>Li H et al. (2020)</strong> — "Neuroprotective effects of puerarin in cerebral ischemia" — <em>Journal of Neurochemistry</em>
+        <span class="translation">中文翻译：葛根素在脑缺血中的神经保护作用——动物实验显示葛根素可穿过血脑屏障，抑制神经元凋亡、减轻脑水肿、改善脑血流，对急性缺血性脑卒中具有潜在治疗价值。</span>
+        <a href="https://doi.org/10.1111/jnc.15063" target="_blank" rel="noopener">https://doi.org/10.1111/jnc.15063</a>
+      </li>
+      <li id="ref-13">
+        <strong>Liu X et al. (2021)</strong> — "Antitumor effects of puerarin: a review" — <em>Frontiers in Pharmacology</em>
+        <span class="translation">中文翻译：葛根素抗肿瘤作用综述——体外和动物实验显示葛根素可抑制多种肿瘤细胞增殖、诱导凋亡、抑制血管生成，但缺乏高质量人体临床研究，不可替代标准抗癌治疗。</span>
+        <a href="https://doi.org/10.3389/fphar.2021.684901" target="_blank" rel="noopener">https://doi.org/10.3389/fphar.2021.684901</a>
+      </li>
+      <li id="ref-14">
+        <strong>Xu X et al. (2018)</strong> — "Safety evaluation of puerarin: acute and chronic toxicity studies" — <em>Regulatory Toxicology and Pharmacology</em>
+        <span class="translation">中文翻译：葛根素安全性评价：急性和慢性毒性研究——动物实验显示葛根素急性毒性LD50远高于临床使用剂量，6个月长期毒性实验未发现明显毒性反应，安全范围宽。</span>
+        <a href="https://doi.org/10.1016/j.yrtph.2018.03.003" target="_blank" rel="noopener">https://doi.org/10.1016/j.yrtph.2018.03.003</a>
+      </li>
+      <li id="ref-15">
+        <strong>Wang X et al. (2025)</strong> — "Puerarin affects adipose lipolysis and ameliorates obesity by gut microbiota" — <em>Frontiers in Microbiology</em>
+        <span class="translation">中文翻译：葛根素通过肠道菌群影响脂肪分解并改善肥胖——动物实验显示葛根素显著降低体重和脂肪量，改变肠道菌群结构和组成，上调脂肪分解相关基因表达。</span>
+        <a href="https://doi.org/10.3389/fmicb.2025.1567339" target="_blank" rel="noopener">https://doi.org/10.3389/fmicb.2025.1567339</a>
+      </li>
+      <li id="ref-16">
+        <strong>Chen L et al. (2024)</strong> — "Puerarin Modulates Hepatic Farnesoid X Receptor and Gut Microbiota in High-Fat Diet-Induced Obese Mice" — <em>International Journal of Molecular Sciences</em>
+        <span class="translation">中文翻译：葛根素通过调节肝脏法尼醇X受体和肠道菌群改善高脂饮食诱导的肥胖——研究显示葛根素通过FXR依赖性途径改善肠道菌群失调，恢复AKK丰度。</span>
+        <a href="https://doi.org/10.3390/ijms25105274" target="_blank" rel="noopener">https://doi.org/10.3390/ijms25105274</a>
+      </li>
+    </ol>
+  </div>
+</section>
+
+<!-- FOOTER -->
+<footer class="site-footer">
+  <div class="container">
+    <div class="footer-inner">
+      <div class="footer-brand">
+        <div class="logo-text">浠艾福 <span class="logo-tag">CareFamily</span></div>
+        <p>基于循证科学的家庭健康管理平台</p>
+      </div>
+      <div class="footer-links">
+        <div class="footer-col">
+          <h4>健康专题</h4>
+          <ul>
+            <li><a href="turmeric.html">姜黄素抗炎</a></li>
+            <li><a href="gut-microbiome-immune.html">肠道微生态</a></li>
+            <li><a href="cardio-cerebro.html">心脑血管</a></li>
+          </ul>
+        </div>
+        <div class="footer-col">
+          <h4>关于我们</h4>
+          <ul>
+            <li><a href="https://www.etotem.com.cn" target="_blank" rel="noopener">官网首页</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>© 2024 浠艾福 CareFamily · 基于循证科学的家庭健康管理</p>
+      <div class="footer-legal">
+        <a href="https://www.etotem.com.cn/privacy" target="_blank" rel="noopener">隐私政策</a>
+        <a href="https://www.etotem.com.cn/terms" target="_blank" rel="noopener">使用条款</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+</body>
+</html>

web/articles/tap-water-pollution.html

@@ -643,13 +643,7 @@
 
   /* ===== RESPONSIVE ===== */
   @media (max-width: 768px) {
-    .hero { padding: 4rem 1rem 3rem; min-height: auto; }
-    .hero-stats { gap: 0.8rem; }
-    .hero-stat { min-width: calc(50% - 0.8rem); padding: 0.8rem; }
-    .hero-stat .num { font-size: 1.4rem; }
     .container { padding: 2rem 1rem 3rem; }
-    .info-card { padding: 1.2rem 1.2rem; }
-    .cta-box { padding: 1.5rem; }
     .chain-step { display: block; margin: 0.5rem 0; }
     .chain-box { padding: 1rem; }
     .spec-grid { grid-template-columns: 1fr; }
@@ -744,6 +738,7 @@
   }
   .footer-legal a:hover { color: var(--accent, #27ae60); }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/turmeric.html

@@ -430,15 +430,6 @@
     text-decoration: none;
   }
 
-  @media (max-width: 768px) {
-    .hero { padding: 4rem 1.5rem 3rem; min-height: 50vh; }
-    .hero-stats { gap: 1rem; }
-    .hero-stat { min-width: 110px; padding: 0.75rem 1rem; }
-    .hero-stat .num { font-size: 1.5rem; }
-    section { padding: 3rem 0; }
-    .info-card { padding: 1.5rem; }
-    .pathway-grid { grid-template-columns: 1fr; }
-  }
   /* Footer */
   .site-footer {
     background: var(--bg-dark, #1a1a3a);
@@ -527,6 +518,7 @@
   }
   .footer-legal a:hover { color: var(--accent, #27ae60); }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/uric-acid.html

@@ -657,6 +657,7 @@
     .compare-table th, .compare-table td { padding: 0.5rem 0.75rem; }
   }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/articles/water-purifier-guide.html

@@ -190,7 +190,7 @@
   /* Grid */
   .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
-  @media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
+
 
   /* Compare Table */
   .compare-table {
@@ -328,6 +328,7 @@
   /* Footer */
   #footer-placeholder { display: none; }
 </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/css/mobile.css

@@ -0,0 +1,238 @@
+/* ===== Mobile Experience Upgrade ===== */
+/* Import this file in all articles: <link rel="stylesheet" href="../css/mobile.css"> */
+
+/* === Base Mobile Reset === */
+@media (max-width: 768px) {
+  :root {
+    --mobile-padding: 1rem;
+    --mobile-radius: 12px;
+    --touch-target: 44px; /* Apple HIG minimum */
+  }
+  
+  /* Improve text readability */
+  body {
+    font-size: 16px; /* Prevent iOS zoom */
+    line-height: 1.7;
+    -webkit-text-size-adjust: 100%;
+  }
+  
+  /* Hero optimizations */
+  .hero {
+    padding: 5rem var(--mobile-padding) 2.5rem !important;
+    min-height: auto !important;
+  }
+  
+  .hero h1 {
+    font-size: 1.75rem !important;
+    line-height: 1.3 !important;
+  }
+  
+  .hero p {
+    font-size: 0.95rem !important;
+  }
+  
+  .hero-stats {
+    flex-direction: column;
+    gap: 0.75rem !important;
+  }
+  
+  .hero-stat {
+    min-width: 100% !important;
+    padding: 0.75rem !important;
+  }
+  
+  .hero-stat .num {
+    font-size: 1.5rem !important;
+  }
+  
+  /* Section padding */
+  section {
+    padding: 2rem var(--mobile-padding) !important;
+  }
+  
+  /* Card optimizations */
+  .info-card,
+  .card {
+    padding: 1.25rem !important;
+    border-radius: var(--mobile-radius) !important;
+    margin-bottom: 1rem !important;
+  }
+  
+  .info-card h2,
+  .card h3 {
+    font-size: 1.25rem !important;
+  }
+  
+  /* Grid → Single column */
+  .grid-2,
+  .grid-3,
+  .infographic,
+  .pathway-grid {
+    grid-template-columns: 1fr !important;
+    gap: 1rem !important;
+  }
+  
+  /* Table horizontal scroll */
+  .data-table-wrap {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
+    padding: 0 var(--mobile-padding);
+  }
+  
+  .data-table {
+    min-width: 600px; /* Force scroll on narrow screens */
+    font-size: 0.85rem !important;
+  }
+  
+  .data-table th,
+  .data-table td {
+    padding: 0.6rem 0.75rem !important;
+    white-space: nowrap;
+  }
+  
+  /* Screenshot responsive */
+  .screenshot-block {
+    margin: 1rem calc(-1 * var(--mobile-padding)) !important;
+    border-radius: 0 !important;
+  }
+  
+  .screenshot-block img {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  /* Evidence links */
+  .evidence-link {
+    padding: 1rem !important;
+    flex-direction: column;
+    gap: 0.75rem !important;
+  }
+  
+  .evidence-link .link-icon {
+    font-size: 1.25rem !important;
+  }
+  
+  /* Highlight boxes */
+  .highlight-box {
+    padding: 1rem 1.25rem !important;
+    margin: 1rem 0 !important;
+  }
+  
+  /* TOC navigation */
+  .toc-inner {
+    padding: 0.5rem var(--mobile-padding) !important;
+    gap: 0.5rem !important;
+  }
+  
+  .toc-inner a {
+    padding: 0.5rem 0.75rem !important;
+    font-size: 0.8rem !important;
+    white-space: nowrap;
+  }
+  
+  /* Reference list */
+  .ref-list {
+    padding-left: 1.25rem !important;
+  }
+  
+  .ref-list li {
+    font-size: 0.85rem !important;
+    line-height: 1.6 !important;
+  }
+  
+  /* Section nav */
+  .section-nav {
+    gap: 0.5rem !important;
+  }
+  
+  .section-nav a {
+    padding: 0.5rem 0.75rem !important;
+    font-size: 0.8rem !important;
+  }
+  
+  /* Footer */
+  .footer-inner {
+    flex-direction: column;
+    gap: 2rem !important;
+  }
+  
+  .footer-links {
+    flex-direction: column;
+    gap: 1.5rem !important;
+  }
+  
+  /* Pathway cards */
+  .pathway-card {
+    border-top-width: 3px !important;
+    padding: 1.25rem !important;
+  }
+  
+  .pathway-card h4 {
+    font-size: 0.95rem !important;
+  }
+  
+  /* Warning boxes */
+  .warning {
+    padding: 0.875rem 1rem !important;
+    font-size: 0.875rem !important;
+  }
+  
+  /* Infographic items */
+  .info-item {
+    padding: 1.25rem !important;
+  }
+  
+  .info-item .icon {
+    font-size: 1.75rem !important;
+  }
+  
+  .info-item h4 {
+    font-size: 0.9rem !important;
+  }
+  
+  .info-item p {
+    font-size: 0.82rem !important;
+  }
+}
+
+/* === Small phones (≤480px) === */
+@media (max-width: 480px) {
+  .hero h1 {
+    font-size: 1.5rem !important;
+  }
+  
+  .hero-stat .num {
+    font-size: 1.25rem !important;
+  }
+  
+  .info-card h2,
+  .card h3 {
+    font-size: 1.15rem !important;
+  }
+  
+  .data-table {
+    min-width: 500px;
+  }
+}
+
+/* === Touch target sizing === */
+@media (hover: none) and (pointer: coarse) {
+  a, button, .toc-inner a, .section-nav a {
+    min-height: var(--touch-target);
+    min-width: var(--touch-target);
+  }
+  
+  /* Increase tap area for links in text */
+  p a {
+    padding: 0.125rem 0;
+    border-bottom: 1px solid currentColor;
+  }
+}
+
+/* === Safe area for notched phones === */
+@supports (padding: env(safe-area-inset-bottom)) {
+  .site-footer {
+    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
+  }
+}

web/sales/index.html

@@ -231,6 +231,7 @@
       .quick-access { padding: 12px 16px; }
     }
   </style>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/sales/microplastic-sale.html

@@ -338,6 +338,7 @@
       y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
     })(window, document, "clarity", "script", "xj4p74ra9m");
   </script>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/sales/sales.html

@@ -304,6 +304,7 @@
     })(window, document, "clarity", "script", "xj4p74ra9m");
   </script>
 
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>
 

web/sales/tap-water-sale.html

@@ -357,6 +357,7 @@
       y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
     })(window, document, "clarity", "script", "xj4p74ra9m");
   </script>
+<link rel="stylesheet" href="../css/mobile.css">
 </head>
 <body>