Feel.Trading — 前端重構設計 Briefing

Feel.Trading：人類直覺的量化驗證平台。用戶用口語描述交易感覺 → Claude AI 歸因分解 → 歷史回測驗證 → 自動執行簡擬交易。

• 核心流程：口語輸入 → AI 條件化 → 回測 → 創建策略 → 背景監控 → 模擬/實盤執行
• 目標用戶：初階到中階的加密貨幣/貴金屬交易者，想把「盤感」量化驗證
• 語言：繁體中文為主，英文版準備中
• 支援標的：12 個主要（10 crypto + XAU/XAG），掃描器覆蓋 154 個 USDT 交易對

src/components/
├── common/           Sidebar, MobileHeader, UserMenu, ThemeToggle, LanguageSelector, QueryProvider, ThemeProvider
├── chat/             BacktestCard, RealtimeCard, ScriptBacktestCard, ChainBacktestCard, MartingaleCard,
│                     EducationCard, ChatBubble, ChatRightPanel, TradeChart, GlossaryPopover, TypingIndicator
├── wizard/           WizardBuilder (5-step), StepCoinConfig, StepSignals, StepExecution, StepExit, StepPreview,
│                     StrategyTemplateModal, ConditionCard, ChipAccordion, IndicatorDetailPanel
├── strategy/         StrategyList, StrategyDetail, PositionsTable, TradeHistoryTable, PerformancePanel,
│                     CloneStrategyModal
├── scanner/          ScannerDashboard（含 timeframe 切換、預設 chips、排序、幣種表、詳情抽屜）
├── dashboard/        CycleDashboard, PnLChart, StrategyCard
├── backtest/         WinRateChart, ReturnCurve, HoldPeriodTable, InvestmentSimulator, EnrichedOccurrencesTable
├── live/             DashboardCards, BotExecutionList, ExecutionLog
├── admin/            AdminSidebar, StatsCard
└── LogoMinimalWeb3   動畫 Logo

目前系統的語意色（可以重新定義，但保留這些語意概念）：

• 多頭 / 上漲：藍色系（目前 #3B82F6）— 不用綠色，因為亞洲市場習慣紅漲綠跌，用藍色做多頭可避免誤解
• 空頭 / 下跌：紅色系（目前 #EF4444）
• 強調 / 警告：金色/琥珀（目前 #F59E0B，呼應 Binance 黃）
• Dark 背景三層：最深（bg）/ 卡片 / 輸入框
• Light 背景：off-white 避免刺眼，卡片用純白+陰影

請 AI 針對每個提案交付：

1. 色彩系統 JSON / CSS variables（light + dark 雙套）
2. 字型與 typography scale
3. 間距與圓角規範（spacing scale / radius scale）
4. 核心元件示意：Button（primary/secondary/ghost/danger）、Card、Badge、Chip、Input、Modal、Tab、Toast
5. 3 個關鍵頁面的 mockup（建議 /chat、/scanner、/strategy）— 可以是 HTML+Tailwind、Figma、或圖片
6. 動畫規範：duration / easing / 何時用何種動畫
7. 響應式斷點示意：桌機、平板、手機各一張

你是資深產品設計師 + 前端工程師。請為「Feel.Trading」這個 AI 交易回測平台設計一套完整的前端視覺系統。

【專案定位】
人類直覺量化驗證平台，目標用戶是初中階加密貨幣/貴金屬交易者。
核心流程：口語描述交易感覺 → AI 歸因分解 → 歷史回測 → 自動執行。
語言：繁體中文為主。

【技術棧（不可更改）】
- Next.js 16 (App Router) + Tailwind CSS 4
- Framer Motion + Recharts + next-themes
- Zustand + React Query + NextAuth v5
- 圖示：lucide-react

【23 個路由頁面】
核心：/ /login /chat /strategy /scanner /scanner/[filter] /showcase /cycle /live /backtest/[id] /trade-chart /settings
Admin：/admin /admin/users /admin/strategies /admin/logs /admin/wild-factors /admin/analytics /admin/activity
工具：/dashboard /simulate /logo-preview /test-strategies

（每頁詳細按鈕清單見附件 DESIGN_BRIEF.html）

【硬性要求】
1. 保留所有現有功能與按鈕（不減少）
2. 提升視覺層次與資訊密度
3. 手機優先響應式（iPhone SE 375px 起）
4. 動畫流暢克制（禁止過度裝飾）
5. Light + Dark 雙主題，用 CSS variables
6. 多頭用藍色、空頭用紅色（亞洲市場 convention）
7. 主強調色延續金色/琥珀系

【參考產品】
- TradingView：圖表、資訊密度
- Binance：金色 CTA、資料表
- CoinGecko：Light mode 範本、排行榜
- 非小號 Feixiaohao：中文排版、數字格式

【請交付】
1. 色彩 tokens（light + dark CSS variables）
2. Typography scale + 字型 stack（含中文）
3. Spacing / Radius scale
4. 核心元件組：Button / Card / Badge / Chip / Input / Modal / Tab / Toast
5. 3 個關鍵頁面 mockup：/chat（核心 AI 對話）/scanner（154 幣掃描）/strategy（策略管理）
6. 動畫規範（duration / easing / 適用場景）
7. 響應式斷點示意（桌/平板/手機）

格式：用 HTML + Tailwind 輸出可直接預覽的 mockup，附 style guide 文件。