diff --git a/.env.example b/.env.example
index a9bec7e..eac74e8 100644
--- a/.env.example
+++ b/.env.example
@@ -47,6 +47,14 @@ EMAIL_RECEIVER=receiver_email@gmail.com
 PUBLIC_URL=http://your_server_ip:port
 NGROK_AUTH_TOKEN=your_ngrok_auth_token
 
+# ==========================================
+# 市場情報模組設定（預設全部關閉）
+# ==========================================
+# Phase 1 僅允許安全骨架；正式爬蟲與 DB 寫入需逐步開啟
+MARKET_INTEL_ENABLED=false
+MARKET_INTEL_CRAWLER_ENABLED=false
+MARKET_INTEL_WRITE_ENABLED=false
+
 # ==========================================
 # 通訊模組設定（從環境變數讀取）
 # ==========================================
diff --git a/TODO_NEXT_STEPS.txt b/TODO_NEXT_STEPS.txt
index 115ee9c..f27cfdb 100644
--- a/TODO_NEXT_STEPS.txt
+++ b/TODO_NEXT_STEPS.txt
@@ -1,4 +1,22 @@
 
+================================================================================
+                 跨平台市場情報模組 (ADR-035 / 2026-05-06) [IN PROGRESS]
+================================================================================
+
+【已完成】
+   - ADR-035：定義跨平台市場活動情報系統、feature flags、market_* schema、爬蟲安全邊界與分階段 rollout。
+   - 模組化盤點：更新 `docs/memory/code_modularization_inventory_20260430.md`，標記市場情報不可塞回 `app.py`、`scheduler.py`、`routes/sales_routes.py` 等大檔。
+   - Phase 1 安全骨架：新增 `routes/market_intel_routes.py`、`services/market_intel/`、`templates/market_intel/disabled.html`，預設只顯示 disabled 狀態。
+   - Phase 2 schema 骨架：新增 `database/market_intel_models.py`，定義 `market_platforms`、`market_campaigns`、`market_campaign_snapshots`、`market_campaign_products`、`market_product_price_history`、`market_product_matches`、`market_crawler_runs`。
+   - Metadata 守門：`database/manager.py` 顯式 import market_intel models，`app.py` expected metadata tables 已同步。
+   - 安全開關：`.env.example` 補 `MARKET_INTEL_ENABLED=false`、`MARKET_INTEL_CRAWLER_ENABLED=false`、`MARKET_INTEL_WRITE_ENABLED=false`。
+
+【下次待辦】
+   - 補 marketplace 平台種子資料策略，但正式寫入仍需 feature flag 與 migration/smoke gate。
+   - 新增 `services/market_intel/adapters/base.py` 與第一個 read-only MOMO/PChome discovery adapter。
+   - 新增 market_intel schema smoke test，確認 fresh env metadata 表名一致。
+   - 市場情報 UI 後續頁面必須沿用 V2 暖紙、暖墨、等寬數字與點陣風格，禁止複製巨型分析頁 template 模式。
+
 ================================================================================
                       AI 自動化閉環治理同步 (2026-04-29) [DONE]
 ================================================================================
diff --git a/app.py b/app.py
index 7f811ce..1c6b68a 100644
--- a/app.py
+++ b/app.py
@@ -96,7 +96,7 @@ except Exception as e:
 
 # 🚩 系統版本定義 (備份與顯示用)
 # 🚩 2026-05-01 V10.76: Move monthly analysis report onto V2 shell
-SYSTEM_VERSION = "V10.77"
+SYSTEM_VERSION = "V10.86"
 
 # ==========================================
 # 🔒 SQL Injection 防護函數
@@ -378,6 +378,10 @@ from routes.pchome_routes import pchome_bp
 app.register_blueprint(pchome_bp)
 sys_log.info("[Blueprint] ✅ pchome_bp 已註冊")
 
+from routes.market_intel_routes import market_intel_bp
+app.register_blueprint(market_intel_bp)
+sys_log.info("[Blueprint] ✅ market_intel_bp 已註冊")
+
 # V-Fix: 註冊 slugify 函數供模板使用（實作搬至 utils/text_helpers.py）
 from utils.text_helpers import slugify  # noqa: E402
 
@@ -398,6 +402,9 @@ EXPECTED_METADATA_TABLES = {
     'import_jobs', 'import_config', 'notification_templates', 'ppt_reports',
     'vendor_stockout', 'vendor_list', 'vendor_emails', 'email_send_log',
     'realtime_sales_monthly',
+    'market_platforms', 'market_campaigns', 'market_campaign_snapshots',
+    'market_campaign_products', 'market_product_price_history',
+    'market_product_matches', 'market_crawler_runs',
 }
 
 
diff --git a/config.py b/config.py
index 1c0b1f7..6a548c1 100644
--- a/config.py
+++ b/config.py
@@ -111,6 +111,13 @@ EMAIL_RECEIVER = os.getenv('EMAIL_RECEIVER', '')
 # ==========================================
 PUBLIC_URL = os.getenv('PUBLIC_URL', 'https://mo.wooo.work')
 
+# ==========================================
+# 市場情報模組設定（預設全部關閉）
+# ==========================================
+MARKET_INTEL_ENABLED = os.getenv('MARKET_INTEL_ENABLED', 'false').lower() == 'true'
+MARKET_INTEL_CRAWLER_ENABLED = os.getenv('MARKET_INTEL_CRAWLER_ENABLED', 'false').lower() == 'true'
+MARKET_INTEL_WRITE_ENABLED = os.getenv('MARKET_INTEL_WRITE_ENABLED', 'false').lower() == 'true'
+
 # 補上 EXCEL_EXPORT_DIR 定義
 EXCEL_EXPORT_DIR = os.path.join(DATA_DIR, 'excel_exports')
 
@@ -307,7 +314,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '')
 # ==========================================
 # 系統版本與路徑
 # ==========================================
-SYSTEM_VERSION = "V10.76"
+SYSTEM_VERSION = "V10.86"
 LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log')
 public_url = PUBLIC_URL  # 用於模板顯示
 
diff --git a/database/manager.py b/database/manager.py
index aef6d73..182180f 100644
--- a/database/manager.py
+++ b/database/manager.py
@@ -25,6 +25,15 @@ from .notification_models import NotificationTemplate  # noqa: F401 - 確保 not
 from .ppt_reports import PPTReport  # noqa: F401 - 確保 ppt_reports 表被 Base.metadata 管理
 from .vendor_models import VendorStockout, VendorList, VendorEmail, EmailSendLog  # noqa: F401 - 確保 vendor 表被 Base.metadata 管理
 from .realtime_sales_models import RealtimeSalesMonthly  # noqa: F401 - 確保 realtime_sales_monthly 被 Base.metadata 管理
+from .market_intel_models import (  # noqa: F401 - ADR-035 market_* 表
+    MarketPlatform,
+    MarketCampaign,
+    MarketCampaignSnapshot,
+    MarketCampaignProduct,
+    MarketProductPriceHistory,
+    MarketProductMatch,
+    MarketCrawlerRun,
+)
 
 # 🚩 導入優化後的日誌管理模組
 from utils.logger_manager import SystemLogger
