移除城市快捷跳转栏 sticky 固定效果，更新 LGBM 模型至 1247 样本

scan-ai-city-jumpbar 不再吸附顶部，anchor scroll-margin 同步清理。
LGBM 模型用 prod DB 重训练：1247 样本 → 验证 MAE 2.63°C vs DEB 2.75°C。

Tested: tsc + ruff 全过

.agent/skills/doc_refresher/SKILL.md

@@ -1,27 +0,0 @@
----
-name: doc_refresher
-description: 自动同步和刷新项目文档，确保 Markdown 文件与当前代码功能状态完全一致。
----
-
-# Documentation Refresher Skill
-
-此技能用于在项目架构发生重大调整（如功能下线、重心转移）后，自动重写和更新项目的所有 Markdown 文档。
-
-## 核心任务
-
-1. **代码扫描**：分析 `run.py` 和核心逻辑，识别哪些功能是“活跃的”，哪些功能是“暂停/移除的”。
-2. **术语统一**：确保所有文档使用一致的语气（例如从“监控机器人”转向“天气查询机器人”）。
-3. **多语言同步**：确保 `_ZH.md` 与英文版文档内容同步。
-
-## 更新准则
-
-- **状态准确性**：如果功能已在代码中被注释（如监控引擎、模拟交易），文档必须明确标注为“已暂停”或直接移除。
-- **示例更新**：更新文档中的 Telegram 指令示例，移除已下线的指令（如 `/signal`, `/portfolio`）。
-- **流程简化**：针对当前“天气查询模式”，简化安装和运行流程说明。
-
-## 使用流程
-
-1. 查看 `run.py` 确认当前运行模式。
-2. 遍历项目根目录下所有的 `.md` 文件。
-3. 对每个文件内容进行重构，保持格式美观。
-4. 校验多语言版本的一致性。

.claude/settings.local.json

@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Bash(npm --prefix \"/e/web/PolyWeather/frontend\" run build)",
-      "mcp__Claude_Preview__preview_start"
+      "mcp__Claude_Preview__preview_start",
+      "Bash(git:*)"
     ]
   }
 }

.env.example

@@ -136,12 +136,19 @@ POLYWEATHER_GROQ_COMMENTARY_MODEL=openai/gpt-oss-20b
 POLYWEATHER_GROQ_COMMENTARY_TIMEOUT_SEC=8
 POLYWEATHER_GROQ_COMMENTARY_CACHE_TTL_SEC=1800
 
-# Optional DeepSeek V4-Pro market scan review for Pro users
+# Optional OpenAI-compatible market scan review for Pro users
+# Temporary default provider: MiMo via https://token-plan-cn.xiaomimimo.com/v1.
 POLYWEATHER_SCAN_AI_ENABLED=false
-POLYWEATHER_DEEPSEEK_API_KEY=
-POLYWEATHER_DEEPSEEK_BASE_URL=https://api.deepseek.com
-POLYWEATHER_SCAN_AI_MODEL=deepseek-v4-flash
-POLYWEATHER_SCAN_CITY_AI_MODEL=deepseek-v4-flash
+POLYWEATHER_SCAN_AI_API_KEY=
+POLYWEATHER_SCAN_AI_PROVIDER=mimo
+POLYWEATHER_SCAN_AI_PROVIDER_LABEL=MiMo
+POLYWEATHER_SCAN_AI_BASE_URL=https://token-plan-cn.xiaomimimo.com/v1
+POLYWEATHER_SCAN_AI_MODEL=mimo-v2.5-pro
+POLYWEATHER_SCAN_CITY_AI_MODEL=mimo-v2.5-pro
+# Backward-compatible legacy DeepSeek variables are still read if the generic
+# POLYWEATHER_SCAN_AI_* variables are unset.
+# POLYWEATHER_DEEPSEEK_API_KEY=
+# POLYWEATHER_DEEPSEEK_BASE_URL=https://api.deepseek.com
 POLYWEATHER_SCAN_AI_TIMEOUT_SEC=18
 POLYWEATHER_SCAN_CITY_AI_TIMEOUT_SEC=30
 POLYWEATHER_SCAN_CITY_AI_RETRY_ON_STREAM_PARSE_ERROR=false
@@ -202,9 +209,11 @@ POLYMARKET_MARKET_SCAN_ENABLED=true
 POLYMARKET_GAMMA_URL=https://gamma-api.polymarket.com
 POLYMARKET_CLOB_URL=https://clob.polymarket.com
 POLYMARKET_CHAIN_ID=137
-POLYMARKET_HTTP_TIMEOUT_SEC=8
+POLYMARKET_HTTP_TIMEOUT_SEC=20
 POLYMARKET_MARKET_CACHE_TTL_SEC=60
 POLYMARKET_PRICE_CACHE_TTL_SEC=30
+# false = fetch CLOB book/depth for orderbook analysis; true = price-only, lighter but no book levels
+POLYMARKET_FAST_PRICE_ONLY=false
 POLYWEATHER_MARKET_SCAN_PAYLOAD_TTL_SEC=30
 POLYMARKET_WS_PRICE_ENABLED=false
 POLYMARKET_WS_MARKET_URL=wss://ws-subscriptions-clob.polymarket.com/ws/market

.github/workflows/ci.yml

@@ -48,6 +48,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Business state tests
+        run: npm run test:business
+
       - name: Build
         run: npm run build
 

CHANGELOG.md

@@ -1,11 +1,30 @@
 # Changelog
 
-## Unreleased
+## 1.5.5 - 2026-04-27
 
+- Dashboard 新增 v1.5.5 升级公告，提示所有会员已额外延长 7 天，并集中说明 DeepSeek 机场报文解读、日历行动视图、本地时间峰值窗口和 AI 证据护栏
+- 城市决策卡空状态与市场不可用文案产品化：将“未接入/缺失”改为“市场价格暂不可用，天气判断仍可参考”，避免用户误以为系统故障
+- 城市决策卡新增“为什么推荐/为什么不推荐”短句，优先解释实测突破、峰值窗口已过、METAR 过旧、市场暂不可用或模型一致等关键原因
+- 移动端城市决策卡前置当前温度、预测高点和峰值时间；长 AI 解读在手机端默认折叠，可展开查看，市场价格单独成行展示
+- 新增 Qingdao / 青岛城市，结算锚点接入 Wunderground 青岛胶东国际机场 `ZSQD` 历史页，并补齐别名、时区、预热、官方来源和前端地区归类
+- 城市决策卡顶部状态标签收口为 2-3 个高优先级信号，优先展示“实测突破 / 峰值窗口已过 / METAR 过旧 / AI 解读中 / 市场价暂不可用 / 模型高度一致 / 需要等待下一报文”，让用户第一眼看到重点
+- 城市决策卡 AI 机场报文区明确拆分“快速判断已完成，AI 正在补充机场报文细节… / AI 机场报文解读已完成 / AI 解读未完整返回，当前使用规则证据”三种状态，减少 fallback 与流式返回造成的误解
+- 城市决策卡新增“数据新鲜度”区块，分别展示 METAR/官方观测、模型、市场价格和 AI 状态；过旧观测会标明“仅作背景参考”
+- 日历视图升级为行动视图，按“现在可看 / 1-3 小时内 / 今天稍后 / 已过峰值，等待确认”分组，并为每个城市显示一句核心原因
 - 城市决策卡新增 AI 机场报文解读缓存说明：页面内存缓存保留 loading / 流式片段 / 最终结果，`localStorage` 保存最终成功 payload，后端 AI 缓存不再因 `local_time` 变化失效
+- 城市决策卡兜底文案明确标记“快速证据模式”，避免在 DeepSeek 未完整返回时误写成“AI 机场报文解读正常”
+- 城市决策卡流式 AI 解读改为只请求 METAR/官方观测核心解读与判断依据，最高温中枢、模型一致性和风险清单由后端规则补齐，减少等待时间
+- 城市决策卡兜底判断新增实测突破识别：当最新 METAR/观测已高于 DEB 中枢或模型上沿时，改为提示最高温中枢需要上修
+- 城市决策卡兜底判断补充实测偏低和峰值窗口已过分支：峰后未追上模型时提示下修压力，峰前偏低时只提示等待确认
+- 城市决策卡新增过旧 METAR/观测识别：过旧报文只作为背景参考，不再触发强实况锚点、上修或下修判断；AI 缓存键同步纳入观测时间与 stale 状态
+- 城市决策卡新增 AI 结果后处理护栏：完整 DeepSeek 返回若与过旧观测、实测突破、峰后下修等确定性证据冲突，会以后端规则覆盖关键数值和结论文案
+- 城市决策卡新增状态标签与数据新鲜度提示，直接标出 AI 是否完成、市场价格是否同步、METAR/官方观测是否过旧或已突破模型区间，减少用户等待和误读
+- 后端 Scan Terminal 代码拆出 `scan_city_ai_helpers.py`，将城市 AI JSON 解析、fallback 文案、schema completion 与证据护栏从主服务文件中剥离，降低后续维护成本
 - 城市决策卡市场层改用完整 `all_buckets` 并严格识别 exact / range / or higher / or lower 温度桶方向，避免最高温中枢错配到不合理尾部桶
 - 温度桶标签统一规范化 `C/F/°C/°F`，修复 `31°°C` 这类重复单位展示
 - 决策卡展示文案将“概率差”收口为“模型-市场差”，明确口径为 `模型概率 - 市场隐含概率`
+- Scan Terminal 新增日历视图：按城市 + 日期去重、按峰值窗口倒计时分组，并在卡片中同时展示用户电脑本地时间与城市窗口
+- 日历视图只保留未来 12 小时内或峰后 3 小时内的可行动窗口，避免 London 这类距离峰值过久的城市过早占用日历
 - README、前端 README、API 文档和网页 `/docs` 文档同步补充城市决策卡、AI 机场报文解读组成、缓存策略和市场层解释
 
 ## 1.5.4 - 2026-04-18

CLAUDE.md

@@ -0,0 +1,111 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+PolyWeather Pro — a production weather-intelligence stack for temperature settlement markets. Aggregates observations and forecasts for 52 monitored cities globally, blends multi-model highs using DEB (Dynamic Error Balancing), generates calibrated probability buckets for settlement, maps weather to Polymarket quotes for mispricing scans, and serves both a Next.js dashboard (Vercel) and a Telegram bot.
+
+## Architecture
+
+```
+Users (Web / Telegram) → Next.js Frontend (Vercel) → FastAPI /web/app.py
+                                                      ↓
+                                            Weather Collector (METAR, TAF, Open-Meteo, country networks)
+                                                      ↓
+                                            Analysis (DEB + Trend + Probability + Market Scan)
+                                                      ↓
+                                            Payment Layer (Intent + Event + Confirm Loop)
+```
+
+- **Backend**: FastAPI on port 8000 (`web/app.py` → `web/core.py` + `web/routes.py` + `web/analysis_service.py`)
+- **Frontend**: Next.js 15 + React 19 + TypeScript + Tailwind CSS 3 on port 3000 (dev)
+- **Bot**: Telegram bot via `bot_listener.py` → `src/bot/`
+- **Shared analysis core** in `src/` is used by both web API and bot
+- **Scan Terminal**: Real-time city opportunity scanning (`web/scan_terminal_service.py` and `frontend/components/dashboard/scan-terminal/`)
+- **Dashboard**: Main dashboard with interactive map, city sidebar, detail panels, and probability views
+
+## Commands
+
+### Frontend (dev on port 3000)
+```bash
+cd frontend
+npm ci
+npm run dev        # Next.js dev server
+npm run build      # Production build
+npm run lint       # ESLint via next lint
+```
+
+### Backend (dev on port 8000)
+```bash
+uvicorn web.app:app --reload --host 0.0.0.0 --port 8000
+```
+
+### Telegram Bot
+```bash
+python bot_listener.py
+# or via wrapper:
+python run.py
+```
+
+### Docker (production-like stack)
+```bash
+docker compose up -d --build                    # bot + web API
+docker compose --profile workers up -d          # + prewarm worker
+docker compose --profile monitoring up -d       # + Prometheus/Grafana/Alertmanager
+```
+
+### Python tests
+```bash
+pytest tests/                           # all tests
+pytest tests/test_web_observability.py  # single test file
+```
+
+### Lint & Format
+```bash
+ruff check .        # Python lint (pycodestyle + Pyflakes, line-length 88)
+ruff format .       # Python format (Black-compatible, double quotes)
+```
+
+### Health & Ops checks
+```bash
+curl http://127.0.0.1:8000/healthz
+curl http://127.0.0.1:8000/api/system/status
+curl http://127.0.0.1:8000/metrics
+```
+
+## Key Directories
+
+| Directory | Purpose |
+|-----------|---------|
+| `src/data_collection/` | Weather sources (METAR, TAF, Open-Meteo, JMA, KMA, MGM, NMC, Russia stations, settlement sources), city registry (52 cities), Polymarket readonly layer |
+| `src/analysis/` | DEB algorithm, trend engine, probability calibration (EMOS/LGBM), market alert engine, settlement rounding |
+| `src/models/` | LightGBM daily-high model training and feature engineering |
+| `src/payments/` | Onchain checkout, event listener, confirm loop, contract audit |
+| `src/bot/` | Telegram bot handlers and orchestrator |
+| `src/database/` | SQLite-based runtime state, DB manager, daily/truth/training feature repositories |
+| `web/` | FastAPI app, routes (~65K), analysis service (~130K), scan terminal service (~56K), AI scan modules |
+| `frontend/app/` | Next.js App Router pages (dashboard, account, auth, docs, ops, probabilities, scan) |
+| `frontend/components/dashboard/` | Dashboard UI components (map, sidebar, detail panel, modals, charts, scan terminal) |
+| `frontend/lib/` | Shared client logic: types, API client, chart utils, i18n, dashboard utils |
+| `frontend/hooks/` | React hooks: dashboard store (global state), Leaflet map, chart helper |
+| `scripts/` | Operational scripts: probability calibration training, backfills, payment reconciliation, prewarm worker |
+| `config/` | YAML config (city list, weather settings, logging) |
+| `docs/` | Bilingual product & technical docs |
+| `monitoring/` | Prometheus/Grafana/Alertmanager configs |
+
+## Key Technical Details
+
+- **Python version**: 3.11 (target), type hints use `from __future__ import annotations` in most modules
+- **Package manager**: pip (requirements.txt) + uv cache is present but not the primary tool; no pyproject.toml build system defined
+- **Frontend package manager**: npm
+- **State storage**: SQLite primary path (set via `POLYWEATHER_STATE_STORAGE_MODE=sqlite` + `POLYWEATHER_DB_PATH`). Legacy JSON/JSONL files are migration/fallback only.
+- **Runtime data**: External dir recommended (`POLYWEATHER_RUNTIME_DATA_DIR=/var/lib/polyweather`) to avoid git conflicts
+- **Auth gating** (frontend middleware): Token-based (`POLYWEATHER_DASHBOARD_ACCESS_TOKEN`) or Supabase session-based (`POLYWEATHER_AUTH_ENABLED`). Local dev hosts bypass auth.
+- **CORS**: Allowed origins from `WEB_CORS_ORIGINS` env var (defaults: localhost:3000, polyweather-pro.vercel.app)
+- **EMOS/CRPS calibration**: Trainable but production should use `legacy` or `emos_shadow` engine; `emos_primary` only after local evaluation + manual rollout
+- **API proxy**: Frontend uses Next.js rewrites to proxy `/api/*` to the FastAPI backend; see `frontend/lib/api-proxy.ts` and `frontend/lib/backend-api.ts`
+
+## Commit Convention
+
+This repo uses the **Lore Commit Protocol** — structured decision records with git trailers (`Constraint:`, `Rejected:`, `Confidence:`, `Scope-risk:`, `Directive:`, `Tested:`, `Not-tested:`). Intent line first (why, not what).

README.md

@@ -97,7 +97,7 @@ flowchart LR
 ## Monitored Cities (52)
 
 - Europe / Middle East / Africa: Ankara, Istanbul, Moscow, London, Paris, Munich, Milan, Warsaw, Madrid, Tel Aviv, Amsterdam, Helsinki, Lagos, Cape Town, Jeddah
-- APAC: Seoul, Busan, Hong Kong, Lau Fau Shan, Taipei, Shanghai, Beijing, Wuhan, Chengdu, Chongqing, Shenzhen, Guangzhou, Singapore, Tokyo, Kuala Lumpur, Jakarta, Manila, Wellington
+- APAC: Seoul, Busan, Hong Kong, Lau Fau Shan, Taipei, Shanghai, Beijing, Qingdao, Wuhan, Chengdu, Chongqing, Shenzhen, Guangzhou, Singapore, Tokyo, Kuala Lumpur, Jakarta, Manila, Wellington
 - Americas: Toronto, New York, Los Angeles, San Francisco, Aurora, Austin, Houston, Chicago, Dallas, Miami, Atlanta, Seattle, Mexico City, Buenos Aires, Sao Paulo, Panama City
 - South Asia: Lucknow, Karachi, Masroor Air Base
 

VERSION

@@ -1 +1 @@
-1.5.4
+1.5.5

artifacts/models/lgbm_daily_high_schema.json

@@ -42,25 +42,25 @@
     "nws"
   ],
   "model_path": "artifacts\\models\\lgbm_daily_high.txt",
-  "sample_count": 20,
-  "train_count": 8,
-  "validation_count": 12,
+  "sample_count": 1247,
+  "train_count": 998,
+  "validation_count": 249,
   "metrics": {
     "validation": {
-      "sample_count": 12,
-      "lgbm_mae": 5.867,
-      "deb_mae": 1.825,
-      "best_single_mae": 0.567,
-      "median_mae": 1.7
+      "sample_count": 249,
+      "lgbm_mae": 2.626,
+      "deb_mae": 2.745,
+      "best_single_mae": 1.733,
+      "median_mae": 2.866
     },
     "full_sample": {
-      "sample_count": 20,
-      "lgbm_mae": 2.66,
-      "deb_mae": 1.68,
-      "best_single_mae": 0.775,
-      "median_mae": 1.695
+      "sample_count": 1247,
+      "lgbm_mae": 0.953,
+      "deb_mae": 1.872,
+      "best_single_mae": 1.052,
+      "median_mae": 1.952
     }
   },
-  "generated_at": "2026-04-18T19:27:39.228210Z",
-  "trained_at": "2026-04-18T19:27:39.228210Z"
+  "generated_at": "2026-05-06T10:45:04.319587Z",
+  "trained_at": "2026-05-06T10:45:04.319587Z"
 }

docs/CONFIGURATION_ZH.md

@@ -270,6 +270,13 @@ POLYWEATHER_GROQ_COMMENTARY_ENABLED=false
 POLYWEATHER_GROQ_COMMENTARY_MODEL=openai/gpt-oss-20b
 POLYWEATHER_GROQ_COMMENTARY_TIMEOUT_SEC=8
 POLYWEATHER_GROQ_COMMENTARY_CACHE_TTL_SEC=1800
+POLYWEATHER_SCAN_AI_ENABLED=false
+POLYWEATHER_SCAN_AI_API_KEY=...
+POLYWEATHER_SCAN_AI_PROVIDER=mimo
+POLYWEATHER_SCAN_AI_PROVIDER_LABEL=MiMo
+POLYWEATHER_SCAN_AI_BASE_URL=https://token-plan-cn.xiaomimimo.com/v1
+POLYWEATHER_SCAN_AI_MODEL=mimo-v2.5-pro
+POLYWEATHER_SCAN_CITY_AI_MODEL=mimo-v2.5-pro
 ```
 
 说明：
@@ -280,7 +287,8 @@ POLYWEATHER_GROQ_COMMENTARY_CACHE_TTL_SEC=1800
 - `docker-compose.yml` 会把这个目录同时挂载到容器内的 `/var/lib/polyweather` 和 `/app/data`，兼容现有缓存与 SQLite 路径。
 - `POLYWEATHER_STATE_STORAGE_MODE` 当前线上推荐直接使用 `sqlite`。
 - `POLYWEATHER_PAYMENT_RPC_URLS` 支持逗号分隔多个 RPC；如果暂时只用单 RPC，也可以继续只配 `POLYWEATHER_PAYMENT_RPC_URL`。
-- 机器人市场监控当前以 `关注清单` 为主，按固定间隔主动推送。
+- 机器人市场监控包含 `关键提醒` 与 `关注清单`：关键提醒逐城判断并受冷却控制，关注清单每轮先扫描完整城市列表，再按全局 Top N 推送；同一轮已经触发关键提醒的城市不会重复出现在关注清单里。
+- `POLYWEATHER_SCAN_AI_*` 走 OpenAI-compatible `/chat/completions`；当前临时默认 MiMo，可用 `POLYWEATHER_SCAN_AI_BASE_URL` 与 `POLYWEATHER_SCAN_AI_MODEL` 随时切回其他兼容 provider。
 - `TELEGRAM_MARKET_FOCUS_DIGEST_INTERVAL_SEC` 表示主动推送间隔，默认 `1800` 秒（30 分钟）。
 - `POLYMARKET_WALLET_ACTIVITY_ENABLED` 已退役，保留为 `false` 即可，不建议再启用钱包异动监听。
 - `POLYWEATHER_DASHBOARD_PREWARM_ENABLED=true` 时，建议同时启用独立 worker 或 bot 内嵌预热线程。
@@ -346,7 +354,7 @@ POLYMARKET_WALLET_ACTIVITY_ENABLED=false
 说明：
 
 - `TELEGRAM_ALERT_MISPRICING_ONLY=true` 表示关键提醒优先围绕错价/市场触发，不把机器人做成泛通知器。
-- `TELEGRAM_MARKET_FOCUS_DIGEST_INTERVAL_SEC=1800` 表示频道每 30 分钟主动推送一轮机会清单。
+- `TELEGRAM_MARKET_FOCUS_DIGEST_INTERVAL_SEC=1800` 表示频道每 30 分钟主动推送一轮全局机会清单；每轮会先扫描完整 `TELEGRAM_ALERT_CITIES`，再选 Top N。
 - `TELEGRAM_MARKET_FOCUS_DIGEST_TOP_N=5` 建议先保持较小，避免机器人一次推太多城市。
 - `POLYMARKET_WALLET_ACTIVITY_ENABLED=false` 表示停用旧的钱包异动监听，统一收敛到市场监控。
 

docs/deep-research-report.md

@@ -54,7 +54,7 @@ flowchart TB
 
  subgraph API
  FAST[FastAPI<br/>web/app.py]
- LLM[City AI stream<br/>DeepSeek-compatible provider]
+ LLM[City AI stream<br/>OpenAI-compatible provider]
  end
 
  subgraph Data
@@ -124,7 +124,7 @@ Scan Terminal 的城市决策卡现在承担“从天气分析到市场动作解
 
 1. **地图点击与 pinned city**：免费/付费入口都会先把城市加入决策卡；未付费用户若权限不足，仍应保留卡片承载升级/限制提示，而不是点击后无反馈。
 2. **full detail hydration**：卡片请求城市 full detail，拿到 DEB、当前/历史实测、多模型区间与最新 METAR。现阶段 detail hydration 仍偏保守串行，优先保障后端数据源稳定；真正消耗 LLM 的 AI 解读另行限流。
-3. **AI 机场报文解读**：前端最多同时保留 2 条城市 AI stream，第三个及以后城市会进入队列并展示排队提示，避免多个 DeepSeek stream 同时竞争导致第三城/第四城解析失败。后端城市 AI 配置建议为 `POLYWEATHER_SCAN_CITY_AI_MODEL=deepseek-v4-flash`、`POLYWEATHER_SCAN_CITY_AI_TIMEOUT_SEC=30`、`POLYWEATHER_SCAN_CITY_AI_MAX_TOKENS=900`、`POLYWEATHER_SCAN_CITY_AI_RETRY_ON_STREAM_PARSE_ERROR=true`。
+3. **AI 机场报文解读**：前端最多同时保留 2 条城市 AI stream，第三个及以后城市会进入队列并展示排队提示，避免多个 provider stream 同时竞争导致第三城/第四城解析失败。当前临时使用 MiMo：`POLYWEATHER_SCAN_AI_BASE_URL=https://token-plan-cn.xiaomimimo.com/v1`、`POLYWEATHER_SCAN_CITY_AI_MODEL=mimo-v2.5-pro`；其他后端城市 AI 配置建议为 `POLYWEATHER_SCAN_CITY_AI_TIMEOUT_SEC=30`、`POLYWEATHER_SCAN_CITY_AI_MAX_TOKENS=900`、`POLYWEATHER_SCAN_CITY_AI_RETRY_ON_STREAM_PARSE_ERROR=true`。
 4. **缓存策略**：页面内存缓存保留 loading/stream/final 状态，切换选项卡返回时不应空白重拉；localStorage 持久化最终成功、非 degraded 的 payload；后端 city AI cache key 已移除当前 `local_time` 干扰，主要按城市、日期与 METAR signature 失效。
 5. **市场桶匹配**：城市市场扫描必须使用 full `all_buckets`，按温度 exact/range/“or higher”/“or lower” 方向严格匹配；不再用宽松 ±8°C fallback，以避免拿到 16°C 之类错误桶。前端展示统一使用“模型-市场差”，即 `model_probability - market_implied_probability`，并修复温度单位重复渲染（如 `31°°C`）。
 
@@ -166,7 +166,7 @@ Web/Telegram 请求 → FastAPI 调用采集器抓取/复用缓存 → 分析引
 **运行态状态/缓存与核心离线链路的 SQLite 收口已完成**：`daily_records`、`telegram_alert_state`、`probability_training_snapshots`、`open_meteo` 缓存已经支持并在生产中主读 SQLite，迁移/校验脚本可用；进一步地，在临时移除 `data/*.json` / `data/*.jsonl` 后，训练集导出、概率拟合、评估报告、shadow report 和关键 backfill 脚本已验证仍可运行。当前 legacy 文件路径主要是显式回退入口，而不再是默认主输入。
 **历史真值治理已从设计缺陷修复到可追溯运行**：`daily_records` 继续作为近 14 天运行态缓存，但已经不再承担长期监督真值职责；项目新增了永久真值表、真值 revision 审计表和长期训练特征表，并为 `Taipei` / `Shenzhen` 补上了历史页面回填链路。当前风险已不再是“监督真值会不会继续被 14 天裁剪吞掉”，而是“历史长期特征能否持续积累到足够支撑 EMOS/LGBM 重新评估”。
 **第三方服务合规与稳定性风险**：
-项目强依赖外部 API（Open-Meteo、AviationWeather、NWS、HKO、CWA、Polymarket、Supabase）以及城市 AI provider（DeepSeek-compatible stream）。其中 AviationWeather Data API 有明确速率限制；Polymarket 官方说明 Gamma/Data/CLOB 三套 API 分属不同域，CLOB 交易端点需鉴权且策略可能变化；Supabase 明确强调 `service_role`/secret keys 绝不可暴露。若缺乏集中治理（重试/退避/熔断/降级/配额监控/密钥轮换），稳定性与合规不可控。城市 AI 解读已经通过前端 2 并发队列、30s timeout、stream parse retry 与缓存 key 稳定化降低第三/第四城市失败概率，但仍需持续记录 stream duration、cache hit、retry、degraded 与 queue depth。
+项目强依赖外部 API（Open-Meteo、AviationWeather、NWS、HKO、CWA、Polymarket、Supabase）以及城市 AI provider（OpenAI-compatible stream，当前临时 MiMo）。其中 AviationWeather Data API 有明确速率限制；Polymarket 官方说明 Gamma/Data/CLOB 三套 API 分属不同域，CLOB 交易端点需鉴权且策略可能变化；Supabase 明确强调 `service_role`/secret keys 绝不可暴露。若缺乏集中治理（重试/退避/熔断/降级/配额监控/密钥轮换），稳定性与合规不可控。城市 AI 解读已经通过前端 2 并发队列、30s timeout、stream parse retry 与缓存 key 稳定化降低第三/第四城市失败概率，但仍需持续记录 stream duration、cache hit、retry、degraded 与 queue depth。
 **可观测性最小闭环已完成，但监控深度仍待加强**：项目现在已有 `/healthz`、`/api/system/status`、`/metrics`，并已补齐 Prometheus 抓取、Alertmanager 规则、Grafana 面板、Telegram relay 与巡检脚本。与此同时，`/ops` 已经逐步演进为后台管理台而不只是状态页：除支付、会员、用户与 EMOS 门禁外，还新增了训练数据治理卡片、城市覆盖矩阵，以及 `/ops/truth-history` 这种可直接查询 `actual_high / settlement_source / station_code / truth_version / updated_by / updated_at` 的真值表浏览页。当前缺口不再是“有没有外部监控”，而是节点级资源、数据库体积趋势、更细粒度支付指标、按城市/来源拆分的业务 SLA，以及是否需要进一步补 `truth revision` 明细页、趋势图和运营日报。
 **EMOS 已完成工程接入，但未完成生产发布**：EMOS/CRPS 校准、shadow 观测、rollout report、上线门禁都已实现；当前真实门禁结果为 `hold`，阻塞原因是 shadow bucket brier 明显退化。因此概率引擎标准化并非未做，而是“工程完成、发布未通过”。
 **许可证/商业使用的潜在冲突点**：仓库自身现为 `AGPL-3.0-only`，但如果未来尝试引入外部神经天气模型，仍需单独核验第三方代码与权重的商用条件：GraphCast 仓库代码 Apache-2.0，但权重使用 CC BY-NC-SA 4.0（非商业），Pangu-Weather 权重同样 BY-NC-SA 且明确禁止商业用途；不加区分地把这些模型用于付费产品会留下法律风险。
@@ -263,7 +263,7 @@ PolyWeather 的评测应围绕“结算场景”而非传统数值天气预报
 
 ### 主要风险与缓解策略
 
-**外部 API / AI provider 速率限制与格式变更**：AviationWeather 明确 rate limit 与建议使用 cache 文件；Open-Meteo 也可能在不同端点策略上变化；DeepSeek-compatible city AI stream 可能出现 timeout、stream JSON 截断或并发竞争。缓解：统一“请求预算”与退避/熔断；关键响应做 schema 校验与回放测试；对高频数据优先拉取官方 cache/批量接口（若可用）；城市 AI 保持小并发队列、30s timeout、stream parse retry、页面内存缓存与 degraded fallback。
+**外部 API / AI provider 速率限制与格式变更**：AviationWeather 明确 rate limit 与建议使用 cache 文件；Open-Meteo 也可能在不同端点策略上变化；OpenAI-compatible city AI stream 可能出现 timeout、stream JSON 截断或并发竞争。缓解：统一“请求预算”与退避/熔断；关键响应做 schema 校验与回放测试；对高频数据优先拉取官方 cache/批量接口（若可用）；城市 AI 保持小并发队列、30s timeout、stream parse retry、页面内存缓存与 degraded fallback。
 **密钥泄露与权限滥用**：Supabase 明确强调 `service_role` 属高权限密钥，绝不可出现在前端或公开环境。缓解：密钥分级、CI secret scan、运行时最小权限、日志脱敏。
 **支付链路最终一致性与链上不确定性**：链上事件索引延迟、RPC 不稳定、交易确认数不足都会导致误判。当前项目已经补齐“事件监听 + 确认补单”双路径、事件重放脚本、SQLite 审计事件与多 RPC fallback；现阶段的主要剩余风险不再是“没有防护”，而是链上合约仍为最小实现，owner 为单地址管理，且没有 pause 开关与 SafeERC20。
 **引入外部神经天气模型的商业合规风险**：GraphCast/Pangu-Weather 的权重许可均带非商业限制（CC BY-NC-SA/BY-NC-SA）；若 PolyWeather 是付费产品，必须先做法务与授权评审。缓解：只在研究环境评估；商用优先选择可商用权重/购买授权/自研。

frontend/app/api/analytics/events/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 const ANALYTICS_ENABLED =
@@ -33,19 +37,17 @@ export async function POST(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 260) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 260,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to track analytics event", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to track analytics event",
+    });
   }
 }

frontend/app/api/auth/me/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 import {
   getLocalDevAuthPayload,
   isLocalFullAccessHost,
@@ -70,10 +74,7 @@ export async function GET(req: NextRequest) {
         });
         return applyAuthResponseCookies(response, auth.response);
       }
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -98,10 +99,9 @@ export async function GET(req: NextRequest) {
       });
       return applyAuthResponseCookies(response, auth.response);
     }
-    return NextResponse.json(
-      { error: "Failed to fetch auth profile", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch auth profile",
+    });
   }
 }
 

frontend/app/api/cities/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
@@ -27,10 +31,7 @@ export async function GET(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -41,10 +42,9 @@ export async function GET(req: NextRequest) {
     );
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    const response = NextResponse.json(
-      { error: "Failed to fetch cities", detail: String(error) },
-      { status: 500 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch cities",
+    });
     return response;
   }
 }

frontend/app/api/city/[name]/detail/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -20,11 +24,15 @@ export async function GET(
 
   const { name } = await context.params;
   const forceRefresh = req.nextUrl.searchParams.get("force_refresh") ?? "false";
+  const depth = req.nextUrl.searchParams.get("depth");
   const marketSlug = req.nextUrl.searchParams.get("market_slug");
   const targetDate = req.nextUrl.searchParams.get("target_date");
   const searchParams = new URLSearchParams({
     force_refresh: forceRefresh,
   });
+  if (depth) {
+    searchParams.set("depth", depth);
+  }
   if (marketSlug) {
     searchParams.set("market_slug", marketSlug);
   }
@@ -41,20 +49,16 @@ export async function GET(
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    const response = NextResponse.json(
-      { error: "Failed to fetch city detail aggregate", detail: String(error) },
-      { status: 500 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch city detail aggregate",
+    });
     return response;
   }
 }

frontend/app/api/city/[name]/market-scan/route.ts

@@ -3,17 +3,13 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
-function parseBackendError(raw: string) {
-  try {
-    return JSON.parse(raw) as unknown;
-  } catch {
-    return raw.slice(0, 800);
-  }
-}
-
 export async function GET(
   req: NextRequest,
   context: { params: Promise<{ name: string }> },
@@ -56,14 +52,10 @@ export async function GET(
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        {
-          error: "Backend city market scan failed",
-          upstream_status: res.status,
-          detail: parseBackendError(raw),
-        },
-        { status: 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 800,
+        error: "Backend city market scan failed",
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -74,13 +66,10 @@ export async function GET(
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    const response = NextResponse.json(
-      {
-        error: "Failed to fetch city market scan",
-        detail: String(error),
-      },
-      { status: 502 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch city market scan",
+      status: 502,
+    });
     return response;
   }
 }

frontend/app/api/city/[name]/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -150,20 +154,16 @@ export async function GET(
         return applyAuthResponseCookies(response, auth.response);
       }
 
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = normalizeCityDetailPayload(await res.json());
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    const response = NextResponse.json(
-      { error: "Failed to fetch city detail", detail: String(error) },
-      { status: 500 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch city detail",
+    });
     return response;
   }
 }

frontend/app/api/city/[name]/summary/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
@@ -43,10 +47,7 @@ export async function GET(
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -65,10 +66,9 @@ export async function GET(
     );
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    const response = NextResponse.json(
-      { error: "Failed to fetch city summary", detail: String(error) },
-      { status: 500 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch city summary",
+    });
     return response;
   }
 }

frontend/app/api/healthz/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -32,9 +33,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch healthz", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch healthz",
+    });
   }
 }

frontend/app/api/history/[name]/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 import { buildCachedJsonResponse } from "@/lib/http-cache";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
@@ -33,10 +37,7 @@ export async function GET(
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -47,10 +48,9 @@ export async function GET(
     );
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    const response = NextResponse.json(
-      { error: "Failed to fetch history", detail: String(error) },
-      { status: 500 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch history",
+    });
     return response;
   }
 }

frontend/app/api/ops/analytics/funnel/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -35,9 +36,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch analytics funnel", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch analytics funnel",
+    });
   }
 }

frontend/app/api/ops/leaderboard/weekly/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -34,9 +35,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch weekly leaderboard", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch weekly leaderboard",
+    });
   }
 }

frontend/app/api/ops/memberships/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -34,9 +35,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch memberships", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch memberships",
+    });
   }
 }

frontend/app/api/ops/payments/incidents/[eventId]/resolve/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -36,9 +37,8 @@ export async function POST(req: NextRequest, context: RouteContext) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to resolve payment incident", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to resolve payment incident",
+    });
   }
 }

frontend/app/api/ops/payments/incidents/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -34,9 +35,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch payment incidents", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch payment incidents",
+    });
   }
 }

frontend/app/api/ops/truth-history/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -36,9 +37,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch truth history", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch truth history",
+    });
   }
 }

frontend/app/api/ops/users/grant-points/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -36,9 +37,8 @@ export async function POST(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to grant points", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to grant points",
+    });
   }
 }

frontend/app/api/ops/users/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -36,9 +37,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch ops users", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch ops users",
+    });
   }
 }

frontend/app/api/payments/config/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -21,10 +25,9 @@ export async function GET(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 350) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -33,10 +36,9 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch payment config", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch payment config",
+    });
   }
 }
 

frontend/app/api/payments/intents/[intentId]/confirm/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -33,19 +37,17 @@ export async function POST(
     );
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 350) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to confirm payment tx", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to confirm payment tx",
+    });
   }
 }

frontend/app/api/payments/intents/[intentId]/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -29,19 +33,17 @@ export async function GET(
     );
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 350) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch payment intent", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch payment intent",
+    });
   }
 }

frontend/app/api/payments/intents/[intentId]/submit/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -33,19 +37,17 @@ export async function POST(
     );
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 350) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to submit payment tx", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to submit payment tx",
+    });
   }
 }

frontend/app/api/payments/intents/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 import { isPaymentHostAllowed } from "@/lib/payment-host";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
@@ -41,20 +45,18 @@ export async function POST(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 350) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to create payment intent", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to create payment intent",
+    });
   }
 }
 

frontend/app/api/payments/reconcile-latest/route.ts

@@ -3,6 +3,7 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import { buildProxyExceptionResponse } from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -31,9 +32,8 @@ export async function POST(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to reconcile latest payment", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to reconcile latest payment",
+    });
   }
 }

frontend/app/api/payments/runtime/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -22,10 +26,9 @@ export async function GET(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 500) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 500,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
 
@@ -35,9 +38,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch payment runtime", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch payment runtime",
+    });
   }
 }

frontend/app/api/payments/wallets/challenge/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -26,30 +30,25 @@ export async function POST(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        {
-          error: `Backend returned ${res.status}`,
-          detail: raw.slice(0, 350),
-          proxy_debug: {
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+        extraDebug: {
             has_authorization: proxiedHeaders.has("authorization"),
             has_entitlement: proxiedHeaders.has("x-polyweather-entitlement"),
             has_forwarded_user_id: proxiedHeaders.has(
               "x-polyweather-auth-user-id",
             ),
             has_forwarded_email: proxiedHeaders.has("x-polyweather-auth-email"),
-          },
         },
-        { status: res.status },
-      );
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to create wallet challenge", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to create wallet challenge",
+    });
   }
 }

frontend/app/api/payments/wallets/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -21,10 +25,9 @@ export async function GET(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 350) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -33,10 +36,9 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch wallets", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch wallets",
+    });
   }
 }
 
@@ -65,11 +67,9 @@ export async function DELETE(req: NextRequest) {
     });
     const raw = await res.text();
     if (!res.ok) {
-      const response = NextResponse.json(
-        {
-          error: `Backend returned ${res.status}`,
-          detail: raw.slice(0, 350),
-          proxy_debug: {
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+        extraDebug: {
             incoming_has_authorization: Boolean(
               String(req.headers.get("authorization") || "").trim(),
             ),
@@ -79,10 +79,8 @@ export async function DELETE(req: NextRequest) {
               "x-polyweather-auth-user-id",
             ),
             has_forwarded_email: proxiedHeaders.has("x-polyweather-auth-email"),
-          },
         },
-        { status: res.status },
-      );
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     let data: unknown = { ok: true };
@@ -98,10 +96,9 @@ export async function DELETE(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to unbind wallet", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to unbind wallet",
+    });
   }
 }
 

frontend/app/api/payments/wallets/verify/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -26,31 +30,26 @@ export async function POST(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        {
-          error: `Backend returned ${res.status}`,
-          detail: raw.slice(0, 350),
-          proxy_debug: {
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 350,
+        extraDebug: {
             has_authorization: proxiedHeaders.has("authorization"),
             has_entitlement: proxiedHeaders.has("x-polyweather-entitlement"),
             has_forwarded_user_id: proxiedHeaders.has(
               "x-polyweather-auth-user-id",
             ),
             has_forwarded_email: proxiedHeaders.has("x-polyweather-auth-email"),
-          },
         },
-        { status: res.status },
-      );
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
     const response = NextResponse.json(data);
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to verify wallet binding", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to verify wallet binding",
+    });
   }
 }
 

frontend/app/api/scan/terminal/ai-city/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 const AI_CITY_GATEWAY_TIMEOUT_MS = Math.max(
@@ -63,10 +67,7 @@ export async function POST(req: NextRequest) {
         status: res.status,
         detail: raw.slice(0, 180),
       });
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: res.status === 402 || res.status === 403 ? res.status : 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -93,18 +94,17 @@ export async function POST(req: NextRequest) {
       timeout_ms: AI_CITY_GATEWAY_TIMEOUT_MS,
       error: String(error),
     });
-    const response = NextResponse.json(
-      {
-        error: timedOut
-          ? "City AI gateway timed out before backend responded"
-          : "Failed to fetch city AI data",
-        detail: String(error),
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: timedOut
+        ? "City AI gateway timed out before backend responded"
+        : "Failed to fetch city AI data",
+      status: timedOut ? 504 : 500,
+      extra: {
         elapsed_ms: elapsedMs,
         timeout_ms: AI_CITY_GATEWAY_TIMEOUT_MS,
         city: requestBody.city,
       },
-      { status: timedOut ? 504 : 500 },
-    );
+    });
     return auth ? applyAuthResponseCookies(response, auth.response) : response;
   } finally {
     clearTimeout(timeoutId);

frontend/app/api/scan/terminal/ai-city/stream/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -40,10 +44,7 @@ export async function POST(req: NextRequest) {
     });
     if (!res.ok || !res.body) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: res.status === 402 || res.status === 403 ? res.status : 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
 
@@ -57,14 +58,10 @@ export async function POST(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    const response = NextResponse.json(
-      {
-        error: "Failed to stream city AI data",
-        detail: String(error),
-        city: requestBody.city,
-      },
-      { status: 500 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to stream city AI data",
+      extra: { city: requestBody.city },
+    });
     return applyAuthResponseCookies(response, auth.response);
   }
 }

frontend/app/api/scan/terminal/ai/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 const SCAN_AI_PROXY_TIMEOUT_MS = Math.max(
@@ -46,10 +50,7 @@ export async function POST(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: res.status === 402 || res.status === 403 ? res.status : 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -61,15 +62,12 @@ export async function POST(req: NextRequest) {
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
     const timedOut = controller.signal.aborted;
-    const response = NextResponse.json(
-      {
-        error: timedOut
-          ? "Scan AI request timed out"
-          : "Failed to fetch scan AI data",
-        detail: String(error),
-      },
-      { status: timedOut ? 504 : 500 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: timedOut
+        ? "Scan AI request timed out"
+        : "Failed to fetch scan AI data",
+      status: timedOut ? 504 : 500,
+    });
     return auth ? applyAuthResponseCookies(response, auth.response) : response;
   } finally {
     clearTimeout(timeoutId);

frontend/app/api/scan/terminal/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 const SCAN_TERMINAL_PROXY_TIMEOUT_MS = Number(
@@ -54,10 +58,7 @@ export async function GET(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 300) },
-        { status: 502 },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw);
       return applyAuthResponseCookies(response, auth.response);
     }
     const data = await res.json();
@@ -69,15 +70,12 @@ export async function GET(req: NextRequest) {
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
     const timedOut = controller.signal.aborted;
-    const response = NextResponse.json(
-      {
-        error: timedOut
-          ? "Scan terminal request timed out"
-          : "Failed to fetch scan terminal data",
-        detail: String(error),
-      },
-      { status: timedOut ? 504 : 500 },
-    );
+    const response = buildProxyExceptionResponse(error, {
+      publicMessage: timedOut
+        ? "Scan terminal request timed out"
+        : "Failed to fetch scan terminal data",
+      status: timedOut ? 504 : 500,
+    });
     return auth ? applyAuthResponseCookies(response, auth.response) : response;
   } finally {
     clearTimeout(timeoutId);

frontend/app/api/system/status/route.ts

@@ -3,6 +3,10 @@ import {
   applyAuthResponseCookies,
   buildBackendRequestHeaders,
 } from "@/lib/backend-auth";
+import {
+  buildProxyExceptionResponse,
+  buildUpstreamErrorResponse,
+} from "@/lib/api-proxy";
 
 const API_BASE = process.env.POLYWEATHER_API_BASE_URL;
 
@@ -22,10 +26,9 @@ export async function GET(req: NextRequest) {
     });
     if (!res.ok) {
       const raw = await res.text();
-      const response = NextResponse.json(
-        { error: `Backend returned ${res.status}`, detail: raw.slice(0, 500) },
-        { status: res.status },
-      );
+      const response = buildUpstreamErrorResponse(res.status, raw, {
+        detailLimit: 500,
+      });
       return applyAuthResponseCookies(response, auth.response);
     }
 
@@ -35,9 +38,8 @@ export async function GET(req: NextRequest) {
     });
     return applyAuthResponseCookies(response, auth.response);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch system status", detail: String(error) },
-      { status: 500 },
-    );
+    return buildProxyExceptionResponse(error, {
+      publicMessage: "Failed to fetch system status",
+    });
   }
 }

frontend/app/entitlement-required/page.tsx

@@ -36,7 +36,12 @@ export default async function EntitlementRequiredPage({ searchParams }: Props) {
           This dashboard is protected. If Supabase auth is enabled, please go to{" "}
           <a
             href={`/auth/login?next=${encodeURIComponent(nextPath)}`}
-            style={{ color: "#8fc5ff" }}
+            style={{
+              color: "#8fc5ff",
+              display: "inline-flex",
+              minHeight: 36,
+              alignItems: "center",
+            }}
           >
             /auth/login
           </a>{" "}

frontend/app/subscription-help/page.tsx

@@ -82,7 +82,7 @@ export default function SubscriptionHelpPage() {
               <Link
                 href={TELEGRAM_GROUP_URL}
                 target="_blank"
-                className="text-sm font-semibold text-blue-300 underline decoration-blue-500/50 underline-offset-4"
+                className="inline-flex min-h-9 items-center text-sm font-semibold text-blue-300 underline decoration-blue-500/50 underline-offset-4"
               >
                 加入社群即可赚取积分
               </Link>

frontend/components/account/AccountCenter.tsx

@@ -285,15 +285,15 @@ const InfoRow = ({
   value,
   isPrimary = false,
 }: InfoRowProps) => (
-  <div className="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 hover:bg-white/10 transition-all group">
-    <div className="flex items-center gap-3">
-      <div className="p-2 bg-slate-800 rounded-lg text-slate-400 group-hover:text-blue-400 transition-colors">
+  <div className="flex min-w-0 flex-col gap-3 p-4 bg-white/5 rounded-2xl border border-white/5 hover:bg-white/10 transition-all group sm:flex-row sm:items-center sm:justify-between">
+    <div className="flex min-w-0 items-center gap-3">
+      <div className="shrink-0 p-2 bg-slate-800 rounded-lg text-slate-400 group-hover:text-blue-400 transition-colors">
         {Icon && <Icon size={18} />}
       </div>
-      <span className="text-slate-400 text-sm font-medium">{label}</span>
+      <span className="min-w-0 text-slate-400 text-sm font-medium leading-5">{label}</span>
     </div>
     <span
-      className={`text-sm font-semibold font-mono ${isPrimary ? "text-blue-400" : "text-slate-200"}`}
+      className={`min-w-0 break-all text-left text-sm font-semibold font-mono sm:text-right ${isPrimary ? "text-blue-400" : "text-slate-200"}`}
     >
       {value}
     </span>
@@ -2772,7 +2772,7 @@ export function AccountCenter() {
                       href={TELEGRAM_BOT_URL}
                       target="_blank"
                       rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-lg border border-cyan-400/30 bg-cyan-500/10 px-3 py-1.5 text-xs font-semibold text-cyan-200 hover:bg-cyan-500/20"
+                      className="inline-flex min-h-9 items-center gap-1 rounded-lg border border-cyan-400/30 bg-cyan-500/10 px-3 py-2 text-xs font-semibold text-cyan-200 hover:bg-cyan-500/20"
                     >
                       {copy.telegramBotLink}
                       <ExternalLink size={12} />
@@ -2783,7 +2783,7 @@ export function AccountCenter() {
                       href={TELEGRAM_MARKET_CHANNEL_URL}
                       target="_blank"
                       rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-lg border border-emerald-400/30 bg-emerald-500/10 px-3 py-1.5 text-xs font-semibold text-emerald-200 hover:bg-emerald-500/20"
+                      className="inline-flex min-h-9 items-center gap-1 rounded-lg border border-emerald-400/30 bg-emerald-500/10 px-3 py-2 text-xs font-semibold text-emerald-200 hover:bg-emerald-500/20"
                     >
                       {copy.telegramMarketChannelLink}
                       <ExternalLink size={12} />
@@ -2794,7 +2794,7 @@ export function AccountCenter() {
                       href={TELEGRAM_GROUP_URL}
                       target="_blank"
                       rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-lg border border-blue-400/30 bg-blue-500/10 px-3 py-1.5 text-xs font-semibold text-blue-200 hover:bg-blue-500/20"
+                      className="inline-flex min-h-9 items-center gap-1 rounded-lg border border-blue-400/30 bg-blue-500/10 px-3 py-2 text-xs font-semibold text-blue-200 hover:bg-blue-500/20"
                     >
                       {copy.telegramGroupLink}
                       <ExternalLink size={12} />

frontend/components/dashboard/DashboardMap.module.css

@@ -0,0 +1,846 @@
+/* ── Map ── */
+.root :global(.map) {
+  position: absolute;
+  top: calc(var(--header-height) + 16px);
+  right: 392px;
+  bottom: 164px;
+  left: calc(var(--sidebar-width) + 22px);
+  z-index: 1;
+  overflow: hidden;
+  border: 1px solid rgba(115, 137, 161, 0.16);
+  border-radius: 24px;
+  background: #040912;
+  box-shadow:
+    0 32px 100px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    inset 0 0 0 1px rgba(0, 224, 164, 0.04);
+}
+
+.weatherAura {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0.96;
+  mix-blend-mode: screen;
+  overflow: hidden;
+}
+
+.weatherAura :global(canvas) {
+  width: 100%;
+  height: 100%;
+  display: block;
+  opacity: 0.94;
+  filter: saturate(1.05) blur(0.3px);
+}
+
+.weatherAuraScrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(3, 8, 19, 0.64) 0%,
+      rgba(5, 10, 20, 0.16) 24%,
+      rgba(4, 8, 18, 0.1) 54%,
+      rgba(3, 6, 14, 0.42) 100%
+    ),
+    radial-gradient(
+      circle at 50% 60%,
+      rgba(0, 224, 164, 0.08) 0%,
+      rgba(123, 97, 255, 0) 48%
+    );
+}
+
+.weatherAura[data-reduced-motion="true"] :global(canvas) {
+  display: none;
+}
+
+.root :global(.map .leaflet-tile),
+.root :global(.map .leaflet-marker-icon),
+.root :global(.map .leaflet-marker-shadow),
+.root :global(.map .leaflet-container img),
+.root :global(.map .leaflet-container svg) {
+  max-width: none !important;
+  max-height: none !important;
+}
+
+.root :global(.map .leaflet-tile) {
+  width: 256px !important;
+  height: 256px !important;
+}
+
+/* Remove Leaflet default styling for cleaner look */
+.root :global(.leaflet-control-attribution) {
+  background: var(--bg-glass) !important;
+  color: var(--text-muted) !important;
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--border-subtle) !important;
+  font-size: 10px !important;
+  border-radius: 6px !important;
+  padding: 2px 8px !important;
+}
+.root :global(.leaflet-control-attribution a) {
+  color: var(--text-secondary) !important;
+}
+.root :global(.leaflet-control-zoom) {
+  border: none !important;
+  box-shadow: var(--shadow-lg) !important;
+}
+.root :global(.leaflet-control-zoom a) {
+  background: var(--bg-glass) !important;
+  color: var(--text-primary) !important;
+  backdrop-filter: blur(12px) !important;
+  border: 1px solid var(--border-glass) !important;
+  width: 36px !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  font-size: 16px !important;
+  border-radius: 8px !important;
+  transition: var(--transition);
+}
+.root :global(.leaflet-control-zoom a:hover) {
+  background: rgba(99, 102, 241, 0.2) !important;
+  border-color: var(--accent-blue) !important;
+}
+
+/* ── Custom Map Markers ── */
+.root :global(.city-marker) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  /* Remove transition: transform to avoid fighting with Leaflet's own positioning */
+}
+.root :global(.city-marker:hover) {
+  transform: scale(1.15);
+  z-index: 1000 !important;
+}
+
+.root :global(.marker-bubble) {
+  min-width: 44px;
+  padding: 4px 10px;
+  border-radius: 14px;
+  font-family: "Inter", sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: center;
+  color: white;
+  white-space: nowrap;
+  position: relative;
+  box-shadow:
+    0 6px 18px rgba(0, 0, 0, 0.42),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.root :global(.marker-bubble::after) {
+  content: "";
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid;
+  border-top-color: inherit;
+}
+
+.root :global(.marker-bubble.risk-high) {
+  background: linear-gradient(135deg, #991b1b, #fb7185);
+  border-color: rgba(251, 113, 133, 0.42);
+  box-shadow:
+    0 6px 18px rgba(0, 0, 0, 0.42),
+    0 0 22px rgba(251, 113, 133, 0.18);
+}
+.root :global(.marker-bubble.risk-high::after) {
+  border-top-color: #ef4444;
+}
+
+.root :global(.marker-bubble.risk-medium) {
+  background: linear-gradient(135deg, #9a3412, #f59e0b);
+  border-color: rgba(245, 158, 11, 0.42);
+  box-shadow:
+    0 6px 18px rgba(0, 0, 0, 0.42),
+    0 0 22px rgba(245, 158, 11, 0.16);
+}
+.root :global(.marker-bubble.risk-medium::after) {
+  border-top-color: #f59e0b;
+}
+
+.root :global(.marker-bubble.risk-low) {
+  background: linear-gradient(135deg, #065f46, #22c55e);
+  border-color: rgba(74, 222, 128, 0.42);
+  box-shadow:
+    0 6px 18px rgba(0, 0, 0, 0.42),
+    0 0 22px rgba(74, 222, 128, 0.14);
+}
+.root :global(.marker-bubble.risk-low::after) {
+  border-top-color: #22C55E;
+}
+
+.root :global(.marker-name) {
+  font-size: 10px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.85);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+  margin-top: 2px;
+  white-space: nowrap;
+}
+
+/* Marker glow animation for selected city */
+.root :global(.city-marker.selected .marker-bubble) {
+  animation: markerGlow 2s ease-in-out infinite;
+}
+@keyframes markerGlow {
+  0%,
+  100% {
+    box-shadow:
+      0 6px 18px rgba(0, 0, 0, 0.42),
+      0 0 24px rgba(34, 211, 238, 0.12);
+  }
+  50% {
+    box-shadow:
+      0 6px 26px rgba(0, 0, 0, 0.46),
+      0 0 20px rgba(34, 211, 238, 0.24),
+      0 0 46px rgba(34, 211, 238, 0.14);
+  }
+}
+
+/* ── Loading Overlay ── */
+.root :global(.loading-overlay) {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(8, 14, 32, 0.76) 0%,
+    rgba(4, 8, 22, 0.9) 44%,
+    rgba(2, 6, 20, 0.96) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(12px);
+}
+
+.root :global(.loading-card) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+  min-width: 240px;
+  padding: 28px 32px;
+  border-radius: 28px;
+  background: linear-gradient(
+    180deg,
+    rgba(10, 18, 36, 0.78) 0%,
+    rgba(8, 14, 30, 0.62) 100%
+  );
+  border: 1px solid rgba(92, 142, 255, 0.16);
+  box-shadow:
+    0 24px 90px rgba(0, 0, 0, 0.42),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.root :global(.loading-clouds) {
+  position: relative;
+  width: 220px;
+  height: 26px;
+  overflow: hidden;
+}
+
+.root :global(.loading-cloud) {
+  position: absolute;
+  top: 0;
+  height: 18px;
+  border-radius: 999px;
+  background:
+    radial-gradient(
+      circle at 30% 50%,
+      rgba(186, 230, 253, 0.22),
+      transparent 54%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(148, 163, 184, 0.28) 0%,
+      rgba(71, 85, 105, 0.1) 100%
+    );
+  filter: blur(0.3px);
+  box-shadow:
+    0 6px 24px rgba(56, 189, 248, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  animation: cloud-drift 6.8s ease-in-out infinite;
+}
+
+.root :global(.loading-cloud-1) {
+  left: 12px;
+  width: 76px;
+}
+
+.root :global(.loading-cloud-2) {
+  right: 8px;
+  top: 7px;
+  width: 98px;
+  opacity: 0.75;
+  animation-delay: -2.6s;
+}
+
+.root :global(.loading-windfield) {
+  position: relative;
+  width: 220px;
+  height: 30px;
+  overflow: hidden;
+  opacity: 0.9;
+}
+
+.root :global(.loading-windline) {
+  position: absolute;
+  left: -28%;
+  height: 1px;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    rgba(34, 211, 238, 0) 0%,
+    rgba(103, 232, 249, 0.5) 22%,
+    rgba(125, 211, 252, 0.9) 55%,
+    rgba(34, 211, 238, 0) 100%
+  );
+  filter: blur(0.2px);
+  animation: wind-shift 2.8s linear infinite;
+}
+
+.root :global(.loading-windline-1) {
+  top: 4px;
+  width: 124px;
+}
+
+.root :global(.loading-windline-2) {
+  top: 13px;
+  width: 176px;
+  animation-delay: -0.9s;
+  opacity: 0.82;
+}
+
+.root :global(.loading-windline-3) {
+  top: 22px;
+  width: 142px;
+  animation-delay: -1.6s;
+  opacity: 0.66;
+}
+
+.root :global(.loading-copy) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.root :global(.loading-copy strong) {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: rgba(103, 232, 249, 0.92);
+}
+
+.root :global(.loading-copy span) {
+  max-width: 240px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.55;
+  color: rgba(203, 213, 225, 0.82);
+}
+
+.root :global(.loading-radar) {
+  position: relative;
+  width: 108px;
+  height: 108px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(22, 78, 99, 0.16) 0%,
+    rgba(7, 18, 36, 0.08) 48%,
+    rgba(5, 10, 22, 0.02) 76%,
+    transparent 100%
+  );
+  box-shadow:
+    inset 0 0 0 1px rgba(56, 189, 248, 0.12),
+    0 0 40px rgba(34, 211, 238, 0.08);
+}
+
+.root :global(.loading-radar-core) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #6FB7FF 0%, #0891b2 100%);
+  transform: translate(-50%, -50%);
+  box-shadow:
+    0 0 12px rgba(34, 211, 238, 0.65),
+    0 0 28px rgba(59, 130, 246, 0.25);
+}
+
+.root :global(.loading-radar-ring) {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1px solid rgba(56, 189, 248, 0.14);
+}
+
+.root :global(.loading-radar-ring-1) {
+  transform: scale(0.62);
+}
+
+.root :global(.loading-radar-ring-2) {
+  transform: scale(0.88);
+}
+
+.root :global(.loading-radar-sweep) {
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 90deg,
+    rgba(34, 211, 238, 0) 0deg,
+    rgba(34, 211, 238, 0) 260deg,
+    rgba(34, 211, 238, 0.3) 312deg,
+    rgba(96, 165, 250, 0.06) 360deg
+  );
+  mask: radial-gradient(circle, transparent 0 22px, #000 23px);
+  animation: radar-sweep 2.4s linear infinite;
+}
+
+.root :global(.loading-radar-blip) {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(253, 224, 71, 0.92);
+  box-shadow: 0 0 12px rgba(253, 224, 71, 0.45);
+  animation: radar-blip 1.8s ease-in-out infinite;
+}
+
+.root :global(.loading-radar-blip-1) {
+  top: 26px;
+  right: 24px;
+  animation-delay: 0.15s;
+}
+
+.root :global(.loading-radar-blip-2) {
+  bottom: 25px;
+  left: 20px;
+  background: rgba(74, 222, 128, 0.9);
+  box-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
+  animation-delay: 0.9s;
+}
+
+.root :global(.loading-thermals) {
+  display: flex;
+  align-items: end;
+  gap: 8px;
+  height: 28px;
+}
+
+.root :global(.loading-thermal) {
+  width: 10px;
+  border-radius: 999px;
+  background: linear-gradient(
+    180deg,
+    rgba(251, 191, 36, 0.15) 0%,
+    rgba(251, 146, 60, 0.8) 55%,
+    rgba(239, 68, 68, 0.9) 100%
+  );
+  box-shadow: 0 0 18px rgba(251, 146, 60, 0.18);
+  animation: thermal-rise 1.5s ease-in-out infinite;
+  transform-origin: center bottom;
+}
+
+.root :global(.loading-thermal-1) {
+  height: 11px;
+  animation-delay: 0s;
+}
+
+.root :global(.loading-thermal-2) {
+  height: 22px;
+  animation-delay: 0.2s;
+}
+
+.root :global(.loading-thermal-3) {
+  height: 16px;
+  animation-delay: 0.42s;
+}
+
+.root :global(.loading-thermal-4) {
+  height: 25px;
+  animation-delay: 0.68s;
+}
+
+.root :global(.loading-drizzle) {
+  position: relative;
+  width: 220px;
+  height: 26px;
+  overflow: hidden;
+  opacity: 0.88;
+}
+
+.root :global(.loading-drizzle-drop) {
+  position: absolute;
+  top: -2px;
+  width: 2px;
+  height: 16px;
+  border-radius: 999px;
+  background: linear-gradient(
+    180deg,
+    rgba(125, 211, 252, 0) 0%,
+    rgba(125, 211, 252, 0.9) 100%
+  );
+  box-shadow: 0 0 8px rgba(56, 189, 248, 0.12);
+  animation: drizzle-fall 1.35s linear infinite;
+}
+
+.root :global(.loading-drizzle-drop-1) {
+  left: 38px;
+  animation-delay: -0.1s;
+}
+
+.root :global(.loading-drizzle-drop-2) {
+  left: 76px;
+  height: 18px;
+  animation-delay: -0.52s;
+}
+
+.root :global(.loading-drizzle-drop-3) {
+  left: 112px;
+  height: 14px;
+  animation-delay: -0.92s;
+}
+
+.root :global(.loading-drizzle-drop-4) {
+  left: 156px;
+  height: 17px;
+  animation-delay: -0.38s;
+}
+
+.root :global(.loading-drizzle-drop-5) {
+  left: 192px;
+  height: 13px;
+  animation-delay: -0.74s;
+}
+
+.root :global(.loading-overlay.hidden) {
+  display: none;
+}
+
+.root :global(.loading-spinner) {
+  width: 48px;
+  height: 48px;
+  border: 2px solid rgba(34, 211, 238, 0.1);
+  border-top-color: var(--accent-cyan);
+  border-radius: 50%;
+  animation: loading-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);
+}
+
+@keyframes loading-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes city-loading-pulse {
+  0% {
+    transform: scale(0.92);
+    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.44);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(34, 211, 238, 0);
+  }
+  100% {
+    transform: scale(0.92);
+    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
+  }
+}
+
+@keyframes radar-sweep {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes radar-blip {
+  0%,
+  100% {
+    opacity: 0.2;
+    transform: scale(0.72);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  60% {
+    opacity: 0.9;
+    transform: scale(1.18);
+  }
+}
+
+@keyframes wind-shift {
+  from {
+    transform: translateX(0);
+    opacity: 0;
+  }
+  18% {
+    opacity: 0.9;
+  }
+  82% {
+    opacity: 0.78;
+  }
+  to {
+    transform: translateX(145%);
+    opacity: 0;
+  }
+}
+
+@keyframes thermal-rise {
+  0%,
+  100% {
+    transform: scaleY(0.78);
+    opacity: 0.72;
+  }
+  50% {
+    transform: scaleY(1.14);
+    opacity: 1;
+  }
+}
+
+@keyframes cloud-drift {
+  0%,
+  100% {
+    transform: translateX(0);
+    opacity: 0.7;
+  }
+  50% {
+    transform: translateX(12px);
+    opacity: 0.95;
+  }
+}
+
+@keyframes drizzle-fall {
+  0% {
+    transform: translateY(-3px);
+    opacity: 0;
+  }
+  20% {
+    opacity: 0.9;
+  }
+  100% {
+    transform: translateY(18px);
+    opacity: 0;
+  }
+}
+
+/* ── Nearby Stations (Premium Glassmorphism) ── */
+.root :global(.nearby-marker-premium) {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: rgba(10, 14, 26, 0.75);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 999px; /* Pill shape */
+  padding: 5px 14px 5px 10px;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 1px rgba(255, 255, 255, 0.05);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.root :global(.nearby-marker-shell) {
+  display: inline-block;
+  will-change: transform;
+}
+
+@keyframes nearby-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.root :global(.nearby-pulse) {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+.root :global(.pulse-core) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  background: var(--accent-cyan);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 8px var(--accent-cyan);
+}
+
+.root :global(.pulse-ring) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  border: 1.5px solid var(--accent-cyan);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.3;
+  box-shadow: 0 0 10px rgba(34, 211, 238, 0.18);
+}
+
+.root :global(.nearby-content) {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.1;
+}
+
+.root :global(.nearby-label) {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+}
+
+.root :global(.nearby-stats) {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.root :global(.nearby-temp-val) {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--text-primary);
+  text-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
+}
+
+.root :global(.nearby-temp-unit) {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.root :global(.nearby-time) {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 3px;
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(203, 213, 225, 0.95);
+  white-space: nowrap;
+}
+
+.root :global(.nearby-time span + span)::before {
+  content: "·";
+  margin-right: 4px;
+  color: rgba(148, 163, 184, 0.55);
+}
+
+.root :global(.nearby-time.is-stale) {
+  color: #fbbf24;
+}
+
+.root :global(.nearby-wind) {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-left: 10px;
+  margin-left: 2px;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.root :global(.nearby-wind .wind-arrow) {
+  font-size: 12px;
+  color: var(--accent-cyan);
+  text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
+}
+
+.root :global(.nearby-wind .wind-val) {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+/* ── Trend badge ── */
+.root :global(.trend-badge) {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.root :global(.trend-badge.rising) {
+  background: rgba(34, 197, 94, 0.12);
+  color: var(--accent-green);
+  border: 1px solid rgba(34, 197, 94, 0.25);
+}
+.root :global(.trend-badge.falling) {
+  background: rgba(248, 113, 113, 0.12);
+  color: var(--accent-red);
+  border: 1px solid rgba(248, 113, 113, 0.25);
+}
+.root :global(.trend-badge.stagnant) {
+  background: rgba(251, 191, 36, 0.12);
+  color: var(--accent-yellow);
+  border: 1px solid rgba(251, 191, 36, 0.25);
+}
+.root :global(.trend-badge.mixed) {
+  background: rgba(167, 139, 250, 0.12);
+  color: var(--accent-purple);
+  border: 1px solid rgba(167, 139, 250, 0.25);
+}
+
+.root :global(.dead-market) {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  background: rgba(248, 113, 113, 0.15);
+  color: var(--accent-red);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+  animation: deadPulse 2s ease-in-out infinite;
+}
+@keyframes deadPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}

frontend/components/dashboard/DashboardModalGuide.module.css

@@ -0,0 +1,303 @@
+.root :global(.scan-select) {
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #4DA3FF, #00b383);
+  color: #000;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 4px 12px rgba(0, 224, 164, 0.2);
+}
+
+.root :global(.scan-cta-button:hover:not(:disabled)) {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(0, 224, 164, 0.4);
+  filter: brightness(1.1);
+}
+
+.root :global(.scan-cta-button:active:not(:disabled)) {
+  transform: translateY(1px);
+}
+
+.root :global(.modal-overlay) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(2, 6, 23, 0.75);
+  backdrop-filter: blur(12px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.root :global(.modal-content) {
+  background: #16213A;
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  width: 100%;
+  max-width: 700px;
+  max-height: calc(100vh - 48px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.root :global(.modal-header) {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.root :global(.modal-header h2) {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  min-width: 0;
+}
+.root :global(.future-modal-title-with-actions) {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.root :global(.future-refresh-btn) {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.root :global(.future-refresh-btn:hover) {
+  color: var(--accent-cyan);
+  background: rgba(34, 211, 238, 0.1);
+}
+
+.root :global(.future-refresh-btn.spinning svg) {
+  animation: spin 1s linear infinite;
+  color: var(--accent-cyan);
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.root :global(.modal-close) {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.root :global(.modal-close:hover) {
+  color: var(--accent-red);
+}
+
+.root :global(.modal-body) {
+  padding: 20px;
+  overflow-y: auto;
+}
+
+/* Keep scroll behavior but hide visual scrollbar in today's/future analysis modal */
+.root :global(.modal-content.large.future-modal .modal-body) {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.root
+  :global(.modal-content.large.future-modal .modal-body::-webkit-scrollbar) {
+  width: 0;
+  height: 0;
+}
+
+@media (max-width: 640px) {
+  .root :global(.modal-content) {
+    border-radius: 14px;
+    max-height: calc(100vh - 16px);
+  }
+
+  .root :global(.modal-header) {
+    padding: 14px 14px 12px;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .root :global(.modal-header h2) {
+    font-size: 15px;
+    line-height: 1.35;
+  }
+
+  .root :global(.modal-body) {
+    padding: 14px;
+  }
+
+}
+
+/* ── Info Button ── */
+.root :global(.account-btn) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(34, 211, 238, 0.34);
+  background: rgba(34, 211, 238, 0.08);
+  color: var(--accent-cyan);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  transition: var(--transition);
+}
+.root :global(.account-btn:hover) {
+  background: rgba(34, 211, 238, 0.16);
+  border-color: rgba(34, 211, 238, 0.62);
+  color: #f8fbff;
+  transform: translateY(-1px);
+}
+
+.root :global(.account-renew-badge) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(245, 158, 11, 0.34);
+  background: rgba(245, 158, 11, 0.1);
+  color: #fbbf24;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  transition: var(--transition);
+}
+
+.root :global(.account-renew-badge:hover) {
+  background: rgba(245, 158, 11, 0.18);
+  border-color: rgba(245, 158, 11, 0.6);
+  color: #fff6d5;
+  transform: translateY(-1px);
+}
+
+.root :global(.account-renew-badge.expired) {
+  border-color: rgba(239, 68, 68, 0.34);
+  background: rgba(239, 68, 68, 0.12);
+  color: #fca5a5;
+}
+
+.root :global(.trial-promo-badge) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(34, 211, 238, 0.28);
+  background: rgba(34, 211, 238, 0.1);
+  color: #a5f3fc;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  transition: var(--transition);
+}
+
+.root :global(.trial-promo-badge:hover) {
+  background: rgba(34, 211, 238, 0.16);
+  border-color: rgba(34, 211, 238, 0.45);
+  color: #ecfeff;
+  transform: translateY(-1px);
+}
+
+.root :global(.info-btn) {
+  background: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  color: var(--accent-blue);
+  padding: 6px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.root :global(.info-btn:hover) {
+  background: rgba(99, 102, 241, 0.2);
+  border-color: var(--accent-blue);
+  transform: translateY(-1px);
+}
+
+.root :global(.info-btn.active) {
+  background: rgba(34, 211, 238, 0.14);
+  border-color: rgba(34, 211, 238, 0.42);
+  color: #e0fbff;
+}
+
+/* ── Guide Modal Customizations ── */
+.root :global(.modal-content.large) {
+  max-width: 900px;
+}
+
+
+.root :global(.guide-grid) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+  padding: 4px;
+}
+
+.root :global(.guide-card) {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  padding: 16px;
+  transition: var(--transition);
+}
+.root :global(.guide-card:hover) {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--border-glass);
+}
+.root :global(.guide-card h3) {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--accent-cyan);
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.root :global(.guide-card p) {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  margin-bottom: 0;
+}
+.root :global(.guide-card b) {
+  color: var(--text-primary);
+}
+
+.root :global(.guide-footer) {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-subtle);
+  text-align: center;
+  font-size: 11px;
+  color: var(--text-muted);
+}

frontend/components/dashboard/DashboardShell.module.css

@@ -0,0 +1,827 @@
+/* ── Header ── */
+.root :global(.header) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--header-height);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 0 16px;
+  background: rgba(7, 11, 18, 0.94);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border-glass);
+}
+
+.root :global(.brand) {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.root :global(.brand-mark) {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 224, 164, 0.22);
+  background: rgba(8, 15, 28, 0.78);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow:
+    inset 0 0 0 1px rgba(148, 163, 184, 0.08),
+    0 0 20px rgba(0, 224, 164, 0.12);
+}
+
+.root :global(.brand-mark img) {
+  width: 24px;
+  height: 24px;
+  display: block;
+  object-fit: contain;
+}
+
+.root :global(.brand h1) {
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  background: linear-gradient(
+    135deg,
+    var(--accent-cyan) 0%,
+    var(--accent-blue) 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.root :global(.subtitle) {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  opacity: 0.8;
+}
+
+.root :global(.header-nav) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.root :global(.header-nav-link) {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 12px 18px;
+  border-radius: 10px;
+  color: rgba(203, 213, 225, 0.82);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 550;
+  transition: var(--transition);
+  position: relative;
+}
+
+.root :global(.header-nav-link:hover) {
+  color: #f8fafc;
+  background: rgba(30, 41, 59, 0.44);
+}
+
+.root :global(.header-nav-link.active) {
+  color: #f8fafc;
+  background: transparent;
+  box-shadow: none;
+}
+
+.root :global(.header-nav-link.active::after) {
+  content: "";
+  position: absolute;
+  left: 18px;
+  right: 18px;
+  bottom: 4px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--accent-cyan);
+}
+
+.root :global(.header-right) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.root :global(.lang-switch) {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px;
+  border-radius: 10px;
+  border: 1px solid var(--border-glass);
+  background: var(--bg-glass);
+}
+
+.root :global(.lang-btn) {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 6px 8px;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.root :global(.lang-btn:hover) {
+  color: var(--text-primary);
+  background: rgba(99, 102, 241, 0.12);
+}
+
+.root :global(.lang-btn.active) {
+  color: var(--text-primary);
+  background: rgba(0, 224, 164, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(0, 224, 164, 0.2);
+}
+
+.root :global(.live-badge) {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  background: rgba(0, 224, 164, 0.08);
+  border: 1px solid rgba(0, 224, 164, 0.22);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--accent-green);
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+.root :global(.pulse-dot) {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-green);
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(0, 224, 164, 0.4);
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 0 6px rgba(0, 224, 164, 0);
+  }
+}
+
+.root :global(.refresh-btn) {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid var(--border-glass);
+  background: rgba(13, 19, 33, 0.6);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 150ms ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.root :global(.refresh-btn:hover) {
+  background: rgba(0, 224, 164, 0.1);
+  border-color: rgba(0, 224, 164, 0.3);
+  color: var(--accent-cyan);
+}
+.root :global(.refresh-btn.spinning) {
+  animation: spin 1s linear infinite;
+}
+
+.root :global(.locale-switch) {
+  height: 32px;
+  padding: 3px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 224, 164, 0.2);
+  background: rgba(8, 15, 27, 0.82);
+  color: rgba(148, 163, 184, 0.86);
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 11px;
+  font-weight: 750;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.root :global(.locale-switch span) {
+  min-width: 32px;
+  height: 24px;
+  border-radius: 7px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.root :global(.locale-switch span.active) {
+  color: #f8fafc;
+  background: rgba(0, 224, 164, 0.16);
+  box-shadow: inset 0 0 0 1px rgba(0, 224, 164, 0.24);
+}
+
+.root :global(.locale-switch:hover) {
+  border-color: rgba(0, 224, 164, 0.34);
+  background: rgba(11, 22, 40, 0.94);
+}
+
+.root :global(.header-utility-btn) {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(115, 137, 161, 0.18);
+  background: rgba(8, 15, 27, 0.82);
+  color: rgba(226, 232, 240, 0.8);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: 650;
+  transition: var(--transition);
+}
+
+.root :global(.header-utility-btn:hover) {
+  color: #f8fafc;
+  border-color: rgba(0, 224, 164, 0.34);
+  background: rgba(11, 22, 40, 0.94);
+}
+
+.root :global(.header-utility-btn.active) {
+  color: #f8fafc;
+  border-color: rgba(123, 97, 255, 0.34);
+}
+
+.root :global(.header-utility-btn.more) {
+  padding: 0;
+  width: 32px;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── City List Sidebar ── */
+.root :global(.city-list) {
+  position: fixed;
+  top: calc(var(--header-height) + 12px);
+  left: 12px;
+  width: var(--sidebar-width);
+  max-height: calc(100vh - var(--header-height) - 24px);
+  z-index: 900;
+  background: var(--bg-glass);
+  backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--border-glass);
+  border-radius: 18px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-lg);
+}
+
+.root :global(.city-list-header) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+.root :global(.city-search) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 14px 12px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(115, 137, 161, 0.14);
+  background: rgba(6, 12, 22, 0.82);
+  color: rgba(148, 163, 184, 0.86);
+}
+
+.root :global(.city-search input) {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #f8fafc;
+  font: inherit;
+  font-size: 13px;
+}
+
+.root :global(.city-search input::placeholder) {
+  color: rgba(148, 163, 184, 0.72);
+}
+
+.root :global(.city-count) {
+  background: rgba(123, 97, 255, 0.2);
+  color: var(--accent-blue);
+  font-size: 11px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  border: 1px solid rgba(123, 97, 255, 0.15);
+}
+
+.root :global(.city-list-items) {
+  overflow-y: auto;
+  flex: 1;
+  padding: 0 6px 8px;
+}
+.root :global(.city-list-items::-webkit-scrollbar) {
+  width: 4px;
+}
+.root :global(.city-list-items::-webkit-scrollbar-track) {
+  background: transparent;
+}
+.root :global(.city-list-items::-webkit-scrollbar-thumb) {
+  background: var(--border-glass);
+  border-radius: 2px;
+}
+
+.root :global(.sidebar-footer) {
+  border-top: 1px solid var(--border-subtle);
+  padding: 10px 12px;
+  color: rgba(148, 163, 184, 0.72);
+  font-size: 10px;
+  line-height: 1.55;
+}
+
+.root :global(.city-group) {
+  border: 1px solid rgba(115, 137, 161, 0.12);
+  border-radius: 14px;
+  background: rgba(10, 17, 30, 0.48);
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.root :global(.city-group:last-child) {
+  margin-bottom: 0;
+}
+
+.root :global(.city-group-header) {
+  width: 100%;
+  border: none;
+  background: rgba(15, 28, 47, 0.56);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 10px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 150ms ease;
+}
+
+.root :global(.city-group-header:hover) {
+  background: rgba(18, 34, 55, 0.82);
+}
+
+.root :global(.city-group-title) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+}
+
+.root :global(.city-group-indicator) {
+  width: 3px;
+  height: 14px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+.root :global(.city-group-indicator.high) {
+  background: var(--risk-high);
+  box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
+}
+.root :global(.city-group-indicator.medium) {
+  background: var(--risk-medium);
+  box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
+}
+.root :global(.city-group-indicator.low) {
+  background: var(--risk-low);
+  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
+}
+.root :global(.city-group-indicator.other) {
+  background: var(--text-muted);
+  opacity: 0.5;
+}
+
+.root :global(.city-group-meta) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.root :global(.city-group-count) {
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  padding: 0 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(123, 97, 255, 0.26);
+  color: var(--text-primary);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.root :global(.city-group-arrow) {
+  font-size: 11px;
+  color: var(--text-muted);
+  transform: rotate(-90deg);
+  transition: transform 0.2s ease;
+}
+
+.root :global(.city-group-arrow.expanded) {
+  transform: rotate(0deg);
+}
+
+.root :global(.city-group-items) {
+  padding: 4px;
+}
+
+.root :global(.city-group.collapsed .city-group-items) {
+  display: none;
+}
+
+.root :global(.city-item) {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: var(--transition);
+  border: 1px solid transparent;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  text-align: left;
+}
+.root :global(.city-item:hover) {
+  background: rgba(10, 26, 44, 0.84);
+  border-color: rgba(0, 224, 164, 0.18);
+  box-shadow: inset 0 0 0 1px rgba(0, 224, 164, 0.03);
+}
+.root :global(.city-item.active) {
+  background:
+    linear-gradient(135deg, rgba(0, 224, 164, 0.12), rgba(123, 97, 255, 0.1)),
+    rgba(9, 18, 32, 0.92);
+  border-color: rgba(0, 224, 164, 0.24);
+  box-shadow:
+    0 0 20px rgba(0, 224, 164, 0.08),
+    inset 0 0 0 1px rgba(0, 224, 164, 0.08);
+}
+
+.root :global(.city-item-main) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.root :global(.city-item .city-name-text) {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.root :global(.city-item-info) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 20px; /* Align with name text, after the dot */
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+.root :global(.city-item .city-max-info) {
+  color: var(--accent-blue);
+  font-weight: 500;
+}
+
+.root :global(.city-item .city-deviation-info) {
+  font-weight: 600;
+}
+
+.root :global(.city-item .city-deviation-cold) {
+  color: #4DA3FF;
+}
+
+.root :global(.city-item .city-deviation-hot) {
+  color: #f59e0b;
+}
+
+.root :global(.city-item .city-deviation-normal) {
+  color: #22d3ee;
+}
+
+.root :global(.city-item .city-deviation-info.strong) {
+  text-shadow: 0 0 10px rgba(56, 189, 248, 0.18);
+}
+
+.root :global(.city-item .city-deviation-hot.strong) {
+  text-shadow: 0 0 10px rgba(245, 158, 11, 0.24);
+}
+
+.root :global(.city-item .risk-dot) {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.root :global(.city-item .risk-dot.high) {
+  background: var(--risk-high);
+  box-shadow: 0 0 6px var(--risk-high);
+}
+.root :global(.city-item .risk-dot.medium) {
+  background: var(--risk-medium);
+  box-shadow: 0 0 6px var(--risk-medium);
+}
+.root :global(.city-item .risk-dot.low) {
+  background: var(--risk-low);
+  box-shadow: 0 0 6px var(--risk-low);
+}
+
+.root :global(.city-clock-icon) {
+  display: inline-block;
+  vertical-align: -1px;
+  margin-right: 3px;
+  opacity: 0.6;
+}
+
+.root :global(.city-item .city-temp) {
+  margin-left: auto;
+  font-size: 13px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--accent-cyan);
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+.root :global(.city-item .city-temp.loaded) {
+  opacity: 1;
+}
+
+/* ── Responsive ── */
+@media (max-width: 1100px) {
+  .root {
+    --panel-width: 460px;
+  }
+  .root :global(.hero-value) {
+    font-size: 52px;
+  }
+}
+
+@media (max-width: 768px) {
+  .root :global(.header) {
+    height: auto;
+    min-height: var(--header-height);
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 12px;
+  }
+
+  .root :global(.brand) {
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .root :global(.header-right) {
+    flex: 1 1 auto;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .root :global(.lang-switch) {
+    order: 1;
+  }
+
+  .root :global(.account-btn),
+  .root :global(.info-btn) {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  .root :global(.live-badge) {
+    order: 4;
+    padding: 4px 10px;
+    white-space: nowrap;
+  }
+
+  .root :global(.refresh-btn) {
+    order: 5;
+  }
+
+  .root :global(.city-list) {
+    display: flex;
+    top: auto;
+    left: 8px;
+    right: 8px;
+    bottom: 8px;
+    width: auto;
+    max-height: min(36vh, 320px);
+    border-radius: 14px;
+    z-index: 920;
+  }
+  .root :global(.detail-panel) {
+    width: 100%;
+  }
+  .root {
+    --panel-width: 100%;
+  }
+
+  .root :global(.city-list-header) {
+    padding: 12px 14px;
+    font-size: 14px;
+  }
+
+  .root :global(.city-list-items) {
+    padding: 6px;
+  }
+
+  .root :global(.city-group-header) {
+    padding: 8px 9px;
+  }
+
+  .root :global(.city-item) {
+    padding: 8px 9px;
+  }
+
+  .root :global(.city-item .city-name-text),
+  .root :global(.city-item .city-temp) {
+    font-size: 12px;
+  }
+
+  .root :global(.city-item-info) {
+    padding-left: 18px;
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+
+  .root :global(.panel-header) {
+    padding: 16px 16px 14px;
+  }
+}
+
+@media (max-width: 600px) {
+  .root :global(.header) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  .root :global(.brand) {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .root :global(.subtitle) {
+    display: none;
+  }
+  .root :global(.brand h1) {
+    font-size: 16px;
+  }
+
+  .root :global(.header-right) {
+    width: 100%;
+    justify-content: flex-start;
+    gap: 6px;
+  }
+
+  .root :global(.lang-switch) {
+    margin-right: auto;
+  }
+
+  .root :global(.account-btn),
+  .root :global(.info-btn) {
+    min-height: 34px;
+    padding: 6px 9px;
+    font-size: 11px;
+  }
+
+  .root :global(.account-btn span),
+  .root :global(.info-btn span) {
+    max-width: 88px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .root :global(.live-badge) {
+    padding: 4px 8px;
+    font-size: 10px;
+    letter-spacing: 0.6px;
+  }
+
+  .root :global(.refresh-btn) {
+    width: 34px;
+    height: 34px;
+    font-size: 16px;
+  }
+
+  .root :global(.hero-value) {
+    font-size: 42px;
+  }
+  .root :global(.hero-details) {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+  }
+  .root :global(.hero-item .value) {
+    font-size: 14px;
+  }
+
+  .root :global(.city-list) {
+    left: 6px;
+    right: 6px;
+    bottom: 6px;
+    max-height: min(40vh, 300px);
+  }
+
+  .root :global(.city-list-header) {
+    padding: 10px 12px;
+  }
+
+  .root :global(.city-group-title) {
+    font-size: 11px;
+  }
+
+  .root :global(.city-item-main) {
+    gap: 6px;
+  }
+
+  .root :global(.city-item-info) {
+    font-size: 9px;
+  }
+
+  .root :global(.panel-header) {
+    padding: 14px 14px 12px;
+  }
+
+  .root :global(.city-marker:hover) {
+    transform: none;
+  }
+
+  .root :global(.marker-bubble) {
+    min-width: 48px;
+    min-height: 32px;
+    padding: 6px 10px;
+  }
+
+  .root :global(.marker-name) {
+    font-size: 11px;
+  }
+
+  .root :global(.prob-price-grid) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .root :global(.prob-price-head) {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

frontend/components/dashboard/DetailMiniTemperatureChart.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import type { ChartConfiguration } from "chart.js";
+import { useMemo } from "react";
+import { useChart } from "@/hooks/useChart";
+import { useI18n } from "@/hooks/useI18n";
+import { getTemperatureChartData } from "@/lib/chart-utils";
+import type { CityDetail } from "@/lib/dashboard-types";
+
+export function DetailMiniTemperatureChart({ detail }: { detail: CityDetail }) {
+  const { locale } = useI18n();
+  const chartData = useMemo(
+    () => getTemperatureChartData(detail, locale),
+    [detail, locale],
+  );
+  const forecastLabel = locale === "en-US" ? "DEB baseline" : "DEB 原始路径";
+  const calibratedLabel =
+    locale === "en-US"
+      ? "METAR-calibrated path"
+      : "METAR 修正路径";
+  const observationLabel =
+    chartData?.observationLabel ||
+    (locale === "en-US" ? "METAR Observation" : "METAR 实况");
+  const hasCalibratedPath = Boolean(
+    chartData?.datasets.calibratedFuture.some((value) => value != null),
+  );
+
+  const canvasRef = useChart(() => {
+    if (!chartData) {
+      return {
+        data: { datasets: [], labels: [] },
+        type: "line",
+      } satisfies ChartConfiguration<"line">;
+    }
+
+    const datasets: NonNullable<
+      ChartConfiguration<"line">["data"]
+    >["datasets"] = [
+      {
+        borderColor: "rgba(100, 116, 139, 0.72)",
+        borderDash: [6, 4],
+        borderWidth: 1.5,
+        data: chartData.datasets.debPast.map(
+          (value, index) => value ?? chartData.datasets.debFuture[index],
+        ),
+        fill: false,
+        label: forecastLabel,
+        pointRadius: 0,
+        spanGaps: true,
+        tension: 0.28,
+      },
+    ];
+
+    if (hasCalibratedPath) {
+      datasets.push({
+        borderColor: "#38bdf8",
+        borderWidth: 2.1,
+        data: chartData.datasets.calibratedFuture,
+        fill: false,
+        label: calibratedLabel,
+        pointRadius: 0,
+        spanGaps: true,
+        tension: 0.3,
+      });
+    }
+
+    datasets.push({
+      backgroundColor: "#22c55e",
+      borderColor: "#22c55e",
+      borderWidth: 0,
+      data: chartData.datasets.metarPoints,
+      fill: false,
+      label: observationLabel,
+      pointHoverRadius: 5,
+      pointRadius: 3.2,
+      showLine: false,
+    });
+
+    return {
+      data: {
+        datasets,
+        labels: chartData.times,
+      },
+      options: {
+        interaction: { intersect: false, mode: "index" },
+        layout: { padding: { bottom: 0, left: 0, right: 6, top: 4 } },
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            backgroundColor: "rgba(15, 23, 42, 0.95)",
+            borderColor: "rgba(77, 163, 255, 0.28)",
+            borderWidth: 1,
+          },
+        },
+        responsive: true,
+        scales: {
+          x: {
+            grid: { color: "rgba(255,255,255,0.03)" },
+            ticks: {
+              callback: (_value, index) =>
+                typeof index === "number" && index % 4 === 0
+                  ? chartData.times[index]
+                  : "",
+              color: "#6B7A90",
+              font: { size: 10 },
+              maxTicksLimit: 6,
+              maxRotation: 0,
+            },
+          },
+          y: {
+            grid: { color: "rgba(255,255,255,0.03)" },
+            max: chartData.max,
+            min: chartData.min,
+            ticks: {
+              callback: (value) =>
+                `${Number(value).toFixed(chartData.yTickStep < 1 ? 1 : 0)}${detail.temp_symbol || "°C"}`,
+              color: "#6B7A90",
+              font: { size: 10 },
+              maxTicksLimit: 5,
+              stepSize: chartData.yTickStep,
+            },
+          },
+        },
+      },
+      type: "line",
+    } satisfies ChartConfiguration<"line">;
+  }, [
+    calibratedLabel,
+    chartData,
+    detail.temp_symbol,
+    forecastLabel,
+    hasCalibratedPath,
+    observationLabel,
+  ]);
+
+  return (
+    <div className="detail-mini-chart-wrap">
+      <div className="detail-mini-chart">
+        <canvas ref={canvasRef} />
+      </div>
+      {chartData ? (
+        <div className="detail-mini-chart-legend">
+          <span>
+            <i className="forecast baseline" />
+            {forecastLabel}
+          </span>
+          {hasCalibratedPath ? (
+            <span>
+              <i className="forecast calibrated" />
+              {calibratedLabel}
+            </span>
+          ) : null}
+          <span>
+            <i className="observation" />
+            {observationLabel}
+          </span>
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/components/dashboard/DetailPanel.tsx

@@ -1,150 +1,29 @@
 "use client";
 
-import type { ChartConfiguration } from "chart.js";
 import clsx from "clsx";
+import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ForecastTable } from "@/components/dashboard/PanelSections";
-import { useChart } from "@/hooks/useChart";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
 import { getOfficialSourceLinks } from "@/lib/dashboard-official-sources";
-import { CityDetail } from "@/lib/dashboard-types";
 import { trackAppEvent } from "@/lib/app-analytics";
 import { getTodayPolymarketUrl } from "@/lib/polymarket-market-links";
-import {
-  getCityProfileStats,
-  getRiskBadgeLabel,
-  getTemperatureChartData,
-} from "@/lib/dashboard-utils";
+import { getCityProfileStats } from "@/lib/dashboard-utils";
 import { normalizeObservationSourceLabel } from "@/lib/source-labels";
+import { getRiskBadgeLabel } from "@/lib/weather-summary-utils";
 
-function DetailMiniTemperatureChart({ detail }: { detail: CityDetail }) {
-  const { locale, t } = useI18n();
-  const chartData = useMemo(
-    () => getTemperatureChartData(detail, locale),
-    [detail, locale],
-  );
-  const forecastLabel = chartData?.datasets.hasMgmHourly
-    ? locale === "en-US"
-      ? "MGM Forecast"
-      : "MGM 预测"
-    : locale === "en-US"
-      ? "DEB Forecast"
-      : "DEB 预测";
-  const observationLabel =
-    chartData?.observationLabel ||
-    (locale === "en-US" ? "METAR Observation" : "METAR 实况");
-
-  const canvasRef = useChart(() => {
-    if (!chartData) {
-      return {
-        data: { datasets: [], labels: [] },
-        type: "line",
-      } satisfies ChartConfiguration<"line">;
-    }
-
-    const forecastPoints = chartData.datasets.hasMgmHourly
-      ? chartData.datasets.mgmHourlyPoints
-      : chartData.datasets.debPast.map(
-          (value, index) => value ?? chartData.datasets.debFuture[index],
-        );
-
-    return {
-      data: {
-        datasets: [
-          {
-            borderColor: chartData.datasets.hasMgmHourly
-              ? "rgba(250, 204, 21, 0.92)"
-              : "rgba(52, 211, 153, 0.86)",
-            borderWidth: 1.8,
-            data: forecastPoints,
-            fill: false,
-            label: forecastLabel,
-            pointRadius: 0,
-            spanGaps: true,
-            tension: 0.28,
-          },
-          {
-            backgroundColor: "#4DA3FF",
-            borderColor: "#4DA3FF",
-            borderWidth: 0,
-            data: chartData.datasets.metarPoints,
-            fill: false,
-            label: observationLabel,
-            pointHoverRadius: 5,
-            pointRadius: 3.2,
-            showLine: false,
-          },
-        ],
-        labels: chartData.times,
-      },
-      options: {
-        interaction: { intersect: false, mode: "index" },
-        layout: { padding: { bottom: 0, left: 0, right: 6, top: 4 } },
-        maintainAspectRatio: false,
-        plugins: {
-          legend: { display: false },
-          tooltip: {
-            backgroundColor: "rgba(15, 23, 42, 0.95)",
-            borderColor: "rgba(77, 163, 255, 0.28)",
-            borderWidth: 1,
-          },
-        },
-        responsive: true,
-        scales: {
-          x: {
-            grid: { color: "rgba(255,255,255,0.03)" },
-            ticks: {
-              callback: (_value, index) =>
-                typeof index === "number" && index % 4 === 0
-                  ? chartData.times[index]
-                  : "",
-              color: "#6B7A90",
-              font: { size: 10 },
-              maxTicksLimit: 6,
-              maxRotation: 0,
-            },
-          },
-          y: {
-            grid: { color: "rgba(255,255,255,0.03)" },
-            max: chartData.max,
-            min: chartData.min,
-            ticks: {
-              callback: (value) =>
-                `${Number(value).toFixed(chartData.yTickStep < 1 ? 1 : 0)}${detail.temp_symbol || "°C"}`,
-              color: "#6B7A90",
-              font: { size: 10 },
-              maxTicksLimit: 5,
-              stepSize: chartData.yTickStep,
-            },
-          },
-        },
-      },
-      type: "line",
-    } satisfies ChartConfiguration<"line">;
-  }, [chartData, detail.temp_symbol, forecastLabel, observationLabel]);
-
-  return (
-    <div className="detail-mini-chart-wrap">
-      <div className="detail-mini-chart">
-        <canvas ref={canvasRef} />
-      </div>
-      {chartData ? (
-        <div className="detail-mini-chart-legend">
-          <span>
-            <i className="forecast" />
-            {forecastLabel}
-          </span>
-          <span>
-            <i className="observation" />
-            {observationLabel}
-          </span>
-        </div>
-      ) : null}
-    </div>
-  );
-}
+const DetailMiniTemperatureChart = dynamic(
+  () =>
+    import("@/components/dashboard/DetailMiniTemperatureChart").then(
+      (module) => module.DetailMiniTemperatureChart,
+    ),
+  {
+    loading: () => <div className="detail-mini-chart detail-mini-chart-loading" />,
+    ssr: false,
+  },
+);
 
 export function DetailPanel({
   variant = "overlay",

frontend/components/dashboard/DetailPanelChrome.module.css

@@ -210,4 +210,3 @@
   font-size: 13px;
   line-height: 1.7;
 }
-

frontend/components/dashboard/DetailPanelContent.module.css

@@ -0,0 +1,294 @@
+/* Detail panel content styles. */
+
+.root :global(.detail-grid) {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.root :global(.detail-card) {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.root :global(.detail-source-list) {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.root :global(.detail-source-note) {
+  margin: 8px 0 12px;
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.root :global(.detail-source-link) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--border-subtle);
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-main);
+  text-decoration: none;
+  transition:
+    background 0.18s ease,
+    border-color 0.18s ease,
+    transform 0.18s ease;
+}
+
+.root :global(.detail-source-link:hover) {
+  background: rgba(34, 211, 238, 0.08);
+  border-color: rgba(34, 211, 238, 0.28);
+  transform: translateY(-1px);
+}
+
+.root :global(.detail-source-kind) {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--accent-cyan);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.root :global(.detail-source-label) {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-main);
+  text-align: right;
+}
+
+.root :global(.detail-label) {
+  display: block;
+  color: var(--text-muted);
+  font-size: 11px;
+  margin-bottom: 6px;
+}
+
+.root :global(.detail-value) {
+  display: block;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.root :global(.profile-lead) {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.root :global(.detail-mini-chart-wrap) {
+  display: grid;
+  gap: 10px;
+}
+
+.root :global(.detail-mini-chart) {
+  position: relative;
+  height: 210px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
+  padding: 10px;
+}
+
+.root :global(.scan-city-detail-rail .detail-mini-chart) {
+  height: 230px;
+}
+
+.root :global(.detail-mini-chart canvas) {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.root :global(.detail-mini-chart-legend) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.root :global(.detail-mini-chart-legend span) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.root :global(.detail-mini-chart-legend i) {
+  width: 16px;
+  height: 3px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.root :global(.detail-mini-chart-legend i.forecast) {
+  background: rgba(100, 116, 139, 0.72);
+}
+
+.root :global(.detail-mini-chart-legend i.forecast.calibrated) {
+  background: #38bdf8;
+}
+
+.root :global(.detail-mini-chart-legend i.observation) {
+  width: 7px;
+  height: 7px;
+  background: #22c55e;
+}
+
+.root :global(.detail-mini-meta) {
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.root :global(.insight-list) {
+  display: grid;
+  gap: 10px;
+}
+
+.root :global(.insight-item) {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.root :global(.insight-title) {
+  color: var(--accent-cyan);
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+
+.root :global(.insight-text) {
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.root :global(.detail-scenery-card) {
+  position: relative;
+  min-height: 210px;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  background:
+    linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.78)),
+    rgba(255, 255, 255, 0.03);
+}
+
+.root :global(.detail-scenery-image) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.root :global(.detail-scenery-overlay) {
+  position: relative;
+  z-index: 1;
+  min-height: 210px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: linear-gradient(
+    180deg,
+    rgba(2, 6, 23, 0.08) 0%,
+    rgba(2, 6, 23, 0.86) 100%
+  );
+}
+
+.root :global(.detail-scenery-copy),
+.root :global(.detail-scenery-fallback) {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.root :global(.detail-scenery-fallback) {
+  min-height: 210px;
+  padding: 18px;
+  justify-content: flex-end;
+  background:
+    radial-gradient(
+      circle at top left,
+      rgba(34, 211, 238, 0.12),
+      transparent 34%
+    ),
+    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
+}
+
+.root :global(.detail-scenery-kicker) {
+  color: rgba(226, 232, 240, 0.78);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.root :global(.detail-scenery-title) {
+  color: #fff;
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  text-shadow: 0 6px 22px rgba(2, 6, 23, 0.42);
+}
+
+.root :global(.detail-scenery-subtitle) {
+  max-width: 320px;
+  color: rgba(226, 232, 240, 0.9);
+  font-size: 13px;
+  line-height: 1.6;
+  text-shadow: 0 2px 10px rgba(2, 6, 23, 0.45);
+}
+
+.root :global(.detail-scenery-credit) {
+  align-self: flex-start;
+  color: rgba(226, 232, 240, 0.9);
+  font-size: 11px;
+  text-decoration: none;
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(2, 6, 23, 0.35);
+  backdrop-filter: blur(10px);
+}
+
+.root :global(.detail-scenery-credit:hover) {
+  border-color: rgba(34, 211, 238, 0.4);
+  color: #fff;
+}
+
+@media (max-width: 640px) {
+  .root :global(.detail-grid) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.detail-mini-chart) {
+    height: 170px;
+  }
+
+  .root :global(.detail-source-link) {
+    padding: 10px 12px;
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .root :global(.detail-source-label) {
+    text-align: left;
+  }
+}

frontend/components/dashboard/FutureForecastForwardView.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import type { useDashboardStore } from "@/hooks/useDashboardStore";
+import type { useI18n } from "@/hooks/useI18n";
+import type { getFutureModalView } from "@/lib/dashboard-utils";
+import {
+  FutureModelForecastPanel,
+  FutureProbabilityPanel,
+  FutureTemperaturePathChart,
+} from "./FutureForecastModalPanels";
+
+type DashboardDetail = NonNullable<
+  ReturnType<typeof useDashboardStore>["selectedDetail"]
+>;
+type FutureModalView = ReturnType<typeof getFutureModalView>;
+type TranslationFn = ReturnType<typeof useI18n>["t"];
+
+export function FutureForecastForwardView({
+  dateStr,
+  detail,
+  t,
+  view,
+}: {
+  dateStr: string;
+  detail: DashboardDetail;
+  t: TranslationFn;
+  view: FutureModalView;
+}) {
+  return (
+    <>
+      <div className="future-forward-stats">
+        <div className="future-forward-stat-card">
+          <span className="label">{t("future.targetForecast")}</span>
+          <span className="val">
+            {view.forecastEntry?.max_temp ?? "--"}
+            {detail.temp_symbol}
+          </span>
+        </div>
+        <div className="future-forward-stat-card">
+          <span className="label">{t("future.deb")}</span>
+          <span className="val">
+            {view.deb ?? "--"}
+            {detail.temp_symbol}
+          </span>
+        </div>
+        <div className="future-forward-stat-card">
+          <span className="label">{t("future.mu")}</span>
+          <span className="val">
+            {view.mu != null
+              ? `${view.mu.toFixed(1)}${detail.temp_symbol}`
+              : "--"}
+          </span>
+        </div>
+        <div className="future-forward-stat-card">
+          <span className="label">{t("future.score")}</span>
+          <span className="val">
+            {view.front.score > 0 ? "+" : ""}
+            {view.front.score}
+          </span>
+        </div>
+      </div>
+
+      <section className="future-modal-section">
+        <h3>{t("future.targetTempTrend")}</h3>
+        <FutureTemperaturePathChart dateStr={dateStr} forceToday={false} />
+      </section>
+
+      <div className="future-modal-grid">
+        <section className="future-modal-section">
+          <h3>{t("future.probability")}</h3>
+          <FutureProbabilityPanel detail={detail} targetDate={dateStr} hideTitle />
+        </section>
+        <section className="future-modal-section">
+          <h3>{t("future.models")}</h3>
+          <FutureModelForecastPanel detail={detail} targetDate={dateStr} hideTitle />
+        </section>
+      </div>
+    </>
+  );
+}

frontend/components/dashboard/FutureForecastModal.utils.ts

@@ -0,0 +1,252 @@
+import type { IntradayMeteorologySignal } from "@/lib/dashboard-types";
+
+export const TODAY_MARKET_SCAN_AUTO_REFRESH_MS = 5 * 60 * 1000;
+
+export function normalizeMarketValue(value?: number | null) {
+  if (value == null) return null;
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return null;
+  if (numeric > 1) return Math.max(0, Math.min(1, numeric / 100));
+  return Math.max(0, Math.min(1, numeric));
+}
+
+export function formatMinuteAxisLabel(value: number) {
+  if (!Number.isFinite(value)) return "";
+  const total = Math.max(0, Math.round(value));
+  const hour = Math.floor(total / 60) % 24;
+  const minute = total % 60;
+  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+}
+
+export function formatMarketPercent(value?: number | null) {
+  const normalized = normalizeMarketValue(value);
+  if (normalized == null) return "--";
+  return `${(normalized * 100).toFixed(1)}%`;
+}
+
+export function formatBucketLabel(
+  bucket?: {
+    label?: string | null;
+    bucket?: string | null;
+    range?: string | null;
+    value?: number | null;
+    temp?: number | null;
+  } | null,
+) {
+  if (!bucket) return "--";
+  const direct =
+    String(bucket.label || "").trim() ||
+    String(bucket.bucket || "").trim() ||
+    String(bucket.range || "").trim();
+  if (direct) {
+    let str = direct.toUpperCase().replace(/\s+/g, "");
+    str = str.replace(/°?C($|\+|-)/g, "℃$1");
+    if (!str.includes("℃") && /[0-9]/.test(str)) {
+      str += "℃";
+    }
+    return str;
+  }
+
+  const temp = Number(bucket.value ?? bucket.temp);
+  if (Number.isFinite(temp)) {
+    return `${Math.round(temp)}℃`;
+  }
+  return "--";
+}
+
+export function parseBucketBoundaries(
+  bucket?: {
+    label?: string | null;
+    bucket?: string | null;
+    range?: string | null;
+    value?: number | null;
+    temp?: number | null;
+  } | null,
+) {
+  if (!bucket) return null;
+  const raw =
+    String(bucket.label || "").trim() ||
+    String(bucket.bucket || "").trim() ||
+    String(bucket.range || "").trim();
+  if (!raw) return null;
+  const numbers = Array.from(raw.matchAll(/-?\d+(?:\.\d+)?/g)).map((match) =>
+    Number(match[0]),
+  );
+  if (!numbers.length) return null;
+  if (raw.includes("+")) {
+    return {
+      lower: numbers[0] ?? null,
+      upper: null as number | null,
+      boundaryLabel: `${numbers[0]}°C`,
+    };
+  }
+  if (numbers.length >= 2) {
+    return {
+      lower: numbers[0],
+      upper: numbers[1],
+      boundaryLabel: null as string | null,
+    };
+  }
+  return {
+    lower: numbers[0],
+    upper: null as number | null,
+    boundaryLabel: `${numbers[0]}°C`,
+  };
+}
+
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function parseClockMinutes(value?: string | null) {
+  const text = String(value || "").trim();
+  const match = text.match(/^(\d{1,2}):(\d{2})$/);
+  if (!match) return null;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return null;
+  return hours * 60 + minutes;
+}
+
+export function parseLeadingNumber(value?: string | number | null) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  const text = String(value || "").trim();
+  const match = text.match(/[-+]?\d+(?:\.\d+)?/);
+  if (!match) return null;
+  const numeric = Number(match[0]);
+  return Number.isFinite(numeric) ? numeric : null;
+}
+
+export function parsePercentFromText(value?: string | number | null) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return clamp(value, 0, 100);
+  }
+  const text = String(value || "").trim();
+  const percentMatch = text.match(/([-+]?\d+(?:\.\d+)?)\s*%/);
+  if (percentMatch) {
+    const numeric = Number(percentMatch[1]);
+    return Number.isFinite(numeric) ? clamp(numeric, 0, 100) : null;
+  }
+  return parseLeadingNumber(text);
+}
+
+export function formatConfidenceLabel(value?: string | null, locale = "zh-CN") {
+  const normalized = String(value || "")
+    .trim()
+    .toLowerCase();
+  if (normalized === "high") return locale === "en-US" ? "High" : "高";
+  if (normalized === "medium") return locale === "en-US" ? "Medium" : "中";
+  if (normalized === "low") return locale === "en-US" ? "Low" : "低";
+  return locale === "en-US" ? "Pending" : "待确认";
+}
+
+export function formatSignalDirection(value?: string | null, locale = "zh-CN") {
+  const normalized = String(value || "")
+    .trim()
+    .toLowerCase();
+  if (normalized === "support")
+    return locale === "en-US" ? "Support" : "支持升温";
+  if (normalized === "suppress")
+    return locale === "en-US" ? "Suppress" : "压制峰值";
+  return locale === "en-US" ? "Neutral" : "中性";
+}
+
+export function formatSignalStrength(value?: string | null, locale = "zh-CN") {
+  const normalized = String(value || "")
+    .trim()
+    .toLowerCase();
+  if (normalized === "strong") return locale === "en-US" ? "Strong" : "强";
+  if (normalized === "medium") return locale === "en-US" ? "Medium" : "中";
+  return locale === "en-US" ? "Weak" : "弱";
+}
+
+export function signalTone(signal?: IntradayMeteorologySignal | null) {
+  const direction = String(signal?.direction || "")
+    .trim()
+    .toLowerCase();
+  if (direction === "support") return "cyan";
+  if (direction === "suppress") return "amber";
+  return "blue";
+}
+
+export function localizedText(
+  locale: string,
+  primary?: string | null,
+  english?: string | null,
+) {
+  const en = String(english || "").trim();
+  const value = String(primary || "").trim();
+  if (locale === "en-US" && en) return en;
+  return value || en;
+}
+
+export function localizedList(
+  locale: string,
+  primary?: string[] | null,
+  english?: string[] | null,
+) {
+  const en = Array.isArray(english)
+    ? english.filter((item) => String(item || "").trim())
+    : [];
+  const value = Array.isArray(primary)
+    ? primary.filter((item) => String(item || "").trim())
+    : [];
+  if (locale === "en-US" && en.length) return en;
+  return value.length ? value : en;
+}
+
+export function getTrendMetricVisual(metric: {
+  label?: string;
+  value?: string;
+  tone?: string;
+}) {
+  const label = String(metric.label || "").toLowerCase();
+  const value = String(metric.value || "");
+  const numeric = parseLeadingNumber(value);
+
+  if (label.includes("降水") || label.includes("precip")) {
+    const precipPercent = parsePercentFromText(value);
+    if (precipPercent == null) return null;
+    return {
+      mode: "fill" as const,
+      percent: precipPercent,
+      tone: "cold" as const,
+    };
+  }
+
+  if (numeric == null) return null;
+
+  if (label.includes("温度") || label.includes("temp")) {
+    return {
+      mode: "center" as const,
+      percent: clamp(50 + (numeric / 4) * 50, 0, 100),
+      tone: numeric >= 0 ? ("warm" as const) : ("cold" as const),
+    };
+  }
+
+  if (label.includes("露点") || label.includes("dew")) {
+    return {
+      mode: "center" as const,
+      percent: clamp(50 + (numeric / 3) * 50, 0, 100),
+      tone: numeric >= 0 ? ("warm" as const) : ("cold" as const),
+    };
+  }
+
+  if (label.includes("气压") || label.includes("pressure")) {
+    return {
+      mode: "center" as const,
+      percent: clamp(50 + (numeric / 4) * 50, 0, 100),
+      tone: numeric >= 0 ? ("warm" as const) : ("cold" as const),
+    };
+  }
+
+  if (label.includes("云量") || label.includes("cloud")) {
+    return {
+      mode: "center" as const,
+      percent: clamp(50 + (numeric / 40) * 50, 0, 100),
+      tone: numeric >= 0 ? ("cold" as const) : ("warm" as const),
+    };
+  }
+
+  return null;
+}

frontend/components/dashboard/FutureForecastModalChart.tsx

@@ -0,0 +1,417 @@
+"use client";
+
+import type { ChartConfiguration } from "chart.js";
+import { useMemo } from "react";
+import { useChart } from "@/hooks/useChart";
+import { useDashboardStore } from "@/hooks/useDashboardStore";
+import { useI18n } from "@/hooks/useI18n";
+import { getTemperatureChartData } from "@/lib/chart-utils";
+import { getFutureModalView } from "@/lib/dashboard-utils";
+import { formatMinuteAxisLabel } from "./FutureForecastModal.utils";
+
+export function DailyTemperatureChart({
+  dateStr,
+  forceToday = false,
+}: {
+  dateStr: string;
+  forceToday?: boolean;
+}) {
+  const store = useDashboardStore();
+  const { locale, t } = useI18n();
+  const detail = store.selectedDetail;
+  const view = detail ? getFutureModalView(detail, dateStr, locale) : null;
+  const isToday =
+    forceToday || (detail ? dateStr === detail.local_date : false);
+  const todayChartData = useMemo(
+    () => (detail && isToday ? getTemperatureChartData(detail, locale) : null),
+    [detail, isToday, locale],
+  );
+
+  const canvasRef = useChart(() => {
+    if (!detail || !view) {
+      return {
+        data: { datasets: [], labels: [] },
+        type: "line",
+      } satisfies ChartConfiguration<"line">;
+    }
+
+    if (isToday && todayChartData) {
+      const datasets: NonNullable<
+        ChartConfiguration<"line">["data"]
+      >["datasets"] = [];
+
+      datasets.push({
+        borderColor: "rgba(100, 116, 139, 0.72)",
+        borderDash: [6, 4],
+        borderWidth: 1.6,
+        data: todayChartData.datasets.debSeries,
+        fill: false,
+        label: locale === "en-US" ? "DEB baseline" : "DEB 原始路径",
+        parsing: false,
+        pointRadius: 0,
+        tension: 0.3,
+      });
+
+      if (todayChartData.datasets.calibratedFutureSeries.length > 0) {
+        datasets.push({
+          borderColor: "#38bdf8",
+          borderWidth: 2.4,
+          data: todayChartData.datasets.calibratedFutureSeries,
+          fill: false,
+          label:
+            locale === "en-US"
+              ? "METAR-calibrated path"
+              : "METAR 修正路径",
+          parsing: false,
+          pointHoverRadius: 5,
+          pointRadius: 0,
+          tension: 0.32,
+        });
+      }
+
+      if (todayChartData.datasets.hasMgmHourly) {
+        datasets.push({
+          backgroundColor: "rgba(234, 179, 8, 0.05)",
+          borderColor: "rgba(234, 179, 8, 0.8)",
+          borderDash: [3, 3],
+          borderWidth: 1.2,
+          data: todayChartData.datasets.mgmHourlySeries,
+          fill: false,
+          label: locale === "en-US" ? "MGM Forecast" : "MGM 预测",
+          parsing: false,
+          pointHoverRadius: 6,
+          pointRadius: 0,
+          spanGaps: true,
+          tension: 0.3,
+        });
+      }
+
+      datasets.push({
+        backgroundColor: "#22c55e",
+        borderColor: "#22c55e",
+        borderWidth: 0,
+        data: todayChartData.datasets.metarSeries,
+        fill: false,
+        label:
+          todayChartData.observationLabel ||
+          (locale === "en-US" ? "Observation" : "观测实况"),
+        order: 0,
+        parsing: false,
+        pointHoverRadius: 7,
+        pointRadius: 5,
+        showLine: false,
+      });
+
+      if (todayChartData.datasets.airportMetarSeries?.length > 0) {
+        datasets.push({
+          backgroundColor: "#86efac",
+          borderColor: "#86efac",
+          borderWidth: 1,
+          data: todayChartData.datasets.airportMetarSeries,
+          fill: false,
+          label: locale === "en-US" ? "Airport METAR" : "机场 METAR",
+          order: 0,
+          parsing: false,
+          pointHoverRadius: 6,
+          pointRadius: 4,
+          showLine: false,
+        });
+      }
+
+      if (todayChartData.datasets.mgmSeries?.length > 0) {
+        datasets.push({
+          backgroundColor: "#facc15",
+          borderColor: "#facc15",
+          borderWidth: 0,
+          data: todayChartData.datasets.mgmSeries,
+          fill: false,
+          label: locale === "en-US" ? "MGM Observation" : "MGM 实测",
+          order: -1,
+          parsing: false,
+          pointHoverRadius: 9,
+          pointRadius: 7,
+          showLine: false,
+        });
+      }
+
+      if (
+        !todayChartData.datasets.hasMgmHourly &&
+        Math.abs(todayChartData.datasets.offset) > 0.3
+      ) {
+        datasets.push({
+          borderColor: "rgba(77, 163, 255, 0.22)",
+          borderDash: [2, 4],
+          borderWidth: 1,
+          data: todayChartData.datasets.tempsSeries,
+          fill: false,
+          label: locale === "en-US" ? "OM Raw" : "OM 原始",
+          parsing: false,
+          pointRadius: 0,
+          tension: 0.3,
+        });
+      }
+      if ((todayChartData.tafMarkers || []).length > 0) {
+        datasets.push({
+          backgroundColor: "#f59e0b",
+          borderColor: "#f59e0b",
+          borderWidth: 0,
+          data: todayChartData.datasets.tafCurrentMarkerSeries,
+          fill: false,
+          label: locale === "en-US" ? "Current TAF" : "当前 TAF",
+          order: -3,
+          parsing: false,
+          pointHoverRadius: 8,
+          pointRadius: 6,
+          showLine: false,
+        });
+        datasets.push({
+          backgroundColor: "rgba(250, 204, 21, 0.72)",
+          borderColor: "rgba(250, 204, 21, 0.72)",
+          borderWidth: 0,
+          data: todayChartData.datasets.tafPeakWindowMarkerSeries,
+          fill: false,
+          label: locale === "en-US" ? "Peak-window TAF" : "峰值窗口 TAF",
+          order: -2,
+          parsing: false,
+          pointHoverRadius: 7,
+          pointRadius: 4,
+          showLine: false,
+        });
+        datasets.push({
+          backgroundColor: "#f59e0b",
+          borderColor: "#f59e0b",
+          borderWidth: 0,
+          data: todayChartData.datasets.tafMarkerSeries,
+          fill: false,
+          label: locale === "en-US" ? "TAF Timing" : "TAF 时段",
+          order: -4,
+          parsing: false,
+          pointHoverRadius: 0,
+          pointRadius: 0,
+          showLine: false,
+        });
+      }
+
+      return {
+        data: {
+          datasets,
+          labels: [],
+        },
+        options: {
+          interaction: { intersect: false, mode: "nearest" },
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              labels: {
+                color: "#9FB2C7",
+                filter: (legendItem, chartData) => {
+                  const text = String(legendItem.text || "");
+                  if (!text) return false;
+                  if (text === "TAF Timing" || text === "TAF 时段")
+                    return false;
+                  if (!text.includes("DEB")) return true;
+
+                  const firstDebIndex = (chartData.datasets || []).findIndex(
+                    (dataset) => String(dataset.label || "").includes("DEB"),
+                  );
+                  return legendItem.datasetIndex === firstDebIndex;
+                },
+                font: { family: "Inter", size: 11 },
+              },
+            },
+            tooltip: {
+              backgroundColor: "rgba(15, 23, 42, 0.96)",
+              borderColor: "rgba(77, 163, 255, 0.24)",
+              borderWidth: 1,
+              callbacks: {
+                title: (items) => {
+                  const rawX = items?.[0]?.parsed?.x;
+                  return rawX != null
+                    ? formatMinuteAxisLabel(Number(rawX))
+                    : "";
+                },
+                label: (ctx) => {
+                  const label = String(ctx.dataset.label || "");
+                  const raw = ctx.raw as
+                    | {
+                        marker?: {
+                          summary?: string;
+                          markerType?: string;
+                          displayType?: string;
+                          isCurrent?: boolean;
+                          isPeakWindow?: boolean;
+                        };
+                      }
+                    | undefined;
+                  if (
+                    label === "TAF Timing" ||
+                    label === "TAF 时段" ||
+                    label === "Current TAF" ||
+                    label === "当前 TAF" ||
+                    label === "Peak-window TAF" ||
+                    label === "峰值窗口 TAF"
+                  ) {
+                    const marker = raw?.marker;
+                    if (!marker) return label;
+                    const markerType = String(marker.markerType || "");
+                    const displayType = String(
+                      marker.displayType || marker.markerType || "",
+                    );
+                    const summary = String(marker.summary || "");
+                    const prefix =
+                      marker.isCurrent && marker.isPeakWindow
+                        ? locale === "en-US"
+                          ? "Current / peak-window TAF"
+                          : "当前 / 峰值窗口 TAF"
+                        : marker.isCurrent
+                          ? locale === "en-US"
+                            ? "Current TAF"
+                            : "当前 TAF"
+                          : marker.isPeakWindow
+                            ? locale === "en-US"
+                              ? "Peak-window TAF"
+                              : "峰值窗口 TAF"
+                            : label;
+                    return `${prefix}: ${
+                      markerType
+                        ? summary.replace(markerType, displayType)
+                        : summary
+                    }`;
+                  }
+                  const value = ctx.parsed.y;
+                  if (value == null) return label;
+                  return `${label}: ${value.toFixed(1)}${detail.temp_symbol || "°C"}`;
+                },
+              },
+            },
+          },
+          responsive: true,
+          scales: {
+            x: {
+              max: todayChartData.xMax,
+              min: todayChartData.xMin,
+              grid: { color: "rgba(255,255,255,0.04)" },
+              type: "linear",
+              ticks: {
+                callback: (value) => {
+                  const num = Number(value);
+                  if (!Number.isFinite(num)) return "";
+                  const minutes = Math.round(num);
+                  if (
+                    minutes !== todayChartData.xMin &&
+                    minutes !== todayChartData.xMax &&
+                    minutes % 120 !== 0
+                  ) {
+                    return "";
+                  }
+                  return formatMinuteAxisLabel(minutes);
+                },
+                color: "#6B7A90",
+                font: { family: "Inter", size: 10 },
+                maxRotation: 0,
+              },
+            },
+            y: {
+              grid: { color: "rgba(255,255,255,0.04)" },
+              max: todayChartData.max,
+              min: todayChartData.min,
+              ticks: {
+                callback: (value) =>
+                  `${Number(value).toFixed(todayChartData.yTickStep < 1 ? 1 : 0)}${detail.temp_symbol || "°C"}`,
+                color: "#6B7A90",
+                font: { family: "Inter", size: 10 },
+                stepSize: todayChartData.yTickStep,
+              },
+            },
+          },
+        },
+        type: "line",
+      } satisfies ChartConfiguration<"line">;
+    }
+
+    const labels = view.slice.map((point) => point.label);
+    const unit = detail.temp_symbol || "°C";
+
+    return {
+      data: {
+        datasets: [
+          {
+            backgroundColor: "rgba(77, 163, 255, 0.08)",
+            borderColor: "#4DA3FF",
+            data: view.slice.map((point) => point.temp),
+            fill: false,
+            label:
+              locale === "en-US" ? "Open-Meteo Temperature" : "Open-Meteo 温度",
+            pointRadius: 2,
+            tension: 0.28,
+          },
+          {
+            backgroundColor: "transparent",
+            borderColor: "#93C5FD",
+            borderDash: [5, 4],
+            data: view.slice.map((point) => point.dewPoint),
+            fill: false,
+            label: locale === "en-US" ? "Dew Point" : "露点",
+            pointRadius: 0,
+            tension: 0.24,
+          },
+        ],
+        labels,
+      },
+      options: {
+        interaction: { intersect: false, mode: "index" },
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            labels: {
+              color: "#9FB2C7",
+              font: { family: "Inter", size: 11 },
+            },
+          },
+          tooltip: {
+            backgroundColor: "rgba(15, 23, 42, 0.96)",
+            borderColor: "rgba(77, 163, 255, 0.24)",
+            borderWidth: 1,
+            callbacks: {
+              label: (ctx) =>
+                `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}${unit}`,
+            },
+          },
+        },
+        responsive: true,
+        scales: {
+          x: {
+            grid: { color: "rgba(255,255,255,0.04)" },
+            ticks: {
+              color: "#6B7A90",
+              font: { family: "Inter", size: 10 },
+              maxRotation: 0,
+            },
+          },
+          y: {
+            grid: { color: "rgba(255,255,255,0.04)" },
+            ticks: {
+              callback: (value) => `${value}${unit}`,
+              color: "#6B7A90",
+              font: { family: "Inter", size: 10 },
+            },
+          },
+        },
+      },
+      type: "line",
+    } satisfies ChartConfiguration<"line">;
+  }, [detail, isToday, locale, todayChartData, view]);
+
+  return (
+    <>
+      <div className="history-chart-wrapper future-chart-wrapper">
+        <canvas ref={canvasRef} />
+      </div>
+      {isToday && (
+        <div className="chart-legend">
+          {todayChartData?.legendText || t("future.chartLegendEmpty")}
+        </div>
+      )}
+    </>
+  );
+}

frontend/components/dashboard/FutureForecastModalPanels.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { useDashboardStore } from "@/hooks/useDashboardStore";
+import type { MarketScan } from "@/lib/dashboard-types";
+
+const DailyTemperatureChart = dynamic(
+  () =>
+    import("./FutureForecastModalChart").then(
+      (module) => module.DailyTemperatureChart,
+    ),
+  {
+    loading: () => <div className="history-chart-wrapper future-chart-wrapper" />,
+    ssr: false,
+  },
+);
+
+const ProbabilityDistribution = dynamic(
+  () =>
+    import("@/components/dashboard/PanelSections").then(
+      (module) => module.ProbabilityDistribution,
+    ),
+  {
+    loading: () => <div className="future-v2-panel-loading" />,
+    ssr: false,
+  },
+);
+
+const ModelForecast = dynamic(
+  () =>
+    import("@/components/dashboard/PanelSections").then(
+      (module) => module.ModelForecast,
+    ),
+  {
+    loading: () => <div className="future-v2-panel-loading" />,
+    ssr: false,
+  },
+);
+
+type DashboardDetail = NonNullable<
+  ReturnType<typeof useDashboardStore>["selectedDetail"]
+>;
+
+export function FutureTemperaturePathChart({
+  dateStr,
+  forceToday,
+}: {
+  dateStr: string;
+  forceToday: boolean;
+}) {
+  return <DailyTemperatureChart dateStr={dateStr} forceToday={forceToday} />;
+}
+
+export function FutureProbabilityPanel({
+  detail,
+  targetDate,
+  marketScan,
+  hideTitle = true,
+}: {
+  detail: DashboardDetail;
+  targetDate: string;
+  marketScan?: MarketScan | null;
+  hideTitle?: boolean;
+}) {
+  return (
+    <ProbabilityDistribution
+      detail={detail}
+      targetDate={targetDate}
+      marketScan={marketScan}
+      hideTitle={hideTitle}
+    />
+  );
+}
+
+export function FutureModelForecastPanel({
+  detail,
+  targetDate,
+  hideTitle = true,
+}: {
+  detail: DashboardDetail;
+  targetDate: string;
+  hideTitle?: boolean;
+}) {
+  return (
+    <ModelForecast detail={detail} targetDate={targetDate} hideTitle={hideTitle} />
+  );
+}

frontend/components/dashboard/FutureForecastModalStatus.tsx

@@ -0,0 +1,63 @@
+import clsx from "clsx";
+
+export type FutureSyncStatusItem = {
+  key: string;
+  state: "ready" | "syncing";
+  label: string;
+  note: string;
+};
+
+export function FutureRefreshLock({ locale }: { locale: string }) {
+  return (
+    <div
+      className="future-v2-refresh-lock"
+      role="status"
+      aria-live="assertive"
+    >
+      <span className="future-v2-refresh-spinner" aria-hidden="true" />
+      <div>
+        <strong>
+          {locale === "en-US"
+            ? "Refreshing latest intraday data"
+            : "正在刷新最新日内数据"}
+        </strong>
+        <p>
+          {locale === "en-US"
+            ? "Old cached readings are temporarily locked to prevent misjudgement. The analysis will unlock after the latest anchor observation, model layer, and probability layer are ready."
+            : "旧缓存读数已临时锁定，避免误判。最新锚点观测、模型层和概率层就绪后会自动解锁。"}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function FutureSyncStatusStrip({
+  items,
+  compact = false,
+}: {
+  items: readonly FutureSyncStatusItem[];
+  compact?: boolean;
+}) {
+  return (
+    <section
+      className={clsx("future-v2-sync-strip", compact && "future-v2-sync-strip-compact")}
+      aria-live="polite"
+    >
+      {items.map((item) => (
+        <div
+          key={item.key}
+          className={clsx(
+            "future-v2-sync-chip",
+            item.state === "syncing" && "syncing",
+          )}
+        >
+          <span className="future-v2-sync-dot" aria-hidden="true" />
+          <div className="future-v2-sync-copy">
+            <strong>{item.label}</strong>
+            <span>{item.note}</span>
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}

frontend/components/dashboard/FutureForecastModalWeatherIcon.tsx

@@ -0,0 +1,26 @@
+import {
+  Cloud,
+  CloudFog,
+  CloudLightning,
+  CloudRain,
+  CloudSnow,
+  CloudSun,
+  Search,
+  Sun,
+  Wind,
+} from "lucide-react";
+
+export function WeatherIcon({ emoji, size = 32 }: { emoji: string; size?: number }) {
+  if (emoji === "☀️") return <Sun size={size} color="#facc15" />;
+  if (emoji === "⛅" || emoji === "🌤️")
+    return <CloudSun size={size} color="#4DA3FF" />;
+  if (emoji === "☁️") return <Cloud size={size} color="#9FB2C7" />;
+  if (emoji === "🌧️" || emoji === "🌦️")
+    return <CloudRain size={size} color="#60a5fa" />;
+  if (emoji === "⛈️") return <CloudLightning size={size} color="#c084fc" />;
+  if (emoji === "❄️" || emoji === "🌨️")
+    return <CloudSnow size={size} color="#7dd3fc" />;
+  if (emoji === "🌫️") return <CloudFog size={size} color="#a1a1aa" />;
+  if (emoji === "💨") return <Wind size={size} color="#cbd5e1" />;
+  return <Search size={size} color="#6B7A90" />;
+}

frontend/components/dashboard/FutureForecastTodayCards.tsx

@@ -0,0 +1,281 @@
+import clsx from "clsx";
+import type { CSSProperties } from "react";
+import type { getTodayPaceView } from "@/lib/pace-utils";
+import { WeatherIcon } from "./FutureForecastModalWeatherIcon";
+
+type Locale = string;
+type TodayPaceView = NonNullable<ReturnType<typeof getTodayPaceView>>;
+
+type WeatherSummaryView = {
+  weatherIcon: string;
+  weatherText: string;
+};
+
+type DaylightProgressView = {
+  phase: string;
+  percent: number;
+};
+
+export type FuturePaceSignalItem = {
+  label: string;
+  tone: "cyan" | "blue" | "amber";
+  status: string;
+  value: string;
+  note: string;
+};
+
+export function FutureAnchorStatusCard({
+  locale,
+  currentTempText,
+  weatherSummary,
+  obsTime,
+  daylightProgress,
+  sunrise,
+  sunset,
+  topObservedTemp,
+  tempSymbol,
+  gapToBaseBucket,
+  pathStatus,
+}: {
+  locale: Locale;
+  currentTempText: string;
+  weatherSummary: WeatherSummaryView;
+  obsTime?: string | null;
+  daylightProgress: DaylightProgressView | null;
+  sunrise?: string | null;
+  sunset?: string | null;
+  topObservedTemp: number | string | null | undefined;
+  tempSymbol: string;
+  gapToBaseBucket: number | null;
+  pathStatus: string;
+}) {
+  const observedHigh = topObservedTemp ?? "--";
+
+  return (
+    <section className="future-v2-card future-v2-hero-card">
+      <div className="future-v2-card-head">
+        <h3 className="future-v2-hero-title">
+          {locale === "en-US" ? "Anchor Status" : "锚点状态"}
+        </h3>
+        <div className="future-v2-card-kicker">
+          {locale === "en-US"
+            ? "Settlement anchor and current clock"
+            : "结算锚点与当前时钟"}
+        </div>
+      </div>
+      <div className="future-v2-hero-main">
+        <div className="future-v2-hero-temp">{currentTempText}</div>
+        <div className="future-v2-hero-divider" />
+        <div className="future-v2-hero-weather">
+          <span className="future-v2-hero-icon">
+            <WeatherIcon emoji={weatherSummary.weatherIcon} size={42} />
+          </span>
+          <span>{weatherSummary.weatherText}</span>
+        </div>
+      </div>
+      <div className="future-v2-hero-obs">@{obsTime || "--"}</div>
+      {daylightProgress ? (
+        <div className="future-v2-daylight">
+          <div className="future-v2-daylight-head">
+            <span>{locale === "en-US" ? "Solar Window" : "昼夜进度"}</span>
+            <strong>
+              {daylightProgress.phase} {Math.round(daylightProgress.percent)}%
+            </strong>
+          </div>
+          <div
+            className="future-v2-daylight-bar"
+            style={
+              {
+                "--daylight-progress": `${daylightProgress.percent}%`,
+              } as CSSProperties & { "--daylight-progress": string }
+            }
+          />
+          <div className="future-v2-daylight-times">
+            <span>{sunrise || "--"}</span>
+            <span>{sunset || "--"}</span>
+          </div>
+        </div>
+      ) : null}
+      <div className="future-v2-mini-grid">
+        <FutureMiniMetric
+          label={locale === "en-US" ? "High so far" : "日内已见高点"}
+          value={`${observedHigh}${tempSymbol}`}
+        />
+        <FutureMiniMetric
+          label={locale === "en-US" ? "Anchor clock" : "锚点时钟"}
+          value={obsTime || "--"}
+        />
+        <FutureMiniMetric
+          label={locale === "en-US" ? "Gap to base" : "距基准档"}
+          value={
+            gapToBaseBucket != null
+              ? `${gapToBaseBucket.toFixed(1)}${tempSymbol}`
+              : "--"
+          }
+        />
+        <FutureMiniMetric
+          label={locale === "en-US" ? "Path state" : "路径状态"}
+          value={pathStatus}
+        />
+        <FutureMiniMetric
+          label={locale === "en-US" ? "Sunrise" : "日出时间"}
+          value={sunrise || "--"}
+        />
+        <FutureMiniMetric
+          label={locale === "en-US" ? "Sunset" : "日落时间"}
+          value={sunset || "--"}
+        />
+      </div>
+    </section>
+  );
+}
+
+export function FuturePaceCard({
+  locale,
+  paceView,
+  tempSymbol,
+  signalItems,
+}: {
+  locale: Locale;
+  paceView: TodayPaceView;
+  tempSymbol: string;
+  signalItems: FuturePaceSignalItem[];
+}) {
+  return (
+    <section className="future-v2-card future-v2-pace-card future-v2-focus-card">
+      <div className="future-v2-card-head">
+        <h4 className="future-v2-card-title">
+          {locale === "en-US" ? "Current Pace" : "当前节奏"}
+        </h4>
+        <div className="future-v2-card-kicker">
+          {locale === "en-US"
+            ? "Expected now vs airport anchor"
+            : "此刻应到 vs 机场锚点"}
+        </div>
+      </div>
+      <div className="future-v2-pace-head">
+        <span className="future-v2-pace-kicker">{paceView.kicker}</span>
+        <FutureSignalTag tone={paceView.biasTone}>{paceView.badge}</FutureSignalTag>
+      </div>
+      <div
+        className={clsx(
+          "future-v2-pace-delta",
+          paceView.biasTone === "cold" && "cold",
+          paceView.biasTone === "neutral" && "neutral",
+          paceView.biasTone === "warm" && "warm",
+        )}
+      >
+        {paceView.deltaText}
+      </div>
+      <div className="future-v2-pace-summary">{paceView.summary}</div>
+      <div className="future-v2-pace-meter">
+        <span className="future-v2-pace-meter-midline" />
+        <span
+          className={clsx(
+            "future-v2-pace-meter-fill",
+            paceView.biasTone === "cold" && "cold",
+            paceView.biasTone === "neutral" && "neutral",
+            paceView.biasTone === "warm" && "warm",
+          )}
+          style={
+            {
+              "--pace-left": `${paceView.meterLeft}%`,
+              "--pace-width": `${paceView.meterWidth}%`,
+            } as CSSProperties & {
+              "--pace-left": string;
+              "--pace-width": string;
+            }
+          }
+        />
+      </div>
+      <div className="future-v2-mini-grid future-v2-mini-grid-tight">
+        <FutureMiniMetric
+          label={locale === "en-US" ? "Expected now" : "预期此刻"}
+          value={`${paceView.expectedNow.toFixed(1)}${tempSymbol}`}
+        />
+        <FutureMiniMetric
+          label={paceView.observedLabel}
+          value={`${paceView.observedNow.toFixed(1)}${tempSymbol}`}
+        />
+        <FutureMiniMetric
+          label={paceView.paceAdjustedLabel}
+          value={
+            paceView.paceAdjustedHigh != null
+              ? `${paceView.paceAdjustedHigh.toFixed(1)}${tempSymbol}`
+              : "--"
+          }
+        />
+        <FutureMiniMetric
+          label={locale === "en-US" ? "Peak window" : "峰值窗口"}
+          value={paceView.peakWindowText}
+        />
+      </div>
+      {signalItems.length ? (
+        <div className="future-v2-pace-signal-grid">
+          {signalItems.map((item) => (
+            <div key={item.label} className="future-v2-pace-signal-card">
+              <div className="future-v2-signal-head">
+                <span>{item.label}</span>
+                <FutureSignalTag tone={item.tone}>{item.status}</FutureSignalTag>
+              </div>
+              <strong>{item.value}</strong>
+              <div className="future-v2-pace-signal-note">{item.note}</div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+export function FuturePaceLoadingCard({ locale }: { locale: Locale }) {
+  return (
+    <section className="future-v2-card future-v2-support-card">
+      <div className="future-v2-card-head">
+        <h4 className="future-v2-card-title">
+          {locale === "en-US" ? "Current Pace" : "当前节奏"}
+        </h4>
+        <div className="future-v2-card-kicker">
+          {locale === "en-US"
+            ? "Backfilling intraday pace context"
+            : "正在补齐日内节奏上下文"}
+        </div>
+      </div>
+      <div className="future-trend-summary future-trend-summary-muted">
+        {locale === "en-US"
+          ? "Expected-now pace, boundary risk, and airport-vs-network cues are loading in the background."
+          : "预期此刻节奏、边界风险和机场对比站网信号正在后台补齐。"}
+      </div>
+    </section>
+  );
+}
+
+function FutureMiniMetric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="future-v2-mini-item">
+      <span>{label}</span>
+      <strong>{value}</strong>
+    </div>
+  );
+}
+
+function FutureSignalTag({
+  tone,
+  children,
+}: {
+  tone: string;
+  children: string;
+}) {
+  return (
+    <em
+      className={clsx(
+        "future-v2-signal-tag",
+        (tone === "cold" || tone === "cyan") && "cyan",
+        (tone === "neutral" || tone === "blue") && "blue",
+        (tone === "warm" || tone === "amber") && "amber",
+      )}
+    >
+      {children}
+    </em>
+  );
+}

frontend/components/dashboard/FutureForecastTodayDecisionBrief.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { formatConfidenceLabel } from "./FutureForecastModal.utils";
+
+export function FutureForecastTodayDecisionBrief({
+  anchorRuleText,
+  anchorSourceLabel,
+  baseCaseBucket,
+  confidence,
+  displayName,
+  downsideBucket,
+  gapToBaseText,
+  locale,
+  meteorologyHeadline,
+  nextObservationLabel,
+  nextObservationTime,
+  pathStatus,
+  settlementStationName,
+  upsideBucket,
+}: {
+  anchorRuleText: string;
+  anchorSourceLabel: string;
+  baseCaseBucket: string;
+  confidence: string | null | undefined;
+  displayName: string;
+  downsideBucket: string | null | undefined;
+  gapToBaseText: string;
+  locale: string;
+  meteorologyHeadline: string;
+  nextObservationLabel: string;
+  nextObservationTime: string;
+  pathStatus: string;
+  settlementStationName: string;
+  upsideBucket: string | null | undefined;
+}) {
+  return (
+    <section className="future-v2-meteorology-brief">
+      <div className="future-v2-meteorology-copy">
+        <div className="future-v2-anchor-row">
+          <div className="modal-section-kicker">
+            {locale === "en-US" ? "Professional meteorology read" : "专业气象判断"}
+          </div>
+          <span className="future-v2-anchor-source">{anchorSourceLabel}</span>
+        </div>
+        <h3>{meteorologyHeadline}</h3>
+        <p className="future-v2-anchor-rule">{anchorRuleText}</p>
+        <div className="future-v2-meteorology-meta">
+          <span>
+            {locale === "en-US" ? "Confidence" : "置信度"} ·{" "}
+            {formatConfidenceLabel(confidence, locale)}
+          </span>
+          <span>
+            {locale === "en-US" ? "Path state" : "路径状态"} · {pathStatus}
+          </span>
+          <span>
+            {nextObservationLabel} · {nextObservationTime}
+          </span>
+        </div>
+      </div>
+      <div className="future-v2-decision-rail" aria-label={displayName}>
+        <div className="future-v2-decision-anchor">
+          <span>{locale === "en-US" ? "Anchor" : "锚点"}</span>
+          <strong>{settlementStationName}</strong>
+          <small>{anchorSourceLabel}</small>
+        </div>
+        <div className="future-v2-decision-grid">
+          <div>
+            <span>{locale === "en-US" ? "Base" : "基准"}</span>
+            <strong>{baseCaseBucket || "--"}</strong>
+          </div>
+          <div>
+            <span>{locale === "en-US" ? "Upside" : "上修"}</span>
+            <strong>{upsideBucket || "--"}</strong>
+          </div>
+          <div>
+            <span>{locale === "en-US" ? "Downside" : "下修"}</span>
+            <strong>{downsideBucket || "--"}</strong>
+          </div>
+          <div>
+            <span>{locale === "en-US" ? "Gap to base" : "距基准还差"}</span>
+            <strong>{gapToBaseText}</strong>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/components/dashboard/FutureForecastTodayEvidenceGrid.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import clsx from "clsx";
+import {
+  formatSignalDirection,
+  formatSignalStrength,
+  localizedText,
+  signalTone,
+} from "./FutureForecastModal.utils";
+
+type MeteorologySignal = {
+  direction?: string | null;
+  label?: string | null;
+  label_en?: string | null;
+  strength?: string | null;
+  summary?: string | null;
+  summary_en?: string | null;
+};
+
+export function FutureForecastTodayEvidenceGrid({
+  airportMetarAnchor,
+  confirmationRules,
+  invalidationRules,
+  locale,
+  meteorologySignals,
+  modelSummary,
+}: {
+  airportMetarAnchor: boolean;
+  confirmationRules: string[];
+  invalidationRules: string[];
+  locale: string;
+  meteorologySignals: MeteorologySignal[];
+  modelSummary: string;
+}) {
+  const fallbackInvalidationRule =
+    locale === "en-US"
+      ? "If observations stop tracking the expected curve, wait for the next refresh."
+      : "若实测不再贴近预期曲线，等待下一次刷新确认。";
+  const fallbackConfirmationRule =
+    locale === "en-US"
+      ? airportMetarAnchor
+        ? "Keep watching the next anchor METAR report."
+        : "Keep watching the next official anchor observation."
+      : airportMetarAnchor
+        ? "继续观察下一次锚点 METAR 报文。"
+        : "继续观察下一次官方锚点观测。";
+
+  return (
+    <div className="future-v2-meteorology-grid">
+      <section className="future-modal-section future-v2-evidence-panel">
+        <div className="modal-section-heading">
+          <div className="modal-section-kicker">
+            {locale === "en-US" ? "Evidence chain" : "气象证据链"}
+          </div>
+          <h3>{locale === "en-US" ? "Signal Contributions" : "信号贡献"}</h3>
+        </div>
+        <div className="future-v2-evidence-list">
+          {meteorologySignals.length > 0 ? (
+            meteorologySignals.map((signal, index) => (
+              <div
+                key={`${signal.label || "signal"}-${index}`}
+                className={clsx("future-v2-evidence-row", signalTone(signal))}
+              >
+                <div className="future-v2-evidence-head">
+                  <strong>
+                    {localizedText(locale, signal.label, signal.label_en) || "--"}
+                  </strong>
+                  <span>
+                    {formatSignalDirection(signal.direction, locale)} ·{" "}
+                    {formatSignalStrength(signal.strength, locale)}
+                  </span>
+                </div>
+                <p>
+                  {localizedText(locale, signal.summary, signal.summary_en) ||
+                    "--"}
+                </p>
+              </div>
+            ))
+          ) : (
+            <div className="future-text-block">
+              {locale === "en-US"
+                ? "Meteorology signals are still loading."
+                : "气象信号仍在加载。"}
+            </div>
+          )}
+        </div>
+      </section>
+
+      <section className="future-modal-section future-v2-rule-panel">
+        <div className="modal-section-heading">
+          <div className="modal-section-kicker">
+            {locale === "en-US" ? "Failure modes" : "失效条件"}
+          </div>
+          <h3>
+            {locale === "en-US" ? "What Downgrades the Read" : "什么会让判断降级"}
+          </h3>
+        </div>
+        <ul className="future-v2-rule-list">
+          {(invalidationRules.length > 0
+            ? invalidationRules
+            : [fallbackInvalidationRule]
+          ).map((rule, index) => (
+            <li key={`${rule}-${index}`}>{rule}</li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="future-modal-section future-v2-rule-panel">
+        <div className="modal-section-heading">
+          <div className="modal-section-kicker">
+            {locale === "en-US" ? "Confirmation" : "确认条件"}
+          </div>
+          <h3>
+            {locale === "en-US" ? "What Confirms the Path" : "什么会确认主路径"}
+          </h3>
+        </div>
+        <ul className="future-v2-rule-list">
+          {(confirmationRules.length > 0
+            ? confirmationRules
+            : [fallbackConfirmationRule]
+          ).map((rule, index) => (
+            <li key={`${rule}-${index}`}>{rule}</li>
+          ))}
+        </ul>
+        <div className="future-v2-model-note">{modelSummary}</div>
+      </section>
+    </div>
+  );
+}

frontend/components/dashboard/HistoryChart.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import type { ChartConfiguration } from "chart.js";
+import { useMemo } from "react";
+import { useChart } from "@/hooks/useChart";
+import { useDashboardStore, useHistoryData } from "@/hooks/useDashboardStore";
+import { useI18n } from "@/hooks/useI18n";
+import { getHistorySummary } from "@/lib/dashboard-utils";
+
+export function HistoryChart() {
+  const store = useDashboardStore();
+  const { locale } = useI18n();
+  const { data } = useHistoryData();
+  const isNoaaSettlement =
+    store.selectedDetail?.current?.settlement_source === "noaa" ||
+    store.selectedDetail?.current?.settlement_source_label === "NOAA";
+  const noaaStationCode = String(
+    store.selectedDetail?.current?.station_code ||
+      store.selectedDetail?.risk?.icao ||
+      "NOAA",
+  )
+    .trim()
+    .toUpperCase();
+  const summary = useMemo(
+    () => getHistorySummary(data, store.selectedDetail?.local_date),
+    [data, store.selectedDetail?.local_date],
+  );
+  const hasMgm =
+    store.selectedCity === "ankara" &&
+    summary.mgmSeriesComplete &&
+    summary.mgms.some((value) => value != null);
+  const hasBestBaseline =
+    Boolean(summary.bestModelName) &&
+    summary.bestModelName !== "MGM" &&
+    summary.bestModelSeries.some((value) => value != null);
+
+  const canvasRef = useChart(() => {
+    const datasets: NonNullable<
+      ChartConfiguration<"line">["data"]
+    >["datasets"] = [
+      {
+        backgroundColor: "rgba(248, 113, 113, 0.1)",
+        borderColor: "#f87171",
+        borderWidth: 2,
+        data: summary.actuals,
+        label: isNoaaSettlement
+          ? locale === "en-US"
+            ? `NOAA Settled High (${noaaStationCode})`
+            : `NOAA 结算最高温 (${noaaStationCode})`
+          : locale === "en-US"
+            ? "Observed High"
+            : "实测最高温",
+        pointBackgroundColor: "#f87171",
+        pointBorderColor: "#fff",
+        pointHoverRadius: 7,
+        pointRadius: 5,
+        tension: 0.2,
+      },
+      {
+        backgroundColor: "transparent",
+        borderColor: "#34d399",
+        borderDash: [5, 4],
+        borderWidth: 2,
+        data: summary.debs,
+        label: locale === "en-US" ? "DEB Fusion" : "DEB 融合",
+        pointHoverRadius: 6,
+        pointRadius: 4,
+        tension: 0.2,
+      },
+    ];
+
+    if (hasMgm) {
+      datasets.push({
+        backgroundColor: "transparent",
+        borderColor: "#fb923c",
+        borderWidth: 2,
+        data: summary.mgms,
+        label: locale === "en-US" ? "MGM Official Forecast" : "MGM 官方预报",
+        pointHoverRadius: 6,
+        pointRadius: 4,
+        tension: 0.2,
+      });
+    }
+
+    if (hasBestBaseline) {
+      datasets.push({
+        backgroundColor: "transparent",
+        borderColor: "#60a5fa",
+        borderDash: [4, 3],
+        borderWidth: 2,
+        data: summary.bestModelSeries,
+        label:
+          locale === "en-US"
+            ? `Best Baseline (${summary.bestModelName})`
+            : `最佳单模型 (${summary.bestModelName})`,
+        pointHoverRadius: 6,
+        pointRadius: 4,
+        tension: 0.2,
+      });
+    }
+
+    return {
+      data: {
+        datasets,
+        labels: summary.dates,
+      },
+      options: {
+        interaction: { intersect: false, mode: "index" },
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            labels: {
+              boxHeight: 12,
+              boxWidth: 34,
+              color: "#94a3b8",
+              font: { family: "Inter", size: 14 },
+              padding: 18,
+            },
+          },
+          tooltip: {
+            backgroundColor: "rgba(15, 23, 42, 0.9)",
+            borderColor: "rgba(255, 255, 255, 0.1)",
+            borderWidth: 1,
+            bodyFont: { family: "Inter", size: 13 },
+            titleFont: { family: "Inter", size: 13, weight: 600 },
+            callbacks: {
+              label: (ctx) =>
+                `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}°`,
+            },
+          },
+        },
+        responsive: true,
+        scales: {
+          x: {
+            grid: { color: "rgba(255,255,255,0.04)" },
+            ticks: {
+              color: "#64748b",
+              font: { family: "Inter", size: 12 },
+              padding: 8,
+            },
+          },
+          y: {
+            grid: { color: "rgba(255,255,255,0.04)" },
+            ticks: {
+              color: "#64748b",
+              font: { family: "Inter", size: 12 },
+              padding: 8,
+            },
+          },
+        },
+      },
+      type: "line",
+    } satisfies ChartConfiguration<"line">;
+  }, [hasBestBaseline, hasMgm, isNoaaSettlement, noaaStationCode, summary, locale]);
+
+  if (!summary.recentData.length) return null;
+
+  return (
+    <div className="history-chart-wrapper">
+      <canvas ref={canvasRef} />
+    </div>
+  );
+}

frontend/components/dashboard/HistoryModal.module.css

@@ -0,0 +1,530 @@
+/* History modal styles moved out of Dashboard.module.css. */
+
+.root :global(.history-btn) {
+  background: rgba(34, 211, 238, 0.1);
+  color: var(--accent-cyan);
+  border: 1px solid rgba(34, 211, 238, 0.3);
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-left: 8px;
+}
+
+.root :global(.history-btn:hover) {
+  background: rgba(34, 211, 238, 0.2);
+  border-color: var(--accent-cyan);
+}
+
+.root :global(.history-btn:disabled) {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.root :global(.modal-content.history-modal) {
+  width: min(96vw, 1180px);
+  max-width: 1180px;
+  max-height: calc(100vh - 32px);
+}
+
+.root :global(.history-modal .modal-body) {
+  padding: 24px 28px 28px;
+}
+
+.root :global(.history-modal .history-stats) {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.root :global(.history-modal .h-stat-card) {
+  min-width: 0;
+  padding: 16px 18px;
+  border-radius: 12px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.035) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
+}
+
+.root :global(.history-modal .h-stat-card .label) {
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.root :global(.history-modal .h-stat-card .val) {
+  font-size: 32px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.root :global(.history-modal .history-chart-wrapper) {
+  height: 420px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
+  padding: 12px 14px 8px;
+}
+
+.root :global(.history-modal .history-chart-wrapper canvas) {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.root :global(.history-modal .history-chart-loading) {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.025),
+      rgba(96, 165, 250, 0.08),
+      rgba(255, 255, 255, 0.025)
+    );
+  background-size: 220% 100%;
+  animation: history-chart-loading 1.4s ease-in-out infinite;
+}
+
+@keyframes history-chart-loading {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.root :global(.history-modal .history-modal-loading) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 420px;
+}
+
+.root :global(.history-modal .history-fetch-loading) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 18px;
+  width: min(100%, 420px);
+  padding: 24px 26px;
+  border-radius: 24px;
+  border: 1px solid rgba(96, 165, 250, 0.16);
+  background: linear-gradient(
+    180deg,
+    rgba(10, 18, 36, 0.72) 0%,
+    rgba(8, 14, 30, 0.5) 100%
+  );
+  box-shadow:
+    0 18px 48px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.root :global(.history-modal .history-fetch-scan) {
+  position: relative;
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(14, 165, 233, 0.08) 0%,
+    rgba(14, 165, 233, 0.02) 62%,
+    transparent 100%
+  );
+}
+
+.root :global(.history-modal .history-fetch-ring) {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1px solid rgba(56, 189, 248, 0.16);
+}
+
+.root :global(.history-modal .history-fetch-ring-1) {
+  transform: scale(0.7);
+}
+
+.root :global(.history-modal .history-fetch-ring-2) {
+  transform: scale(0.92);
+}
+
+.root :global(.history-modal .history-fetch-sweep) {
+  position: absolute;
+  inset: 5px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 120deg,
+    rgba(34, 211, 238, 0) 0deg,
+    rgba(34, 211, 238, 0.04) 220deg,
+    rgba(56, 189, 248, 0.78) 300deg,
+    rgba(253, 224, 71, 0.32) 332deg,
+    rgba(34, 211, 238, 0) 360deg
+  );
+  animation: history-fetch-spin 2.2s linear infinite;
+}
+
+.root :global(.history-modal .history-fetch-core) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(103, 232, 249, 0.95);
+  box-shadow: 0 0 18px rgba(34, 211, 238, 0.42);
+}
+
+.root :global(.history-modal .history-fetch-bars) {
+  display: flex;
+  align-items: end;
+  gap: 7px;
+  height: 22px;
+}
+
+.root :global(.history-modal .history-fetch-bar) {
+  width: 8px;
+  border-radius: 999px;
+  background: linear-gradient(
+    180deg,
+    rgba(250, 204, 21, 0.18) 0%,
+    rgba(251, 146, 60, 0.9) 100%
+  );
+  animation: history-fetch-pulse 1.6s ease-in-out infinite;
+}
+
+.root :global(.history-modal .history-fetch-bar-1) {
+  height: 10px;
+}
+
+.root :global(.history-modal .history-fetch-bar-2) {
+  height: 18px;
+  animation-delay: 0.18s;
+}
+
+.root :global(.history-modal .history-fetch-bar-3) {
+  height: 14px;
+  animation-delay: 0.34s;
+}
+
+.root :global(.history-modal .history-fetch-bar-4) {
+  height: 20px;
+  animation-delay: 0.5s;
+}
+
+.root :global(.history-modal .history-fetch-lines) {
+  position: relative;
+  width: 180px;
+  height: 22px;
+  overflow: hidden;
+}
+
+.root :global(.history-modal .history-fetch-line) {
+  position: absolute;
+  left: -26%;
+  height: 1px;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    rgba(34, 211, 238, 0) 0%,
+    rgba(125, 211, 252, 0.72) 48%,
+    rgba(34, 211, 238, 0) 100%
+  );
+  animation: history-fetch-flow 2.4s linear infinite;
+}
+
+.root :global(.history-modal .history-fetch-line-1) {
+  top: 4px;
+  width: 122px;
+}
+
+.root :global(.history-modal .history-fetch-line-2) {
+  top: 11px;
+  width: 168px;
+  animation-delay: -0.8s;
+}
+
+.root :global(.history-modal .history-fetch-line-3) {
+  top: 18px;
+  width: 138px;
+  animation-delay: -1.4s;
+}
+
+.root :global(.history-modal .history-fetch-copy) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.root :global(.history-modal .history-fetch-copy strong) {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: rgba(103, 232, 249, 0.94);
+}
+
+.root :global(.history-modal .history-fetch-copy span) {
+  max-width: 300px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(203, 213, 225, 0.82);
+}
+
+@keyframes history-fetch-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes history-fetch-pulse {
+  0%,
+  100% {
+    transform: scaleY(0.86);
+    opacity: 0.8;
+  }
+
+  50% {
+    transform: scaleY(1.08);
+    opacity: 1;
+  }
+}
+
+@keyframes history-fetch-flow {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(150%);
+  }
+}
+
+.root :global(.history-modal .history-peak-reference) {
+  margin-top: 18px;
+  padding: 14px 16px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 16px;
+  background: rgba(15, 23, 42, 0.42);
+}
+
+.root :global(.history-modal .history-model-reference) {
+  margin-top: 18px;
+  padding: 14px 16px;
+  border: 1px solid rgba(34, 211, 238, 0.18);
+  border-radius: 16px;
+  background: rgba(8, 47, 73, 0.2);
+}
+
+.root :global(.history-modal .history-peak-reference-title) {
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.root :global(.history-modal .history-model-reference-scroll),
+.root :global(.history-modal .history-peak-reference-scroll) {
+  display: grid;
+  gap: 8px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding-right: 6px;
+  scrollbar-width: thin;
+}
+
+.root :global(.history-modal .history-model-reference-scroll) {
+  scrollbar-color: rgba(34, 211, 238, 0.5) rgba(15, 23, 42, 0.32);
+}
+
+.root :global(.history-modal .history-peak-reference-scroll) {
+  scrollbar-color: rgba(96, 165, 250, 0.5) rgba(15, 23, 42, 0.32);
+}
+
+.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar) {
+  width: 8px;
+}
+
+.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-track) {
+  background: rgba(15, 23, 42, 0.32);
+  border-radius: 999px;
+}
+
+.root :global(.history-modal .history-peak-reference-scroll::-webkit-scrollbar-thumb) {
+  background: linear-gradient(
+    180deg,
+    rgba(56, 189, 248, 0.72) 0%,
+    rgba(96, 165, 250, 0.52) 100%
+  );
+  border-radius: 999px;
+}
+
+.root :global(.history-modal .history-peak-reference-row),
+.root :global(.history-modal .history-model-reference-row) {
+  display: grid;
+  grid-template-columns: minmax(72px, 88px) 1fr;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.root :global(.history-modal .history-peak-reference-date) {
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.root :global(.history-modal .history-model-reference-body) {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.root :global(.history-modal .history-model-reference-summary) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.root :global(.history-modal .history-model-reference-summary strong) {
+  color: var(--text-primary);
+}
+
+.root :global(.history-modal .history-model-reference-models) {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.root :global(.history-modal .history-model-reference-model) {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.38);
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
+.root :global(.history-modal .history-model-name) {
+  overflow: hidden;
+  color: var(--accent-cyan);
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.root :global(.history-modal .history-model-error) {
+  color: var(--text-muted);
+}
+
+.root :global(.history-modal .history-peak-reference-meta) {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+@media (max-width: 980px) {
+  .root :global(.history-modal .modal-body) {
+    padding: 18px;
+  }
+
+  .root :global(.history-modal .history-stats) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .root :global(.history-modal .history-chart-wrapper) {
+    height: 360px;
+  }
+
+  .root :global(.history-modal .history-modal-loading) {
+    min-height: 340px;
+  }
+
+  .root :global(.history-modal .history-fetch-loading) {
+    width: min(100%, 360px);
+  }
+
+  .root :global(.history-modal .history-peak-reference-scroll),
+  .root :global(.history-modal .history-model-reference-scroll) {
+    max-height: 320px;
+  }
+
+  .root :global(.history-modal .history-model-reference-models) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .root :global(.modal-content.history-modal) {
+    width: min(100vw - 12px, 100%);
+    max-width: none;
+  }
+
+  .root :global(.history-modal .history-stats) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.history-modal .h-stat-card .val) {
+    font-size: 28px;
+  }
+
+  .root :global(.history-modal .history-chart-wrapper) {
+    height: 300px;
+    padding: 8px 10px 6px;
+  }
+
+  .root :global(.history-modal .history-modal-loading) {
+    min-height: 280px;
+  }
+
+  .root :global(.history-modal .history-fetch-loading) {
+    width: 100%;
+    padding: 18px 16px;
+  }
+
+  .root :global(.history-modal .history-fetch-lines) {
+    width: 150px;
+  }
+
+  .root :global(.history-modal .history-fetch-scan) {
+    width: 72px;
+    height: 72px;
+  }
+
+  .root :global(.history-modal .history-peak-reference),
+  .root :global(.history-modal .history-model-reference) {
+    padding: 12px;
+  }
+
+  .root :global(.history-modal .history-peak-reference-scroll),
+  .root :global(.history-modal .history-model-reference-scroll) {
+    max-height: 260px;
+    padding-right: 2px;
+  }
+
+  .root :global(.history-modal .history-peak-reference-row),
+  .root :global(.history-modal .history-model-reference-row) {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+
+  .root :global(.history-modal .history-model-reference-models) {
+    grid-template-columns: 1fr;
+  }
+}

frontend/components/dashboard/HistoryModal.tsx

@@ -1,167 +1,22 @@
 "use client";
 
-import type { ChartConfiguration } from "chart.js";
+import dynamic from "next/dynamic";
 import { useMemo } from "react";
-import { useChart } from "@/hooks/useChart";
 import { useDashboardStore, useHistoryData } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
 import { ProFeaturePaywall } from "@/components/dashboard/ProFeaturePaywall";
 import { getHistorySummary } from "@/lib/dashboard-utils";
 
-function HistoryChart() {
-  const store = useDashboardStore();
-  const { locale } = useI18n();
-  const { data } = useHistoryData();
-  const isNoaaSettlement =
-    store.selectedDetail?.current?.settlement_source === "noaa" ||
-    store.selectedDetail?.current?.settlement_source_label === "NOAA";
-  const noaaStationCode = String(
-    store.selectedDetail?.current?.station_code ||
-      store.selectedDetail?.risk?.icao ||
-      "NOAA",
-  )
-    .trim()
-    .toUpperCase();
-  const summary = useMemo(
-    () => getHistorySummary(data, store.selectedDetail?.local_date),
-    [data, store.selectedDetail?.local_date],
-  );
-  const hasMgm =
-    store.selectedCity === "ankara" &&
-    summary.mgmSeriesComplete &&
-    summary.mgms.some((value) => value != null);
-  const hasBestBaseline =
-    Boolean(summary.bestModelName) &&
-    summary.bestModelName !== "MGM" &&
-    summary.bestModelSeries.some((value) => value != null);
-
-  const canvasRef = useChart(() => {
-    const datasets: NonNullable<
-      ChartConfiguration<"line">["data"]
-    >["datasets"] = [
-      {
-        backgroundColor: "rgba(248, 113, 113, 0.1)",
-        borderColor: "#f87171",
-        borderWidth: 2,
-        data: summary.actuals,
-        label: isNoaaSettlement
-          ? locale === "en-US"
-            ? `NOAA Settled High (${noaaStationCode})`
-            : `NOAA 结算最高温 (${noaaStationCode})`
-          : locale === "en-US"
-            ? "Observed High"
-            : "实测最高温",
-        pointBackgroundColor: "#f87171",
-        pointBorderColor: "#fff",
-        pointHoverRadius: 7,
-        pointRadius: 5,
-        tension: 0.2,
-      },
-      {
-        backgroundColor: "transparent",
-        borderColor: "#34d399",
-        borderDash: [5, 4],
-        borderWidth: 2,
-        data: summary.debs,
-        label: locale === "en-US" ? "DEB Fusion" : "DEB 融合",
-        pointHoverRadius: 6,
-        pointRadius: 4,
-        tension: 0.2,
-      },
-    ];
-
-    if (hasMgm) {
-      datasets.push({
-        backgroundColor: "transparent",
-        borderColor: "#fb923c",
-        borderWidth: 2,
-        data: summary.mgms,
-        label: locale === "en-US" ? "MGM Official Forecast" : "MGM 官方预报",
-        pointHoverRadius: 6,
-        pointRadius: 4,
-        tension: 0.2,
-      });
-    }
-
-    if (hasBestBaseline) {
-      datasets.push({
-        backgroundColor: "transparent",
-        borderColor: "#60a5fa",
-        borderDash: [4, 3],
-        borderWidth: 2,
-        data: summary.bestModelSeries,
-        label:
-          locale === "en-US"
-            ? `Best Baseline (${summary.bestModelName})`
-            : `最佳单模型 (${summary.bestModelName})`,
-        pointHoverRadius: 6,
-        pointRadius: 4,
-        tension: 0.2,
-      });
-    }
-
-    return {
-      data: {
-        datasets,
-        labels: summary.dates,
-      },
-      options: {
-        interaction: { intersect: false, mode: "index" },
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            labels: {
-              boxHeight: 12,
-              boxWidth: 34,
-              color: "#94a3b8",
-              font: { family: "Inter", size: 14 },
-              padding: 18,
-            },
-          },
-          tooltip: {
-            backgroundColor: "rgba(15, 23, 42, 0.9)",
-            borderColor: "rgba(255, 255, 255, 0.1)",
-            borderWidth: 1,
-            bodyFont: { family: "Inter", size: 13 },
-            titleFont: { family: "Inter", size: 13, weight: 600 },
-            callbacks: {
-              label: (ctx) =>
-                `${ctx.dataset.label}: ${ctx.parsed.y?.toFixed(1)}°`,
-            },
-          },
-        },
-        responsive: true,
-        scales: {
-          x: {
-            grid: { color: "rgba(255,255,255,0.04)" },
-            ticks: {
-              color: "#64748b",
-              font: { family: "Inter", size: 12 },
-              padding: 8,
-            },
-          },
-          y: {
-            grid: { color: "rgba(255,255,255,0.04)" },
-            ticks: {
-              color: "#64748b",
-              font: { family: "Inter", size: 12 },
-              padding: 8,
-            },
-          },
-        },
-      },
-      type: "line",
-    } satisfies ChartConfiguration<"line">;
-  }, [hasBestBaseline, hasMgm, isNoaaSettlement, noaaStationCode, summary, locale]);
-
-  if (!summary.recentData.length) return null;
-
-  return (
-    <div className="history-chart-wrapper">
-      <canvas ref={canvasRef} />
-    </div>
-  );
-}
+const HistoryChart = dynamic(
+  () =>
+    import("@/components/dashboard/HistoryChart").then(
+      (module) => module.HistoryChart,
+    ),
+  {
+    loading: () => <div className="history-chart-wrapper history-chart-loading" />,
+    ssr: false,
+  },
+);
 
 export function HistoryModal() {
   const store = useDashboardStore();

frontend/components/dashboard/ModelForecast.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import clsx from "clsx";
+import { useI18n } from "@/hooks/useI18n";
+import { CityDetail } from "@/lib/dashboard-types";
+import { getModelView } from "@/lib/model-utils";
+
+function EmptyState({ text }: { text: string }) {
+  return (
+    <div style={{ color: "var(--text-muted)", fontSize: "13px" }}>{text}</div>
+  );
+}
+
+type ModelMetadata = NonNullable<
+  NonNullable<CityDetail["source_forecasts"]>["open_meteo_multi_model"]
+>["model_metadata"];
+
+function getModelGroupMeta(
+  name: string,
+  metadata: ModelMetadata,
+  locale: string,
+) {
+  const meta = metadata?.[name] || {};
+  const tier = String(meta.tier || "").toLowerCase();
+  const upperName = String(name || "").toUpperCase();
+
+  if (tier.includes("aifs") || upperName.includes("AIFS")) {
+    return {
+      key: "aifs",
+      label: locale === "en-US" ? "AIFS model" : "AIFS 模型",
+      order: 1,
+      tone: "blue",
+    };
+  }
+  if (
+    tier.includes("europe") ||
+    upperName.includes("ICON-EU") ||
+    upperName.includes("ICON-D2")
+  ) {
+    return {
+      key: "europe",
+      label: locale === "en-US" ? "Europe high-resolution" : "欧洲高分辨率",
+      order: 2,
+      tone: "cyan",
+    };
+  }
+  if (
+    tier.includes("north_america") ||
+    upperName === "RDPS" ||
+    upperName === "HRDPS"
+  ) {
+    return {
+      key: "north-america",
+      label:
+        locale === "en-US" ? "North America high-resolution" : "北美高分辨率",
+      order: 3,
+      tone: "amber",
+    };
+  }
+  return {
+    key: "global",
+    label: locale === "en-US" ? "Global baseline" : "全球基准",
+    order: 0,
+    tone: "neutral",
+  };
+}
+
+function formatModelMetaLine(
+  name: string,
+  metadata: ModelMetadata,
+  locale: string,
+) {
+  const meta = metadata?.[name] || {};
+  const provider = String(meta.provider || "").trim();
+  const model = String(meta.model || "").trim();
+  const horizon = String(meta.horizon || "").trim();
+  const resolution = Number(meta.resolution_km);
+  const parts = [
+    provider,
+    model && model !== name ? model : "",
+    Number.isFinite(resolution)
+      ? `${resolution}${locale === "en-US" ? " km" : " 公里"}`
+      : "",
+    horizon,
+  ].filter(Boolean);
+  return parts.join(" · ");
+}
+
+
+export function ModelForecast({
+  detail,
+  hideTitle = false,
+  targetDate,
+}: {
+  detail: CityDetail;
+  hideTitle?: boolean;
+  targetDate?: string | null;
+}) {
+  const { locale, t } = useI18n();
+  const view = getModelView(detail, targetDate);
+  const modelsMap = { ...view.models };
+  const modelMetadata =
+    detail.source_forecasts?.open_meteo_multi_model?.model_metadata || {};
+
+  const modelEntries = Object.entries(modelsMap).filter(
+    ([, value]) =>
+      value !== null && value !== undefined && Number.isFinite(Number(value)),
+  );
+  const hasSingleModelOnly = modelEntries.length === 1;
+
+  // 如果没有任何数值，给出提示
+  if (modelEntries.length === 0) {
+    return (
+      <section className="models-section">
+        {!hideTitle && <h3>{t("section.models")}</h3>}
+        <div className="model-bars">
+          <EmptyState text={t("section.noModels")} />
+        </div>
+      </section>
+    );
+  }
+
+  const numericValues = modelEntries.map(([, value]) => Number(value));
+  const comparisonValues =
+    view.deb != null ? [...numericValues, Number(view.deb)] : numericValues;
+  const minValue = comparisonValues.length
+    ? Math.min(...comparisonValues) - 1
+    : 0;
+  const maxValue = comparisonValues.length
+    ? Math.max(...comparisonValues) + 1
+    : 1;
+  const range = Math.max(maxValue - minValue, 1);
+  const sortedEntries = modelEntries.sort(
+    (a, b) => Number(b[1] || 0) - Number(a[1] || 0),
+  );
+  const groupedEntries = sortedEntries
+    .reduce(
+      (acc, [name, value]) => {
+        const group = getModelGroupMeta(name, modelMetadata, locale);
+        const existing = acc.find((item) => item.key === group.key);
+        const entry = {
+          metaLine: formatModelMetaLine(name, modelMetadata, locale),
+          name,
+          value: Number(value),
+        };
+        if (existing) {
+          existing.entries.push(entry);
+        } else {
+          acc.push({ ...group, entries: [entry] });
+        }
+        return acc;
+      },
+      [] as Array<{
+        entries: Array<{ metaLine: string; name: string; value: number }>;
+        key: string;
+        label: string;
+        order: number;
+        tone: string;
+      }>,
+    )
+    .sort((a, b) => a.order - b.order);
+  const spread =
+    numericValues.length >= 2
+      ? Math.max(...numericValues) - Math.min(...numericValues)
+      : null;
+  const metadataSource =
+    detail.source_forecasts?.open_meteo_multi_model?.provider === "open-meteo"
+      ? "Open-Meteo"
+      : null;
+
+  return (
+    <section className="models-section">
+      {!hideTitle && <h3>{t("section.models")}</h3>}
+      <div className="model-bars">
+        <div className="model-stack-summary">
+          <span>
+            {locale === "en-US" ? "Available models" : "可用模型"} ·{" "}
+            <strong>{modelEntries.length}</strong>
+          </span>
+          <span>
+            {locale === "en-US" ? "Spread" : "分歧"} ·{" "}
+            <strong>
+              {spread != null
+                ? `${spread.toFixed(1)}${detail.temp_symbol}`
+                : "--"}
+            </strong>
+          </span>
+          {metadataSource && (
+            <span>
+              {locale === "en-US" ? "API" : "接口"} ·{" "}
+              <strong>{metadataSource}</strong>
+            </span>
+          )}
+        </div>
+        {hasSingleModelOnly && (
+          <div
+            style={{
+              color: "var(--text-secondary)",
+              fontSize: "11px",
+              marginBottom: "8px",
+            }}
+          >
+            {locale === "en-US"
+              ? "Single-model fallback: waiting for the rest of the model cluster."
+              : "当前处于单模型回退，其他模型结果还没回传。"}
+          </div>
+        )}
+        {groupedEntries.map((group) => (
+          <div
+            key={group.key}
+            className={clsx("model-group", `model-group-${group.tone}`)}
+          >
+            <div className="model-group-heading">
+              <span>{group.label}</span>
+              <em>{group.entries.length}</em>
+            </div>
+            {group.entries.map(({ metaLine, name, value }) => {
+              const width = ((value - minValue) / range) * 100;
+              const debLine =
+                view.deb != null
+                  ? ((Number(view.deb) - minValue) / range) * 100
+                  : null;
+
+              return (
+                <div key={name} className="model-row model-row-rich">
+                  <div className="model-name" title={metaLine || name}>
+                    <strong>{name}</strong>
+                    {metaLine && <span>{metaLine}</span>}
+                  </div>
+                  <div className="model-bar-track">
+                    <div
+                      className="model-bar-fill"
+                      style={{ width: `${width}%` }}
+                    />
+                    <span className="model-bar-value">
+                      {value}
+                      {detail.temp_symbol}
+                    </span>
+                    {debLine != null && (
+                      <div
+                        className="model-deb-line"
+                        style={{ left: `${debLine}%` }}
+                      />
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+        {view.deb != null && (
+          <div
+            className="model-row"
+            style={{
+              borderTop: "1px solid rgba(255,255,255,0.06)",
+              marginTop: "6px",
+              paddingTop: "6px",
+            }}
+          >
+            <div
+              className="model-name"
+              style={{ color: "var(--accent-cyan)", fontWeight: 700 }}
+            >
+              DEB
+            </div>
+            <div className="model-bar-track">
+              <div
+                className="model-bar-fill deb"
+                style={{
+                  width: `${((Number(view.deb) - minValue) / range) * 100}%`,
+                }}
+              />
+              <span className="model-bar-value deb">
+                {Number(view.deb)}
+                {detail.temp_symbol}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

frontend/components/dashboard/ProbabilityDistribution.tsx

@@ -0,0 +1,956 @@
+"use client";
+
+import clsx from "clsx";
+import { useMemo } from "react";
+import { useI18n } from "@/hooks/useI18n";
+import {
+  CityDetail,
+  MarketScan,
+  MarketTopBucket,
+  ProbabilityBucket,
+} from "@/lib/dashboard-types";
+import { getModelView, getProbabilityView } from "@/lib/model-utils";
+
+function EmptyState({ text }: { text: string }) {
+  return (
+    <div style={{ color: "var(--text-muted)", fontSize: "13px" }}>{text}</div>
+  );
+}
+
+function toPercent(value?: number | null) {
+  if (value == null) return null;
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return null;
+  return `${(numeric * 100).toFixed(1)}%`;
+}
+
+function toPriceCents(value?: number | null) {
+  if (value == null) return null;
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return null;
+  const normalized = numeric > 1 ? numeric / 100 : numeric;
+  const cents = normalized * 100;
+  const rounded = Math.round(cents * 10) / 10;
+  const text = Number.isInteger(rounded)
+    ? String(rounded.toFixed(0))
+    : String(rounded);
+  return `${text}c`;
+}
+
+function parseTempFromText(value: unknown) {
+  const text = String(value || "");
+  const match = text.match(/(-?\d+(?:\.\d+)?)/);
+  if (!match) return null;
+  const numeric = Number(match[1]);
+  return Number.isFinite(numeric) ? numeric : null;
+}
+
+function getBucketTemp(bucket: ProbabilityBucket) {
+  if (bucket.value != null) {
+    const byValue = Number(bucket.value);
+    if (Number.isFinite(byValue)) return byValue;
+  }
+  return parseTempFromText(bucket.label || bucket.bucket || bucket.range);
+}
+
+function getMarketYesPrice(scan?: MarketScan | null) {
+  if (scan?.market_price != null) {
+    const preferred = Number(scan.market_price);
+    if (Number.isFinite(preferred)) return preferred;
+  }
+  if (scan?.yes_token?.implied_probability != null) {
+    const implied = Number(scan.yes_token.implied_probability);
+    if (Number.isFinite(implied)) return implied;
+  }
+  return null;
+}
+
+function isFahrenheitSymbol(symbol?: string | null) {
+  return String(symbol || "")
+    .toUpperCase()
+    .includes("F");
+}
+
+function displayTempToMarketCelsius(
+  value: number | null,
+  detail: Pick<CityDetail, "temp_symbol">,
+) {
+  if (value == null || !Number.isFinite(value)) return null;
+  if (isFahrenheitSymbol(detail.temp_symbol)) {
+    return ((value - 32) * 5) / 9;
+  }
+  return value;
+}
+
+function formatBucketDisplayLabel(
+  bucket: ProbabilityBucket,
+  detail: Pick<CityDetail, "temp_symbol">,
+) {
+  let bucketLabel = bucket.label || `${bucket.value}${detail.temp_symbol}`;
+  if (!bucketLabel) return "";
+  let str = String(bucketLabel).toUpperCase().replace(/\s+/g, "");
+  const symbol = detail.temp_symbol || "°C";
+  if (isFahrenheitSymbol(symbol)) {
+    str = str.replace(/℃/g, "°F").replace(/°C/g, "°F");
+  } else {
+    str = str.replace(/℃/g, "°C").replace(/°F/g, "°C");
+  }
+  str = str.replace(/°?C($|\+|-)/g, "°C$1");
+  str = str.replace(/°?F($|\+|-)/g, "°F$1");
+  if (!/[°℃][CF]/.test(str) && /[0-9]/.test(str)) {
+    str += symbol;
+  }
+  return str;
+}
+
+function getMarketBucketUnit(bucket?: MarketTopBucket | null) {
+  return String(bucket?.unit || "").toUpperCase();
+}
+
+function isMarketBucketAbove(bucket?: MarketTopBucket | null) {
+  const text =
+    `${bucket?.label || ""} ${bucket?.slug || ""} ${bucket?.question || ""}`
+      .toLowerCase()
+      .replace(/\s+/g, "");
+  return (
+    text.includes("+") ||
+    text.includes("orhigher") ||
+    text.includes("or-higher")
+  );
+}
+
+function isMarketBucketBelow(bucket?: MarketTopBucket | null) {
+  const text =
+    `${bucket?.label || ""} ${bucket?.slug || ""} ${bucket?.question || ""}`
+      .toLowerCase()
+      .replace(/\s+/g, "");
+  return (
+    text.includes("<=") || text.includes("orlower") || text.includes("or-lower")
+  );
+}
+
+function findMarketBucketForDisplayTemp(
+  buckets: MarketTopBucket[],
+  displayTemp: number | null,
+  detail: Pick<CityDetail, "temp_symbol">,
+) {
+  if (displayTemp == null || !Number.isFinite(displayTemp)) return null;
+
+  let best: MarketTopBucket | null = null;
+  let bestDelta = Number.POSITIVE_INFINITY;
+  for (const bucket of buckets) {
+    const bucketUnit = String(bucket.unit || "").toUpperCase();
+    const compareTemp =
+      bucketUnit === "F"
+        ? displayTemp
+        : displayTempToMarketCelsius(displayTemp, detail);
+    if (compareTemp == null) continue;
+
+    const lower = bucket.lower != null ? Number(bucket.lower) : null;
+    const upper = bucket.upper != null ? Number(bucket.upper) : null;
+    if (
+      lower != null &&
+      upper != null &&
+      Number.isFinite(lower) &&
+      Number.isFinite(upper) &&
+      compareTemp >= lower - 0.01 &&
+      compareTemp <= upper + 0.01
+    ) {
+      return bucket;
+    }
+
+    const rawTemp = bucket.temp ?? bucket.value ?? null;
+    if (rawTemp == null) continue;
+    const candidateTemp = Number(rawTemp);
+    if (!Number.isFinite(candidateTemp)) continue;
+    const delta = Math.abs(candidateTemp - compareTemp);
+    if (delta < bestDelta) {
+      best = bucket;
+      bestDelta = delta;
+    }
+  }
+  const tolerance = isFahrenheitSymbol(detail.temp_symbol) ? 0.56 : 0.26;
+  return best && bestDelta <= tolerance ? best : null;
+}
+
+function marketBucketContainsDisplayTemp(
+  bucket: MarketTopBucket | null,
+  displayTemp: number | null,
+  detail: Pick<CityDetail, "temp_symbol">,
+) {
+  if (!bucket || displayTemp == null || !Number.isFinite(displayTemp))
+    return false;
+
+  const bucketUnit = getMarketBucketUnit(bucket);
+  const compareTemp =
+    bucketUnit === "F"
+      ? displayTemp
+      : displayTempToMarketCelsius(displayTemp, detail);
+  if (compareTemp == null) return false;
+
+  const lower = bucket.lower != null ? Number(bucket.lower) : null;
+  const upper = bucket.upper != null ? Number(bucket.upper) : null;
+  if (lower != null && !Number.isFinite(lower)) return false;
+  if (upper != null && !Number.isFinite(upper)) return false;
+
+  if (lower != null && upper != null) {
+    return compareTemp >= lower - 0.01 && compareTemp <= upper + 0.01;
+  }
+  if (lower != null && isMarketBucketAbove(bucket)) {
+    return compareTemp >= lower - 0.01;
+  }
+  if (lower != null && isMarketBucketBelow(bucket)) {
+    return compareTemp <= lower + 0.01;
+  }
+  const reference = bucket.temp ?? bucket.value ?? lower;
+  const numeric = reference != null ? Number(reference) : null;
+  if (numeric == null || !Number.isFinite(numeric)) return false;
+  const tolerance = bucketUnit === "F" ? 0.56 : 0.26;
+  return Math.abs(compareTemp - numeric) <= tolerance;
+}
+
+function getAggregatedModelProbabilityForMarketBucket(
+  probabilities: ProbabilityBucket[],
+  bucket: MarketTopBucket | null,
+  detail: Pick<CityDetail, "temp_symbol">,
+) {
+  if (!bucket) return null;
+
+  let total = 0;
+  let matched = 0;
+  for (const probabilityBucket of probabilities) {
+    const temp = getBucketTemp(probabilityBucket);
+    if (!marketBucketContainsDisplayTemp(bucket, temp, detail)) continue;
+    const probability = Number(probabilityBucket.probability);
+    if (!Number.isFinite(probability)) continue;
+    total += probability;
+    matched += 1;
+  }
+
+  return matched > 0 ? Math.max(0, Math.min(1, total)) : null;
+}
+
+type ProbabilityDisplayRow = {
+  key: string;
+  label: string;
+  probability: number;
+  marketBucket?: MarketTopBucket | null;
+};
+
+function formatMarketBucketDisplayLabel(
+  bucket: MarketTopBucket,
+  detail: Pick<CityDetail, "temp_symbol">,
+) {
+  const label = String(bucket.label || "").trim();
+  if (label) {
+    const unit = getMarketBucketUnit(bucket);
+    let normalized = label.toUpperCase().replace(/\s+/g, "");
+    if (unit === "F" || isFahrenheitSymbol(detail.temp_symbol)) {
+      normalized = normalized
+        .replace(/ORHIGHER/g, "+")
+        .replace(/ORLOWER/g, "-")
+        .replace(/℃/g, "°F")
+        .replace(/°C/g, "°F")
+        .replace(/(?<=\d)F/g, "°F");
+    } else {
+      normalized = normalized
+        .replace(/ORHIGHER/g, "+")
+        .replace(/ORLOWER/g, "-")
+        .replace(/℃/g, "°C")
+        .replace(/°F/g, "°C")
+        .replace(/(?<=\d)C/g, "°C");
+    }
+    return normalized.replace(/\+/g, "+");
+  }
+
+  const unit =
+    getMarketBucketUnit(bucket) === "F" ||
+    isFahrenheitSymbol(detail.temp_symbol)
+      ? "°F"
+      : "°C";
+  const lower = bucket.lower != null ? Number(bucket.lower) : null;
+  const upper = bucket.upper != null ? Number(bucket.upper) : null;
+  if (
+    lower != null &&
+    upper != null &&
+    Number.isFinite(lower) &&
+    Number.isFinite(upper)
+  ) {
+    return `${lower}-${upper}${unit}`;
+  }
+  const value = bucket.value ?? bucket.temp ?? lower;
+  const numeric = value != null ? Number(value) : null;
+  if (numeric != null && Number.isFinite(numeric)) {
+    return isMarketBucketAbove(bucket)
+      ? `${numeric}${unit}+`
+      : `${numeric}${unit}`;
+  }
+  return "--";
+}
+
+type ModelMetadata = NonNullable<
+  NonNullable<CityDetail["source_forecasts"]>["open_meteo_multi_model"]
+>["model_metadata"];
+
+
+function normalizeModelNameForVote(name: string) {
+  return String(name || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_/-]/g, "");
+}
+
+function getModelVoteFamily(name: string) {
+  const normalized = normalizeModelNameForVote(name);
+  if (["icon", "iconeu", "icond2"].includes(normalized)) return "dwd_icon";
+  if (["gem", "gdps", "rdps", "hrdps"].includes(normalized)) return "eccc_gem";
+  if (["ecmwfaifs", "aifs"].includes(normalized)) return "ecmwf_aifs";
+  if (normalized === "ecmwf") return "ecmwf_ifs";
+  return normalized || name;
+}
+
+function getModelVotePriority(name: string) {
+  const normalized = normalizeModelNameForVote(name);
+  return (
+    {
+      icond2: 40,
+      iconeu: 30,
+      icon: 20,
+      hrdps: 40,
+      rdps: 35,
+      gdps: 30,
+      gem: 20,
+      ecmwfaifs: 30,
+      ecmwf: 30,
+      gfs: 30,
+      jma: 30,
+      mgm: 45,
+      nws: 45,
+      openmeteo: 15,
+    }[normalized] || 10
+  );
+}
+
+function getRoundedModelVoteDistribution(
+  detail: CityDetail,
+  targetDate?: string | null,
+) {
+  const view = getModelView(detail, targetDate);
+  const representatives = new Map<
+    string,
+    { name: string; priority: number; value: number }
+  >();
+
+  Object.entries(view.models || {}).forEach(([name, rawValue]) => {
+    const normalized = normalizeModelNameForVote(name);
+    if (normalized === "lgbm" || normalized.includes("meteoblue")) return;
+    const value = Number(rawValue);
+    if (!Number.isFinite(value)) return;
+    const family = getModelVoteFamily(name);
+    const priority = getModelVotePriority(name);
+    const current = representatives.get(family);
+    if (!current || priority > current.priority) {
+      representatives.set(family, { name, priority, value });
+    }
+  });
+
+  const bucketMap = new Map<number, { count: number; models: string[] }>();
+  representatives.forEach(({ name, value }) => {
+    const rounded = Math.round(value);
+    const row = bucketMap.get(rounded) || { count: 0, models: [] };
+    row.count += 1;
+    row.models.push(name);
+    bucketMap.set(rounded, row);
+  });
+
+  const total = representatives.size;
+  const rows = Array.from(bucketMap.entries())
+    .map(([value, row]) => ({
+      count: row.count,
+      models: row.models,
+      percent: total > 0 ? row.count / total : 0,
+      value,
+    }))
+    .sort((a, b) => b.count - a.count || b.value - a.value);
+
+  return {
+    rows,
+    total,
+  };
+}
+
+function normalizeMarketProbability(value?: number | null) {
+  if (value == null) return null;
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return null;
+  if (numeric > 1) return Math.max(0, Math.min(1, numeric / 100));
+  return Math.max(0, Math.min(1, numeric));
+}
+
+function normalizeSignedProbability(value?: number | null) {
+  if (value == null) return null;
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return null;
+  if (Math.abs(numeric) > 1) return numeric / 100;
+  return numeric;
+}
+
+function formatSignedPercent(value?: number | null, digits = 1) {
+  const normalized = normalizeSignedProbability(value);
+  if (normalized == null) return "--";
+  const percent = normalized * 100;
+  const sign = percent > 0 ? "+" : "";
+  return `${sign}${percent.toFixed(digits)}%`;
+}
+
+function getMarketTopBuckets(scan?: MarketScan | null) {
+  const buckets = Array.isArray(scan?.top_buckets) ? scan.top_buckets : [];
+  if (!buckets.length) return [];
+
+  return buckets
+    .map((item) => ({
+      ...item,
+      probability: normalizeMarketProbability(item.probability),
+    }))
+    .filter(
+      (item): item is MarketTopBucket & { probability: number } =>
+        item.probability != null,
+    );
+}
+
+function getMarketAllBuckets(scan?: MarketScan | null) {
+  const buckets = Array.isArray(scan?.all_buckets)
+    ? scan.all_buckets
+    : Array.isArray(scan?.top_buckets)
+      ? scan.top_buckets
+      : [];
+  if (!buckets.length) return [];
+
+  return buckets
+    .map((item) => ({
+      ...item,
+      probability: normalizeMarketProbability(item.probability),
+    }))
+    .filter(
+      (item): item is MarketTopBucket & { probability: number } =>
+        item.probability != null,
+    );
+}
+
+function getMarketTopBucketKey(bucket: MarketTopBucket) {
+  if (bucket?.value != null) {
+    const valueNum = Number(bucket.value);
+    if (Number.isFinite(valueNum)) return `v:${valueNum.toFixed(2)}`;
+  }
+
+  if (bucket?.temp != null) {
+    const tempNum = Number(bucket.temp);
+    if (Number.isFinite(tempNum)) return `t:${tempNum.toFixed(2)}`;
+  }
+
+  const parsed = parseTempFromText(bucket?.label);
+  if (parsed != null) return `l:${parsed.toFixed(2)}`;
+
+  return `s:${String(bucket?.slug || bucket?.question || bucket?.label || "")}`;
+}
+
+function hasLgbmModel(detail: CityDetail, targetDate?: string | null) {
+  const view = getModelView(detail, targetDate);
+  return Object.keys(view.models || {}).some((name) =>
+    normalizeModelNameForVote(name).includes("lgbm"),
+  );
+}
+
+function formatProbabilityEngineLabel(
+  detail: CityDetail,
+  targetDate: string | null | undefined,
+  locale: string,
+) {
+  const view = getProbabilityView(detail, targetDate);
+  if (hasLgbmModel(detail, targetDate)) {
+    return locale === "en-US" ? "LGBM-calibrated probability" : "LGBM 校准概率";
+  }
+  const engine = String(view.engine || "")
+    .trim()
+    .toLowerCase();
+  const calibrationMode = String(view.calibrationMode || "")
+    .trim()
+    .toLowerCase();
+  if (engine === "emos" || calibrationMode.includes("emos")) {
+    return locale === "en-US" ? "EMOS-calibrated probability" : "EMOS 校准概率";
+  }
+  return locale === "en-US" ? "Model probability" : "模型概率";
+}
+
+
+export function ProbabilityDistribution({
+  detail,
+  hideTitle = false,
+  targetDate,
+  marketScan,
+}: {
+  detail: CityDetail;
+  hideTitle?: boolean;
+  targetDate?: string | null;
+  marketScan?: MarketScan | null;
+}) {
+  const { locale, t } = useI18n();
+  const view = getProbabilityView(detail, targetDate);
+  const modelView = getModelView(detail, targetDate);
+  const marketYesPrice = getMarketYesPrice(marketScan);
+  const marketYesText = toPercent(marketYesPrice);
+  const isToday = !targetDate || targetDate === detail.local_date;
+  const probabilityEngineLabel = formatProbabilityEngineLabel(
+    detail,
+    targetDate,
+    locale,
+  );
+  const hasLgbmProbability = hasLgbmModel(detail, targetDate);
+  const modelVoteView = useMemo(
+    () => getRoundedModelVoteDistribution(detail, targetDate),
+    [detail, targetDate],
+  );
+  const modelVoteHint = modelVoteView.rows
+    .slice(0, 2)
+    .map(
+      (row) =>
+        `${row.value}${detail.temp_symbol} ${row.count}/${modelVoteView.total}`,
+    )
+    .join(" · ");
+  const marketTopBuckets = isToday ? getMarketTopBuckets(marketScan) : [];
+  const marketAllBuckets = isToday ? getMarketAllBuckets(marketScan) : [];
+  const sortedMarketTopBuckets = useMemo(() => {
+    const sorted = [...marketTopBuckets].sort(
+      (a, b) => Number(b.probability || 0) - Number(a.probability || 0),
+    );
+    const deduped: Array<MarketTopBucket & { probability: number }> = [];
+    const seenKeys = new Set<string>();
+    for (const row of sorted) {
+      const key = getMarketTopBucketKey(row);
+      if (seenKeys.has(key)) continue;
+      seenKeys.add(key);
+      deduped.push(row);
+      if (deduped.length >= 4) break;
+    }
+    return deduped;
+  }, [marketTopBuckets]);
+  const useMarketTopBuckets =
+    marketScan?.available && sortedMarketTopBuckets.length >= 2;
+  const topMarketBucketText = toPercent(sortedMarketTopBuckets[0]?.probability);
+  const topProbability = [...(view.probabilities || [])].sort(
+    (a, b) => Number(b.probability || 0) - Number(a.probability || 0),
+  )[0];
+  const topProbabilityText = toPercent(topProbability?.probability);
+  const topProbabilityLabel = topProbability
+    ? formatBucketDisplayLabel(topProbability, detail)
+    : null;
+  const topProbabilityTemp = topProbability
+    ? getBucketTemp(topProbability)
+    : null;
+  const probabilitiesForMarketContracts =
+    view.probabilitiesAll?.length > 0
+      ? view.probabilitiesAll
+      : view.probabilities || [];
+  const marketContractRows = useMemo<ProbabilityDisplayRow[]>(() => {
+    if (!isToday || !marketScan?.available || marketAllBuckets.length === 0) {
+      return [];
+    }
+
+    const rows: ProbabilityDisplayRow[] = [];
+    const seenKeys = new Set<string>();
+    for (const marketBucket of marketAllBuckets) {
+      const probability = getAggregatedModelProbabilityForMarketBucket(
+        probabilitiesForMarketContracts,
+        marketBucket,
+        detail,
+      );
+
+      const key =
+        marketBucket.slug ||
+        marketBucket.label ||
+        `${marketBucket.lower ?? marketBucket.value ?? marketBucket.temp}-${marketBucket.upper ?? ""}`;
+      if (seenKeys.has(key)) continue;
+      seenKeys.add(key);
+      rows.push({
+        key,
+        label: formatMarketBucketDisplayLabel(marketBucket, detail),
+        probability: probability ?? 0,
+        marketBucket,
+      });
+    }
+    return rows;
+  }, [
+    detail,
+    isToday,
+    marketAllBuckets,
+    marketScan?.available,
+    probabilitiesForMarketContracts,
+  ]);
+  const modelProbabilityRows = useMemo<ProbabilityDisplayRow[]>(
+    () =>
+      (view.probabilities || []).slice(0, 6).map((bucket, index) => {
+        const bucketTemp = getBucketTemp(bucket);
+        return {
+          key: `${bucket.label || bucket.value || index}`,
+          label: formatBucketDisplayLabel(bucket, detail),
+          probability: Number(bucket.probability || 0),
+          marketBucket: findMarketBucketForDisplayTemp(
+            marketAllBuckets,
+            bucketTemp,
+            detail,
+          ),
+        };
+      }),
+    [detail, marketAllBuckets, view.probabilities],
+  );
+  const probabilityRows =
+    marketContractRows.length > 0
+      ? marketContractRows.slice(0, 8)
+      : modelProbabilityRows;
+  const topContractRow =
+    marketContractRows.length > 0
+      ? marketContractRows.reduce((best, row) =>
+          row.probability > best.probability ? row : best,
+        )
+      : null;
+  const displayTopLabel = topContractRow?.label || topProbabilityLabel || null;
+  const displayTopProbability =
+    topContractRow?.probability ??
+    (topProbability?.probability != null
+      ? Number(topProbability.probability)
+      : null);
+  const displayTopProbabilityText = toPercent(displayTopProbability);
+  const displayUsesMarketBuckets = marketContractRows.length > 0;
+  const linkedMarketBucket = useMemo(() => {
+    if (topContractRow?.marketBucket) return topContractRow.marketBucket;
+    if (topProbabilityTemp == null) return null;
+    return findMarketBucketForDisplayTemp(
+      marketAllBuckets,
+      topProbabilityTemp,
+      detail,
+    );
+  }, [detail, marketAllBuckets, topContractRow, topProbabilityTemp]);
+  const priceAnalysis = marketScan?.price_analysis;
+  const yesPriceView = priceAnalysis?.yes;
+  const noPriceView = priceAnalysis?.no;
+  const linkedMarketAsk =
+    linkedMarketBucket?.yes_buy ??
+    linkedMarketBucket?.market_price ??
+    yesPriceView?.ask ??
+    null;
+  const linkedNoAsk = linkedMarketBucket?.no_buy ?? noPriceView?.ask ?? null;
+  const linkedContractLabel =
+    topContractRow?.label ||
+    (linkedMarketBucket
+      ? formatMarketBucketDisplayLabel(linkedMarketBucket, detail)
+      : null) ||
+    topProbabilityLabel ||
+    null;
+  const aggregatedMarketProbability =
+    getAggregatedModelProbabilityForMarketBucket(
+      probabilitiesForMarketContracts,
+      linkedMarketBucket,
+      detail,
+    );
+  const linkedMarketProbability =
+    topContractRow?.probability ??
+    aggregatedMarketProbability ??
+    (topProbability?.probability != null
+      ? Number(topProbability.probability)
+      : null);
+  const linkedMarketProbabilityText = toPercent(linkedMarketProbability);
+  const linkedMarketEdge =
+    linkedMarketProbability != null && linkedMarketAsk != null
+      ? linkedMarketProbability - Number(linkedMarketAsk)
+      : null;
+  const linkedNoEdge =
+    linkedMarketProbability != null && linkedNoAsk != null
+      ? 1 - linkedMarketProbability - Number(linkedNoAsk)
+      : null;
+  const linkedBestSide =
+    linkedMarketBucket && linkedNoEdge != null && linkedMarketEdge != null
+      ? linkedNoEdge > linkedMarketEdge
+        ? "no"
+        : "yes"
+      : null;
+  const linkedBestAsk = linkedBestSide === "no" ? linkedNoAsk : linkedMarketAsk;
+  const linkedBestEdge =
+    linkedBestSide === "no" ? linkedNoEdge : linkedMarketEdge;
+  const preferredPriceView = linkedMarketBucket
+    ? {
+        ask: linkedBestAsk,
+        edge: linkedBestEdge,
+      }
+    : priceAnalysis?.best_side === "no"
+      ? noPriceView
+      : yesPriceView;
+  const preferredSideLabel = linkedMarketBucket
+    ? linkedBestSide === "no"
+      ? "NO"
+      : "YES"
+    : priceAnalysis?.best_side === "no"
+      ? locale === "en-US"
+        ? "NO"
+        : "NO"
+      : locale === "en-US"
+        ? "YES"
+        : "YES";
+  const yesDisplayPrice = linkedMarketBucket
+    ? linkedMarketAsk
+    : yesPriceView?.ask;
+  const noDisplayPrice = linkedMarketBucket ? linkedNoAsk : noPriceView?.ask;
+  const yesDisplayEdge = linkedMarketBucket
+    ? linkedMarketEdge
+    : yesPriceView?.edge;
+  const noDisplayEdge = linkedMarketBucket ? linkedNoEdge : noPriceView?.edge;
+  const hasPriceAnalysis =
+    isToday &&
+    (Boolean(priceAnalysis?.available) ||
+      Boolean(marketScan) ||
+      Boolean(topProbability));
+  const lockEdge = normalizeSignedProbability(priceAnalysis?.lock?.edge);
+  const lockAvailable = Boolean(
+    priceAnalysis?.lock?.available && lockEdge != null,
+  );
+  const quoteSource =
+    linkedMarketBucket?.quote_source ||
+    marketScan?.yes_token?.quote_source ||
+    marketScan?.no_token?.quote_source ||
+    null;
+  const quoteAgeMs =
+    linkedMarketBucket?.quote_age_ms ??
+    marketScan?.yes_token?.quote_age_ms ??
+    marketScan?.no_token?.quote_age_ms;
+  const quoteSourceLabel =
+    quoteSource === "polymarket_ws"
+      ? locale === "en-US"
+        ? `WS live${quoteAgeMs != null ? ` · ${Math.max(0, Math.round(Number(quoteAgeMs) / 1000))}s` : ""}`
+        : `WS 实时${quoteAgeMs != null ? ` · ${Math.max(0, Math.round(Number(quoteAgeMs) / 1000))}秒` : ""}`
+      : locale === "en-US"
+        ? "CLOB fallback"
+        : "CLOB 兜底";
+  const actionableEdge = normalizeSignedProbability(preferredPriceView?.edge);
+  const linkedContractOverpriced =
+    Boolean(linkedMarketBucket) &&
+    linkedBestSide === "no" &&
+    linkedMarketProbability != null &&
+    linkedMarketAsk != null &&
+    linkedMarketEdge != null &&
+    linkedMarketEdge < 0 &&
+    linkedNoEdge != null &&
+    linkedNoEdge > 0;
+  const linkedContractOverpay =
+    linkedContractOverpriced &&
+    linkedMarketProbability != null &&
+    linkedMarketAsk != null
+      ? Number(linkedMarketAsk) - linkedMarketProbability
+      : null;
+  const actionText = !marketScan
+    ? locale === "en-US"
+      ? "Waiting"
+      : "等待"
+    : !marketScan.available
+      ? locale === "en-US"
+        ? "No market"
+        : "无盘口"
+      : actionableEdge == null
+        ? locale === "en-US"
+          ? "No quote"
+          : "无报价"
+        : actionableEdge >= 0.02
+          ? linkedContractOverpriced
+            ? locale === "en-US"
+              ? "Overpriced"
+              : "市场偏贵"
+            : locale === "en-US"
+              ? `Watch ${preferredSideLabel}`
+              : `可关注 ${preferredSideLabel}`
+          : actionableEdge > 0
+            ? linkedContractOverpriced
+              ? locale === "en-US"
+                ? "Slightly overpriced"
+                : "略偏贵"
+              : locale === "en-US"
+                ? `Small ${preferredSideLabel}`
+                : `${preferredSideLabel} 优势较小`
+            : locale === "en-US"
+              ? "No clear edge"
+              : "暂无优势";
+  const actionNote =
+    linkedContractOverpriced && linkedContractOverpay != null
+      ? locale === "en-US"
+        ? `YES above model by ${formatSignedPercent(linkedContractOverpay)}`
+        : `YES 高于模型 ${formatSignedPercent(linkedContractOverpay)}`
+      : actionableEdge != null && actionableEdge >= 0.02
+        ? locale === "en-US"
+          ? `${formatSignedPercent(actionableEdge)} vs ask`
+          : `相对买价 ${formatSignedPercent(actionableEdge)}`
+        : locale === "en-US"
+          ? `${preferredSideLabel} ${formatSignedPercent(actionableEdge)}`
+          : `${preferredSideLabel} ${formatSignedPercent(actionableEdge)}`;
+
+  return (
+    <section className="prob-section">
+      {!hideTitle && <h3>{t("section.probability")}</h3>}
+      <div className="prob-bars">
+        <div className="prob-calibration-head">
+          <div>
+            <span className="prob-source-chip">{probabilityEngineLabel}</span>
+            <strong>
+              {displayTopLabel && displayTopProbabilityText
+                ? locale === "en-US"
+                  ? displayUsesMarketBuckets
+                    ? `${displayTopLabel} is the top displayed contract bucket at ${displayTopProbabilityText}`
+                    : `${displayTopLabel} is the top single bucket at ${displayTopProbabilityText}`
+                  : displayUsesMarketBuckets
+                    ? `${displayTopLabel} 为当前显示分布最高，${displayTopProbabilityText}`
+                    : `${displayTopLabel} 单点最高，${displayTopProbabilityText}`
+                : locale === "en-US"
+                  ? "Awaiting calibrated buckets"
+                  : "等待校准概率桶"}
+            </strong>
+          </div>
+          <p>
+            {hasLgbmProbability
+              ? locale === "en-US"
+                ? "LGBM is the learned intraday adjustment; raw model points below are only diagnostic."
+                : "LGBM 作为日内学习校准项；下方原始模型落点仅用于诊断。"
+              : locale === "en-US"
+                ? "Using the calibrated probability distribution; raw model points below are not probabilities."
+                : "使用校准后的概率分布；下方原始模型落点不是概率。"}
+          </p>
+        </div>
+        {marketScan?.available && (topMarketBucketText || marketYesText) && (
+          <div
+            style={{
+              color: "var(--text-secondary)",
+              fontSize: "11px",
+              marginBottom: "6px",
+            }}
+          >
+            {useMarketTopBuckets
+              ? locale === "en-US"
+                ? `Market reference only: top traded bucket ${topMarketBucketText}`
+                : `市场仅作参考：最高交易温度桶 ${topMarketBucketText}`
+              : locale === "en-US"
+                ? `Market reference only: this bucket ${marketYesText}`
+                : `市场仅作参考：该温度桶 ${marketYesText}`}
+          </div>
+        )}
+        <div className="prob-distribution-panel">
+          <div className="prob-distribution-head">
+            <span>
+              {locale === "en-US"
+                ? "EMOS probability distribution"
+                : "EMOS 概率分布"}
+            </span>
+            <em>
+              {marketContractRows.length > 0
+                ? locale === "en-US"
+                  ? "market buckets are aggregated from single-degree EMOS buckets"
+                  : "市场合约桶由单点 EMOS 概率聚合"
+                : locale === "en-US"
+                  ? "calibrated temperature buckets"
+                  : "校准后的温度桶"}
+            </em>
+          </div>
+          {probabilityRows.length === 0 ? (
+            <EmptyState text={t("section.noProb")} />
+          ) : (
+            probabilityRows.map((row, index) => {
+              const probability = Math.round(
+                Number(row.probability || 0) * 100,
+              );
+
+              return (
+                <div key={`${row.key || index}`} className="prob-row">
+                  <div className="prob-label">{row.label}</div>
+                  <div className="prob-bar-track">
+                    <div
+                      className={clsx("prob-bar-fill", `rank-${index}`)}
+                      style={{ width: `${Math.max(probability, 8)}%` }}
+                    >
+                      {probability}%
+                    </div>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+        {hasPriceAnalysis && (
+          <div className="prob-price-card">
+            <div className="prob-price-head">
+              <span>
+                {locale === "en-US" ? "Win-rate reference" : "胜率参考"}
+              </span>
+              <strong>
+                {!marketScan
+                  ? locale === "en-US"
+                    ? "Waiting for market context"
+                    : "等待市场参照"
+                  : !marketScan.available
+                    ? locale === "en-US"
+                      ? "No matched active market"
+                      : "未匹配到活跃盘口"
+                    : locale === "en-US"
+                      ? `${linkedContractLabel || topProbabilityLabel || "Temperature bucket"} · model ${linkedMarketProbabilityText || topProbabilityText || "--"}`
+                      : `${linkedContractLabel || topProbabilityLabel || "温度桶"} · 模型 ${linkedMarketProbabilityText || topProbabilityText || "--"}`}
+              </strong>
+            </div>
+            <div className="prob-price-grid">
+              <div>
+                <span>
+                  {locale === "en-US" ? "Bucket" : "温度桶"}
+                </span>
+                <strong>
+                  {linkedContractLabel || topProbabilityLabel || "--"}
+                </strong>
+                <em>
+                  {linkedMarketProbabilityText || topProbabilityText || "--"}
+                </em>
+              </div>
+              <div>
+                <span>{locale === "en-US" ? "DEB" : "DEB"}</span>
+                <strong>
+                  {modelView.deb != null && Number.isFinite(Number(modelView.deb))
+                    ? `${Number(modelView.deb).toFixed(1)}${detail.temp_symbol}`
+                    : "--"}
+                </strong>
+                <em>{locale === "en-US" ? "final fused forecast" : "最终融合预测"}</em>
+              </div>
+              <div>
+                <span>{locale === "en-US" ? "Model support" : "模型支持"}</span>
+                <strong>{modelVoteHint || "--"}</strong>
+                <em>{locale === "en-US" ? "raw model agreement" : "原始模型一致性"}</em>
+              </div>
+              <div>
+                <span>{locale === "en-US" ? "Market role" : "盘口角色"}</span>
+                <strong>{locale === "en-US" ? "Reference only" : "仅作参考"}</strong>
+                <em>{quoteSourceLabel}</em>
+              </div>
+            </div>
+            <p>
+              {locale === "en-US"
+                ? "This card follows the same rule as AI forecast: DEB first, model agreement second, METAR conflict check before settlement."
+                : "该卡片与 AI 预测口径一致：先看 DEB，再看模型支持，最后检查 METAR 是否冲突。"}
+            </p>
+          </div>
+        )}
+        {modelVoteHint && (
+          <div className="prob-model-hint">
+            <span>
+              {locale === "en-US" ? "Raw model points" : "原始模型落点"}
+            </span>
+            <strong>{modelVoteHint}</strong>
+            <em>
+              {locale === "en-US"
+                ? "diagnostic only; EMOS and contract rows use calibrated probabilities"
+                : "仅作诊断；EMOS 与合约行使用校准概率"}
+            </em>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

frontend/components/dashboard/ScanTerminal.module.css

@@ -0,0 +1,647 @@
+/* ══════════════════════════════════════════════════════════════
+   SCAN TERMINAL — 3-Column Layout
+   ══════════════════════════════════════════════════════════════ */
+
+.root :global(.scan-terminal) {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - var(--header-height, 72px));
+  margin-top: var(--header-height, 72px);
+  position: relative;
+  z-index: 2;
+}
+
+/* ── Left: Filter Panel ── */
+.root :global(.scan-filter-panel) {
+  width: 220px;
+  min-width: 220px;
+  height: 100%;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-glass);
+  display: flex;
+  flex-direction: column;
+  padding: 20px 16px;
+  gap: 20px;
+  overflow-y: auto;
+}
+
+.root :global(.scan-filter-section) {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.root :global(.scan-filter-label) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+}
+
+/* Mode Tabs */
+.root :global(.scan-mode-tabs) {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.root :global(.scan-mode-tab) {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: left;
+  position: relative;
+}
+
+.root :global(.scan-mode-tab:hover) {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-primary);
+}
+
+.root :global(.scan-mode-tab.active) {
+  background: rgba(0, 224, 164, 0.08);
+  color: #4DA3FF;
+  font-weight: 600;
+}
+
+.root :global(.scan-mode-tab.active)::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 25%;
+  height: 50%;
+  width: 3px;
+  background: #4DA3FF;
+  border-radius: 0 2px 2px 0;
+}
+
+.root :global(.scan-mode-tab-indicator) {
+  display: none;
+}
+
+/* Filter Rows */
+.root :global(.scan-filter-row) {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.root :global(.scan-filter-row-label) {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.root :global(.scan-range-display) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.root :global(.scan-range-slider) {
+  flex: 1;
+  appearance: none;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 2px;
+  outline: none;
+}
+
+.root :global(.scan-range-slider::-webkit-slider-thumb) {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #4DA3FF;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--bg-secondary);
+}
+
+/* Toggle */
+.root :global(.scan-toggle) {
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+  padding: 0;
+}
+
+.root :global(.scan-toggle.active) {
+  background: rgba(0, 224, 164, 0.3);
+  border-color: #4DA3FF;
+}
+
+.root :global(.scan-toggle-knob) {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: all 0.2s;
+}
+
+.root :global(.scan-toggle.active .scan-toggle-knob) {
+  left: 18px;
+  background: #4DA3FF;
+}
+
+/* Select */
+.root :global(.scan-select) {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--text-primary);
+  outline: none;
+  cursor: pointer;
+  width: 100%;
+}
+
+.root :global(.scan-select:focus) {
+  border-color: #4DA3FF;
+}
+
+/* Scan CTA */
+.root :global(.scan-cta-button) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #4DA3FF, #00c48f);
+  color: #030711;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.25s;
+  margin-top: auto;
+}
+
+.root :global(.scan-cta-button:hover) {
+  background: linear-gradient(135deg, #00f0b0, #00d89a);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 20px rgba(0, 224, 164, 0.3);
+}
+
+.root :global(.scan-cta-button:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* ── Center: Data Grid ── */
+.root :global(.scan-data-grid) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 20px 24px;
+  gap: 16px;
+}
+
+.root :global(.scan-data-grid-header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.root :global(.scan-data-grid-title) {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.root :global(.scan-data-grid-subtitle) {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.root :global(.scan-data-grid-controls) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* KPI Bar */
+.root :global(.scan-kpi-bar) {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+}
+
+.root :global(.scan-kpi-card) {
+  background: rgba(13, 17, 23, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.root :global(.scan-kpi-card:hover) {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(0, 224, 164, 0.3);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
+}
+
+.root :global(.scan-kpi-card::after) {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 224, 164, 0.5),
+    transparent
+  );
+  transform: translateX(-100%);
+  transition: transform 0.5s;
+}
+
+.root :global(.scan-kpi-card:hover::after) {
+  transform: translateX(100%);
+}
+
+.root :global(.scan-kpi-green) {
+  border-top: 2px solid rgba(0, 224, 164, 0.4);
+}
+
+.root :global(.scan-kpi-purple) {
+  border-top: 2px solid rgba(123, 97, 255, 0.4);
+}
+
+.root :global(.scan-kpi-header) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.root :global(.scan-kpi-icon) {
+  color: var(--text-muted);
+}
+
+.root :global(.scan-kpi-label) {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.root :global(.scan-kpi-value) {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.root :global(.scan-kpi-green .scan-kpi-value) {
+  color: #4DA3FF;
+}
+
+.root :global(.scan-kpi-delta) {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* View Tabs */
+.root :global(.scan-view-tabs) {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.root :global(.scan-view-tab) {
+  padding: 8px 16px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s;
+}
+
+.root :global(.scan-view-tab:hover) {
+  color: var(--text-primary);
+}
+
+.root :global(.scan-view-tab.active) {
+  color: #4DA3FF;
+  font-weight: 600;
+}
+
+.root :global(.scan-view-tab.active)::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #4DA3FF;
+  border-radius: 4px;
+  opacity: 0.8;
+  transition: all 0.3s ease;
+}
+
+/* ── Right: Scan Detail Panel ── */
+.root :global(.scan-detail-panel) {
+  width: 360px;
+  min-width: 360px;
+  height: 100%;
+  border-left: 1px solid var(--border-glass);
+  background: var(--bg-secondary);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.root :global(.scan-detail-header) {
+  padding: 20px;
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.root :global(.scan-detail-hero-img) {
+  width: 64px;
+  height: 64px;
+  border-radius: 10px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.root :global(.scan-detail-hero-placeholder) {
+  width: 64px;
+  height: 64px;
+  border-radius: 10px;
+  background: linear-gradient(
+    135deg,
+    rgba(0, 224, 164, 0.15),
+    rgba(123, 97, 255, 0.15)
+  );
+  flex-shrink: 0;
+}
+
+.root :global(.scan-detail-city-info) {
+  flex: 1;
+  min-width: 0;
+}
+
+.root :global(.scan-detail-city-name) {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.root :global(.scan-detail-city-sub) {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.root :global(.scan-detail-volume) {
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-weight: 600;
+  margin-top: 6px;
+}
+
+.root :global(.scan-detail-section) {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.root :global(.scan-detail-section-title) {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+/* Conditions Table */
+.root :global(.scan-conditions-table) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.root :global(.scan-condition-item) {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.root :global(.scan-condition-label) {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.root :global(.scan-condition-value) {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.root :global(.scan-condition-value.accent-green) {
+  color: #4DA3FF;
+}
+
+.root :global(.scan-condition-value.accent-red) {
+  color: #EF4444;
+}
+
+/* Trade Cards */
+.root :global(.scan-trade-cards) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.root :global(.scan-trade-card) {
+  background: var(--bg-card);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.root :global(.scan-trade-card.yes) {
+  border-top: 2px solid #4DA3FF;
+}
+
+.root :global(.scan-trade-card.no) {
+  border-top: 2px solid #EF4444;
+}
+
+.root :global(.scan-trade-card-title) {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.root :global(.scan-trade-card-price) {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.root :global(.scan-trade-card-edge) {
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.root :global(.scan-trade-card-edge.positive) {
+  color: #4DA3FF;
+}
+
+.root :global(.scan-trade-card-edge.negative) {
+  color: #EF4444;
+}
+
+.root :global(.scan-trade-card-note) {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
+/* Score Gauge */
+.root :global(.scan-detail-score) {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.root :global(.scan-detail-score-big) {
+  font-size: 40px;
+  font-weight: 900;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.root :global(.scan-detail-score-label) {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.root :global(.scan-detail-score-suffix) {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+/* Confidence Dots */
+.root :global(.scan-confidence-dots) {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.root :global(.scan-confidence-dot) {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.root :global(.scan-confidence-dot.filled) {
+  background: #4DA3FF;
+}
+
+.root :global(.scan-confidence-dot.filled.amber) {
+  background: #F59E0B;
+}
+
+.root :global(.scan-confidence-dot.filled.red) {
+  background: #EF4444;
+}
+
+/* Empty state */
+.root :global(.scan-detail-empty) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 40px;
+  text-align: center;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   SCAN TERMINAL OVERRIDES — EMOS DESK
+   ══════════════════════════════════════════════════════════════ */
+
+.root :global(.scan-terminal) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(380px, 420px);
+  gap: 14px;
+  width: 100%;
+  min-height: 100vh;
+  height: auto;
+  margin-top: 0;
+  padding: 16px;
+  background:
+    radial-gradient(circle at top, rgba(77, 163, 255, 0.12), transparent 36%),
+    linear-gradient(180deg, #0B1220 0%, #07101D 100%);
+  overflow: auto;
+}
+
+.root :global(.scan-filter-panel),
+.root :global(.scan-data-grid),
+.root :global(.scan-detail-panel) {
+  min-height: calc(100vh - 32px);
+  border: 1px solid rgba(159, 178, 199, 0.14);
+  border-radius: 22px;
+  background: linear-gradient(180deg, rgba(17, 26, 46, 0.96), rgba(11, 18, 32, 0.96));
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(14px);
+}
+
+.root :global(.scan-data-grid) {
+  padding: 18px;
+  gap: 18px;
+  overflow: hidden;
+  min-height: calc(100vh - 32px);
+  max-height: calc(100vh - 32px);
+}

frontend/components/dashboard/ScanTerminalBoard.module.css

@@ -0,0 +1,679 @@
+/* Scan terminal scroll containers, map/calendar/settings views, table rows, and AI analysis workspace. */
+
+.root :global(.scan-detail-panel) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.root :global(.scan-map-view),
+.root :global(.scan-calendar-view),
+.root :global(.scan-settings-view) {
+  flex: 1;
+  min-height: 0;
+}
+
+.root :global(.scan-map-view) {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  block-size: 100%;
+}
+
+.root :global(.scan-map-shell) {
+  position: relative;
+  flex: 1;
+  min-height: clamp(560px, calc(100dvh - 292px), 760px);
+  border: 1px solid rgba(90, 123, 166, 0.12);
+  border-radius: 18px;
+  overflow: hidden;
+  background: rgba(8, 17, 30, 0.8);
+}
+
+.root :global(.scan-terminal.focus-view-active .scan-upgrade-announcement),
+.root :global(.scan-terminal.focus-view-active .scan-kpi-bar) {
+  display: none;
+}
+
+.root :global(.scan-terminal.focus-view-active .scan-data-grid) {
+  gap: 12px;
+}
+
+.root :global(.scan-terminal.focus-view-active .scan-list-section) {
+  min-height: min(780px, calc(100dvh - 136px));
+}
+
+.root :global(.scan-terminal.focus-view-active .scan-list-header) {
+  margin-bottom: 8px;
+}
+
+.root :global(.scan-terminal.focus-view-active .scan-topbar) {
+  padding-bottom: 12px;
+}
+
+@media (max-width: 1680px), (max-height: 900px) {
+  .root :global(.scan-terminal.map-view-active > .detail-panel.scan-city-detail-rail) {
+    display: none;
+  }
+}
+
+.root :global(.scan-map-shell .map) {
+  position: absolute;
+  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 18px;
+  box-shadow: none;
+}
+
+.root :global(.scan-map-shell .leaflet-container) {
+  width: 100%;
+  height: 100%;
+  background: #060d18;
+}
+
+.root :global(.scan-map-caption) {
+  color: #8fa4c3;
+  font-size: 13px;
+}
+
+.root :global(.scan-summary-card.wide) {
+  grid-column: span 1;
+}
+
+.root :global(.scan-summary-label) {
+  font-size: 13px;
+  color: #8fa4c3;
+}
+
+.root :global(.scan-summary-value) {
+  margin-top: 10px;
+  font-size: 28px;
+  font-weight: 800;
+  color: #eef7ff;
+}
+
+.root :global(.scan-settings-view) {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.root :global(.scan-settings-copy) {
+  margin-top: 10px;
+  color: #c8d8ee;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.root :global(.scan-table-row) {
+  display: grid;
+  grid-template-columns: minmax(220px, 1.1fr) minmax(128px, 0.68fr) minmax(230px, 1.08fr) minmax(150px, 0.78fr) 92px;
+  gap: 10px;
+  align-items: center;
+  min-height: 132px;
+  padding: 14px 18px;
+  border: none;
+  border-bottom: 1px solid rgba(90, 123, 166, 0.08);
+  border-radius: 0;
+  background: linear-gradient(180deg, rgba(10, 20, 35, 0.92), rgba(8, 17, 29, 0.92));
+  text-align: left;
+}
+
+.root :global(.scan-table-row > *),
+.root :global(.scan-table-header > *) {
+  min-width: 0;
+}
+
+.root :global(.scan-table-row:hover) {
+  transform: none;
+  background: linear-gradient(180deg, rgba(11, 24, 40, 0.96), rgba(8, 18, 31, 0.96));
+}
+
+.root :global(.scan-table-row.selected) {
+  background: linear-gradient(180deg, rgba(7, 34, 35, 0.92), rgba(8, 19, 29, 0.92));
+  box-shadow: inset 0 0 0 1px rgba(23, 217, 139, 0.48);
+}
+
+.root :global(.scan-edge-cell) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.root :global(.scan-city-cell) {
+  display: block;
+}
+
+.root :global(.scan-city-copy) {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.root :global(.scan-city-name) {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.root :global(.scan-city-sub) {
+  font-size: 14px;
+  color: #a5bad5;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.root :global(.scan-time-cell) {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.root :global(.scan-time-main) {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.root :global(.scan-time-remaining) {
+  font-size: 14px;
+  color: #9eb3ce;
+}
+
+.root :global(.scan-phase-badge),
+.root :global(.scan-status-badge) {
+  width: fit-content;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  text-transform: none;
+}
+
+.root :global(.scan-phase-badge.red) {
+  color: #ff7f7f;
+  background: rgba(255, 93, 93, 0.1);
+}
+
+.root :global(.scan-phase-badge.green) {
+  color: #34e49f;
+  background: rgba(23, 217, 139, 0.12);
+}
+
+.root :global(.scan-phase-badge.blue) {
+  color: #7cb5ff;
+  background: rgba(63, 140, 255, 0.12);
+}
+
+.root :global(.scan-phase-badge.amber) {
+  color: #ffc14b;
+  background: rgba(255, 176, 32, 0.12);
+}
+
+.root :global(.scan-distribution-preview) {
+  display: block;
+  min-width: 0;
+}
+
+.root :global(.scan-model-compare) {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid rgba(86, 120, 168, 0.16);
+  border-radius: 12px;
+  background: rgba(13, 27, 45, 0.7);
+}
+
+.root :global(.scan-model-primary) {
+  display: grid;
+  grid-template-columns: minmax(76px, 1fr) auto auto;
+  gap: 8px;
+  align-items: baseline;
+}
+
+.root :global(.scan-model-primary span),
+.root :global(.scan-model-rows b) {
+  color: rgba(146, 168, 197, 0.92);
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.root :global(.scan-model-primary strong) {
+  color: #22eb98;
+  font-size: 18px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.root :global(.scan-model-primary em) {
+  color: #d7e7fb;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.root :global(.scan-model-rows) {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.root :global(.scan-model-rows span) {
+  display: grid;
+  grid-template-columns: 42px minmax(54px, auto) minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.root :global(.scan-model-rows strong) {
+  color: #eef7ff;
+  font-size: 13px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.root :global(.scan-model-rows em) {
+  overflow: hidden;
+  color: #9fb4cf;
+  font-size: 12px;
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.root :global(.scan-trade-cell) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.root :global(.scan-trade-main) {
+  font-size: 17px;
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+
+.root :global(.scan-trade-main.buy) {
+  color: #26e896;
+}
+
+.root :global(.scan-trade-main.sell) {
+  color: #ff6969;
+}
+
+.root :global(.scan-trade-sub),
+.root :global(.scan-trade-note) {
+  font-size: 14px;
+  color: #a5bad5;
+}
+
+.root :global(.scan-edge-cell) {
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.root :global(.scan-edge-cell.positive) {
+  color: #1de28f;
+}
+
+.root :global(.scan-edge-cell.negative) {
+  color: #ff6868;
+}
+
+.root :global(.scan-row-fav) {
+  display: none;
+}
+
+.root :global(.scan-view-all-wrap) {
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+}
+
+.root :global(.scan-view-all-button) {
+  padding: 12px 18px;
+  font-weight: 700;
+}
+
+.root :global(.scan-ai-log-panel) {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid rgba(68, 100, 150, 0.18);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, rgba(9, 23, 38, 0.92), rgba(7, 17, 30, 0.92)),
+    radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.12), transparent 34%);
+}
+
+.root :global(.scan-ai-log-panel.compact) {
+  flex: 0 0 auto;
+  display: block;
+  margin-top: 10px;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 14px;
+  background: rgba(7, 17, 30, 0.72);
+}
+
+.root :global(.scan-ai-log-panel.compact .scan-ai-log-summary) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 42px;
+  padding: 0 14px;
+  color: #9fb4cf;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+  list-style: none;
+}
+
+.root :global(.scan-ai-log-panel.compact .scan-ai-log-summary::-webkit-details-marker) {
+  display: none;
+}
+
+.root :global(.scan-ai-log-panel.compact .scan-ai-log-summary span) {
+  color: #c7d8ef;
+}
+
+.root :global(.scan-ai-log-panel.compact .scan-ai-log-summary strong) {
+  color: #7fb4ff;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.root :global(.scan-ai-log-panel.compact[open] .scan-ai-log-list) {
+  padding: 0 12px 12px;
+}
+
+.root :global(.scan-ai-analysis-view) {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 520px;
+}
+
+.root :global(.scan-ai-analysis-view.empty) {
+  min-height: 620px;
+}
+
+.root :global(.scan-ai-summary-card) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px;
+  border: 1px solid rgba(34, 211, 238, 0.22);
+  border-radius: 18px;
+  background:
+    linear-gradient(135deg, rgba(8, 32, 52, 0.94), rgba(8, 21, 38, 0.94)),
+    radial-gradient(circle at 0 0, rgba(45, 212, 191, 0.15), transparent 32%);
+}
+
+.root :global(.scan-ai-summary-card strong) {
+  color: #ecf8ff;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.root :global(.scan-ai-summary-card p) {
+  margin: 6px 0 0;
+  color: #a6bbd7;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.55;
+}
+
+.root :global(.scan-ai-inline-button) {
+  min-height: 42px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  border: 1px solid rgba(45, 212, 191, 0.3);
+  border-radius: 12px;
+  color: #d9fff6;
+  background: linear-gradient(135deg, rgba(13, 148, 136, 0.36), rgba(8, 47, 73, 0.4));
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.root :global(.scan-ai-inline-button:disabled) {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.root :global(.scan-ai-log-panel.in-tab) {
+  margin: 0;
+}
+
+.root :global(.scan-ai-city-list) {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.root :global(.scan-ai-city-card) {
+  border: 1px solid rgba(68, 100, 150, 0.2);
+  border-radius: 18px;
+  overflow: hidden;
+  background: rgba(10, 24, 42, 0.82);
+}
+
+.root :global(.scan-ai-city-head) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 16px 18px;
+  background: rgba(15, 34, 57, 0.9);
+}
+
+.root :global(.scan-ai-city-head strong) {
+  color: #f2f8ff;
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.root :global(.scan-ai-city-head p) {
+  margin: 6px 0 0;
+  color: #9fb4d2;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.root :global(.scan-ai-city-head span) {
+  flex: 0 0 auto;
+  padding: 5px 9px;
+  border-radius: 999px;
+  color: #68f3c8;
+  background: rgba(16, 185, 129, 0.12);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.root :global(.scan-ai-cluster-note) {
+  margin: 0 18px 14px;
+  padding: 10px 12px;
+  border: 1px solid rgba(34, 211, 238, 0.18);
+  border-radius: 12px;
+  color: #b7cbe6;
+  background: rgba(6, 18, 32, 0.5);
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.45;
+}
+
+.root :global(.scan-ai-contracts) {
+  display: flex;
+  flex-direction: column;
+  padding: 0 12px 12px;
+}
+
+.root :global(.scan-ai-contract) {
+  display: grid;
+  grid-template-columns: minmax(220px, 1fr) auto;
+  gap: 10px 16px;
+  align-items: center;
+  padding: 12px;
+  border-top: 1px solid rgba(68, 100, 150, 0.16);
+}
+
+.root :global(.scan-ai-contract b) {
+  display: block;
+  color: #edf7ff;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.root :global(.scan-ai-contract small) {
+  display: block;
+  margin-top: 3px;
+  color: #8fa8c7;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.root :global(.scan-ai-contract > span) {
+  justify-self: end;
+  padding: 5px 9px;
+  border-radius: 999px;
+  color: #a8bedc;
+  background: rgba(68, 100, 150, 0.16);
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.root :global(.scan-ai-contract.approve > span) {
+  color: #23f0a8;
+  background: rgba(16, 185, 129, 0.14);
+}
+
+.root :global(.scan-ai-contract.veto > span) {
+  color: #ff8a8a;
+  background: rgba(248, 113, 113, 0.12);
+}
+
+.root :global(.scan-ai-contract.downgrade > span),
+.root :global(.scan-ai-contract.watchlist > span) {
+  color: #ffd166;
+  background: rgba(245, 158, 11, 0.12);
+}
+
+.root :global(.scan-ai-contract p) {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: #9fb4d2;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.root :global(.scan-ai-log-head) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.root :global(.scan-ai-log-head strong) {
+  color: #e9f5ff;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.root :global(.scan-ai-log-head span) {
+  color: #8fa8c7;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.root :global(.scan-ai-log-list) {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.root :global(.scan-ai-log-list::-webkit-scrollbar) {
+  height: 5px;
+}
+
+.root :global(.scan-ai-log-list::-webkit-scrollbar-thumb) {
+  background: rgba(88, 125, 180, 0.26);
+  border-radius: 999px;
+}
+
+.root :global(.scan-ai-log-item) {
+  display: grid;
+  grid-template-columns: auto minmax(180px, 1fr);
+  gap: 8px;
+  min-width: 260px;
+  padding: 9px 10px;
+  border: 1px solid rgba(68, 100, 150, 0.16);
+  border-radius: 12px;
+  background: rgba(14, 29, 48, 0.76);
+}
+
+.root :global(.scan-ai-log-item b) {
+  display: block;
+  color: #edf7ff;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1.25;
+}
+
+.root :global(.scan-ai-log-item small) {
+  display: block;
+  margin-top: 3px;
+  color: #9fb4d2;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.root :global(.scan-ai-log-time) {
+  color: #7892b1;
+  font-size: 11px;
+  font-weight: 900;
+  font-variant-numeric: tabular-nums;
+}
+
+.root :global(.scan-ai-log-item.info) {
+  border-color: rgba(56, 189, 248, 0.22);
+}
+
+.root :global(.scan-ai-log-item.success) {
+  border-color: rgba(16, 185, 129, 0.32);
+}
+
+.root :global(.scan-ai-log-item.warning) {
+  border-color: rgba(245, 158, 11, 0.34);
+}
+
+.root :global(.scan-ai-log-item.error) {
+  border-color: rgba(248, 113, 113, 0.34);
+}
+
+.root :global(.scan-ai-log-empty) {
+  color: #8fa8c7;
+  font-size: 12px;
+  font-weight: 800;
+}

frontend/components/dashboard/ScanTerminalCalendar.module.css

@@ -0,0 +1,170 @@
+/* Scan terminal calendar/action view styles. */
+
+.root :global(.scan-calendar-view) {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding-right: 4px;
+}
+
+.root :global(.scan-calendar-group) {
+  border: 1px solid rgba(90, 123, 166, 0.12);
+  border-radius: 18px;
+  background: rgba(8, 17, 30, 0.8);
+  overflow: hidden;
+  content-visibility: auto;
+  contain-intrinsic-size: 460px;
+}
+
+.root :global(.scan-calendar-group-head) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(90, 123, 166, 0.1);
+}
+
+.root :global(.scan-calendar-date) {
+  font-size: 16px;
+  font-weight: 800;
+  color: #eef7ff;
+}
+
+.root :global(.scan-calendar-count) {
+  font-size: 13px;
+  color: #8fa4c3;
+}
+
+.root :global(.scan-calendar-subtitle) {
+  margin-top: 4px;
+  color: #7f96b6;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.root :global(.scan-calendar-grid) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 12px;
+  padding: 14px;
+}
+
+.root :global(.scan-calendar-card),
+.root :global(.scan-summary-card),
+.root :global(.scan-settings-card) {
+  border: 1px solid rgba(90, 123, 166, 0.12);
+  border-radius: 16px;
+  background: linear-gradient(180deg, rgba(10, 20, 35, 0.92), rgba(8, 17, 29, 0.92));
+}
+
+.root :global(.scan-calendar-card) {
+  text-align: left;
+  padding: 14px;
+  cursor: pointer;
+}
+
+.root :global(.scan-calendar-card.selected) {
+  box-shadow: inset 0 0 0 1px rgba(23, 217, 139, 0.42);
+}
+
+.root :global(.scan-calendar-card.peak-active) {
+  border-color: rgba(23, 217, 139, 0.34);
+  background: linear-gradient(180deg, rgba(12, 42, 38, 0.9), rgba(8, 20, 30, 0.94));
+}
+
+.root :global(.scan-calendar-card.peak-next) {
+  border-color: rgba(94, 234, 212, 0.3);
+}
+
+.root :global(.scan-calendar-card.peak-past) {
+  opacity: 0.78;
+}
+
+.root :global(.scan-calendar-city) {
+  font-size: 16px;
+  font-weight: 800;
+  color: #eef7ff;
+}
+
+.root :global(.scan-calendar-action) {
+  margin-top: 8px;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 15px;
+  font-weight: 800;
+  color: #dcecff;
+}
+
+.root :global(.scan-calendar-action span) {
+  color: #8fa4c3;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.root :global(.scan-calendar-action b) {
+  color: #eef7ff;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.root :global(.scan-calendar-action.buy) {
+  color: #21e391;
+}
+
+.root :global(.scan-calendar-action.sell) {
+  color: #ff6e6e;
+}
+
+.root :global(.scan-calendar-meta) {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: #8fa4c3;
+  font-size: 13px;
+}
+
+.root :global(.scan-calendar-countdown) {
+  margin-top: 12px;
+  padding: 10px 12px;
+  border: 1px solid rgba(94, 234, 212, 0.18);
+  border-radius: 12px;
+  background: rgba(20, 184, 166, 0.1);
+  color: #5fffe8;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.root :global(.scan-calendar-countdown small) {
+  display: block;
+  margin-top: 4px;
+  color: #9fb4d2;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.root :global(.scan-calendar-reason) {
+  margin: 10px 0 0;
+  color: #d6e4f5;
+  font-size: 13px;
+  font-weight: 760;
+  line-height: 1.45;
+}
+
+.root :global(.scan-summary-grid) {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.root :global(.scan-summary-grid.monitor) {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.root :global(.scan-summary-card),
+.root :global(.scan-settings-card) {
+  padding: 18px;
+}

frontend/components/dashboard/ScanTerminalDashboard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import clsx from "clsx";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import {
   LogIn,
@@ -17,11 +18,28 @@ import {
   useState,
 } from "react";
 import styles from "./Dashboard.module.css";
+import dashboardHomeStyles from "./DashboardHomeIntelligence.module.css";
+import dashboardMapStyles from "./DashboardMap.module.css";
+import dashboardModalGuideStyles from "./DashboardModalGuide.module.css";
+import dashboardShellStyles from "./DashboardShell.module.css";
 import detailChromeStyles from "./DetailPanelChrome.module.css";
+import detailContentStyles from "./DetailPanelContent.module.css";
+import detailSectionsStyles from "./DetailPanelSections.module.css";
+import futureForecastModalStyles from "./FutureForecastModal.module.css";
+import historyModalStyles from "./HistoryModal.module.css";
 import modalChromeStyles from "./ModalChrome.module.css";
-import { DetailPanel as CityDetailPanel } from "@/components/dashboard/DetailPanel";
-import { FutureForecastModal } from "@/components/dashboard/FutureForecastModal";
-import { MapCanvas } from "@/components/dashboard/MapCanvas";
+import scanTerminalCalendarStyles from "./ScanTerminalCalendar.module.css";
+import scanTerminalCardStyles from "./ScanTerminalCard.module.css";
+import scanTerminalLightThemeStyles from "./ScanTerminalLightTheme.module.css";
+import scanTerminalOpportunityStyles from "./ScanTerminalOpportunity.module.css";
+import scanTerminalStyles from "./ScanTerminal.module.css";
+import scanTerminalBoardStyles from "./ScanTerminalBoard.module.css";
+import scanTerminalDetailStyles from "./ScanTerminalDetail.module.css";
+import scanTerminalFiltersStyles from "./ScanTerminalFilters.module.css";
+import scanTerminalListStyles from "./ScanTerminalList.module.css";
+import scanTerminalShellStyles from "./ScanTerminalShell.module.css";
+import scanTerminalStateStyles from "./ScanTerminalState.module.css";
+import scanTerminalMobileStyles from "./ScanTerminalMobile.module.css";
 import { ProFeaturePaywall } from "@/components/dashboard/ProFeaturePaywall";
 import {
   DashboardStoreProvider,
@@ -31,37 +49,50 @@ import { I18nProvider, useI18n } from "@/hooks/useI18n";
 import type {
   CityDetail,
   ScanOpportunityRow,
-  ScanTerminalResponse,
 } from "@/lib/dashboard-types";
-import {
-  buildBrowserBackendHeaders,
-  fetchBackendApi,
-} from "@/lib/backend-api";
-import { getLocalizedCityName } from "@/lib/dashboard-home-copy";
 import { AiPinnedForecastView } from "@/components/dashboard/scan-terminal/AiPinnedForecastView";
 import { CalendarView } from "@/components/dashboard/scan-terminal/CalendarView";
 import { AiForecastKPIBar } from "@/components/dashboard/scan-terminal/AiForecastKPIBar";
 import { LoadingSignal } from "@/components/dashboard/scan-terminal/LoadingSignal";
-import { OpportunityOverview } from "@/components/dashboard/scan-terminal/OpportunityOverview";
-import {
-  findDetailForCity,
-  isFullEnoughForDeepAnalysis,
-  waitForDeepAnalysisQueue,
-} from "@/components/dashboard/scan-terminal/city-detail-utils";
-import type { AiPinnedCity } from "@/components/dashboard/scan-terminal/types";
+import { findDetailForCity } from "@/components/dashboard/scan-terminal/city-detail-utils";
 import {
   findRowForCity,
-  formatUserLocalTime,
   normalizeCityKey,
-  prettifyCityName,
   rowMatchesCity,
   sortRowsByUserTime,
 } from "@/components/dashboard/scan-terminal/decision-utils";
+import { useAiPinnedCityWorkspace } from "@/components/dashboard/scan-terminal/use-ai-pinned-city-workspace";
+import { useScanTerminalQuery } from "@/components/dashboard/scan-terminal/use-scan-terminal-query";
+import {
+  useScanTerminalTheme,
+  useUserLocalClock,
+} from "@/components/dashboard/scan-terminal/use-scan-terminal-ui-state";
 
-type ContentView = "opportunities" | "analysis" | "map" | "calendar";
-type ThemeMode = "dark" | "light";
-const SCAN_TERMINAL_AUTO_REFRESH_MS = 10 * 60_000;
-const SCAN_TERMINAL_MANUAL_REFRESH_COOLDOWN_MS = 2 * 60_000;
+type ContentView = "analysis" | "map" | "calendar";
+
+const CityDetailPanel = dynamic(
+  () =>
+    import("@/components/dashboard/DetailPanel").then(
+      (module) => module.DetailPanel,
+    ),
+  { ssr: false },
+);
+
+const FutureForecastModal = dynamic(
+  () =>
+    import("@/components/dashboard/FutureForecastModal").then(
+      (module) => module.FutureForecastModal,
+    ),
+  { ssr: false },
+);
+
+const MapCanvas = dynamic(
+  () =>
+    import("@/components/dashboard/MapCanvas").then(
+      (module) => module.MapCanvas,
+    ),
+  { ssr: false },
+);
 
 function ScanTerminalScreen() {
   const store = useDashboardStore();
@@ -71,40 +102,63 @@ function ScanTerminalScreen() {
   const accountHref = store.proAccess.authenticated
     ? "/account"
     : "/auth/login?next=%2Faccount";
-  const [terminalData, setTerminalData] = useState<ScanTerminalResponse | null>(null);
-  const [scanLoading, setScanLoading] = useState(false);
-  const [scanError, setScanError] = useState<string | null>(null);
+  const {
+    refreshScanTerminalManually,
+    scanError,
+    scanLoading,
+    terminalData,
+  } = useScanTerminalQuery({
+    isPro,
+    proAccessLoading: store.proAccess.loading,
+  });
   const [selectedRowId, setSelectedRowId] = useState<string | null>(null);
-  const [activeView, setActiveView] = useState<ContentView>("opportunities");
+  const [activeView, setActiveView] = useState<ContentView>("map");
   const [mapSelectedCityName, setMapSelectedCityName] = useState<string | null>(null);
-  const [aiPinnedCities, setAiPinnedCities] = useState<AiPinnedCity[]>([]);
   const [showScanPaywall, setShowScanPaywall] = useState(false);
-  const [userLocalTime, setUserLocalTime] = useState("--");
-  const [themeMode, setThemeMode] = useState<ThemeMode>("dark");
+  const userLocalTime = useUserLocalClock();
+  const { setThemeMode, themeMode } = useScanTerminalTheme();
   const lastMapSelectedCityRef = useRef<string>("");
-  const aiFullHydrationRef = useRef<Set<string>>(new Set());
-  const aiHydrationQueueRef = useRef<string[]>([]);
-  const aiHydrationRunningRef = useRef(false);
-  const scanRequestSeqRef = useRef(0);
-  const scanLoadingRef = useRef(false);
-  const lastForcedScanRefreshAtRef = useRef(0);
-
-  useEffect(() => {
-    const root = document.documentElement;
-    const hadLight = root.classList.contains("light");
-    const hadDark = root.classList.contains("dark");
-    root.classList.toggle("light", themeMode === "light");
-    root.classList.toggle("dark", themeMode === "dark");
-    return () => {
-      root.classList.toggle("light", hadLight);
-      root.classList.toggle("dark", hadDark);
-    };
-  }, [themeMode]);
+  const scanTerminalRootClassName = clsx(
+    styles.root,
+    dashboardHomeStyles.root,
+    dashboardMapStyles.root,
+    dashboardShellStyles.root,
+    dashboardModalGuideStyles.root,
+    scanTerminalStyles.root,
+    scanTerminalShellStyles.root,
+    scanTerminalFiltersStyles.root,
+    scanTerminalListStyles.root,
+    scanTerminalBoardStyles.root,
+    scanTerminalDetailStyles.root,
+    scanTerminalStateStyles.root,
+    scanTerminalOpportunityStyles.root,
+    scanTerminalCardStyles.root,
+    scanTerminalCalendarStyles.root,
+    scanTerminalMobileStyles.root,
+    scanTerminalLightThemeStyles.root,
+    detailChromeStyles.root,
+    detailContentStyles.root,
+    detailSectionsStyles.root,
+    modalChromeStyles.root,
+    futureForecastModalStyles.root,
+    historyModalStyles.root,
+    themeMode === "light" && "light",
+  );
 
   const timeSortedRows = useMemo(
     () => sortRowsByUserTime(terminalData?.rows || []),
     [terminalData?.rows],
   );
+  const {
+    addAiPinnedCity,
+    aiPinnedCities,
+    refreshAiPinnedCityDetail,
+    removeAiPinnedCity,
+  } = useAiPinnedCityWorkspace({
+    locale,
+    store,
+    timeSortedRows,
+  });
   const selectedRow = useMemo(() => {
     if (!timeSortedRows.length) return null;
     return timeSortedRows.find((row) => row.id === selectedRowId) || timeSortedRows[0] || null;
@@ -229,130 +283,6 @@ function ScanTerminalScreen() {
     }
   }, [activeView, isPro, store.proAccess.loading]);
 
-  const fetchScanTerminal = useCallback(
-    async ({
-      forceRefresh = false,
-      showLoading = false,
-    }: {
-      forceRefresh?: boolean;
-      showLoading?: boolean;
-    } = {}) => {
-      if (store.proAccess.loading || !isPro) return;
-      const requestSeq = ++scanRequestSeqRef.current;
-      const controller = new AbortController();
-      if (forceRefresh) {
-        lastForcedScanRefreshAtRef.current = Date.now();
-      }
-      if (showLoading) {
-        scanLoadingRef.current = true;
-        setScanLoading(true);
-      }
-      setScanError(null);
-    const params = new URLSearchParams({
-      scan_mode: "tradable",
-      min_price: "0.05",
-      max_price: "0.95",
-      min_edge_pct: "2",
-      min_liquidity: "500",
-      market_type: "maxtemp",
-      time_range: "today",
-      limit: "36",
-      force_refresh: String(forceRefresh),
-    });
-      if (forceRefresh) {
-        params.set("_ts", String(Date.now()));
-      }
-      try {
-        const headers = await buildBrowserBackendHeaders({
-          Accept: "application/json",
-        });
-        const response = await fetchBackendApi(`/api/scan/terminal?${params.toString()}`, {
-          cache: "no-store",
-          headers,
-          signal: controller.signal,
-        });
-        if (!response.ok) {
-          let message = `HTTP ${response.status}`;
-          try {
-            const payload = await response.json();
-            message = String(payload?.error || payload?.detail || message);
-          } catch {
-            // Keep HTTP status message.
-          }
-          throw new Error(message);
-        }
-        const payload = (await response.json()) as ScanTerminalResponse;
-        if (requestSeq !== scanRequestSeqRef.current) return;
-        setTerminalData(payload);
-        setScanError(null);
-      } catch (error) {
-        if (controller.signal.aborted || requestSeq !== scanRequestSeqRef.current) return;
-        setScanError(error instanceof Error ? error.message : String(error));
-      } finally {
-        if (showLoading) {
-          scanLoadingRef.current = false;
-          setScanLoading(false);
-        }
-      }
-    },
-    [isPro, store.proAccess.loading],
-  );
-
-  useEffect(() => {
-    if (store.proAccess.loading) return;
-    if (!isPro) {
-      scanLoadingRef.current = false;
-      setScanLoading(false);
-      setScanError(null);
-      setTerminalData(null);
-      return;
-    }
-    void fetchScanTerminal({ forceRefresh: false, showLoading: true });
-  }, [fetchScanTerminal, isPro, store.proAccess.loading]);
-
-  const refreshScanTerminalManually = useCallback(() => {
-    const now = Date.now();
-    const lastForced = lastForcedScanRefreshAtRef.current;
-    const withinCooldown =
-      lastForced > 0 &&
-      now - lastForced < SCAN_TERMINAL_MANUAL_REFRESH_COOLDOWN_MS &&
-      terminalData;
-    if (withinCooldown) {
-      setScanError(null);
-      return;
-    }
-    void fetchScanTerminal({ forceRefresh: true, showLoading: true });
-  }, [fetchScanTerminal, terminalData]);
-
-  useEffect(() => {
-    if (store.proAccess.loading || !isPro) return;
-    const intervalId = window.setInterval(() => {
-      if (document.hidden) return;
-      if (scanLoadingRef.current) return;
-      void fetchScanTerminal({ forceRefresh: true, showLoading: false });
-    }, SCAN_TERMINAL_AUTO_REFRESH_MS);
-    return () => window.clearInterval(intervalId);
-  }, [fetchScanTerminal, isPro, store.proAccess.loading]);
-
-  useEffect(() => {
-    setUserLocalTime(formatUserLocalTime());
-    const intervalId = window.setInterval(() => {
-      setUserLocalTime(formatUserLocalTime());
-    }, 10_000);
-    return () => window.clearInterval(intervalId);
-  }, []);
-
-  useEffect(() => {
-    const stored = window.localStorage.getItem("polyweather_scan_theme");
-    if (stored === "light") {
-      setThemeMode("light");
-    }
-  }, []);
-
-  useEffect(() => {
-    window.localStorage.setItem("polyweather_scan_theme", themeMode);
-  }, [themeMode]);
-
   const resolvedView: ContentView = activeView;
   const mapFocusedCity = mapSelectedCityName || store.selectedCity;
   const activeDetailRow =
@@ -369,115 +299,6 @@ function ScanTerminalScreen() {
     }
   }, [activeDetailRow, store.cityDetailsByName, store.ensureCityDetail]);
 
-  const runAiHydrationQueue = useCallback(async () => {
-    if (aiHydrationRunningRef.current) return;
-    aiHydrationRunningRef.current = true;
-    try {
-      while (aiHydrationQueueRef.current.length > 0) {
-        const nextCity = aiHydrationQueueRef.current.shift();
-        const key = normalizeCityKey(nextCity || "");
-        if (!nextCity || !key) continue;
-        const existingDetail = findDetailForCity(store.cityDetailsByName, nextCity);
-        try {
-          const detail = await store.ensureCityDetail(
-            nextCity,
-            Boolean(existingDetail) && !isFullEnoughForDeepAnalysis(existingDetail),
-            "full",
-          );
-          if (!isFullEnoughForDeepAnalysis(detail)) {
-            aiFullHydrationRef.current.delete(key);
-          }
-        } catch {
-          aiFullHydrationRef.current.delete(key);
-        }
-        await waitForDeepAnalysisQueue(1200);
-      }
-    } finally {
-      aiHydrationRunningRef.current = false;
-      if (aiHydrationQueueRef.current.length > 0) {
-        void runAiHydrationQueue();
-      }
-    }
-  }, [store.cityDetailsByName, store.ensureCityDetail]);
-
-  const queueAiFullHydration = useCallback(
-    (cityName: string) => {
-      const key = normalizeCityKey(cityName);
-      if (!key || aiFullHydrationRef.current.has(key)) return;
-      aiFullHydrationRef.current.add(key);
-      aiHydrationQueueRef.current.push(cityName);
-      void runAiHydrationQueue();
-    },
-    [runAiHydrationQueue],
-  );
-
-  const addAiPinnedCity = useCallback((cityName: string) => {
-    const cleanName = String(cityName || "").trim();
-    const key = normalizeCityKey(cleanName);
-    if (!key) return;
-    const matchedRow = findRowForCity(timeSortedRows, cleanName);
-    const prettyName = prettifyCityName(cleanName);
-    const displayName =
-      matchedRow?.city_display_name ||
-      matchedRow?.display_name ||
-      getLocalizedCityName(cleanName, prettyName || cleanName, locale) ||
-      prettyName ||
-      cleanName;
-    setAiPinnedCities((current) => {
-      const existing = current.findIndex(
-        (item) => normalizeCityKey(item.cityName) === key,
-      );
-      const nextItem = {
-        cityName: matchedRow?.city || cleanName,
-        displayName,
-        addedAt: Date.now(),
-      };
-      if (existing >= 0) {
-        const next = [...current];
-        next[existing] = { ...next[existing], ...nextItem };
-        return [
-          next[existing],
-          ...next.filter((_, index) => index !== existing),
-        ];
-      }
-      return [nextItem, ...current].slice(0, 8);
-    });
-    queueAiFullHydration(matchedRow?.city || cleanName);
-  }, [locale, queueAiFullHydration, timeSortedRows]);
-
-  const removeAiPinnedCity = useCallback((cityName: string) => {
-    const key = normalizeCityKey(cityName);
-    aiFullHydrationRef.current.delete(key);
-    aiHydrationQueueRef.current = aiHydrationQueueRef.current.filter(
-      (queuedCity) => normalizeCityKey(queuedCity) !== key,
-    );
-    setAiPinnedCities((current) =>
-      current.filter((item) => normalizeCityKey(item.cityName) !== key),
-    );
-  }, []);
-
-  const refreshAiPinnedCityDetail = useCallback(
-    async (cityName: string) => {
-      const key = normalizeCityKey(cityName);
-      if (key) {
-        aiFullHydrationRef.current.delete(key);
-      }
-      await store.ensureCityDetail(cityName, true, "full");
-    },
-    [store.ensureCityDetail],
-  );
-
-  useEffect(() => {
-    aiPinnedCities.forEach((item) => {
-      const key = normalizeCityKey(item.cityName);
-      if (!key || aiFullHydrationRef.current.has(key)) return;
-      const detail = findDetailForCity(store.cityDetailsByName, item.cityName);
-      const needsFullHydration = !isFullEnoughForDeepAnalysis(detail);
-      if (!needsFullHydration) return;
-      queueAiFullHydration(item.cityName);
-    });
-  }, [aiPinnedCities, queueAiFullHydration, store.cityDetailsByName]);
-
   const handleMapCitySelect = useCallback((cityName: string) => {
     setMapSelectedCityName(cityName);
     lastMapSelectedCityRef.current = normalizeCityKey(cityName);
@@ -533,36 +354,6 @@ function ScanTerminalScreen() {
   }, []);
 
   const renderMainView = () => {
-    if (resolvedView === "opportunities") {
-      if (!isPro) {
-        return (
-          <div className="scan-opportunity-overview empty">
-            <strong>{isEn ? "Opportunity board is Pro" : "今日机会榜需 Pro 权限"}</strong>
-            <p>
-              {isEn
-                ? "Map exploration and city briefing are still available."
-                : "地图探索和城市简报仍可使用。"}
-            </p>
-            <button type="button" onClick={openScanPaywall}>
-              {isEn ? "Unlock opportunity board" : "解锁机会榜"}
-            </button>
-          </div>
-        );
-      }
-      return (
-        <OpportunityOverview
-          rows={timeSortedRows}
-          terminalData={terminalData}
-          loading={scanLoading}
-          error={scanError}
-          locale={locale}
-          selectedRowId={selectedRowId}
-          onOpenDecision={handleOpenDecisionRow}
-          onSelectRow={handleSelectRow}
-          onOpenMap={() => setActiveView("map")}
-        />
-      );
-    }
     if (resolvedView === "map") {
       return (
         <div className="scan-map-view">
@@ -618,7 +409,7 @@ function ScanTerminalScreen() {
 
   if (store.proAccess.loading) {
     return (
-      <div className={clsx(styles.root, detailChromeStyles.root, modalChromeStyles.root, themeMode === "light" && "light")}>
+      <div className={scanTerminalRootClassName}>
         <div className={clsx("scan-terminal", themeMode === "light" && "light")}>
           <main className="scan-data-grid">
             <div className="scan-loading-state">
@@ -638,16 +429,24 @@ function ScanTerminalScreen() {
   }
 
   return (
-    <div className={clsx(styles.root, detailChromeStyles.root, modalChromeStyles.root, themeMode === "light" && "light")}>
-      <div className={clsx("scan-terminal", themeMode === "light" && "light")}>
+    <div className={scanTerminalRootClassName}>
+      <div
+        className={clsx(
+          "scan-terminal",
+          resolvedView === "map" && "map-view-active",
+          resolvedView !== "map" && "focus-view-active",
+          resolvedView === "analysis" && "analysis-view-active",
+          themeMode === "light" && "light",
+        )}
+      >
         <main className="scan-data-grid">
           <div className="scan-topbar">
             <div className="scan-topbar-title">
               <strong>{isEn ? "AI Weather Decision Terminal" : "AI 天气交易决策台"}</strong>
               <span>
                 {isEn
-                  ? "Start from opportunities, then open city cards to verify weather evidence"
-                  : "先看今日机会榜，再打开城市决策卡验证天气证据"}
+                  ? "Start from the map, then open city cards to verify weather evidence"
+                  : "从地图选城市，再打开决策卡验证天气证据"}
               </span>
             </div>
             <div className="scan-topbar-actions">
@@ -712,15 +511,6 @@ function ScanTerminalScreen() {
           <section className="scan-list-section">
             <div className="scan-list-header">
               <div className="scan-list-tabs">
-                <button
-                  type="button"
-                  className={resolvedView === "opportunities" ? "active" : ""}
-                  onClick={() => {
-                    setActiveView("opportunities");
-                  }}
-                >
-                  {isEn ? "Opportunity Board" : "今日机会榜"}
-                </button>
                 <button
                   type="button"
                   className={resolvedView === "map" ? "active" : ""}
@@ -781,8 +571,8 @@ function ScanTerminalScreen() {
                     disabled={scanLoading}
                     title={
                       isEn
-                        ? "Force refresh opportunity board and calendar"
-                        : "强制刷新今日机会榜和日历视图"
+                        ? "Force refresh decision cards and calendar"
+                        : "强制刷新决策卡和日历视图"
                     }
                   >
                     <RefreshCw size={14} className={scanLoading ? "spin" : undefined} />

frontend/components/dashboard/ScanTerminalDetail.module.css

@@ -0,0 +1,353 @@
+/* Scan terminal right-side detail panel styles for the current decision desk. */
+
+.root :global(.scan-detail-panel) {
+  width: auto;
+  min-width: 0;
+  padding: 18px 16px;
+  border-left: 1px solid rgba(82, 114, 161, 0.18);
+}
+
+.root :global(.scan-detail-header) {
+  padding: 0 0 16px;
+  justify-content: space-between;
+  border-bottom: none;
+  margin-bottom: 10px;
+}
+
+.root :global(.scan-detail-top) {
+  display: flex;
+  gap: 0;
+  align-items: center;
+}
+
+.root :global(.scan-detail-title-wrap) {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.root :global(.scan-detail-icon-button) {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+}
+
+.root :global(.scan-detail-hero-placeholder) {
+  width: 66px;
+  height: 66px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #314d7b, #0d2038 60%, #08131f);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.root :global(.scan-detail-city-name) {
+  font-size: 22px;
+  font-weight: 800;
+}
+
+.root :global(.scan-detail-city-sub) {
+  font-size: 14px;
+  color: #a4bad6;
+}
+
+.root :global(.scan-detail-volume-row) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.root :global(.scan-detail-volume-big) {
+  font-size: 28px;
+  font-weight: 800;
+}
+
+.root :global(.scan-detail-volume-caption) {
+  margin-top: 4px;
+  font-size: 14px;
+  color: #90a7c4;
+}
+
+.root :global(.scan-detail-action-button) {
+  padding: 11px 14px;
+  font-weight: 700;
+}
+
+.root :global(.scan-detail-primary-actions) {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.root :global(.scan-detail-analysis-button) {
+  width: 100%;
+  border: 1px solid rgba(23, 217, 139, 0.3);
+  border-radius: 14px;
+  background: rgba(23, 217, 139, 0.12);
+  color: #27ea98;
+  padding: 12px 14px;
+  font-size: 14px;
+  font-weight: 800;
+  text-align: center;
+}
+
+.root :global(.scan-detail-analysis-button:hover) {
+  background: rgba(23, 217, 139, 0.18);
+  border-color: rgba(23, 217, 139, 0.4);
+}
+
+.root :global(.scan-detail-section) {
+  padding: 16px 0;
+  border-bottom: 1px solid rgba(90, 123, 166, 0.12);
+}
+
+.root :global(.scan-detail-section-title) {
+  font-size: 16px;
+  font-weight: 800;
+  color: #e8f2ff;
+  text-transform: none;
+  letter-spacing: 0;
+  margin-bottom: 12px;
+}
+
+.root :global(.scan-kv-list) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.root :global(.scan-kv) {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 4px 0;
+  color: #dbe7f8;
+}
+
+.root :global(.scan-kv span:first-child) {
+  color: #91a8c6;
+}
+
+.root :global(.scan-kv strong) {
+  font-size: 15px;
+}
+
+.root :global(.scan-kv strong.warn) {
+  color: #ffbf39;
+}
+
+.root :global(.scan-kv strong.danger) {
+  color: #ff7f7f;
+}
+
+.root :global(.scan-timeline-head) {
+  display: flex;
+  justify-content: space-between;
+  color: #a1b6d2;
+  font-size: 13px;
+}
+
+.root :global(.scan-timeline-bar) {
+  position: relative;
+  height: 8px;
+  margin-top: 8px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #e83c3c 0 72%, rgba(255, 255, 255, 0.18) 72% 100%);
+}
+
+.root :global(.scan-timeline-knob) {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #dfe8f6;
+  box-shadow: 0 0 0 4px rgba(223, 232, 246, 0.12);
+  transform: translate(-50%, -50%);
+}
+
+.root :global(.scan-timeline-caption) {
+  margin-top: 8px;
+  color: #a1b6d2;
+  font-size: 13px;
+  text-align: right;
+}
+
+.root :global(.scan-chart-legend) {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 14px;
+  color: #a8bdd8;
+  font-size: 13px;
+}
+
+.root :global(.scan-chart-legend .dot) {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.root :global(.scan-chart-legend .dot.green) {
+  background: #1ce393;
+}
+
+.root :global(.scan-chart-legend .dot.blue) {
+  background: #4ca2ff;
+}
+
+.root :global(.scan-chart-bars) {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px;
+  height: 170px;
+  padding: 8px 4px 0;
+}
+
+.root :global(.scan-chart-group) {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 6px;
+  position: relative;
+}
+
+.root :global(.scan-chart-group.highlighted .scan-chart-label) {
+  color: #22eb98;
+  font-weight: 800;
+}
+
+.root :global(.scan-chart-col) {
+  width: 20px;
+  border-radius: 8px 8px 0 0;
+}
+
+.root :global(.scan-chart-col.model) {
+  background: linear-gradient(180deg, #1ce393, #0b8d5a);
+}
+
+.root :global(.scan-chart-col.market) {
+  background: linear-gradient(180deg, #4ca2ff, #2263cf);
+}
+
+.root :global(.scan-chart-label) {
+  position: absolute;
+  bottom: -24px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #93a8c4;
+  font-size: 13px;
+}
+
+.root :global(.scan-trade-cards) {
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.root :global(.scan-trade-card) {
+  padding: 16px;
+  border-radius: 16px;
+  background: rgba(11, 24, 42, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.root :global(.scan-trade-card.buy) {
+  box-shadow: inset 0 0 0 1px rgba(23, 217, 139, 0.22);
+}
+
+.root :global(.scan-trade-card.sell) {
+  box-shadow: inset 0 0 0 1px rgba(255, 93, 93, 0.22);
+}
+
+.root :global(.scan-trade-card-title) {
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.root :global(.scan-trade-card.buy .scan-trade-card-title) {
+  color: #20e391;
+}
+
+.root :global(.scan-trade-card.sell .scan-trade-card-title) {
+  color: #ff7070;
+}
+
+.root :global(.scan-trade-card p) {
+  margin: 10px 0 0;
+  color: #d5e1f5;
+  font-size: 14px;
+}
+
+.root :global(.scan-trade-card p.positive) {
+  color: #20e391;
+}
+
+.root :global(.scan-trade-card p.negative) {
+  color: #ff7070;
+}
+
+.root :global(.scan-detail-score-block) {
+  margin-top: 18px;
+  padding-top: 16px;
+}
+
+.root :global(.scan-detail-score-head) {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.root :global(.scan-detail-score-label-text) {
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.root :global(.scan-detail-score-meta) {
+  margin-top: 6px;
+  color: #89a0bf;
+  font-size: 13px;
+}
+
+.root :global(.scan-detail-score-value) {
+  font-size: 40px;
+  font-weight: 800;
+}
+
+.root :global(.scan-detail-score-value.green) {
+  color: #23e694;
+}
+
+.root :global(.scan-detail-score-value.yellow) {
+  color: #ffbe26;
+}
+
+.root :global(.scan-detail-score-value.red) {
+  color: #ff6f86;
+}
+
+.root :global(.scan-detail-score-value span) {
+  font-size: 22px;
+  color: #9fb5d2;
+}
+
+.root :global(.scan-detail-score-line) {
+  height: 6px;
+  margin-top: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.root :global(.scan-detail-score-line span) {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #1be392, #12b46d);
+  box-shadow: 0 0 18px rgba(27, 227, 146, 0.22);
+}

frontend/components/dashboard/ScanTerminalFilters.module.css

@@ -0,0 +1,241 @@
+/* Scan terminal sidebar filters, mode tabs, range controls, toggles, and CTA.
+   Imported after ScanTerminal.module.css so these current-desk overrides win over legacy base rules. */
+
+.root :global(.scan-filter-panel) {
+  width: auto;
+  min-width: 0;
+  border-right: 1px solid rgba(159, 178, 199, 0.14);
+  padding: 18px 14px;
+  gap: 18px;
+  overflow: hidden auto;
+}
+
+.root :global(.scan-sidebar-brand) {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 8px 4px 18px;
+  border-bottom: 1px solid rgba(118, 146, 188, 0.12);
+}
+
+.root :global(.scan-sidebar-brand-mark) {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  color: #042113;
+  background: radial-gradient(circle at 30% 30%, #29f2ab, #0da46a 60%, #073c28 100%);
+  box-shadow: 0 0 24px rgba(23, 217, 139, 0.3);
+}
+
+.root :global(.scan-sidebar-brand-name) {
+  font-size: 30px;
+  font-weight: 800;
+  letter-spacing: 0;
+  color: #eef5ff;
+}
+
+.root :global(.scan-filter-heading) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 6px 8px 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #b8c7dd;
+}
+
+.root :global(.scan-mode-tabs) {
+  gap: 10px;
+}
+
+.root :global(.scan-mode-tab) {
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(87, 119, 166, 0.14);
+  background: rgba(11, 24, 42, 0.95);
+  color: #dbe7f8;
+}
+
+.root :global(.scan-mode-tab:hover) {
+  background: rgba(13, 28, 48, 0.98);
+  border-color: rgba(87, 119, 166, 0.24);
+}
+
+.root :global(.scan-mode-tab.active) {
+  background: linear-gradient(180deg, rgba(15, 34, 59, 1), rgba(9, 19, 34, 1));
+  border-color: rgba(78, 222, 151, 0.7);
+  color: #f3fbff;
+  box-shadow: inset 0 0 0 1px rgba(78, 222, 151, 0.35), 0 0 0 2px rgba(7, 199, 119, 0.08);
+}
+
+.root :global(.scan-mode-tab.active::before) {
+  display: none;
+}
+
+.root :global(.scan-mode-icon) {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  background: rgba(63, 140, 255, 0.12);
+  color: #6cb1ff;
+}
+
+.root :global(.scan-mode-tab.active .scan-mode-icon) {
+  background: rgba(23, 217, 139, 0.14);
+  color: #2df3a5;
+}
+
+.root :global(.scan-mode-copy) {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.root :global(.scan-mode-tab-label) {
+  font-size: 15px;
+  font-weight: 700;
+  color: inherit;
+}
+
+.root :global(.scan-mode-tab-sub) {
+  font-size: 12px;
+  line-height: 1.4;
+  color: #8fa4c3;
+}
+
+.root :global(.scan-range-card),
+.root :global(.scan-filter-row) {
+  background: rgba(11, 24, 42, 0.92);
+  border: 1px solid rgba(87, 119, 166, 0.12);
+  border-radius: 12px;
+  padding: 12px 14px;
+}
+
+.root :global(.scan-range-card) {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.root :global(.scan-filter-row-title),
+.root :global(.scan-filter-row-label) {
+  font-size: 14px;
+  color: #d9e7f8;
+}
+
+.root :global(.scan-filter-row) {
+  gap: 10px;
+}
+
+.root :global(.scan-filter-row.inline) {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.root :global(.scan-range-track-wrap) {
+  position: relative;
+  height: 20px;
+}
+
+.root :global(.scan-range-track-wrap::before) {
+  content: "";
+  position: absolute;
+  inset: 7px 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #1c2f4e, #2d4f84);
+}
+
+.root :global(.scan-range-slider) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 20px;
+  background: transparent;
+  pointer-events: none;
+}
+
+.root :global(.scan-range-slider::-webkit-slider-thumb) {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: none;
+  background: #4d93ff;
+  box-shadow: 0 0 0 4px rgba(77, 147, 255, 0.16);
+  pointer-events: auto;
+}
+
+.root :global(.scan-range-slider::-moz-range-thumb) {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: none;
+  background: #4d93ff;
+  box-shadow: 0 0 0 4px rgba(77, 147, 255, 0.16);
+  pointer-events: auto;
+}
+
+.root :global(.scan-range-slider::-webkit-slider-runnable-track),
+.root :global(.scan-range-slider::-moz-range-track) {
+  background: transparent;
+}
+
+.root :global(.scan-range-labels) {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #aec0d9;
+}
+
+.root :global(.scan-select) {
+  border-radius: 10px;
+  padding: 10px 12px;
+  border-color: rgba(87, 119, 166, 0.12);
+  background: rgba(10, 22, 38, 0.95);
+  color: #d9e8fb;
+}
+
+.root :global(.scan-toggle) {
+  width: 42px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: linear-gradient(90deg, #0e2840, #12324d);
+}
+
+.root :global(.scan-toggle.active) {
+  background: linear-gradient(90deg, #0e2840, #1f7f57);
+  border-color: rgba(39, 234, 152, 0.28);
+}
+
+.root :global(.scan-toggle-knob) {
+  top: 2px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  background: #8ca5c8;
+}
+
+.root :global(.scan-toggle.active .scan-toggle-knob) {
+  left: 21px;
+  background: #1bf1a2;
+  box-shadow: 0 0 10px rgba(27, 241, 162, 0.45);
+}
+
+.root :global(.scan-cta-button) {
+  border-radius: 14px;
+  padding: 15px;
+  margin-top: auto;
+  background: linear-gradient(180deg, #1ddb8d, #0eb96d);
+  box-shadow: 0 8px 22px rgba(14, 185, 109, 0.22);
+  font-size: 16px;
+  font-weight: 800;
+}

frontend/components/dashboard/ScanTerminalLightTheme.module.css

@@ -0,0 +1,968 @@
+/* Scan terminal light theme overrides. Keep imported after other scan CSS modules. */
+
+.root :global(.scan-terminal.light) {
+  background:
+    radial-gradient(circle at top, rgba(59, 130, 246, 0.1), transparent 34%),
+    linear-gradient(180deg, #F7F9FC 0%, #EEF2F7 100%);
+  color: #0F172A;
+}
+
+.root :global(.scan-terminal.light .scan-filter-panel),
+.root :global(.scan-terminal.light .scan-data-grid),
+.root :global(.scan-terminal.light .scan-detail-panel),
+.root :global(.scan-terminal.light > .detail-panel.scan-city-detail-rail) {
+  border-color: #E2E8F0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
+  box-shadow: 0 16px 34px rgba(40, 70, 110, 0.12);
+}
+
+.root :global(.scan-terminal.light .scan-sidebar-brand-name),
+.root :global(.scan-terminal.light .scan-topbar-tab.active),
+.root :global(.scan-terminal.light .scan-hero h1),
+.root :global(.scan-terminal.light .scan-topbar-title strong),
+.root :global(.scan-terminal.light .scan-city-name),
+.root :global(.scan-terminal.light .scan-opportunity-city strong),
+.root :global(.scan-terminal.light .panel-title-area h2),
+.root :global(.scan-terminal.light .detail-summary-temp),
+.root :global(.scan-terminal.light .scan-detail-city-name),
+.root :global(.scan-terminal.light .scan-empty-title),
+.root :global(.scan-terminal.light .scan-detail-section-title),
+.root :global(.scan-terminal.light .scan-detail-volume-big),
+.root :global(.scan-terminal.light .scan-kv strong),
+.root :global(.scan-terminal.light .scan-time-main),
+.root :global(.scan-terminal.light .scan-calendar-date),
+.root :global(.scan-terminal.light .scan-summary-value),
+.root :global(.scan-terminal.light .scan-distribution-card strong),
+.root :global(.scan-terminal.light .scan-table-header),
+.root :global(.scan-terminal.light .scan-list-tabs button.active) {
+  color: #0F172A;
+}
+
+.root :global(.scan-terminal.light .scan-filter-heading),
+.root :global(.scan-terminal.light .scan-topbar-actions),
+.root :global(.scan-terminal.light .scan-topbar-time),
+.root :global(.scan-terminal.light .scan-hero p),
+.root :global(.scan-terminal.light .scan-topbar-title span),
+.root :global(.scan-terminal.light .scan-city-sub),
+.root :global(.scan-terminal.light .scan-opportunity-phase),
+.root :global(.scan-terminal.light .scan-opportunity-phase em),
+.root :global(.scan-terminal.light .panel-overline),
+.root :global(.scan-terminal.light .detail-summary-supporting),
+.root :global(.scan-terminal.light .detail-value-muted),
+.root :global(.scan-terminal.light .detail-empty-state),
+.root :global(.scan-terminal.light .scan-time-remaining),
+.root :global(.scan-terminal.light .scan-detail-city-sub),
+.root :global(.scan-terminal.light .scan-detail-volume-caption),
+.root :global(.scan-terminal.light .scan-empty-copy),
+.root :global(.scan-terminal.light .scan-loading-copy-block span),
+.root :global(.scan-terminal.light .scan-kv span:first-child),
+.root :global(.scan-terminal.light .scan-chart-label),
+.root :global(.scan-terminal.light .scan-trade-sub),
+.root :global(.scan-terminal.light .scan-trade-note) {
+  color: #475569;
+}
+
+.root :global(.scan-terminal.light .scan-loading-copy-block strong) {
+  color: #0f172a;
+}
+
+.root :global(.scan-terminal.light .scan-loading-signal) {
+  border-color: #dbeafe;
+  background:
+    radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.12), transparent 34%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.9));
+  box-shadow: 0 16px 34px rgba(40, 70, 110, 0.1);
+}
+
+.root :global(.scan-terminal.light .scan-loading-signal.compact) {
+  background:
+    radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.1), transparent 34%),
+    rgba(255, 255, 255, 0.78);
+}
+
+.root :global(.scan-terminal.light .scan-loading-node) {
+  background: #ffffff;
+  border-color: rgba(148, 163, 184, 0.22);
+}
+
+.root :global(.scan-terminal.light .scan-loading-node.hot) {
+  background: linear-gradient(135deg, #f97316, #fde047);
+}
+
+.root :global(.scan-terminal.light .scan-loading-node.market) {
+  background: linear-gradient(135deg, #38bdf8, #2563eb);
+}
+
+.root :global(.scan-terminal.light .scan-loading-node.action) {
+  background: linear-gradient(135deg, #16a34a, #22c55e);
+}
+
+.root :global(.scan-terminal.light .scan-list-tabs button),
+.root :global(.scan-terminal.light .scan-mode-tab-sub),
+.root :global(.scan-terminal.light .scan-opportunity-models em),
+.root :global(.scan-terminal.light .scan-opportunity-stat small),
+.root :global(.scan-terminal.light .panel-meta-chip),
+.root :global(.scan-terminal.light .panel-weather-chip),
+.root :global(.scan-terminal.light .scan-distribution-card),
+.root :global(.scan-terminal.light .scan-chart-legend),
+.root :global(.scan-terminal.light .scan-kpi-note) {
+  color: #94A3B8;
+}
+
+.root :global(.scan-terminal.light .scan-distribution-line em) {
+  color: #243b5a;
+}
+
+.root :global(.scan-terminal.light .scan-distribution-line b) {
+  color: #6f86a4;
+}
+
+.root :global(.scan-terminal.light .scan-mode-tab),
+.root :global(.scan-terminal.light .scan-table-shell),
+.root :global(.scan-terminal.light .scan-table-header),
+.root :global(.scan-terminal.light .scan-kpi-card),
+.root :global(.scan-terminal.light .scan-calendar-group),
+.root :global(.scan-terminal.light .scan-calendar-card),
+.root :global(.scan-terminal.light .scan-summary-card),
+.root :global(.scan-terminal.light .scan-settings-card),
+.root :global(.scan-terminal.light .scan-distribution-card),
+.root :global(.scan-terminal.light .scan-opportunity-group),
+.root :global(.scan-terminal.light .detail-summary-shell),
+.root :global(.scan-terminal.light .detail-structured-section),
+.root :global(.scan-terminal.light .detail-card),
+.root :global(.scan-terminal.light .scan-trade-card) {
+  border-color: #E2E8F0;
+  background: #FFFFFF;
+}
+
+.root :global(.scan-terminal.light .scan-mode-tab.active) {
+  color: #1D4ED8;
+  background: #DBEAFE;
+  border-color: rgba(59, 130, 246, 0.34);
+  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.16);
+}
+
+.root :global(.scan-terminal.light .scan-mode-tab.active .scan-mode-tab-label) {
+  color: #1D4ED8;
+}
+
+.root :global(.scan-terminal.light .scan-mode-tab.active .scan-mode-tab-sub) {
+  color: #475569;
+}
+
+.root :global(.scan-terminal.light .scan-calendar-subtitle),
+.root :global(.scan-terminal.light .scan-calendar-action span),
+.root :global(.scan-terminal.light .scan-calendar-countdown small) {
+  color: #647a98;
+}
+
+.root :global(.scan-terminal.light .scan-calendar-action b) {
+  color: #122033;
+}
+
+.root :global(.scan-terminal.light .scan-calendar-reason) {
+  color: #243b5a;
+}
+
+.root :global(.scan-terminal.light .scan-calendar-countdown) {
+  border-color: rgba(10, 160, 100, 0.18);
+  background: rgba(220, 252, 239, 0.68);
+  color: #087b55;
+}
+
+.root :global(.scan-terminal.light .scan-calendar-card.peak-active) {
+  border-color: rgba(10, 160, 100, 0.34);
+  background: linear-gradient(180deg, rgba(220, 252, 239, 0.84), rgba(255, 255, 255, 0.86));
+}
+
+.root :global(.scan-terminal.light .scan-mode-tab.active .scan-mode-icon) {
+  background: rgba(16, 185, 129, 0.16);
+  color: #069668;
+}
+
+.root :global(.scan-terminal.light .scan-table-row.selected) {
+  background: linear-gradient(180deg, rgba(228, 252, 242, 0.92), rgba(241, 250, 247, 0.96));
+  border-color: rgba(10, 160, 100, 0.34);
+  box-shadow: inset 0 0 0 1px rgba(10, 160, 100, 0.18);
+}
+
+.root :global(.scan-terminal.light .scan-table-row) {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 250, 254, 0.9));
+  border-bottom-color: rgba(35, 72, 118, 0.08);
+}
+
+.root :global(.scan-terminal.light .scan-table-row:hover) {
+  background: linear-gradient(180deg, rgba(248, 252, 255, 0.96), rgba(238, 247, 255, 0.96));
+}
+
+.root :global(.scan-terminal.light .scan-kpi-card) {
+  box-shadow: 0 10px 24px rgba(40, 70, 110, 0.08);
+}
+
+.root :global(.scan-terminal.light .scan-kpi-value),
+.root :global(.scan-terminal.light .scan-opportunity-phase > span) {
+  color: #14253a;
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-group-head) {
+  background: rgba(246, 250, 255, 0.78);
+  border-bottom-color: rgba(35, 72, 118, 0.1);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-item) {
+  background: rgba(255, 255, 255, 0.62);
+  color: #405977;
+  border-bottom-color: rgba(35, 72, 118, 0.08);
+  border-color: rgba(35, 72, 118, 0.1);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-item:hover) {
+  background: rgba(230, 242, 255, 0.76);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-item.selected) {
+  background: linear-gradient(180deg, rgba(222, 250, 238, 0.9), rgba(241, 250, 247, 0.96));
+  border-color: rgba(10, 160, 100, 0.34);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-group.selected) {
+  border-color: rgba(10, 160, 100, 0.34);
+  box-shadow: inset 0 0 0 1px rgba(10, 160, 100, 0.18);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-models span) {
+  border-color: rgba(35, 72, 118, 0.1);
+  background: rgba(255, 255, 255, 0.68);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-stat) {
+  border-color: rgba(35, 72, 118, 0.1);
+  background: rgba(248, 252, 255, 0.76);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-models b),
+.root :global(.scan-terminal.light .scan-opportunity-stat b) {
+  color: #14253a;
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-branch::before),
+.root :global(.scan-terminal.light .scan-opportunity-branch i) {
+  background: rgba(56, 86, 126, 0.24);
+}
+
+.root :global(.scan-terminal.light .panel-header),
+.root :global(.scan-terminal.light .panel-body section) {
+  border-color: rgba(35, 72, 118, 0.1);
+}
+
+.root :global(.scan-terminal.light .panel-action-button-secondary),
+.root :global(.scan-terminal.light .panel-action-button-ghost) {
+  border-color: rgba(35, 72, 118, 0.14);
+  background: rgba(255, 255, 255, 0.76);
+}
+
+.root :global(.scan-terminal.light .detail-summary-shell-live) {
+  background: linear-gradient(180deg, rgba(224, 247, 255, 0.82), rgba(241, 248, 255, 0.92));
+}
+
+.root :global(.scan-terminal.light .scan-locale-switch),
+.root :global(.scan-terminal.light .scan-ghost-button),
+.root :global(.scan-terminal.light .scan-theme-button),
+.root :global(.scan-terminal.light .scan-sort-pill),
+.root :global(.scan-terminal.light .scan-icon-pill),
+.root :global(.scan-terminal.light .scan-account-button),
+.root :global(.scan-terminal.light .scan-detail-action-button) {
+  border-color: rgba(35, 72, 118, 0.14);
+  background: rgba(255, 255, 255, 0.78);
+  color: #1f3654;
+}
+
+.root :global(.scan-terminal.light .scan-primary-button) {
+  color: #FFFFFF;
+  border-color: rgba(59, 130, 246, 0.34);
+  background: linear-gradient(180deg, #3B82F6, #2563EB);
+}
+
+.root :global(.scan-terminal.light .scan-ai-button) {
+  color: #1D4ED8;
+  border-color: rgba(59, 130, 246, 0.28);
+  background: #DBEAFE;
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-ai) {
+  border-color: rgba(35, 72, 118, 0.1);
+  background: rgba(248, 252, 255, 0.76);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-ai small) {
+  color: #647a98;
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-strength) {
+  border-color: rgba(35, 72, 118, 0.12);
+  background: rgba(248, 252, 255, 0.78);
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-expand) {
+  color: #1d4ed8;
+  border-color: rgba(37, 99, 235, 0.18);
+  background: rgba(239, 246, 255, 0.84);
+}
+
+.root :global(.scan-terminal.light .scan-v4-analysis),
+.root :global(.scan-terminal.light .scan-v4-analysis section),
+.root :global(.scan-terminal.light .scan-v4-evidence > div > span),
+.root :global(.scan-terminal.light .scan-v4-model-sources span) {
+  border-color: rgba(35, 72, 118, 0.12);
+  background: rgba(255, 255, 255, 0.76);
+}
+
+.root :global(.scan-terminal.light .scan-v4-analysis strong) {
+  color: #057a6b;
+}
+
+.root :global(.scan-terminal.light .scan-v4-analysis p),
+.root :global(.scan-terminal.light .scan-v4-analysis ul),
+.root :global(.scan-terminal.light .scan-v4-evidence > div > span) {
+  color: #6B7A90;
+}
+
+.root :global(.scan-terminal.light .scan-v4-model-sources em) {
+  color: #6B7A90;
+}
+
+.root :global(.scan-terminal.light .scan-v4-model-sources b) {
+  color: #0f172a;
+}
+
+.root :global(.scan-terminal.light .scan-forecast-city-card),
+.root :global(.scan-terminal.light .scan-forecast-row),
+.root :global(.scan-terminal.light .scan-ai-analysis) {
+  border-color: #E2E8F0;
+  background: #FFFFFF;
+}
+
+.root :global(.scan-terminal.light .scan-forecast-city-head) {
+  background: #EEF2F7;
+}
+
+.root :global(.scan-terminal.light .scan-forecast-city-card.selected),
+.root :global(.scan-terminal.light .scan-forecast-city-card:has(.scan-forecast-row.selected)) {
+  border-color: rgba(59, 130, 246, 0.38);
+  box-shadow:
+    inset 0 0 0 1px rgba(59, 130, 246, 0.12),
+    0 16px 34px rgba(40, 70, 110, 0.12);
+}
+
+.root :global(.scan-terminal.light .scan-forecast-row.selected),
+.root :global(.scan-terminal.light .scan-forecast-row.expanded) {
+  border-color: rgba(59, 130, 246, 0.38);
+  background:
+    linear-gradient(180deg, rgba(219, 234, 254, 0.62), rgba(255, 255, 255, 0.98)),
+    #FFFFFF;
+  box-shadow: inset 4px 0 0 #3B82F6;
+}
+
+.root :global(.scan-terminal.light .scan-forecast-city-title strong),
+.root :global(.scan-terminal.light .scan-forecast-city-read > b:not(.scan-phase-badge)),
+.root :global(.scan-terminal.light .scan-forecast-bucket strong),
+.root :global(.scan-terminal.light .scan-forecast-signals b),
+.root :global(.scan-terminal.light .scan-ai-temperature-line b) {
+  color: #0F172A;
+}
+
+.root :global(.scan-terminal.light .scan-forecast-city-chips span),
+.root :global(.scan-terminal.light .scan-forecast-signals span),
+.root :global(.scan-terminal.light .scan-ai-evidence-line span) {
+  border-color: #E2E8F0;
+  background: #EEF2F7;
+}
+
+.root :global(.scan-terminal.light .scan-forecast-city-chips span),
+.root :global(.scan-terminal.light .scan-forecast-city-read span),
+.root :global(.scan-terminal.light .scan-forecast-bucket small),
+.root :global(.scan-terminal.light .scan-forecast-ai-line small),
+.root :global(.scan-terminal.light .scan-ai-brief-grid li),
+.root :global(.scan-terminal.light .scan-ai-airport-read p) {
+  color: #475569;
+}
+
+.root :global(.scan-terminal.light .scan-ai-analysis-head p) {
+  color: #0F172A;
+}
+
+.root :global(.scan-terminal.light .scan-ai-analysis-head small),
+.root :global(.scan-terminal.light .scan-ai-evidence-line b) {
+  color: #475569;
+}
+
+.root :global(.scan-terminal.light .scan-ai-workspace) {
+  background: #f7f9fc;
+  border-color: #e2e8f0;
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-overview) {
+  background: #f7f9fc;
+  border-color: #e2e8f0;
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-hero > div:first-child),
+.root :global(.scan-terminal.light .scan-opportunity-summary span),
+.root :global(.scan-terminal.light .scan-opportunity-lane),
+.root :global(.scan-terminal.light .scan-opportunity-decision-card),
+.root :global(.scan-terminal.light .scan-opportunity-decision-primary span) {
+  background: #ffffff;
+  border-color: #e2e8f0;
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-hero strong),
+.root :global(.scan-terminal.light .scan-opportunity-summary b),
+.root :global(.scan-terminal.light .scan-opportunity-lane-head strong),
+.root :global(.scan-terminal.light .scan-opportunity-decision-head strong),
+.root :global(.scan-terminal.light .scan-opportunity-decision-primary b) {
+  color: #0f172a;
+}
+
+.root :global(.scan-terminal.light .scan-opportunity-hero p),
+.root :global(.scan-terminal.light .scan-opportunity-summary span),
+.root :global(.scan-terminal.light .scan-opportunity-lane-head p),
+.root :global(.scan-terminal.light .scan-opportunity-decision-card p),
+.root :global(.scan-terminal.light .scan-opportunity-decision-head span),
+.root :global(.scan-terminal.light .scan-opportunity-decision-primary span),
+.root :global(.scan-terminal.light .scan-opportunity-decision-foot small) {
+  color: #64748b;
+}
+
+.root :global(.scan-terminal.light .scan-ai-city-card),
+.root :global(.scan-terminal.light .scan-ai-city-hero) {
+  background: #ffffff;
+  border-color: #e2e8f0;
+}
+
+.root :global(.scan-terminal.light .scan-ai-city-section),
+.root :global(.scan-terminal.light .scan-ai-decision-band),
+.root :global(.scan-terminal.light .scan-ai-market-decision),
+.root :global(.scan-terminal.light .scan-ai-market-decision-stats small),
+.root :global(.scan-terminal.light .scan-ai-decision-metrics span),
+.root :global(.scan-terminal.light .scan-ai-market-bucket),
+.root :global(.scan-terminal.light .scan-ai-city-pills span),
+.root :global(.scan-terminal.light .scan-ai-city-freshness span),
+.root :global(.scan-terminal.light .scan-ai-city-metrics > span) {
+  background: #eef2f7;
+  border-color: #e2e8f0;
+}
+
+.root :global(.scan-terminal.light .scan-ai-city-metrics > span.primary) {
+  background: #dbeafe;
+  border-color: rgba(59, 130, 246, 0.28);
+}
+
+.root :global(.scan-terminal.light .scan-ai-city-metrics > span.primary b) {
+  color: #1d4ed8;
+}
+
+.root :global(.scan-terminal.light .scan-ai-city-metrics small) {
+  color: #64748b;
+}
+
+.root :global(.scan-terminal.light .scan-ai-workspace-head strong),
+.root :global(.scan-terminal.light .scan-ai-city-hero h3),
+.root :global(.scan-terminal.light .scan-ai-city-metrics b),
+.root :global(.scan-terminal.light .scan-ai-decision-band strong),
+.root :global(.scan-terminal.light .scan-ai-decision-metrics b),
+.root :global(.scan-terminal.light .scan-ai-market-bucket strong),
+.root :global(.scan-terminal.light .scan-ai-weather-summary),
+.root :global(.scan-terminal.light .scan-ai-decision-reasons small),
+.root :global(.scan-terminal.light .scan-ai-market-decision strong),
+.root :global(.scan-terminal.light .scan-ai-market-decision-stats b) {
+  color: #0f172a;
+}
+
+.root :global(.scan-terminal.light .scan-ai-workspace-head p),
+.root :global(.scan-terminal.light .scan-ai-city-section p),
+.root :global(.scan-terminal.light .scan-ai-decision-band p),
+.root :global(.scan-terminal.light .scan-ai-city-pills span),
+.root :global(.scan-terminal.light .scan-ai-city-freshness),
+.root :global(.scan-terminal.light .scan-ai-decision-metrics span),
+.root :global(.scan-terminal.light .scan-ai-market-bucket span),
+.root :global(.scan-terminal.light .scan-ai-market-decision span),
+.root :global(.scan-terminal.light .scan-ai-market-decision p),
+.root :global(.scan-terminal.light .scan-ai-market-decision-stats small),
+.root :global(.scan-terminal.light .scan-ai-city-muted),
+.root :global(.scan-terminal.light .scan-ai-city-loading),
+.root :global(.scan-terminal.light .scan-ai-city-chart-legend),
+.root :global(.scan-terminal.light .scan-ai-weather-bullets) {
+  color: #475569;
+}
+
+.root :global(.scan-terminal.light .scan-ai-raw-metar) {
+  border-top-color: #e2e8f0;
+  color: #64748b;
+}
+
+.root :global(.scan-terminal.light .scan-ai-city-chart-placeholder) {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+  color: #64748b;
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-panel) {
+  border-color: rgba(35, 72, 118, 0.12);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(246, 250, 255, 0.9));
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-panel.compact) {
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-panel.compact .scan-ai-log-summary span) {
+  color: #334155;
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-panel.compact .scan-ai-log-summary strong) {
+  color: #2563eb;
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-head strong),
+.root :global(.scan-terminal.light .scan-ai-log-item b) {
+  color: #122033;
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-head span),
+.root :global(.scan-terminal.light .scan-ai-log-time),
+.root :global(.scan-terminal.light .scan-ai-log-empty) {
+  color: #647a98;
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-item) {
+  border-color: rgba(35, 72, 118, 0.12);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-item small) {
+  color: #58708f;
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-item.info) {
+  border-color: rgba(14, 165, 233, 0.24);
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-item.success) {
+  border-color: rgba(10, 160, 100, 0.28);
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-item.warning) {
+  border-color: rgba(217, 119, 6, 0.28);
+}
+
+.root :global(.scan-terminal.light .scan-ai-log-item.error) {
+  border-color: rgba(220, 38, 38, 0.28);
+}
+
+.root :global(.scan-terminal.light .scan-ai-summary-card),
+.root :global(.scan-terminal.light .scan-ai-city-card) {
+  background: rgba(255, 255, 255, 0.92);
+  border-color: rgba(148, 163, 184, 0.28);
+}
+
+.root :global(.scan-terminal.light .scan-ai-summary-card strong),
+.root :global(.scan-terminal.light .scan-ai-city-head strong),
+.root :global(.scan-terminal.light .scan-ai-contract b) {
+  color: #0f172a;
+}
+
+.root :global(.scan-terminal.light .scan-ai-summary-card p),
+.root :global(.scan-terminal.light .scan-ai-city-head p),
+.root :global(.scan-terminal.light .scan-ai-contract p),
+.root :global(.scan-terminal.light .scan-ai-contract small) {
+  color: #6B7A90;
+}
+
+.root :global(.scan-terminal.light .scan-ai-city-head) {
+  background: #f8fafc;
+}
+
+.root :global(.scan-terminal.light .scan-ai-cluster-note) {
+  color: #334155;
+  background: #f8fafc;
+  border-color: rgba(148, 163, 184, 0.26);
+}
+
+.root :global(.scan-terminal.light .scan-ai-contract) {
+  border-top-color: rgba(148, 163, 184, 0.2);
+}
+
+.root :global(.scan-terminal.light .scan-ai-inline-button) {
+  color: #064e3b;
+  background: #d1fae5;
+  border-color: rgba(16, 185, 129, 0.28);
+}
+
+.root :global(.scan-terminal.light .scan-cta-ghost),
+.root :global(.scan-terminal.light .scan-detail-analysis-button) {
+  border-color: rgba(7, 160, 100, 0.24);
+  background: rgba(11, 188, 116, 0.12);
+  color: #057a4d;
+}
+
+.root :global(.scan-terminal.light .scan-score-ring::after) {
+  background: #f5f9fe;
+}
+
+.root :global(.scan-terminal.light .scan-score-ring span) {
+  color: #122033;
+}
+
+.root :global(.scan-terminal.light .scan-trade-card p) {
+  color: #405977;
+}
+
+.root :global(.scan-terminal.light .scan-map-shell) {
+  background:
+    radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.12), transparent 34%),
+    linear-gradient(180deg, #f8fbff, #eaf3ff);
+  border-color: rgba(37, 99, 235, 0.16);
+  box-shadow: 0 16px 34px rgba(40, 70, 110, 0.12);
+}
+
+.root :global(.scan-terminal.light .scan-map-shell .map),
+.root :global(.scan-terminal.light .scan-map-shell .leaflet-container) {
+  background: #eaf3ff !important;
+}
+
+.root :global(.scan-terminal.light .scan-map-shell .leaflet-tile) {
+  filter: saturate(1.06) contrast(0.98) brightness(1.04) !important;
+}
+
+.root :global(.scan-terminal.light .scan-map-caption) {
+  color: #475569;
+}
+
+.root :global(.scan-terminal.light .scan-list-tabs button),
+.root :global(.scan-terminal.light .scan-mode-tab-sub),
+.root :global(.scan-terminal.light .scan-opportunity-models em),
+.root :global(.scan-terminal.light .scan-opportunity-stat small),
+.root :global(.scan-terminal.light .panel-meta-chip),
+.root :global(.scan-terminal.light .panel-weather-chip),
+.root :global(.scan-terminal.light .scan-distribution-card),
+.root :global(.scan-terminal.light .scan-chart-legend),
+.root :global(.scan-terminal.light .scan-kpi-note),
+.root :global(.scan-terminal.light .scan-calendar-subtitle),
+.root :global(.scan-terminal.light .scan-calendar-action span),
+.root :global(.scan-terminal.light .scan-calendar-countdown small),
+.root :global(.scan-terminal.light .scan-opportunity-ai small),
+.root :global(.scan-terminal.light .scan-ai-log-head span),
+.root :global(.scan-terminal.light .scan-ai-log-time),
+.root :global(.scan-terminal.light .scan-ai-log-empty),
+.root :global(.scan-terminal.light .scan-ai-log-item small),
+.root :global(.scan-terminal.light .scan-ai-summary-card p),
+.root :global(.scan-terminal.light .scan-ai-city-head p),
+.root :global(.scan-terminal.light .scan-ai-contract p),
+.root :global(.scan-terminal.light .scan-ai-contract small),
+.root :global(.scan-terminal.light .scan-v4-analysis p),
+.root :global(.scan-terminal.light .scan-v4-analysis ul),
+.root :global(.scan-terminal.light .scan-v4-evidence > div > span),
+.root :global(.scan-terminal.light .scan-v4-model-sources em),
+.root :global(.scan-terminal.light .scan-ai-raw-metar),
+.root :global(.scan-terminal.light .scan-opportunity-hero p),
+.root :global(.scan-terminal.light .scan-opportunity-summary span),
+.root :global(.scan-terminal.light .scan-opportunity-lane-head p),
+.root :global(.scan-terminal.light .scan-opportunity-decision-card p),
+.root :global(.scan-terminal.light .scan-opportunity-decision-head span),
+.root :global(.scan-terminal.light .scan-opportunity-decision-primary span),
+.root :global(.scan-terminal.light .scan-opportunity-decision-foot small) {
+  color: #475569;
+}
+
+/* Light-mode hard overrides for the scan terminal. Keep this block last so the
+   decision workspace cannot inherit the dark map/card palette from base rules. */
+.root:global(.light) {
+  --bg-primary: #eef7ff;
+  --bg-secondary: #e0f2fe;
+  --bg-card: #ffffff;
+  --bg-glass: rgba(255, 255, 255, 0.92);
+  --border-glass: #cfe8ff;
+  --border-subtle: rgba(125, 171, 214, 0.34);
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #475569;
+}
+
+.root:global(.light) :global(.scan-terminal.light) {
+  background:
+    radial-gradient(circle at 18% 12%, rgba(59, 130, 246, 0.12), transparent 30%),
+    linear-gradient(180deg, #eef7ff 0%, #e8f4ff 48%, #f8fbff 100%) !important;
+  color: #0f172a !important;
+}
+
+:global(html.light) .root :global(.map),
+.root:global(.light) :global(.map),
+.root:global(.light) :global(.scan-terminal.light .scan-map-shell .map),
+.root:global(.light) :global(.scan-terminal.light .scan-map-shell .leaflet-container),
+.root:global(.light) :global(.leaflet-container),
+.root:global(.light) :global(.leaflet-pane),
+.root:global(.light) :global(.leaflet-map-pane),
+.root:global(.light) :global(.leaflet-tile-pane) {
+  background: #eef7ff !important;
+}
+
+:global(html.light) .root :global(.map),
+.root:global(.light) :global(.scan-terminal.light .scan-map-shell) {
+  border-color: rgba(37, 99, 235, 0.18) !important;
+  box-shadow:
+    0 18px 40px rgba(61, 100, 145, 0.14),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
+}
+
+:global(html.light) .root :global(.map .leaflet-tile),
+.root:global(.light) :global(.map .leaflet-tile),
+.root:global(.light) :global(.scan-terminal.light .scan-map-shell .leaflet-tile) {
+  filter: none !important;
+  opacity: 1 !important;
+}
+
+.root:global(.light) :global(.scan-city-detail-rail),
+.root:global(.light) :global(.scan-terminal.light > .detail-panel.scan-city-detail-rail) {
+  background:
+    linear-gradient(180deg, rgba(238, 247, 255, 0.98), rgba(255, 255, 255, 0.96)) !important;
+  border-color: rgba(37, 99, 235, 0.16) !important;
+  color: #0f172a !important;
+}
+
+.root:global(.light) :global(.scan-city-detail-rail .panel-header),
+.root:global(.light) :global(.scan-city-detail-rail .detail-structured-section),
+.root:global(.light) :global(.scan-city-detail-rail .detail-summary-shell),
+.root:global(.light) :global(.scan-city-detail-rail .detail-card) {
+  background: rgba(255, 255, 255, 0.74) !important;
+  border-color: rgba(125, 171, 214, 0.28) !important;
+}
+
+.root:global(.light) :global(.scan-city-detail-rail h2),
+.root:global(.light) :global(.scan-city-detail-rail h3),
+.root:global(.light) :global(.scan-city-detail-rail strong),
+.root:global(.light) :global(.scan-city-detail-rail .detail-value),
+.root:global(.light) :global(.scan-city-detail-rail .detail-summary-temp),
+.root:global(.light) :global(.scan-city-detail-rail .detail-section-head h3),
+.root:global(.light) :global(.scan-city-detail-rail .panel-title-area h2) {
+  color: #0f172a !important;
+}
+
+.root:global(.light) :global(.scan-city-detail-rail p),
+.root:global(.light) :global(.scan-city-detail-rail li),
+.root:global(.light) :global(.scan-city-detail-rail small),
+.root:global(.light) :global(.scan-city-detail-rail .panel-overline),
+.root:global(.light) :global(.scan-city-detail-rail .panel-loading-hint),
+.root:global(.light) :global(.scan-city-detail-rail .panel-meta-chip),
+.root:global(.light) :global(.scan-city-detail-rail .detail-section-kicker),
+.root:global(.light) :global(.scan-city-detail-rail .detail-label),
+.root:global(.light) :global(.scan-city-detail-rail .detail-value-muted),
+.root:global(.light) :global(.scan-city-detail-rail .detail-source-note),
+.root:global(.light) :global(.scan-city-detail-rail .detail-source-kind),
+.root:global(.light) :global(.scan-city-detail-rail .detail-mini-meta),
+.root:global(.light) :global(.scan-city-detail-rail .detail-summary-supporting),
+.root:global(.light) :global(.scan-city-detail-rail .scan-detail-city-sub),
+.root:global(.light) :global(.scan-city-detail-rail .scan-detail-volume-caption),
+.root:global(.light) :global(.scan-city-detail-rail .scan-detail-score-label),
+.root:global(.light) :global(.scan-city-detail-rail .scan-detail-empty) {
+  color: #334155 !important;
+}
+
+.root:global(.light) :global(.scan-city-detail-rail .panel-meta-chip),
+.root:global(.light) :global(.scan-city-detail-rail .panel-weather-chip),
+.root:global(.light) :global(.scan-city-detail-rail .detail-source-link),
+.root:global(.light) :global(.scan-city-detail-rail .panel-action-button-secondary),
+.root:global(.light) :global(.scan-city-detail-rail .panel-action-button-ghost) {
+  background: #eef7ff !important;
+  border-color: rgba(37, 99, 235, 0.18) !important;
+  color: #1f3654 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-card),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-section),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-decision-band),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-market-decision),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-decision-metrics span),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-pills span),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-freshness span),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics > span),
+.root:global(.light) :global(.scan-terminal.light .scan-mobile-decision-metrics span),
+.root:global(.light) :global(.scan-terminal.light .scan-mobile-decision-reason) {
+  background: #eef7ff !important;
+  border-color: rgba(37, 99, 235, 0.16) !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics > span.primary) {
+  background: #dbeafe !important;
+  border-color: rgba(59, 130, 246, 0.34) !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics b) {
+  color: #0f172a !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics > span.primary b) {
+  color: #1d4ed8 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-metrics small) {
+  color: #64748b !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-card p),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-card li),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-card small),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-card span:not(.scan-ai-city-kicker)) {
+  color: #334155 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-status-tag.green) {
+  color: #047857 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-status-tag.blue) {
+  color: #1d4ed8 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-status-tag.amber) {
+  color: #b45309 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-status-tag.red) {
+  color: #b91c1c !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-upgrade-announcement) {
+  background:
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 36%),
+    #ffffff !important;
+  border-color: rgba(37, 99, 235, 0.16) !important;
+  box-shadow: 0 16px 36px rgba(61, 100, 145, 0.12) !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-upgrade-announcement-copy strong),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-mobile-priority b),
+.root:global(.light) :global(.scan-terminal.light .scan-mobile-decision-metrics b),
+.root:global(.light) :global(.scan-terminal.light .scan-mobile-decision-reason),
+.root:global(.light) :global(.scan-terminal.light .scan-mobile-decision-head h3),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-market-mobile-line b) {
+  color: #0f172a !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-upgrade-announcement-copy p),
+.root:global(.light) :global(.scan-terminal.light .scan-upgrade-announcement li),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-mobile-priority small),
+.root:global(.light) :global(.scan-terminal.light .scan-mobile-decision-metrics small),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-market-mobile-line span) {
+  color: #334155 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-upgrade-announcement-copy span) {
+  color: #047857 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-upgrade-announcement li),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-mobile-priority span),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-decision-why),
+.root:global(.light) :global(.scan-terminal.light .scan-ai-market-mobile-line) {
+  background: #eef7ff !important;
+  border-color: rgba(37, 99, 235, 0.16) !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-decision-why) {
+  color: #1d4ed8 !important;
+}
+
+/* ── Section titles (Evidence, Model, etc.) ── */
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-section-title) {
+  color: #1d4ed8 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-decision-band span) {
+  color: #1d4ed8 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-decision-band p) {
+  color: #475569 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-decision-band strong) {
+  color: #0f172a !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-city-body) {
+  scrollbar-color: rgba(37, 99, 235, 0.18) transparent;
+}
+
+.root:global(.light) :global(.scan-ai-city-body::-webkit-scrollbar-thumb) {
+  background: rgba(37, 99, 235, 0.22) !important;
+}
+
+/* ── AI prediction dual-card light mode ── */
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-dual) {
+  gap: 10px;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card) {
+  background: #ffffff !important;
+  border-color: #e2e8f0 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card.ai) {
+  background: linear-gradient(180deg, rgba(219, 234, 254, 0.52), #ffffff) !important;
+  border-color: rgba(14, 165, 233, 0.28) !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card.deb) {
+  background: #ffffff !important;
+  border-color: #e2e8f0 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card small) {
+  color: #64748b !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card strong) {
+  color: #0f172a !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card.ai strong) {
+  color: #0369a1 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card em) {
+  color: #64748b !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card.ai.pending) {
+  background: rgba(219, 234, 254, 0.28) !important;
+  border-color: rgba(14, 165, 233, 0.16) !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-prediction-card.ai.pending strong) {
+  color: #94a3b8 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-confidence) {
+  background: rgba(59, 130, 246, 0.1) !important;
+  color: #2563eb !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-confidence.high) {
+  background: rgba(16, 185, 129, 0.12) !important;
+  color: #047857 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-confidence.medium) {
+  background: rgba(245, 158, 11, 0.12) !important;
+  color: #b45309 !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-confidence.low) {
+  background: rgba(148, 163, 184, 0.12) !important;
+  color: #64748b !important;
+}
+
+.root:global(.light) :global(.scan-terminal.light .scan-ai-confidence.neutral) {
+  background: rgba(148, 163, 184, 0.08) !important;
+  color: #64748b !important;
+}

frontend/components/dashboard/ScanTerminalList.module.css

@@ -0,0 +1,587 @@
+/* Scan terminal KPI, list tabs, table rows, v4 analysis, and AI workspace.
+   Kept separate from the shell/filter CSS so dense decision-board styles can evolve independently. */
+
+.root :global(.scan-kpi-bar) {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.root :global(.scan-kpi-card) {
+  min-height: 124px;
+  padding: 18px;
+  border-radius: 16px;
+  border: 1px solid rgba(92, 124, 170, 0.12);
+  background: linear-gradient(180deg, rgba(14, 28, 48, 0.92), rgba(11, 21, 37, 0.94));
+  transform: none;
+}
+
+.root :global(.scan-kpi-card:hover) {
+  transform: translateY(-2px);
+}
+
+.root :global(.scan-kpi-card::after) {
+  display: none;
+}
+
+.root :global(.scan-kpi-card.green .scan-kpi-label) {
+  color: #17d98b;
+}
+
+.root :global(.scan-kpi-card.cyan .scan-kpi-label) {
+  color: #37d6ff;
+}
+
+.root :global(.scan-kpi-card.purple .scan-kpi-label) {
+  color: #a35cff;
+}
+
+.root :global(.scan-kpi-card.blue .scan-kpi-label) {
+  color: #49a3ff;
+}
+
+.root :global(.scan-kpi-card.red .scan-kpi-label) {
+  color: #ff647c;
+}
+
+.root :global(.scan-kpi-card.amber .scan-kpi-label) {
+  color: #ffb84f;
+}
+
+.root :global(.scan-kpi-card.orange .scan-kpi-label) {
+  color: #F59E0B;
+}
+
+.root :global(.scan-kpi-label) {
+  font-size: 13px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.root :global(.scan-kpi-value) {
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.root :global(.scan-kpi-note) {
+  margin-top: 8px;
+  font-size: 14px;
+  color: #a8bedb;
+}
+
+.root :global(.scan-list-section) {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.root :global(.scan-list-header) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.root :global(.scan-list-tabs) {
+  display: flex;
+  gap: 24px;
+}
+
+.root :global(.scan-list-tabs button) {
+  border: none;
+  background: transparent;
+  font-size: 16px;
+  font-weight: 700;
+  color: #91a7c4;
+  cursor: pointer;
+}
+
+.root :global(.scan-list-tabs button:disabled) {
+  opacity: 0.42;
+  cursor: not-allowed;
+}
+
+.root :global(.scan-list-tabs button.active) {
+  color: #fff;
+}
+
+.root :global(.scan-list-status) {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.root :global(.scan-status-chip) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(98, 126, 167, 0.22);
+  background: rgba(10, 22, 38, 0.92);
+  color: #c4d4e9;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.root :global(.scan-status-chip.live) {
+  border-color: rgba(55, 214, 255, 0.28);
+  background: rgba(55, 214, 255, 0.1);
+  color: #71e6ff;
+}
+
+.root :global(.scan-status-chip.stale) {
+  border-color: rgba(255, 184, 79, 0.24);
+  background: rgba(255, 184, 79, 0.1);
+  color: #ffc765;
+}
+
+.root :global(.scan-status-chip.ai) {
+  border-color: rgba(94, 234, 212, 0.28);
+  background: rgba(20, 184, 166, 0.12);
+  color: #87fff1;
+}
+
+.root :global(.scan-status-chip.focus) {
+  border-color: rgba(255, 176, 32, 0.3);
+  background: rgba(255, 176, 32, 0.12);
+  color: #ffd078;
+}
+
+.root :global(button.scan-status-chip.refresh) {
+  cursor: pointer;
+}
+
+.root :global(button.scan-status-chip.refresh:disabled) {
+  cursor: wait;
+  opacity: 0.68;
+}
+
+.root :global(.scan-status-chip .spin) {
+  animation: spin 1s linear infinite;
+}
+
+.root :global(.scan-table-shell) {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  border: 1px solid rgba(90, 123, 166, 0.12);
+  border-radius: 18px;
+  background: rgba(8, 17, 30, 0.8);
+  overflow: hidden;
+}
+
+.root :global(.scan-table-shell.empty) {
+  min-height: 340px;
+}
+
+.root :global(.scan-table-banner) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(95, 124, 168, 0.12);
+  background: linear-gradient(180deg, rgba(255, 184, 79, 0.08), rgba(255, 184, 79, 0.03));
+}
+
+.root :global(.scan-table-banner strong) {
+  font-size: 13px;
+  font-weight: 800;
+  color: #ffd27f;
+}
+
+.root :global(.scan-table-banner span) {
+  font-size: 13px;
+  color: #c7d4e7;
+}
+
+.root :global(.scan-table-header) {
+  display: grid;
+  grid-template-columns: minmax(220px, 1.1fr) minmax(128px, 0.68fr) minmax(230px, 1.08fr) minmax(150px, 0.78fr) 92px;
+  gap: 10px;
+  align-items: center;
+  padding: 14px 18px;
+  background: rgba(11, 23, 40, 0.98);
+  border-bottom: 1px solid rgba(90, 123, 166, 0.12);
+  color: #92a8c5;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.root :global(.scan-table-body) {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.root :global(.scan-v4-analysis) {
+  grid-column: auto;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0 14px 14px;
+  padding: 14px;
+  border-color: rgba(56, 189, 248, 0.18);
+  border-radius: 14px;
+  background:
+    linear-gradient(180deg, rgba(7, 20, 36, 0.96), rgba(5, 15, 28, 0.98)),
+    radial-gradient(circle at 4% 0%, rgba(45, 212, 191, 0.11), transparent 28%);
+}
+
+.root :global(.scan-v4-analysis section) {
+  padding: 13px;
+  border-color: rgba(92, 132, 188, 0.14);
+  background: rgba(10, 25, 43, 0.7);
+}
+
+.root :global(.scan-v4-analysis p),
+.root :global(.scan-v4-analysis ul) {
+  color: #b8c9e3;
+}
+
+.root :global(.scan-v4-analysis .scan-v4-evidence) {
+  grid-column: 1 / -1;
+}
+
+.root :global(.scan-v4-analysis .scan-v4-decision) {
+  grid-column: 1 / -1;
+  border-color: rgba(45, 212, 191, 0.24);
+  background:
+    linear-gradient(180deg, rgba(6, 31, 43, 0.86), rgba(8, 23, 38, 0.86)),
+    radial-gradient(circle at 0 0, rgba(20, 184, 166, 0.12), transparent 32%);
+}
+
+.root :global(.scan-v4-analysis .scan-v4-decision.downgrade),
+.root :global(.scan-v4-analysis .scan-v4-decision.watchlist) {
+  border-color: rgba(245, 158, 11, 0.24);
+}
+
+.root :global(.scan-v4-analysis .scan-v4-decision.veto) {
+  border-color: rgba(248, 113, 113, 0.28);
+}
+
+.root :global(.scan-v4-decision p b) {
+  color: #ecfeff;
+  font-weight: 950;
+}
+
+.root :global(.scan-v4-metar-summary) {
+  margin-top: 9px;
+  color: #8fb3d8;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.45;
+}
+
+.root :global(.scan-v4-evidence > div),
+.root :global(.scan-v4-model-sources) {
+  gap: 8px;
+}
+
+.root :global(.scan-v4-analysis) {
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+  margin: 0 14px 14px;
+  padding: 15px 16px 16px;
+  border: 1px solid rgba(56, 189, 248, 0.16);
+  border-radius: 12px;
+  background:
+    linear-gradient(180deg, rgba(7, 20, 36, 0.96), rgba(5, 15, 28, 0.98)),
+    radial-gradient(circle at 4% 0%, rgba(45, 212, 191, 0.08), transparent 30%);
+}
+
+.root :global(.scan-v4-analysis section),
+.root :global(.scan-v4-analysis section:first-child),
+.root :global(.scan-v4-analysis .scan-v4-evidence) {
+  grid-column: auto;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.root :global(.scan-v4-heading) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(90, 123, 166, 0.14);
+}
+
+.root :global(.scan-v4-heading > div) {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+
+.root :global(.scan-v4-heading strong),
+.root :global(.scan-v4-current b),
+.root :global(.scan-v4-brief-grid strong) {
+  color: #6FB7FF;
+  font-size: 12px;
+  font-weight: 950;
+  letter-spacing: 0.02em;
+}
+
+.root :global(.scan-v4-heading p) {
+  margin: 0;
+  color: #d2e1f4;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1.55;
+}
+
+.root :global(.scan-v4-decision-pill) {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  padding: 0 12px;
+  border: 1px solid rgba(45, 212, 191, 0.3);
+  border-radius: 999px;
+  background: rgba(20, 184, 166, 0.12);
+  color: #7dfbe7;
+  font-size: 12px;
+  font-weight: 950;
+  white-space: nowrap;
+}
+
+.root :global(.scan-v4-decision-pill.downgrade),
+.root :global(.scan-v4-decision-pill.watchlist) {
+  border-color: rgba(245, 158, 11, 0.34);
+  background: rgba(245, 158, 11, 0.12);
+  color: #ffd166;
+}
+
+.root :global(.scan-v4-decision-pill.veto) {
+  border-color: rgba(248, 113, 113, 0.34);
+  background: rgba(248, 113, 113, 0.12);
+  color: #ff8585;
+}
+
+.root :global(.scan-v4-current) {
+  display: grid;
+  gap: 6px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(90, 123, 166, 0.12);
+}
+
+.root :global(.scan-v4-current span) {
+  color: #c8d8ec;
+  font-size: 13px;
+  font-weight: 850;
+  line-height: 1.5;
+}
+
+.root :global(.scan-v4-current small) {
+  color: #8fb3d8;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.45;
+}
+
+.root :global(.scan-v4-brief-grid) {
+  display: grid;
+  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
+  gap: 26px;
+}
+
+.root :global(.scan-v4-brief-grid section:first-child) {
+  grid-column: auto;
+}
+
+.root :global(.scan-v4-brief-grid ul) {
+  display: grid;
+  gap: 8px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.root :global(.scan-v4-brief-grid li) {
+  position: relative;
+  padding-left: 16px;
+  color: #aebfd8;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.48;
+}
+
+.root :global(.scan-v4-brief-grid li::before) {
+  content: "";
+  position: absolute;
+  top: 0.65em;
+  left: 0;
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  background: #4DA3FF;
+  box-shadow: 0 0 10px rgba(45, 212, 191, 0.45);
+}
+
+.root :global(.scan-v4-brief-grid section:nth-child(2) li::before) {
+  background: #f59e0b;
+  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
+}
+
+.root :global(details.scan-v4-evidence) {
+  padding-top: 11px;
+  border-top: 1px solid rgba(90, 123, 166, 0.12);
+}
+
+.root :global(details.scan-v4-evidence summary) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 30px;
+  padding: 0 11px;
+  border: 1px solid rgba(65, 118, 216, 0.28);
+  border-radius: 8px;
+  background: rgba(10, 30, 58, 0.52);
+  color: #8fbdff;
+  font-size: 12px;
+  font-weight: 950;
+  cursor: pointer;
+  list-style: none;
+}
+
+.root :global(details.scan-v4-evidence summary::-webkit-details-marker) {
+  display: none;
+}
+
+.root :global(details.scan-v4-evidence summary::after) {
+  content: "v";
+  color: #8fbdff;
+  font-size: 12px;
+}
+
+.root :global(details.scan-v4-evidence[open] summary::after) {
+  content: "^";
+}
+
+.root :global(details.scan-v4-evidence > div) {
+  margin-top: 10px;
+}
+
+.root :global(.scan-forecast-desk) {
+  gap: 16px;
+  padding: 16px 18px 20px;
+}
+
+
+.root :global(.scan-ai-workspace) {
+  flex: 1;
+  min-height: 0;
+  max-height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-top: 64px;
+  border: 1px solid rgba(77, 163, 255, 0.16);
+  border-radius: 18px;
+  background: #0b1220;
+  padding: 14px;
+}
+
+.root :global(.scan-ai-workspace::-webkit-scrollbar) {
+  width: 8px;
+}
+
+.root :global(.scan-ai-workspace::-webkit-scrollbar-thumb) {
+  border-radius: 999px;
+  background: rgba(77, 163, 255, 0.28);
+}
+
+.root :global(.scan-ai-workspace.empty) {
+  display: grid;
+  place-items: center;
+}
+
+.root :global(.scan-ai-workspace-head) {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: flex-end;
+  margin-bottom: 10px;
+  padding: 0 2px;
+}
+
+.root :global(.scan-ai-workspace-head span) {
+  display: block;
+  color: #4da3ff;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.root :global(.scan-ai-workspace-head strong) {
+  display: block;
+  color: #e6edf3;
+  font-size: 20px;
+  line-height: 1.2;
+  margin-top: 4px;
+}
+
+.root :global(.scan-ai-workspace-head p) {
+  max-width: 560px;
+  margin: 0;
+  color: #9fb2c7;
+  font-size: 13px;
+  line-height: 1.55;
+  text-align: right;
+}
+
+.root :global(.scan-ai-city-jumpbar) {
+  display: flex;
+  gap: 8px;
+  margin: 0 0 12px;
+  padding: 8px;
+  overflow-x: auto;
+  border: 1px solid rgba(77, 163, 255, 0.14);
+  border-radius: 14px;
+  background: rgba(11, 18, 32, 0.92);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+  scrollbar-width: none;
+}
+
+.root :global(.scan-ai-city-jumpbar::-webkit-scrollbar) {
+  display: none;
+}
+
+.root :global(.scan-ai-city-jumpbar button) {
+  flex: 0 0 auto;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid rgba(77, 163, 255, 0.26);
+  border-radius: 999px;
+  background: rgba(77, 163, 255, 0.1);
+  color: #cfe5ff;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.root :global(.scan-ai-city-jumpbar button:hover) {
+  border-color: rgba(111, 183, 255, 0.62);
+  background: rgba(77, 163, 255, 0.18);
+}
+
+
+.root :global(.scan-ai-city-card:not(.collapsed)) {
+  overflow: visible;
+}
+

frontend/components/dashboard/ScanTerminalMobile.module.css

@@ -0,0 +1,549 @@
+/* Scan terminal mobile action-card layout and responsive overrides. */
+
+.root :global(.scan-mobile-decision-card) {
+  display: grid;
+  gap: 12px;
+  padding-bottom: 14px;
+}
+
+.root :global(.scan-mobile-decision-head) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 16px 0;
+}
+
+.root :global(.scan-mobile-decision-head h3) {
+  margin: 6px 0 0;
+  color: #e6edf3;
+  font-size: 24px;
+  line-height: 1.08;
+}
+
+.root :global(.scan-mobile-decision-metrics) {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  padding: 0 14px;
+}
+
+.root :global(.scan-mobile-decision-metrics span) {
+  display: grid;
+  gap: 4px;
+  border: 1px solid rgba(77, 163, 255, 0.18);
+  border-radius: 12px;
+  background: rgba(77, 163, 255, 0.09);
+  padding: 9px;
+}
+
+.root :global(.scan-mobile-decision-metrics small) {
+  color: #9fb2c7;
+  font-size: 10px;
+  font-weight: 900;
+}
+
+.root :global(.scan-mobile-decision-metrics b) {
+  color: #f3f8ff;
+  font-size: 13px;
+  line-height: 1.15;
+}
+
+.root :global(.scan-mobile-decision-reason) {
+  margin: 0 14px;
+  border: 1px solid rgba(77, 163, 255, 0.24);
+  border-radius: 13px;
+  background: rgba(77, 163, 255, 0.1);
+  color: #d8e7f8;
+  font-size: 14px;
+  font-weight: 900;
+  line-height: 1.45;
+  padding: 11px 12px;
+}
+
+.root :global(.scan-mobile-decision-card .scan-ai-city-status-tags),
+.root :global(.scan-mobile-decision-card .scan-ai-city-freshness),
+.root :global(.scan-mobile-decision-card .scan-ai-market-mobile-line),
+.root :global(.scan-mobile-decision-folds) {
+  margin-right: 14px;
+  margin-left: 14px;
+}
+
+.root :global(.scan-mobile-decision-card .scan-ai-city-freshness) {
+  grid-template-columns: 1fr;
+  max-width: none;
+  margin-top: 0;
+}
+
+.root :global(.scan-mobile-decision-card .scan-ai-market-mobile-line) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 0;
+}
+
+.root :global(.scan-mobile-decision-card .scan-ai-market-decision) {
+  display: none;
+}
+
+.root :global(.scan-mobile-decision-folds) {
+  display: grid;
+  gap: 10px;
+}
+
+.root :global(.scan-mobile-fold) {
+  padding: 13px 14px;
+}
+
+.root :global(.scan-mobile-fold summary) {
+  cursor: pointer;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+.root :global(.scan-mobile-fold summary::-webkit-details-marker) {
+  display: none;
+}
+
+.root :global(.scan-mobile-fold[open] summary) {
+  margin-bottom: 10px;
+}
+
+.root :global(.scan-mobile-fold .scan-ai-city-section.models) {
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.root :global(.scan-ai-city-collapse svg) {
+  transition: transform 0.18s ease;
+}
+
+
+@media (max-width: 1480px) {
+  .root :global(.scan-terminal) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .root :global(.scan-terminal > .detail-panel.scan-city-detail-rail) {
+    position: relative;
+    top: auto;
+    grid-column: 1 / -1;
+    height: auto;
+    max-height: none;
+    min-height: auto;
+  }
+
+  .root :global(.scan-detail-panel) {
+    grid-column: 1 / -1;
+    min-height: auto;
+  }
+}
+
+@media (max-width: 1100px) {
+  .root :global(.scan-terminal) {
+    grid-template-columns: 1fr;
+    min-height: 100dvh;
+    overflow-x: hidden;
+  }
+
+  .root :global(.scan-filter-panel),
+  .root :global(.scan-data-grid),
+  .root :global(.scan-detail-panel),
+  .root :global(.scan-terminal > .detail-panel.scan-city-detail-rail) {
+    min-height: auto;
+  }
+
+  .root :global(.scan-data-grid) {
+    max-height: none;
+    overflow: visible;
+  }
+
+  .root :global(.scan-list-section),
+  .root :global(.scan-table-shell),
+  .root :global(.scan-ai-workspace) {
+    overflow: visible;
+  }
+
+  .root :global(.scan-ai-workspace) {
+    max-height: none;
+  }
+
+  .root :global(.scan-terminal > .detail-panel.scan-city-detail-rail) {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .root :global(.scan-kpi-bar) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .root :global(.scan-topbar) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .root :global(.scan-upgrade-announcement) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-upgrade-announcement ul) {
+    justify-content: flex-start;
+  }
+
+  .root :global(.scan-table-header),
+  .root :global(.scan-table-row) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-table-header) {
+    display: none;
+  }
+
+  .root :global(.scan-opportunity-group-head),
+  .root :global(.scan-opportunity-item) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-forecast-city-head),
+  .root :global(.scan-forecast-row-main),
+  .root :global(.scan-ai-brief-grid),
+  .root :global(.scan-ai-city-analysis-grid),
+  .root :global(.scan-ai-decision-band),
+  .root :global(.scan-ai-evidence-line) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-ai-workspace-head),
+  .root :global(.scan-opportunity-hero),
+  .root :global(.scan-ai-city-hero),
+  .root :global(.scan-ai-city-section-head) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .root :global(.scan-opportunity-hero) {
+    display: flex;
+  }
+
+  .root :global(.scan-ai-workspace-head p),
+  .root :global(.scan-ai-city-hero-side) {
+    text-align: left;
+    justify-items: start;
+  }
+
+  .root :global(.scan-ai-decision-metrics) {
+    min-width: 0;
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-ai-market-decision) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-opportunity-card-grid),
+  .root :global(.scan-opportunity-summary) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-forecast-city-read) {
+    justify-items: start;
+    text-align: left;
+  }
+
+  .root :global(.scan-forecast-signals),
+  .root :global(.scan-ai-temperature-line) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-opportunity-phase) {
+    flex-wrap: wrap;
+  }
+
+  .root :global(.scan-opportunity-branch) {
+    display: none;
+  }
+
+  .root :global(.scan-opportunity-stat.edge) {
+    justify-self: start;
+    justify-items: start;
+  }
+
+  .root :global(.scan-opportunity-ai),
+  .root :global(.scan-v4-analysis) {
+    grid-column: 1 / -1;
+  }
+
+  .root :global(.scan-v4-analysis) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-trade-cards) {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 820px) {
+  .root :global(.scan-terminal) {
+    padding: 10px;
+  }
+
+  .root :global(.scan-data-grid) {
+    padding: 12px;
+    gap: 14px;
+    border-radius: 18px;
+  }
+
+  .root :global(.scan-topbar-actions) {
+    width: 100%;
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
+  .root :global(.scan-topbar-title strong) {
+    font-size: 23px;
+  }
+
+  .root :global(.scan-topbar-title span) {
+    font-size: 13px;
+  }
+
+  .root :global(.scan-kpi-bar) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-topbar-tabs) {
+    gap: 14px;
+    flex-wrap: wrap;
+  }
+
+  .root :global(.scan-upgrade-announcement) {
+    padding: 14px;
+  }
+
+  .root :global(.scan-upgrade-announcement-copy strong) {
+    font-size: 16px;
+  }
+
+  .root :global(.scan-upgrade-announcement ul) {
+    gap: 6px;
+  }
+
+  .root :global(.scan-upgrade-announcement li) {
+    font-size: 11px;
+    padding: 6px 8px;
+  }
+
+  .root :global(.scan-ai-city-hero) {
+    padding: 16px;
+  }
+
+  .root :global(.scan-ai-city-hero h3) {
+    margin-bottom: 10px;
+    font-size: 24px;
+  }
+
+  .root :global(.scan-ai-city-mobile-priority) {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+    margin: 0 0 12px;
+  }
+
+  .root :global(.scan-ai-city-mobile-priority span) {
+    display: grid;
+    gap: 4px;
+    border: 1px solid rgba(77, 163, 255, 0.18);
+    border-radius: 12px;
+    background: rgba(77, 163, 255, 0.09);
+    padding: 9px;
+  }
+
+  .root :global(.scan-ai-city-mobile-priority small) {
+    color: #9fb2c7;
+    font-size: 10px;
+    font-weight: 900;
+  }
+
+  .root :global(.scan-ai-city-mobile-priority b) {
+    color: #f3f8ff;
+    font-size: 13px;
+    line-height: 1.15;
+  }
+
+  .root :global(.scan-ai-city-pills) {
+    display: none;
+  }
+
+  .root :global(.scan-ai-city-freshness) {
+    grid-template-columns: 1fr;
+  }
+
+  .root :global(.scan-ai-decision-band) {
+    padding: 14px;
+  }
+
+  .root :global(.scan-ai-decision-band strong) {
+    font-size: 20px;
+  }
+
+  .root :global(.scan-ai-decision-long),
+  .root :global(.scan-ai-decision-reasons),
+  .root :global(.scan-ai-decision-risk) {
+    display: none;
+  }
+
+  .root :global(.scan-ai-market-mobile-line) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 12px;
+    border: 1px solid rgba(77, 163, 255, 0.18);
+    border-radius: 12px;
+    background: rgba(11, 18, 32, 0.48);
+    padding: 10px 12px;
+  }
+
+  .root :global(.scan-ai-market-mobile-line span) {
+    color: #9fb2c7;
+    font-size: 12px;
+    font-weight: 900;
+  }
+
+  .root :global(.scan-ai-market-mobile-line b) {
+    color: #e6edf3;
+    font-size: 13px;
+    text-align: right;
+  }
+
+  .root :global(.scan-ai-market-decision) {
+    margin-top: 10px;
+  }
+
+  .root :global(.scan-ai-city-ai-read:not([open])) {
+    padding-bottom: 4px;
+  }
+
+  .root :global(.scan-list-header) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .root :global(.scan-list-tabs) {
+    width: 100%;
+    gap: 8px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+    scrollbar-width: none;
+  }
+
+  .root :global(.scan-list-tabs::-webkit-scrollbar) {
+    display: none;
+  }
+
+  .root :global(.scan-list-tabs button) {
+    flex: 0 0 auto;
+    min-height: 36px;
+    border: 1px solid rgba(99, 132, 180, 0.18);
+    border-radius: 999px;
+    background: rgba(8, 19, 34, 0.76);
+    padding: 0 12px;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .root :global(.scan-list-tabs button.active) {
+    border-color: rgba(77, 163, 255, 0.38);
+    background: rgba(77, 163, 255, 0.16);
+  }
+
+  .root :global(.scan-list-status) {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .root :global(.scan-opportunity-groups) {
+    padding: 12px;
+  }
+
+  .root :global(.scan-opportunity-models span) {
+    white-space: normal;
+  }
+
+  .root :global(.scan-forecast-city-title strong) {
+    font-size: 21px;
+  }
+
+  .root :global(.scan-forecast-row-main),
+  .root :global(.scan-ai-analysis) {
+    padding: 13px;
+  }
+
+  .root :global(.scan-forecast-ai-line) {
+    grid-template-columns: 1fr;
+    padding: 0 13px 13px;
+  }
+}
+
+@media (max-width: 520px) {
+  .root :global(.scan-terminal) {
+    box-sizing: border-box;
+    max-width: 100vw;
+    overflow-x: clip;
+    padding: 6px;
+  }
+
+  .root :global(.scan-data-grid) {
+    box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+    max-width: 100%;
+    padding: 10px;
+    border-radius: 16px;
+  }
+
+  .root :global(.scan-topbar-tabs) {
+    max-width: 100%;
+    gap: 8px;
+  }
+
+  .root :global(.scan-upgrade-announcement) {
+    margin: -2px 0 2px;
+    padding: 12px;
+    border-radius: 16px;
+  }
+
+  .root :global(.scan-upgrade-announcement-copy p) {
+    display: none;
+  }
+
+  .root :global(.scan-upgrade-announcement ul) {
+    display: none;
+  }
+
+  .root :global(.scan-status-chip) {
+    height: 32px;
+    padding: 0 10px;
+    font-size: 11px;
+  }
+
+  .root :global(.scan-primary-button) {
+    min-height: 38px;
+    padding: 9px 12px;
+    font-size: 13px;
+  }
+
+  .root :global(.scan-account-button) {
+    width: 38px;
+    height: 38px;
+  }
+
+  .root :global(.scan-theme-button) {
+    width: 38px;
+    height: 38px;
+  }
+}

frontend/components/dashboard/ScanTerminalShell.module.css

@@ -0,0 +1,249 @@
+/* Scan terminal shell, topbar, upgrade announcement, and shared action buttons.
+   Extracted from ScanTerminal.module.css to keep terminal layout CSS maintainable. */
+
+.root :global(.scan-topbar) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0 18px;
+  border-bottom: 1px solid rgba(118, 146, 188, 0.1);
+}
+
+.root :global(.scan-topbar-title) {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.root :global(.scan-topbar-title strong) {
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.08;
+  letter-spacing: -0.04em;
+  color: #f3f8ff;
+}
+
+.root :global(.scan-topbar-title span) {
+  color: #8fa4c3;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.root :global(.scan-topbar-actions) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+  color: #b4c8e2;
+  font-size: 14px;
+}
+
+.root :global(.scan-locale-switch) {
+  height: 36px;
+  padding: 3px;
+  border-radius: 12px;
+  border: 1px solid rgba(99, 132, 180, 0.18);
+  background: rgba(8, 19, 34, 0.9);
+  color: #a8bdd8;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.root :global(.scan-locale-switch span) {
+  min-width: 34px;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.root :global(.scan-locale-switch span.active) {
+  color: #eef7ff;
+  background: rgba(63, 140, 255, 0.16);
+  box-shadow: inset 0 0 0 1px rgba(63, 140, 255, 0.22);
+}
+
+.root :global(.scan-topbar-time) {
+  color: #b4c8e2;
+  font-variant-numeric: tabular-nums;
+}
+
+.root :global(.scan-upgrade-announcement) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 16px;
+  align-items: center;
+  margin: -4px 0 6px;
+  border: 1px solid rgba(77, 163, 255, 0.2);
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at top left, rgba(77, 163, 255, 0.18), transparent 36%),
+    linear-gradient(135deg, rgba(18, 33, 58, 0.96), rgba(15, 23, 42, 0.92));
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
+  padding: 16px 18px;
+}
+
+.root :global(.scan-upgrade-announcement-copy) {
+  min-width: 0;
+}
+
+.root :global(.scan-upgrade-announcement-copy span) {
+  color: #86efac;
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.root :global(.scan-upgrade-announcement-copy strong) {
+  display: block;
+  margin-top: 5px;
+  color: #f3f8ff;
+  font-size: 18px;
+  line-height: 1.25;
+}
+
+.root :global(.scan-upgrade-announcement-copy p) {
+  margin: 6px 0 0;
+  color: #b4c8e2;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.root :global(.scan-upgrade-announcement ul) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.root :global(.scan-upgrade-announcement li) {
+  border: 1px solid rgba(77, 163, 255, 0.22);
+  border-radius: 999px;
+  background: rgba(77, 163, 255, 0.1);
+  color: #d7e5f7;
+  font-size: 12px;
+  font-weight: 850;
+  padding: 7px 10px;
+}
+
+.root :global(.scan-ghost-button),
+.root :global(.scan-cta-ghost),
+.root :global(.scan-theme-button),
+.root :global(.scan-detail-action-button),
+.root :global(.scan-detail-icon-button),
+.root :global(.scan-view-all-button) {
+  border: 1px solid rgba(99, 132, 180, 0.18);
+  background: rgba(8, 19, 34, 0.9);
+  color: #d7e5f7;
+  border-radius: 12px;
+}
+
+.root :global(.scan-ghost-button),
+.root :global(.scan-cta-ghost) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 14px;
+  font-weight: 700;
+}
+
+.root :global(.scan-primary-button) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 11px 16px;
+  border: 1px solid rgba(77, 163, 255, 0.42);
+  border-radius: 12px;
+  background: linear-gradient(180deg, #4DA3FF, #3B82F6);
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: 900;
+  text-decoration: none;
+  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
+  cursor: pointer;
+}
+
+.root :global(.scan-primary-button:hover:not(:disabled)) {
+  filter: brightness(1.06);
+}
+
+.root :global(.scan-primary-button:disabled) {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.root :global(.scan-ai-button) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 11px 14px;
+  border: 1px solid rgba(77, 163, 255, 0.3);
+  border-radius: 12px;
+  background: linear-gradient(180deg, rgba(77, 163, 255, 0.18), rgba(59, 130, 246, 0.12));
+  color: #CFE6FF;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.root :global(.scan-ai-button:hover:not(:disabled)) {
+  border-color: rgba(111, 183, 255, 0.5);
+  background: linear-gradient(180deg, rgba(77, 163, 255, 0.26), rgba(59, 130, 246, 0.18));
+}
+
+.root :global(.scan-ai-button:disabled) {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.root :global(.scan-cta-ghost) {
+  color: #6FB7FF;
+  border-color: rgba(23, 217, 139, 0.3);
+  background: rgba(23, 217, 139, 0.12);
+}
+
+.root :global(.scan-account-button) {
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #d7e5f7;
+  text-decoration: none;
+  border: 1px solid rgba(99, 132, 180, 0.18);
+  background: rgba(8, 19, 34, 0.9);
+  border-radius: 12px;
+}
+
+.root :global(.scan-account-button:hover) {
+  border-color: rgba(63, 140, 255, 0.28);
+  background: rgba(12, 26, 44, 0.96);
+}
+
+.root :global(.scan-theme-button) {
+  width: 36px;
+  height: 36px;
+  display: inline-grid;
+  place-items: center;
+  color: #d7e5f7;
+  cursor: pointer;
+}
+
+.root :global(.scan-ghost-button .spin) {
+  animation: spin 1s linear infinite;
+}

frontend/components/dashboard/ScanTerminalState.module.css

@@ -0,0 +1,242 @@
+/* Scan terminal empty, loading, and skeleton signal states. */
+
+.root :global(.scan-empty-state) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px 32px;
+  text-align: center;
+}
+
+.root :global(.scan-empty-title) {
+  font-size: 20px;
+  font-weight: 800;
+  color: #e8f2ff;
+}
+
+.root :global(.scan-empty-copy) {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #8fa4c3;
+  line-height: 1.6;
+}
+
+.root :global(.scan-loading-state) {
+  flex: 1;
+  min-height: 520px;
+  display: grid;
+  place-items: center;
+  padding: 48px 32px;
+  text-align: center;
+}
+
+.root :global(.scan-loading-signal) {
+  position: relative;
+  width: min(100%, 420px);
+  display: grid;
+  justify-items: center;
+  gap: 18px;
+  padding: 28px 30px;
+  border: 1px solid rgba(125, 211, 252, 0.14);
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at 18% 18%, rgba(77, 163, 255, 0.18), transparent 34%),
+    linear-gradient(145deg, rgba(12, 20, 36, 0.92), rgba(5, 11, 22, 0.74));
+  box-shadow:
+    0 22px 70px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  overflow: hidden;
+}
+
+.root :global(.scan-loading-signal::before) {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    100deg,
+    transparent 0%,
+    rgba(125, 211, 252, 0.08) 42%,
+    rgba(34, 197, 94, 0.1) 50%,
+    transparent 58%
+  );
+  transform: translateX(-120%);
+  animation: scan-loading-sweep 2.6s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.root :global(.scan-loading-signal.compact) {
+  width: min(100%, 340px);
+  gap: 12px;
+  padding: 18px 20px;
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(77, 163, 255, 0.14), transparent 36%),
+    rgba(10, 18, 32, 0.62);
+  box-shadow: none;
+}
+
+.root :global(.scan-loading-decision-flow) {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 16px minmax(70px, 1fr) 16px minmax(70px, 1fr) 16px;
+  align-items: center;
+  width: min(100%, 300px);
+}
+
+.root :global(.scan-loading-node) {
+  width: 16px;
+  height: 16px;
+  border: 1px solid rgba(226, 232, 240, 0.16);
+  border-radius: 999px;
+  background: #0b1220;
+  box-shadow: 0 0 0 5px rgba(77, 163, 255, 0.05);
+}
+
+.root :global(.scan-loading-node.hot) {
+  background: linear-gradient(135deg, #f97316, #fde047);
+  box-shadow: 0 0 24px rgba(251, 146, 60, 0.26);
+}
+
+.root :global(.scan-loading-node.market) {
+  background: linear-gradient(135deg, #38bdf8, #4da3ff);
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.26);
+}
+
+.root :global(.scan-loading-node.action) {
+  background: linear-gradient(135deg, #22c55e, #1be392);
+  box-shadow: 0 0 24px rgba(34, 197, 94, 0.3);
+  animation: scan-loading-node-breathe 1.8s ease-in-out infinite;
+}
+
+.root :global(.scan-loading-rail) {
+  position: relative;
+  height: 2px;
+  overflow: hidden;
+  background: rgba(148, 163, 184, 0.16);
+}
+
+.root :global(.scan-loading-rail i) {
+  position: absolute;
+  inset: 0;
+  width: 48%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, #7dd3fc, #22c55e);
+  transform: translateX(-110%);
+  animation: scan-loading-rail-flow 1.55s ease-in-out infinite;
+}
+
+.root :global(.scan-loading-rail:nth-of-type(4) i) {
+  animation-delay: 0.45s;
+}
+
+.root :global(.scan-loading-copy-block) {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 7px;
+  justify-items: center;
+}
+
+.root :global(.scan-loading-copy-block strong) {
+  color: #e6edf3;
+  font-size: 18px;
+  font-weight: 900;
+  letter-spacing: -0.02em;
+}
+
+.root :global(.scan-loading-copy-block span) {
+  max-width: 320px;
+  color: #9fb2c7;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.55;
+}
+
+.root :global(.scan-loading-signal-bars) {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: end;
+  gap: 5px;
+  height: 28px;
+}
+
+.root :global(.scan-loading-signal-bars span) {
+  width: 7px;
+  min-height: 8px;
+  border-radius: 999px 999px 4px 4px;
+  background: linear-gradient(180deg, #7dd3fc, #4da3ff 52%, #1be392);
+  opacity: 0.42;
+  transform-origin: center bottom;
+  animation: scan-loading-bars 1.35s ease-in-out infinite;
+}
+
+.root :global(.scan-loading-signal-bars span:nth-child(1)) {
+  height: 12px;
+}
+
+.root :global(.scan-loading-signal-bars span:nth-child(2)) {
+  height: 22px;
+  animation-delay: 0.16s;
+}
+
+.root :global(.scan-loading-signal-bars span:nth-child(3)) {
+  height: 16px;
+  animation-delay: 0.32s;
+}
+
+.root :global(.scan-loading-signal-bars span:nth-child(4)) {
+  height: 25px;
+  animation-delay: 0.48s;
+}
+
+@keyframes scan-loading-sweep {
+  0% {
+    transform: translateX(-130%);
+  }
+  46%,
+  100% {
+    transform: translateX(130%);
+  }
+}
+
+@keyframes scan-loading-rail-flow {
+  0% {
+    transform: translateX(-110%);
+    opacity: 0.15;
+  }
+  45% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(220%);
+    opacity: 0.15;
+  }
+}
+
+@keyframes scan-loading-node-breathe {
+  0%,
+  100% {
+    transform: scale(0.92);
+    filter: saturate(0.9);
+  }
+  50% {
+    transform: scale(1.08);
+    filter: saturate(1.25);
+  }
+}
+
+@keyframes scan-loading-bars {
+  0%,
+  100% {
+    opacity: 0.38;
+    transform: scaleY(0.72);
+  }
+  50% {
+    opacity: 0.95;
+    transform: scaleY(1);
+  }
+}

frontend/components/dashboard/opportunity-ai-meta.ts

@@ -0,0 +1,213 @@
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+import { formatQuoteCents } from "./opportunity-format";
+import { getLocalizedRowText } from "./opportunity-copy";
+import { getModelSourceSummary } from "./opportunity-model-summary";
+
+export function getOpportunityStrength(edgePercent?: number | null, locale = "zh-CN") {
+  const edge = Number(edgePercent);
+  const normalized = Number.isFinite(edge) ? edge : 0;
+  if (normalized >= 20) {
+    return {
+      label: locale === "en-US" ? "High confidence" : "高胜率",
+      tone: "strong",
+    };
+  }
+  if (normalized >= 10) {
+    return {
+      label: locale === "en-US" ? "Medium confidence" : "中等胜率",
+      tone: "medium",
+    };
+  }
+  return {
+    label: locale === "en-US" ? "Watch" : "观察",
+    tone: "watch",
+  };
+}
+
+export function getShortAiConclusion(
+  row: ScanOpportunityRow,
+  locale: string,
+  _edgePercent?: number | null,
+  strengthLabel?: string,
+) {
+  const directReason =
+    getLocalizedRowText(row, locale, row.ai_reason_zh, row.ai_reason_en) ||
+    getLocalizedRowText(
+      row,
+      locale,
+      row.ai_watchlist_reason_zh,
+      row.ai_watchlist_reason_en,
+    );
+  if (directReason) return directReason;
+  const cityThesis = getLocalizedRowText(
+    row,
+    locale,
+    row.ai_city_thesis_zh,
+    row.ai_city_thesis_en,
+  );
+  if (cityThesis) return cityThesis;
+
+  const modelBasis = getModelSourceSummary(row, locale, row.target_unit || row.temp_symbol);
+  if (locale === "en-US") {
+    return `${strengthLabel || "Watch"}: AI should validate against ${modelBasis}.`;
+  }
+  return `${strengthLabel || "观察"}：AI 需结合${modelBasis}确认。`;
+}
+
+export function getRiskHints(
+  row: ScanOpportunityRow,
+  locale: string,
+  modelProbability?: number | null,
+) {
+  const hints: string[] = [];
+  const spread = Number(row.spread);
+  if (Number.isFinite(spread) && spread > 0.03) {
+    hints.push(
+      locale === "en-US"
+        ? `Wide spread ${formatQuoteCents(spread)} may distort the displayed market price.`
+        : `盘口价差 ${formatQuoteCents(spread)} 偏宽，可能扭曲市场价格参考。`,
+    );
+  }
+  const quoteAgeSeconds =
+    row.quote_age_ms != null && Number.isFinite(Number(row.quote_age_ms))
+      ? Math.round(Number(row.quote_age_ms) / 1000)
+      : null;
+  if (quoteAgeSeconds != null && quoteAgeSeconds > 60) {
+    hints.push(
+      locale === "en-US"
+        ? `Quote age ${quoteAgeSeconds}s; refresh before acting.`
+        : `报价已 ${quoteAgeSeconds}s，执行前需要刷新。`,
+    );
+  }
+  if (row.trend_alignment === false) {
+    hints.push(
+      locale === "en-US"
+        ? "Intraday trend does not fully support this direction."
+        : "日内趋势未完全支持该方向。",
+    );
+  }
+  if (row.cluster_adjusted) {
+    hints.push(
+      locale === "en-US"
+        ? "Tail bucket was cluster-adjusted; bucket confidence may be overstated."
+        : "尾部桶已做模型集群折扣，温度桶信心可能偏乐观。",
+    );
+  }
+  if (modelProbability != null && modelProbability < 10) {
+    hints.push(
+      locale === "en-US"
+        ? "Low model probability makes the setup sensitive to calibration error."
+        : "模型概率偏低，校准误差会显著影响判断。",
+    );
+  }
+  if (!hints.length) {
+    hints.push(
+      locale === "en-US"
+        ? "Main residual risk is late observation updates or a shifted peak window."
+        : "主要残余风险是后续实测升温或峰值窗口漂移。",
+    );
+  }
+  return hints;
+}
+
+export function getRecommendationReasons(
+  row: ScanOpportunityRow,
+  locale: string,
+  _edgePercent?: number | null,
+  price?: number | null,
+) {
+  const reasons: string[] = [];
+  const aiReason = getLocalizedRowText(row, locale, row.ai_reason_zh, row.ai_reason_en);
+  if (aiReason && String(row.ai_decision || "").toLowerCase() === "approve") {
+    reasons.push(aiReason);
+  }
+  const modelBasis = getModelSourceSummary(row, locale, row.target_unit || row.temp_symbol);
+  reasons.push(
+    locale === "en-US"
+      ? `AI uses ${modelBasis} with market ask ${formatQuoteCents(price)} only as downstream bucket context.`
+      : `AI 以${modelBasis}为主，市场买价 ${formatQuoteCents(price)} 只作下游温度桶参考。`,
+  );
+  if (row.peak_alignment_score != null) {
+    reasons.push(
+      locale === "en-US"
+        ? `Peak alignment score ${Number(row.peak_alignment_score).toFixed(2)} supports checking this bucket.`
+        : `峰值对齐分 ${Number(row.peak_alignment_score).toFixed(2)}，支持把该桶纳入检查。`,
+    );
+  }
+  return reasons.slice(0, 3);
+}
+
+export function getExclusionReasons(
+  row: ScanOpportunityRow,
+  locale: string,
+  edgePercent?: number | null,
+) {
+  const decision = String(row.ai_decision || "").toLowerCase();
+  const aiReason =
+    getLocalizedRowText(row, locale, row.ai_reason_zh, row.ai_reason_en) ||
+    getLocalizedRowText(
+      row,
+      locale,
+      row.ai_watchlist_reason_zh,
+      row.ai_watchlist_reason_en,
+    );
+  if (decision === "veto" || decision === "downgrade" || decision === "watchlist") {
+    return [
+      aiReason ||
+        (locale === "en-US"
+          ? "AI did not classify this row as the primary forecast bucket."
+          : "AI 未把该合约列为主预测桶。"),
+    ];
+  }
+  if (edgePercent != null && Number(edgePercent) < 10) {
+    return [
+      locale === "en-US"
+        ? "This bucket is not the current forecast center."
+        : "该桶不是当前预测中枢。",
+    ];
+  }
+  return [
+    locale === "en-US"
+      ? "No hard veto in the current AI/rule snapshot."
+      : "当前 AI/规则快照没有硬性排除项。",
+  ];
+}
+
+export function getAiMeta(row: ScanOpportunityRow, locale: string) {
+  const decision = String(row.ai_decision || "").toLowerCase();
+  if (decision === "veto") {
+    return {
+      label: locale === "en-US" ? "AI veto" : "AI 排除",
+      tone: "veto",
+      reason: locale === "en-US" ? row.ai_reason_en || row.ai_reason_zh : row.ai_reason_zh || row.ai_reason_en,
+    };
+  }
+  if (decision === "downgrade") {
+    return {
+      label: locale === "en-US" ? "AI downgrade" : "AI 降级",
+      tone: "downgrade",
+      reason: locale === "en-US" ? row.ai_reason_en || row.ai_reason_zh : row.ai_reason_zh || row.ai_reason_en,
+    };
+  }
+  if (row.ai_rank != null || decision === "approve") {
+    return {
+      label: locale === "en-US" ? `AI pick ${row.ai_rank || ""}`.trim() : `AI 推荐 ${row.ai_rank || ""}`.trim(),
+      tone: "approve",
+      reason:
+        (locale === "en-US" ? row.ai_reason_en || row.ai_reason_zh : row.ai_reason_zh || row.ai_reason_en) ||
+        row.ai_model_cluster_note ||
+        null,
+    };
+  }
+  if (decision === "watchlist") {
+    return {
+      label: locale === "en-US" ? "AI watch" : "AI 观察",
+      tone: "downgrade",
+      reason:
+        locale === "en-US"
+          ? row.ai_watchlist_reason_en || row.ai_watchlist_reason_zh
+          : row.ai_watchlist_reason_zh || row.ai_watchlist_reason_en,
+    };
+  }
+  return null;
+}

frontend/components/dashboard/opportunity-airport-read.ts

@@ -0,0 +1,274 @@
+import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
+import { formatTemperatureValue } from "@/lib/temperature-utils";
+
+export function decodeRawMetarCloud(rawMetar?: string | null, locale = "zh-CN") {
+  const raw = String(rawMetar || "").toUpperCase();
+  const matches = Array.from(raw.matchAll(/\b(FEW|SCT|BKN|OVC)(\d{3})?\b/g));
+  if (!matches.length) return "";
+  const coverText: Record<string, { zh: string; en: string }> = {
+    FEW: { zh: "少云", en: "few" },
+    SCT: { zh: "散云", en: "scattered" },
+    BKN: { zh: "多云", en: "broken" },
+    OVC: { zh: "阴天", en: "overcast" },
+  };
+  return matches
+    .slice(0, 3)
+    .map((match) => {
+      const cover = coverText[match[1]] || { zh: match[1], en: match[1] };
+      const base = match[2] ? `${Number(match[2]) * 100}ft` : "";
+      return locale === "en-US"
+        ? [cover.en, base].filter(Boolean).join(" ")
+        : [cover.zh, base].filter(Boolean).join(" ");
+    })
+    .join(locale === "en-US" ? ", " : "、");
+}
+
+export function decodeRawMetarVisibility(rawMetar?: string | null) {
+  const raw = String(rawMetar || "").toUpperCase();
+  if (/\b9999\b/.test(raw)) return "10km+";
+  const meterMatch = raw.match(/\b(\d{4})\b/);
+  if (meterMatch) return `${Number(meterMatch[1]) / 1000}km`;
+  return "";
+}
+
+export function decodeMetarWeatherToken(token?: string | null, locale = "zh-CN") {
+  const raw = String(token || "").trim().toUpperCase();
+  if (!raw) return "";
+  const isEn = locale === "en-US";
+  const intensity = raw.startsWith("-")
+    ? isEn
+      ? "light "
+      : "轻"
+    : raw.startsWith("+")
+      ? isEn
+        ? "heavy "
+        : "强"
+      : "";
+  const cleaned = raw.replace(/^[+-]/, "");
+  const descriptors: Record<string, { zh: string; en: string }> = {
+    VC: { zh: "附近", en: "nearby " },
+    SH: { zh: "阵性", en: "showery " },
+    TS: { zh: "雷暴性", en: "thunderstorm " },
+    FZ: { zh: "冻", en: "freezing " },
+    BL: { zh: "吹扬", en: "blowing " },
+    DR: { zh: "低吹", en: "drifting " },
+    MI: { zh: "浅层", en: "shallow " },
+    BC: { zh: "碎片状", en: "patches of " },
+    PR: { zh: "部分", en: "partial " },
+  };
+  const phenomena: Record<string, { zh: string; en: string }> = {
+    DZ: { zh: "毛毛雨", en: "drizzle" },
+    RA: { zh: "雨", en: "rain" },
+    SN: { zh: "雪", en: "snow" },
+    SG: { zh: "米雪", en: "snow grains" },
+    IC: { zh: "冰晶", en: "ice crystals" },
+    PL: { zh: "冰粒", en: "ice pellets" },
+    GR: { zh: "冰雹", en: "hail" },
+    GS: { zh: "小冰雹", en: "small hail" },
+    UP: { zh: "未知降水", en: "unknown precipitation" },
+    BR: { zh: "薄雾", en: "mist" },
+    FG: { zh: "雾", en: "fog" },
+    FU: { zh: "烟", en: "smoke" },
+    VA: { zh: "火山灰", en: "volcanic ash" },
+    DU: { zh: "浮尘", en: "dust" },
+    SA: { zh: "沙", en: "sand" },
+    HZ: { zh: "霾", en: "haze" },
+    PY: { zh: "喷雾", en: "spray" },
+    PO: { zh: "尘卷风", en: "dust whirls" },
+    SQ: { zh: "飑", en: "squall" },
+    FC: { zh: "漏斗云", en: "funnel cloud" },
+    SS: { zh: "沙暴", en: "sandstorm" },
+    DS: { zh: "尘暴", en: "duststorm" },
+  };
+  const descriptorText = Object.entries(descriptors)
+    .filter(([code]) => cleaned.includes(code))
+    .map(([, text]) => (isEn ? text.en : text.zh))
+    .join("");
+  const phenomenonText = Object.entries(phenomena)
+    .filter(([code]) => cleaned.includes(code))
+    .map(([, text]) => (isEn ? text.en : text.zh))
+    .join(isEn ? " / " : "、");
+  if (!phenomenonText) return "";
+  return `${intensity}${descriptorText}${phenomenonText}`;
+}
+
+export function decodeRawMetarWeather(rawMetar?: string | null, locale = "zh-CN") {
+  const raw = String(rawMetar || "").toUpperCase();
+  const matches = Array.from(
+    raw.matchAll(/\b([+-]?(?:VC)?(?:MI|PR|BC|DR|BL|SH|TS|FZ)?(?:DZ|RA|SN|SG|IC|PL|GR|GS|UP|BR|FG|FU|VA|DU|SA|HZ|PY|PO|SQ|FC|SS|DS))\b/g),
+  );
+  return Array.from(
+    new Set(
+      matches
+        .map((match) => decodeMetarWeatherToken(match[1], locale))
+        .filter(Boolean),
+    ),
+  ).join(locale === "en-US" ? ", " : "、");
+}
+
+export function getAirportWeatherInputs(row: ScanOpportunityRow, detail: CityDetail | null) {
+  const context = row.metar_context || {};
+  const airport: Partial<NonNullable<CityDetail["airport_current"]>> =
+    detail?.airport_current || {};
+  const rawMetar = String(context.airport_raw_metar || airport.raw_metar || "").trim();
+  return {
+    cloud: String(context.airport_cloud_desc || airport.cloud_desc || "").trim(),
+    rawMetar,
+    visibility:
+      context.airport_visibility_mi != null && Number.isFinite(Number(context.airport_visibility_mi))
+        ? Number(context.airport_visibility_mi)
+        : airport.visibility_mi != null && Number.isFinite(Number(airport.visibility_mi))
+          ? Number(airport.visibility_mi)
+          : null,
+    weather: String(context.airport_wx_desc || airport.wx_desc || "").trim(),
+    windSpeed:
+      context.airport_wind_speed_kt != null && Number.isFinite(Number(context.airport_wind_speed_kt))
+        ? Number(context.airport_wind_speed_kt)
+        : airport.wind_speed_kt != null && Number.isFinite(Number(airport.wind_speed_kt))
+          ? Number(airport.wind_speed_kt)
+          : null,
+  };
+}
+
+export function formatAirportWeatherRead(
+  row: ScanOpportunityRow,
+  detail: CityDetail | null,
+  locale: string,
+) {
+  const isEn = locale === "en-US";
+  const inputs = getAirportWeatherInputs(row, detail);
+  const decodedCloud = inputs.cloud || decodeRawMetarCloud(inputs.rawMetar, locale);
+  const decodedWeather =
+    decodeMetarWeatherToken(inputs.weather, locale) ||
+    inputs.weather ||
+    decodeRawMetarWeather(inputs.rawMetar, locale);
+  const visibilityText =
+    inputs.visibility != null ? `${inputs.visibility.toFixed(1)}mi` : decodeRawMetarVisibility(inputs.rawMetar);
+  const cloudRaw = `${inputs.cloud} ${inputs.rawMetar}`.toUpperCase();
+  const weatherRaw = `${inputs.weather} ${inputs.rawMetar}`.toUpperCase();
+  const suppressors: string[] = [];
+  const supporters: string[] = [];
+
+  if (/(RA|DZ|SN|TS|SH|FG|BR|HZ|OVC|BKN)/.test(weatherRaw) || /(OVC|BKN)/.test(cloudRaw)) {
+    suppressors.push(
+      isEn
+        ? "cloud, precipitation or restricted visibility can suppress solar heating"
+        : "云雨、薄雾或低能见度会压制太阳辐射升温",
+    );
+  }
+  if (inputs.visibility != null && inputs.visibility < 6) {
+    suppressors.push(
+      isEn
+        ? `visibility is only ${visibilityText}, so the airport path may warm more slowly`
+        : `能见度仅 ${visibilityText}，机场路径可能升温偏慢`,
+    );
+  }
+  if (/(FEW|SCT)/.test(cloudRaw) && !/(RA|DZ|SN|TS|FG|BR|HZ|OVC|BKN)/.test(weatherRaw)) {
+    supporters.push(
+      isEn
+        ? "few or scattered clouds do not block the heating path materially"
+        : "少云或散云对日间升温压制不明显",
+    );
+  }
+  if (inputs.windSpeed != null && inputs.windSpeed >= 15) {
+    suppressors.push(
+      isEn
+        ? "stronger wind mixing can change the airport temperature path"
+        : "风速偏大，边界层混合可能改写机场温度路径",
+    );
+  } else if (inputs.windSpeed != null && inputs.windSpeed <= 5 && !suppressors.length) {
+    supporters.push(
+      isEn
+        ? "light wind leaves the temperature path mainly driven by local sunshine"
+        : "风速较弱，温度路径更取决于本地日照",
+    );
+  }
+
+  const descriptors = [
+    decodedWeather ? (isEn ? `weather ${decodedWeather}` : `天气 ${decodedWeather}`) : null,
+    decodedCloud ? (isEn ? `cloud ${decodedCloud}` : `云况 ${decodedCloud}`) : null,
+    visibilityText ? (isEn ? `visibility ${visibilityText}` : `能见度 ${visibilityText}`) : null,
+  ].filter(Boolean);
+  const read = suppressors[0] || supporters[0];
+  if (!descriptors.length && !read) return null;
+  const prefix = isEn ? "Airport weather read" : "机场气象解读";
+  const evidence = descriptors.length ? `${descriptors.join(isEn ? ", " : "，")}；` : "";
+  return `${prefix}：${evidence}${read || (isEn ? "no clear weather suppression signal yet" : "暂未看到明确天气压温信号")}。`;
+}
+
+export function formatAirportReportRead(
+  row: ScanOpportunityRow,
+  detail: CityDetail | null,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  const isEn = locale === "en-US";
+  const context = row.metar_context || {};
+  const airport: Partial<NonNullable<CityDetail["airport_current"]>> =
+    detail?.airport_current || {};
+  const station =
+    context.station ||
+    detail?.risk?.icao ||
+    airport.station_code ||
+    null;
+  const obsTime =
+    context.airport_obs_time ||
+    context.last_time ||
+    airport.obs_time ||
+    row.metar_status?.last_observation_time ||
+    null;
+  const temp =
+    context.airport_current_temp != null && Number.isFinite(Number(context.airport_current_temp))
+      ? Number(context.airport_current_temp)
+      : airport.temp != null && Number.isFinite(Number(airport.temp))
+        ? Number(airport.temp)
+        : null;
+  const windSpeed =
+    context.airport_wind_speed_kt != null && Number.isFinite(Number(context.airport_wind_speed_kt))
+      ? Number(context.airport_wind_speed_kt)
+      : airport.wind_speed_kt != null && Number.isFinite(Number(airport.wind_speed_kt))
+        ? Number(airport.wind_speed_kt)
+        : null;
+  const windDir =
+    context.airport_wind_dir != null && Number.isFinite(Number(context.airport_wind_dir))
+      ? Number(context.airport_wind_dir)
+      : airport.wind_dir != null && Number.isFinite(Number(airport.wind_dir))
+        ? Number(airport.wind_dir)
+        : null;
+  const cloud = String(context.airport_cloud_desc || airport.cloud_desc || "").trim();
+  const weather = String(context.airport_wx_desc || airport.wx_desc || "").trim();
+  const rawMetar = String(context.airport_raw_metar || airport.raw_metar || "").trim();
+  const decodedCloud = cloud || decodeRawMetarCloud(rawMetar, locale);
+  const decodedWeather =
+    decodeMetarWeatherToken(weather, locale) ||
+    weather ||
+    decodeRawMetarWeather(rawMetar, locale);
+  const visibility =
+    context.airport_visibility_mi != null && Number.isFinite(Number(context.airport_visibility_mi))
+      ? Number(context.airport_visibility_mi)
+      : airport.visibility_mi != null && Number.isFinite(Number(airport.visibility_mi))
+        ? Number(airport.visibility_mi)
+        : null;
+  const decodedVisibility = visibility != null ? `${visibility.toFixed(1)}mi` : decodeRawMetarVisibility(rawMetar);
+
+  const parts: string[] = [];
+  if (temp != null) parts.push(formatTemperatureValue(temp, tempSymbol, { digits: 1 }));
+  if (windSpeed != null) {
+    parts.push(
+      windDir != null
+        ? isEn
+          ? `wind ${Math.round(windDir)}°/${Math.round(windSpeed)}kt`
+          : `风 ${Math.round(windDir)}°/${Math.round(windSpeed)}kt`
+        : isEn
+          ? `wind ${Math.round(windSpeed)}kt`
+          : `风 ${Math.round(windSpeed)}kt`,
+    );
+  }
+  if (decodedCloud) parts.push(isEn ? `cloud ${decodedCloud}` : `云况 ${decodedCloud}`);
+  if (decodedWeather) parts.push(isEn ? `weather ${decodedWeather}` : `天气 ${decodedWeather}`);
+  if (decodedVisibility) parts.push(isEn ? `visibility ${decodedVisibility}` : `能见度 ${decodedVisibility}`);
+  if (!parts.length) return null;
+  const prefix = isEn ? "Latest airport METAR read" : "最新机场报文解读";
+  const head = [station, obsTime].filter(Boolean).join(" ");
+  return `${prefix}${head ? ` ${head}` : ""}：${parts.join("，")}。`;
+}

frontend/components/dashboard/opportunity-copy.ts

@@ -0,0 +1,10 @@
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+
+export function getLocalizedRowText(
+  row: ScanOpportunityRow,
+  locale: string,
+  zh?: string | null,
+  en?: string | null,
+) {
+  return locale === "en-US" ? en || zh || null : zh || en || null;
+}

frontend/components/dashboard/opportunity-detail.ts

@@ -0,0 +1,37 @@
+import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
+
+export function normalizeLookupKey(value?: string | null) {
+  return String(value || "")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_-]+/g, "");
+}
+
+export function getDetailForRow(
+  row: Pick<ScanOpportunityRow, "city" | "city_display_name" | "display_name">,
+  cityDetailsByName?: Record<string, CityDetail>,
+) {
+  if (!cityDetailsByName) return null;
+  const rowKeys = [row.city, row.city_display_name, row.display_name]
+    .map(normalizeLookupKey)
+    .filter(Boolean);
+  return (
+    Object.entries(cityDetailsByName).find(([name, detail]) => {
+      const detailKeys = [name, detail.name, detail.display_name]
+        .map(normalizeLookupKey)
+        .filter(Boolean);
+      return rowKeys.some((key) => detailKeys.includes(key));
+    })?.[1] || null
+  );
+}
+
+export function getDetailViewDate(detail: CityDetail, row?: ScanOpportunityRow | null) {
+  if (!row) return detail.local_date;
+  const rawDate = row.selected_date || row.local_date || "";
+  const phase = String(row.window_phase || "").toLowerCase();
+  if ((phase === "tomorrow" || phase === "week_ahead") && rawDate) return rawDate;
+  if (!rawDate || rawDate === detail.local_date || row.local_date === detail.local_date) {
+    return detail.local_date;
+  }
+  return detail.local_date || rawDate;
+}

frontend/components/dashboard/opportunity-evidence-summary.ts

@@ -0,0 +1,127 @@
+import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
+import { formatTemperatureValue } from "@/lib/temperature-utils";
+import { formatTemperatureDelta } from "./opportunity-format";
+import { getMetarObservationContext } from "./opportunity-observation";
+import { getTargetRange } from "./opportunity-target";
+
+export function getDebDistanceSummary(
+  row: ScanOpportunityRow,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  const deb =
+    row.deb_prediction != null && Number.isFinite(Number(row.deb_prediction))
+      ? Number(row.deb_prediction)
+      : null;
+  if (deb == null) return locale === "en-US" ? "DEB pending" : "DEB 待确认";
+  const { lower, upper } = getTargetRange(row);
+  if (lower != null && upper == null) {
+    const delta = deb - lower;
+    if (Math.abs(delta) < 0.05) return locale === "en-US" ? "DEB on threshold" : "DEB 贴近阈值";
+    return delta >= 0
+      ? locale === "en-US"
+        ? `DEB above by ${formatTemperatureDelta(delta, tempSymbol)}`
+        : `DEB 高于阈值 ${formatTemperatureDelta(delta, tempSymbol)}`
+      : locale === "en-US"
+        ? `DEB below by ${formatTemperatureDelta(delta, tempSymbol)}`
+        : `DEB 低于阈值 ${formatTemperatureDelta(delta, tempSymbol)}`;
+  }
+  if (upper != null && lower == null) {
+    const delta = deb - upper;
+    if (Math.abs(delta) < 0.05) return locale === "en-US" ? "DEB on threshold" : "DEB 贴近阈值";
+    return delta <= 0
+      ? locale === "en-US"
+        ? `DEB below by ${formatTemperatureDelta(delta, tempSymbol)}`
+        : `DEB 低于阈值 ${formatTemperatureDelta(delta, tempSymbol)}`
+      : locale === "en-US"
+        ? `DEB above by ${formatTemperatureDelta(delta, tempSymbol)}`
+        : `DEB 高于阈值 ${formatTemperatureDelta(delta, tempSymbol)}`;
+  }
+  if (lower != null && upper != null) {
+    if (deb >= lower && deb <= upper) return locale === "en-US" ? "DEB inside bucket" : "DEB 位于桶内";
+    const nearest = deb < lower ? lower : upper;
+    const delta = deb - nearest;
+    return deb < lower
+      ? locale === "en-US"
+        ? `DEB below bucket by ${formatTemperatureDelta(delta, tempSymbol)}`
+        : `DEB 低于桶 ${formatTemperatureDelta(delta, tempSymbol)}`
+      : locale === "en-US"
+        ? `DEB above bucket by ${formatTemperatureDelta(delta, tempSymbol)}`
+        : `DEB 高于桶 ${formatTemperatureDelta(delta, tempSymbol)}`;
+  }
+  return locale === "en-US"
+    ? `DEB ${formatTemperatureValue(deb, tempSymbol, { digits: 1 })}`
+    : `DEB ${formatTemperatureValue(deb, tempSymbol, { digits: 1 })}`;
+}
+
+export function getModelSupportSummary(
+  row: ScanOpportunityRow,
+  locale: string,
+) {
+  const sources = Object.values(row.model_cluster_sources || {})
+    .map((value) => Number(value))
+    .filter((value) => Number.isFinite(value));
+  const deb =
+    row.deb_prediction != null && Number.isFinite(Number(row.deb_prediction))
+      ? Number(row.deb_prediction)
+      : null;
+  if (!sources.length || deb == null) return locale === "en-US" ? "Models pending" : "模型待确认";
+  const { lower, upper } = getTargetRange(row);
+  let supports = 0;
+  if (lower != null && upper == null) {
+    supports = sources.filter((value) => (deb >= lower ? value >= lower : value < lower)).length;
+  } else if (upper != null && lower == null) {
+    supports = sources.filter((value) => (deb <= upper ? value <= upper : value > upper)).length;
+  } else if (lower != null && upper != null) {
+    if (deb >= lower && deb <= upper) {
+      supports = sources.filter((value) => value >= lower && value <= upper).length;
+    } else if (deb < lower) {
+      supports = sources.filter((value) => value < lower).length;
+    } else {
+      supports = sources.filter((value) => value > upper).length;
+    }
+  } else {
+    const tolerance = 1;
+    supports = sources.filter((value) => Math.abs(value - deb) <= tolerance).length;
+  }
+  return locale === "en-US"
+    ? `${supports}/${sources.length} models support DEB`
+    : `${supports}/${sources.length} 模型支持 DEB`;
+}
+
+export function getMetarConflictSummary(
+  row: ScanOpportunityRow,
+  detail: CityDetail | null,
+  locale: string,
+) {
+  const obs = getMetarObservationContext(row, detail);
+  if (obs.stale || obs.maxTemp == null) return locale === "en-US" ? "METAR pending" : "METAR 待确认";
+  const deb =
+    row.deb_prediction != null && Number.isFinite(Number(row.deb_prediction))
+      ? Number(row.deb_prediction)
+      : null;
+  const { lower, upper } = getTargetRange(row);
+  if (deb == null || (lower == null && upper == null)) {
+    return locale === "en-US" ? "METAR read only" : "METAR 仅参考";
+  }
+  const phase = String(row.window_phase || "").toLowerCase();
+  const peakPending =
+    phase === "early_today" ||
+    phase === "setup_today" ||
+    (row.minutes_until_peak_start != null && Number(row.minutes_until_peak_start) > 0);
+  if (lower != null && upper == null) {
+    if (deb < lower && obs.maxTemp >= lower) return locale === "en-US" ? "METAR conflicts" : "METAR 冲突";
+    if (deb >= lower && obs.maxTemp < lower && peakPending) return locale === "en-US" ? "Await peak" : "等待峰值";
+    return locale === "en-US" ? "METAR no conflict" : "METAR 未冲突";
+  }
+  if (upper != null && lower == null) {
+    if (deb <= upper && obs.maxTemp > upper) return locale === "en-US" ? "METAR conflicts" : "METAR 冲突";
+    if (deb > upper && obs.maxTemp <= upper && peakPending) return locale === "en-US" ? "Await peak" : "等待峰值";
+    return locale === "en-US" ? "METAR no conflict" : "METAR 未冲突";
+  }
+  if (lower != null && upper != null && deb >= lower && deb <= upper) {
+    if (obs.maxTemp > upper) return locale === "en-US" ? "METAR above bucket" : "METAR 已越过桶";
+    if (obs.maxTemp < lower && peakPending) return locale === "en-US" ? "Await peak" : "等待峰值";
+  }
+  return locale === "en-US" ? "METAR no conflict" : "METAR 未冲突";
+}

frontend/components/dashboard/opportunity-format.ts

@@ -0,0 +1,124 @@
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+import {
+  formatTemperatureValue,
+  normalizeTemperatureLabel,
+} from "@/lib/temperature-utils";
+import { getTargetRange } from "./opportunity-target";
+
+export function formatPercent(value?: number | null, signed = false) {
+  if (value == null || Number.isNaN(Number(value))) return "--";
+  const numeric = Number(value);
+  return `${signed && numeric >= 0 ? "+" : ""}${numeric.toFixed(1)}%`;
+}
+
+export function normalizeProbability(value?: number | null) {
+  if (value == null) return null;
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return null;
+  return Math.max(0, Math.min(1, numeric > 1 ? numeric / 100 : numeric));
+}
+
+export function formatWindowMinutes(value: number | null | undefined, locale: string) {
+  if (value == null || !Number.isFinite(Number(value))) return "--";
+  const minutes = Math.max(0, Math.round(Number(value)));
+  const hours = Math.floor(minutes / 60);
+  const remains = minutes % 60;
+  if (locale === "en-US") {
+    if (hours <= 0) return `${remains}m left`;
+    return `${hours}h ${remains}m left`;
+  }
+  if (hours <= 0) return `剩余 ${remains} 分钟`;
+  return `剩余 ${hours}h ${remains}m`;
+}
+
+export function formatMinuteSpan(value: number | null | undefined, locale: string) {
+  if (value == null || !Number.isFinite(Number(value))) return "--";
+  const minutes = Math.max(0, Math.round(Number(value)));
+  const hours = Math.floor(minutes / 60);
+  const remains = minutes % 60;
+  if (locale === "en-US") {
+    if (hours <= 0) return `${remains}m`;
+    return `${hours}h ${remains}m`;
+  }
+  if (hours <= 0) return `${remains} 分钟`;
+  return `${hours}h ${remains}m`;
+}
+
+export function formatAction(
+  row: ScanOpportunityRow,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  return formatTradeSide(row, locale, tempSymbol);
+}
+
+export function formatQuoteCents(value?: number | null) {
+  if (value == null || Number.isNaN(Number(value))) return "--";
+  const cents = Number(value) * 100;
+  const text =
+    cents < 1 || cents >= 99 || Math.abs(cents - Math.round(cents)) >= 0.05
+      ? cents.toFixed(1)
+      : Math.round(cents).toFixed(0);
+  return `${text.replace(/\.0$/, "")}¢`;
+}
+
+export function formatTradeSide(
+  row: ScanOpportunityRow,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  const side = String(row.side || "").toLowerCase();
+  const isEn = locale === "en-US";
+  const { lower, upper } = getTargetRange(row);
+  const threshold =
+    lower != null && upper == null
+      ? formatTemperatureValue(lower, tempSymbol)
+      : upper != null && lower == null
+        ? formatTemperatureValue(upper, tempSymbol)
+        : null;
+  if (threshold && lower != null && upper == null) {
+    if (side === "yes") return isEn ? `High reaches ${threshold}` : `最高温达到 ${threshold}`;
+    if (side === "no") return isEn ? `High stays below ${threshold}` : `最高温低于 ${threshold}`;
+  }
+  if (threshold && upper != null && lower == null) {
+    if (side === "yes") return isEn ? `High stays at/below ${threshold}` : `最高温不高于 ${threshold}`;
+    if (side === "no") return isEn ? `High exceeds ${threshold}` : `最高温高于 ${threshold}`;
+  }
+  if (lower != null && upper != null && Math.abs(lower - upper) > 0.01) {
+    const range = `${formatTemperatureValue(lower, tempSymbol)} ~ ${formatTemperatureValue(upper, tempSymbol)}`;
+    if (side === "yes") return isEn ? `High lands in ${range}` : `最高温落在 ${range}`;
+    if (side === "no") return isEn ? `High avoids ${range}` : `最高温不在 ${range}`;
+  }
+  const bucket = formatThreshold(row, tempSymbol);
+  if (side === "yes") return isEn ? `High lands on ${bucket}` : `最高温落在 ${bucket} 桶`;
+  if (side === "no") return isEn ? `High avoids ${bucket}` : `最高温不落在 ${bucket} 桶`;
+  if (row.action) {
+    return normalizeTemperatureLabel(
+      String(row.action).replace(String(row.target_label || ""), ""),
+      tempSymbol,
+    )
+      .replace(/\s+/g, " ")
+      .trim()
+      .toUpperCase();
+  }
+  return locale === "en-US" ? "WATCH" : "观察";
+}
+
+export function formatThreshold(row: ScanOpportunityRow, tempSymbol?: string | null) {
+  const targetLabel = normalizeTemperatureLabel(row.target_label, tempSymbol);
+  if (targetLabel) return targetLabel;
+  if (row.target_lower != null && row.target_upper != null) {
+    return `${formatTemperatureValue(Number(row.target_lower), tempSymbol)} ~ ${formatTemperatureValue(Number(row.target_upper), tempSymbol)}`;
+  }
+  if (row.target_threshold != null) {
+    return formatTemperatureValue(Number(row.target_threshold), tempSymbol);
+  }
+  if (row.target_value != null) {
+    return formatTemperatureValue(Number(row.target_value), tempSymbol);
+  }
+  return "--";
+}
+
+export function formatTemperatureDelta(value: number, tempSymbol?: string | null) {
+  return formatTemperatureValue(Math.abs(value), tempSymbol, { digits: 1 });
+}

frontend/components/dashboard/opportunity-groups.ts

@@ -0,0 +1,185 @@
+import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
+import { getLocalizedCityName } from "@/lib/dashboard-home-copy";
+import { getModelView, getProbabilityView } from "@/lib/model-utils";
+import {
+  formatTemperatureValue,
+  normalizeTemperatureSymbol,
+} from "@/lib/temperature-utils";
+import { getWindowPhaseMeta, type PhaseMeta } from "./opportunity-window-phase";
+import {
+  getDetailForRow,
+  getDetailViewDate,
+} from "./opportunity-detail";
+import {
+  formatThreshold,
+  normalizeProbability,
+} from "./opportunity-format";
+import { formatModelClusterRange } from "./opportunity-model-summary";
+import {
+  extractNumbers,
+  getTargetRange,
+  normalizeBucketLabel,
+} from "./opportunity-target";
+
+export function getBucketText(bucket: { label?: string | null; bucket?: string | null; range?: string | null }) {
+  return [bucket.label, bucket.bucket, bucket.range]
+    .map((value) => String(value || "").trim())
+    .filter(Boolean);
+}
+
+export function bucketMatchesRow(
+  bucket: {
+    label?: string | null;
+    bucket?: string | null;
+    range?: string | null;
+    value?: number | string | null;
+  },
+  row: ScanOpportunityRow,
+  tempSymbol?: string | null,
+) {
+  const targetLabel = normalizeBucketLabel(row.target_label, tempSymbol);
+  const bucketLabels = getBucketText(bucket).map((label) =>
+    normalizeBucketLabel(label, tempSymbol),
+  );
+  if (targetLabel && bucketLabels.some((label) => label === targetLabel)) {
+    return true;
+  }
+
+  const rawTargetLabel = String(row.target_label || "");
+  const targetNumbers = extractNumbers(rawTargetLabel);
+  const targetValue =
+    row.target_value ?? row.target_threshold ?? row.target_lower ?? row.target_upper ?? targetNumbers[0] ?? null;
+  if (targetValue == null || !Number.isFinite(Number(targetValue))) return false;
+
+  const bucketNumbers = [
+    ...(bucket.value != null && Number.isFinite(Number(bucket.value))
+      ? [Number(bucket.value)]
+      : []),
+    ...getBucketText(bucket).flatMap(extractNumbers),
+  ];
+  const matchesNumber = bucketNumbers.some(
+    (value) => Math.abs(Number(value) - Number(targetValue)) < 0.05,
+  );
+  if (!matchesNumber) return false;
+
+  const targetIsUpper =
+    /(\+|以上|or\s*above|above|greater|>=|≥)/i.test(rawTargetLabel) ||
+    (row.target_lower != null && row.target_upper == null);
+  const targetIsLower =
+    /(<=|≤|below|or\s*below|以下)/i.test(rawTargetLabel) ||
+    (row.target_upper != null && row.target_lower == null);
+  const bucketRaw = getBucketText(bucket).join(" ");
+  const bucketIsUpper = /(\+|以上|or\s*above|above|greater|>=|≥|inf|∞)/i.test(bucketRaw);
+  const bucketIsLower = /(<=|≤|below|or\s*below|以下|-inf|-∞)/i.test(bucketRaw);
+
+  if (targetIsUpper || bucketIsUpper) return targetIsUpper === bucketIsUpper;
+  if (targetIsLower || bucketIsLower) return targetIsLower === bucketIsLower;
+  return true;
+}
+
+export function getDetailBucketEventProbability(
+  detail: CityDetail | null,
+  row: ScanOpportunityRow,
+  tempSymbol?: string | null,
+) {
+  if (!detail) return null;
+  const view = getProbabilityView(detail, getDetailViewDate(detail, row));
+  const buckets = Array.isArray(view.probabilitiesAll)
+    ? view.probabilitiesAll
+    : [];
+  if (!buckets.length) return null;
+  const matched = buckets.find((bucket) => bucketMatchesRow(bucket, row, tempSymbol));
+  return normalizeProbability(matched?.probability);
+}
+
+export type OpportunityGroup = {
+  key: string;
+  cityName: string;
+  date?: string | null;
+  tempSymbol?: string | null;
+  debLabel: string;
+  peakLabel: string;
+  peakProbability?: number | null;
+  phaseMeta: PhaseMeta;
+  localTime?: string | null;
+  remainingMinutes?: number | null;
+  rows: ScanOpportunityRow[];
+};
+
+export function buildOpportunityGroups(
+  rows: ScanOpportunityRow[],
+  locale: string,
+  cityDetailsByName?: Record<string, CityDetail>,
+): OpportunityGroup[] {
+  const groups = new Map<string, OpportunityGroup>();
+  for (const row of rows) {
+    const tempSymbol = normalizeTemperatureSymbol(row.target_unit || row.temp_symbol);
+    const detail = getDetailForRow(row, cityDetailsByName);
+    const cityName = getLocalizedCityName(
+      row.city,
+      row.city_display_name || row.display_name || row.city,
+      locale,
+    );
+    const date = detail ? getDetailViewDate(detail, row) : row.selected_date || row.local_date || "";
+    const key = `${row.city || cityName}|${date}`;
+    const modelView = detail ? getModelView(detail, date) : null;
+    const debPrediction = modelView?.deb ?? row.deb_prediction ?? null;
+    const modelClusterLabel = formatModelClusterRange(
+      modelView?.models || row.model_cluster_sources,
+      tempSymbol,
+    );
+    const existing = groups.get(key);
+    if (!existing) {
+      groups.set(key, {
+        key,
+        cityName,
+        date,
+        tempSymbol,
+        debLabel:
+          debPrediction != null
+            ? formatTemperatureValue(Number(debPrediction), tempSymbol, { digits: 1 })
+            : "--",
+        peakLabel: modelClusterLabel,
+        peakProbability: null,
+        phaseMeta: getWindowPhaseMeta(row, locale),
+        localTime: row.local_time,
+        remainingMinutes: row.remaining_window_minutes,
+        rows: [row],
+      });
+      continue;
+    }
+    existing.rows.push(row);
+    if (existing.peakLabel === "--" && modelClusterLabel !== "--") {
+      existing.peakLabel = modelClusterLabel;
+    }
+  }
+  return Array.from(groups.values()).map((group) => ({
+    ...group,
+    rows: [...group.rows].sort(
+      (a, b) =>
+        Number(b.edge_percent ?? -Infinity) - Number(a.edge_percent ?? -Infinity) ||
+        Number(b.final_score ?? -Infinity) - Number(a.final_score ?? -Infinity),
+    ),
+  }));
+}
+
+export function getBucketDisplayLabel(
+  row: ScanOpportunityRow,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  const isEn = locale === "en-US";
+  const { lower, upper } = getTargetRange(row);
+  if (lower != null && upper == null) {
+    const value = formatTemperatureValue(lower, tempSymbol);
+    return isEn ? `${value} or higher` : `${value} 以上`;
+  }
+  if (upper != null && lower == null) {
+    const value = formatTemperatureValue(upper, tempSymbol);
+    return isEn ? `${value} or lower` : `${value} 以下`;
+  }
+  if (lower != null && upper != null && Math.abs(lower - upper) > 0.01) {
+    return `${formatTemperatureValue(lower, tempSymbol)} ~ ${formatTemperatureValue(upper, tempSymbol)}`;
+  }
+  return formatThreshold(row, tempSymbol);
+}

frontend/components/dashboard/opportunity-model-summary.ts

@@ -0,0 +1,46 @@
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+import { formatTemperatureValue } from "@/lib/temperature-utils";
+
+export function formatModelSources(row: ScanOpportunityRow, tempSymbol?: string | null) {
+  const sources = row.model_cluster_sources || {};
+  return Object.entries(sources)
+    .filter(([, value]) => value != null && Number.isFinite(Number(value)))
+    .sort(([left], [right]) => left.localeCompare(right))
+    .map(([name, value]) => ({
+      name,
+      value: formatTemperatureValue(Number(value), tempSymbol, { digits: 1 }),
+    }));
+}
+
+export function formatModelClusterRange(
+  sources?: Record<string, number | null> | null,
+  tempSymbol?: string | null,
+) {
+  const values = Object.values(sources || {})
+    .map((value) => Number(value))
+    .filter((value) => Number.isFinite(value));
+  if (!values.length) return "--";
+  const low = Math.min(...values);
+  const high = Math.max(...values);
+  if (Math.abs(low - high) < 0.05) {
+    return formatTemperatureValue(low, tempSymbol, { digits: 1 });
+  }
+  return `${formatTemperatureValue(low, tempSymbol, { digits: 1 })} ~ ${formatTemperatureValue(high, tempSymbol, { digits: 1 })}`;
+}
+
+export function getModelSourceSummary(
+  row: ScanOpportunityRow,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  const sources = formatModelSources(row, tempSymbol);
+  if (!sources.length) {
+    return locale === "en-US"
+      ? "model cluster pending"
+      : "模型集群暂未回传";
+  }
+  const shown = sources.map((item) => `${item.name} ${item.value}`).join(" / ");
+  return locale === "en-US"
+    ? `all models: ${shown}`
+    : `全部模型：${shown}`;
+}

frontend/components/dashboard/opportunity-observation.ts

@@ -0,0 +1,328 @@
+import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
+import {
+  formatTemperatureValue,
+  normalizeTemperatureSymbol,
+} from "@/lib/temperature-utils";
+import {
+  formatAirportReportRead,
+  formatAirportWeatherRead,
+} from "./opportunity-airport-read";
+import { formatMinuteSpan } from "./opportunity-format";
+import { getTargetRange } from "./opportunity-target";
+
+export type ObservationPoint = { time?: string; temp?: number | null };
+
+export function normalizeObservationPoints(points?: ObservationPoint[] | null) {
+  if (!Array.isArray(points)) return [];
+  return points
+    .map((point) => ({
+      time: String(point?.time || "").trim(),
+      temp:
+        point?.temp != null && Number.isFinite(Number(point.temp))
+          ? Number(point.temp)
+          : null,
+    }))
+    .filter((point): point is { time: string; temp: number } =>
+      Boolean(point.time && point.temp != null),
+    )
+    .sort((a, b) => getObservationSortMinutes(a.time) - getObservationSortMinutes(b.time));
+}
+
+export function getObservationSortMinutes(time: string) {
+  const parsed = Date.parse(time);
+  if (Number.isFinite(parsed)) {
+    const date = new Date(parsed);
+    return date.getUTCHours() * 60 + date.getUTCMinutes();
+  }
+  const match = time.match(/(\d{1,2}):(\d{2})/);
+  if (!match) return Number.MAX_SAFE_INTEGER;
+  return Number(match[1]) * 60 + Number(match[2]);
+}
+
+export function formatPeakWindowTiming(row: ScanOpportunityRow, locale: string) {
+  const isEn = locale === "en-US";
+  const phase = String(row.window_phase || "").toLowerCase();
+  const label = String(row.peak_window_label || "").trim();
+  const untilStart =
+    row.minutes_until_peak_start != null && Number.isFinite(Number(row.minutes_until_peak_start))
+      ? Number(row.minutes_until_peak_start)
+      : null;
+  const untilEnd =
+    row.minutes_until_peak_end != null && Number.isFinite(Number(row.minutes_until_peak_end))
+      ? Number(row.minutes_until_peak_end)
+      : null;
+  const windowText = label ? `${isEn ? "peak window" : "峰值窗口"} ${label}` : isEn ? "peak window" : "峰值窗口";
+  if (phase === "active_peak" || (untilStart != null && untilStart <= 0 && untilEnd != null && untilEnd > 0)) {
+    return isEn ? `Currently inside the ${windowText}.` : `当前已进入${windowText}。`;
+  }
+  if (phase === "post_peak" || (untilEnd != null && untilEnd <= 0)) {
+    return isEn ? `The ${windowText} has passed.` : `${windowText}已结束。`;
+  }
+  if (untilStart != null && untilStart > 0) {
+    return isEn
+      ? `${windowText} starts in ${formatMinuteSpan(untilStart, locale)}.`
+      : `${windowText}尚未开始，约 ${formatMinuteSpan(untilStart, locale)} 后进入。`;
+  }
+  if (phase === "early_today" || phase === "setup_today") {
+    return isEn ? `Before the ${windowText}; latest METAR is not final peak evidence yet.` : `尚处峰值前，最新 METAR 还不能当作最终峰值证据。`;
+  }
+  return label ? (isEn ? `Reference ${windowText}.` : `参考${windowText}。`) : null;
+}
+
+export function firstNonEmptyPoints(...groups: Array<ReturnType<typeof normalizeObservationPoints>>) {
+  return groups.find((group) => group.length > 0) || [];
+}
+
+export function getMetarObservationContext(
+  row: ScanOpportunityRow,
+  detail: CityDetail | null,
+) {
+  const context = row.metar_context || {};
+  const metarToday = firstNonEmptyPoints(
+    normalizeObservationPoints(context.today_obs),
+    normalizeObservationPoints(row.metar_today_obs),
+  );
+  const detailMetarToday = normalizeObservationPoints(detail?.metar_today_obs);
+  const metarRecent = firstNonEmptyPoints(
+    normalizeObservationPoints(context.recent_obs),
+    normalizeObservationPoints(row.metar_recent_obs),
+  );
+  const detailMetarRecent = normalizeObservationPoints(detail?.metar_recent_obs);
+  const settlementToday = firstNonEmptyPoints(
+    normalizeObservationPoints(context.settlement_today_obs),
+    normalizeObservationPoints(row.settlement_today_obs),
+  );
+  const detailSettlementToday = normalizeObservationPoints(detail?.settlement_today_obs);
+
+  const primaryPoints =
+    metarToday.length
+      ? metarToday
+      : detailMetarToday.length
+        ? detailMetarToday
+        : metarRecent.length
+          ? metarRecent
+          : detailMetarRecent.length
+            ? detailMetarRecent
+            : settlementToday.length
+              ? settlementToday
+              : detailSettlementToday;
+  const trendPoints =
+    (metarRecent.length
+      ? metarRecent
+      : detailMetarRecent.length
+        ? detailMetarRecent
+        : primaryPoints.slice(-4));
+  const explicitLast = context.last_temp ?? row.metar_status?.last_temp ?? detail?.metar_status?.last_temp;
+  const lastPoint = primaryPoints[primaryPoints.length - 1] || null;
+  const maxPoint = primaryPoints.reduce<{ time: string; temp: number } | null>(
+    (best, point) => (!best || point.temp >= best.temp ? point : best),
+    null,
+  );
+  const trendFirst = trendPoints[0] || null;
+  const trendLast = trendPoints[trendPoints.length - 1] || null;
+  const trendDelta =
+    context.trend_delta != null && Number.isFinite(Number(context.trend_delta))
+      ? Number(context.trend_delta)
+      : trendFirst && trendLast && trendPoints.length >= 2
+        ? trendLast.temp - trendFirst.temp
+        : null;
+  const lastTemp =
+    explicitLast != null && Number.isFinite(Number(explicitLast))
+      ? Number(explicitLast)
+      : lastPoint?.temp ?? null;
+  const maxTemp =
+    context.max_temp != null && Number.isFinite(Number(context.max_temp))
+      ? Number(context.max_temp)
+      : maxPoint?.temp ?? null;
+  const stale =
+    context.stale_for_today === true ||
+    row.metar_status?.stale_for_today === true ||
+    detail?.metar_status?.stale_for_today === true;
+
+  return {
+    points: primaryPoints,
+    lastTime: String(context.last_time || lastPoint?.time || ""),
+    lastTemp,
+    maxTime: String(context.max_time || maxPoint?.time || ""),
+    maxTemp,
+    trendDelta,
+    stale,
+    station: context.station || detail?.risk?.icao || detail?.airport_current?.station_code || null,
+  };
+}
+
+export function getMetarGate(
+  row: ScanOpportunityRow,
+  detail: CityDetail | null,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  const isEn = locale === "en-US";
+  const side = String(row.side || "").toLowerCase();
+  const selectedDate = String(row.selected_date || "");
+  const localDate = String(row.local_date || detail?.local_date || "");
+  const futureContract = Boolean(selectedDate && localDate && selectedDate > localDate);
+  if (futureContract) return null;
+
+  const obs = getMetarObservationContext(row, detail);
+  const evidence: string[] = [];
+  const unit = normalizeTemperatureSymbol(tempSymbol);
+  const peakTiming = formatPeakWindowTiming(row, locale);
+  const airportReport = formatAirportReportRead(row, detail, locale, unit);
+  const airportWeatherRead = formatAirportWeatherRead(row, detail, locale);
+  if (peakTiming) evidence.push(peakTiming);
+  if (airportReport) evidence.push(airportReport);
+  if (airportWeatherRead) evidence.push(airportWeatherRead);
+  if (obs.lastTemp != null) {
+    evidence.push(
+      `${isEn ? "METAR latest" : "METAR 最新"} ${formatTemperatureValue(obs.lastTemp, unit, { digits: 1 })}${obs.lastTime ? ` @ ${obs.lastTime}` : ""}`,
+    );
+  }
+  if (obs.maxTemp != null) {
+    evidence.push(
+      `${isEn ? "METAR max" : "METAR 最高"} ${formatTemperatureValue(obs.maxTemp, unit, { digits: 1 })}${obs.maxTime ? ` @ ${obs.maxTime}` : ""}`,
+    );
+  }
+  if (obs.trendDelta != null) {
+    evidence.push(
+      `${isEn ? "Recent METAR delta" : "近端 METAR 变化"} ${formatTemperatureValue(obs.trendDelta, unit, { digits: 1 })}`,
+    );
+  }
+  if (obs.station) evidence.push(`${isEn ? "Station" : "站点"} ${obs.station}`);
+
+  if (obs.stale || !obs.points.length || obs.maxTemp == null) {
+    return {
+      decision: "downgrade" as const,
+      reason: isEn
+        ? "AI has no same-day METAR confirmation yet, so this bucket remains forecast-only."
+        : "AI 还没有拿到同日 METAR 确认，该桶暂时只能作为预测映射。",
+      evidence,
+    };
+  }
+
+  const { lower, upper } = getTargetRange(row);
+  if (lower == null && upper == null) {
+    return {
+      decision: "watchlist" as const,
+      reason: isEn
+        ? "AI has METAR data, but the contract threshold cannot be mapped cleanly to a bucket."
+        : "AI 已读取 METAR，但该合约阈值无法稳定映射到温度桶。",
+      evidence,
+    };
+  }
+
+  const epsilon = String(unit).toUpperCase().includes("F") ? 0.7 : 0.4;
+  const trendDelta = obs.trendDelta;
+  const isNotRising = trendDelta != null && trendDelta <= epsilon;
+  const isFalling = trendDelta != null && trendDelta <= -epsilon;
+  const phase = String(row.window_phase || "").toLowerCase();
+  const remaining =
+    row.remaining_window_minutes != null && Number.isFinite(Number(row.remaining_window_minutes))
+      ? Number(row.remaining_window_minutes)
+      : null;
+  const minutesUntilPeakStart =
+    row.minutes_until_peak_start != null && Number.isFinite(Number(row.minutes_until_peak_start))
+      ? Number(row.minutes_until_peak_start)
+      : null;
+  const lateWindow =
+    phase === "active_peak" ||
+    phase === "post_peak" ||
+    (remaining != null && remaining <= 180);
+  const beforePeak =
+    phase === "early_today" ||
+    phase === "setup_today" ||
+    phase === "tomorrow" ||
+    phase === "week_ahead" ||
+    (minutesUntilPeakStart != null && minutesUntilPeakStart > 0);
+  const aboveUpper = upper != null && obs.maxTemp > upper + epsilon;
+  const belowLower = lower != null && obs.maxTemp < lower - epsilon;
+  const insideBucket =
+    (lower == null || obs.maxTemp >= lower - epsilon) &&
+    (upper == null || obs.maxTemp <= upper + epsilon);
+
+  if (side === "no") {
+    if (aboveUpper) {
+      return {
+        decision: "approve" as const,
+        reason: isEn
+          ? "METAR max has already moved above this bucket, so AI marks the NO bucket as observation-supported."
+          : "METAR 实测最高已越过目标桶上沿，AI 判断 NO 桶有实测支撑。",
+        evidence,
+      };
+    }
+    if (belowLower && (lateWindow || isFalling || isNotRising)) {
+      if (beforePeak && !lateWindow) {
+        return {
+          decision: "watchlist" as const,
+          reason: isEn
+            ? "The peak window has not arrived, so a still-low METAR path cannot confirm this NO bucket yet; AI keeps it on watch."
+            : "峰值窗口尚未到来，METAR 暂未触达不能直接确认 NO 桶，AI 先列观察。",
+          evidence,
+        };
+      }
+      return {
+        decision: "approve" as const,
+        reason: isEn
+          ? "METAR max remains below this bucket and recent observations are not strengthening, so AI favors the NO bucket."
+          : "METAR 最高仍低于目标桶且近期走势不强，AI 倾向 NO 桶。",
+        evidence,
+      };
+    }
+    if (insideBucket && lateWindow && isNotRising) {
+      return {
+        decision: "downgrade" as const,
+        reason: isEn
+          ? "METAR max is still close to this bucket, so AI cannot treat the NO bucket as confirmed."
+          : "METAR 最高仍贴近目标桶，AI 不能把 NO 桶视为已确认。",
+        evidence,
+      };
+    }
+  }
+
+  if (side === "yes") {
+    if (aboveUpper) {
+      return {
+        decision: "veto" as const,
+        reason: isEn
+          ? "METAR max has already exceeded the bucket, so AI marks this YES bucket as outside the observed path."
+          : "METAR 实测最高已越过目标桶上沿，AI 判断该 YES 桶已偏离实测路径。",
+        evidence,
+      };
+    }
+    if (belowLower && (lateWindow || isFalling || isNotRising)) {
+      if (beforePeak && !lateWindow) {
+        return {
+          decision: "watchlist" as const,
+          reason: isEn
+            ? "The peak window has not arrived, so METAR not reaching the bucket only means this bucket still needs peak-window confirmation."
+            : "峰值窗口尚未到来，METAR 未触达目标桶只能说明仍需等待峰值验证，AI 暂列观察。",
+          evidence,
+        };
+      }
+      return {
+        decision: "downgrade" as const,
+        reason: isEn
+          ? "METAR max has not reached the bucket and recent observations are weak, so AI downgrades the YES bucket."
+          : "METAR 最高仍未触达目标桶且走势不强，AI 将 YES 桶降级观察。",
+        evidence,
+      };
+    }
+    if (insideBucket) {
+      return {
+        decision: "approve" as const,
+        reason: isEn
+          ? "METAR max is inside the target bucket, so AI sees observation support while monitoring an overshoot."
+          : "METAR 实测最高已落入目标桶，AI 认为 YES 桶有实测依据，但仍需防止继续升穿上沿。",
+        evidence,
+      };
+    }
+  }
+
+  return {
+    decision: "watchlist" as const,
+    reason: isEn
+      ? "METAR does not give a clean final confirmation yet, so AI keeps this as watchlist."
+      : "METAR 还没有给出干净的最终确认，AI 暂列观察。",
+    evidence,
+  };
+}

frontend/components/dashboard/opportunity-target.ts

@@ -0,0 +1,48 @@
+import type { ScanOpportunityRow } from "@/lib/dashboard-types";
+import { normalizeTemperatureLabel } from "@/lib/temperature-utils";
+
+export function normalizeBucketLabel(value?: string | null, tempSymbol?: string | null) {
+  return normalizeTemperatureLabel(value, tempSymbol)
+    .toLowerCase()
+    .replace(/\s+/g, "")
+    .replace(/℃/g, "°c");
+}
+
+export function extractNumbers(value?: string | null) {
+  return Array.from(String(value || "").matchAll(/-?\d+(?:\.\d+)?/g)).map((match) =>
+    Number(match[0]),
+  );
+}
+
+export function getTargetRange(row: ScanOpportunityRow) {
+  const lower =
+    row.target_lower != null && Number.isFinite(Number(row.target_lower))
+      ? Number(row.target_lower)
+      : null;
+  const upper =
+    row.target_upper != null && Number.isFinite(Number(row.target_upper))
+      ? Number(row.target_upper)
+      : null;
+  if (lower != null || upper != null) return { lower, upper };
+
+  const rawLabel = String(row.target_label || row.action || "");
+  const numbers = extractNumbers(rawLabel);
+  if (numbers.length >= 2) {
+    return { lower: Math.min(numbers[0], numbers[1]), upper: Math.max(numbers[0], numbers[1]) };
+  }
+  const value =
+    row.target_threshold ??
+    row.target_value ??
+    (numbers.length ? numbers[0] : null);
+  if (value == null || !Number.isFinite(Number(value))) {
+    return { lower: null, upper: null };
+  }
+  const numeric = Number(value);
+  if (/(\+|above|higher|or\s+higher|>=|≥|以上)/i.test(rawLabel)) {
+    return { lower: numeric, upper: null };
+  }
+  if (/(below|or\s+below|<=|≤|以下)/i.test(rawLabel)) {
+    return { lower: null, upper: numeric };
+  }
+  return { lower: numeric, upper: numeric };
+}

frontend/components/dashboard/opportunity-v4-decision.ts

@@ -0,0 +1,293 @@
+import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
+import {
+  formatTemperatureValue,
+  normalizeTemperatureSymbol,
+} from "@/lib/temperature-utils";
+import { formatAirportReportRead } from "./opportunity-airport-read";
+import { getLocalizedRowText } from "./opportunity-copy";
+import { getBucketDisplayLabel } from "./opportunity-groups";
+import { getMetarGate } from "./opportunity-observation";
+import { getTargetRange } from "./opportunity-target";
+import {
+  getForecastContractFit,
+  getForecastRangeLabel,
+  getPaceDecisionTail,
+} from "./opportunity-v4-forecast";
+import type { V4CityForecast, V4TradeDecision } from "./opportunity-v4-types";
+
+export function getV4DecisionLabel(
+  decision: V4TradeDecision["decision"],
+  locale: string,
+) {
+  if (locale === "en-US") {
+    if (decision === "approve") return "AI Confirmed";
+    if (decision === "veto") return "AI Outside";
+    if (decision === "downgrade") return "AI Downgrade";
+    return "AI Watch";
+  }
+  if (decision === "approve") return "AI 确认";
+  if (decision === "veto") return "AI 区间外";
+  if (decision === "downgrade") return "AI 降级";
+  return "AI 观察";
+}
+
+export function getV4TradeDecision(
+  row: ScanOpportunityRow,
+  detail: CityDetail | null,
+  locale: string,
+  edgePercent?: number | null,
+  tempSymbol?: string | null,
+): V4TradeDecision {
+  const isEn = locale === "en-US";
+  const backendMetarDecision = String(row.v4_metar_decision || "").toLowerCase();
+  const backendMetarReason =
+    getLocalizedRowText(row, locale, row.v4_metar_reason_zh, row.v4_metar_reason_en) ||
+    null;
+  const metarGate = getMetarGate(row, detail, locale, tempSymbol);
+  const aiDecision = String(row.ai_decision || "").toLowerCase();
+  const aiReason =
+    getLocalizedRowText(row, locale, row.ai_reason_zh, row.ai_reason_en) ||
+    getLocalizedRowText(
+      row,
+      locale,
+      row.ai_watchlist_reason_zh,
+      row.ai_watchlist_reason_en,
+    );
+
+  let decision: V4TradeDecision["decision"] =
+    backendMetarDecision === "veto" ||
+    backendMetarDecision === "downgrade" ||
+    backendMetarDecision === "approve" ||
+    backendMetarDecision === "watchlist"
+      ? (backendMetarDecision as V4TradeDecision["decision"])
+      : metarGate?.decision ||
+        (aiDecision === "veto" || aiDecision === "downgrade" || aiDecision === "approve" || aiDecision === "watchlist"
+          ? (aiDecision as V4TradeDecision["decision"])
+          : Number(edgePercent || 0) >= 20
+            ? "watchlist"
+            : "watchlist");
+
+  if (metarGate?.decision === "veto") decision = "veto";
+  if (metarGate?.decision === "watchlist" && backendMetarDecision === "downgrade") {
+    decision = "watchlist";
+  }
+  if (metarGate?.decision === "downgrade" && decision !== "veto") decision = "downgrade";
+  if (metarGate?.decision === "approve" && decision !== "veto" && decision !== "downgrade") {
+    decision = "approve";
+  }
+
+  const reason =
+    (metarGate?.decision === "watchlist" ? metarGate.reason : null) ||
+    backendMetarReason ||
+    metarGate?.reason ||
+    aiReason ||
+    (isEn
+      ? "AI keeps this on watch until METAR and the full weather-model cluster align."
+      : "AI 会等 METAR 与全量天气模型集群对齐后再确认。");
+  const airportReport = formatAirportReportRead(
+    row,
+    detail,
+    locale,
+    normalizeTemperatureSymbol(tempSymbol),
+  );
+  const metarSummary =
+    metarGate?.evidence?.filter((item) => item !== airportReport).join(" · ") || null;
+  return {
+    decision,
+    label: getV4DecisionLabel(decision, locale),
+    tone: decision,
+    reason,
+    metarSummary,
+    airportReport,
+    metarEvidence: metarGate?.evidence || [],
+  };
+}
+
+export function getForecastFitMeta(
+  fit: ReturnType<typeof getForecastContractFit>,
+  locale: string,
+) {
+  const isEn = locale === "en-US";
+  const tone = String(fit.tone || "watchlist");
+  if (tone === "approve" || tone === "core") {
+    return {
+      label: isEn ? "Clear signal" : "方向明确",
+      tone: "approve",
+    };
+  }
+  if (tone === "veto" || tone === "outside") {
+    return {
+      label: isEn ? "Outside AI range" : "偏离 AI 区间",
+      tone: "veto",
+    };
+  }
+  if (tone === "downgrade") {
+    return {
+      label: isEn ? "Downgraded" : "降级观察",
+      tone: "downgrade",
+    };
+  }
+  return {
+    label: isEn ? "Need peak confirmation" : "等待峰值确认",
+    tone: "watchlist",
+  };
+}
+
+export function getThresholdDecision(
+  row: ScanOpportunityRow,
+  forecast: V4CityForecast,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  const isEn = locale === "en-US";
+  const unit = normalizeTemperatureSymbol(tempSymbol);
+  const { lower, upper } = getTargetRange(row);
+  const predicted = forecast.predicted;
+  const low = forecast.low;
+  const high = forecast.high;
+  const tolerance = unit === "°F" ? 1 : 0.5;
+  const cautionBand = unit === "°F" ? 2 : 1;
+  const format = (value: number) => formatTemperatureValue(value, unit, { digits: 0 });
+  const paceTolerance = unit === "°F" ? 1 : 0.6;
+  const paceTail = getPaceDecisionTail(forecast, locale, unit);
+  const paceAdjustedHigh =
+    forecast.paceAdjustedHigh != null && Number.isFinite(Number(forecast.paceAdjustedHigh))
+      ? Number(forecast.paceAdjustedHigh)
+      : null;
+  const runningHot =
+    forecast.paceDelta != null && Number(forecast.paceDelta) >= paceTolerance;
+  const runningCold =
+    forecast.paceDelta != null && Number(forecast.paceDelta) <= -paceTolerance;
+  const confidence = (() => {
+    const values = Object.values(row.model_cluster_sources || {})
+      .map((value) => Number(value))
+      .filter((value) => Number.isFinite(value));
+    if (!values.length || predicted == null) return isEn ? "Medium" : "中";
+    const near = values.filter((value) => Math.abs(value - predicted) <= cautionBand).length;
+    const ratio = near / values.length;
+    if (ratio >= 0.75) return isEn ? "High" : "高";
+    if (ratio >= 0.45) return isEn ? "Medium" : "中";
+    return isEn ? "Low" : "低";
+  })();
+
+  if (predicted == null || (lower == null && upper == null)) {
+    return {
+      confidence,
+      headline: isEn ? "Conclusion pending" : "结论待确认",
+      relation: isEn ? "Await stable forecast" : "等待稳定预测",
+      summary: isEn
+        ? "AI does not have a stable high-temperature center yet."
+        : "AI 还没有稳定的最高温中枢，先不输出边界结论。",
+      tone: "watchlist" as const,
+    };
+  }
+
+  if (lower != null && upper == null) {
+    const threshold = format(lower);
+    if (
+      predicted < lower - cautionBand &&
+      (high == null || high < lower + tolerance) &&
+      (paceAdjustedHigh == null || paceAdjustedHigh < lower - tolerance)
+    ) {
+      return {
+        confidence,
+        headline: isEn ? `Unlikely to reach ${threshold}` : `不太可能达到 ${threshold}`,
+        relation: isEn ? "Clearly below threshold" : "明显低于阈值",
+        summary: isEn
+          ? `Forecast center is ${formatTemperatureValue(predicted, unit, { digits: 1 })}, below the ${threshold} boundary with no clear breakout signal.${paceTail}`
+          : `温度中枢约 ${formatTemperatureValue(predicted, unit, { digits: 1 })}，低于 ${threshold} 阈值，暂时缺乏明显突破信号。${paceTail}`,
+        tone: "veto" as const,
+      };
+    }
+    if (
+      predicted >= lower + tolerance &&
+      (low == null || low >= lower - tolerance) &&
+      !runningCold &&
+      (paceAdjustedHigh == null || paceAdjustedHigh >= lower - tolerance)
+    ) {
+      return {
+        confidence,
+        headline: isEn ? `Likely to reach ${threshold}` : `大概率达到 ${threshold}`,
+        relation: isEn ? "Above threshold" : "高于阈值",
+        summary: isEn
+          ? `Forecast center is ${formatTemperatureValue(predicted, unit, { digits: 1 })}, already above the ${threshold} boundary.${paceTail}`
+          : `温度中枢约 ${formatTemperatureValue(predicted, unit, { digits: 1 })}，已经高于 ${threshold} 阈值。${paceTail}`,
+        tone: "approve" as const,
+      };
+    }
+    return {
+      confidence,
+      headline: isEn ? `${threshold} boundary is risky` : `${threshold} 边界偏危险`,
+      relation: isEn ? "Near threshold" : "接近阈值（存在突破风险）",
+      summary: isEn
+        ? `Forecast center is ${formatTemperatureValue(predicted, unit, { digits: 1 })}; the ${threshold} boundary still needs peak-window confirmation.${paceTail}`
+        : `温度中枢约 ${formatTemperatureValue(predicted, unit, { digits: 1 })}，接近 ${threshold} 阈值，仍要等峰值窗口确认。${paceTail}`,
+      tone: "watchlist" as const,
+    };
+  }
+
+  if (upper != null && lower == null) {
+    const threshold = format(upper);
+    if (
+      predicted <= upper - tolerance &&
+      (high == null || high <= upper + tolerance) &&
+      !runningHot &&
+      (paceAdjustedHigh == null || paceAdjustedHigh <= upper + tolerance)
+    ) {
+      return {
+        confidence,
+        headline: isEn ? `Likely to stay below ${threshold}` : `大概率不超过 ${threshold}`,
+        relation: isEn ? "Clearly below threshold" : "明显低于阈值",
+        summary: isEn
+          ? `Forecast center is ${formatTemperatureValue(predicted, unit, { digits: 1 })}, below the ${threshold} boundary.${paceTail}`
+          : `温度中枢约 ${formatTemperatureValue(predicted, unit, { digits: 1 })}，低于 ${threshold} 阈值。${paceTail}`,
+        tone: "approve" as const,
+      };
+    }
+    if (
+      predicted > upper + cautionBand &&
+      (low == null || low > upper - tolerance) &&
+      (paceAdjustedHigh == null || paceAdjustedHigh > upper + tolerance)
+    ) {
+      return {
+        confidence,
+        headline: isEn ? `Likely above ${threshold}` : `大概率超过 ${threshold}`,
+        relation: isEn ? "Above threshold" : "高于阈值",
+        summary: isEn
+          ? `Forecast center is ${formatTemperatureValue(predicted, unit, { digits: 1 })}, above the ${threshold} boundary.${paceTail}`
+          : `温度中枢约 ${formatTemperatureValue(predicted, unit, { digits: 1 })}，高于 ${threshold} 阈值。${paceTail}`,
+        tone: "veto" as const,
+      };
+    }
+    return {
+      confidence,
+      headline: isEn ? `${threshold} boundary is risky` : `${threshold} 边界偏危险`,
+      relation: isEn ? "Near threshold" : "接近阈值（存在突破风险）",
+      summary: isEn
+        ? `Forecast center is ${formatTemperatureValue(predicted, unit, { digits: 1 })}; the boundary still needs peak-window confirmation.${paceTail}`
+        : `温度中枢约 ${formatTemperatureValue(predicted, unit, { digits: 1 })}，仍需等待峰值窗口确认边界。${paceTail}`,
+      tone: "watchlist" as const,
+    };
+  }
+
+  const bucket = getBucketDisplayLabel(row, locale, unit);
+  const bucketReference = paceAdjustedHigh ?? predicted;
+  const inside =
+    (lower == null || bucketReference >= lower - tolerance) &&
+    (upper == null || bucketReference <= upper + tolerance);
+  return {
+    confidence,
+    headline: inside
+      ? isEn
+        ? `Likely inside ${bucket}`
+        : `大概率落在 ${bucket}`
+      : isEn
+        ? `Unlikely inside ${bucket}`
+        : `不太可能落在 ${bucket}`,
+    relation: inside ? (isEn ? "Inside target bucket" : "处于目标桶") : (isEn ? "Outside target bucket" : "偏离目标桶"),
+    summary: isEn
+      ? `Forecast center is ${formatTemperatureValue(predicted, unit, { digits: 1 })}; use this bucket only as the market mapping of the city high.${paceTail}`
+      : `温度中枢约 ${formatTemperatureValue(predicted, unit, { digits: 1 })}，该温度桶只用于映射城市最高温判断。${paceTail}`,
+    tone: inside ? ("approve" as const) : ("veto" as const),
+  };
+}

frontend/components/dashboard/opportunity-v4-forecast.ts

@@ -0,0 +1,250 @@
+import type { CityDetail, ScanOpportunityRow } from "@/lib/dashboard-types";
+import { getTodayPaceView } from "@/lib/pace-utils";
+import {
+  formatTemperatureValue,
+  normalizeTemperatureSymbol,
+} from "@/lib/temperature-utils";
+import {
+  formatAirportReportRead,
+  formatAirportWeatherRead,
+} from "./opportunity-airport-read";
+import { getLocalizedRowText } from "./opportunity-copy";
+import { formatPeakWindowTiming } from "./opportunity-observation";
+import { getModelSourceSummary } from "./opportunity-model-summary";
+import { getTargetRange } from "./opportunity-target";
+import type { OpportunityGroup } from "./opportunity-groups";
+import type { V4CityForecast } from "./opportunity-v4-types";
+
+export function getPaceDeviationRead(
+  detail: CityDetail | null,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  if (!detail) return null;
+  const paceView = getTodayPaceView(detail, locale === "en-US" ? "en-US" : "zh-CN");
+  if (!paceView) return null;
+  const unit = normalizeTemperatureSymbol(tempSymbol || detail.temp_symbol);
+  const observed = formatTemperatureValue(paceView.observedNow, unit, { digits: 1 });
+  const expected = formatTemperatureValue(paceView.expectedNow, unit, { digits: 1 });
+  const delta = `${paceView.delta > 0 ? "+" : ""}${paceView.delta.toFixed(1)}${unit}`;
+  const isEn = locale === "en-US";
+  const toneText =
+    paceView.biasTone === "warm"
+      ? isEn
+        ? "running hotter"
+        : "偏热"
+      : paceView.biasTone === "cold"
+        ? isEn
+          ? "running cooler"
+          : "偏冷"
+        : isEn
+          ? "tracking"
+          : "基本跟踪";
+  return {
+    adjustedHigh: paceView.paceAdjustedHigh,
+    delta: paceView.delta,
+    label: paceView.badge,
+    read: isEn
+      ? `Observed path vs DEB curve: ${observed} now vs ${expected} expected, ${delta} (${toneText}).`
+      : `实测路径对比 DEB 曲线：当前 ${observed}，同刻预期 ${expected}，偏差 ${delta}（${toneText}）。`,
+    tone: paceView.biasTone,
+  };
+}
+
+export function getPaceSignalLabel(forecast: V4CityForecast, locale: string, tempSymbol?: string | null) {
+  const isEn = locale === "en-US";
+  if (forecast.paceDelta == null || !Number.isFinite(Number(forecast.paceDelta))) {
+    return isEn ? "Path pending" : "路径待确认";
+  }
+  const unit = normalizeTemperatureSymbol(tempSymbol);
+  const delta = `${forecast.paceDelta > 0 ? "+" : ""}${Number(forecast.paceDelta).toFixed(1)}${unit}`;
+  if (forecast.paceTone === "warm") return isEn ? `Hot path ${delta}` : `实测偏热 ${delta}`;
+  if (forecast.paceTone === "cold") return isEn ? `Cool path ${delta}` : `实测偏冷 ${delta}`;
+  return isEn ? `On path ${delta}` : `路径跟踪 ${delta}`;
+}
+
+export function getPaceDecisionTail(forecast: V4CityForecast, locale: string, tempSymbol?: string | null) {
+  if (forecast.paceDelta == null || !Number.isFinite(Number(forecast.paceDelta))) return "";
+  const isEn = locale === "en-US";
+  const unit = normalizeTemperatureSymbol(tempSymbol);
+  const delta = `${forecast.paceDelta > 0 ? "+" : ""}${Number(forecast.paceDelta).toFixed(1)}${unit}`;
+  if (forecast.paceTone === "warm") {
+    return isEn
+      ? ` Observations are running ${delta} above the DEB path, so upside boundaries need extra caution.`
+      : ` 实测比 DEB 路径偏高 ${delta}，上方阈值要额外谨慎。`;
+  }
+  if (forecast.paceTone === "cold") {
+    return isEn
+      ? ` Observations are running ${delta} below the DEB path, which weakens upside breakout odds.`
+      : ` 实测比 DEB 路径偏低 ${delta}，上破概率需要下修。`;
+  }
+  return isEn
+    ? " Observations are still tracking the DEB path."
+    : " 实测仍基本跟踪 DEB 路径。";
+}
+
+export function median(values: number[]) {
+  if (!values.length) return null;
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+}
+
+export function getV4CityForecast(
+  row: ScanOpportunityRow,
+  group: OpportunityGroup,
+  detail: CityDetail | null,
+  locale: string,
+  tempSymbol?: string | null,
+): V4CityForecast {
+  const isEn = locale === "en-US";
+  const aiPredicted =
+    row.ai_predicted_max != null && Number.isFinite(Number(row.ai_predicted_max))
+      ? Number(row.ai_predicted_max)
+      : null;
+  const aiLow =
+    row.ai_predicted_low != null && Number.isFinite(Number(row.ai_predicted_low))
+      ? Number(row.ai_predicted_low)
+      : null;
+  const aiHigh =
+    row.ai_predicted_high != null && Number.isFinite(Number(row.ai_predicted_high))
+      ? Number(row.ai_predicted_high)
+      : null;
+  const modelValues = Object.values(row.model_cluster_sources || {})
+    .map((value) => Number(value))
+    .filter((value) => Number.isFinite(value));
+  const fallbackPredicted =
+    aiPredicted ??
+    (row.deb_prediction != null && Number.isFinite(Number(row.deb_prediction))
+      ? Number(row.deb_prediction)
+      : median(modelValues));
+  const fallbackLow = aiLow ?? (modelValues.length ? Math.min(...modelValues) : fallbackPredicted);
+  const fallbackHigh = aiHigh ?? (modelValues.length ? Math.max(...modelValues) : fallbackPredicted);
+  const peakWindow =
+    getLocalizedRowText(row, locale, row.ai_peak_window_zh, row.ai_peak_window_en) ||
+    formatPeakWindowTiming(row, locale);
+  const airportRead =
+    getLocalizedRowText(
+      row,
+      locale,
+      row.ai_airport_metar_read_zh,
+      row.ai_airport_metar_read_en,
+    ) || formatAirportReportRead(row, detail, locale, tempSymbol);
+  const weatherRead = formatAirportWeatherRead(row, detail, locale);
+  const paceRead = getPaceDeviationRead(detail, locale, tempSymbol);
+  const modelNote =
+    row.ai_city_model_cluster_note ||
+    row.ai_model_cluster_note ||
+    getModelSourceSummary(row, locale, tempSymbol);
+  const reason =
+    getLocalizedRowText(row, locale, row.ai_forecast_reason_zh, row.ai_forecast_reason_en) ||
+    getLocalizedRowText(row, locale, row.ai_city_thesis_zh, row.ai_city_thesis_en) ||
+    (fallbackPredicted != null
+      ? isEn
+        ? `${group.cityName} final high is centered near ${formatTemperatureValue(fallbackPredicted, tempSymbol, { digits: 1 })}; market temperature buckets are only mapped against that forecast range.`
+        : `${group.cityName} 最终最高温先以 ${formatTemperatureValue(fallbackPredicted, tempSymbol, { digits: 1 })} 附近为中枢，市场温度桶只用于对照 AI 预测区间。`
+      : null);
+  return {
+    predicted: fallbackPredicted,
+    low: fallbackLow,
+    high: fallbackHigh,
+    confidence: row.ai_forecast_confidence || row.ai_city_confidence,
+    peakWindow,
+    airportRead,
+    weatherRead,
+    paceRead: paceRead?.read || null,
+    paceTone: paceRead?.tone || null,
+    paceDelta: paceRead?.delta ?? null,
+    paceAdjustedHigh: paceRead?.adjustedHigh ?? null,
+    reason,
+    modelNote,
+    source: aiPredicted != null ? "ai" : "fallback",
+  };
+}
+
+export function getForecastRangeLabel(forecast: V4CityForecast, tempSymbol?: string | null) {
+  if (forecast.low == null && forecast.high == null) return "--";
+  if (forecast.low != null && forecast.high != null) {
+    if (Math.abs(forecast.low - forecast.high) < 0.05) {
+      return formatTemperatureValue(forecast.low, tempSymbol, { digits: 1 });
+    }
+    return `${formatTemperatureValue(forecast.low, tempSymbol, { digits: 1 })} ~ ${formatTemperatureValue(forecast.high, tempSymbol, { digits: 1 })}`;
+  }
+  if (forecast.low != null) return `>= ${formatTemperatureValue(forecast.low, tempSymbol, { digits: 1 })}`;
+  return `<= ${formatTemperatureValue(Number(forecast.high), tempSymbol, { digits: 1 })}`;
+}
+
+export function getForecastContractFit(
+  row: ScanOpportunityRow,
+  forecast: V4CityForecast,
+  locale: string,
+  tempSymbol?: string | null,
+) {
+  const isEn = locale === "en-US";
+  const explicitMatch = String(row.ai_forecast_match || "").toLowerCase();
+  const explicitReason = getLocalizedRowText(
+    row,
+    locale,
+    row.ai_forecast_match_reason_zh,
+    row.ai_forecast_match_reason_en,
+  );
+  if (explicitMatch && explicitReason) {
+    return {
+      label:
+        explicitMatch === "core"
+          ? isEn ? "Core bucket" : "核心桶"
+          : explicitMatch === "outside"
+            ? isEn ? "Outside forecast" : "预测区间外"
+            : explicitMatch === "edge"
+              ? isEn ? "Boundary bucket" : "边界桶"
+              : isEn ? "Watch" : "观察",
+      tone: explicitMatch === "core" ? "approve" : explicitMatch === "outside" ? "veto" : "watchlist",
+      reason: explicitReason,
+    };
+  }
+
+  const { lower, upper } = getTargetRange(row);
+  const predicted = forecast.predicted;
+  if (predicted == null || (lower == null && upper == null)) {
+    return {
+      label: isEn ? "Await forecast" : "等待预测",
+      tone: "watchlist",
+      reason: isEn ? "AI has no stable max-temperature center yet." : "AI 还没有稳定的最高温中枢。",
+    };
+  }
+  const unit = normalizeTemperatureSymbol(tempSymbol);
+  const tolerance = String(unit).toUpperCase().includes("F") ? 1.0 : 0.5;
+  const inside =
+    (lower == null || predicted >= lower - tolerance) &&
+    (upper == null || predicted <= upper + tolerance);
+  const rangeOverlaps =
+    forecast.low != null &&
+    forecast.high != null &&
+    (lower == null || forecast.high >= lower - tolerance) &&
+    (upper == null || forecast.low <= upper + tolerance);
+  if (inside) {
+    return {
+      label: isEn ? "Core bucket" : "核心桶",
+      tone: "approve",
+      reason: isEn
+        ? `AI max-temperature center ${formatTemperatureValue(predicted, unit, { digits: 1 })} sits inside this bucket.`
+        : `AI 最高温中枢 ${formatTemperatureValue(predicted, unit, { digits: 1 })} 落在这个温度桶内。`,
+    };
+  }
+  if (rangeOverlaps) {
+    return {
+      label: isEn ? "Boundary bucket" : "边界桶",
+      tone: "watchlist",
+      reason: isEn
+        ? `This bucket touches the AI interval ${getForecastRangeLabel(forecast, unit)}, but is not the center.`
+        : `该桶触及 AI 区间 ${getForecastRangeLabel(forecast, unit)}，但不是预测中枢。`,
+    };
+  }
+  return {
+    label: isEn ? "Outside forecast" : "预测区间外",
+    tone: "veto",
+    reason: isEn
+      ? `This bucket is outside the AI max-temperature interval ${getForecastRangeLabel(forecast, unit)}.`
+      : `该桶位于 AI 最高温区间 ${getForecastRangeLabel(forecast, unit)} 之外。`,
+  };
+}