diff --git a/database/market_intel_models.py b/database/market_intel_models.py
new file mode 100644
index 0000000..d13ad9d
--- /dev/null
+++ b/database/market_intel_models.py
@@ -0,0 +1,224 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""跨平台市場活動情報 ORM models。"""
+
+from datetime import datetime, timedelta, timezone
+
+from sqlalchemy import (
+    Boolean,
+    Column,
+    DateTime,
+    Float,
+    ForeignKey,
+    Index,
+    Integer,
+    String,
+    Text,
+    UniqueConstraint,
+)
+from sqlalchemy.orm import relationship
+
+from database.models import Base
+
+
+TAIPEI_TZ = timezone(timedelta(hours=8))
+
+
+def taipei_now():
+    """取得台北時間 naive datetime，符合專案 DB 時間規範。"""
+    return datetime.now(TAIPEI_TZ).replace(tzinfo=None)
+
+
+class MarketPlatform(Base):
+    """市場平台設定，例如 MOMO / PChome / Coupang / Shopee。"""
+
+    __tablename__ = "market_platforms"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    code = Column(String(50), unique=True, nullable=False, index=True)
+    name = Column(String(120), nullable=False)
+    base_url = Column(String(500))
+    enabled = Column(Boolean, default=False, nullable=False)
+    crawl_policy_json = Column(Text)
+    created_at = Column(DateTime, default=taipei_now, nullable=False)
+    updated_at = Column(DateTime, default=taipei_now, onupdate=taipei_now, nullable=False)
+
+    campaigns = relationship("MarketCampaign", back_populates="platform")
+
+
+class MarketCampaign(Base):
+    """跨平台活動檔期。"""
+
+    __tablename__ = "market_campaigns"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    platform_code = Column(String(50), ForeignKey("market_platforms.code"), nullable=False, index=True)
+    campaign_key = Column(String(200), nullable=False)
+    campaign_name = Column(String(500), nullable=False)
+    campaign_type = Column(String(80), index=True)
+    campaign_url = Column(Text)
+    start_at = Column(DateTime)
+    end_at = Column(DateTime)
+    status = Column(String(30), default="unknown", nullable=False, index=True)
+    discovered_at = Column(DateTime, default=taipei_now, nullable=False)
+    last_seen_at = Column(DateTime, default=taipei_now, nullable=False)
+    metadata_json = Column(Text)
+
+    platform = relationship("MarketPlatform", back_populates="campaigns")
+    snapshots = relationship("MarketCampaignSnapshot", back_populates="campaign")
+    products = relationship("MarketCampaignProduct", back_populates="campaign")
+
+    __table_args__ = (
+        UniqueConstraint("platform_code", "campaign_key", name="uq_market_campaign_platform_key"),
+        Index("idx_market_campaign_status_time", "status", "start_at", "end_at"),
+    )
+
+
+class MarketCampaignSnapshot(Base):
+    """活動頁每次爬取快照。"""
+
+    __tablename__ = "market_campaign_snapshots"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    campaign_id = Column(Integer, ForeignKey("market_campaigns.id"), nullable=False, index=True)
+    batch_id = Column(String(80), nullable=False, index=True)
+    crawled_at = Column(DateTime, default=taipei_now, nullable=False, index=True)
+    title = Column(String(500))
+    hero_text = Column(Text)
+    coupon_text = Column(Text)
+    raw_discount_text = Column(Text)
+    page_hash = Column(String(128), index=True)
+    raw_snapshot_path = Column(Text)
+    status = Column(String(30), default="success", nullable=False, index=True)
+    error_message = Column(Text)
+    metadata_json = Column(Text)
+
+    campaign = relationship("MarketCampaign", back_populates="snapshots")
+
+    __table_args__ = (
+        Index("idx_market_campaign_snapshot_campaign_time", "campaign_id", "crawled_at"),
+    )
+
+
+class MarketCampaignProduct(Base):
+    """活動頁中的平台商品快照主檔。"""
+
+    __tablename__ = "market_campaign_products"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    campaign_id = Column(Integer, ForeignKey("market_campaigns.id"), nullable=False, index=True)
+    platform_code = Column(String(50), nullable=False, index=True)
+    platform_product_id = Column(String(200), nullable=False, index=True)
+    product_url = Column(Text)
+    name = Column(String(500), nullable=False)
+    brand = Column(String(200), index=True)
+    image_url = Column(Text)
+    category_text = Column(String(300), index=True)
+    price = Column(Float)
+    original_price = Column(Float)
+    discount_text = Column(String(200))
+    discount_rate = Column(Float)
+    coupon_text = Column(Text)
+    stock_text = Column(String(200))
+    sold_count = Column(Integer)
+    rating = Column(Float)
+    review_count = Column(Integer)
+    rank_position = Column(Integer)
+    is_active = Column(Boolean, default=True, nullable=False, index=True)
+    first_seen_at = Column(DateTime, default=taipei_now, nullable=False)
+    last_seen_at = Column(DateTime, default=taipei_now, nullable=False, index=True)
+    metadata_json = Column(Text)
+
+    campaign = relationship("MarketCampaign", back_populates="products")
+    price_history = relationship("MarketProductPriceHistory", back_populates="market_product")
+    matches = relationship("MarketProductMatch", back_populates="market_product")
+
+    __table_args__ = (
+        UniqueConstraint(
+            "campaign_id",
+            "platform_code",
+            "platform_product_id",
+            name="uq_market_campaign_product",
+        ),
+        Index("idx_market_product_platform_seen", "platform_code", "last_seen_at"),
+        Index("idx_market_product_discount", "discount_rate", "price"),
+    )
+
+
+class MarketProductPriceHistory(Base):
+    """市場商品價格歷史快照。"""
+
+    __tablename__ = "market_product_price_history"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    market_product_id = Column(Integer, ForeignKey("market_campaign_products.id"), nullable=False, index=True)
+    campaign_id = Column(Integer, ForeignKey("market_campaigns.id"), nullable=False, index=True)
+    platform_code = Column(String(50), nullable=False, index=True)
+    platform_product_id = Column(String(200), nullable=False, index=True)
+    price = Column(Float)
+    original_price = Column(Float)
+    discount_rate = Column(Float)
+    stock_text = Column(String(200))
+    sold_count = Column(Integer)
+    rank_position = Column(Integer)
+    crawled_at = Column(DateTime, default=taipei_now, nullable=False, index=True)
+    batch_id = Column(String(80), nullable=False, index=True)
+    metadata_json = Column(Text)
+
+    market_product = relationship("MarketCampaignProduct", back_populates="price_history")
+
+    __table_args__ = (
+        Index("idx_market_price_platform_time", "platform_code", "platform_product_id", "crawled_at"),
+        Index("idx_market_price_campaign_time", "campaign_id", "crawled_at"),
+    )
+
+
+class MarketProductMatch(Base):
+    """市場商品與我方 MOMO 商品的比對審核結果。"""
+
+    __tablename__ = "market_product_matches"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    market_product_id = Column(Integer, ForeignKey("market_campaign_products.id"), nullable=False, index=True)
+    momo_product_id = Column(Integer, ForeignKey("products.id"), index=True)
+    momo_i_code = Column(String(50), index=True)
+    match_score = Column(Float, default=0.0, nullable=False)
+    match_status = Column(String(30), default="needs_review", nullable=False, index=True)
+    match_reason_json = Column(Text)
+    created_at = Column(DateTime, default=taipei_now, nullable=False)
+    reviewed_at = Column(DateTime)
+    reviewed_by = Column(String(120))
+
+    market_product = relationship("MarketCampaignProduct", back_populates="matches")
+
+    __table_args__ = (
+        UniqueConstraint("market_product_id", "momo_i_code", name="uq_market_product_momo_match"),
+        Index("idx_market_match_status_score", "match_status", "match_score"),
+    )
+
+
+class MarketCrawlerRun(Base):
+    """市場情報爬蟲執行紀錄。"""
+
+    __tablename__ = "market_crawler_runs"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    platform_code = Column(String(50), index=True)
+    crawler_name = Column(String(120), nullable=False, index=True)
+    campaign_id = Column(Integer, ForeignKey("market_campaigns.id"), index=True)
+    batch_id = Column(String(80), nullable=False, index=True)
+    started_at = Column(DateTime, default=taipei_now, nullable=False, index=True)
+    finished_at = Column(DateTime)
+    status = Column(String(30), default="started", nullable=False, index=True)
+    dry_run = Column(Boolean, default=True, nullable=False)
+    pages_found = Column(Integer, default=0, nullable=False)
+    products_found = Column(Integer, default=0, nullable=False)
+    products_changed = Column(Integer, default=0, nullable=False)
+    error_count = Column(Integer, default=0, nullable=False)
+    error_message = Column(Text)
+    metadata_json = Column(Text)
+
+    __table_args__ = (
+        Index("idx_market_crawler_run_platform_time", "platform_code", "started_at"),
+        Index("idx_market_crawler_run_status_time", "status", "started_at"),
+    )
diff --git a/docs/adr/ADR-035-cross-platform-market-campaign-intelligence.md b/docs/adr/ADR-035-cross-platform-market-campaign-intelligence.md
new file mode 100644
index 0000000..21db785
--- /dev/null
+++ b/docs/adr/ADR-035-cross-platform-market-campaign-intelligence.md
@@ -0,0 +1,181 @@
+# ADR-035: 跨平台市場活動情報系統
+
+- **狀態**: Accepted
+- **日期**: 2026-05-06
+- **觸發**: 使用者提出定期掌握 MOMO / 蝦皮 / 酷澎 / PChome 等電商活動檔期、活動商品、競品價格與資料庫保存需求
+- **相關 ADR**: ADR-011（跨專案資源隔離）、ADR-017（模組化收尾路線圖）、ADR-025（市場情報週報）
+- **相關 Memory**: `docs/memory/code_modularization_inventory_20260430.md`
+
+## Context
+
+EwoooC 目前已有 MOMO EDM / 節慶活動資料、`promo_products`、PChome 競品價格 feeder、PPT 市場情報週報與多個分析頁，但跨平台活動情報尚未形成獨立資料模型與可維護爬蟲框架。
+
+若直接把蝦皮、酷澎、PChome 等平台資料塞進既有 `promo_products`、`routes/sales_routes.py`、`scheduler.py` 或分析頁大型 template，會造成下列風險：
+
+1. 不同平台欄位語意不同，舊表無法承載活動檔期、平台商品 ID、折扣券、銷售訊號與價格歷史。
+2. 既有 `scheduler.py`、`routes/sales_routes.py`、`routes/dashboard_routes.py`、多個 crawler service 已達大檔治理門檻，新增功能會加劇技術債。
+3. 新爬蟲若直接上正式排程，可能造成 DB 寫入量、外部平台 rate limit、排程阻塞與告警噪音。
+4. 新市場情報頁若複製既有巨型 Jinja template 模式，會延續 UI token、字體、色彩與點陣風格不一致問題。
+
+## Decision
+
+建立新的 **跨平台市場活動情報系統**，採分階段落地、預設關閉、可獨立回退的方式推進。
+
+### 1. 模組邊界
+
+新功能必須使用獨立模組，不得塞回既有巨檔：
+
+- `services/market_intel/`：活動探索、商品爬取、正規化、商品比對、告警摘要。
+- `services/market_intel/adapters/`：各平台 adapter，例如 MOMO / PChome / Coupang / Shopee。
+- `database/market_intel_models.py`：`market_*` ORM models。
+- `routes/market_intel_routes.py`：市場情報頁面與 API route glue。
+- `templates/market_intel/`：市場情報 UI template。
+- `services/scheduler/` 或獨立 job module：市場情報排程掛載點。
+
+### 2. 資料模型
+
+新增 `market_*` schema 作為唯一主資料層：
+
+- `market_platforms`
+- `market_campaigns`
+- `market_campaign_snapshots`
+- `market_campaign_products`
+- `market_product_price_history`
+- `market_product_matches`
+- `market_crawler_runs`
+
+`promo_products` 只作為既有 MOMO 活動資料的相容來源或雙寫過渡，不再承接跨平台唯一真相。
+
+### 3. Feature Flag 與啟用策略
+
+市場情報第一階段必須預設關閉：
+
+- `MARKET_INTEL_ENABLED=false`
+- `MARKET_INTEL_CRAWLER_ENABLED=false`
+- `MARKET_INTEL_WRITE_ENABLED=false`
+
+初期允許 dry-run：建立 run log、解析活動與商品，但不大量寫入正式商品資料。正式入庫與排程啟用需另行通過 smoke test、rate limit 驗證與 rollback drill。
+
+### 4. 爬蟲安全邊界
+
+市場情報爬蟲只允許抓公開頁面或公開結構化資料，不做登入、不碰會員資料、不破解反爬、不使用帳號池、不繞付費牆。
+
+每平台 adapter 必須具備：
+
+- rate limit
+- timeout
+- retry ceiling
+- user-agent 與來源識別
+- run log
+- error classification
+- dry-run mode
+- 可單平台停用開關
+
+### 5. UI / UX 邊界
+
+市場情報 UI 不複製巨型分析頁模式，必須先抽共用元件與設計 token：
+
+- 活動檔期看板
+- 活動商品池
+- 商品比對審核
+- 市場機會與威脅
+
+所有新頁必須符合 V2 暖紙、暖墨、焦糖 accent、等寬數字、點陣紋理與真實資料規範。未串接資料時只能顯示可診斷空狀態，不得使用假商品或假 KPI。
+
+### 6. 上線與回退
+
+部署遵守 ADR-011：
+
+- 禁止 `docker compose ... --remove-orphans`
+- 禁止影響 `momo-db` 容器生命週期
+- 只用 `docker compose up -d --no-deps --force-recreate <service>` 精準重建
+- health check 只打 `/health`
+
+異常回退順序：
+
+1. 關閉 `MARKET_INTEL_*` feature flags。
+2. 停用市場情報 scheduler job。
+3. 保留 `market_*` 表與 run log，不刪資料。
+4. 回復上一版 route / service 程式碼。
+5. 僅重啟受影響應用容器，不動 DB。
+
+## Phased Rollout
+
+### Phase 0：Readiness Audit
+
+- 更新模組化 inventory。
+- 確認 `scheduler.py` 無 conflict marker 且可 py_compile。
+- 標記市場情報不可寫入的既有大檔。
+- 完成 ADR-035。
+
+### Phase 1：Skeleton Only
+
+- 新增 feature flags。
+- 新增 `market_intel` package skeleton。
+- 新增空 route / disabled page / dry-run service。
+- 不啟用正式排程，不大量入庫。
+
+### Phase 2：DB Schema
+
+- 新增 `market_*` ORM models。
+- 補 metadata import 與 schema smoke。
+- 寫入 crawler run log 與少量 dry-run snapshot。
+
+### Phase 3：MOMO / PChome Adapter
+
+- 先接成本最低且已有脈絡的平台。
+- 只抓公開活動入口與活動商品。
+- 建立活動與商品正規化規則。
+
+### Phase 4：Coupang / Shopee Adapter
+
+- Coupang 先做保守 adapter。
+- Shopee 因動態資料與反爬風險較高，最後做，並維持更嚴格節流。
+
+### Phase 5：Product Matching + HITL
+
+- 用品牌、規格、容量、關鍵字與現有商品資料計算 match score。
+- 低信心進人工審核，不自動合併。
+
+### Phase 6：AI Insight / Telegram
+
+- 只基於 DB 實證資料產生摘要與告警。
+- 不做空泛 LLM 建議。
+- 高風險告警需包含平台、活動、商品、價差、資料時間與可追溯 run id。
+
+## Alternatives Considered
+
+### 方案 A：直接擴充 `promo_products`
+
+不採用。`promo_products` 偏 MOMO 活動商品語境，無法乾淨承載跨平台活動、商品快照、價格歷史、比對審核與 crawler run log。
+
+### 方案 B：直接塞進 `scheduler.py` 與既有 crawler service
+
+不採用。`scheduler.py` 與多個 crawler service 已達大檔治理門檻，新增跨平台 adapter 會讓排程與錯誤隔離更脆弱。
+
+### 方案 C：先做完整 UI 再補資料
+
+不採用。違反真實資料與真實頁面規範，容易產生假 KPI、假商品與不可診斷狀態。
+
+## Consequences
+
+**正面**
+
+- 市場情報可以獨立演進，不污染業績分析、dashboard、scheduler 既有技術債。
+- 每平台 adapter 可單獨停用、測試與回退。
+- `market_*` schema 可保留歷史、做趨勢與商品比對。
+- AI 告警能基於可追溯 DB run log，降低空泛推論。
+
+**負面**
+
+- 初期開發量比「直接塞舊表」更高。
+- 需要新增 schema、service、route、UI 與 scheduler registry。
+- Shopee 等平台可能因公開資料穩定性與 rate limit 需要較長探索期。
+
+## Acceptance Criteria
+
+- Phase 0 完成後，不改 runtime 行為。
+- Phase 1 完成後，`MARKET_INTEL_ENABLED=false` 時所有新功能完全不影響既有頁面與排程。
+- 任一 crawler adapter 失敗不得阻塞既有 MOMO 排程。
+- 新市場情報 route 不新增到 `app.py`。
+- 任一新 Python 檔若超過 600 行需提出拆分理由，超過 800 行需更新模組化 inventory。
diff --git a/docs/adr/README.md b/docs/adr/README.md
index 80fe8c8..33c0f4c 100644
--- a/docs/adr/README.md
+++ b/docs/adr/README.md
@@ -56,6 +56,7 @@
 | [032](ADR-032-rag-autonomous-learning-loop.md) | RAG 自主學習迴圈 — Distiller + PromotionGate + 反饋環（Phase 11） | Accepted | 2026-05-03 |
 | [033](ADR-033-rag-three-guardrails.md) | RAG 治理三護欄 — Promotion Gate / Firecrawl 資源 / BGE-M3 一致性（Owen v5.0 鐵律） | Accepted | 2026-05-03 |
 | [034](ADR-034-dynamic-model-router.md) | Caller × Context 動態 Model Router（短文 gemma3 / 複雜 SKU qwen3:14b / 重構 coder:32b） | Accepted | 2026-05-04 |
+| [035](ADR-035-cross-platform-market-campaign-intelligence.md) | 跨平台市場活動情報系統 | Accepted | 2026-05-06 |
 
 ## 規範
 
diff --git a/docs/guides/claude_design_brief.md b/docs/guides/claude_design_brief.md
new file mode 100644
index 0000000..52eaa25
--- /dev/null
+++ b/docs/guides/claude_design_brief.md
@@ -0,0 +1,581 @@
+# EwoooC × MOMO Pro — Claude Design Brief
+**Version:** 1.0 (2026-05-01)
+**Purpose:** 供 Claude Design 理解現況並繼續 UI/UX 視覺設計優化。
+
+---
+
+## 1. 專案概覽
+
+| 欄位 | 內容 |
+|------|------|
+| 產品名稱 | EwoooC 商家後台（原名 MOMO Pro）|
+| 產品類型 | B2B 電商監控與管理系統（商品價格監控、活動管理、業績分析）|
+| 語言 | 繁體中文 (zh-TW) |
+| 渲染方式 | Server-side Jinja2 (Flask)，無 SPA |
+| CSS 框架 | Bootstrap 5.3.3 |
+| 圖標庫 | Font Awesome 6.0.0 |
+| 圖表 | Chart.js 3.9.1 + ECharts 5.4.3 |
+
+---
+
+## 2. 設計語言宣言
+
+> **"Claude 暖系 × Nothing Phone 點陣機械感"**
+
+### 核心哲學
+- **底色**：溫暖米紙感（`#ebe6dc`）— 不刺眼的辦公室頁面底
+- **主調**：焦糖橘（`#c96442`）— 暖而有力的品牌色，取自 Claude AI 色調
+- **黑白對比**：Nothing Phone 風格的純黑側欄（`#1a1a1a`）搭配鮮明白字
+- **排版**：標題用 JetBrains Mono 等寬字，機械儀表板感；內文用 Inter + Noto Sans TC
+- **裝飾**：8px 點陣背景（dot matrix）作為深色卡片的背景紋路
+- **陰影哲學**：線條優先（`1px solid rgba(...)`），避免大陰影，方角為主（radius 最大 6px）
+
+---
+
+## 3. 兩套 Layout 系統（重要！現況）
+
+目前有**兩個共存的 Base Template**，正處於從舊版遷移至新版的過渡期：
+
+### 3-A. 舊版（`base.html` + `_navbar.html`）
+- **Layout**：頂部固定 Navbar，全頁 container 排版
+- **Navbar**：深藍漸層 `#1e3c72 → #2a5298`，固定頂部 `position: fixed`
+- **背景**：淺灰冷色 `linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%)`
+- **Accent 顏色**：藍紫漸層 `#667eea → #764ba2`（舊品牌色，仍在多數頁面中）
+- **使用頁面**：`dashboard.html`、`sales_analysis.html`、`monthly_summary_analysis.html` 等主要功能頁
+
+### 3-B. 新版（`ewoooc_base.html` + `ewoooc-tokens.css` + `ewoooc-shell.css`）
+- **Layout**：CSS Grid Sidebar（240px）+ 主內容區，Topbar 64px sticky
+- **Sidebar**：純黑背景 `#1a1a1a`，白色文字，焦糖橘 accent 高亮
+- **背景**：米色紙張感 `#ebe6dc`
+- **Accent 顏色**：焦糖橘 `#c96442`（新品牌色）
+- **使用頁面**：`vendor_stockout/`、部分新功能頁面（EwoooC 路由下的頁面）
+
+**設計方向**：以 3-B 新版為目標方向，所有優化/新設計請對齊新版設計系統。
+
+---
+
+## 4. 完整 Design Token（Source of Truth）
+
+### 4.1 色彩系統
+
+#### 背景層次（米色系）
+```
+--momo-bg-body:     #ebe6dc   ← 頁面底色（最深）
+--momo-bg-surface:  #faf7f0   ← 卡片表面（預設）
+--momo-bg-elevated: #fdfaf3   ← 懸浮/選中卡片
+--momo-bg-subtle:   #e2dccf   ← 分隔區塊底色
+--momo-bg-muted:    #cfc7b5   ← 更暗的區塊
+--momo-bg-paper:    #f3eee2   ← Sidebar 底色、特殊卡片
+```
+
+#### 文字層次（暖墨系）
+```
+--momo-text-primary:   #2a2520   ← 主要內文
+--momo-text-secondary: #645c52   ← 次要說明
+--momo-text-tertiary:  #9b9081   ← 標籤標題、placeholder
+--momo-text-disabled:  #c4baa8   ← 禁用狀態
+--momo-text-inverse:   #faf7f0   ← 深色背景上的白字
+--momo-text-link:      #c96442   ← 連結色
+--momo-text-link-hover:#8f4530   ← 連結懸停
+```
+
+#### 主色調（焦糖橘）
+```
+--momo-accent:     #c96442   ← 主 accent，Button/Active/Badge
+--momo-accent-50:  #fbf2ef   ← 極淡（hover 背景）
+--momo-accent-100: #f5e1d9   ← 淡（選中 tag 背景）
+--momo-accent-200: #ecc3b3   ← 較淡
+--momo-accent-500: #c96442   ← = accent（主）
+--momo-accent-600: #b1543a   ← hover 按鈕
+--momo-accent-700: #8f4530   ← active/pressed 按鈕
+--momo-accent-soft: rgba(201,100,66,0.12)  ← 懸停背景
+```
+
+#### 狀態色（去飽和，適配米色底）
+```
+成功 success:  text #2a7a3f | bg #e3ebd9 | border #c5d4b0
+危險 danger:   text #b5342f | bg #f0d8d4 | border #d9b1ac
+警告 warning:  text #b88416 | bg #f3e7c4 | border #d9c590
+資訊 info:     text #2d5d80 | bg #d8e2ea | border #b5c5d2
+```
+
+#### 邊框與分隔線
+```
+--momo-border:       #2a2520 （實線邊框）
+--momo-border-light: rgba(42,37,32,0.16)  ← 淡分隔線
+--momo-border-focus: #c96442  ← 聚焦狀態
+--momo-divider:      rgba(42,37,32,0.12)
+```
+
+#### 導航色（Nothing 黑）— Sidebar 專用
+```
+sidebar background:  #1a1612（深暖黑）
+nav-link hover bg:   rgba(201,100,66,0.12)（accent-soft）
+nav-link active bg:  #c96442（實色焦糖橘）
+nav-link active text: #faf7f0（反色）
+status-card border:  rgba(201,100,66,0.35)（橘色描邊）
+```
+
+### 4.2 Typography
+
+#### 字型堆疊
+```
+Display（標題）: "JetBrains Mono", "Space Mono", "SF Mono", Menlo, Consolas, monospace
+Body（內文）:   "Inter", -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif
+Mono（數據）:   "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace
+```
+
+#### 字型大小
+```
+xs   → 0.75rem  (12px)  ← 極小標籤
+sm   → 0.8125rem (13px) ← 次要內文、導航項目
+base → 0.9375rem (15px) ← 主要內文
+lg   → 1.0625rem (17px) ← 稍大內文
+xl   → 1.625rem  (26px) ← 頁面主標題
+2xl  → 2.25rem   (36px) ← 大數字顯示
+```
+
+#### 字重與行高
+```
+normal:   400   base line-height: 1.5
+medium:   500   tight line-height: 1.15（標題）
+semibold: 600   loose line-height: 1.7（長文）
+bold:     700
+black:    800（品牌名稱、數字展示用）
+```
+
+#### 特殊文字工具類
+```css
+.momo-display  → JetBrains Mono，標題用，搭配 font-feature-settings: "tnum", "ss01"
+.momo-mono     → 等寬字體，數字/代碼，搭配 font-feature-settings: "tnum"
+.momo-label    → JetBrains Mono 10px，font-weight 600，letter-spacing 0.12em，text-transform uppercase
+                 用於分類標題、狀態標籤（如 "監控" "營運" "系統"）
+```
+
+### 4.3 間距系統（8px 基數）
+```
+--momo-space-1: 0.25rem  (4px)
+--momo-space-2: 0.5rem   (8px)
+--momo-space-3: 0.75rem  (12px)
+--momo-space-4: 1rem     (16px)
+--momo-space-5: 1.5rem   (24px)
+--momo-space-6: 2rem     (32px)
+--momo-space-7: 3rem     (48px)
+--momo-space-8: 4rem     (64px)
+```
+
+頁面內容區 padding：`28px 32px 40px`（desktop），`20px 16px 32px`（mobile）
+
+### 4.4 圓角系統（方角優先）
+```
+--momo-radius-sm:     2px   (0.125rem) ← badge、code、shortcut
+--momo-radius-md:     4px   (0.25rem)  ← 按鈕、輸入框、卡片 → 預設
+--momo-radius-lg:     6px   (0.375rem) ← 較大卡片、modal
+--momo-radius-pill:   50rem            ← 圓形按鈕、chip
+--momo-radius-circle: 50%              ← 頭像
+```
+
+> 注意：舊版頁面（dashboard.html）使用更大的圓角（16px~20px）。新設計請用 4px~6px。
+
+### 4.5 陰影系統（線條感優先）
+```
+--momo-shadow-sm:      0 0 0 1px rgba(26,26,26,0.08)
+--momo-shadow-md:      0 0 0 1px rgba(26,26,26,0.10)
+--momo-shadow-lg:      0 12px 40px -8px rgba(26,26,26,0.18), 0 0 0 1px rgba(26,26,26,0.10)
+--momo-shadow-colored: 0 0 0 2px rgba(201,100,66,0.25) ← accent 聚焦輪廓
+```
+
+> 陰影哲學：主要靠 `1px solid border` 定義邊界，大投影只用於 Modal/Popover。
+
+### 4.6 動畫系統
+```
+--momo-duration-fast:   0.12s   ← hover/focus 狀態切換
+--momo-duration-normal: 0.2s    ← sidebar 展收、dropdown
+--momo-duration-slow:   0.4s    ← Modal 出現、頁面過渡
+--momo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
+--momo-ease-out:    cubic-bezier(0, 0, 0.2, 1)
+
+基礎過渡（所有互動元件預設）：
+  color / background-color / border-color / box-shadow，各 0.12s ease-in-out
+```
+
+特殊動畫：
+```css
+@keyframes momo-pulse-dot    ← sidebar 底部爬蟲狀態 live dot（2s 閃爍）
+@keyframes momo-fade-in      ← 元素出現（opacity + translateY 2px）
+@keyframes momo-slide-up     ← Toast 進場（opacity + translateY 12px）
+```
+
+### 4.7 Z-Index 層級
+```
+1     → base
+1000  → dropdown
+1020  → sticky topbar
+1030  → fixed elements
+1040  → modal backdrop
+1050  → modal
+1060  → popover
+1070  → tooltip
+1080  → toast
+```
+
+### 4.8 Layout 尺寸
+```
+sidebar width:           240px
+sidebar collapsed width: 72px（1180px 以下自動切換）
+topbar height:           64px
+```
+
+---
+
+## 5. 版面結構（新版 EwoooC Shell）
+
+```
+┌─────────────────────────────────────────────────────┐
+│  .momo-shell  (CSS Grid: sidebar | main)            │
+│                                                      │
+│  ┌──────────┐  ┌──────────────────────────────────┐ │
+│  │ .momo-   │  │  .momo-main-shell                │ │
+│  │  sidebar │  │                                  │ │
+│  │          │  │  ┌──────────────────────────────┐│ │
+│  │  Logo    │  │  │ .momo-topbar (sticky, 64px)  ││ │
+│  │  Nav     │  │  │  [hamburger] [search] [user] ││ │
+│  │  Groups  │  │  └──────────────────────────────┘│ │
+│  │          │  │                                  │ │
+│  │  Status  │  │  ┌──────────────────────────────┐│ │
+│  │  Card    │  │  │ .momo-content (28px 32px pad) ││ │
+│  │          │  │  │   {% block ewooo_content %}  ││ │
+│  │          │  │  └──────────────────────────────┘│ │
+│  └──────────┘  └──────────────────────────────────┘ │
+└─────────────────────────────────────────────────────┘
+```
+
+### Sidebar 細節
+- **Logo 區**：`momo-logo-mark`（3×3 點陣格，黑底白點，右上角點空缺）+ `momo-brand-name`（JetBrains Mono, 18px, 800 weight）
+- **Nav Group 標題**：`.momo-label`（10px 大寫等寬），右側延伸分隔線 `::after`
+- **Nav Link**：左 icon（16px）+ label + 右側數字代碼（opacity 0.48）
+  - Default：透明底，暖墨字
+  - Hover：`accent-soft` 背景（rgba(201,100,66,0.12)）
+  - Active：`accent` 實色背景（#c96442），白字
+- **Status Card**：sidebar 底部，暖黑底 `#1a1612` + 橘色描邊 + 點陣背景紋，顯示爬蟲狀態
+
+### Topbar 細節
+- 左：mobile 漢堡選單（hidden on desktop）
+- 中左：搜尋框（flex-grow，最大 480px），`⌘K` 快捷鍵 badge
+- 中右彈性空間
+- 右側：排程時間 pill（深黑底+橘邊）、圖示按鈕（問號/鈴鐺）、使用者 chip（頭像+姓名+角色）
+
+---
+
+## 6. 元件規格
+
+### 6.1 按鈕
+
+#### Primary Button（CTA）
+```
+背景：--momo-accent (#c96442)
+文字：--momo-text-inverse (#faf7f0)
+邊框：none
+圓角：--momo-radius-md (4px)
+Hover：--momo-accent-600 (#b1543a)
+Active：--momo-accent-700 (#8f4530)
+Padding：9px 20px
+Font：0.875rem，600 weight
+```
+
+#### Secondary / Ghost Button
+```
+背景：transparent
+文字：--momo-text-primary (#2a2520)
+邊框：1px solid --momo-border-light
+圓角：4px
+Hover：bg --momo-bg-subtle
+```
+
+#### Danger Button
+```
+背景：--momo-danger (#b5342f)
+文字：white
+```
+
+#### Icon Button（.momo-icon-button）
+```
+尺寸：36×36px
+背景：transparent
+圓角：4px
+Hover：bg --momo-bg-subtle
+Color：--momo-text-secondary → primary on hover
+```
+
+### 6.2 卡片（Card）
+```
+背景：--momo-bg-surface (#faf7f0)
+邊框：1px solid --momo-border-light
+圓角：--momo-radius-lg (6px)
+陰影：--momo-shadow-sm
+Padding：24px (1.5rem)
+Hover（可選）：--momo-shadow-md
+```
+
+特殊：深色 Status Card（sidebar 底部）
+```
+背景：--momo-ink-strong (#1a1612)
+邊框：1px solid rgba(201,100,66,0.35)
+點陣背景紋路：radial-gradient dots，6px×6px
+文字：rgba(250,247,240,0.55) 標題 / rgba(250,247,240,0.62) 內文
+```
+
+### 6.3 表格
+```
+Border：none（預設），行底部 border-bottom: 1px solid --momo-divider
+Header：--momo-bg-paper 底色，--momo-label 樣式欄位標題
+Hover Row：--momo-accent-soft 背景
+Cell Padding：12px 16px
+Data 數字：.momo-mono 字體
+狀態 Badge：pill 形（border-radius: 2px），對應狀態色
+```
+
+### 6.4 徽章（Badge）
+```
+圓角：2px（方角）
+Font：10px，800 weight，全大寫
+Color：--momo-text-inverse (#faf7f0)
+背景：--momo-accent（主要），或對應狀態色
+Padding：1px 6px
+```
+
+### 6.5 搜尋框（.momo-search-box）
+```
+高度：38px
+背景：--momo-bg-paper
+邊框：1px solid --momo-border
+圓角：4px
+Placeholder：--momo-text-secondary
+Focus border：--momo-accent
+左側 icon：fa-search，margin-right 10px
+右側：⌘K shortcut badge（accent 背景，2px 圓角）
+```
+
+### 6.6 Toast 通知
+```
+位置：右上角固定（top: 24px, right: 24px），z-index: 1080
+寬度：max 360px
+圓角：6px
+自動消失：3秒
+進場動畫：slide-up（opacity + translateY 12px → 0）
+類型色：成功綠 / 危險紅 / 警告黃 / 資訊藍
+```
+
+### 6.7 Modal
+```
+背景：--momo-bg-surface
+圓角：--momo-radius-lg (6px)
+Header：--momo-ink 背景，白字（舊版用 #667eea 漸層，新版請改用暖墨色）
+Backdrop：rgba(26,26,26,0.70)
+最大寬度：sm 400px / md 640px / lg 960px / xl 1140px
+```
+
+### 6.8 用戶頭像 Chip（.momo-user-chip）
+```
+高度：40px
+Padding：4px 10px 4px 4px
+圓角：pill（50rem）
+Avatar：32×32px 圓形，背景 --momo-ink，白字，13px 800weight
+Hover：bg --momo-bg-subtle
+```
+
+### 6.9 點陣裝飾（.momo-dot-bg）
+```css
+background-image: radial-gradient(circle, rgba(26,26,26,0.12) 1px, transparent 1px);
+background-size: 8px 8px;
+```
+用於深色背景卡片（Status Card）或特殊區塊裝飾。
+
+---
+
+## 7. 導航結構
+
+```
+Sidebar Nav
+├── 【監控】
+│   ├── 01 商品看板      /              → fa-border-all
+│   ├── 02 活動看板      /edm           → fa-bullhorn
+│   └── 03 分析報表      /sales_analysis → fa-chart-line
+├── 【營運】
+│   ├── 04 廠商缺貨      /vendor-stockout → fa-box-open
+│   ├── 05 AI 助手       /ai_recommend   → fa-wand-magic-sparkles
+│   └── 06 雲端匯入      /auto_import    → fa-download
+└── 【系統】
+    └── 07 系統管理      /settings       → fa-gear
+```
+
+舊版 Navbar（base.html 頁面）另有獨立下拉選單結構（業績分析/AI助手/系統管理各含多個子項目）。
+
+---
+
+## 8. 主要頁面清單
+
+> **完整逐頁深度盤點請見 [`claude_design_brief_pages.md`](claude_design_brief_pages.md)（Appendix A）**
+> 該附錄涵蓋 41 個 template + 3 個 component，每頁包含路徑/路由/Layout/區塊/元件/互動/配色/設計問題/改造重點 9 個欄位。
+
+### 8.1 設計風格分布總覽（深掃後校正）
+
+實際發現 **4 種視覺風格混雜**，不只 2 種：
+
+| 風格 | 背景 | Accent | 頁面數 | 處置 |
+|------|------|--------|--------|------|
+| **A. 深藍 + 藍紫漸層**（舊主流）| `#f5f7fa` | `#1e3c72→#2a5298` + `#667eea→#764ba2` | 23+ | **全部遷移至 B** |
+| **B. 焦糖橘暖系**（目標） | `#ebe6dc` | `#c96442` | 6+ | 維持並擴張 |
+| **C. 紫色獨立入口頁** | `#667eea→#764ba2` | `#4F46E5` | 4 (login/403/maintenance/_loading) | 改用焦糖橘色相 |
+| **D. GitHub Dark Terminal** | `#0d1117` | `#3fb950/#58a6ff/#bc8cff` | 2 (ai_automation_smoke/code_review) | 保留深色但與焦糖橘對齊 |
+
+### 8.2 風格 B（目標設計）參考頁面
+
+Claude Design 可直接參考這幾頁的 Pattern 作為其他頁面遷移的樣板：
+
+| 頁面 | 路徑 | 為何是樣板 |
+|------|------|-----------|
+| `vendor_stockout_index_v2.html` | `/vendor-stockout` | 風格 B 最完整實作：Hero+Pulse Box+KPI Grid+Flow Cards+Summary |
+| `edm_dashboard_v2.html` | `/edm/dashboard_v2` | 含 Chart.js 整合的範例（Modal 內動態載圖）|
+| `vendor_stockout_import_v2.html` | `/vendor-stockout/import` | Dropzone + 多狀態面板（File/Progress/Result/Error）|
+| `_ewoooc_shell.html` | (component) | Sidebar 導航結構與 Status Card |
+
+### 8.3 重點優化頁面 Top 10
+
+依照「使用頻率 × 設計債務 × 影響範圍」排序：
+
+| 排名 | 頁面 | 行數 | 主要債務 |
+|------|------|------|---------|
+| 1 | `dashboard.html` | 1405 | 流量最大首頁，舊藍紫，無空狀態 |
+| 2 | `sales_analysis.html` | 3165 | 系統最複雜頁，三種圖表庫並存 |
+| 3 | `web/templates/vendor_stockout/list.html` | 1793 | 1600+ 行 inline JS 無模組化 |
+| 4 | `daily_sales.html` | 1905 | 自訂月曆 878 行 CSS，行動版爆表 |
+| 5 | `settings.html` | 1650 | 巨型設定頁，padding 重疊 bug |
+| 6 | `monthly_summary_analysis.html` | 1473 | ECharts 待換 Chart.js |
+| 7 | `edm_dashboard_v2.html` | 1130 | 已是 B 風格但 CSS 600+ 行待精簡 |
+| 8 | `ai_recommend.html` | 1000+ | AI 互動 UX 流式輸出未實作 |
+| 9 | `user_management.html` | 906 | 權限矩陣未視覺化 |
+| 10 | `logs.html` | 872 | 篩選器邏輯複雜，最佳重構樣本 |
+
+---
+
+## 9. 色彩衝突說明（設計遷移中）
+
+目前有**三種 Accent 色系混用**，這是技術債，新設計一律使用 **焦糖橘**：
+
+| 色系 | Hex | 出現位置 | 備注 |
+|------|-----|---------|------|
+| 焦糖橘 ✓ | `#c96442` | ewoooc 新版頁面 | **目標設計色** |
+| 藍紫 ✗ | `#667eea → #764ba2` | dashboard.html、表格 header、按鈕 | 舊版，待替換 |
+| 深藍 ✗ | `#1e3c72 → #2a5298` | 舊版 Navbar、base.html | 舊版，待替換 |
+
+---
+
+## 10. 響應式斷點
+
+| 斷點 | 寬度 | 行為 |
+|------|------|------|
+| Desktop | ≥1180px | Sidebar 240px 全展開，顯示文字 |
+| Collapsed | 1180px–820px | Sidebar 收至 72px，只顯示圖標 |
+| Mobile | ≤820px | Sidebar 隱藏（slide-in 抽屜式），hamburger 按鈕出現 |
+
+Topbar 漸進隱藏（Container Query）：
+- ≤1024px：隱藏排程 pill
+- ≤880px：隱藏使用者名稱/角色
+- ≤720px：隱藏搜尋框文字
+
+---
+
+## 11. 圖表設計規範
+
+### Chart.js（折線圖、柱狀圖、圓餅圖）
+目前使用舊藍紫色系，應遷移至：
+```
+主線色：#c96442（焦糖橘）
+輔助線：#b5342f（暗紅，下跌）、#2a7a3f（深綠，上漲）
+Fill 漸層：從 rgba(201,100,66,0.3) → rgba(201,100,66,0.05)
+格線：rgba(42,37,32,0.06)（極淡）
+Tooltip：背景 rgba(26,26,26,0.88)，白字，焦糖橘描邊
+```
+
+### ECharts（複雜多維圖表）
+應使用同色系調色板，確保視覺一致。
+
+---
+
+## 12. 互動模式
+
+| 模式 | 實現方式 |
+|------|---------|
+| 表格行點擊展開詳情 | onclick → Bootstrap Modal |
+| KPI Card 點擊鑽取 | onclick → Modal + fetch API |
+| 搜尋篩選 | form GET 提交（非 SPA） |
+| 操作回饋 | Toast 通知（右上角滑入） |
+| 複製品號 | Clipboard API + 視覺回饋（文字變 ✅ 已複製）|
+| 載入狀態 | Bootstrap spinner-border |
+| 全頁載入 | 自訂 overlay 動畫（WOOO 品牌）|
+
+---
+
+## 13. 品牌資產
+
+### Logo 變體
+```
+logo.png             → 標準 logo
+logo_transparent.png → 透明底
+logo_v4_gradient.png → 漸層版
+logo_v4_glass.png    → 玻璃質感
+logo_navbar.svg      → 導航列向量版
+logo_circle.svg      → 圓形版
+```
+
+### 品牌名稱
+- 老品牌：**WOOO** / **WOOO TECH**
+- 新品牌：**EwoooC**（等寬字體呈現，副標：「價格監控 V2」）
+
+### Logo Mark（點陣格設計）
+```
+3×3 格，32×32px，gap 1.5px，padding 5px
+背景：--momo-ink (#1a1612)，圓角 2px
+點：圓形白點
+中心格（第5格）：空白
+→ 點陣 ⠿ 風格，Nothing Phone 美學
+```
+
+---
+
+## 14. 當前設計亮點（可保留延伸）
+
+1. **JetBrains Mono 標題** — 機械儀表板感，數字排版優秀
+2. **點陣背景裝飾** — Status Card 深色背景上的橘色點陣，獨特品牌感
+3. **Live Dot 動畫** — 橘色脈衝點，搭配發光陰影 `box-shadow: 0 0 8px #c96442`
+4. **Nav Code 數字** — 每個導航項目右側的灰色數字代碼（01~07），Like a terminal
+5. **焦糖橘 × 暖墨 × 米白** — 三色搭配溫暖而不俗氣
+6. **⌘K 搜尋框** — 開發者友善，鍵盤優先設計
+
+---
+
+## 15. 當前設計弱點（優化方向）
+
+1. **兩套設計系統未統一** — 舊版藍紫 vs 新版焦糖橘，視覺割裂感強
+2. **Dashboard 主頁** — 流量最大的頁面仍用舊版，設計待升級
+3. **大圓角** — 舊版 16~20px border-radius，與新版方角設計衝突
+4. **無 Dark Mode** — Design Token 已備妥，只缺 JS 實現
+5. **Modal Header** — 舊版用藍紫漸層，應統一為暖墨色
+6. **缺共用元件庫** — 卡片/表格/表單 Pattern 散落各頁面，未抽象化
+7. **無 Focus Style** — Accessibility 待加強（focus-visible 輪廓）
+8. **空狀態 (Empty State)** — 多數頁面僅有文字，缺圖示/插圖
+
+---
+
+## 16. 技術限制（設計時須知）
+
+- **無 CSS Build Tool**：無法使用 SCSS/PostCSS，所有 CSS 必須是原生 CSS 或內嵌 `<style>`
+- **無前端框架**：無 React/Vue，互動依賴 Bootstrap 5 JS + Vanilla JS
+- **CDN 引用**：Bootstrap、Font Awesome、Chart.js 等均從 CDN 載入
+- **Jinja2 模板**：設計元素需考慮 Flask 模板語法（`{{ variable }}`、`{% if %}`）
+- **Bootstrap 5 共存**：新設計的元件需能與 Bootstrap 5 Class 共存，不衝突
+
+---
+
+*此文件由 Claude Code 自動掃描 45+ 個 template 檔案及 CSS token 系統生成，2026-05-01。*
diff --git a/docs/guides/claude_design_brief_pages.md b/docs/guides/claude_design_brief_pages.md
new file mode 100644
index 0000000..a9e1405
--- /dev/null
+++ b/docs/guides/claude_design_brief_pages.md
@@ -0,0 +1,1002 @@
+# Appendix A — 逐頁深度盤點
+**Companion to:** `claude_design_brief.md`
+**Version:** 1.0 (2026-05-01)
+**Scope:** 41 個 HTML template + 3 個共用 component，每頁的版面結構、元件、互動、設計問題與改造重點。
+
+---
+
+## 0. 重要更新：發現第四種設計風格
+
+原 brief 提到「兩套設計系統」，深掃後發現實際是 **四種視覺風格混雜**：
+
+| 風格 | 背景 | Accent | 代表頁面 |
+|------|------|--------|---------|
+| **A. 深藍 + 藍紫漸層**（舊） | `#f5f7fa` | `#1e3c72→#2a5298` + `#667eea→#764ba2` | `base.html`、`dashboard.html`、`sales_analysis.html` |
+| **B. 焦糖橘暖系**（目標） | `#ebe6dc` | `#c96442` | `ewoooc_base.html`、`vendor_stockout_index_v2.html` |
+| **C. 紫色獨立頁** | `#667eea→#764ba2` 漸層 | `#4F46E5` | `login.html`、`403.html`、`maintenance.html`、`_loading.html` |
+| **D. GitHub Dark Terminal** | `#0d1117` | `#3fb950`/`#58a6ff`/`#bc8cff` | `ai_automation_smoke.html`、`code_review.html` |
+
+**改造原則**：
+- 風格 A 全部遷移至風格 B（焦糖橘）
+- 風格 C 統一品牌入口頁，可保留漸層但改用焦糖橘色相
+- 風格 D（開發者工具頁）可保留深色主題，但需與焦糖橘做點綴對齊
+
+---
+
+## 1. 主儀表板與分析報表（風格 A，全部待遷移）
+
+### 1.1 dashboard.html — 商品看板（首頁）
+- **路徑**：`templates/dashboard.html`（1405 行）
+- **路由**：`/`（系統首頁）
+- **Layout**：獨立（自包含 HTML，不 extends）
+- **用途**：MOMO 價格監控主控台，KPI + 商品清單 + 歷史圖表
+- **區塊（從上到下）**：
+  1. Navbar（include `_navbar.html`）
+  2. KPI Cards（2 大卡：商品監控概況 + 今日價格動態）
+  3. 動態 KPI Grid（9 小卡：漲/降/下架數、平均幅度、活躍度、最活躍分類、最大變動）
+  4. 控制列（搜尋 + 分類篩選 + 狀態篩選 button group + 更新/通知按鈕）
+  5. 商品列表 Table（可排序，含商品圖、名稱、品號、價格、漲跌幅、上架時間）
+  6. Pagination
+  7. Modal: 歷史價格圖表（Chart.js line + 雙軸）
+  8. Modal: 價格變動明細（xl，動態 fetch + table）
+- **元件**：Bootstrap Card/Table/Modal/Dropdown/Badge/Button Group + Chart.js 3.9.1
+- **互動**：
+  - `/api/history/{productId}` 取歷史價格
+  - `/api/price_change_details?type=...` 取分類/變動明細
+  - `/api/run_task` 手動爬蟲、`/api/trigger_momo_notification` 發送通知
+  - 行點擊 → 開歷史圖 Modal
+  - KPI 卡點擊 → 開明細 Modal
+  - 品號點擊 → Clipboard API 複製
+- **配色現況**：⚠️ 風格 A，主色 `#667eea/#764ba2`（藍紫）+ Navbar `#1e3c72/#2a5298`
+- **設計問題**：
+  - 內嵌 `<style>` 636 行，多處 inline `padding-top: 70px`
+  - 無空狀態插圖（搜尋無結果只有純文字）
+  - Modal 無 skeleton loading，直接顯示 spinner
+  - 表行 hover 用 `transform: scale(1.002)` 易觸發重排
+  - 大圓角（卡片 16~20px、KPI 卡 20px）與新版方角不符
+- **Claude Design 改造重點**：
+  1. 抽出全部 inline style，套用 `--momo-*` token，棄藍紫改焦糖橘
+  2. KPI Grid 改 CSS Grid 自適應（mobile 2x4、desktop 3x3），數字字體換 JetBrains Mono
+  3. Modal Header 改暖墨色 `--momo-ink`，棄藍紫漸層
+  4. 商品列表加空狀態插圖 + 引導文字
+  5. 圓角全改 `--momo-radius-md` (4px) 或 `--momo-radius-lg` (6px)
+
+### 1.2 sales_analysis.html — 業績分析（系統最大頁面）
+- **路徑**：`templates/sales_analysis.html`（3165 行）
+- **路由**：`/sales_analysis`
+- **Layout**：獨立
+- **用途**：多維度業績分析（廠商 Top 10、分類餅、價格帶 TreeMap、散點、BCG 矩陣、淡旺季熱力、行銷活動）
+- **區塊**：
+  1. Navbar
+  2. 進階篩選器（日期、地區、廠商、借採轉、類別）— 自訂 dropdown 樣式
+  3. Loading Overlay（複雜雲端漂浮 + 旋轉光環動畫）
+  4. 多圖表區（橫條/餅/TreeMap/散點/BCG/熱力/星期/小時）
+  5. 行銷活動折扣 + 折價券圖
+  6. DataTable（AJAX 載入）
+- **元件**：Chart.js 3.9.1 + ECharts 5.4.3 + chartjs-chart-treemap 2.0.2 + DataTables 1.11.5 + Flatpickr 4.6.13
+- **互動**：篩選聯動 fetch → 多圖表並行更新；無 URL state 保留
+- **配色**：⚠️ 風格 A，篩選列 `#667eea→#764ba2`，圖表用 `#4F46E5`
+- **設計問題**：
+  - `<style>` 569 行，含複雜 Loading Overlay 動畫
+  - **三種圖表庫並存**（Chart.js / ECharts / Treemap plugin），維護成本高
+  - 篩選器無 URL query state（刷新遺失）
+  - 熱力圖色階對紅綠色盲不友善
+  - 無虛擬滾動，廠商超過 100 筆會卡
+- **Claude Design 改造重點**：
+  1. 統一改 Chart.js（棄 ECharts），複雜圖（Heatmap/Sankey）改 D3 或 Plotly
+  2. Loading Overlay 改輕量 Skeleton Screen（移除雲端漂浮動畫）
+  3. 篩選列改標準 form-select + URL query state，可分享網址
+  4. DataTable 改虛擬滾動
+  5. 圖表色板改焦糖橘為主，狀態色用 `#2a7a3f`（漲）/ `#b5342f`（跌），補色盲友善色階
+
+### 1.3 monthly_summary_analysis.html — 月份總表分析
+- **路徑**：`templates/monthly_summary_analysis.html`（1473 行）
+- **路由**：`/monthly_summary_analysis`
+- **Layout**：獨立
+- **用途**：月度 KPI + 廠商排行 + YoY 對比 + 品牌分類分析
+- **區塊**：頁標 → 篩選列 → 商業洞察 Top 3 → YoY 對比 → Top 50 廠商 → 類別分佈 → 價格帶 → 月份摘要 DataTable
+- **元件**：ECharts（多種類）+ DataTables + Bootstrap Card/Form Select
+- **配色**：⚠️ 風格 A，洞察卡用 `bg-primary/success/warning`
+- **設計問題**：
+  - Highlights 卡 `display:none` 時佔位影響佈局（應用 collapse）
+  - Top 50 廠商圖固定高 900px，手機爆表
+  - 「特定/身體保養/彩妝」分類圖只有容器無實作
+  - ECharts 全局初始化無錯誤處理
+- **Claude Design 改造重點**：
+  1. Highlights 改 Bootstrap Offcanvas 或 collapse 避免 layout shift
+  2. 廠商排行加分頁或虛擬滾動
+  3. 分類分析改 Tab 元件
+  4. ECharts 統一替換 Chart.js
+  5. 響應式高度：Desktop 900px → Tablet 600px → Mobile 350px
+
+### 1.4 daily_sales.html — 當日業績
+- **路徑**：`templates/daily_sales.html`（1905 行）
+- **路由**：`/daily_sales`
+- **Layout**：獨立
+- **用途**：單日業績看板，日曆 + 6 KPI + 30 天趨勢 + DoD/WoW + Top 10 + 行銷活動
+- **區塊**：
+  1. Navbar
+  2. 漸層 page-header + 日期 select
+  3. **Calendar Container**（自訂月曆，每日 KPI、DoD badge、選中 pulseGlow 動畫）
+  4. KPI 卡組（6 張：營收/成本/毛利/SKU/客單/銷量）
+  5. 圖表區（30 天趨勢雙軸 + DoD/WoW 折線 + Top 10 橫條）
+  6. 行銷活動貢獻（折扣/折價券並列）
+  7. 分類業績明細 DataTable
+- **元件**：自訂 CSS Calendar + Chart.js（雙軸、響應式容器）+ DataTables
+- **配色**：⚠️ 風格 A，page header 藍紫漸層
+- **設計問題**：
+  - 月曆 CSS 878 行，響應式斷點 5 層
+  - 圖表 `min-width: 400/450/500px` 手機需橫滾
+  - 月度/單日 KPI 共用同卡片邏輯混亂
+  - 行銷活動圖條件編譯佈局不穩定
+- **Claude Design 改造重點**：
+  1. 月曆改 `fullcalendar.io` 庫，減少自訂 CSS
+  2. 圖表容器改 `aspect-ratio: 16/9`，棄 `min-width`
+  3. 月度/單日 KPI 用 `{% if is_month_view %}` 分離為兩組
+  4. 行銷活動先 render skeleton，無資料時隱藏
+  5. 分類表加搜尋 + 排序 UI
+
+### 1.5 growth_analysis.html — 成長分析
+- **路徑**：`templates/growth_analysis.html`（250 行）
+- **路由**：`/growth_analysis`
+- **Layout**：獨立
+- **用途**：YTD 累計 + 月營收 + AOV + 訂單 + 月增率 + 毛利率
+- **區塊**：頁標 → 3 KPI 卡 → 4 圖表（混合柱+線、雙軸、條件背景）
+- **元件**：純 Chart.js
+- **配色**：⚠️ Bootstrap 原色（bg-primary/success/info），Chart 用 `#36a2eb/#2ecc71`
+- **設計問題**：
+  - `<style>` 僅 25 行，缺現代設計語言
+  - 圖表高度固定 350px / 300px
+  - 無 YoY 對比視覺化
+  - Chart 初始化無 try-catch
+- **Claude Design 改造重點**：
+  1. 套 design token 統一色板
+  2. KPI 卡支援 Current vs LY 對比
+  3. 圖表用 CSS Grid 2x2 響應式
+  4. 加空狀態 illustration
+  5. 加 try-catch fallback
+
+### 1.6 price_comparison.html — PChome vs MOMO 比價
+- **路徑**：`templates/price_comparison.html`（598 行）
+- **路由**：`/price_comparison`
+- **Layout**：base.html (extends)
+- **用途**：兩平台商品爬取 + 上傳 Excel + 手動輸入 → 相似度匹配 → 價差分析
+- **區塊**：標題 → 三步驟操作區 → 比價按鈕 → 進度顯示 → 結果統計卡（4 張）→ 結果表（7 欄）→ 匯出 → 上傳/手動 Modal
+- **元件**：Bootstrap Card/Form/Modal/Alert/Table/Badge
+- **互動**：爬取 PChome → 上傳 Excel → quick_compare → 前端 CSV 匯出
+- **配色**：Bootstrap 原色 btn-primary/info/warning/success
+- **設計問題**：
+  - 相似度閾值 0.8/0.6 硬編碼無 UI 控制
+  - 結果表欄寬 35% 商品名 truncate 不易對比
+  - 比較結果無記憶（重新比價會遺失舊結果）
+  - 手動輸入 textarea placeholder 過長
+- **Claude Design 改造重點**：
+  1. 三步驟改 Wizard/Stepper UI
+  2. 相似度閾值改 Slider 可調
+  3. 結果表改可展開行（Collapse），顯示完整描述
+  4. 結果存 localStorage 支援 undo/redo
+  5. 手動輸入改 drag-drop + 表格編輯模式
+
+### 1.7 abc_analysis_detail.html — ABC 分類詳情
+- **路徑**：`templates/abc_analysis_detail.html`（196 行）
+- **路由**：`/api/abc_analysis_detail`（彈窗/新視窗）
+- **Layout**：獨立
+- **用途**：A/B/C 類別深潛 + 補貨係數調整 + 匯出 Excel
+- **區塊**：Navbar → 工具列（補貨係數 input + 匯出 + 關閉）→ DataTable（11 欄含條件欄）
+- **元件**：DataTables + Input Group
+- **配色**：Navbar `#4F46E5→#6366F1`
+- **設計問題**：
+  - `window.close()` 被現代瀏覽器擋
+  - 補貨係數 input 無驗證
+  - 累積營收佔比純數字無視覺化
+  - 無空狀態
+- **Claude Design 改造重點**：
+  1. 關閉按鈕改 `history.back()`
+  2. 補貨係數改 Slider (0.5-2.0, step 0.1) + 即時預覽
+  3. 累積營收改迷你進度條
+  4. 加空狀態
+  5. 匯出按鈕改 sticky header
+
+### 1.8 trends.html — 趨勢資料看板
+- **路徑**：`templates/trends.html`（136 行）
+- **路由**：`/trends`
+- **Layout**：base.html (extends)
+- **用途**：Google News / PTT / Dcard / YouTube 關鍵字+新聞標題彙整
+- **區塊**：頁標 → 篩選列（來源/分類/天數/刷新）→ 雙欄（熱門關鍵字 + 趨勢記錄表）
+- **元件**：Bootstrap Card/Form Select/Badge/Table
+- **設計問題**：
+  - 篩選項無視覺反饋
+  - 趨勢表 50 筆固定 limit 無分頁
+  - 標題無連結
+  - 無 skeleton loading
+- **Claude Design 改造重點**：
+  1. 篩選列改 Sticky Bar，篩選項加 Badge 計數
+  2. 熱門關鍵字改水平滾動（mobile 友善）
+  3. 趨勢記錄改 Infinite Scroll
+  4. 標題加連結 `target="_blank"`
+  5. 加 Skeleton Screen
+
+---
+
+## 2. EDM 活動與廠商缺貨（新舊版本並存）
+
+### 2.1 edm_dashboard.html — EDM 活動看板（舊版）
+- **路徑**：`templates/edm_dashboard.html`（431 行）
+- **路由**：`/edm/dashboard`
+- **Layout**：獨立 + Navbar
+- **用途**：EDM 限時搶購監控，分時段商品異動
+- **區塊**：Navbar → Page Header（含動態頁籤導覽）→ 排程統計警告 → 時段 Pills → Tab Content 商品表 → 無 Modal
+- **元件**：Bootstrap Tab/Pills/Tooltip + 自訂 CSS
+- **配色**：⚠️ 風格 A，Navbar `#4F46E5→#6366F1`
+- **設計問題**：
+  - 內嵌 style 200+ 行
+  - 表格寬度固定未響應
+  - JS 散落 inline，未模組化
+- **Claude Design 改造重點**：
+  1. 抽出 style 至外部 CSS
+  2. 複製品號改 Toast 提示
+  3. 表格 sticky header + 響應式列寬
+  4. 動態頁籤改 data-* 驅動
+  5. JS 模組化
+
+### 2.2 edm_dashboard_v2.html — EDM 活動看板（新版）⭐
+- **路徑**：`templates/edm_dashboard_v2.html`（1130 行）
+- **路由**：`/edm/dashboard_v2`
+- **Layout**：**ewoooc_base.html**（風格 B 範例頁）
+- **用途**：採用 EwoooC 設計系統的 EDM 看板，按月查歷史價
+- **區塊**：Campaign Hero（漸層）→ KPI Panel → 時段 Tab → Campaign Table（含篩選）→ 歷史 Modal（Chart.js）
+- **元件**：Bootstrap + Chart.js + EwoooC CSS 變數系統
+- **配色**：✅ 風格 B：Hero 用 EDM 紅 `#dc2626→#ea580c→#f97316`、Festival 紫 `#7c3aed`、Ink `#372b27`
+- **設計問題**：
+  - CSS 600+ 行依賴 var() 但無 fallback
+  - Chart.js 初始化在 Modal show 後可能 race condition
+  - 篩選按鈕用 `is-hidden` class 管理複雜
+- **Claude Design 改造重點**：
+  1. Chart.js 抽為獨立 module，支援銷毀/重建
+  2. 篩選改 data-filter 驅動取代 is-hidden
+  3. CSS 變數加 fallback color
+  4. Modal maxHeight 動態調整
+  5. 圖表加重試機制
+
+### 2.3 vendor_stockout_index_v2.html — 廠商缺貨首頁（風格 B 樣板）⭐
+- **路徑**：`templates/vendor_stockout_index_v2.html`（497 行）
+- **路由**：`/vendor-stockout`
+- **Layout**：**ewoooc_base.html**
+- **用途**：缺貨系統首頁，KPI + 工作流程入口
+- **區塊**：Hero Panel（標題+操作按鈕）→ Pulse Box（最新批次）→ KPI Grid（4 卡）→ Flow Cards（5 入口）→ Summary Grid（3 摘要）
+- **元件**：純 EwoooC CSS
+- **配色**：✅ 風格 B：Eyebrow `accent-strong`、Pulse Box `--momo-ink` 深底白字、KPI Danger `--momo-danger`
+- **設計問題**：
+  - Flow Cards hover 陰影不明顯
+  - Summary Grid 三列在 720~980px 擠壓
+- **Claude Design 改造重點**：
+  1. Flow Cards 加陰影漸變 hover
+  2. 補 768~980px 中斷點 2 列
+  3. 數字加計數動畫（Intersection Observer）
+  4. Summary Grid 數字+文字垂直對齊優化
+
+### 2.4 vendor_stockout_import_v2.html — 缺貨批次匯入
+- **路徑**：`templates/vendor_stockout_import_v2.html`（574 行）
+- **路由**：`/vendor-stockout/import`
+- **Layout**：**ewoooc_base.html**
+- **用途**：Excel 拖曳上傳 + 進度提示
+- **區塊**：Header → Import Note → Dropzone → Sidebar（必要欄位+範本下載）→ File Panel → Progress Panel（脈衝動畫）→ Result/Error Panel
+- **配色**：✅ Dropzone 邊框 `--momo-accent`、Progress Bar `--momo-accent`、Side Panel `--momo-bg-paper`
+- **設計問題**：
+  - `stockout-pulse` 只改 opacity 視覺弱
+  - 上傳中無法取消
+  - Error Panel 無嚴重程度區分
+- **Claude Design 改造重點**：
+  1. 脈衝改 scale + 顏色漸變
+  2. 加 AbortController 中止按鈕
+  3. Result Panel 各卡片加邊框顏色
+  4. 加檔案大小驗證提示
+
+### 2.5 templates/index.html — 限時搶購首頁（舊）
+- **路徑**：`templates/index.html`（431 行）
+- **路由**：`/`（舊路由，與 dashboard 重疊）
+- **Layout**：獨立 + Navbar
+- **用途**：EDM 限時搶購活動首頁
+- **區塊**：Navbar → Page Title → 排程警告 → Pills 標籤 → Tab Pane 商品表
+- **配色**：⚠️ 風格 A
+- **設計問題**：與 edm_dashboard.html 高度重疊；複雜 Jinja 邏輯難維護
+- **Claude Design 改造重點**：考慮直接刪除，導向 edm_dashboard_v2
+
+### 2.6 web/templates/vendor_stockout/index.html — 缺貨系統首頁（簡化）
+- **路徑**：`web/templates/vendor_stockout/index.html`（319 行）
+- **路由**：`/vendor-stockout`
+- **Layout**：獨立 + Navbar
+- **用途**：3 張功能卡片導覽（缺貨清單/廠商管理/發送歷史）
+- **配色**：Card border-top `#2ecc71`/`#f39c12`，按鈕 hover scale
+- **設計問題**：
+  - 與 `vendor_stockout_index_v2.html` 競爭，缺 Excel 匯入卡
+  - 紅綠色與深藍 Navbar 衝突
+- **Claude Design 改造重點**：
+  1. 加 Excel 匯入卡片
+  2. 統一卡片配色為 `--momo-accent`
+  3. 加卡片 transition
+  4. 加快速開始流程視覺化
+  5. **建議與 v2 版本擇一保留**
+
+### 2.7 web/templates/vendor_stockout/list.html — 缺貨清單管理（巨型）
+- **路徑**：`web/templates/vendor_stockout/list.html`（1793 行）
+- **路由**：`/vendor-stockout/list`
+- **Layout**：獨立 + Navbar
+- **用途**：缺貨 CRUD + 批次郵件 + 狀態切換 + Excel 匯入（內嵌 Tab）
+- **區塊**：
+  1. Page Header
+  2. Workflow Guide（紫色容器，3 步流程）
+  3. Main Tabs（缺貨清單 / Excel 匯入）
+  4. 缺貨清單 Tab：4 KPI → 待發送/已發送 子 Tab → 篩選（批次/廠商/排序）→ 批次操作 → 12 欄表 → 分頁
+  5. Excel 匯入 Tab
+  6. Modals: 編輯 / 郵件模板（含預覽）/ 重送確認
+- **元件**：Bootstrap + 自訂 CSS（382 行）
+- **配色**：Tabs 綠色漸層 `#27ae60→#2ecc71`、Workflow Guide 紫 `#667eea→#764ba2`
+- **設計問題**：
+  - **超大 inline JS（1600+ 行）**，難維護
+  - 表格 12 欄平板溢出
+  - 批次操作分散兩處易混淆
+  - 郵件模板預覽用 `innerHTML` 有 XSS 風險
+  - 全局 state（`selectedIds` Set + `currentStatus` string）未模組化
+- **Claude Design 改造重點**：
+  1. **JS 模組化**：分 API/state/render layer，class 或 module pattern
+  2. **表格響應化**：mobile < 768px 改卡片視圖
+  3. **批次操作合併**：context-aware UI 取代分散按鈕
+  4. **XSS 防護**：DOMPurify 或 textContent
+  5. **流程圖**：CSS Grid 自適應或 mobile 改垂直時間軸
+
+### 2.8 web/templates/vendor_stockout/history.html — 發送歷史（佔位）
+- **路徑**：`web/templates/vendor_stockout/history.html`（128 行）
+- **狀態**：⚠️ **完全未實作**，僅有 Phase 6 提示 alert
+- **Claude Design 改造重點**：
+  1. 實作發送歷史表（郵件/狀態/時間/廠商）
+  2. 加統計卡（總發送/成功率/失敗）
+  3. 篩選（狀態/廠商/日期）
+  4. 失敗重試 UI
+
+### 2.9 web/templates/vendor_stockout/import.html — 獨立匯入頁
+- **路徑**：`web/templates/vendor_stockout/import.html`（397 行）
+- **與 list.html 內 Tab 功能重複**
+- **配色**：Dropzone `#3498db`（藍）— 與 vendor_management 紫色 `#9b59b6` 不一致
+- **Claude Design 改造重點**：
+  1. 統一 Dropzone 為 `--momo-accent` 焦糖橘
+  2. 考慮刪除此獨立頁（與 list.html Tab 重複）
+  3. 加上傳百分比
+  4. 加返回清單快速連結
+
+### 2.10 web/templates/vendor_stockout/send_email.html — 郵件發送記錄
+- **路徑**：`web/templates/vendor_stockout/send_email.html`（431 行）
+- **路由**：`/vendor-stockout/send-email`
+- **Layout**：獨立 + Navbar
+- **用途**：郵件發送記錄查看與統計
+- **區塊**：Page Header → 4 KPI（總/成功/失敗/成功率，30s 自動更新）→ 篩選（狀態/廠商/日期）→ 8 欄表 → 分頁
+- **配色**：Stats `#3498db/#28a745/#dc3545/#17a2b8`
+- **設計問題**：
+  - 數字更新無 transition 突兀
+  - subject 列無 truncate
+  - 錯誤訊息塞表格內混亂
+  - 無重試按鈕
+- **Claude Design 改造重點**：
+  1. 數字加 fade + 滾動動畫
+  2. subject 加 ellipsis + tooltip
+  3. 錯誤改 tooltip 或詳情 Modal
+  4. 加重試失敗批次操作
+  5. 30s 輪詢改事件驅動或 SSE
+
+### 2.11 web/templates/vendor_stockout/vendor_management.html — 廠商管理
+- **路徑**：`web/templates/vendor_stockout/vendor_management.html`（956 行）
+- **路由**：`/vendor-stockout/vendor-management`
+- **Layout**：獨立 + Navbar
+- **用途**：廠商 CRUD + 郵件管理 + Excel 匯入
+- **區塊**：Header → Tabs（廠商清單 / Excel 匯入）→ 廠商 Tab（3 KPI + 搜尋 + 5 欄表 + 分頁）→ Modals（新增/編輯廠商、管理郵件）
+- **配色**：Tab 紫漸層 `#9b59b6→#8e44ad`、Upload 邊框 `#9b59b6`
+- **設計問題**：
+  - Stats Cards 單調無色彩層次
+  - Dropzone 配色與 import.html 不一致（紫 vs 藍）
+  - 郵件管理只在 Modal 內無 inline 列表
+- **Claude Design 改造重點**：
+  1. Stats Cards 加邊框色（primary/purple/success）
+  2. 統一 Dropzone 為 `--momo-accent`
+  3. 郵件管理改 inline 表或側邊欄
+  4. 搜尋改即時篩選
+
+---
+
+## 3. AI 功能頁（風格 A + D 混雜）
+
+### 3.1 ai_recommend.html — AI 文案生成（最複雜 AI 頁）
+- **路徑**：`templates/ai_recommend.html`（1000+ 行）
+- **路由**：`/ai_recommend`
+- **Layout**：base.html (extends)
+- **用途**：多引擎（Ollama 本地 + Gemini 雲端）AI 文案生成 + Web 搜尋 + 市場洞察
+- **區塊**：
+  1. Page Header（含 AI 引擎狀態徽章）
+  2. **左欄**：文案生成表單（商品名/風格/引擎/模型/進階 accordion）
+  3. Gemini 使用量面板（費用/請求/Token）
+  4. 關鍵字 + 節日可收合區
+  5. AI 智慧搜尋區（Web 搜尋 + 快速標籤）
+  6. 商品洞察分析區
+  7. **右欄**：4 頁籤面板（趨勢洞察/熱銷商品/排行榜/趨勢新聞）
+  8. 全螢幕載入動畫 overlay
+  9. 使用說明 Modal
+- **元件**：Bootstrap Card/Accordion/Tabs/Modal + 自訂 spinner
+- **互動**：
+  - `/api/ai/generate_copy` 文案生成
+  - `/api/ai/web_search` Web 搜尋
+  - `/api/ai/bestsellers` 熱銷
+  - COSME 排行榜、mybest 推薦
+  - `/api/ai/gemini_usage` 用量查詢
+  - 即時 Ollama ↔ Gemini 切換
+- **配色**：⚠️ Bootstrap primary `#0d6efd`
+- **設計問題**：
+  - 文案生成 Web Search 30~60s 無進度
+  - 模型切換無狀態保留
+  - 結果格式化用 `【大標題】` 自訂無視覺化
+  - 無錯誤恢復重試
+- **Claude Design 改造重點（AI UX 重點）**：
+  1. **流式輸出（Streaming）**：即時展示 AI 思考過程
+  2. **拆解分析頁籤**：除文案外顯示「為何選這些」
+  3. **A/B 對比 + 一鍵重生**：歷史小卡側邊欄
+  4. **AI Sidebar**：浮動面板「為何有效/何時用/改進空間」
+  5. **模型性能對比**：Ollama 生成時並列 Gemini 估算（不調用）
+
+### 3.2 ai_history.html — AI 歷史記錄
+- **路徑**：`templates/ai_history.html`（723 行）
+- **路由**：`/ai_history`
+- **Layout**：base.html (extends)
+- **用途**：AI 文案歷史檢索/編輯/評分/批量操作
+- **區塊**：Page Header → 4 KPI（總生成/收藏/已用/平均時間）→ 篩選列（搜尋/類型/收藏/日期）→ 批次操作列 → 歷史卡片列表（複選+類型徽章+預覽+操作）→ 分頁 → 編輯 Modal（評分星星/收藏/已用/備註）→ Toast
+- **元件**：Bootstrap Card/Form/Modal/Toast/自訂 Rating Stars
+- **設計問題**：
+  - 無 skeleton loading
+  - 文案預覽限高 120px 用漸層遮罩，不利查看
+  - 評分星星 hover 預選離開復原 UX 不明確
+  - 編輯後需刷新才同步統計
+- **Claude Design 改造重點**：
+  1. 加時間軸視圖（月/週分組熱度）
+  2. 智慧分類（高轉化/實驗性/模板）自動標籤
+  3. 對比檢視（兩筆 diff）
+  4. 「基於此重新生成」直接跳轉預填
+  5. 「已使用」改「轉化事件」整合銷售反饋
+
+### 3.3 ai_intelligence.html — AI 競情中樞 (ICAIM)
+- **路徑**：`templates/ai_intelligence.html`（465 行）
+- **路由**：`/ai_intelligence`
+- **Layout**：base.html (extends)
+- **用途**：即時競品價格監控 + AI 決策 + 挑品清單
+- **區塊**：Page Header（4 操作：立即分析/產生挑品/補抓 PChome/重整）→ 上次更新 badge → 4 KPI → 雙欄（左 70% PChome 比價熱力表 / 右 30% AI 決策日誌）→ Trigger Toast
+- **元件**：Bootstrap + sticky header table + Progress Bar
+- **配色**：熱力圖 `#fee2e2/#fef9c3/#f0fdf4`、策略 Badge 多色
+- **互動**：60s 自動重整、`/api/ai/icaim/dashboard`、`/api/ai/icaim/trigger`、產生挑品、補抓、商品搜尋
+- **設計問題**：
+  - 表格 7 欄寬度固定橫向溢出
+  - 推理足跡資訊密集小字難讀
+  - 無 Diff 對比
+- **Claude Design 改造重點**：
+  1. WebSocket / SSE 即時推送，加彩色脈衝動畫
+  2. AI 決策日誌展開詳情，展示 Hermes→NemoTron 完整鏈路流程圖
+  3. 高風險卡片加「限時調價建議」快速面板
+  4. 加「競品群聚分析」相似商品價格帶
+  5. 每筆決策加「反饋」按鈕用於模型微調
+
+### 3.4 ai_automation_smoke.html — AI 自動化監控（風格 D）⚡
+- **路徑**：`templates/ai_automation_smoke.html`（314 行）
+- **路由**：`/ai_automation_smoke`
+- **Layout**：**獨立**（GitHub Dark 風格）
+- **用途**：監控 EventRouter/AutoHeal/NemoTron/OpenClaw/ElephantAlpha 五代理健康
+- **區塊**：Hero（深藍漸層、玻璃 pill、整體狀態 badge、4 操作）→ 4 摘要卡（OK/Warning/Critical/生成時間）→ 趨勢卡（200 筆點陣圖）→ 每日摘要表 → Smoke 檢查卡片網格（每代理一卡，含 Detail Box）
+- **元件**：純 CSS Grid + Flexbox（**無 Bootstrap**）
+- **配色**：✅ 風格 D：bg `#0d1117`、panel `#161b22`、border `#30363d`、text `#e6edf3`、狀態 `#3fb950/#d29922/#f85149/#58a6ff/#bc8cff`
+- **互動**：3s/30s 動態輪詢、清歷史、推播、JSONL 匯出
+- **設計問題**：
+  - Detail Box JSON 格式技術導向不直覺
+  - 趨勢點陣圖 200 筆過密
+  - Critical 無即時通知（推播僅手動）
+  - 無「上次正常時間」/「持續時間」
+- **Claude Design 改造重點**：
+  1. 故障時間線卡（開始→發現→修復）
+  2. AI 生成「今日風險評分」+ 建議行動
+  3. Detail Box 加「推薦檢查項目」（OpenClaw 驅動）
+  4. 趨勢圖加 7 天平均虛線
+  5. Critical 加「自動修復建議」一鍵觸發
+
+### 3.5 notification_templates.html — 通知模板管理
+- **路徑**：`templates/notification_templates.html`（339 行）
+- **路由**：`/notification_templates`
+- **Layout**：base.html (extends)
+- **用途**：Telegram + LINE 雙渠道訊息模板 CRUD + 即時預覽
+- **區塊**：Page Header（分類篩選+初始化按鈕）→ 7 欄表 → 編輯 Modal（含 monospace textarea + 預覽區）
+- **配色**：預覽區深色 `#1a1a1a` 模擬訊息氣泡
+- **設計問題**：
+  - 樣本變數硬編碼無動態
+  - 無傳遞測試
+  - 無版本控制/回滾
+- **Claude Design 改造重點**：
+  1. 變數選擇器（可拖放插入）
+  2. 場景下拉預覽（新訂單/退貨/優惠等）
+  3. 多語言頁籤（繁/簡/英）
+  4. 「傳送測試」實際發送驗證
+  5. LINE 訊息過長自動拆分提示
+
+### 3.6 ai_intelligence + send_email + brand_assets + code_review
+
+#### send_email.html（76 行）
+- ⚠️ **完全未實作**，Phase 6 占位
+- **Claude Design 改造重點**：
+  1. 三步驟精靈（分群→模板→預覽→確認）
+  2. TinyMCE/Quill 富文本編輯
+  3. 樣本預覽各廠商分群效果
+  4. 自動生成 CSV/PDF 附件
+  5. 寄送追蹤（待寄/已寄/未開/已開）
+
+#### brand_assets.html（197 行）
+- **路由**：`/brand_assets`
+- **Layout**：獨立（無 Bootstrap）
+- **用途**：WOOO TECH Logo 各版本下載
+- **配色**：`#f8f9fa` bg、`#4F46E5` link、checkbox 透明度背景
+- **Claude Design 改造重點**：
+  1. Lightbox 預覽 + 多背景測試
+  2. 側欄品牌規範（最小尺寸/安全距離/色彩）
+  3. 批量下載 ZIP
+  4. 色彩提取器（hover 顯示 HEX）
+
+#### code_review.html（474 行）⚡（風格 D）
+- **路徑**：`templates/code_review.html`
+- **路由**：`/code-review`
+- **Layout**：獨立（GitHub Dark）
+- **用途**：AI Code Review 五步代理流程儀表板（Hermes→OpenClaw→Elephant Alpha→NemoTron→AiderHeal）
+- **區塊**：Topbar（pulsing live 點）→ 雙欄（左 340px Sidebar：Pipeline 進度+嚴重度分佈+部署資訊+歷史；右 Main：Status Bar + 三 Tab：問題清單/OpenClaw 評估/Elephant Alpha 決策）
+- **配色**：✅ 風格 D，嚴重度色 `#f85149/#d29922/#e3b341/#3fb950`、代理色多彩
+- **互動**：3s/30s 動態輪詢、歷史切換、Tab 切換
+- **設計問題**：詳細資訊小字難讀、表格行無展開詳情、無修復複製
+- **Claude Design 改造重點**：
+  1. Pipeline 改橫向流程圖卡（步驟+箭頭+耗時）
+  2. 問題詳情抽屜（語法高亮+完整說明）
+  3. OpenClaw「架構決策樹」可視化
+  4. Elephant Alpha 「推理步驟」可展開列表
+  5. 一鍵觸發 AiderHeal（流式日誌）
+
+---
+
+## 4. 系統管理頁（風格 A，全部待遷移）
+
+### 4.1 user_management.html — 用戶管理
+- **路徑**：`templates/user_management.html`（906 行）
+- **路由**：`/admin/users`（推測）
+- **Layout**：base.html (extends)
+- **用途**：用戶 CRUD + 角色 + 權限 + 密碼重設 + 停用
+- **區塊**：Page Header（新增按鈕）→ 控制列（停用帳號開關）→ DataTable 8 欄（帳號/名稱/郵件/角色/狀態/建立/更新/操作）→ Modals：新增編輯 / 重設密碼（含生成器）/ 刪除確認（紅頭）/ 權限編輯（lg + scrollable）
+- **設計問題**：
+  - 權限編輯 Modal 內容過多需滾動，**權限項無分組**
+  - 密碼強度提示位置在 form-text 不顯眼
+  - 用戶列表**無搜尋/篩選**
+- **Claude Design 改造重點**：
+  1. **權限矩陣 2D 表格**（用戶 × 模組），分組標籤
+  2. 密碼強度進度條（紅黃綠）+ 即時反饋
+  3. 列表加搜尋 + 角色/狀態篩選
+  4. 編輯時隱藏密碼欄，獨立「重設密碼」按鈕
+  5. 停用 Modal 強化（顯示活躍工作階段）
+
+### 4.2 settings.html — 爬蟲管理中心（巨型）
+- **路徑**：`templates/settings.html`（1650 行）
+- **路由**：`/admin/settings`
+- **Layout**：獨立 + Navbar
+- **用途**：爬蟲狀態 + 執行頻率 + 分類 URL CRUD
+- **設定群組結構**：
+  ```
+  ├─ 爬蟲狀態管理
+  │  ├─ 統計面板（3 卡：active/paused/total）
+  │  └─ 爬蟲卡片列表（動態渲染）
+  │     ├─ 標題 + 狀態徽章
+  │     ├─ 資訊網格（最後執行/下次執行/頻率）
+  │     └─ 控制（Toggle Switch + 修改頻率）
+  │
+  └─ 爬蟲網址設定
+     ├─ 新增分類按鈕
+     ├─ 搜尋框（動態顯示）
+     ├─ 分類卡片網格
+     │  ├─ 名稱 + tag icon
+     │  ├─ URL 超連結
+     │  └─ 操作（測試/編輯/刪除）
+     └─ Modal: Category Modal（新增/編輯）
+  ```
+- **配色**：紫漸層 `#667eea→#764ba2`、active 綠 `#10b981→#059669`、paused 黃 `#f59e0b→#d97706`
+- **設計問題**：
+  - 爬蟲卡 padding-top: 70px **與標題重疊**
+  - 搜尋框只在有分類時顯示邏輯隱晦
+  - 資訊網格無標籤只有 icon + 數值
+  - 測試 URL 按鈕無 loading 反饋
+- **Claude Design 改造重點**：
+  1. 二層 Tab 或可折疊卡片分離爬蟲/分類
+  2. 爬蟲卡修正 padding，加標籤（最後執行/下次執行/頻率）
+  3. 搜尋框常顯，加分類/狀態篩選
+  4. 測試 URL 狀態機（測試中→✓ 成功/✗ 失敗）
+  5. 右下 FAB 新增分類
+
+### 4.3 crawler_management.html — 爬蟲管理（簡化版，與 settings 重複）
+- **路徑**：`templates/crawler_management.html`（426 行）
+- **與 settings.html 功能重疊**
+- **Claude Design 改造重點**：
+  1. 合併功能至 settings.html，保留為「快速開關」頁
+  2. 卡片補資訊（最後執行/下次/狀態）
+  3. 運行中加 animated pulse
+
+### 4.4 system_settings.html — 系統備份與匯入
+- **路徑**：`templates/system_settings.html`（341 行）
+- **路由**：`/admin/system-settings`
+- **Layout**：獨立 + Navbar
+- **用途**：系統備份 + 月份總表/即時業績/通用 Excel 匯入
+- **區塊**：Page Header → 4 區塊（系統維護完整備份 / 月份總表 42 欄匯入 / 即時業績全月匯入 / 通用 Excel 自動建表）
+- **配色**：紫漸層
+- **設計問題**：
+  - 三匯入無優先級區分
+  - 進度條只有月份總表有
+  - 「自動建表」邏輯不清（會否覆蓋？）
+  - 無匯入結果頁
+- **Claude Design 改造重點**：
+  1. Tab 或折疊卡片分「維護/業績/資料」
+  2. 統一 drag-drop + 進度條
+  3. 完成後顯示摘要卡（總/成功/失敗/重複）
+  4. 每匯入旁加「下載範本」
+  5. 覆蓋操作加備份時間提示
+
+### 4.5 logs.html — 系統日誌（最複雜篩選）
+- **路徑**：`templates/logs.html`（872 行）
+- **路由**：`/admin/logs`
+- **Layout**：base.html (extends)
+- **用途**：實時日誌檢視 + 篩選 + 搜尋 + 下載
+- **區塊**：Page Header（連接狀態指示）→ 4 KPI（total/error/warning/info）→ 控制面板（主操作 + 等級按鈕篩選 + 搜尋 + 字體大小 + 自動滾動）→ 黑色終端日誌容器
+- **日誌等級篩選**：按鈕式（ALL/ERROR/WARNING/INFO）active 時彩色漸層
+- **日誌行視覺化**：
+  - ERROR 行紅底 `rgba(239,68,68,0.15)` + 紅左邊框 `#ef4444`
+  - WARNING 行黃底 + 黃左邊框 `#f59e0b`
+  - INFO 行藍左邊框 `#3b82f6`
+  - 時間戳綠 `#10b981` 粗體
+  - 關鍵字高亮黃 `rgba(251,191,36,0.4)`
+- **配色**：紫漸層按鈕、終端 bg `#1e1e1e`、文字 `#d4d4d4`
+- **設計問題**：
+  - 統計卡與篩選按鈕重複等級資訊
+  - 搜尋框與篩選按鈕混排小屏折行
+  - 自動滾動開關位置隱晦
+  - 容器固定 65vh 大屏浪費空間
+  - 清除日誌無確認
+- **Claude Design 改造重點**：
+  1. 篩選器改單行「等級標籤」複選 + 視覺優先級
+  2. 搜尋加正則切換 + 上/下匹配 + 計數
+  3. 日誌統計改右下浮窗
+  4. 容器改 CSS Grid 自適應高度
+  5. 匯出加 CSV/JSON/全選
+
+### 4.6 login_history.html — 登入歷史
+- **路徑**：`templates/login_history.html`（90 行）
+- **路由**：`/admin/login-history`
+- **Layout**：base.html (extends)
+- **用途**：登入記錄與異常追蹤
+- **區塊**：Page Header → Card（最近記錄 + 50/100/200 筆下拉）→ 6 欄表（時間/帳號/狀態/IP/原因/UA）
+- **設計問題**：
+  - User Agent 過長無 truncate（max-width 失效）
+  - 無日期範圍篩選
+  - 無 IP 地理位置
+  - UA 對普通用戶無意義
+- **Claude Design 改造重點**：
+  1. IP 旁加地理定位（城市/國家）
+  2. 加日期範圍
+  3. UA 解析為「Windows PC/iPhone」等
+  4. failed 行紅色弱化背景
+  5. 加匯出 CSV
+
+### 4.7 change_password.html — 變更密碼
+- **路徑**：`templates/change_password.html`（219 行）
+- **路由**：`/user/change-password`
+- **Layout**：base.html (extends)
+- **用途**：當前用戶密碼修改
+- **區塊**：Centered Card → 表單（舊密/新密+強度+相符提示/確認）→ Alert Info 密碼要求 → 按鈕（變更/取消）
+- **互動**：強度檢測（長度+大小寫+數字+特殊）、相符檢測、AJAX 提交
+- **Claude Design 改造重點**：
+  1. 強度視覺化升級（進度條+彩色徽章+反饋文字）
+  2. 規則實時逐項檢查（✓/✗）
+  3. 舊密 AJAX 即時驗證
+  4. 規則改可折疊減高度
+
+### 4.8 pchome_crawler.html — PChome 爬蟲工具
+- **路徑**：`templates/pchome_crawler.html`（444 行）
+- **路由**：`/crawler/pchome`
+- **Layout**：base.html (extends)
+- **用途**：館別/關鍵字/自訂 URL 三模式爬取
+- **區塊**：Page Header → 3 並排卡（館別/搜尋/自訂 URL）→ 爬取進度 → 結果區（DataTable + 匯出 Excel/JSON）
+- **配色**：Card Header bg-primary/success/info
+- **設計問題**：
+  - 三方式無優先級
+  - 進度文字無百分比
+  - 圖片欄 80px 太小
+  - 結果無分頁
+  - 匯出無 loading
+- **Claude Design 改造重點**：
+  1. 三層 Step 流程（選方式→設參數→看結果）
+  2. 進度顯示「45/100 筆」
+  3. 圖片 modal 放大、商品名 popover
+  4. 加全選+批量操作
+  5. DataTable 分頁+排序
+
+### 4.9 import.html — 通用匯入頁
+- **路徑**：`templates/import.html`（353 行）
+- **路由**：`/import`（推測）
+- **Layout**：獨立 + Navbar
+- **用途**：Excel 拖曳上傳缺貨資料
+- **區塊**：Page Title → Upload Area（drag-drop）→ File Info → Progress Bar → Result Area（4 欄統計 + 批次編號 + 連結按鈕）→ Error Area
+- **配色**：邊框藍 `#3498db`、drag-over 綠 `#d5f4e6`、進度紫漸層
+- **設計問題**：
+  - hover scale 1.02 影響體驗
+  - 結果統計無標籤色彩弱
+  - 無檔案校驗提示
+  - 再次匯入未清空舊結果
+- **Claude Design 改造重點**：
+  1. 移除 scale，改邊框色變化
+  2. 統計卡加彩色徽章 + 圖標
+  3. 上傳前校驗格式/大小
+  4. 失敗項可展開列表
+  5. 多步驟進度（解析/驗證/寫入）
+
+### 4.10 auto_import_index.html — 自動匯入監控
+- **路徑**：`templates/auto_import_index.html`（737 行）
+- **路由**：`/auto-import`
+- **Layout**：獨立 + Navbar
+- **用途**：當日業績報表匯入監控
+- **區塊**：Page Header → Card（日期+檔案+上傳）→ 匯入清單表（狀態 5 種：pending/downloading/importing/completed/failed）
+- **設計問題**：
+  - 兩處可上傳易混淆
+  - 狀態徽章 rgba 太淡
+  - 進度條無百分比
+  - 無結果摘要
+  - 刪除無確認
+- **Claude Design 改造重點**：
+  1. 上方只保留「選檔+上傳」，下方歷史清單
+  2. 狀態徽章加圖標+動畫（spinning）
+  3. 點擊行展開詳細進度
+  4. 完成後顯示「成功 1000/失敗 5」摘要卡
+  5. 加日期範圍篩選
+
+---
+
+## 5. 入口頁與錯誤頁（風格 C）
+
+### 5.1 login.html
+- **路徑**：`templates/login.html`（242 行）
+- **路由**：`/login`
+- **Layout**：獨立
+- **用途**：品牌登入頁，密碼單一認證
+- **結構**：固定 Navbar → 全頁紫漸層背景 → 居中卡片（深藍 Header + 白 Body 含 password input + eye toggle + 登入按鈕 + 安全徽章 + 版本號）
+- **配色**：背景紫漸層 `#667eea→#764ba2`、Header 深藍 `#1e3c72→#2a5298`
+- **設計問題**：
+  - 配色與主系統不一致
+  - 響應式不足（max-width 420px）
+  - 密碼 toggle 無 ARIA
+- **Claude Design 改造重點**：
+  1. 改用主色焦糖橘
+  2. 密碼 toggle 加 `aria-label/aria-pressed`
+  3. 768px 以下 padding/font 微調
+  4. 字體加 Noto Sans TC
+  5. 加密碼強度或失敗次數提醒
+
+### 5.2 maintenance.html
+- **路徑**：`templates/maintenance.html`（240 行）
+- **用途**：系統維護狀態頁，台北時間實時更新
+- **結構**：深色基層 `#0f172a` + Mesh 漸層 + 2 浮動 Orb + 玻璃態中央卡（Logo + 標題 + 描述 + 狀態徽章脈衝 + 實時時間）
+- **配色**：`--primary: #4F46E5`、`--secondary: #7C3AED`、`--accent: #06B6D4`
+- **獨特元素**：3 層 radial-gradient mesh、`backdrop-filter: blur(12px)`、Orb 浮動、slideUp 進場
+- **設計問題**：
+  - `--secondary` 與 `--primary` 都紫色無差異
+  - 480px 標題仍 1.8rem 偏大
+  - 時間更新無 `aria-live`
+- **Claude Design 改造重點**：
+  1. CSS 變數差異化（secondary 改 `#8B5CF6`）
+  2. 時間加 `aria-live="polite"`
+  3. 480px 改 1.5rem 行高 1.6
+  4. 加倒數或進度提示
+  5. 移動端禁用 Orb
+
+### 5.3 403.html
+- **路徑**：`templates/403.html`（87 行）
+- **用途**：權限不足錯誤頁
+- **結構**：紫漸層 bg + 居中白卡（紅禁止 icon + 403 + 標題 + 說明 + 返回按鈕）
+- **配色**：背景紫漸層、icon `#dc3545`
+- **Claude Design 改造重點**：
+  1. 卡片加 `role="alert"`，icon 加 `aria-hidden`
+  2. 加「返回前頁」+「聯繫管理員」
+  3. 改用焦糖橘色系
+  4. 加淡入動畫
+  5. 文案改「請聯繫 admin@xxx」
+
+### 5.4 test_base.html — 測試頁
+- **路徑**：`templates/test_base.html`（85 行）
+- **用途**：base.html 整合測試頁
+- **結構**：頁標 → 2 列（測試項目 list-group / 系統資訊表）→ 操作按鈕
+- **問題**：未測 extra_css/extra_js block 或 loading_overlay
+- **Claude Design 改造重點**：
+  1. 加 extra_css/extra_js 測試
+  2. 用 Chart.js demo
+  3. Toast 測試 success/error/warning 三種
+  4. 文案統一中或英
+
+---
+
+## 6. 共用 Components（核心架構）
+
+### 6.1 components/_navbar.html — 全站固定導航（舊版）
+- **路徑**：`templates/components/_navbar.html`（194 行）
+- **API（Jinja vars）**：
+  - `active_page` (str) — 當前頁面 ID 用於 active 高亮
+  - `datetime_now` (str) — 右側時間顯示
+  - `metabase_url` (str, optional) — Metabase 外部連結
+  - `grist_url` (str, optional) — Grist 外部連結
+- **結構**：
+  ```
+  Navbar.fixed-top.bg-custom-dark
+  ├─ Brand: WOOO（sm 以上顯示）
+  ├─ Toggler（mobile）
+  ├─ navbar-nav.me-auto
+  │   ├─ 商品看板 / 活動看板
+  │   ├─ 分析報表 dropdown（4+ Metabase/Grist 條件）
+  │   ├─ 廠商缺貨
+  │   ├─ AI 助手 dropdown（2 項）
+  │   ├─ 雲端匯入
+  │   └─ 系統管理 dropdown（6 項）
+  └─ navbar-text: 時間（fa-clock）
+  ```
+- **配色**：`.bg-custom-dark` = `--primary-gradient` 深藍 `#1e3c72→#2a5298`
+- **設計問題**：
+  - 無 ARIA（dropdown/aria-expanded、time aria-live）
+  - 外部連結無 `rel="noopener noreferrer"`（安全隱患）
+  - 無搜尋功能（相比 ewoooc shell）
+  - 無用戶菜單/登出/通知 badge
+- **Claude Design 改造重點**：
+  1. ARIA 強化（dropdown/time/外部連結）
+  2. 加右側用戶菜單（頭像+名+登出）
+  3. 加搜尋框（⌘K 快捷鍵）
+  4. 479px 以下改 Offcanvas
+  5. 時間更新 setInterval 改 RAF
+
+### 6.2 components/_loading.html — WOOO 載入動畫
+- **路徑**：`templates/components/_loading.html`（337 行）
+- **用途**：全屏品牌載入覆蓋層
+- **結構**（Logo 容器 160×160px）：
+  - 脈衝光暈（放射漸層圓）
+  - 外層光環（順時針旋轉，紫色）
+  - 內層光環（逆時針，粉+金）
+  - 環繞粒子（4 顆軌道旋轉）
+  - 閃爍星星（6 顆金黃延遲錯開）
+  - LOGO 文字（紫漸層 + drop-shadow）
+  - 載入文字（fa-spinner）
+  - 進度條（漸層流動）
+  - 提示文字
+- **JS API**：
+  ```js
+  showLoading(text, hint)
+  hideLoading()
+  updateLoadingText(text)
+  updateLoadingHint(hint)
+  ```
+- **動畫集**（7 個 keyframes）：cloud-float / ring-spin / ring-spin-reverse / pulse-expand / orbit-rotate / sparkle-twinkle / progress-flow
+- **設計問題**：
+  - 內層光環粉+金與主紫色不配
+  - 無 `role="status"`/`aria-live`
+  - **8 層同時動畫，移動端會掉幀**
+  - z-index 9999 可能蓋過 Modal
+- **Claude Design 改造重點**：
+  1. 內層光環改 `#8B5CF6/#A78BFA` 保持紫系（或改焦糖橘配色）
+  2. 加 `role="status" aria-live="polite" aria-label="正在載入"`
+  3. 移動端自動禁 Sparkles
+  4. CSS 變數控制動畫速度
+  5. 支援 `showLoading(text, hint, speed)` 快速模式
+
+### 6.3 components/_ewoooc_shell.html — EwoooC Sidebar（新版）
+- **路徑**：`templates/components/_ewoooc_shell.html`（101 行）
+- **API（Jinja vars）**：
+  - `active_page` (str)
+  - `scheduler_stats` (dict) — `{"momo_task": [{...}, ...]}`
+  - `next_run` (str, optional)
+  - `session` (dict) — username/role/logged_in
+- **結構**：
+  ```
+  Aside.momo-sidebar
+  ├─ Logo: 9 格網點（3×3）+ "EwoooC" + "價格監控 V2"
+  ├─ Nav 群組
+  │   ├─ 監控: 商品看板(01) / 活動看板(02) / 分析報表(03)
+  │   ├─ 營運: 廠商缺貨(04) / AI 助手(05) / 雲端匯入(06)
+  │   └─ 系統: 系統管理(07)
+  └─ Status Card: 標籤 + 實時點 + 上次執行/掃描/新增
+  ```
+- **內部 Jinja 邏輯**（極複雜）：14 行變數初始化，多層 default + is mapping 防禦
+- **設計問題**：
+  - **Jinja 邏輯過重**（應移後端視圖）
+  - 鍵名脆弱（`momo_task`/`last_run` 變更即破裂）
+  - 無 ARIA（navigation/status）
+  - 9 格 logo 用 9 個空 span 無法 SR
+- **Claude Design 改造重點**：
+  1. **後端預先計算 status**，Jinja 只展示
+  2. 加 `role="navigation"` / `role="status"` / `aria-live`
+  3. Logo 改 SVG 或 icon font
+  4. 編號改 `aria-label="編號 01"`
+  5. 狀態改 SSE 即時推送
+
+---
+
+## 7. 額外發現的頁面（之前列表外）
+
+完整 ls 後發現以下檔案需要單獨盤點（建議排在後續迭代）：
+
+| 檔名 | 大小 | 推測用途 |
+|------|------|---------|
+| `cicd_dashboard.html` | TBD | CI/CD 部署儀表板 |
+| `dashboard_v2.html` | 61KB | 商品看板 V2 升級版（待比對與舊版差異）|
+| `history.html` | TBD | 通用歷史頁 |
+| `list.html` | TBD | 通用列表頁（與 web/templates/vendor_stockout/list.html 區分）|
+| `vendor_stockout_list_v2.html` | TBD | 廠商缺貨詳情 V2 |
+
+---
+
+## 8. 跨頁面設計債務總結
+
+### 8.1 風格混雜（最高優先）
+
+```
+風格 A（深藍+藍紫）→ 待全部遷移至風格 B（焦糖橘）
+  影響頁面: dashboard, sales_analysis, monthly_summary, daily_sales,
+           growth, edm_dashboard(舊), vendor_stockout(舊),
+           ai_recommend, ai_history, ai_intelligence, notification_templates,
+           user_management, settings, system_settings, logs, login_history,
+           change_password, pchome_crawler, import, auto_import,
+           price_comparison, abc_analysis_detail, trends
+  共 23+ 個頁面
+
+風格 C（紫色獨立）→ 改用焦糖橘色相
+  影響頁面: login, 403, maintenance, _loading
+  共 4 個頁面
+
+風格 D（GitHub Dark）→ 保留深色但與焦糖橘對齊
+  影響頁面: ai_automation_smoke, code_review
+  共 2 個頁面
+
+風格 B（焦糖橘）→ 維持
+  影響頁面: ewoooc_base 體系下的所有頁面
+  共 6+ 個頁面
+```
+
+### 8.2 共性技術債
+
+| 問題 | 受影響頁面 | 建議處理 |
+|------|----------|---------|
+| 內嵌 `<style>` 過長 | dashboard(636行)、sales_analysis(569行)、daily_sales(878行)、settings、edm_dashboard_v2(600+行)、list.html(382行) | 抽出至 `*-page.css` 或統一進 design system |
+| 內嵌 `<script>` 過長 | list.html (1600+行)、其他多處 | 模組化（class/module pattern）|
+| 多種圖表庫並存 | sales_analysis、monthly_summary | 統一 Chart.js |
+| 大圓角（16~20px） | dashboard、sales_analysis、daily_sales | 改 `--momo-radius-md/lg` (4~6px) |
+| Modal Header 藍紫漸層 | dashboard、sales_analysis、user_management | 改 `--momo-ink` 暖墨 |
+| 篩選無 URL state | sales_analysis、monthly_summary、trends | 加 query param 持久化 |
+| 無空狀態插圖 | dashboard、growth、trends、abc_detail、user_management | 統一空狀態元件 |
+| 無 Skeleton Loading | 全部 AJAX 頁 | 加 skeleton 統一元件 |
+| 無虛擬滾動 | sales_analysis、monthly_summary、abc_detail、logs | 大資料集啟用 |
+| ARIA 標籤缺失 | 全部 | Accessibility 統一補強 |
+| 9 格 Logo 用空 span | _ewoooc_shell | 改 SVG |
+| Loading 動畫 8 層同跑 | _loading | 移動端降級 |
+| Jinja 邏輯過重 | _ewoooc_shell | 移至後端視圖 |
+| 重複頁面（v1/v2 並存） | edm_dashboard / vendor_stockout / web 路徑 | 擇一保留 |
+| XSS 風險（innerHTML） | list.html、send_email | DOMPurify 或 textContent |
+
+### 8.3 元件化優先順序
+
+建議建立統一元件庫（CSS 或 Jinja macro）：
+
+1. **EmptyState** — 空狀態插圖+標題+CTA（複用率最高）
+2. **SkeletonScreen** — 載入骨架（替代 spinner）
+3. **KPICard** — 統一 KPI 卡（含趨勢箭頭、對比值、圖示）
+4. **DataTable** — 包裝 DataTables，提供統一 hover/sort/empty
+5. **Dropzone** — 統一拖曳上傳區
+6. **Toast** — 統一通知（取代各頁面自訂）
+7. **Modal** — 統一 Header/Footer 樣式
+8. **FilterBar** — 篩選列（含 URL state、Badge 計數、清除全部）
+9. **PaginationBar** — 統一分頁
+10. **Stepper / Wizard** — 多步驟流程（用於 import / price_comparison）
+
+---
+
+*本附錄由 5 個並行 Explore agent 深掃 41 個 template + 3 個 component 後彙整，2026-05-01。*
diff --git a/docs/memory/code_modularization_inventory_20260430.md b/docs/memory/code_modularization_inventory_20260430.md
index 0e1ab67..fc63810 100644
--- a/docs/memory/code_modularization_inventory_20260430.md
+++ b/docs/memory/code_modularization_inventory_20260430.md
@@ -1,39 +1,51 @@
-# 程式碼模組化盤點（2026-04-30）
+# 程式碼模組化盤點（2026-04-30，2026-05-06 校正）
 
 > 用途：接續 ADR-017 Phase 3f 時，快速知道哪些 Python 檔案仍是大檔技術債，以及新增功能應該放在哪個模組層。
 
 ## 盤點結論
 
-- Python 總量：約 66,997 行。
-- 最大壓力區：`routes/` 約 21,095 行、`services/` 約 26,023 行。
-- `app.py` 目前約 1,209 行，功能定位應固定為 bootstrap / Blueprint registration / startup guard，不再承接新 route。
-- 目前工作樹仍有 18 個 Python 檔案超過 800 行；這些不是禁止修 bug，而是禁止繼續塞新功能。
+- Python 總量：約 97,677 行（排除 `venv/`、`backups/`、`__pycache__/`、`.claude/worktrees/`）。
+- 最大壓力區：`services/` 約 39,444 行、`routes/` 約 28,362 行。
+- `app.py` 目前約 1,227 行，功能定位應固定為 bootstrap / Blueprint registration / startup guard，不再承接新 route。
+- 目前工作樹仍有 23 個 Python 檔案達到或超過 800 行；這些不是禁止修 bug，而是禁止繼續塞新功能。
 - 2026-05-05 追記：Phase 38→56 觀測台戰役讓 `routes/admin_observability_routes.py` 與 `run_scheduler.py` 進入大檔治理清單；後續觀測台功能應先抽 query/action service，不再把新 SQL 與 L2 mutation 直接塞回 route。
+- 2026-05-06 追記：跨平台市場情報模組啟動前，必須先把新增爬蟲、排程、DB schema、UI route 全部隔離在 `market_*` / `services/market_intel/` / `routes/market_intel_routes.py`，不可塞回既有大檔。
 
-## 超過 800 行檔案清單
+## 達到或超過 800 行檔案清單
 
 | 行數 | 檔案 | 分類 | 拆分方向 |
 |---:|---|---|---|
-| 5240 | `routes/openclaw_bot_routes.py` | P0 巨型 Blueprint | route / bot command service / report service / scheduler hook |
-| 2707 | `scheduler.py` | P0 排程總管 | task registry / crawler jobs / report jobs / notification jobs |
-| 2653 | `routes/sales_routes.py` | P0 巨型 Blueprint | page routes / API routes / chart query service / calendar service |
-| 2550 | `routes/admin_observability_routes.py` | P0 觀測台巨型 Blueprint | `services/observability_query_service.py` / `services/observability_action_service.py` / route glue |
-| 1743 | `routes/ai_routes.py` | P1 AI Blueprint | route glue / AI orchestration service / prompt builders |
+| 9129 | `routes/openclaw_bot_routes.py` | P0 巨型 Blueprint | route / bot command service / report service / scheduler hook；禁止再新增市場情報入口 |
+| 5499 | `services/ppt_generator.py` | P0 報表生成巨型 service | deck orchestration / slide builders / chart builders / report type registry |
+| 2822 | `scheduler.py` | P0 排程總管 | task registry / crawler jobs / report jobs / notification jobs；市場情報只能透過獨立 job module 掛入 |
+| 2730 | `services/openclaw_strategist_service.py` | P0 OpenClaw service | prompt builders / report composer / strategy rules |
+| 2653 | `routes/sales_routes.py` | P0 巨型 Blueprint | page routes / API routes / chart query service / calendar service；分析頁新增功能先抽 `services/sales/` |
+| 2639 | `routes/admin_observability_routes.py` | P0 觀測台巨型 Blueprint | `services/observability_query_service.py` / `services/observability_action_service.py` / route glue |
+| 1754 | `routes/ai_routes.py` | P1 AI Blueprint | route glue / AI orchestration service / prompt builders |
+| 1721 | `services/nemoton_dispatcher_service.py` | P1 NemoTron service | NIM client / tool-call parser / action dispatcher |
 | 1485 | `routes/vendor_routes.py` | P1 Vendor Blueprint | route glue / stockout mutation/email；V2 page query、stockout list/batches API query、vendor list/detail query 已抽到 `services/vendor_stockout_query_service.py` |
-| 1345 | `services/ppt_generator.py` | P1 報表生成 service | deck orchestration / slide builders / chart builders |
-| 1339 | `services/nemoton_dispatcher_service.py` | P1 NemoTron service | NIM client / tool-call parser / action dispatcher |
-| 1300 | `services/openclaw_strategist_service.py` | P1 OpenClaw service | prompt builders / report composer / strategy rules |
-| 1209 | `app.py` | P1 bootstrap | 保持只做 app setup；繼續往 app_factory / extension setup 抽 |
-| 1079 | `routes/cicd_routes.py` | P2 CI/CD Blueprint | route glue / CI query service / deployment action service |
-| 1024 | `routes/dashboard_routes.py` | P2 Dashboard Blueprint | competitor decision overview / dashboard query service；目前工作樹已有未提交大段新增邏輯 |
-| 986 | `services/telegram_bot_service.py` | P2 Telegram service | command handlers / message formatters / bot client |
+| 1459 | `routes/dashboard_routes.py` | P1 Dashboard Blueprint | competitor decision overview / dashboard query service；首頁資料整併需抽 service |
+| 1390 | `services/telegram_bot_service.py` | P1 Telegram service | command handlers / message formatters / bot client |
+| 1227 | `app.py` | P1 bootstrap | 保持只做 app setup；繼續往 app_factory / extension setup 抽 |
+| 1140 | `services/elephant_alpha_autonomous_engine.py` | P1 ElephantAlpha engine | HITL / executor / planning policy |
+| 1090 | `routes/cicd_routes.py` | P2 CI/CD Blueprint | route glue / CI query service / deployment action service |
 | 966 | `services/trend_crawler.py` | P2 crawler service | source adapters / parser / persistence |
-| 946 | `services/elephant_alpha_autonomous_engine.py` | P2 ElephantAlpha engine | HITL / executor / planning policy |
+| 924 | `services/learning_pipeline.py` | P2 RAG learning pipeline | distiller / promotion gate / persistence / telemetry |
 | 868 | `run_scheduler.py` | P2 scheduler entrypoint | observability jobs / token report jobs / task registration 分離 |
-| 829 | `routes/export_routes.py` | P2 Export flow | export command/router glue / file path / download orchestration |
-| 818 | `services/import_service.py` | P2 import service | validators / import writers / report builders |
-| 805 | `routes/bot_api_routes.py` | P2 Bot API Blueprint | route glue / bot action service |
+| 867 | `services/token_report_service.py` | P2 token report service | query / aggregation / chart payload / notification formatting |
+| 852 | `services/import_service.py` | P2 import service | validators / import writers / report builders |
+| 832 | `routes/export_routes.py` | P2 Export flow | export command/router glue / file path / download orchestration |
+| 813 | `services/ollama_service.py` | P2 Ollama client | host health / request client / fallback policy / response parsing |
 | 805 | `services/competitor_price_feeder.py` | P2 competitor price feeder | crawler scheduling / price normalization / cache strategy |
+| 805 | `routes/bot_api_routes.py` | P2 Bot API Blueprint | route glue / bot action service |
+
+## 市場情報開發前置禁區
+
+- 不得把跨平台活動頁、商品池、比對審核 API 新增到 `routes/sales_routes.py`、`routes/dashboard_routes.py` 或 `app.py`。
+- 不得把 MOMO / PChome / Coupang / Shopee adapter 寫進 `scheduler.py` 或既有 crawler 巨檔；必須放在 `services/market_intel/adapters/`。
+- 不得把市場情報商品塞回 `promo_products` 作為唯一真相；新資料以 `market_*` schema 為主，舊表只可做相容讀取或明確雙寫過渡。
+- 不得在第一階段啟用正式排程或大量入庫；必須先 feature flag 關閉、dry-run、run log、rate limit 與 rollback path。
+- 新市場情報 UI 必須先使用共用 V2 token / 分析頁元件規範，避免複製 `templates/sales_analysis.html` 的巨型 template 模式。
 
 ## 工作項目
 
@@ -42,8 +54,9 @@
 3. P0：拆 `scheduler.py`，建立 `jobs/` 或 `services/scheduler/` task registry。
 4. P0：拆 `routes/admin_observability_routes.py`，先搬純查詢函式到 `services/observability_query_service.py`，再搬 AutoHeal / Code Review / AiderHeal / throttle mutation 到 `services/observability_action_service.py`。
 5. P1：把 `routes/ai_routes.py` 與 `routes/vendor_routes.py` 的資料處理移出 route；Vendor V2 page query、stockout API list/batches、vendor list/detail 已完成，下一步可抽 email grouping 或 vendor mutation service。
-6. P1：把 PPT / NemoTron / OpenClaw 大 service 拆成 client、parser、composer、policy。
+6. P1：把 PPT / NemoTron / OpenClaw / Telegram 大 service 拆成 client、parser、composer、policy。
 7. P2：對 800-1100 行檔案採「碰到就順手抽」策略，但不可讓淨行數繼續增加。
+8. 市場情報：先建獨立 `services/market_intel/`、`routes/market_intel_routes.py`、`database/market_intel_models.py`，再評估是否接進 scheduler registry。
 
 ## 守門
 
diff --git a/docs/memory/schema_inventory_baseline.md b/docs/memory/schema_inventory_baseline.md
index b94442e..5c23e86 100644
--- a/docs/memory/schema_inventory_baseline.md
+++ b/docs/memory/schema_inventory_baseline.md
@@ -46,6 +46,13 @@
 - `vendor_emails`
 - `email_send_log`
 - `realtime_sales_monthly`
+- `market_platforms`
+- `market_campaigns`
+- `market_campaign_snapshots`
+- `market_campaign_products`
+- `market_product_price_history`
+- `market_product_matches`
+- `market_crawler_runs`
 
 ### 2. SQL migration / raw SQL 仍在用，但未見完整 ORM source of truth
 
diff --git a/routes/README.md b/routes/README.md
index ed7fd46..d30c6d9 100644
--- a/routes/README.md
+++ b/routes/README.md
@@ -19,6 +19,7 @@
 | `edm_routes.py` | EDM 與節慶儀表板 | `/edm`, `/festival` |
 | `monthly_routes.py` | 月結分析 | `/monthly_summary_analysis`, `/api/monthly_summary_data` |
 | `daily_sales_routes.py` | 當日業績 | `/daily_sales`, `/daily_sales/export*` |
+| `market_intel_routes.py` | 市場情報 Phase 2 schema-ready 安全骨架 | `/market_intel`, `/market_intel/*`, `/api/market_intel/status`, `/api/market_intel/schema`, `/api/market_intel/dry_run_plan` |
 | `api_routes.py` | 通用任務與查詢 API | `/api/run_task`, `/api/history/*` |
 | `export_routes.py` | 匯出功能 | `/api/export/*` |
 | `import_routes.py` | 匯入功能 | `/api/import_excel`, `/api/import/monthly_summary` |
diff --git a/routes/market_intel_routes.py b/routes/market_intel_routes.py
new file mode 100644
index 0000000..7081cbb
--- /dev/null
+++ b/routes/market_intel_routes.py
@@ -0,0 +1,69 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""市場情報頁面與 API 路由。"""
+
+from datetime import datetime, timedelta, timezone
+
+from flask import Blueprint, jsonify, render_template, request
+
+from auth import login_required
+from config import SYSTEM_VERSION
+from services.market_intel import MarketIntelService
+
+
+TAIPEI_TZ = timezone(timedelta(hours=8))
+market_intel_bp = Blueprint("market_intel", __name__)
+
+
+def _service():
+    return MarketIntelService()
+
+
+@market_intel_bp.route("/market_intel")
+@market_intel_bp.route("/market_intel/campaigns")
+@login_required
+def campaigns():
+    status = _service().get_runtime_status()
+    return render_template(
+        "market_intel/disabled.html",
+        active_page="market_intel",
+        datetime_now=datetime.now(TAIPEI_TZ).strftime("%Y-%m-%d %H:%M:%S"),
+        system_version=SYSTEM_VERSION,
+        status=status,
+        current_section="campaigns",
+    )
+
+
+@market_intel_bp.route("/market_intel/products")
+@market_intel_bp.route("/market_intel/matches")
+@market_intel_bp.route("/market_intel/opportunities")
+@login_required
+def disabled_section():
+    status = _service().get_runtime_status()
+    return render_template(
+        "market_intel/disabled.html",
+        active_page="market_intel",
+        datetime_now=datetime.now(TAIPEI_TZ).strftime("%Y-%m-%d %H:%M:%S"),
+        system_version=SYSTEM_VERSION,
+        status=status,
+        current_section="disabled",
+    )
+
+
+@market_intel_bp.route("/api/market_intel/status")
+@login_required
+def market_intel_status():
+    return jsonify(_service().get_runtime_status().to_dict())
+
+
+@market_intel_bp.route("/api/market_intel/schema")
+@login_required
+def market_intel_schema():
+    return jsonify({"tables": _service().get_schema_tables()})
+
+
+@market_intel_bp.route("/api/market_intel/dry_run_plan")
+@login_required
+def market_intel_dry_run_plan():
+    platform_code = request.args.get("platform", "all")
+    return jsonify(_service().build_dry_run_plan(platform_code=platform_code))
diff --git a/routes/sales_routes.py b/routes/sales_routes.py
index aace760..f82da9b 100644
--- a/routes/sales_routes.py
+++ b/routes/sales_routes.py
@@ -218,6 +218,7 @@ def sales_analysis():
                                    start_date='',
                                    end_date='',
                                    total_records=0,
+                                   active_page='sales',
                                    db_data_range='')
 
         # V-New: 查詢資料庫的資料期間範圍
@@ -349,6 +350,7 @@ def sales_analysis():
                                    keyword='', min_price='', max_price='', min_margin='', max_margin='',
                                    data_range_months=0, start_date='', end_date='',
                                    db_data_range=db_data_range,
+                                   active_page='sales',
                                    marketing_data=None)
 
         # 解析 data_range_months（有篩選時才處理）
@@ -405,6 +407,7 @@ def sales_analysis():
                                        end_date=end_date,
                                        total_records=0,
                                        db_data_range=db_data_range,
+                                       active_page='sales',
                                        marketing_data=None)
 
             # 自動識別日期欄位（V-Fix: 優先匹配「日期」，因為「訂單日期」可能是固定文字）
@@ -528,6 +531,7 @@ def sales_analysis():
                                        end_date=end_date,
                                        total_records=0,
                                        db_data_range=db_data_range,
+                                       active_page='sales',
                                        marketing_data=None)
 
             # 3. 自動識別關鍵欄位 (模糊比對)
@@ -569,6 +573,7 @@ def sales_analysis():
                                        end_date=end_date,
                                        total_records=0,
                                        db_data_range=db_data_range,
+                                       active_page='sales',
                                        marketing_data=None)
 
             # 4. 資料處理 (Heavy Lifting - 只在快取建立時執行一次)
@@ -1220,6 +1225,7 @@ def sales_analysis():
                                start_date=start_date,  # V-New: 傳遞自訂開始日期
                                end_date=end_date,  # V-New: 傳遞自訂結束日期
                                total_records=len(df),
+                               active_page='sales',
                                db_data_range=db_data_range)  # V-New: 傳遞資料庫資料期間
 
     except Exception as e:
@@ -1260,6 +1266,7 @@ def sales_analysis():
                                start_date=request.args.get('start_date', ''),
                                end_date=request.args.get('end_date', ''),
                                total_records=0,
+                               active_page='sales',
                                db_data_range='')
 
 
@@ -1287,6 +1294,7 @@ def growth_analysis():
                                    kpi=cache['kpi'],
                                    datetime_now=now_taipei.strftime('%Y-%m-%d %H:%M:%S'),
                                    cache_hit=True,
+                                   active_page='growth',
                                    cache_age=cache_age)
 
         # 快取失效，重新計算
@@ -1373,6 +1381,7 @@ def growth_analysis():
                                chart_data=chart_data,
                                kpi=kpi,
                                datetime_now=now_taipei.strftime('%Y-%m-%d %H:%M:%S'),
+                               active_page='growth',
                                cache_hit=False)
 
     except Exception as e:
diff --git a/scheduler.py b/scheduler.py
index 7ded58f..e6802e3 100644
--- a/scheduler.py
+++ b/scheduler.py
@@ -1801,37 +1801,72 @@ def verify_import_data_sync(expected_rows: int = None, date_range: dict = None)
     from config import DATABASE_PATH
     from sqlalchemy import create_engine, text
 
+    date_min = date_range.get('min') if date_range else None
+    date_max = date_range.get('max') if date_range else None
+
     result = {
         'success': True,
         'daily_sales_snapshot': {'ok': False, 'rows': 0, 'date_min': None, 'date_max': None},
         'realtime_sales_monthly': {'ok': False, 'rows': 0, 'date_min': None, 'date_max': None},
+        'scope': {'date_min': date_min, 'date_max': date_max},
         'errors': []
     }
 
+    if expected_rows is not None and expected_rows <= 0:
+        result['success'] = False
+        result['errors'].append("本次匯入筆數為 0，請檢查檔案是否實際匯入成功")
+        return result
+
+    if not date_min or not date_max:
+        result['success'] = False
+        result['errors'].append("缺少本次匯入日期範圍，無法驗證資料同步")
+        return result
+
     try:
         engine = create_engine(DATABASE_PATH)
 
         with engine.connect() as conn:
-            # 檢查 daily_sales_snapshot
-            snapshot_query = text("""
-                SELECT COUNT(*) as cnt,
-                       MIN(日期::date)::text as date_min,
-                       MAX(日期::date)::text as date_max
-                FROM daily_sales_snapshot
-            """)
-            snapshot_result = conn.execute(snapshot_query).fetchone()
+            is_sqlite = engine.dialect.name == 'sqlite'
+            if is_sqlite:
+                snapshot_query = text("""
+                    SELECT COUNT(*) as cnt,
+                           MIN(date(snapshot_date)) as date_min,
+                           MAX(date(snapshot_date)) as date_max
+                    FROM daily_sales_snapshot
+                    WHERE date(snapshot_date) BETWEEN date(:date_min) AND date(:date_max)
+                """)
+                monthly_query = text("""
+                    SELECT COUNT(*) as cnt,
+                           MIN(date("日期")) as date_min,
+                           MAX(date("日期")) as date_max
+                    FROM realtime_sales_monthly
+                    WHERE date("日期") BETWEEN date(:date_min) AND date(:date_max)
+                """)
+            else:
+                snapshot_query = text("""
+                    SELECT COUNT(*) as cnt,
+                           MIN(snapshot_date::date)::text as date_min,
+                           MAX(snapshot_date::date)::text as date_max
+                    FROM daily_sales_snapshot
+                    WHERE snapshot_date::date BETWEEN :date_min AND :date_max
+                """)
+                monthly_query = text("""
+                    SELECT COUNT(*) as cnt,
+                           MIN("日期"::date)::text as date_min,
+                           MAX("日期"::date)::text as date_max
+                    FROM realtime_sales_monthly
+                    WHERE "日期"::date BETWEEN :date_min AND :date_max
+                """)
+
+            # V-Fix: 只驗證本次匯入日期範圍。realtime_sales_monthly 保存歷史資料，
+            # 不可再拿全表總筆數和 daily_sales_snapshot 做相等比較。
+            params = {'date_min': date_min, 'date_max': date_max}
+            snapshot_result = conn.execute(snapshot_query, params).fetchone()
             result['daily_sales_snapshot']['rows'] = snapshot_result[0]
             result['daily_sales_snapshot']['date_min'] = snapshot_result[1]
             result['daily_sales_snapshot']['date_max'] = snapshot_result[2]
 
-            # 檢查 realtime_sales_monthly
-            monthly_query = text("""
-                SELECT COUNT(*) as cnt,
-                       MIN(日期::date)::text as date_min,
-                       MAX(日期::date)::text as date_max
-                FROM realtime_sales_monthly
-            """)
-            monthly_result = conn.execute(monthly_query).fetchone()
+            monthly_result = conn.execute(monthly_query, params).fetchone()
             result['realtime_sales_monthly']['rows'] = monthly_result[0]
             result['realtime_sales_monthly']['date_min'] = monthly_result[1]
             result['realtime_sales_monthly']['date_max'] = monthly_result[2]
@@ -1847,11 +1882,16 @@ def verify_import_data_sync(expected_rows: int = None, date_range: dict = None)
                 )
                 result['success'] = False
 
-            # 檢查 2: 日期範圍是否一致
-            if result['daily_sales_snapshot']['date_max'] != result['realtime_sales_monthly']['date_max']:
+            # 檢查 2: 本次匯入日期範圍是否一致
+            if (
+                result['daily_sales_snapshot']['date_min'] != result['realtime_sales_monthly']['date_min']
+                or result['daily_sales_snapshot']['date_max'] != result['realtime_sales_monthly']['date_max']
+            ):
                 result['errors'].append(
-                    f"最新日期不一致: daily_sales_snapshot={result['daily_sales_snapshot']['date_max']}, "
-                    f"realtime_sales_monthly={result['realtime_sales_monthly']['date_max']}"
+                    f"日期範圍不一致: daily_sales_snapshot="
+                    f"{result['daily_sales_snapshot']['date_min']}~{result['daily_sales_snapshot']['date_max']}, "
+                    f"realtime_sales_monthly="
+                    f"{result['realtime_sales_monthly']['date_min']}~{result['realtime_sales_monthly']['date_max']}"
                 )
                 result['success'] = False
 
@@ -1862,22 +1902,32 @@ def verify_import_data_sync(expected_rows: int = None, date_range: dict = None)
                         f"daily_sales_snapshot 筆數({snapshot_rows})少於預期({expected_rows})"
                     )
                     result['success'] = False
-
-            # 檢查 4: 如果有預期的日期範圍，驗證是否正確
-            if date_range:
-                expected_max = date_range.get('max')
-                if expected_max and result['daily_sales_snapshot']['date_max'] != expected_max:
+                if monthly_rows < expected_rows:
                     result['errors'].append(
-                        f"最新日期({result['daily_sales_snapshot']['date_max']})與預期({expected_max})不符"
+                        f"realtime_sales_monthly 筆數({monthly_rows})少於預期({expected_rows})"
                     )
                     result['success'] = False
 
+            # 檢查 4: 如果有預期的日期範圍，驗證是否正確
+            if result['daily_sales_snapshot']['date_min'] != date_min or result['daily_sales_snapshot']['date_max'] != date_max:
+                result['errors'].append(
+                    f"daily_sales_snapshot 日期範圍({result['daily_sales_snapshot']['date_min']}~"
+                    f"{result['daily_sales_snapshot']['date_max']})與預期({date_min}~{date_max})不符"
+                )
+                result['success'] = False
+            if result['realtime_sales_monthly']['date_min'] != date_min or result['realtime_sales_monthly']['date_max'] != date_max:
+                result['errors'].append(
+                    f"realtime_sales_monthly 日期範圍({result['realtime_sales_monthly']['date_min']}~"
+                    f"{result['realtime_sales_monthly']['date_max']})與預期({date_min}~{date_max})不符"
+                )
+                result['success'] = False
+
             # 設定各表驗證結果
             result['daily_sales_snapshot']['ok'] = snapshot_rows > 0
             result['realtime_sales_monthly']['ok'] = monthly_rows > 0 and monthly_rows == snapshot_rows
 
         logging.info(f"[Scheduler] [Verify] 資料驗證完成: success={result['success']}, "
-                     f"snapshot={snapshot_rows}筆, monthly={monthly_rows}筆")
+                     f"range={date_min}~{date_max}, snapshot={snapshot_rows}筆, monthly={monthly_rows}筆")
 
     except Exception as e:
         result['success'] = False
@@ -1945,6 +1995,11 @@ def run_auto_import_task():
                         except Exception:
                             date_range_str = f"{date_range.get('min', '?')}～{date_range.get('max', '?')}"
 
+                    freshness_line = ""
+                    data_lag_days = result.get('data_lag_days')
+                    if data_lag_days is not None and data_lag_days > 0:
+                        freshness_line = f"⚠️ 最新資料落後：{data_lag_days} 天\n"
+
                     # 組合通知訊息
                     message = (
                         f"📊 當日業績自動匯入通知 ({now_str})\n"
@@ -1953,6 +2008,7 @@ def run_auto_import_task():
                         f"📁 處理檔案數：{result.get('file_count', 0)} 個\n"
                         f"📝 共匯入記錄：{result.get('total_rows', 0)} 筆\n"
                         f"📅 數據日期期間：{date_range_str}\n"
+                        f"{freshness_line}"
                         f"{'='*30}\n"
                         f"詳細資料請至系統查看"
                     )
diff --git a/services/market_intel/__init__.py b/services/market_intel/__init__.py
new file mode 100644
index 0000000..23f866f
--- /dev/null
+++ b/services/market_intel/__init__.py
@@ -0,0 +1,5 @@
+"""跨平台市場情報服務模組。"""
+
+from services.market_intel.service import MarketIntelService, MarketIntelRuntimeStatus
+
+__all__ = ["MarketIntelService", "MarketIntelRuntimeStatus"]
diff --git a/services/market_intel/service.py b/services/market_intel/service.py
new file mode 100644
index 0000000..af2e07f
--- /dev/null
+++ b/services/market_intel/service.py
@@ -0,0 +1,82 @@
+"""市場情報 Phase 1 骨架服務。
+
+本階段只回報 feature flag 與 rollout 狀態，不啟動爬蟲、不寫資料庫。
+"""
+
+from dataclasses import asdict, dataclass
+from datetime import datetime, timedelta, timezone
+from uuid import uuid4
+
+from config import (
+    MARKET_INTEL_CRAWLER_ENABLED,
+    MARKET_INTEL_ENABLED,
+    MARKET_INTEL_WRITE_ENABLED,
+)
+
+
+TAIPEI_TZ = timezone(timedelta(hours=8))
+MARKET_INTEL_TABLES = (
+    "market_platforms",
+    "market_campaigns",
+    "market_campaign_snapshots",
+    "market_campaign_products",
+    "market_product_price_history",
+    "market_product_matches",
+    "market_crawler_runs",
+)
+
+
+@dataclass(frozen=True)
+class MarketIntelRuntimeStatus:
+    """市場情報模組目前的啟用狀態。"""
+
+    phase: str
+    enabled: bool
+    crawler_enabled: bool
+    write_enabled: bool
+    dry_run_only: bool
+    scheduler_attached: bool
+    database_write_allowed: bool
+
+    def to_dict(self):
+        return asdict(self)
+
+
+class MarketIntelService:
+    """市場情報入口服務，先集中 feature gate 與安全狀態。"""
+
+    phase = "phase_2_schema_ready_disabled"
+
+    def get_runtime_status(self) -> MarketIntelRuntimeStatus:
+        return MarketIntelRuntimeStatus(
+            phase=self.phase,
+            enabled=MARKET_INTEL_ENABLED,
+            crawler_enabled=MARKET_INTEL_CRAWLER_ENABLED,
+            write_enabled=MARKET_INTEL_WRITE_ENABLED,
+            dry_run_only=not MARKET_INTEL_WRITE_ENABLED,
+            scheduler_attached=False,
+            database_write_allowed=(
+                MARKET_INTEL_ENABLED
+                and MARKET_INTEL_CRAWLER_ENABLED
+                and MARKET_INTEL_WRITE_ENABLED
+            ),
+        )
+
+    def get_schema_tables(self):
+        """回傳 ADR-035 定義的 market_* schema 名稱。"""
+        return list(MARKET_INTEL_TABLES)
+
+    def build_dry_run_plan(self, platform_code="all"):
+        """建立 dry-run 計畫，不執行爬蟲、不寫 DB。"""
+        status = self.get_runtime_status()
+        return {
+            "batch_id": f"market-dry-run-{uuid4().hex[:12]}",
+            "platform_code": platform_code,
+            "created_at": datetime.now(TAIPEI_TZ).replace(tzinfo=None).isoformat(),
+            "phase": self.phase,
+            "would_discover_campaigns": bool(status.enabled and status.crawler_enabled),
+            "would_write_database": bool(status.database_write_allowed),
+            "scheduler_attached": status.scheduler_attached,
+            "schema_tables": self.get_schema_tables(),
+            "status": status.to_dict(),
+        }
diff --git a/templates/components/_analysis_report_tabs.html b/templates/components/_analysis_report_tabs.html
new file mode 100644
index 0000000..f559e89
--- /dev/null
+++ b/templates/components/_analysis_report_tabs.html
@@ -0,0 +1,88 @@
+{# 分析報表第二層分頁：保留頁面內容與圖表邏輯，只提供一致的報表切換入口。 #}
+{% set _analysis_active = active_page|default('') %}
+<style>
+    .analysis-report-tabs {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 8px;
+        margin: 0 0 18px;
+        padding: 8px;
+        border: 1px solid var(--momo-border-light, rgba(42, 37, 32, 0.16));
+        border-radius: 8px;
+        background: rgba(250, 247, 240, 0.84);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
+    }
+    .analysis-report-tabs-spacer {
+        flex: 1 1 auto;
+        min-width: 8px;
+    }
+    .analysis-report-tab {
+        display: inline-flex;
+        align-items: center;
+        gap: 7px;
+        min-height: 34px;
+        padding: 0 12px;
+        border: 1px solid transparent;
+        border-radius: 7px;
+        color: var(--momo-text-secondary, #645c52);
+        text-decoration: none;
+        font-size: 0.86rem;
+        font-weight: 800;
+        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
+    }
+    .analysis-report-tab:hover {
+        border-color: var(--momo-border-light, rgba(42, 37, 32, 0.16));
+        background: var(--momo-bg-surface, #faf7f0);
+        color: var(--momo-text-primary, #2a2520);
+    }
+    .analysis-report-tab.is-active {
+        border-color: var(--momo-page-accent-dark, #65411f);
+        background: linear-gradient(135deg, var(--momo-page-accent, #8a5a2b), var(--momo-page-accent-dark, #65411f));
+        color: var(--momo-page-inverse, #fff8ee);
+    }
+    .analysis-report-tab.is-external {
+        border-color: var(--momo-border-light, rgba(42, 37, 32, 0.16));
+        background: rgba(255, 252, 246, 0.62);
+        font-family: var(--momo-font-family-mono, "SF Mono", Menlo, Consolas, monospace);
+        font-size: 0.78rem;
+    }
+    .analysis-report-tab i {
+        color: currentColor !important;
+    }
+</style>
+<nav class="analysis-report-tabs" aria-label="分析報表分頁">
+    <a class="analysis-report-tab {% if _analysis_active == 'sales' %}is-active{% endif %}"
+       {% if _analysis_active == 'sales' %}aria-current="page"{% endif %}
+       href="/sales_analysis">
+        <i class="fas fa-chart-bar"></i>業績分析
+    </a>
+    <a class="analysis-report-tab {% if _analysis_active == 'daily_sales' %}is-active{% endif %}"
+       {% if _analysis_active == 'daily_sales' %}aria-current="page"{% endif %}
+       href="/daily_sales">
+        <i class="fas fa-calendar-day"></i>當日業績
+    </a>
+    <a class="analysis-report-tab {% if _analysis_active == 'growth' %}is-active{% endif %}"
+       {% if _analysis_active == 'growth' %}aria-current="page"{% endif %}
+       href="/growth_analysis">
+        <i class="fas fa-chart-line"></i>成長分析
+    </a>
+    <a class="analysis-report-tab {% if _analysis_active == 'monthly' %}is-active{% endif %}"
+       {% if _analysis_active == 'monthly' %}aria-current="page"{% endif %}
+       href="/monthly_summary_analysis">
+        <i class="fas fa-table"></i>月份總表
+    </a>
+    {% if metabase_url or grist_url %}
+    <span class="analysis-report-tabs-spacer" aria-hidden="true"></span>
+    {% endif %}
+    {% if metabase_url %}
+    <a class="analysis-report-tab is-external" href="{{ metabase_url }}" target="_blank" rel="noopener">
+        <i class="fas fa-chart-pie"></i>Metabase <i class="fas fa-up-right-from-square"></i>
+    </a>
+    {% endif %}
+    {% if grist_url %}
+    <a class="analysis-report-tab is-external" href="{{ grist_url }}" target="_blank" rel="noopener">
+        <i class="fas fa-table"></i>Grist <i class="fas fa-up-right-from-square"></i>
+    </a>
+    {% endif %}
+</nav>
diff --git a/templates/components/_ewoooc_shell.html b/templates/components/_ewoooc_shell.html
index f62d016..ccd0ee3 100644
--- a/templates/components/_ewoooc_shell.html
+++ b/templates/components/_ewoooc_shell.html
@@ -8,6 +8,7 @@
 #}
 
 {% set _active_page = active_page|default('') %}
+{% set _analysis_pages = ['sales', 'daily_sales', 'monthly', 'growth'] %}
 {% set _obs_pages = [
     'obs_overview', 'obs_agent_orchestration', 'obs_business_intel',
     'obs_host_health', 'obs_ai_calls', 'obs_budget',
@@ -18,40 +19,64 @@
 <style>
     .momo-sidebar {
         background:
-            radial-gradient(circle at 24px 28px, rgba(201, 100, 66, 0.18), transparent 34px),
-            linear-gradient(180deg, #2d2018 0%, #241912 48%, #3a2418 100%) !important;
-        border-right: 1px solid rgba(231, 178, 135, 0.18);
-        box-shadow: inset -1px 0 0 rgba(255, 238, 214, 0.06), 18px 0 42px rgba(61, 38, 27, 0.18);
+            radial-gradient(circle at 28px 30px, rgba(201, 100, 66, 0.06), transparent 36px),
+            linear-gradient(180deg, #f1ecdf 0%, #e9e3d5 100%) !important;
+        border-right: 1px solid rgba(42, 37, 32, 0.14);
+        box-shadow: inset -1px 0 0 rgba(255, 248, 238, 0.72), 16px 0 32px rgba(61, 38, 27, 0.08);
     }
     .momo-sidebar-logo {
-        color: #fff7eb;
-        border-bottom: 1px solid rgba(231, 178, 135, 0.16);
+        color: var(--momo-text-primary, #2a2520);
+        border-bottom: 1px solid rgba(42, 37, 32, 0.12);
     }
     .momo-sidebar-logo small,
     .momo-sidebar-logo .momo-muted {
-        color: rgba(255, 248, 238, 0.62) !important;
+        color: var(--momo-text-secondary, #6f665b) !important;
+    }
+    .momo-brand-name {
+        color: var(--momo-text-primary, #2a2520) !important;
+        font-family: var(--momo-font-family-mono, "SF Mono", Menlo, Consolas, monospace) !important;
+        font-size: 18px;
+        font-weight: 950;
+        line-height: 1;
+        letter-spacing: 0 !important;
+    }
+    @supports (-webkit-background-clip: text) {
+        .momo-brand-name {
+            background-image: radial-gradient(circle, var(--momo-text-primary, #2a2520) 0 1.05px, transparent 1.15px);
+            background-size: 3px 3px;
+            background-position: 0 0;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            image-rendering: pixelated;
+        }
+    }
+    .momo-logo-mark {
+        background: var(--momo-page-accent-dark, var(--momo-ink, #2a2520));
+        color: var(--momo-bg-elevated, #fdfaf3);
+        box-shadow: none;
     }
     .momo-nav-group {
-        border-top-color: rgba(231, 178, 135, 0.15) !important;
+        border-top-color: rgba(42, 37, 32, 0.14) !important;
     }
     .momo-nav-group-title {
-        color: rgba(255, 218, 184, 0.64) !important;
+        color: var(--momo-text-tertiary, #9b9184) !important;
         font-weight: 850;
     }
     .momo-nav-link {
-        color: rgba(255, 248, 238, 0.78) !important;
+        color: var(--momo-text-primary, #2a2520) !important;
     }
     .momo-nav-link:hover {
-        background: rgba(201, 100, 66, 0.13) !important;
-        color: #ffd4bd !important;
+        background: var(--momo-page-accent-soft, rgba(201, 100, 66, 0.09)) !important;
+        color: var(--momo-page-accent-dark, var(--momo-accent-700, #8f4530)) !important;
     }
     .momo-nav-link.is-active {
-        background: linear-gradient(135deg, #c96442, #9d4a32) !important;
-        color: #fff8ee !important;
-        box-shadow: 0 10px 24px rgba(201, 100, 66, 0.22);
+        background: linear-gradient(135deg, var(--momo-page-accent, #d06d49), var(--momo-page-accent-dark, #c45f3f)) !important;
+        color: var(--momo-page-inverse, #fff8ee) !important;
+        box-shadow: 0 10px 22px rgba(201, 100, 66, 0.2);
     }
     .momo-nav-link .momo-nav-code {
-        color: rgba(255, 248, 238, 0.46) !important;
+        color: var(--momo-text-tertiary, #9b9184) !important;
     }
     .momo-nav-link.is-active .momo-nav-code {
         color: rgba(255, 248, 238, 0.76) !important;
@@ -72,22 +97,25 @@
     .momo-nav-tree-summary::after {
         content: "⌄";
         margin-left: auto;
-        color: var(--momo-muted, #8b8077);
+        color: var(--momo-text-tertiary, #9b9184);
         font-size: 0.8rem;
         transform: rotate(-90deg);
         transition: transform 160ms ease;
     }
+    .momo-nav-tree-summary.is-active::after {
+        color: rgba(255, 248, 238, 0.78);
+    }
     .momo-nav-tree[open] .momo-nav-tree-summary::after {
         transform: rotate(0deg);
     }
     .momo-nav-subtree {
         margin: 0.35rem 0 0.65rem 1.05rem;
         padding-left: 0.75rem;
-        border-left: 1px solid rgba(238, 169, 128, 0.34);
+        border-left: 1px solid color-mix(in srgb, var(--momo-page-accent, #c96442) 34%, transparent);
     }
     .momo-nav-subtitle {
         margin: 0.65rem 0 0.25rem;
-        color: rgba(255, 248, 238, 0.58);
+        color: var(--momo-text-tertiary, #9b9184);
         font-size: 0.68rem;
         letter-spacing: 0.12em;
         text-transform: uppercase;
@@ -100,7 +128,7 @@
         gap: 0.45rem;
         padding: 0.42rem 0.55rem;
         border-radius: 0.7rem;
-        color: rgba(255, 248, 238, 0.68);
+        color: var(--momo-text-secondary, #6f665b);
         text-decoration: none;
         font-size: 0.86rem;
         font-weight: 700;
@@ -108,16 +136,16 @@
     }
     .momo-nav-sublink:hover,
     .momo-nav-sublink.is-active {
-        background: rgba(201, 100, 66, 0.18);
-        color: #ffb18f;
+        background: var(--momo-page-accent-soft, rgba(201, 100, 66, 0.12));
+        color: var(--momo-page-accent-dark, var(--momo-accent-700, #8f4530));
         transform: translateX(2px);
     }
     .momo-nav-sublink .momo-nav-num {
-        color: rgba(255, 248, 238, 0.42);
+        color: var(--momo-text-tertiary, #9b9184);
         font-weight: 800;
     }
     .momo-nav-sublink.is-active .momo-nav-num {
-        color: rgba(255, 248, 238, 0.72);
+        color: var(--momo-page-accent-dark, rgba(143, 69, 48, 0.72));
     }
     .momo-nav-sublink .momo-nav-code {
         opacity: 0.68;
@@ -143,8 +171,8 @@
         align-items: center;
         justify-content: center;
         border: 1px solid rgba(255, 248, 238, 0.86);
-        background: linear-gradient(135deg, #d76a45, #9d4a32);
-        color: #fff8ee;
+        background: linear-gradient(135deg, var(--momo-page-accent, #d76a45), var(--momo-page-accent-dark, #9d4a32));
+        color: var(--momo-page-inverse, #fff8ee);
         box-shadow: 0 8px 18px rgba(132, 58, 34, 0.26);
         font-size: 0.62rem;
         line-height: 1;
@@ -176,8 +204,7 @@
             <span></span><span></span><span></span>
         </span>
         <span class="momo-brand-word">
-            <span class="momo-brand-name momo-display">EwoooC</span>
-            <span class="momo-brand-subtitle momo-label">價格監控 V2</span>
+            <span class="momo-brand-name">EwoooC</span>
         </span>
     </a>
 
@@ -194,11 +221,37 @@
                 <span class="momo-nav-label">活動看板</span>
                 <span class="momo-nav-code momo-mono">02</span>
             </a>
-            <a class="momo-nav-link {% if _active_page in ['sales', 'daily_sales', 'monthly', 'growth'] %}is-active{% endif %}" href="/sales_analysis">
-                <span class="momo-nav-icon"><i class="fas fa-chart-line"></i></span>
-                <span class="momo-nav-label">分析報表</span>
-                <span class="momo-nav-code momo-mono">03</span>
-            </a>
+            <details class="momo-nav-tree" {% if _active_page in _analysis_pages %}open{% endif %}>
+                <summary class="momo-nav-link momo-nav-tree-summary {% if _active_page in _analysis_pages %}is-active{% endif %}">
+                    <span class="momo-nav-icon"><i class="fas fa-chart-line"></i></span>
+                    <span class="momo-nav-label">分析報表</span>
+                    <span class="momo-nav-code momo-mono">03</span>
+                </summary>
+                <div class="momo-nav-subtree">
+                    <a class="momo-nav-sublink {% if _active_page == 'sales' %}is-active{% endif %}" href="/sales_analysis">
+                        <i class="fas fa-chart-bar"></i><span>業績分析</span><span class="momo-nav-code momo-mono">01</span>
+                    </a>
+                    <a class="momo-nav-sublink {% if _active_page == 'daily_sales' %}is-active{% endif %}" href="/daily_sales">
+                        <i class="fas fa-calendar-day"></i><span>當日業績</span><span class="momo-nav-code momo-mono">02</span>
+                    </a>
+                    <a class="momo-nav-sublink {% if _active_page == 'growth' %}is-active{% endif %}" href="/growth_analysis">
+                        <i class="fas fa-arrow-trend-up"></i><span>成長分析</span><span class="momo-nav-code momo-mono">03</span>
+                    </a>
+                    <a class="momo-nav-sublink {% if _active_page == 'monthly' %}is-active{% endif %}" href="/monthly_summary_analysis">
+                        <i class="fas fa-table"></i><span>月份總表</span><span class="momo-nav-code momo-mono">04</span>
+                    </a>
+                    {% if metabase_url %}
+                    <a class="momo-nav-sublink" href="{{ metabase_url }}" target="_blank" rel="noopener">
+                        <i class="fas fa-chart-pie"></i><span>自訂圖表</span><span class="momo-nav-code momo-mono">外部</span>
+                    </a>
+                    {% endif %}
+                    {% if grist_url %}
+                    <a class="momo-nav-sublink" href="{{ grist_url }}" target="_blank" rel="noopener">
+                        <i class="fas fa-table-cells"></i><span>資料協作</span><span class="momo-nav-code momo-mono">外部</span>
+                    </a>
+                    {% endif %}
+                </div>
+            </details>
         </div>
 
         <div class="momo-nav-group">
diff --git a/templates/components/_navbar.html b/templates/components/_navbar.html
index 502b6e2..4c96bcf 100755
--- a/templates/components/_navbar.html
+++ b/templates/components/_navbar.html
@@ -7,11 +7,146 @@
         {% include 'components/_navbar.html' %}
 #}
 
+<style>
+    :root {
+        --momo-legacy-bg: #ebe6dc;
+        --momo-legacy-surface: #faf7f0;
+        --momo-legacy-paper: #f3eee2;
+        --momo-legacy-ink: #2a2520;
+        --momo-legacy-muted: #645c52;
+        --momo-legacy-accent: #c96442;
+        --momo-legacy-accent-dark: #8f4530;
+        --momo-legacy-accent-soft: rgba(201, 100, 66, 0.12);
+        --momo-legacy-line: rgba(42, 37, 32, 0.16);
+        --momo-legacy-inverse: #fff8ee;
+    }
+
+    body {
+        background-color: var(--momo-legacy-bg) !important;
+        color: var(--momo-legacy-ink);
+    }
+
+    .navbar.navbar-dark,
+    .navbar.bg-custom-dark,
+    .navbar-dark.bg-primary {
+        background:
+            radial-gradient(circle at 24px 24px, rgba(255, 248, 238, 0.16) 1px, transparent 1px),
+            linear-gradient(135deg, var(--momo-legacy-accent-dark), var(--momo-legacy-accent)) !important;
+        background-size: 10px 10px, auto;
+        border-bottom: 1px solid rgba(255, 248, 238, 0.18);
+        box-shadow: 0 10px 24px rgba(61, 38, 27, 0.16) !important;
+    }
+
+    .navbar .navbar-brand,
+    .navbar .navbar-text,
+    .navbar-dark .navbar-brand,
+    .navbar-dark .navbar-text {
+        color: var(--momo-legacy-inverse) !important;
+    }
+
+    .navbar-dark .navbar-nav .nav-link,
+    .navbar.bg-custom-dark .navbar-nav .nav-link {
+        color: rgba(255, 248, 238, 0.82) !important;
+        border-radius: 6px;
+        transition: background-color 160ms ease, color 160ms ease;
+    }
+
+    .navbar-dark .navbar-nav .nav-link:hover,
+    .navbar.bg-custom-dark .navbar-nav .nav-link:hover {
+        color: var(--momo-legacy-inverse) !important;
+        background: rgba(255, 248, 238, 0.12) !important;
+    }
+
+    .navbar-dark .navbar-nav .nav-link.active,
+    .navbar-dark .navbar-nav .nav-link.show,
+    .navbar.bg-custom-dark .navbar-nav .nav-link.active,
+    .navbar.bg-custom-dark .navbar-nav .nav-link.show {
+        color: var(--momo-legacy-inverse) !important;
+        background: rgba(255, 248, 238, 0.18) !important;
+        font-weight: 800;
+    }
+
+    .dropdown-menu {
+        background: var(--momo-legacy-surface);
+        border: 1px solid var(--momo-legacy-line);
+        box-shadow: 0 18px 34px rgba(61, 38, 27, 0.14);
+    }
+
+    .dropdown-header,
+    .dropdown-item {
+        color: var(--momo-legacy-ink);
+    }
+
+    .dropdown-item:hover,
+    .dropdown-item:focus,
+    .dropdown-item.active,
+    .dropdown-item:active {
+        color: var(--momo-legacy-accent-dark);
+        background: var(--momo-legacy-accent-soft);
+    }
+
+    .btn-primary,
+    .bg-primary,
+    .badge.bg-primary,
+    .progress-bar.bg-primary,
+    .nav-pills .nav-link.active,
+    .nav-tabs .nav-link.active,
+    .page-item.active .page-link,
+    .card-header.bg-primary {
+        color: var(--momo-legacy-inverse) !important;
+        background: linear-gradient(135deg, var(--momo-legacy-accent), var(--momo-legacy-accent-dark)) !important;
+        border-color: var(--momo-legacy-accent-dark) !important;
+    }
+
+    .btn-primary:hover,
+    .btn-primary:focus {
+        color: var(--momo-legacy-inverse) !important;
+        background: linear-gradient(135deg, #b1543a, #7a3520) !important;
+        border-color: #7a3520 !important;
+    }
+
+    .btn-outline-primary {
+        color: var(--momo-legacy-accent-dark) !important;
+        border-color: var(--momo-legacy-accent) !important;
+    }
+
+    .btn-outline-primary:hover,
+    .btn-outline-primary.active {
+        color: var(--momo-legacy-inverse) !important;
+        background: var(--momo-legacy-accent) !important;
+        border-color: var(--momo-legacy-accent-dark) !important;
+    }
+
+    .text-primary,
+    a,
+    .product-link:hover {
+        color: var(--momo-legacy-accent-dark) !important;
+    }
+
+    .spinner-border.text-primary {
+        color: var(--momo-legacy-accent) !important;
+    }
+
+    .table thead,
+    .table thead th,
+    thead.bg-light th {
+        background: var(--momo-legacy-paper) !important;
+        color: var(--momo-legacy-ink) !important;
+        border-color: var(--momo-legacy-line) !important;
+    }
+
+    .card,
+    .modal-content {
+        background: var(--momo-legacy-surface);
+        border-color: var(--momo-legacy-line);
+    }
+</style>
+
 <nav class="navbar navbar-expand-xl navbar-dark bg-custom-dark fixed-top shadow-sm">
     <div class="container">
         <!-- 品牌 Logo -->
         <a class="navbar-brand d-flex align-items-center" href="/">
-            <span class="d-none d-sm-inline fw-bold" style="letter-spacing: 2px;">WOOO</span>
+            <span class="d-none d-sm-inline fw-bold" style="letter-spacing: 0;">EwoooC</span>
         </a>
 
         <!-- 手機版選單按鈕 -->
diff --git a/templates/daily_sales.html b/templates/daily_sales.html
index 589ac55..2519643 100644
--- a/templates/daily_sales.html
+++ b/templates/daily_sales.html
@@ -850,6 +850,7 @@
 
 {% block ewooo_content %}
     <div class="daily-sales-page">
+        {% include 'components/_analysis_report_tabs.html' %}
         {% if error %}
         <div class="error-message">
             <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
diff --git a/templates/ewoooc_base.html b/templates/ewoooc_base.html
index fff38db..6930707 100644
--- a/templates/ewoooc_base.html
+++ b/templates/ewoooc_base.html
@@ -22,6 +22,175 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/observability-system.css') }}">
     {% endif %}
     {% block extra_css %}{% endblock %}
+    <style>
+        .momo-app[data-active-page="dashboard"] {
+            --momo-page-accent: var(--momo-warm-caramel);
+            --momo-page-accent-dark: var(--momo-warm-mahogany);
+            --momo-page-accent-soft: var(--momo-warm-caramel-soft);
+        }
+        .momo-app[data-active-page="edm"],
+        .momo-app[data-active-page="campaigns"] {
+            --momo-page-accent: var(--momo-warm-honey);
+            --momo-page-accent-dark: #7a5510;
+            --momo-page-accent-soft: var(--momo-warm-honey-soft);
+        }
+        .momo-app[data-active-page="sales"],
+        .momo-app[data-active-page="daily_sales"],
+        .momo-app[data-active-page="monthly"],
+        .momo-app[data-active-page="growth"] {
+            --momo-page-accent: var(--momo-warm-earth);
+            --momo-page-accent-dark: #65411f;
+            --momo-page-accent-soft: var(--momo-warm-earth-soft);
+        }
+        .momo-app[data-active-page="vendor_stockout"] {
+            --momo-page-accent: var(--momo-warm-rust);
+            --momo-page-accent-dark: #7d2520;
+            --momo-page-accent-soft: var(--momo-warm-rust-soft);
+        }
+        .momo-app[data-active-page="ai_recommend"],
+        .momo-app[data-active-page="ai_history"],
+        .momo-app[data-active-page="ai_intelligence"] {
+            --momo-page-accent: var(--momo-warm-honey);
+            --momo-page-accent-dark: #6e500e;
+            --momo-page-accent-soft: var(--momo-warm-honey-soft);
+        }
+        .momo-app[data-active-page="auto_import"],
+        .momo-app[data-active-page="market_intel"] {
+            --momo-page-accent: var(--momo-warm-mahogany);
+            --momo-page-accent-dark: #5e2e20;
+            --momo-page-accent-soft: var(--momo-warm-mahogany-soft);
+        }
+        .momo-app[data-active-page^="obs_"],
+        .momo-app[data-active-page="settings"],
+        .momo-app[data-active-page="system_settings"],
+        .momo-app[data-active-page="logs"],
+        .momo-app[data-active-page="crawler"],
+        .momo-app[data-active-page="user_management"],
+        .momo-app[data-active-page="ai_automation_smoke"] {
+            --momo-page-accent: var(--momo-warm-caramel);
+            --momo-page-accent-dark: var(--momo-warm-mahogany);
+            --momo-page-accent-soft: var(--momo-warm-caramel-soft);
+        }
+
+        .momo-app .momo-topbar-pill,
+        .momo-app .momo-avatar,
+        .momo-app .momo-shortcut,
+        .momo-app .momo-status-card,
+        .momo-app .page-header,
+        .momo-app .calendar-nav button,
+        .momo-app .kpi-card.text-white,
+        .momo-app .bg-purple,
+        .momo-app .dashboard-kpi.is-accent,
+        .momo-app .dashboard-segmented a.is-active,
+        .momo-app .dashboard-action-button.is-primary,
+        .momo-app .dashboard-history-range button.is-active,
+        .momo-app .campaign-tab.is-active,
+        .momo-app .campaign-slot-tab.active,
+        .momo-app .campaign-filter-chip.is-active,
+        .momo-app .campaign-history-range button.is-active,
+        .momo-app .vendor-action.is-primary,
+        .momo-app .vendor-pulse,
+        .momo-app .stockout-action.is-primary,
+        .momo-app .stockout-tab.is-active,
+        .momo-app .stockout-import-note,
+        .momo-app .filter-section,
+        .momo-app .monthly-version-pill,
+        .momo-app .nav-pills .nav-link.active,
+        .momo-app .nav-tabs .nav-link.active,
+        .momo-app .dropdown-item.active,
+        .momo-app .page-item.active .page-link,
+        .momo-app .btn-primary,
+        .momo-app .bg-primary,
+        .momo-app .bg-dark {
+            color: var(--momo-page-inverse) !important;
+            background: linear-gradient(135deg, var(--momo-page-accent), var(--momo-page-accent-dark)) !important;
+            border-color: var(--momo-page-accent-dark) !important;
+        }
+
+        .momo-app .page-header h1,
+        .momo-app .page-header h2,
+        .momo-app .page-header h3,
+        .momo-app .page-header h4,
+        .momo-app .page-header h5,
+        .momo-app .page-header p,
+        .momo-app .page-header small,
+        .momo-app .page-header .text-muted,
+        .momo-app .page-header .text-info,
+        .momo-app .filter-section h1,
+        .momo-app .filter-section h2,
+        .momo-app .filter-section h3,
+        .momo-app .filter-section h4,
+        .momo-app .filter-section h5,
+        .momo-app .filter-section h6,
+        .momo-app .filter-section label,
+        .momo-app .filter-section .form-label {
+            color: var(--momo-page-inverse) !important;
+        }
+
+        .momo-app .page-header .date-selector,
+        .momo-app .filter-section .form-control,
+        .momo-app .filter-section .form-select,
+        .momo-app .filter-section .custom-dropdown-btn {
+            color: var(--momo-text-primary) !important;
+            background: var(--momo-bg-elevated) !important;
+            border-color: rgba(255, 248, 238, 0.68) !important;
+        }
+
+        .momo-app .kpi-card .kpi-percent,
+        .momo-app .kpi-card .badge.bg-dark {
+            color: var(--momo-page-inverse) !important;
+            background: rgba(255, 248, 238, 0.18) !important;
+            border: 1px solid rgba(255, 248, 238, 0.24) !important;
+            text-shadow: none !important;
+        }
+
+        .momo-app .dashboard-kpi.is-accent::before,
+        .momo-app .momo-status-card::before {
+            background-image: radial-gradient(circle, rgba(255, 248, 238, 0.2) 1px, transparent 1px) !important;
+        }
+
+        .momo-app .dashboard-table th,
+        .momo-app .campaign-table th,
+        .momo-app .stockout-table th,
+        .momo-app .vendor-table th,
+        .momo-app .daily-sales-page .table thead th,
+        .momo-app .monthly-analysis-page .table thead th,
+        .momo-app .monthly-analysis-page .table-light th,
+        .momo-app .ai-intel-page .table thead th {
+            color: var(--momo-page-inverse) !important;
+            background: linear-gradient(90deg, var(--momo-page-accent-dark), var(--momo-page-accent)) !important;
+            border-bottom-color: color-mix(in srgb, var(--momo-page-accent-dark) 70%, #fff8ee) !important;
+        }
+
+        .momo-app .dashboard-table th a,
+        .momo-app .campaign-table th a {
+            color: inherit !important;
+        }
+
+        .momo-app .btn-outline-primary {
+            color: var(--momo-page-accent-dark) !important;
+            border-color: var(--momo-page-accent) !important;
+        }
+
+        .momo-app .btn-outline-primary:hover,
+        .momo-app .text-bg-primary,
+        .momo-app .badge.bg-primary,
+        .momo-app .progress-bar.bg-primary,
+        .momo-app .keyword-badge.bg-primary {
+            color: var(--momo-page-inverse) !important;
+            background-color: var(--momo-page-accent) !important;
+            border-color: var(--momo-page-accent) !important;
+        }
+
+        .momo-app .text-primary {
+            color: var(--momo-page-accent-dark) !important;
+        }
+
+        .momo-app .momo-live-dot {
+            background: var(--momo-page-accent);
+            box-shadow: 0 0 8px var(--momo-page-accent);
+        }
+    </style>
 </head>
 <body class="momo-v2-body {% if active_page|default('') in [
     'obs_overview', 'obs_agent_orchestration', 'obs_business_intel',
@@ -29,7 +198,7 @@
     'obs_promotion_review', 'obs_rag_queries', 'obs_quality_trend',
     'obs_ppt_audit'
 ] %}momo-observability-mode{% endif %}">
-    <div class="momo-app momo-shell" id="momo-shell">
+    <div class="momo-app momo-shell" id="momo-shell" data-active-page="{{ active_page|default('') }}">
         {% include 'components/_ewoooc_shell.html' %}
 
         {% set _next_run = next_run|default(None) %}
diff --git a/templates/growth_analysis.html b/templates/growth_analysis.html
index d88b2cd..ec58fc0 100644
--- a/templates/growth_analysis.html
+++ b/templates/growth_analysis.html
@@ -28,6 +28,7 @@
     {% include 'components/_navbar.html' %}
 
     <div class="container-fluid px-4">
+        {% include 'components/_analysis_report_tabs.html' %}
         <div class="d-flex justify-content-between align-items-center mb-4 mt-4">
             <h4 class="mb-0 fw-bold text-dark"><i class="fas fa-rocket me-2 text-success"></i>營運成長策略報表</h4>
             <span class="text-muted small">數據更新至: {{ chart_data.labels[-1] if chart_data.labels else '-' }}</span>
@@ -247,4 +248,4 @@
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/market_intel/disabled.html b/templates/market_intel/disabled.html
new file mode 100644
index 0000000..8a92be1
--- /dev/null
+++ b/templates/market_intel/disabled.html
@@ -0,0 +1,95 @@
+{% extends "ewoooc_base.html" %}
+
+{% block title %}市場情報｜EwoooC{% endblock %}
+
+{% block extra_css %}
+<style>
+    .market-intel-status {
+        display: grid;
+        gap: 1rem;
+    }
+
+    .market-intel-panel {
+        border: 1px solid var(--momo-border, #d8c8aa);
+        border-radius: 8px;
+        background:
+            radial-gradient(circle at 1px 1px, rgba(120, 83, 44, 0.16) 1px, transparent 1.35px),
+            var(--momo-paper, #f8f2e7);
+        background-size: 10px 10px, auto;
+        box-shadow: var(--momo-shadow-sm, 0 8px 18px rgba(72, 49, 28, 0.08));
+        padding: 1.25rem;
+    }
+
+    .market-intel-title {
+        color: var(--momo-ink, #30251b);
+        font-size: 1.35rem;
+        font-weight: 800;
+        margin: 0;
+    }
+
+    .market-intel-muted {
+        color: var(--momo-muted, #756a5b);
+        margin: 0;
+    }
+
+    .market-intel-flags {
+        display: grid;
+        gap: 0.75rem;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        margin-top: 1rem;
+    }
+
+    .market-intel-flag {
+        border-left: 3px solid var(--momo-accent, #c8752d);
+        background: rgba(255, 250, 241, 0.84);
+        padding: 0.8rem 0.9rem;
+    }
+
+    .market-intel-flag span {
+        color: var(--momo-muted, #756a5b);
+        display: block;
+        font-size: 0.78rem;
+        font-weight: 700;
+        letter-spacing: 0;
+    }
+
+    .market-intel-flag strong {
+        color: var(--momo-ink, #30251b);
+        font-family: "JetBrains Mono", monospace;
+        font-size: 1rem;
+    }
+</style>
+{% endblock %}
+
+{% block ewooo_content %}
+<section class="market-intel-status">
+    <div class="market-intel-panel">
+        <p class="market-intel-muted momo-mono mb-2">MARKET INTEL / {{ status.phase }}</p>
+        <h1 class="market-intel-title">市場情報尚未啟用</h1>
+        <p class="market-intel-muted mt-2">目前只載入安全骨架；爬蟲、正式寫入與排程都尚未掛載。</p>
+
+        <div class="market-intel-flags">
+            <div class="market-intel-flag">
+                <span>模組開關</span>
+                <strong>{{ 'ON' if status.enabled else 'OFF' }}</strong>
+            </div>
+            <div class="market-intel-flag">
+                <span>爬蟲開關</span>
+                <strong>{{ 'ON' if status.crawler_enabled else 'OFF' }}</strong>
+            </div>
+            <div class="market-intel-flag">
+                <span>資料寫入</span>
+                <strong>{{ 'ON' if status.write_enabled else 'OFF' }}</strong>
+            </div>
+            <div class="market-intel-flag">
+                <span>排程掛載</span>
+                <strong>{{ 'ON' if status.scheduler_attached else 'OFF' }}</strong>
+            </div>
+            <div class="market-intel-flag">
+                <span>DB 寫入許可</span>
+                <strong>{{ 'ON' if status.database_write_allowed else 'OFF' }}</strong>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
diff --git a/templates/monthly_summary_analysis.html b/templates/monthly_summary_analysis.html
index 18fa57d..60b13f1 100644
--- a/templates/monthly_summary_analysis.html
+++ b/templates/monthly_summary_analysis.html
@@ -167,6 +167,7 @@
     </div>
 
     <div class="monthly-analysis-page">
+        {% include 'components/_analysis_report_tabs.html' %}
         <section class="monthly-analysis-hero">
             <div>
                 <h1 class="monthly-analysis-title"><i class="fas fa-chart-pie me-2 text-primary"></i>月份總表數據分析</h1>
diff --git a/templates/sales_analysis.html b/templates/sales_analysis.html
index d1eccf4..9853fec 100644
--- a/templates/sales_analysis.html
+++ b/templates/sales_analysis.html
@@ -608,6 +608,7 @@
     </div>
 
     <div class="container-fluid px-4">
+        {% include 'components/_analysis_report_tabs.html' %}
         <div class="d-flex justify-content-between align-items-center mb-4 mt-4">
             <div class="d-flex align-items-center gap-3">
                 <h4 class="mb-0 fw-bold text-dark"><i class="fas fa-chart-pie me-2 text-primary"></i>業績分析儀表板</h4>
@@ -3163,4 +3164,4 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/tests/test_auto_import_data_sync.py b/tests/test_auto_import_data_sync.py
new file mode 100644
index 0000000..e7f4e20
--- /dev/null
+++ b/tests/test_auto_import_data_sync.py
@@ -0,0 +1,56 @@
+import importlib
+import os
+
+from sqlalchemy import create_engine, text
+
+
+def _load_scheduler(monkeypatch, database_url):
+    os.environ.setdefault("MOMO_ALLOW_INSECURE_CONFIG_FOR_TESTS", "true")
+    import config
+
+    monkeypatch.setattr(config, "DATABASE_PATH", database_url)
+    import scheduler
+
+    return importlib.reload(scheduler)
+
+
+def test_verify_import_data_sync_scopes_to_imported_date(monkeypatch, tmp_path):
+    db_path = tmp_path / "sales.db"
+    database_url = f"sqlite:///{db_path}"
+    scheduler = _load_scheduler(monkeypatch, database_url)
+
+    engine = create_engine(database_url)
+    with engine.begin() as conn:
+        conn.execute(text('CREATE TABLE daily_sales_snapshot ("日期" TEXT, snapshot_date TEXT, "商品ID" TEXT)'))
+        conn.execute(text('CREATE TABLE realtime_sales_monthly ("日期" TEXT, "商品ID" TEXT)'))
+        conn.execute(text("""
+            INSERT INTO daily_sales_snapshot ("日期", snapshot_date, "商品ID") VALUES
+            ('2026-05-05', '2026-05-05', 'A001'),
+            ('2026-05-05', '2026-05-05', 'A002')
+        """))
+        conn.execute(text("""
+            INSERT INTO realtime_sales_monthly ("日期", "商品ID") VALUES
+            ('2026-05-01', 'OLD1'),
+            ('2026-05-01', 'OLD2'),
+            ('2026-05-05', 'A001'),
+            ('2026-05-05', 'A002')
+        """))
+
+    result = scheduler.verify_import_data_sync(
+        expected_rows=2,
+        date_range={"min": "2026-05-05", "max": "2026-05-05"},
+    )
+
+    assert result["success"] is True
+    assert result["daily_sales_snapshot"]["rows"] == 2
+    assert result["realtime_sales_monthly"]["rows"] == 2
+
+
+def test_verify_import_data_sync_rejects_missing_import_scope(monkeypatch, tmp_path):
+    scheduler = _load_scheduler(monkeypatch, f"sqlite:///{tmp_path / 'sales.db'}")
+
+    result = scheduler.verify_import_data_sync(expected_rows=10, date_range=None)
+
+    assert result["success"] is False
+    assert "缺少本次匯入日期範圍" in result["errors"][0]
+
diff --git a/tests/test_modularization_governance.py b/tests/test_modularization_governance.py
index 83103af..8c72343 100644
--- a/tests/test_modularization_governance.py
+++ b/tests/test_modularization_governance.py
@@ -7,9 +7,12 @@ GUIDE = ROOT / "docs/guides/modularization_governance.md"
 
 
 def _python_line_counts():
-    ignored_parts = {".git", "venv", "__pycache__", ".pytest_cache"}
+    ignored_parts = {".git", "venv", "backups", "__pycache__", ".pytest_cache"}
     for path in ROOT.rglob("*.py"):
-        if any(part in ignored_parts for part in path.relative_to(ROOT).parts):
+        parts = path.relative_to(ROOT).parts
+        if any(part in ignored_parts for part in parts):
+            continue
+        if len(parts) >= 2 and parts[0] == ".claude" and parts[1] == "worktrees":
             continue
         with path.open(encoding="utf-8", errors="ignore") as handle:
             yield path.relative_to(ROOT).as_posix(), sum(1 for _ in handle)
diff --git a/web/static/css/analysis-workbench.css b/web/static/css/analysis-workbench.css
new file mode 100644
index 0000000..f4a197d
--- /dev/null
+++ b/web/static/css/analysis-workbench.css
@@ -0,0 +1,1055 @@
+/* EwoooC V2 analysis report workbench.
+   Only visual shell/polish rules live here; chart data and business logic stay in templates/routes. */
+
+body.momo-v2-body {
+  padding-top: 0 !important;
+  background: var(--momo-bg-body) !important;
+  color: var(--momo-text-primary);
+}
+
+.analysis-workbench,
+.daily-sales-page,
+.monthly-analysis-page {
+  --analysis-dot-size: 13px;
+  --analysis-dot-ink: rgba(42, 37, 32, 0.075);
+  --analysis-panel-bg:
+    radial-gradient(circle at 10px 10px, var(--analysis-dot-ink) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(253, 250, 243, 0.98), rgba(243, 238, 226, 0.90));
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  color: var(--momo-text-primary);
+  font-family: var(--momo-font-family);
+  font-size: var(--momo-font-size-base);
+  line-height: 1.55;
+  text-rendering: geometricPrecision;
+}
+
+.analysis-workbench::selection,
+.daily-sales-page::selection,
+.monthly-analysis-page::selection {
+  background: var(--momo-accent-100);
+  color: var(--momo-ink-strong);
+}
+
+.analysis-workbench *,
+.daily-sales-page *,
+.monthly-analysis-page * {
+  letter-spacing: 0;
+}
+
+.analysis-page-hero,
+.daily-sales-hero,
+.monthly-analysis-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  padding: 22px;
+  border: 1px solid var(--momo-border-strong);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(250, 247, 240, 0.96), rgba(243, 238, 226, 0.86)),
+    radial-gradient(circle at 18px 18px, rgba(42, 37, 32, 0.10) 1px, transparent 1px);
+  background-size: auto, 18px 18px;
+  box-shadow: var(--momo-shadow-soft);
+}
+
+.analysis-page-hero::before,
+.daily-sales-hero::before,
+.monthly-analysis-hero::before,
+.analysis-workbench .card::before,
+.daily-sales-page .card::before,
+.monthly-analysis-page .card::before {
+  pointer-events: none;
+}
+
+.analysis-page-title,
+.daily-sales-title,
+.monthly-analysis-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0;
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-display);
+  font-size: clamp(1.45rem, 2vw, 2.08rem);
+  font-weight: 850;
+  letter-spacing: 0;
+}
+
+.analysis-workbench .text-muted,
+.daily-sales-page .text-muted,
+.monthly-analysis-page .text-muted,
+.analysis-workbench small,
+.daily-sales-page small,
+.monthly-analysis-page small,
+.analysis-workbench .small,
+.daily-sales-page .small,
+.monthly-analysis-page .small {
+  color: var(--momo-text-secondary) !important;
+  font-size: max(var(--momo-text-body-sm), 0.8125rem) !important;
+  line-height: 1.5;
+}
+
+.analysis-page-title i,
+.daily-sales-title i,
+.monthly-analysis-title i,
+.analysis-page-title .text-info,
+.daily-sales-title .text-info,
+.monthly-analysis-title .text-info,
+.daily-sales-page .page-header .daily-sales-title .text-info,
+.analysis-workbench .card-header i,
+.daily-sales-page .card-header i,
+.monthly-analysis-page .card-header i {
+  color: var(--momo-warm-caramel) !important;
+}
+
+.analysis-page-title > i,
+.daily-sales-title > i,
+.monthly-analysis-title > i {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background:
+    radial-gradient(circle at 5px 5px, rgba(42, 37, 32, 0.12) 1px, transparent 1px),
+    var(--momo-accent-100);
+  background-size: 7px 7px, auto;
+  color: var(--momo-warm-caramel) !important;
+  font-size: 1rem !important;
+}
+
+.analysis-page-meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.analysis-report-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--momo-border-light);
+  border-radius: 8px;
+  background: rgba(250, 247, 240, 0.72);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
+}
+
+.analysis-report-tabs-spacer {
+  flex: 1 1 auto;
+  min-width: 8px;
+}
+
+.analysis-report-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  color: var(--momo-text-secondary);
+  text-decoration: none;
+  font-size: 0.86rem;
+  font-weight: 800;
+  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.analysis-report-tab:hover {
+  border-color: var(--momo-border-light);
+  background: var(--momo-bg-surface);
+  color: var(--momo-text-primary);
+}
+
+.analysis-report-tab.is-active {
+  border-color: rgba(201, 100, 66, 0.32);
+  background: var(--momo-accent-soft);
+  color: var(--momo-accent-700);
+}
+
+.analysis-report-tab.is-external {
+  border-color: var(--momo-border-light);
+  background: rgba(255, 252, 246, 0.62);
+  font-family: var(--momo-font-family-mono);
+  font-size: 0.78rem;
+}
+
+.analysis-report-tab i {
+  color: currentColor !important;
+}
+
+.analysis-workbench .card,
+.daily-sales-page .card,
+.monthly-analysis-page .card {
+  position: relative;
+  border: 1px solid var(--momo-border-light) !important;
+  border-radius: 8px !important;
+  background: var(--analysis-panel-bg) !important;
+  background-size: var(--analysis-dot-size) var(--analysis-dot-size), auto !important;
+  box-shadow: var(--momo-shadow-soft) !important;
+  overflow: hidden;
+}
+
+.analysis-workbench .card:hover,
+.daily-sales-page .card:hover,
+.monthly-analysis-page .card:hover {
+  transform: none !important;
+  box-shadow: 0 10px 26px rgba(42, 37, 32, 0.10) !important;
+}
+
+.analysis-workbench .card-header,
+.daily-sales-page .card-header,
+.monthly-analysis-page .card-header {
+  border-bottom: 1px solid var(--momo-border-light) !important;
+  background: rgba(243, 238, 226, 0.92) !important;
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-family);
+  font-size: var(--momo-text-title) !important;
+  font-weight: 850;
+  line-height: 1.35;
+}
+
+.analysis-workbench .card-body,
+.daily-sales-page .card-body,
+.monthly-analysis-page .card-body {
+  background: rgba(255, 252, 246, 0.42);
+  color: var(--momo-text-primary);
+  font-size: var(--momo-font-size-base);
+}
+
+.analysis-workbench .bg-white,
+.monthly-analysis-page .bg-white,
+.daily-sales-page .bg-white {
+  background: rgba(255, 252, 246, 0.76) !important;
+  border: 1px solid var(--momo-border-light);
+  box-shadow: none !important;
+}
+
+.analysis-workbench .form-label,
+.daily-sales-page .form-label,
+.monthly-analysis-page .form-label {
+  color: var(--momo-text-secondary) !important;
+  font-size: var(--momo-text-body-sm) !important;
+  font-weight: 850;
+}
+
+.analysis-workbench .form-control,
+.analysis-workbench .form-select,
+.daily-sales-page .form-control,
+.daily-sales-page .form-select,
+.monthly-analysis-page .form-control,
+.monthly-analysis-page .form-select,
+.monthly-analysis-page .custom-dropdown-btn {
+  min-height: 38px;
+  border-color: var(--momo-border-light) !important;
+  border-radius: 7px !important;
+  background-color: var(--momo-bg-elevated) !important;
+  color: var(--momo-text-primary) !important;
+}
+
+.analysis-workbench .form-control:focus,
+.analysis-workbench .form-select:focus,
+.daily-sales-page .form-control:focus,
+.daily-sales-page .form-select:focus,
+.monthly-analysis-page .form-control:focus,
+.monthly-analysis-page .form-select:focus {
+  border-color: var(--momo-border-focus) !important;
+  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.14) !important;
+}
+
+.analysis-workbench .btn-primary,
+.daily-sales-page .btn-primary,
+.monthly-analysis-page .btn-primary {
+  border-color: var(--momo-accent) !important;
+  background: var(--momo-accent) !important;
+  color: var(--momo-text-inverse) !important;
+}
+
+.analysis-workbench .btn-outline-secondary,
+.daily-sales-page .btn-outline-secondary,
+.monthly-analysis-page .btn-outline-secondary {
+  border-color: var(--momo-border-light) !important;
+  color: var(--momo-text-secondary) !important;
+}
+
+.analysis-workbench .badge,
+.daily-sales-page .badge,
+.monthly-analysis-page .badge {
+  border: 1px solid var(--momo-tag-muted-border);
+  border-radius: 999px;
+  background: var(--momo-tag-muted-bg);
+  color: var(--momo-tag-muted-text);
+  font-family: var(--momo-font-family-mono);
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.analysis-workbench .badge.bg-primary,
+.daily-sales-page .badge.bg-primary,
+.monthly-analysis-page .badge.bg-primary,
+.analysis-workbench .badge.bg-info,
+.daily-sales-page .badge.bg-info,
+.monthly-analysis-page .badge.bg-info {
+  border-color: var(--momo-tag-caramel-border) !important;
+  background: var(--momo-tag-caramel-bg) !important;
+  color: var(--momo-tag-caramel-text) !important;
+}
+
+.analysis-workbench .badge.bg-success,
+.daily-sales-page .badge.bg-success,
+.monthly-analysis-page .badge.bg-success {
+  border-color: var(--momo-tag-success-border) !important;
+  background: var(--momo-tag-success-bg) !important;
+  color: var(--momo-tag-success-text) !important;
+}
+
+.analysis-workbench .badge.bg-warning,
+.daily-sales-page .badge.bg-warning,
+.monthly-analysis-page .badge.bg-warning {
+  border-color: var(--momo-tag-honey-border) !important;
+  background: var(--momo-tag-honey-bg) !important;
+  color: var(--momo-tag-honey-text) !important;
+}
+
+.analysis-workbench .badge.bg-danger,
+.daily-sales-page .badge.bg-danger,
+.monthly-analysis-page .badge.bg-danger {
+  border-color: var(--momo-tag-rust-border) !important;
+  background: var(--momo-tag-rust-bg) !important;
+  color: var(--momo-tag-rust-text) !important;
+}
+
+.analysis-workbench .badge.bg-dark,
+.daily-sales-page .badge.bg-dark,
+.monthly-analysis-page .badge.bg-dark,
+.analysis-workbench .badge.bg-secondary,
+.daily-sales-page .badge.bg-secondary,
+.monthly-analysis-page .badge.bg-secondary {
+  border-color: var(--momo-tag-ink-border) !important;
+  background: var(--momo-tag-ink-bg) !important;
+  color: var(--momo-tag-ink-text) !important;
+}
+
+.analysis-workbench .text-primary,
+.daily-sales-page .text-primary,
+.monthly-analysis-page .text-primary {
+  color: var(--momo-warm-caramel) !important;
+}
+
+.analysis-workbench .text-success,
+.daily-sales-page .text-success,
+.monthly-analysis-page .text-success,
+.trend-up {
+  color: var(--momo-success) !important;
+}
+
+.analysis-workbench .text-danger,
+.daily-sales-page .text-danger,
+.monthly-analysis-page .text-danger,
+.trend-down {
+  color: var(--momo-danger) !important;
+}
+
+.analysis-workbench .kpi-card,
+.daily-sales-page .kpi-card,
+.monthly-analysis-page .kpi-card {
+  --kpi-accent: var(--momo-warm-caramel);
+  --kpi-accent-soft: var(--momo-warm-caramel-soft);
+  position: relative;
+  min-height: 142px;
+  border: 1px solid rgba(42, 37, 32, 0.22) !important;
+  border-left: 5px solid var(--kpi-accent) !important;
+  border-radius: 8px !important;
+  background:
+    radial-gradient(circle at 12px 12px, rgba(42, 37, 32, 0.095) 1px, transparent 1px),
+    linear-gradient(135deg, rgba(253, 250, 243, 0.98), rgba(243, 238, 226, 0.92)) !important;
+  background-size: 12px 12px, auto !important;
+  color: var(--momo-text-primary) !important;
+  box-shadow: 0 9px 22px rgba(42, 37, 32, 0.08) !important;
+  transform: none !important;
+}
+
+.analysis-workbench .kpi-card.bg-primary,
+.daily-sales-page .kpi-card.bg-primary,
+.monthly-analysis-page .kpi-card.bg-primary {
+  --kpi-accent: var(--momo-warm-caramel);
+  --kpi-accent-soft: var(--momo-warm-caramel-soft);
+}
+
+.analysis-workbench .kpi-card.bg-danger,
+.daily-sales-page .kpi-card.bg-danger,
+.monthly-analysis-page .kpi-card.bg-danger {
+  --kpi-accent: var(--momo-warm-rust);
+  --kpi-accent-soft: var(--momo-warm-rust-soft);
+}
+
+.analysis-workbench .kpi-card.bg-success,
+.daily-sales-page .kpi-card.bg-success,
+.monthly-analysis-page .kpi-card.bg-success {
+  --kpi-accent: var(--momo-success);
+  --kpi-accent-soft: var(--momo-success-bg);
+}
+
+.analysis-workbench .kpi-card.bg-warning,
+.daily-sales-page .kpi-card.bg-warning,
+.monthly-analysis-page .kpi-card.bg-warning {
+  --kpi-accent: var(--momo-warm-honey);
+  --kpi-accent-soft: var(--momo-warm-honey-soft);
+}
+
+.analysis-workbench .kpi-card.bg-info,
+.daily-sales-page .kpi-card.bg-info,
+.monthly-analysis-page .kpi-card.bg-info {
+  --kpi-accent: var(--momo-warm-earth);
+  --kpi-accent-soft: var(--momo-warm-earth-soft);
+}
+
+.analysis-workbench .kpi-card.bg-secondary,
+.analysis-workbench .kpi-card.bg-purple,
+.daily-sales-page .kpi-card.bg-secondary,
+.daily-sales-page .kpi-card.bg-purple,
+.monthly-analysis-page .kpi-card.bg-secondary,
+.monthly-analysis-page .kpi-card.bg-purple {
+  --kpi-accent: var(--momo-warm-mahogany);
+  --kpi-accent-soft: var(--momo-warm-mahogany-soft);
+}
+
+.analysis-workbench .kpi-card::after,
+.daily-sales-page .kpi-card::after,
+.monthly-analysis-page .kpi-card::after {
+  position: absolute;
+  right: 12px;
+  bottom: 10px;
+  width: 42px;
+  height: 42px;
+  content: "";
+  opacity: 0.6;
+  background-image:
+    radial-gradient(circle, var(--kpi-accent) 1.4px, transparent 1.4px);
+  background-size: 8px 8px;
+  mask-image: linear-gradient(135deg, transparent 0 12%, #000 20% 82%, transparent 100%);
+}
+
+.analysis-workbench .kpi-card:hover,
+.daily-sales-page .kpi-card:hover,
+.monthly-analysis-page .kpi-card:hover {
+  border-color: rgba(42, 37, 32, 0.30) !important;
+  box-shadow: 0 12px 26px rgba(42, 37, 32, 0.11) !important;
+}
+
+.analysis-workbench .kpi-card .card-body,
+.daily-sales-page .kpi-card .card-body,
+.monthly-analysis-page .kpi-card .card-body {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding: 22px 24px !important;
+  background: transparent !important;
+  color: var(--momo-text-primary) !important;
+}
+
+.analysis-workbench .kpi-card .kpi-label,
+.daily-sales-page .kpi-card .kpi-label,
+.monthly-analysis-page .kpi-card .kpi-label,
+.analysis-workbench .kpi-card .text-white-50,
+.daily-sales-page .kpi-card .text-white-50,
+.monthly-analysis-page .kpi-card .text-white-50,
+.analysis-workbench .kpi-card .text-black-50,
+.daily-sales-page .kpi-card .text-black-50,
+.monthly-analysis-page .kpi-card .text-black-50 {
+  color: var(--momo-text-secondary) !important;
+  font-family: var(--momo-font-family);
+  font-size: 0.82rem !important;
+  font-weight: 850 !important;
+  line-height: 1.35;
+  text-transform: none !important;
+}
+
+.analysis-workbench .kpi-card .kpi-value,
+.daily-sales-page .kpi-card .kpi-value,
+.monthly-analysis-page .kpi-card .kpi-value {
+  margin: 7px 0 8px;
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-family-mono) !important;
+  font-size: clamp(1.78rem, 2.55vw, 2.42rem) !important;
+  font-weight: 900 !important;
+  line-height: 1.04;
+  letter-spacing: 0 !important;
+  text-shadow: none !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.analysis-workbench .kpi-card .icon-bg,
+.daily-sales-page .kpi-card .icon-bg,
+.monthly-analysis-page .kpi-card .icon-bg {
+  right: 12px !important;
+  bottom: 4px !important;
+  color: var(--kpi-accent) !important;
+  font-size: 5.2rem !important;
+  opacity: 0.14 !important;
+  transform: rotate(-10deg) !important;
+}
+
+.analysis-workbench .kpi-card .badge,
+.daily-sales-page .kpi-card .badge,
+.monthly-analysis-page .kpi-card .badge,
+.analysis-workbench .kpi-card .kpi-percent,
+.daily-sales-page .kpi-card .kpi-percent,
+.monthly-analysis-page .kpi-card .kpi-percent {
+  border: 1px solid color-mix(in srgb, var(--kpi-accent) 28%, transparent) !important;
+  border-radius: 999px !important;
+  background: var(--kpi-accent-soft) !important;
+  color: var(--momo-text-primary) !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  font-family: var(--momo-font-family-mono) !important;
+  font-size: 0.74rem !important;
+  font-weight: 850 !important;
+  line-height: 1.2;
+}
+
+.analysis-workbench .kpi-card .small,
+.daily-sales-page .kpi-card .small,
+.monthly-analysis-page .kpi-card .small,
+.analysis-workbench .kpi-card .text-white,
+.daily-sales-page .kpi-card .text-white,
+.monthly-analysis-page .kpi-card .text-white,
+.analysis-workbench .kpi-card .text-dark,
+.daily-sales-page .kpi-card .text-dark,
+.monthly-analysis-page .kpi-card .text-dark {
+  color: var(--momo-text-secondary) !important;
+}
+
+.analysis-workbench .table,
+.daily-sales-page .table,
+.monthly-analysis-page .table {
+  margin-bottom: 0;
+  color: var(--momo-text-primary);
+  font-size: var(--momo-text-body-sm);
+}
+
+.analysis-workbench .table thead th,
+.daily-sales-page .table thead th,
+.monthly-analysis-page .table thead th {
+  border-bottom: 1px solid var(--momo-border-light) !important;
+  background: var(--momo-bg-paper) !important;
+  color: var(--momo-text-secondary) !important;
+  font-family: var(--momo-font-family-mono);
+  font-size: 0.76rem;
+  font-weight: 900;
+}
+
+.analysis-workbench .table tbody td,
+.daily-sales-page .table tbody td,
+.monthly-analysis-page .table tbody td {
+  color: var(--momo-text-primary);
+  font-size: var(--momo-text-body-sm);
+  line-height: 1.45;
+}
+
+.analysis-workbench .table .text-secondary,
+.daily-sales-page .table .text-secondary,
+.monthly-analysis-page .table .text-secondary {
+  color: var(--momo-text-secondary) !important;
+}
+
+.analysis-workbench .dataTables_wrapper,
+.daily-sales-page .dataTables_wrapper,
+.monthly-analysis-page .dataTables_wrapper {
+  width: 100%;
+  overflow-x: auto;
+  color: var(--momo-text-secondary);
+}
+
+.analysis-workbench .dataTables_wrapper .dataTables_filter input,
+.analysis-workbench .dataTables_wrapper .dataTables_length select {
+  border: 1px solid var(--momo-border-light);
+  border-radius: 7px;
+  background: var(--momo-bg-elevated);
+}
+
+.analysis-filter-panel,
+.analysis-workbench .filter-section,
+.monthly-analysis-page .filter-section {
+  border: 1px solid rgba(201, 100, 66, 0.18) !important;
+  border-radius: 8px !important;
+  background:
+    linear-gradient(135deg, rgba(42, 37, 32, 0.94), rgba(70, 50, 38, 0.92)) !important;
+  box-shadow: var(--momo-shadow-medium) !important;
+}
+
+.analysis-workbench canvas,
+.daily-sales-page canvas,
+.monthly-analysis-page canvas {
+  max-width: 100%;
+}
+
+.analysis-workbench .card-body:has(canvas),
+.daily-sales-page .card-body:has(canvas),
+.monthly-analysis-page .card-body:has(canvas) {
+  position: relative;
+}
+
+.analysis-workbench .card-body:has(canvas)::before,
+.daily-sales-page .card-body:has(canvas)::before,
+.monthly-analysis-page .card-body:has(canvas)::before {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  content: "";
+  background-image:
+    radial-gradient(circle, rgba(42, 37, 32, 0.075) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(253, 250, 243, 0.42), rgba(243, 238, 226, 0.16));
+  background-size: 13px 13px, auto;
+  opacity: 0.55;
+}
+
+.analysis-workbench .card-body canvas,
+.daily-sales-page .card-body canvas,
+.monthly-analysis-page .card-body canvas,
+.monthly-analysis-page [id$="Chart"] {
+  position: relative;
+  z-index: 1;
+}
+
+.monthly-analysis-page [id$="Chart"],
+.monthly-analysis-page #divisionDistChartTable,
+.analysis-workbench .chart-container,
+.daily-sales-page .chart-container {
+  border-radius: 7px;
+  background:
+    radial-gradient(circle at 8px 8px, rgba(42, 37, 32, 0.07) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(253, 250, 243, 0.56), rgba(243, 238, 226, 0.24));
+  background-size: 14px 14px, auto;
+}
+
+.analysis-workbench .card h1,
+.analysis-workbench .card h2,
+.analysis-workbench .card h3,
+.analysis-workbench .card h4,
+.analysis-workbench .card h5,
+.analysis-workbench .card h6,
+.daily-sales-page .card h1,
+.daily-sales-page .card h2,
+.daily-sales-page .card h3,
+.daily-sales-page .card h4,
+.daily-sales-page .card h5,
+.daily-sales-page .card h6,
+.monthly-analysis-page .card h1,
+.monthly-analysis-page .card h2,
+.monthly-analysis-page .card h3,
+.monthly-analysis-page .card h4,
+.monthly-analysis-page .card h5,
+.monthly-analysis-page .card h6 {
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-family) !important;
+  font-size: var(--momo-text-title) !important;
+  font-weight: 850 !important;
+}
+
+.analysis-workbench [style*="color: #"],
+.daily-sales-page [style*="color: #"],
+.monthly-analysis-page [style*="color: #"] {
+  color: var(--momo-text-primary);
+}
+
+.analysis-workbench .table-responsive,
+.daily-sales-page .table-responsive,
+.monthly-analysis-page .table-responsive {
+  border-radius: 7px;
+}
+
+/* Daily sales calendar: replace the legacy purple calendar with V2 warm-paper analytics UI. */
+.daily-sales-page .page-header {
+  border: 1px solid var(--momo-border-strong) !important;
+  border-radius: 8px !important;
+  background:
+    linear-gradient(135deg, rgba(250, 247, 240, 0.96), rgba(243, 238, 226, 0.88)),
+    radial-gradient(circle at 18px 18px, rgba(42, 37, 32, 0.10) 1px, transparent 1px) !important;
+  background-size: auto, 18px 18px !important;
+  box-shadow: var(--momo-shadow-soft) !important;
+}
+
+.daily-sales-page .page-header h4,
+.daily-sales-page .page-header h1,
+.daily-sales-page .page-header .page-header-label {
+  color: var(--momo-text-primary) !important;
+  text-shadow: none !important;
+}
+
+.daily-sales-page .page-header-controls {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.daily-sales-page .calendar-container {
+  position: relative;
+  padding: 22px !important;
+  border: 1px solid var(--momo-border-strong) !important;
+  border-radius: 8px !important;
+  background:
+    radial-gradient(circle at 15px 15px, rgba(42, 37, 32, 0.075) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(250, 247, 240, 0.98), rgba(243, 238, 226, 0.92)) !important;
+  background-size: 15px 15px, auto !important;
+  box-shadow: var(--momo-shadow-soft) !important;
+  color: var(--momo-text-primary) !important;
+}
+
+.daily-sales-page .calendar-header {
+  gap: 16px;
+  padding-bottom: 16px !important;
+  border-bottom: 1px solid var(--momo-border-light) !important;
+}
+
+.daily-sales-page .calendar-header h5 {
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-display) !important;
+  font-size: clamp(1.05rem, 1.35vw, 1.32rem) !important;
+  font-weight: 850 !important;
+  line-height: 1.3;
+}
+
+.daily-sales-page .calendar-header h5:hover,
+.daily-sales-page .calendar-header h5:hover i {
+  color: var(--momo-accent-700) !important;
+  transform: none !important;
+}
+
+.daily-sales-page .calendar-nav button {
+  min-height: 38px;
+  border: 1px solid rgba(42, 37, 32, 0.22) !important;
+  border-radius: 7px !important;
+  background:
+    linear-gradient(135deg, rgba(42, 37, 32, 0.95), rgba(77, 55, 41, 0.92)) !important;
+  color: var(--momo-text-inverse) !important;
+  box-shadow: 0 8px 18px rgba(42, 37, 32, 0.13) !important;
+  font-size: var(--momo-text-body-sm) !important;
+  font-weight: 850 !important;
+}
+
+.daily-sales-page .calendar-nav button:hover {
+  transform: translateY(-1px) !important;
+  box-shadow: 0 12px 24px rgba(42, 37, 32, 0.16) !important;
+}
+
+.daily-sales-page .calendar-grid {
+  gap: 7px !important;
+}
+
+.daily-sales-page .calendar-weekday {
+  padding: 9px 6px !important;
+  border: 1px solid var(--momo-border-light);
+  border-radius: 6px;
+  background: rgba(42, 37, 32, 0.06);
+  color: var(--momo-text-secondary) !important;
+  font-family: var(--momo-font-family-mono);
+  font-size: 0.76rem !important;
+  font-weight: 900 !important;
+  text-transform: none !important;
+}
+
+.daily-sales-page .calendar-day {
+  min-height: 128px !important;
+  padding: 11px 10px !important;
+  border: 1px solid rgba(42, 37, 32, 0.15) !important;
+  border-radius: 8px !important;
+  background: rgba(255, 252, 246, 0.92) !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+  color: var(--momo-text-primary) !important;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease !important;
+}
+
+.daily-sales-page .calendar-day:hover {
+  transform: translateY(-1px) !important;
+  border-color: rgba(201, 100, 66, 0.45) !important;
+  background: rgba(253, 250, 243, 0.98) !important;
+  box-shadow: 0 10px 22px rgba(42, 37, 32, 0.10) !important;
+}
+
+.daily-sales-page .calendar-day.has-data {
+  border-color: rgba(201, 100, 66, 0.24) !important;
+  background:
+    linear-gradient(180deg, rgba(253, 250, 243, 0.98), rgba(250, 247, 240, 0.90)) !important;
+}
+
+.daily-sales-page .calendar-day.has-data::after {
+  position: absolute;
+  right: 10px;
+  bottom: 8px;
+  width: 18px;
+  height: 3px;
+  border-radius: 999px;
+  content: "";
+  background: var(--momo-warm-caramel);
+  opacity: 0.7;
+}
+
+.daily-sales-page .calendar-day.other-month {
+  opacity: 0.45 !important;
+  background: rgba(226, 220, 207, 0.34) !important;
+}
+
+.daily-sales-page .calendar-day.selected {
+  border-width: 2px !important;
+  border-color: var(--momo-accent) !important;
+  background:
+    linear-gradient(180deg, rgba(245, 225, 217, 0.92), rgba(253, 250, 243, 0.96)) !important;
+  box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.16), 0 12px 26px rgba(42, 37, 32, 0.14) !important;
+  transform: none !important;
+  animation: none !important;
+}
+
+.daily-sales-page .calendar-day.selected::before {
+  top: 8px !important;
+  right: 8px !important;
+  width: 22px !important;
+  height: 22px !important;
+  background: var(--momo-accent) !important;
+  color: var(--momo-text-inverse) !important;
+  font-size: 0.82rem !important;
+  box-shadow: 0 6px 14px rgba(201, 100, 66, 0.24) !important;
+}
+
+.daily-sales-page .calendar-day-header {
+  align-items: baseline !important;
+  gap: 7px !important;
+  min-height: 28px;
+  margin-bottom: 7px !important;
+}
+
+.daily-sales-page .calendar-day-number {
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-family-mono) !important;
+  font-size: 1.32rem !important;
+  font-weight: 900 !important;
+  line-height: 1;
+}
+
+.daily-sales-page .calendar-day.selected .calendar-day-number {
+  color: var(--momo-accent-700) !important;
+}
+
+.daily-sales-page .calendar-day-holiday {
+  border: 1px solid var(--momo-danger-border);
+  border-radius: 999px !important;
+  background: var(--momo-danger-bg) !important;
+  color: var(--momo-danger-text) !important;
+  font-size: 0.68rem !important;
+  font-weight: 850 !important;
+}
+
+.daily-sales-page .calendar-day-kpi {
+  display: grid;
+  gap: 4px;
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-family);
+  font-size: 0.82rem !important;
+  font-weight: 750 !important;
+  line-height: 1.35 !important;
+}
+
+.daily-sales-page .calendar-day-kpi > div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 7px;
+  min-width: 0;
+  border-bottom: 1px solid rgba(42, 37, 32, 0.06);
+  color: var(--momo-text-primary) !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.daily-sales-page .calendar-day-kpi .label {
+  flex: 0 0 auto;
+  color: var(--momo-text-secondary) !important;
+  font-size: 0.75rem !important;
+  font-weight: 850 !important;
+}
+
+.daily-sales-page .calendar-day-kpi .margin-rate {
+  color: var(--momo-text-secondary) !important;
+  font-family: var(--momo-font-family-mono);
+  font-size: 0.75rem !important;
+  font-weight: 800 !important;
+}
+
+.daily-sales-page .calendar-day-badge {
+  top: 8px !important;
+  right: 8px !important;
+  padding: 3px 7px !important;
+  border-radius: 999px !important;
+  font-family: var(--momo-font-family-mono);
+  font-size: 0.75rem !important;
+  font-weight: 900 !important;
+  box-shadow: none !important;
+}
+
+.daily-sales-page .calendar-day.has-data.dod-up .calendar-day-badge {
+  border: 1px solid var(--momo-danger-border) !important;
+  background: var(--momo-danger-bg) !important;
+  color: var(--momo-danger-text) !important;
+}
+
+.daily-sales-page .calendar-day.has-data.dod-down .calendar-day-badge {
+  border: 1px solid var(--momo-success-border) !important;
+  background: var(--momo-success-bg) !important;
+  color: var(--momo-success-text) !important;
+}
+
+.daily-sales-page .calendar-day.is-weekend {
+  border-color: rgba(138, 90, 43, 0.26) !important;
+  background: linear-gradient(180deg, rgba(237, 228, 210, 0.64), rgba(253, 250, 243, 0.92)) !important;
+}
+
+.daily-sales-page .calendar-day.is-holiday {
+  border-color: var(--momo-danger-border) !important;
+  background: linear-gradient(180deg, rgba(240, 216, 212, 0.72), rgba(253, 250, 243, 0.92)) !important;
+}
+
+.daily-sales-page .date-selector {
+  border: 1px solid var(--momo-border-light) !important;
+  border-radius: 7px !important;
+  background: var(--momo-bg-elevated) !important;
+  color: var(--momo-text-primary) !important;
+  font-family: var(--momo-font-family-mono);
+  font-size: var(--momo-text-body-sm) !important;
+  font-weight: 800;
+  box-shadow: none !important;
+}
+
+.daily-sales-page .kpi-card .card-body {
+  background: transparent;
+  color: var(--momo-text-primary) !important;
+}
+
+.daily-sales-page .kpi-value {
+  font-size: clamp(1.55rem, 2.2vw, 2.2rem) !important;
+  line-height: 1.15;
+  letter-spacing: 0 !important;
+  text-shadow: none !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.daily-sales-page .kpi-label {
+  color: var(--momo-text-secondary) !important;
+  font-size: 0.78rem !important;
+  letter-spacing: 0.03em;
+}
+
+.daily-sales-page .kpi-percent {
+  border: 1px solid color-mix(in srgb, var(--kpi-accent, var(--momo-accent)) 28%, transparent);
+  background: var(--kpi-accent-soft, var(--momo-accent-soft)) !important;
+  color: var(--momo-text-primary) !important;
+  font-size: 0.82rem !important;
+  text-shadow: none !important;
+}
+
+@supports selector(:has(*)) {
+  .analysis-workbench .card-body:has(> table),
+  .daily-sales-page .card-body:has(> table),
+  .monthly-analysis-page .card-body:has(> table) {
+    overflow-x: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .analysis-page-hero,
+  .daily-sales-hero,
+  .monthly-analysis-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .analysis-page-meta {
+    justify-content: flex-start;
+  }
+
+  .analysis-report-tabs {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    padding-bottom: 10px;
+  }
+
+  .analysis-report-tab {
+    flex: 0 0 auto;
+  }
+
+  .analysis-report-tabs-spacer {
+    display: none;
+  }
+
+  .analysis-workbench,
+  .daily-sales-page,
+  .monthly-analysis-page {
+    font-size: var(--momo-text-body);
+  }
+
+  .analysis-workbench .card-header,
+  .daily-sales-page .card-header,
+  .monthly-analysis-page .card-header {
+    align-items: flex-start !important;
+    gap: 8px;
+  }
+
+  .daily-sales-page .page-header-controls {
+    justify-content: flex-start;
+  }
+
+  .daily-sales-page .calendar-container {
+    padding: 14px !important;
+  }
+
+  .daily-sales-page .calendar-header {
+    align-items: stretch !important;
+  }
+
+  .daily-sales-page .calendar-nav {
+    width: 100%;
+  }
+
+  .daily-sales-page .calendar-nav button {
+    flex: 1 1 0;
+    padding: 0.5rem 0.7rem !important;
+  }
+
+  .daily-sales-page .calendar-grid {
+    min-width: 760px !important;
+  }
+
+  .daily-sales-page .calendar-day {
+    min-height: 122px !important;
+    padding: 10px 9px !important;
+  }
+
+  .daily-sales-page .calendar-day-number {
+    font-size: 1.22rem !important;
+  }
+
+  .daily-sales-page .calendar-day-kpi {
+    font-size: 0.80rem !important;
+  }
+
+  .daily-sales-page .calendar-day-kpi .label,
+  .daily-sales-page .calendar-day-kpi .margin-rate {
+    font-size: 0.75rem !important;
+  }
+
+  .daily-sales-page .calendar-container::after {
+    border: 1px solid var(--momo-border-light) !important;
+    border-radius: 999px !important;
+    background: rgba(255, 252, 246, 0.78) !important;
+    color: var(--momo-text-secondary) !important;
+    font-family: var(--momo-font-family-mono);
+    font-size: 0.72rem !important;
+    font-weight: 800;
+  }
+}
diff --git a/web/static/css/ewoooc-tokens.css b/web/static/css/ewoooc-tokens.css
index 2b529cd..bd1e021 100644
--- a/web/static/css/ewoooc-tokens.css
+++ b/web/static/css/ewoooc-tokens.css
@@ -49,6 +49,12 @@
   --momo-warm-mahogany-soft:rgba(143,69,48,0.12);
   --momo-warm-earth-soft:   rgba(138,90,43,0.12);
 
+  /* 頁面調性：共用 shell 與反白 UI 以此套用各頁暖色 accent */
+  --momo-page-accent:       var(--momo-warm-caramel);
+  --momo-page-accent-dark:  var(--momo-warm-mahogany);
+  --momo-page-accent-soft:  var(--momo-warm-caramel-soft);
+  --momo-page-inverse:      #fff8ee;
+
   /* ===== 標籤色系統（Tag / Chip / Badge 統一規範） =====
    * 規則：
    *   1. 全部留在暖色域（caramel/honey/rust/mahogany/earth + 中性 ink）
@@ -179,11 +185,16 @@
   --momo-text-inverse:      #faf7f0;
   --momo-text-link:         #c96442;
   --momo-text-link-hover:   #8f4530;
+  --momo-text-strong:       var(--momo-text-primary);
+  --momo-text-muted:        var(--momo-text-secondary);
+  --momo-muted:             var(--momo-text-secondary);
+  --momo-paper:             var(--momo-bg-paper);
 
   /* 邊框（暖色調線）*/
   --momo-border:            #2a2520;
   --momo-border-light:      rgba(42,37,32,0.16);
   --momo-border-strong:     rgba(42,37,32,0.42);
+  --momo-border-subtle:     var(--momo-border-light);
   --momo-border-dark:       #2a2520;
   --momo-border-focus:      #c96442;
   --momo-divider:           rgba(42,37,32,0.12);
@@ -205,6 +216,7 @@
   /* 等寬：數據 */
   --momo-font-family-mono:
     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
+  --momo-font-mono:         var(--momo-font-family-mono);
 
   --momo-font-size-xs:      0.75rem;
   --momo-font-size-sm:      0.8125rem;
@@ -238,6 +250,8 @@
   --momo-shadow-lg:         0 12px 40px -8px rgba(26,26,26,0.18), 0 0 0 1px rgba(26,26,26,0.10);
   --momo-shadow-colored:    0 0 0 2px rgba(201,100,66,0.25);
   --momo-shadow-inner:      inset 0 1px 2px 0 rgba(26,26,26,0.08);
+  --momo-shadow-soft:       var(--momo-shadow-sm);
+  --momo-shadow-medium:     var(--momo-shadow-md);
 
   /* ===== 5. Radius（Nothing 風偏方角，僅輕微圓角） ===== */
   --momo-radius-sm:         0.125rem;          /* 2px */
@@ -283,7 +297,7 @@
   background-color: var(--momo-bg-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  letter-spacing: -0.005em;
+  letter-spacing: 0;
 }
 .momo-app *, .momo-app *::before, .momo-app *::after { box-sizing: border-box; }
 .momo-app button:not(.btn):not(.btn-close) {
@@ -297,7 +311,7 @@
 .momo-display {
   font-family: var(--momo-font-display);
   font-feature-settings: "tnum", "ss01";
-  letter-spacing: -0.02em;
+  letter-spacing: 0;
 }
 .momo-mono {
   font-family: var(--momo-font-family-mono);
diff --git a/web/static/js/analysis-chart-theme.js b/web/static/js/analysis-chart-theme.js
new file mode 100644
index 0000000..9fb1a0d
--- /dev/null
+++ b/web/static/js/analysis-chart-theme.js
@@ -0,0 +1,418 @@
+(function () {
+  const root = document.documentElement;
+  const css = (name, fallback) => getComputedStyle(root).getPropertyValue(name).trim() || fallback;
+
+  const theme = {
+    font: css('--momo-font-family', '"Inter", "Noto Sans TC", sans-serif'),
+    mono: css('--momo-font-family-mono', '"JetBrains Mono", monospace'),
+    ink: css('--momo-text-primary', '#2a2520'),
+    muted: css('--momo-text-secondary', '#645c52'),
+    faint: 'rgba(42, 37, 32, 0.10)',
+    paper: css('--momo-bg-paper', '#f3eee2'),
+    elevated: css('--momo-bg-elevated', '#fdfaf3'),
+    accent: css('--momo-warm-caramel', '#c96442'),
+    honey: css('--momo-warm-honey', '#b88416'),
+    rust: css('--momo-warm-rust', '#b5342f'),
+    mahogany: css('--momo-warm-mahogany', '#8f4530'),
+    earth: css('--momo-warm-earth', '#8a5a2b'),
+    success: css('--momo-success', '#2a7a3f'),
+    info: css('--momo-info', '#2d5d80')
+  };
+
+  const palette = [
+    theme.accent,
+    theme.success,
+    theme.honey,
+    theme.mahogany,
+    theme.info,
+    theme.earth,
+    theme.rust,
+    '#6f6256',
+    '#a66a3f',
+    '#576a42',
+    '#9b6f1c',
+    '#5f4638'
+  ];
+
+  const isCompact = () => window.matchMedia && window.matchMedia('(max-width: 768px)').matches;
+  const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+  const coldColorMap = {
+    '#6366f1': theme.accent,
+    '#3b82f6': theme.info,
+    '#8b5cf6': theme.mahogany,
+    '#10b981': theme.success,
+    '#14b8a6': theme.success,
+    '#0ea5e9': theme.info,
+    '#0284c7': theme.info,
+    '#94a3b8': '#8f857a',
+    '#d1d5db': '#c7bcae',
+    '#ec4899': theme.rust,
+    '#ef4444': theme.rust,
+    '#f59e0b': theme.honey
+  };
+
+  const alpha = (hex, amount) => {
+    if (!hex || !hex.startsWith('#') || hex.length < 7) return hex;
+    const n = parseInt(hex.slice(1, 7), 16);
+    const r = (n >> 16) & 255;
+    const g = (n >> 8) & 255;
+    const b = n & 255;
+    return `rgba(${r}, ${g}, ${b}, ${amount})`;
+  };
+
+  function mapColor(color, fallback) {
+    if (typeof color !== 'string') return color || fallback;
+    const key = color.trim().toLowerCase();
+    if (coldColorMap[key]) return coldColorMap[key];
+    return color;
+  }
+
+  function mapPalette(colors) {
+    if (!Array.isArray(colors)) return palette;
+    return colors.map((color, index) => mapColor(color, palette[index % palette.length]));
+  }
+
+  function formatNumber(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value)) return value;
+    return Math.abs(value) >= 10000 ? `${Math.round(value / 10000).toLocaleString()}萬` : value.toLocaleString();
+  }
+
+  function tuneDataset(dataset, index, chartType) {
+    if (!dataset || typeof dataset !== 'object') return;
+    const color = palette[index % palette.length];
+    const type = dataset.type || chartType;
+
+    if (type === 'doughnut' || type === 'pie' || type === 'polarArea') {
+      dataset.backgroundColor = palette.map((item) => alpha(item, 0.82));
+      dataset.borderColor = theme.elevated;
+      dataset.borderWidth = 2;
+      return;
+    }
+
+    if (type === 'treemap' && typeof dataset.backgroundColor === 'function') {
+      return;
+    }
+
+    if (typeof dataset.backgroundColor !== 'function') {
+      dataset.backgroundColor = type === 'line' ? alpha(color, dataset.fill ? 0.16 : 0.08) : alpha(color, 0.72);
+    }
+    if (typeof dataset.borderColor !== 'function') {
+      dataset.borderColor = color;
+    }
+    dataset.borderWidth = dataset.borderWidth || (type === 'line' ? 2 : 1);
+    dataset.borderRadius = dataset.borderRadius ?? (type === 'bar' ? 5 : undefined);
+    dataset.borderSkipped = dataset.borderSkipped ?? (type === 'bar' ? false : undefined);
+    dataset.pointRadius = dataset.pointRadius ?? (type === 'line' ? 2.5 : undefined);
+    dataset.pointHoverRadius = dataset.pointHoverRadius ?? (type === 'line' ? 4 : undefined);
+    dataset.pointBackgroundColor = dataset.pointBackgroundColor || color;
+    dataset.pointBorderColor = dataset.pointBorderColor || theme.elevated;
+    dataset.tension = dataset.tension ?? (type === 'line' ? 0.32 : undefined);
+  }
+
+  function tuneChartConfig(config) {
+    if (!config || typeof config !== 'object') return config;
+    const chartType = config.type || 'bar';
+    const datasets = config.data && Array.isArray(config.data.datasets) ? config.data.datasets : [];
+    datasets.forEach((dataset, index) => tuneDataset(dataset, index, chartType));
+
+    config.options = config.options || {};
+    config.options.responsive = config.options.responsive !== false;
+    config.options.maintainAspectRatio = false;
+    config.options.resizeDelay = config.options.resizeDelay ?? 90;
+    config.options.interaction = {
+      mode: chartType === 'scatter' || chartType === 'bubble' ? 'nearest' : 'index',
+      intersect: chartType === 'scatter' || chartType === 'bubble',
+      ...(config.options.interaction || {})
+    };
+
+    const plugins = config.options.plugins = config.options.plugins || {};
+    plugins.legend = {
+      ...(plugins.legend || {}),
+      labels: {
+        color: theme.muted,
+        boxWidth: 10,
+        boxHeight: 10,
+        borderRadius: 2,
+        padding: 14,
+        font: { family: theme.mono, size: 11, weight: '700' },
+        ...((plugins.legend || {}).labels || {})
+      }
+    };
+    plugins.tooltip = {
+      ...(plugins.tooltip || {}),
+      backgroundColor: 'rgba(253, 250, 243, 0.97)',
+      titleColor: theme.ink,
+      bodyColor: theme.ink,
+      borderColor: alpha(theme.accent, 0.38),
+      borderWidth: 1,
+      cornerRadius: 6,
+      displayColors: true,
+      titleFont: { family: theme.mono, weight: '800', size: 12 },
+      bodyFont: { family: theme.font, weight: '600', size: 12 },
+      padding: 10,
+      callbacks: {
+        label: function (ctx) {
+          const label = ctx.dataset && ctx.dataset.label ? `${ctx.dataset.label}: ` : '';
+          const value = typeof ctx.parsed === 'object' ? (ctx.parsed.y ?? ctx.parsed.x ?? ctx.raw) : ctx.parsed;
+          return `${label}${formatNumber(value)}`;
+        },
+        ...((plugins.tooltip || {}).callbacks || {})
+      }
+    };
+
+    const scales = config.options.scales || {};
+    Object.keys(scales).forEach((key) => {
+      scales[key] = {
+        border: { color: theme.faint, ...(scales[key].border || {}) },
+        grid: { color: theme.faint, tickColor: 'transparent', drawBorder: false, ...(scales[key].grid || {}) },
+        ticks: {
+          color: theme.muted,
+          maxRotation: isCompact() ? 0 : 45,
+          autoSkip: isCompact(),
+          font: { family: theme.mono, size: isCompact() ? 10 : 11, weight: '650' },
+          callback: function (value) {
+            return formatNumber(value);
+          },
+          ...(scales[key].ticks || {})
+        },
+        title: {
+          color: theme.muted,
+          font: { family: theme.font, size: 12, weight: '800' },
+          ...(scales[key].title || {})
+        },
+        ...scales[key]
+      };
+    });
+    config.options.scales = scales;
+    return config;
+  }
+
+  function mergeAxis(axis) {
+    if (!axis) return axis;
+    const tuneOne = (item) => ({
+      ...item,
+      axisLine: {
+        ...(item.axisLine || {}),
+        lineStyle: {
+          ...((item.axisLine || {}).lineStyle || {}),
+          color: mapColor(((item.axisLine || {}).lineStyle || {}).color, theme.faint)
+        }
+      },
+      axisTick: { alignWithLabel: true, ...(item.axisTick || {}) },
+      splitLine: {
+        ...(item.splitLine || {}),
+        lineStyle: {
+          type: 'dashed',
+          ...((item.splitLine || {}).lineStyle || {}),
+          color: mapColor(((item.splitLine || {}).lineStyle || {}).color, theme.faint)
+        }
+      },
+      axisLabel: {
+        ...((item.axisLabel || {})),
+        color: theme.muted,
+        fontFamily: theme.mono,
+        fontSize: isCompact() ? 10 : clamp((item.axisLabel || {}).fontSize || 11, 10, 12),
+        fontWeight: 700,
+        hideOverlap: true,
+        overflow: 'truncate',
+        width: (item.axisLabel || {}).width || (isCompact() ? 72 : 120)
+      },
+      nameTextStyle: {
+        ...((item.nameTextStyle || {})),
+        color: theme.muted,
+        fontFamily: theme.font,
+        fontWeight: 800
+      }
+    });
+    return Array.isArray(axis) ? axis.map(tuneOne) : tuneOne(axis);
+  }
+
+  function tuneItemStyle(itemStyle, index) {
+    const fallback = palette[index % palette.length];
+    if (typeof itemStyle === 'function') return itemStyle;
+    const tuned = { ...(itemStyle || {}) };
+    if (typeof tuned.color === 'string') tuned.color = mapColor(tuned.color, fallback);
+    if (!tuned.color) tuned.color = fallback;
+    tuned.opacity = tuned.opacity ?? 0.82;
+    tuned.borderColor = tuned.borderColor || alpha(theme.elevated, 0.94);
+    tuned.borderWidth = tuned.borderWidth ?? 1;
+    return tuned;
+  }
+
+  function tuneSeries(series) {
+    if (!series) return series;
+    const list = Array.isArray(series) ? series : [series];
+    const compact = isCompact();
+    const tuned = list.map((item, index) => {
+      const type = item.type || 'line';
+      const dataLength = Array.isArray(item.data) ? item.data.length : 0;
+      const label = item.label || {};
+      const shouldShowLabel = label.show === true && !(compact && (dataLength > 8 || type === 'pie' || type === 'heatmap'));
+
+      return {
+        ...item,
+        itemStyle: tuneItemStyle(item.itemStyle, index),
+        lineStyle: type === 'line' ? {
+          ...item.lineStyle,
+          color: mapColor((item.lineStyle || {}).color, palette[index % palette.length]),
+          width: (item.lineStyle || {}).width || 2.4
+        } : item.lineStyle,
+        areaStyle: item.areaStyle ? {
+          ...item.areaStyle,
+          opacity: compact ? 0.08 : 0.12,
+          color: alpha(mapColor((item.areaStyle || {}).color, palette[index % palette.length]), compact ? 0.10 : 0.16)
+        } : item.areaStyle,
+        label: {
+          ...label,
+          color: theme.ink,
+          fontFamily: theme.mono,
+          fontSize: compact ? 10 : clamp(label.fontSize || 11, 10, 12),
+          fontWeight: 800,
+          hideOverlap: true,
+          overflow: 'truncate',
+          show: shouldShowLabel
+        },
+        labelLine: type === 'pie' ? { length: compact ? 8 : 14, length2: compact ? 6 : 10, ...(item.labelLine || {}) } : item.labelLine,
+        emphasis: {
+          focus: type === 'pie' ? 'self' : 'series',
+          ...(item.emphasis || {})
+        },
+        barMaxWidth: type === 'bar' ? (compact ? 18 : (item.barMaxWidth || 28)) : item.barMaxWidth,
+        barCategoryGap: type === 'bar' ? (item.barCategoryGap || '42%') : item.barCategoryGap,
+        symbolSize: type === 'line' ? (item.symbolSize || (compact ? 4 : 5)) : item.symbolSize
+      };
+    });
+    return Array.isArray(series) ? tuned : tuned[0];
+  }
+
+  function tuneEchartsOption(option) {
+    const compact = isCompact();
+    const tuned = {
+      ...option,
+      color: option.color ? mapPalette(option.color) : palette,
+      backgroundColor: 'transparent',
+      textStyle: { color: theme.ink, fontFamily: theme.font, ...(option.textStyle || {}) },
+      grid: {
+        containLabel: true,
+        borderColor: theme.faint,
+        left: compact ? 10 : 28,
+        right: compact ? 12 : 24,
+        top: compact ? 32 : 40,
+        bottom: compact ? 38 : 44,
+        ...(option.grid || {})
+      },
+      tooltip: {
+        backgroundColor: 'rgba(253, 250, 243, 0.97)',
+        borderColor: alpha(theme.accent, 0.36),
+        borderWidth: 1,
+        textStyle: { color: theme.ink, fontFamily: theme.font, fontWeight: 650 },
+        extraCssText: 'box-shadow:0 10px 24px rgba(42,37,32,.12);border-radius:6px;',
+        ...(option.tooltip || {})
+      },
+      legend: {
+        ...(option.legend || {}),
+        type: compact ? 'scroll' : ((option.legend || {}).type || 'plain'),
+        textStyle: {
+          ...((option.legend || {}).textStyle || {}),
+          color: theme.muted,
+          fontFamily: theme.mono,
+          fontWeight: 700,
+          fontSize: compact ? 10 : clamp(((option.legend || {}).textStyle || {}).fontSize || 11, 10, 12)
+        },
+        itemWidth: compact ? 10 : 12,
+        itemHeight: compact ? 7 : 8,
+        pageIconColor: theme.accent,
+        pageTextStyle: { ...((option.legend || {}).pageTextStyle || {}), color: theme.muted, fontFamily: theme.mono }
+      },
+      title: Array.isArray(option.title)
+        ? option.title.map((title) => ({ ...title, textStyle: { ...((title || {}).textStyle || {}), color: theme.ink, fontFamily: theme.font, fontWeight: 800 } }))
+        : option.title ? { ...option.title, textStyle: { ...((option.title || {}).textStyle || {}), color: theme.ink, fontFamily: theme.font, fontWeight: 800 } } : option.title,
+      xAxis: mergeAxis(option.xAxis),
+      yAxis: mergeAxis(option.yAxis),
+      series: tuneSeries(option.series),
+      visualMap: option.visualMap ? {
+        ...option.visualMap,
+        inRange: { ...((option.visualMap || {}).inRange || {}), color: ['#fbf1d3', '#eac26b', theme.honey, theme.accent, theme.mahogany] },
+        textStyle: { ...((option.visualMap || {}).textStyle || {}), color: theme.muted, fontFamily: theme.mono, fontWeight: 700 },
+        itemWidth: compact ? 12 : 16,
+        itemHeight: compact ? 84 : 120
+      } : option.visualMap
+    };
+    return tuned;
+  }
+
+  const dotMatrixPlugin = {
+    id: 'ewooocDotMatrix',
+    beforeDraw(chart) {
+      const area = chart.chartArea;
+      if (!area) return;
+      const ctx = chart.ctx;
+      ctx.save();
+      ctx.fillStyle = 'rgba(253, 250, 243, 0.72)';
+      ctx.fillRect(area.left, area.top, area.right - area.left, area.bottom - area.top);
+      ctx.fillStyle = 'rgba(42, 37, 32, 0.055)';
+      for (let x = Math.floor(area.left) + 8; x < area.right; x += 14) {
+        for (let y = Math.floor(area.top) + 8; y < area.bottom; y += 14) {
+          ctx.fillRect(x, y, 1, 1);
+        }
+      }
+      ctx.restore();
+    }
+  };
+
+  function installChartJsTheme() {
+    if (!window.Chart || window.Chart.__ewooocThemed) return;
+    const NativeChart = window.Chart;
+    if (NativeChart.register) NativeChart.register(dotMatrixPlugin);
+    NativeChart.defaults.font.family = theme.font;
+    NativeChart.defaults.font.size = 12;
+    NativeChart.defaults.color = theme.muted;
+
+    function ThemedChart(item, config) {
+      return new NativeChart(item, tuneChartConfig(config));
+    }
+    for (const key of Reflect.ownKeys(NativeChart)) {
+      if (['length', 'name', 'prototype'].includes(key)) continue;
+      try {
+        Object.defineProperty(ThemedChart, key, Object.getOwnPropertyDescriptor(NativeChart, key));
+      } catch (error) {}
+    }
+    ThemedChart.prototype = NativeChart.prototype;
+    Object.setPrototypeOf(ThemedChart, NativeChart);
+    ThemedChart.__ewooocThemed = true;
+    ThemedChart.__native = NativeChart;
+    window.Chart = ThemedChart;
+  }
+
+  function installEchartsTheme() {
+    if (!window.echarts || window.echarts.__ewooocThemed) return;
+    const echarts = window.echarts;
+    const nativeInit = echarts.init.bind(echarts);
+    echarts.init = function (dom, themeName, opts) {
+      const chart = nativeInit(dom, themeName || null, opts);
+      const nativeSetOption = chart.setOption.bind(chart);
+      chart.setOption = function (option, notMerge, lazyUpdate) {
+        return nativeSetOption(tuneEchartsOption(option || {}), notMerge, lazyUpdate);
+      };
+      if (window.ResizeObserver && dom) {
+        const observer = new ResizeObserver(() => window.requestAnimationFrame(() => chart.resize()));
+        observer.observe(dom);
+      }
+      if (window.IntersectionObserver && dom) {
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) window.requestAnimationFrame(() => chart.resize());
+          });
+        }, { threshold: 0.1 });
+        observer.observe(dom);
+      }
+      window.requestAnimationFrame(() => chart.resize());
+      return chart;
+    };
+    echarts.__ewooocThemed = true;
+  }
+
+  window.EwoooCChartTheme = { palette, theme, tuneChartConfig, installChartJsTheme, installEchartsTheme };
+  installChartJsTheme();
+  installEchartsTheme();
+})();