feat: market tabs (台股/美股/基金), autocomplete search, favorites filter tabs

Frontend:
- Header: add 台股🇹🇼/美股🇺🇸/基金📊 market tabs + autocomplete dropdown (350ms debounce)
- FavoritesPage: add market filter tabs (全部/台股/美股/基金) with counts
- App: add market state, pass market to Header and store in favorites on add
- useFirestoreFavorites: persist market field in Firestore
- stockApi: add market param to searchStocks

Backend:
- data/fund_fetcher.py: MoneyDJ NAV fetcher with hardcoded list
(PIM91/PIM90/ALBL2/ALBL4/PIM95/FLZI4/TLZ64)
- data/fetcher.py: route fund codes through fund_fetcher before yfinance
- routers/stock.py: use search_funds for fund market search

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

data/fetcher.py

@@ -10,6 +10,8 @@ from typing import Optional
 import pandas as pd
 import yfinance as yf
 
+from data.fund_fetcher import is_moneydj_fund, fetch_fund_history, get_fund_info as _get_fund_info_moneydj
+
 logger = logging.getLogger(__name__)
 
 
@@ -122,6 +124,9 @@ def fetch_history(stock_no: str, months: int = 24) -> pd.DataFrame:
         date (datetime.date), open, high, low, close, volume (float)
     Sorted ascending by date, no duplicates.
     """
+    if is_moneydj_fund(stock_no):
+        return fetch_fund_history(stock_no, months)
+
     if is_us_ticker(stock_no):
         ticker = stock_no.upper().strip()
         period = f"{months}mo"
@@ -229,6 +234,9 @@ def get_stock_info(stock_no: str) -> dict:
     Return basic stock info: name, exchange, stock_no.
     Uses yfinance Ticker.info for metadata, with exchange auto-detection fallback.
     """
+    if is_moneydj_fund(stock_no):
+        return _get_fund_info_moneydj(stock_no)
+
     if is_us_ticker(stock_no):
         ticker = stock_no.upper().strip()
         try:
@@ -273,6 +281,10 @@ def get_stock_info(stock_no: str) -> dict:
 def get_current_price(stock_no: str) -> Optional[float]:
     """Return the most recent closing price."""
     try:
+        if is_moneydj_fund(stock_no):
+            info = _get_fund_info_moneydj(stock_no)
+            return info.get("current_price")
+
         if is_us_ticker(stock_no):
             ticker = stock_no.upper().strip()
             t = yf.Ticker(ticker)

data/fund_fetcher.py

@@ -0,0 +1,274 @@
+"""
+MoneyDJ 基金爬蟲 — 支援台灣境外基金代號 (如 PIM91)
+取得歷史 NAV 淨值，轉為 OHLCV 格式供 ML 模型使用
+"""
+
+import re
+import json
+import logging
+import time
+
+import requests
+import pandas as pd
+from datetime import datetime
+
+logger = logging.getLogger(__name__)
+
+# MoneyDJ 代號格式: 2~5 字母 + 2~3 數字 (e.g. PIM91, JPM12, ALBL4, TLZ64)
+_MONEYDJ_RE = re.compile(r'^[A-Za-z]{2,5}\d{2,3}$')
+
+# Hardcoded known funds (fallback names when MoneyDJ unreachable)
+KNOWN_FUNDS: dict[str, str] = {
+    "PIM91": "PIMCO 全球債券基金",
+    "PIM90": "PIMCO 投資級債券基金",
+    "PIM95": "PIMCO 高收益債券基金",
+    "ALBL2": "聯博全球高收益債券基金",
+    "ALBL4": "聯博美元短期債券基金",
+    "FLZI4": "富達美元利率基金",
+    "TLZ64": "富達美元利率基金 II",
+}
+
+_BROWSER_HEADERS = {
+    "User-Agent": (
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+        "AppleWebKit/537.36 (KHTML, like Gecko) "
+        "Chrome/124.0.0.0 Safari/537.36"
+    ),
+    "Accept-Language": "zh-TW,zh;q=0.9,en;q=0.8",
+    "Accept-Encoding": "gzip, deflate, br",
+    "Connection": "keep-alive",
+}
+
+
+def is_moneydj_fund(code: str) -> bool:
+    """Return True if code looks like a MoneyDJ fund code (e.g. PIM91)."""
+    return bool(_MONEYDJ_RE.match(code.strip()))
+
+
+def _session() -> requests.Session:
+    s = requests.Session()
+    s.headers.update(_BROWSER_HEADERS)
+    s.verify = False  # MoneyDJ SSL cert missing Subject Key Identifier
+    return s
+
+
+# ---------------------------------------------------------------------------
+# Fund info
+# ---------------------------------------------------------------------------
+
+def get_fund_info(fund_code: str) -> dict:
+    """Return fund name and basic info from MoneyDJ (with hardcoded fallback)."""
+    code = fund_code.upper().strip()
+    fallback_name = KNOWN_FUNDS.get(code, code)
+    base = {"stock_no": code, "name": fallback_name, "exchange": "基金", "current_price": None}
+    try:
+        s = _session()
+        url = f"https://www.moneydj.com/funddj/ya/yp010000.djhtm?a={code}"
+        resp = s.get(url, timeout=10)
+        resp.encoding = "utf-8"
+        m = re.search(r"<title>\s*(.*?)\s*(?:\||-|–).*?</title>", resp.text, re.IGNORECASE | re.DOTALL)
+        if m:
+            name = m.group(1).strip()
+            if name and name != code:
+                base["name"] = name
+        if base["name"] == code:
+            m2 = re.search(r'<h1[^>]*>\s*(.*?)\s*</h1>', resp.text, re.IGNORECASE | re.DOTALL)
+            if m2:
+                base["name"] = re.sub(r'<[^>]+>', '', m2.group(1)).strip()
+
+        # Try to get current NAV
+        nav_m = re.search(r'最新淨值[^>]*>.*?(\d[\d,]*\.\d+)', resp.text, re.DOTALL)
+        if nav_m:
+            base["current_price"] = float(nav_m.group(1).replace(",", ""))
+    except Exception as exc:
+        logger.warning("get_fund_info failed for %s: %s", code, exc)
+    return base
+
+
+# ---------------------------------------------------------------------------
+# Historical NAV
+# ---------------------------------------------------------------------------
+
+def fetch_fund_history(fund_code: str, months: int = 24) -> pd.DataFrame:
+    """
+    Fetch historical NAV from MoneyDJ.
+    NAV is a single daily price → open/high/low/close all set to NAV.
+    volume = 1 (placeholder, avoids division-by-zero in volume_ratio).
+    """
+    code = fund_code.upper().strip()
+    s = _session()
+    fund_url = f"https://www.moneydj.com/funddj/ya/yp010000.djhtm?a={code}"
+
+    try:
+        s.get(fund_url, timeout=10)
+        time.sleep(0.3)
+    except Exception:
+        pass
+
+    df = _try_fundhis_axd(code, s, fund_url)
+    if df is not None and not df.empty:
+        return _trim(df, months)
+
+    df = _scrape_html_table(code, s, months)
+    if df is not None and not df.empty:
+        return _trim(df, months)
+
+    raise ValueError(
+        f"無法取得基金 {code} 的淨值資料。"
+        "請確認代號是否正確（MoneyDJ 格式，如 PIM91）。"
+    )
+
+
+def _try_fundhis_axd(code: str, s: requests.Session, referer: str) -> pd.DataFrame | None:
+    url = "https://www.moneydj.com/InfoSVC/FundHis.axd"
+    try:
+        resp = s.get(
+            url,
+            params={"a": code},
+            headers={
+                "Referer": referer,
+                "Accept": "*/*",
+                "X-Requested-With": "XMLHttpRequest",
+            },
+            timeout=15,
+        )
+        resp.raise_for_status()
+        m = re.search(r"BehaviorF\.His1\s*=\s*(\[[\s\S]*?\]);", resp.text)
+        if not m or m.group(1).strip() == "[]":
+            return None
+        raw = json.loads(m.group(1))
+        return _parse_nav_rows(raw, code)
+    except Exception as exc:
+        logger.warning("FundHis.axd error for %s: %s", code, exc)
+        return None
+
+
+def _scrape_html_table(code: str, s: requests.Session, months: int) -> pd.DataFrame | None:
+    urls_to_try = [
+        f"https://www.moneydj.com/funddj/ya/YP011.djhtm?a={code}",
+        f"https://www.moneydj.com/funddj/yb/YP012.djhtm?a={code}&b={months}M",
+    ]
+    for url in urls_to_try:
+        try:
+            resp = s.get(url, timeout=15)
+            resp.encoding = "utf-8"
+            records = _parse_html_nav(resp.text)
+            if records:
+                df = pd.DataFrame(records)
+                df = df.sort_values("date").reset_index(drop=True)
+                df = df.drop_duplicates(subset=["date"])
+                return df
+        except Exception as exc:
+            logger.warning("HTML scrape failed for %s: %s", code, exc)
+    return None
+
+
+def _parse_html_nav(html: str) -> list[dict]:
+    records = []
+    date_re = re.compile(r'(\d{4})[/\-](\d{1,2})[/\-](\d{1,2})')
+    nav_re = re.compile(r'^[\d,]+\.\d+$')
+    cells = re.findall(r'<td[^>]*>(.*?)</td>', html, re.IGNORECASE | re.DOTALL)
+    texts = [re.sub(r'<[^>]+>', '', c).strip() for c in cells]
+    i = 0
+    while i < len(texts) - 1:
+        dm = date_re.match(texts[i])
+        if dm:
+            nav_text = texts[i + 1].replace(',', '')
+            nm = nav_re.match(nav_text)
+            if nm:
+                try:
+                    date = datetime(int(dm.group(1)), int(dm.group(2)), int(dm.group(3))).date()
+                    nav = float(nav_text)
+                    records.append({
+                        "date": date,
+                        "open": nav, "high": nav, "low": nav, "close": nav,
+                        "volume": 1.0,
+                    })
+                    i += 2
+                    continue
+                except ValueError:
+                    pass
+        i += 1
+    return records
+
+
+def _parse_nav_rows(raw: list, code: str) -> pd.DataFrame:
+    records = []
+    for row in raw:
+        if not row or len(row) < 2:
+            continue
+        try:
+            date_str = str(row[0]).strip()
+            for fmt in ("%Y/%m/%d", "%Y%m%d", "%Y-%m-%d"):
+                try:
+                    date = datetime.strptime(date_str, fmt).date()
+                    break
+                except ValueError:
+                    continue
+            else:
+                continue
+            nav = float(str(row[1]).replace(",", ""))
+            records.append({
+                "date": date,
+                "open": nav, "high": nav, "low": nav, "close": nav,
+                "volume": 1.0,
+            })
+        except (ValueError, TypeError, IndexError):
+            continue
+    if not records:
+        raise ValueError(f"No NAV data parsed for {code}")
+    df = pd.DataFrame(records)
+    df = df.sort_values("date").reset_index(drop=True)
+    df = df.drop_duplicates(subset=["date"])
+    return df
+
+
+def _trim(df: pd.DataFrame, months: int) -> pd.DataFrame:
+    from dateutil.relativedelta import relativedelta
+    cutoff = (datetime.today() - relativedelta(months=months)).date()
+    return df[df["date"] >= cutoff].reset_index(drop=True)
+
+
+# ---------------------------------------------------------------------------
+# Fund search
+# ---------------------------------------------------------------------------
+
+def search_funds(query: str) -> list[dict]:
+    """Search known funds + MoneyDJ by name or code."""
+    q = query.strip().upper()
+    results = []
+
+    # Search hardcoded known funds first
+    for code, name in KNOWN_FUNDS.items():
+        if q in code or q.lower() in name.lower():
+            results.append({"stock_no": code, "name": name, "exchange": "基金"})
+
+    # Direct code lookup via MoneyDJ
+    if is_moneydj_fund(q) and not any(r["stock_no"] == q for r in results):
+        try:
+            info = get_fund_info(q)
+            results.append({"stock_no": info["stock_no"], "name": info["name"], "exchange": "基金"})
+        except Exception:
+            pass
+
+    # Name search via MoneyDJ search page
+    if not results:
+        try:
+            s = _session()
+            url = "https://www.moneydj.com/funddjx/fundsearch.xdjhtm"
+            resp = s.get(url, params={"SearchType": "MatchAll", "Key": query.strip()}, timeout=10)
+            resp.encoding = "utf-8"
+            pattern = re.compile(
+                r'yp010000\.djhtm\?a=([A-Z0-9]+)[^>]*>([^<]+)<', re.IGNORECASE
+            )
+            for m in pattern.finditer(resp.text):
+                code = m.group(1).strip()
+                name = m.group(2).strip()
+                if name and code:
+                    results.append({"stock_no": code, "name": name, "exchange": "基金"})
+                if len(results) >= 10:
+                    break
+        except Exception as exc:
+            logger.warning("Fund search error: %s", exc)
+
+    return results[:10]

frontend/src/App.tsx

@@ -0,0 +1,364 @@
+import React, { useState, useCallback, useEffect } from 'react'
+import { TrendingUp, Activity, BarChart2, Loader2, Star } from 'lucide-react'
+import { onAuthStateChanged, signOut, User as FirebaseUser } from 'firebase/auth'
+import { auth, firebaseReady } from './firebase'
+import {
+  fetchStockHistory,
+  fetchPrediction,
+  fetchStockInfo,
+  OHLCVPoint,
+  Prediction,
+  StockInfo,
+} from './api/stockApi'
+
+// Components
+import { CandlestickChart } from './components/CandlestickChart'
+import { VolumeChart } from './components/VolumeChart'
+import { RSIChart } from './components/RSIChart'
+import { MACDChart } from './components/MACDChart'
+import { PredictionPanel } from './components/PredictionPanel'
+import { ChartCard } from './components/ChartCard'
+import { Login } from './components/Login'
+import { Sidebar } from './components/Sidebar'
+import { Header, Market } from './components/Header'
+import { FavoritesPage, FavoriteItem } from './components/FavoritesPage'
+import { useFirestoreFavorites } from './hooks/useFirestoreFavorites'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface AppState {
+  loading: boolean
+  predicting: boolean
+  error: string | null
+  predictionError: string | null
+  stockInfo: StockInfo | null
+  history: OHLCVPoint[]
+  prediction: Prediction | null
+}
+
+// ---------------------------------------------------------------------------
+// localStorage fallback (used when Firebase is not configured)
+// ---------------------------------------------------------------------------
+
+const LS_SESSION  = 'stock_predictor_session'
+const LS_USERS    = 'stock_predictor_users'
+
+function lsGetUsers(): Array<{ username: string; password: string }> {
+  try {
+    const raw = localStorage.getItem(LS_USERS)
+    const users = raw ? JSON.parse(raw) : []
+    if (!users.find((u: any) => u.username === 'admin')) {
+      users.unshift({ username: 'admin', password: 'stock123' })
+      localStorage.setItem(LS_USERS, JSON.stringify(users))
+    }
+    return users
+  } catch { return [{ username: 'admin', password: 'stock123' }] }
+}
+
+function lsFavKey(username: string) { return `favorites_${username}` }
+
+function useLsFavorites(username: string | null) {
+  const [favorites, setFavorites] = useState<FavoriteItem[]>(() => {
+    if (!username) return []
+    try { return JSON.parse(localStorage.getItem(lsFavKey(username)) ?? '[]') } catch { return [] }
+  })
+
+  const persist = (u: string, favs: FavoriteItem[]) =>
+    localStorage.setItem(lsFavKey(u), JSON.stringify(favs))
+
+  const toggleFavorite = (id: string, name?: string, market?: Market) => {
+    if (!username) return
+    setFavorites(prev => {
+      const next = prev.find(f => f.id === id)
+        ? prev.filter(f => f.id !== id)
+        : [...prev, { id, name: name ?? id, market }]
+      persist(username, next)
+      return next
+    })
+  }
+  const removeFavorite = (id: string) => {
+    if (!username) return
+    setFavorites(prev => {
+      const next = prev.filter(f => f.id !== id)
+      persist(username, next)
+      return next
+    })
+  }
+  const updateNote = (id: string, note: string) => {
+    if (!username) return
+    setFavorites(prev => {
+      const next = prev.map(f => f.id === id ? { ...f, note } : f)
+      persist(username, next)
+      return next
+    })
+  }
+  return { favorites, toggleFavorite, removeFavorite, updateNote }
+}
+
+// ---------------------------------------------------------------------------
+// Main App
+// ---------------------------------------------------------------------------
+
+export default function App() {
+  // --- Auth state ---
+  const [firebaseUser, setFirebaseUser] = useState<FirebaseUser | null | undefined>(
+    firebaseReady ? undefined : null
+  )
+  const [lsUser, setLsUser] = useState<string | null>(() =>
+    firebaseReady ? null : localStorage.getItem(LS_SESSION)
+  )
+
+  const isLoggedIn = firebaseReady ? !!firebaseUser : !!lsUser
+  const uid        = firebaseReady ? (firebaseUser?.uid ?? null) : null
+  const displayName = firebaseReady
+    ? (firebaseUser?.displayName || firebaseUser?.email || '使用者')
+    : lsUser ?? ''
+  const photoURL = firebaseUser?.photoURL ?? undefined
+
+  useEffect(() => {
+    if (!firebaseReady) return
+    return onAuthStateChanged(auth, setFirebaseUser)
+  }, [])
+
+  const handleLogout = () => {
+    if (firebaseReady) {
+      signOut(auth)
+    } else {
+      localStorage.removeItem(LS_SESSION)
+      setLsUser(null)
+    }
+    setView('main')
+  }
+
+  const handleLsLogin = (username: string) => {
+    localStorage.setItem(LS_SESSION, username)
+    setLsUser(username)
+  }
+
+  const handleLsRegister = (username: string, password: string): string | null => {
+    const users = lsGetUsers()
+    if (users.find(u => u.username === username)) return '此帳號名稱已被使用'
+    if (password.length < 4) return '密碼至少需要 4 個字元'
+    users.push({ username, password })
+    localStorage.setItem(LS_USERS, JSON.stringify(users))
+    return null
+  }
+
+  const verifyLsLogin = (username: string, password: string): boolean => {
+    const users = lsGetUsers()
+    return !!users.find(u => u.username === username && u.password === password)
+  }
+
+  // --- Favorites ---
+  const firestore = useFirestoreFavorites(firebaseReady ? uid : null)
+  const ls        = useLsFavorites(firebaseReady ? null : lsUser)
+  const { favorites, toggleFavorite, removeFavorite, updateNote } =
+    firebaseReady ? firestore : ls
+
+  // --- Market + View + search state ---
+  const [market, setMarket] = useState<Market>('tw')
+  const [view, setView] = useState<'main' | 'favorites'>('main')
+  const [input, setInput]   = useState('')
+  const [months, setMonths] = useState(6)
+  const [state, setState] = useState<AppState>({
+    loading: false, predicting: false,
+    error: null, predictionError: null,
+    stockInfo: null, history: [], prediction: null,
+  })
+
+  const handleSearch = useCallback(async (stockNo: string, monthsCount: number) => {
+    const sno = stockNo.trim()
+    if (!sno) return
+    setInput(sno)
+    setView('main')
+    setState(s => ({ ...s, loading: true, predicting: true, error: null, predictionError: null, history: [], prediction: null }))
+
+    let info: StockInfo | null = null
+    let history: OHLCVPoint[] = []
+    let historyError: string | null = null
+    try {
+      const [infoRes, historyRes] = await Promise.allSettled([
+        fetchStockInfo(sno),
+        fetchStockHistory(sno, monthsCount),
+      ])
+      if (infoRes.status === 'fulfilled') info = infoRes.value
+      if (historyRes.status === 'fulfilled') history = historyRes.value
+      else historyError = (historyRes.reason as Error)?.message ?? 'Failed to fetch history'
+    } catch (err: any) { historyError = err?.message ?? 'Unknown error' }
+
+    setState(s => ({ ...s, loading: false, stockInfo: info, history, error: historyError }))
+
+    try {
+      const pred = await fetchPrediction(sno)
+      setState(s => ({ ...s, prediction: pred, predicting: false }))
+    } catch (err: any) {
+      const msg = err?.response?.data?.detail ?? err?.message ?? 'Prediction failed'
+      setState(s => ({ ...s, predictionError: msg, predicting: false }))
+    }
+  }, [])
+
+  const onSubmit = (e: React.FormEvent) => { e.preventDefault(); handleSearch(input, months) }
+
+  // ---------------------------------------------------------------------------
+  // Auth gate
+  // ---------------------------------------------------------------------------
+
+  if (firebaseUser === undefined) {
+    return (
+      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
+        <Loader2 size={32} className="animate-spin text-blue-400" />
+      </div>
+    )
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <Login
+        mode={firebaseReady ? 'firebase' : 'local'}
+        onLsLogin={verifyLsLogin}
+        onLsLoginSuccess={handleLsLogin}
+        onLsRegister={handleLsRegister}
+      />
+    )
+  }
+
+  // ---------------------------------------------------------------------------
+  // Main UI
+  // ---------------------------------------------------------------------------
+
+  const { loading, predicting, error, predictionError, stockInfo, history, prediction } = state
+  const hasData = history.length > 0
+  const isFav   = stockInfo && favorites.some(f => f.id === stockInfo.stock_no)
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-gray-100 font-sans">
+      <Header
+        input={input} setInput={setInput}
+        months={months} setMonths={setMonths}
+        loading={loading}
+        onSubmit={onSubmit}
+        onLogout={handleLogout}
+        currentUser={displayName}
+        userPhotoURL={photoURL}
+        view={view} onViewChange={setView}
+        favoritesCount={favorites.length}
+        market={market}
+        onMarketChange={setMarket}
+        onSelect={(stockNo) => handleSearch(stockNo, months)}
+      />
+
+      {view === 'favorites' ? (
+        <FavoritesPage
+          favorites={favorites}
+          onView={(id) => { handleSearch(id, months); setView('main') }}
+          onRemove={removeFavorite}
+          onUpdateNote={updateNote}
+        />
+      ) : (
+        <div className="max-w-7xl mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-4 gap-6">
+          <Sidebar
+            favorites={favorites}
+            onSearch={handleSearch}
+            onToggleFavorite={(id) => toggleFavorite(id)}
+            onViewFavorites={() => setView('favorites')}
+            months={months}
+          />
+
+          <main className="lg:col-span-3 space-y-6">
+            {stockInfo && (
+              <div className="flex flex-wrap items-center gap-3">
+                <h2 className="text-2xl font-black text-white">
+                  {stockInfo.stock_no}
+                  {stockInfo.name && stockInfo.name !== stockInfo.stock_no && (
+                    <span className="ml-2 text-slate-300 font-semibold text-xl">{stockInfo.name}</span>
+                  )}
+                </h2>
+                <button
+                  onClick={() => toggleFavorite(stockInfo.stock_no, stockInfo.name, market)}
+                  className={`p-2 rounded-full transition-colors ${isFav ? 'text-yellow-500' : 'text-slate-600 hover:text-slate-400'}`}
+                  title={isFav ? '從最愛移除' : '加入最愛'}
+                >
+                  <Star size={24} fill={isFav ? 'currentColor' : 'none'} />
+                </button>
+                <span className="text-xs bg-slate-700 text-slate-300 rounded px-2 py-0.5">{stockInfo.exchange}</span>
+                {stockInfo.current_price != null && (
+                  <span className="text-2xl font-bold text-green-400 ml-auto">
+                    {market === 'tw' ? 'NT$' : 'USD'} {stockInfo.current_price.toFixed(2)}
+                  </span>
+                )}
+              </div>
+            )}
+
+            {error && (
+              <div className="bg-red-900/30 border border-red-700 rounded-xl p-4 text-red-300 text-sm">
+                <strong>資料載入失敗:</strong> {error}
+              </div>
+            )}
+
+            {loading && (
+              <div className="flex flex-col items-center justify-center py-20 gap-4">
+                <Loader2 size={40} className="animate-spin text-blue-400" />
+                <p className="text-slate-400 text-sm">
+                  {market === 'fund' ? '正在從 MoneyDJ 取得基金淨值...' : '正在從 TPEX/TWSE 取得資料...'}
+                </p>
+              </div>
+            )}
+
+            {hasData && (
+              <div className="space-y-4">
+                <ChartCard title="價格走勢 & 均線" subtitle="Price & Moving Averages (MA5/MA20/MA60) + Bollinger Bands" icon={<TrendingUp size={16} className="text-blue-400" />}>
+                  <CandlestickChart data={history} />
+                </ChartCard>
+                <ChartCard title="成交量" subtitle="Volume" icon={<BarChart2 size={16} className="text-green-400" />}>
+                  <VolumeChart data={history} />
+                </ChartCard>
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                  <ChartCard title="RSI (14)" subtitle="Relative Strength Index — 30 oversold / 70 overbought" icon={<Activity size={16} className="text-purple-400" />}>
+                    <RSIChart data={history} />
+                  </ChartCard>
+                  <ChartCard title="MACD (12/26/9)" subtitle="MACD Line · Signal Line · Histogram" icon={<Activity size={16} className="text-orange-400" />}>
+                    <MACDChart data={history} />
+                  </ChartCard>
+                </div>
+              </div>
+            )}
+
+            {predicting && !prediction && (
+              <div className="bg-slate-900 border border-slate-700 rounded-xl p-6 flex items-center gap-4">
+                <Loader2 size={24} className="animate-spin text-blue-400 flex-shrink-0" />
+                <div>
+                  <p className="text-white font-medium">正在訓練 ML 模型...</p>
+                  <p className="text-slate-400 text-sm mt-0.5">Training RandomForest model (this may take 15–60 seconds)</p>
+                </div>
+              </div>
+            )}
+
+            {predictionError && (
+              <div className="bg-red-900/30 border border-red-700 rounded-xl p-4 text-red-300 text-sm">
+                <strong>預測失敗:</strong> {predictionError}
+              </div>
+            )}
+
+            {prediction && stockInfo && (
+              <PredictionPanel prediction={prediction} stockName={`${stockInfo.stock_no} ${stockInfo.name ?? ''}`} />
+            )}
+
+            {!loading && !hasData && !error && !state.stockInfo && (
+              <div className="flex flex-col items-center justify-center py-24 gap-4 text-center">
+                <TrendingUp size={52} className="text-slate-700" />
+                <h3 className="text-xl font-semibold text-slate-500">輸入代號開始分析</h3>
+                <p className="text-slate-600 text-sm">支援台股、美股、境外基金 (MoneyDJ 代號)</p>
+              </div>
+            )}
+          </main>
+        </div>
+      )}
+
+      <footer className="mt-16 border-t border-slate-800 py-6 text-center text-xs text-slate-600">
+        <p>資料來源: TWSE / TPEX / Yahoo Finance / MoneyDJ &nbsp;|&nbsp; 本系統僅供學術研究用途，不構成投資建議</p>
+      </footer>
+    </div>
+  )
+}

frontend/src/api/stockApi.ts

@@ -0,0 +1,99 @@
+import axios from 'axios'
+
+// ---------------------------------------------------------------------------
+// Interfaces
+// ---------------------------------------------------------------------------
+
+export interface OHLCVPoint {
+  date: string
+  open: number
+  high: number
+  low: number
+  close: number
+  volume: number
+  ma5?: number
+  ma10?: number
+  ma20?: number
+  ma60?: number
+  rsi?: number
+  macd?: number
+  macd_signal?: number
+  macd_hist?: number
+  k?: number
+  d?: number
+  bb_upper?: number
+  bb_lower?: number
+  bb_middle?: number
+  bb_pct_b?: number
+  volume_ma20?: number
+  volume_ratio?: number
+}
+
+export interface Prediction {
+  signal: 'BUY' | 'SELL' | 'HOLD'
+  signal_probability: number
+  predicted_price: number
+  predicted_change_pct: number
+  sell_target: number
+  stop_loss: number
+  confidence: 'HIGH' | 'MEDIUM' | 'LOW'
+  current_price: number
+  training_accuracy: number
+  disclaimer: string
+}
+
+export interface StockInfo {
+  stock_no: string
+  name: string
+  current_price: number | null
+  exchange: string
+}
+
+export interface SearchResult {
+  stock_no: string
+  name: string
+  exchange: string
+}
+
+// ---------------------------------------------------------------------------
+// API functions
+// ---------------------------------------------------------------------------
+
+// In production (Vercel), VITE_API_URL points to the Render backend.
+// In local dev, Vite proxy forwards /api → localhost:8000.
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL ?? '',
+})
+
+export async function fetchStockHistory(
+  stockNo: string,
+  months: number = 6
+): Promise<OHLCVPoint[]> {
+  const res = await api.get<{ data: OHLCVPoint[] }>(
+    `/api/stock/${stockNo}/history`,
+    { params: { months } }
+  )
+  return res.data.data
+}
+
+export async function fetchPrediction(
+  stockNo: string
+): Promise<Prediction> {
+  const res = await api.get<{ prediction: Prediction }>(
+    `/api/stock/${stockNo}/predict`
+  )
+  return res.data.prediction
+}
+
+export async function fetchStockInfo(stockNo: string): Promise<StockInfo> {
+  const res = await api.get<StockInfo>(`/api/stock/${stockNo}/info`)
+  return res.data
+}
+
+export async function searchStocks(query: string, market: 'tw' | 'us' | 'fund' = 'tw'): Promise<SearchResult[]> {
+  const res = await api.get<{ results: SearchResult[] }>(
+    `/api/stock/search`,
+    { params: { q: query, market } }
+  )
+  return res.data.results
+}

frontend/src/components/CandlestickChart.tsx

@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react'
+import {
+  ComposedChart,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts'
+import { OHLCVPoint } from '../api/stockApi'
+
+interface Props {
+  data: OHLCVPoint[]
+}
+
+// Show every Nth date label to avoid crowding
+function tickFormatter(value: string, index: number, total: number): string {
+  const step = Math.max(1, Math.floor(total / 10))
+  if (index % step === 0) return value
+  return ''
+}
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (!active || !payload?.length) return null
+  const d: OHLCVPoint = payload[0]?.payload
+  if (!d) return null
+  return (
+    <div className="bg-slate-800 border border-slate-600 rounded p-3 text-xs space-y-1 shadow-lg">
+      <p className="text-slate-300 font-semibold">{label}</p>
+      <p>O: <span className="text-white">{d.open?.toFixed(2)}</span></p>
+      <p>H: <span className="text-green-400">{d.high?.toFixed(2)}</span></p>
+      <p>L: <span className="text-red-400">{d.low?.toFixed(2)}</span></p>
+      <p>C: <span className="text-yellow-300 font-bold">{d.close?.toFixed(2)}</span></p>
+      {d.ma5 != null && <p>MA5: <span className="text-yellow-400">{d.ma5.toFixed(2)}</span></p>}
+      {d.ma20 != null && <p>MA20: <span className="text-blue-400">{d.ma20.toFixed(2)}</span></p>}
+      {d.ma60 != null && <p>MA60: <span className="text-red-400">{d.ma60.toFixed(2)}</span></p>}
+    </div>
+  )
+}
+
+export const CandlestickChart: React.FC<Props> = ({ data }) => {
+  const len = data.length
+
+  // Build Bollinger band area data: pairs of [lower, upper] for Area fill
+  const chartData = useMemo(
+    () =>
+      data.map((d) => ({
+        ...d,
+        bb_band: d.bb_upper != null && d.bb_lower != null
+          ? [d.bb_lower, d.bb_upper]
+          : [null, null],
+      })),
+    [data]
+  )
+
+  const allPrices = data.flatMap((d) => [d.low, d.high, d.bb_upper, d.bb_lower].filter(Boolean) as number[])
+  const yMin = Math.floor(Math.min(...allPrices) * 0.995)
+  const yMax = Math.ceil(Math.max(...allPrices) * 1.005)
+
+  return (
+    <ResponsiveContainer width="100%" height={320}>
+      <ComposedChart data={chartData} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+        <XAxis
+          dataKey="date"
+          tick={{ fill: '#94a3b8', fontSize: 11 }}
+          tickLine={false}
+          tickFormatter={(val, idx) => tickFormatter(val, idx, len)}
+          interval={0}
+        />
+        <YAxis
+          domain={[yMin, yMax]}
+          tick={{ fill: '#94a3b8', fontSize: 11 }}
+          tickLine={false}
+          tickFormatter={(v) => v.toFixed(0)}
+          width={55}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        <Legend
+          wrapperStyle={{ fontSize: 12, paddingTop: 4 }}
+          formatter={(value) => <span style={{ color: '#94a3b8' }}>{value}</span>}
+        />
+
+        {/* Bollinger Band fill — rendered first so it's behind price lines */}
+        <Area
+          dataKey="bb_upper"
+          stroke="#334155"
+          strokeWidth={1}
+          fill="#1e293b"
+          fillOpacity={0.5}
+          dot={false}
+          legendType="none"
+          name="BB Upper"
+          isAnimationActive={false}
+        />
+        <Area
+          dataKey="bb_lower"
+          stroke="#334155"
+          strokeWidth={1}
+          fill="#0f172a"
+          fillOpacity={1}
+          dot={false}
+          legendType="none"
+          name="BB Lower"
+          isAnimationActive={false}
+        />
+
+        {/* Close price as thick line */}
+        <Line
+          dataKey="close"
+          stroke="#e2e8f0"
+          strokeWidth={2}
+          dot={false}
+          name="Close"
+          isAnimationActive={false}
+        />
+
+        {/* Moving averages */}
+        <Line
+          dataKey="ma5"
+          stroke="#facc15"
+          strokeWidth={1.5}
+          dot={false}
+          name="MA5"
+          isAnimationActive={false}
+          connectNulls
+        />
+        <Line
+          dataKey="ma20"
+          stroke="#60a5fa"
+          strokeWidth={1.5}
+          dot={false}
+          name="MA20"
+          isAnimationActive={false}
+          connectNulls
+        />
+        <Line
+          dataKey="ma60"
+          stroke="#f87171"
+          strokeWidth={1.5}
+          dot={false}
+          name="MA60"
+          isAnimationActive={false}
+          connectNulls
+        />
+      </ComposedChart>
+    </ResponsiveContainer>
+  )
+}

frontend/src/components/ChartCard.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+interface ChartCardProps {
+  title: string
+  subtitle: string
+  icon: React.ReactNode
+  children: React.ReactNode
+}
+
+export const ChartCard: React.FC<ChartCardProps> = ({ title, subtitle, icon, children }) => (
+  <div className="bg-slate-900 border border-slate-800 rounded-xl p-4 space-y-3">
+    <div className="flex items-center gap-2">
+      {icon}
+      <div>
+        <h3 className="text-sm font-semibold text-white leading-tight">{title}</h3>
+        <p className="text-xs text-slate-500 leading-tight">{subtitle}</p>
+      </div>
+    </div>
+    {children}
+  </div>
+)

frontend/src/components/FavoritesPage.tsx

@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react'
+import { Star, Trash2, ExternalLink, RefreshCw, FileText } from 'lucide-react'
+import { fetchStockInfo, StockInfo } from '../api/stockApi'
+import type { Market } from './Header'
+
+export interface FavoriteItem {
+  id: string
+  name: string
+  note?: string
+  market?: Market
+}
+
+const MARKET_FILTER_TABS: { key: Market | 'all'; label: string; flag: string }[] = [
+  { key: 'all',  label: '全部', flag: '⭐' },
+  { key: 'tw',   label: '台股', flag: '🇹🇼' },
+  { key: 'us',   label: '美股', flag: '🇺🇸' },
+  { key: 'fund', label: '基金', flag: '📊' },
+]
+
+interface FavoritesPageProps {
+  favorites: FavoriteItem[]
+  onView: (id: string) => void
+  onRemove: (id: string) => void
+  onUpdateNote: (id: string, note: string) => void
+}
+
+const FavoriteCard: React.FC<{
+  fav: FavoriteItem
+  onView: (id: string) => void
+  onRemove: (id: string) => void
+  onUpdateNote: (id: string, note: string) => void
+}> = ({ fav, onView, onRemove, onUpdateNote }) => {
+  const [info, setInfo] = useState<StockInfo | null>(null)
+  const [fetching, setFetching] = useState(false)
+  const [note, setNote] = useState(fav.note ?? '')
+
+  const loadInfo = async () => {
+    setFetching(true)
+    try {
+      const data = await fetchStockInfo(fav.id)
+      setInfo(data)
+    } catch { /* ignore */ }
+    setFetching(false)
+  }
+
+  useEffect(() => { loadInfo() }, [fav.id])
+
+  const market = fav.market ?? 'tw'
+  const exchangeStyle =
+    market === 'fund'
+      ? 'bg-yellow-900/50 text-yellow-300'
+      : market === 'us'
+      ? 'bg-green-900/50 text-green-300'
+      : info?.exchange === 'TPEX'
+      ? 'bg-purple-900/50 text-purple-300'
+      : 'bg-blue-900/50 text-blue-300'
+
+  const marketLabel = info?.exchange ?? (market === 'fund' ? '基金' : market === 'us' ? 'US' : '台股')
+
+  const pricePrefix = market === 'fund' ? 'USD ' : market === 'us' ? 'USD ' : 'NT$ '
+
+  return (
+    <div className="bg-slate-900 border border-slate-800 hover:border-slate-600 rounded-xl p-4 space-y-3 transition-colors flex flex-col">
+      {/* Top row */}
+      <div className="flex items-start justify-between">
+        <div className="space-y-0.5">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="font-mono font-bold text-white text-lg leading-none">{fav.id}</span>
+            <span className={`text-xs rounded px-1.5 py-0.5 font-medium ${exchangeStyle}`}>
+              {marketLabel}
+            </span>
+          </div>
+          <p className="text-slate-300 text-sm truncate max-w-[160px]">
+            {info?.name || fav.name}
+          </p>
+        </div>
+        <div className="flex items-center gap-0.5 flex-shrink-0 ml-2">
+          <button onClick={loadInfo} disabled={fetching} className="p-1.5 text-slate-500 hover:text-slate-300 transition-colors rounded" title="重新整理價格">
+            <RefreshCw size={13} className={fetching ? 'animate-spin' : ''} />
+          </button>
+          <button onClick={() => onRemove(fav.id)} className="p-1.5 text-slate-500 hover:text-red-400 transition-colors rounded" title="從最愛移除">
+            <Trash2 size={13} />
+          </button>
+        </div>
+      </div>
+
+      {/* Price row */}
+      <div className="flex items-center justify-between">
+        <div>
+          {fetching ? (
+            <span className="text-slate-600 text-sm">載入中...</span>
+          ) : info?.current_price != null ? (
+            <span className="text-xl font-bold text-green-400">
+              {pricePrefix}{info.current_price.toFixed(2)}
+            </span>
+          ) : (
+            <span className="text-slate-600 text-sm">— 無報價 —</span>
+          )}
+        </div>
+        <button
+          onClick={() => onView(fav.id)}
+          className="flex items-center gap-1.5 bg-blue-600/20 hover:bg-blue-600/40 text-blue-400 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors"
+        >
+          <ExternalLink size={12} />
+          查看分析
+        </button>
+      </div>
+
+      {/* Note */}
+      <div className="relative mt-auto">
+        <FileText size={12} className="absolute left-2.5 top-2.5 text-slate-600 pointer-events-none" />
+        <textarea
+          value={note}
+          onChange={e => setNote(e.target.value)}
+          onBlur={() => onUpdateNote(fav.id, note)}
+          placeholder="備註 (失焦自動儲存)..."
+          rows={2}
+          className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-7 pr-3 py-2 text-xs text-slate-300 resize-none focus:outline-none focus:border-slate-500 placeholder-slate-600"
+        />
+      </div>
+    </div>
+  )
+}
+
+export const FavoritesPage: React.FC<FavoritesPageProps> = ({
+  favorites,
+  onView,
+  onRemove,
+  onUpdateNote,
+}) => {
+  const [activeTab, setActiveTab] = useState<Market | 'all'>('all')
+
+  const filtered = activeTab === 'all'
+    ? favorites
+    : favorites.filter(f => (f.market ?? 'tw') === activeTab)
+
+  const countByMarket = (m: Market | 'all') =>
+    m === 'all' ? favorites.length : favorites.filter(f => (f.market ?? 'tw') === m).length
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-6 space-y-6">
+      <div className="flex items-center gap-3">
+        <Star className="text-yellow-500" size={22} fill="currentColor" />
+        <h2 className="text-2xl font-bold text-white">我的最愛</h2>
+        <span className="bg-slate-800 text-slate-400 text-xs rounded-full px-2.5 py-0.5 font-medium">
+          {favorites.length} 支
+        </span>
+      </div>
+
+      {/* Market filter tabs */}
+      <div className="flex items-center gap-1 bg-slate-900 border border-slate-800 rounded-xl p-1 w-fit">
+        {MARKET_FILTER_TABS.map(tab => {
+          const count = countByMarket(tab.key)
+          return (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                activeTab === tab.key
+                  ? 'bg-slate-700 text-white shadow-sm'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+            >
+              <span>{tab.flag}</span>
+              <span>{tab.label}</span>
+              {count > 0 && (
+                <span className={`text-[10px] font-bold rounded-full min-w-[16px] h-4 px-1 flex items-center justify-center ${
+                  activeTab === tab.key ? 'bg-blue-500 text-white' : 'bg-slate-700 text-slate-300'
+                }`}>
+                  {count}
+                </span>
+              )}
+            </button>
+          )
+        })}
+      </div>
+
+      {filtered.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-28 gap-4 text-center">
+          <Star size={52} className="text-slate-700" />
+          <p className="text-slate-400 font-medium">
+            {activeTab === 'all' ? '尚未加入任何股票' : `尚未加入任何${MARKET_FILTER_TABS.find(t => t.key === activeTab)?.label}項目`}
+          </p>
+          <p className="text-slate-600 text-sm">在股票分析頁面點擊 ★ 按鈕即可加入最愛</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {filtered.map(fav => (
+            <FavoriteCard
+              key={fav.id}
+              fav={fav}
+              onView={onView}
+              onRemove={onRemove}
+              onUpdateNote={onUpdateNote}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/Header.tsx

@@ -0,0 +1,267 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import { Search, TrendingUp, Loader2, LogOut, Star, BarChart2, User, X } from 'lucide-react'
+import { searchStocks, SearchResult } from '../api/stockApi'
+
+export type Market = 'tw' | 'us' | 'fund'
+
+const MARKET_TABS: { key: Market; label: string; flag: string }[] = [
+  { key: 'tw',   label: '台股', flag: '🇹🇼' },
+  { key: 'us',   label: '美股', flag: '🇺🇸' },
+  { key: 'fund', label: '基金', flag: '📊' },
+]
+
+const MARKET_PLACEHOLDER: Record<Market, string> = {
+  tw:   '台股代號 (e.g. 7856)',
+  us:   '美股代號 (e.g. AAPL)',
+  fund: '基金代號 (e.g. PIM91)',
+}
+
+interface HeaderProps {
+  input: string
+  setInput: (val: string) => void
+  months: number
+  setMonths: (val: number) => void
+  loading: boolean
+  onSubmit: (e: React.FormEvent) => void
+  onLogout: () => void
+  currentUser: string
+  userPhotoURL?: string
+  view: 'main' | 'favorites'
+  onViewChange: (v: 'main' | 'favorites') => void
+  favoritesCount: number
+  market: Market
+  onMarketChange: (m: Market) => void
+  onSelect: (stockNo: string) => void
+}
+
+export const Header: React.FC<HeaderProps> = ({
+  input, setInput,
+  months, setMonths,
+  loading,
+  onSubmit,
+  onLogout,
+  currentUser,
+  userPhotoURL,
+  view, onViewChange,
+  favoritesCount,
+  market, onMarketChange,
+  onSelect,
+}) => {
+  const [suggestions, setSuggestions] = useState<SearchResult[]>([])
+  const [showDrop, setShowDrop] = useState(false)
+  const [searching, setSearching] = useState(false)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setShowDrop(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  const fetchSuggestions = useCallback(async (q: string, mkt: Market) => {
+    if (!q.trim()) { setSuggestions([]); setShowDrop(false); return }
+    // For TW: need at least 1 char; for US/fund: 1 char
+    if (q.length < 1) return
+    setSearching(true)
+    try {
+      const results = await searchStocks(q, mkt)
+      setSuggestions(results)
+      setShowDrop(results.length > 0)
+    } catch {
+      setSuggestions([])
+      setShowDrop(false)
+    } finally {
+      setSearching(false)
+    }
+  }, [])
+
+  const handleInputChange = (val: string) => {
+    setInput(val)
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => fetchSuggestions(val, market), 350)
+  }
+
+  const handleSelect = (stockNo: string) => {
+    setInput(stockNo)
+    setSuggestions([])
+    setShowDrop(false)
+    onSelect(stockNo)
+  }
+
+  const handleMarketChange = (m: Market) => {
+    onMarketChange(m)
+    setSuggestions([])
+    setShowDrop(false)
+    setInput('')
+  }
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    setShowDrop(false)
+    onSubmit(e)
+  }
+
+  const exchangeColor: Record<string, string> = {
+    TWSE: 'text-blue-400', TPEX: 'text-purple-400',
+    基金: 'text-yellow-400', MoneyDJ: 'text-yellow-400',
+    NYSE: 'text-green-400', NASDAQ: 'text-green-400',
+  }
+
+  return (
+    <header className="bg-slate-900 border-b border-slate-800 sticky top-0 z-20">
+      <div className="max-w-7xl mx-auto px-4 py-3 flex flex-col sm:flex-row items-start sm:items-center gap-3">
+
+        {/* Brand */}
+        <div className="flex items-center gap-2 mr-2 flex-shrink-0">
+          <TrendingUp className="text-blue-400" size={22} />
+          <h1 className="text-lg font-bold tracking-tight text-white whitespace-nowrap hidden sm:block">台股 ML 預測</h1>
+        </div>
+
+        {/* View nav (分析 / 最愛) */}
+        <nav className="flex items-center gap-1 flex-shrink-0">
+          <button
+            onClick={() => onViewChange('main')}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+              view === 'main' ? 'bg-blue-600/20 text-blue-400' : 'text-slate-400 hover:text-white hover:bg-slate-800'
+            }`}
+          >
+            <BarChart2 size={14} /> 分析
+          </button>
+          <button
+            onClick={() => onViewChange('favorites')}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+              view === 'favorites' ? 'bg-yellow-500/20 text-yellow-400' : 'text-slate-400 hover:text-white hover:bg-slate-800'
+            }`}
+          >
+            <Star size={14} fill={view === 'favorites' ? 'currentColor' : 'none'} />
+            最愛
+            {favoritesCount > 0 && (
+              <span className="bg-yellow-500 text-black text-[10px] font-bold rounded-full w-4 h-4 flex items-center justify-center leading-none">
+                {favoritesCount > 9 ? '9+' : favoritesCount}
+              </span>
+            )}
+          </button>
+        </nav>
+
+        {/* Market tabs + search (only on main view) */}
+        {view === 'main' && (
+          <div className="flex items-center gap-2 flex-1">
+            {/* Market tabs */}
+            <div className="flex items-center bg-slate-800 rounded-lg p-0.5 flex-shrink-0">
+              {MARKET_TABS.map(tab => (
+                <button
+                  key={tab.key}
+                  onClick={() => handleMarketChange(tab.key)}
+                  className={`flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium transition-colors ${
+                    market === tab.key
+                      ? 'bg-slate-700 text-white shadow-sm'
+                      : 'text-slate-400 hover:text-white'
+                  }`}
+                >
+                  <span>{tab.flag}</span>
+                  <span className="hidden sm:inline">{tab.label}</span>
+                </button>
+              ))}
+            </div>
+
+            {/* Search with autocomplete */}
+            <form onSubmit={handleFormSubmit} className="flex items-center gap-2 flex-1">
+              <div className="relative flex-1 sm:flex-none" ref={wrapperRef}>
+                <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none z-10" />
+                <input
+                  type="text"
+                  value={input}
+                  onChange={(e) => handleInputChange(e.target.value)}
+                  onFocus={() => suggestions.length > 0 && setShowDrop(true)}
+                  placeholder={MARKET_PLACEHOLDER[market]}
+                  className="bg-slate-800 border border-slate-600 rounded-lg pl-8 pr-7 py-2 text-sm w-full sm:w-52 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-white placeholder-slate-500"
+                />
+                {input && (
+                  <button
+                    type="button"
+                    onClick={() => { setInput(''); setSuggestions([]); setShowDrop(false) }}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white"
+                  >
+                    <X size={12} />
+                  </button>
+                )}
+
+                {/* Autocomplete dropdown */}
+                {showDrop && (
+                  <div className="absolute top-full left-0 right-0 mt-1 bg-slate-800 border border-slate-700 rounded-lg shadow-xl z-50 max-h-64 overflow-y-auto">
+                    {searching && (
+                      <div className="px-3 py-2 text-xs text-slate-500 flex items-center gap-2">
+                        <Loader2 size={12} className="animate-spin" /> 搜尋中...
+                      </div>
+                    )}
+                    {suggestions.map((s) => (
+                      <button
+                        key={s.stock_no}
+                        type="button"
+                        onClick={() => handleSelect(s.stock_no)}
+                        className="w-full px-3 py-2 text-left hover:bg-slate-700 flex items-center justify-between gap-2 transition-colors"
+                      >
+                        <div className="flex items-center gap-2 min-w-0">
+                          <span className="font-mono font-bold text-white text-sm flex-shrink-0">{s.stock_no}</span>
+                          <span className="text-slate-300 text-xs truncate">{s.name}</span>
+                        </div>
+                        <span className={`text-[10px] font-medium flex-shrink-0 ${exchangeColor[s.exchange] ?? 'text-slate-400'}`}>
+                          {s.exchange}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <select
+                value={months}
+                onChange={(e) => setMonths(Number(e.target.value))}
+                className="bg-slate-800 border border-slate-600 rounded-lg px-2 py-2 text-sm focus:outline-none focus:border-blue-500 text-white flex-shrink-0"
+              >
+                <option value={3}>3個月</option>
+                <option value={6}>6個月</option>
+                <option value={12}>12個月</option>
+                <option value={24}>24個月</option>
+              </select>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="flex items-center gap-1.5 bg-blue-600 hover:bg-blue-500 disabled:bg-blue-800 disabled:cursor-not-allowed text-white rounded-lg px-4 py-2 text-sm font-medium transition-colors flex-shrink-0"
+              >
+                {loading ? <Loader2 size={14} className="animate-spin" /> : <Search size={14} />}
+                <span className="hidden sm:inline">查詢</span>
+              </button>
+            </form>
+          </div>
+        )}
+
+        {/* User avatar + logout */}
+        <div className="flex items-center gap-2 sm:ml-auto flex-shrink-0">
+          {userPhotoURL ? (
+            <img src={userPhotoURL} alt={currentUser} className="w-7 h-7 rounded-full border border-slate-600 object-cover" referrerPolicy="no-referrer" />
+          ) : (
+            <div className="w-7 h-7 rounded-full bg-slate-700 flex items-center justify-center">
+              <User size={14} className="text-slate-400" />
+            </div>
+          )}
+          <span className="hidden sm:inline text-xs font-medium text-slate-300 max-w-[100px] truncate">{currentUser}</span>
+          <button
+            onClick={onLogout}
+            className="p-2 text-slate-400 hover:text-white transition-colors rounded-lg hover:bg-slate-800"
+            title="登出"
+            type="button"
+          >
+            <LogOut size={18} />
+          </button>
+        </div>
+      </div>
+    </header>
+  )
+}

frontend/src/components/Login.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react'
+import { Lock, Mail, TrendingUp, UserPlus, LogIn, User } from 'lucide-react'
+import { signInWithPopup, signInWithEmailAndPassword, createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'
+import { auth, googleProvider, firebaseReady } from '../firebase'
+
+// Google "G" SVG icon
+const GoogleIcon = () => (
+  <svg viewBox="0 0 24 24" width="18" height="18">
+    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/>
+    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+  </svg>
+)
+
+interface LoginProps {
+  mode: 'firebase' | 'local'
+  onLsLogin: (username: string, password: string) => boolean
+  onLsLoginSuccess: (username: string) => void
+  onLsRegister: (username: string, password: string) => string | null
+}
+
+export const Login: React.FC<LoginProps> = ({ mode, onLsLogin, onLsLoginSuccess, onLsRegister }) => {
+  const [tab, setTab]                   = useState<'login' | 'register'>('login')
+  const [displayName, setDisplayName]   = useState('')
+  const [emailOrUser, setEmailOrUser]   = useState('')
+  const [password, setPassword]         = useState('')
+  const [confirm, setConfirm]           = useState('')
+  const [error, setError]               = useState('')
+  const [regSuccess, setRegSuccess]     = useState(false)
+  const [loading, setLoading]           = useState(false)
+
+  const switchTab = (t: 'login' | 'register') => {
+    setTab(t); setError(''); setRegSuccess(false); setPassword(''); setConfirm('')
+  }
+
+  // ── Firebase: Google popup ────────────────────────────────────────────────
+  const handleGoogle = async () => {
+    setError(''); setLoading(true)
+    try { await signInWithPopup(auth, googleProvider) }
+    catch (e: any) { setError(friendlyFirebaseError(e.code)) }
+    setLoading(false)
+  }
+
+  // ── Firebase: email/password ──────────────────────────────────────────────
+  const handleFirebaseSubmit = async (e: React.FormEvent) => {
+    e.preventDefault(); setError('')
+    if (!emailOrUser || !password) { setError('請填寫所有欄位'); return }
+    setLoading(true)
+    try {
+      if (tab === 'register') {
+        if (password.length < 6) { setError('密碼至少需要 6 個字元'); setLoading(false); return }
+        if (password !== confirm) { setError('兩次密碼不一致'); setLoading(false); return }
+        const cred = await createUserWithEmailAndPassword(auth, emailOrUser, password)
+        if (displayName.trim()) await updateProfile(cred.user, { displayName: displayName.trim() })
+        setRegSuccess(true); switchTab('login')
+      } else {
+        await signInWithEmailAndPassword(auth, emailOrUser, password)
+      }
+    } catch (e: any) { setError(friendlyFirebaseError(e.code)) }
+    setLoading(false)
+  }
+
+  // ── localStorage fallback ─────────────────────────────────────────────────
+  const handleLocalSubmit = (e: React.FormEvent) => {
+    e.preventDefault(); setError('')
+    const u = emailOrUser.trim()
+    if (!u || !password) { setError('請填寫所有欄位'); return }
+    if (tab === 'register') {
+      if (password !== confirm) { setError('兩次密碼不一致'); return }
+      const err = onLsRegister(u, password)
+      if (err) { setError(err); return }
+      setRegSuccess(true); switchTab('login')
+    } else {
+      if (!onLsLogin(u, password)) { setError('帳號或密碼錯誤'); return }
+      onLsLoginSuccess(u)
+    }
+  }
+
+  const isFirebase = mode === 'firebase'
+
+  return (
+    <div className="min-h-screen bg-gray-950 flex items-center justify-center p-4">
+      <div className="w-full max-w-sm space-y-6">
+        {/* Brand */}
+        <div className="text-center space-y-1">
+          <div className="flex items-center justify-center gap-2 mb-2">
+            <TrendingUp className="text-blue-400" size={28} />
+            <h1 className="text-2xl font-bold text-white">台股 ML 預測系統</h1>
+          </div>
+          <p className="text-slate-500 text-sm">AI 技術分析 · RandomForest 預測</p>
+        </div>
+
+        <div className="bg-slate-900 border border-slate-800 rounded-2xl p-8 shadow-2xl space-y-5">
+          {/* Tabs */}
+          <div className="flex bg-slate-800 rounded-lg p-1 gap-1">
+            {(['login', 'register'] as const).map(t => (
+              <button key={t} type="button" onClick={() => switchTab(t)}
+                className={`flex-1 flex items-center justify-center gap-1.5 py-2 rounded-md text-sm font-medium transition-colors ${
+                  tab === t ? 'bg-blue-600 text-white' : 'text-slate-400 hover:text-white'
+                }`}>
+                {t === 'login' ? <><LogIn size={14} /> 登入</> : <><UserPlus size={14} /> 註冊</>}
+              </button>
+            ))}
+          </div>
+
+          {/* Google button — only when Firebase is configured */}
+          {isFirebase && (
+            <>
+              <button type="button" onClick={handleGoogle} disabled={loading}
+                className="w-full flex items-center justify-center gap-2.5 bg-white hover:bg-gray-100 disabled:bg-gray-200 text-gray-800 font-medium py-2.5 rounded-lg transition-colors text-sm">
+                <GoogleIcon />
+                使用 Google 帳號{tab === 'register' ? '註冊' : '登入'}
+              </button>
+              <div className="flex items-center gap-3">
+                <div className="flex-1 h-px bg-slate-700" />
+                <span className="text-xs text-slate-500">或用電子郵件</span>
+                <div className="flex-1 h-px bg-slate-700" />
+              </div>
+            </>
+          )}
+
+          {regSuccess && (
+            <div className="bg-green-900/30 border border-green-700 rounded-lg px-3 py-2 text-green-400 text-sm text-center">
+              帳號建立成功！請登入
+            </div>
+          )}
+
+          {/* Form */}
+          <form onSubmit={isFirebase ? handleFirebaseSubmit : handleLocalSubmit} className="space-y-3">
+            {tab === 'register' && isFirebase && (
+              <div className="relative">
+                <User size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
+                <input type="text" value={displayName} onChange={e => setDisplayName(e.target.value)}
+                  placeholder="顯示名稱（選填）"
+                  className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-8 pr-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 placeholder-slate-500" />
+              </div>
+            )}
+
+            <div className="relative">
+              {isFirebase
+                ? <Mail size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
+                : <User size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
+              }
+              <input
+                type={isFirebase ? 'email' : 'text'}
+                value={emailOrUser}
+                onChange={e => setEmailOrUser(e.target.value)}
+                placeholder={isFirebase ? '電子郵件' : '帳號'}
+                autoFocus autoComplete="username"
+                className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-8 pr-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 placeholder-slate-500"
+              />
+            </div>
+
+            <div className="relative">
+              <Lock size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
+              <input type="password" value={password} onChange={e => setPassword(e.target.value)}
+                placeholder="密碼" autoComplete={tab === 'register' ? 'new-password' : 'current-password'}
+                className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-8 pr-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 placeholder-slate-500" />
+            </div>
+
+            {tab === 'register' && (
+              <div className="relative">
+                <Lock size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
+                <input type="password" value={confirm} onChange={e => setConfirm(e.target.value)}
+                  placeholder="確認密碼" autoComplete="new-password"
+                  className="w-full bg-slate-800 border border-slate-700 rounded-lg pl-8 pr-3 py-2.5 text-sm text-white focus:outline-none focus:border-blue-500 placeholder-slate-500" />
+              </div>
+            )}
+
+            {error && <p className="text-red-400 text-xs">{error}</p>}
+
+            <button type="submit" disabled={loading}
+              className="w-full bg-blue-600 hover:bg-blue-500 disabled:bg-blue-800 disabled:cursor-not-allowed text-white font-bold py-2.5 rounded-lg transition-colors text-sm">
+              {loading ? '處理中...'
+                : tab === 'login' ? (isFirebase ? '電子郵件登入' : '確認登入')
+                : '建立帳號'}
+            </button>
+          </form>
+
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function friendlyFirebaseError(code: string): string {
+  const map: Record<string, string> = {
+    'auth/user-not-found':         '找不到此帳號',
+    'auth/wrong-password':         '密碼錯誤',
+    'auth/invalid-credential':     '帳號或密碼錯誤',
+    'auth/email-already-in-use':   '此電子郵件已被使用',
+    'auth/invalid-email':          '電子郵件格式不正確',
+    'auth/weak-password':          '密碼強度不足（至少 6 字元）',
+    'auth/popup-closed-by-user':   '登入視窗已關閉，請再試一次',
+    'auth/network-request-failed': '網路連線錯誤，請稍後再試',
+    'auth/too-many-requests':      '嘗試次數過多，請稍後再試',
+  }
+  return map[code] ?? `登入失敗 (${code})`
+}
+
+// suppress unused warning — firebaseReady is imported for side-effect (init guard)
+void firebaseReady

frontend/src/components/MACDChart.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import {
+  ComposedChart,
+  Bar,
+  Line,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ReferenceLine,
+  ResponsiveContainer,
+} from 'recharts'
+import { OHLCVPoint } from '../api/stockApi'
+
+interface Props {
+  data: OHLCVPoint[]
+}
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (!active || !payload?.length) return null
+  const d: OHLCVPoint = payload[0]?.payload
+  return (
+    <div className="bg-slate-800 border border-slate-600 rounded p-2 text-xs shadow-lg">
+      <p className="text-slate-300">{label}</p>
+      {d.macd != null && (
+        <p>MACD: <span className="text-blue-400">{d.macd.toFixed(3)}</span></p>
+      )}
+      {d.macd_signal != null && (
+        <p>Signal: <span className="text-orange-400">{d.macd_signal.toFixed(3)}</span></p>
+      )}
+      {d.macd_hist != null && (
+        <p>
+          Hist:{' '}
+          <span className={d.macd_hist >= 0 ? 'text-green-400' : 'text-red-400'}>
+            {d.macd_hist.toFixed(3)}
+          </span>
+        </p>
+      )}
+    </div>
+  )
+}
+
+export const MACDChart: React.FC<Props> = ({ data }) => {
+  const len = data.length
+
+  return (
+    <ResponsiveContainer width="100%" height={180}>
+      <ComposedChart data={data} margin={{ top: 4, right: 16, left: 0, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+        <XAxis
+          dataKey="date"
+          tick={{ fill: '#94a3b8', fontSize: 10 }}
+          tickLine={false}
+          tickFormatter={(val, idx) => {
+            const step = Math.max(1, Math.floor(len / 10))
+            return idx % step === 0 ? val : ''
+          }}
+          interval={0}
+        />
+        <YAxis
+          tick={{ fill: '#94a3b8', fontSize: 10 }}
+          tickLine={false}
+          tickFormatter={(v) => v.toFixed(1)}
+          width={40}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        <Legend
+          wrapperStyle={{ fontSize: 12 }}
+          formatter={(value) => <span style={{ color: '#94a3b8' }}>{value}</span>}
+        />
+
+        <ReferenceLine y={0} stroke="#475569" strokeWidth={1} />
+
+        {/* MACD Histogram */}
+        <Bar dataKey="macd_hist" name="Histogram" isAnimationActive={false} maxBarSize={4}>
+          {data.map((d, i) => (
+            <Cell
+              key={i}
+              fill={(d.macd_hist ?? 0) >= 0 ? '#22c55e' : '#ef4444'}
+              fillOpacity={0.7}
+            />
+          ))}
+        </Bar>
+
+        {/* MACD Line */}
+        <Line
+          dataKey="macd"
+          stroke="#60a5fa"
+          strokeWidth={1.5}
+          dot={false}
+          name="MACD"
+          isAnimationActive={false}
+          connectNulls
+        />
+
+        {/* Signal Line */}
+        <Line
+          dataKey="macd_signal"
+          stroke="#fb923c"
+          strokeWidth={1.5}
+          dot={false}
+          name="Signal"
+          isAnimationActive={false}
+          connectNulls
+        />
+      </ComposedChart>
+    </ResponsiveContainer>
+  )
+}

frontend/src/components/PredictionPanel.tsx

@@ -0,0 +1,184 @@
+import React from 'react'
+import { TrendingUp, TrendingDown, Minus, AlertTriangle } from 'lucide-react'
+import { Prediction } from '../api/stockApi'
+
+interface Props {
+  prediction: Prediction
+  stockName: string
+}
+
+const signalConfig = {
+  BUY: {
+    label: 'BUY',
+    labelZh: '買入',
+    bg: 'bg-green-500/10',
+    border: 'border-green-500',
+    text: 'text-green-400',
+    badgeBg: 'bg-green-600',
+    icon: TrendingUp,
+  },
+  SELL: {
+    label: 'SELL',
+    labelZh: '賣出',
+    bg: 'bg-red-500/10',
+    border: 'border-red-500',
+    text: 'text-red-400',
+    badgeBg: 'bg-red-600',
+    icon: TrendingDown,
+  },
+  HOLD: {
+    label: 'HOLD',
+    labelZh: '持觀望',
+    bg: 'bg-yellow-500/10',
+    border: 'border-yellow-500',
+    text: 'text-yellow-400',
+    badgeBg: 'bg-yellow-600',
+    icon: Minus,
+  },
+}
+
+const confidenceColor = {
+  HIGH: 'text-green-400',
+  MEDIUM: 'text-yellow-400',
+  LOW: 'text-red-400',
+}
+
+const confidenceZh = {
+  HIGH: '高信心',
+  MEDIUM: '中信心',
+  LOW: '低信心',
+}
+
+export const PredictionPanel: React.FC<Props> = ({ prediction, stockName }) => {
+  const cfg = signalConfig[prediction.signal]
+  const Icon = cfg.icon
+  const probPct = Math.round(prediction.signal_probability * 100)
+  const changePositive = prediction.predicted_change_pct >= 0
+
+  return (
+    <div className={`rounded-xl border-2 ${cfg.border} ${cfg.bg} p-5 space-y-4`}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-bold text-white">{stockName} — ML 預測信號</h2>
+          <p className="text-xs text-slate-400 mt-0.5">預測期間：未來 5 個交易日</p>
+        </div>
+        <div className={`flex items-center gap-2 px-4 py-2 rounded-lg ${cfg.badgeBg} shadow-lg`}>
+          <Icon size={20} className="text-white" />
+          <span className="text-white font-black text-xl tracking-wider">{cfg.label}</span>
+          <span className="text-white/80 text-sm">({cfg.labelZh})</span>
+        </div>
+      </div>
+
+      {/* Price grid */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        <PriceCard
+          label="目前價格"
+          labelEn="Current Price"
+          value={`NT$ ${prediction.current_price.toFixed(2)}`}
+          valueClass="text-white"
+        />
+        <PriceCard
+          label="預測價格 (5日)"
+          labelEn="Predicted Price"
+          value={`NT$ ${prediction.predicted_price.toFixed(2)}`}
+          sub={
+            <span className={changePositive ? 'text-green-400' : 'text-red-400'}>
+              {changePositive ? '+' : ''}{prediction.predicted_change_pct.toFixed(2)}%
+            </span>
+          }
+          valueClass={changePositive ? 'text-green-400' : 'text-red-400'}
+        />
+        <PriceCard
+          label="建議賣出目標"
+          labelEn="Sell Target"
+          value={`NT$ ${prediction.sell_target.toFixed(2)}`}
+          valueClass="text-green-300"
+        />
+        <PriceCard
+          label="停損價位"
+          labelEn="Stop Loss"
+          value={`NT$ ${prediction.stop_loss.toFixed(2)}`}
+          valueClass="text-red-300"
+        />
+      </div>
+
+      {/* Signal probability bar */}
+      <div className="space-y-1.5">
+        <div className="flex justify-between items-center text-xs">
+          <span className="text-slate-400">買入機率 (Buy Probability)</span>
+          <span className={`font-bold ${cfg.text}`}>{probPct}%</span>
+        </div>
+        <div className="h-2.5 bg-slate-700 rounded-full overflow-hidden">
+          <div
+            className={`h-full rounded-full transition-all duration-700 ${
+              probPct >= 60 ? 'bg-green-500' : probPct <= 35 ? 'bg-red-500' : 'bg-yellow-500'
+            }`}
+            style={{ width: `${probPct}%` }}
+          />
+        </div>
+        <div className="flex justify-between text-xs text-slate-500">
+          <span>強力賣出 (Strong Sell)</span>
+          <span>強力買入 (Strong Buy)</span>
+        </div>
+      </div>
+
+      {/* Confidence + accuracy */}
+      <div className="flex flex-wrap gap-3 text-sm">
+        <div className="flex items-center gap-1.5 bg-slate-800 rounded-lg px-3 py-1.5">
+          <span className="text-slate-400">信心度:</span>
+          <span className={`font-bold ${confidenceColor[prediction.confidence]}`}>
+            {prediction.confidence} ({confidenceZh[prediction.confidence]})
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 bg-slate-800 rounded-lg px-3 py-1.5">
+          <span className="text-slate-400">模型準確率:</span>
+          <span className="text-slate-200 font-semibold">
+            {(prediction.training_accuracy * 100).toFixed(1)}%
+          </span>
+        </div>
+      </div>
+
+      {/* Disclaimer */}
+      <div className="flex items-start gap-2 bg-slate-900/70 rounded-lg p-3 border border-slate-700">
+        <AlertTriangle size={14} className="text-yellow-400 mt-0.5 flex-shrink-0" />
+        <p className="text-xs text-slate-400 leading-relaxed">
+          <span className="text-yellow-400 font-semibold">免責聲明：</span>
+          本系統所有預測訊號僅供學術研究與教育用途，不構成任何投資建議。
+          機器學習模型無法保證未來績效，投資人應自行判斷並承擔風險。
+          {' '}
+          <span className="text-slate-500 italic">
+            (ML signals are for educational purposes only and do NOT constitute financial advice.)
+          </span>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Helper sub-component
+// ---------------------------------------------------------------------------
+
+interface PriceCardProps {
+  label: string
+  labelEn: string
+  value: string
+  valueClass?: string
+  sub?: React.ReactNode
+}
+
+const PriceCard: React.FC<PriceCardProps> = ({
+  label,
+  labelEn,
+  value,
+  valueClass = 'text-white',
+  sub,
+}) => (
+  <div className="bg-slate-900/60 rounded-lg p-3 space-y-1 border border-slate-700">
+    <p className="text-xs text-slate-400 leading-tight">{label}</p>
+    <p className="text-xs text-slate-500">{labelEn}</p>
+    <p className={`text-base font-bold ${valueClass} leading-tight`}>{value}</p>
+    {sub && <div className="text-xs font-semibold">{sub}</div>}
+  </div>
+)

frontend/src/components/RSIChart.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {
+  ComposedChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ReferenceLine,
+  ReferenceArea,
+  ResponsiveContainer,
+} from 'recharts'
+import { OHLCVPoint } from '../api/stockApi'
+
+interface Props {
+  data: OHLCVPoint[]
+}
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (!active || !payload?.length) return null
+  const rsi: number | undefined = payload[0]?.value
+  const zone =
+    rsi == null ? '' : rsi >= 70 ? ' (Overbought)' : rsi <= 30 ? ' (Oversold)' : ''
+  return (
+    <div className="bg-slate-800 border border-slate-600 rounded p-2 text-xs shadow-lg">
+      <p className="text-slate-300">{label}</p>
+      <p>
+        RSI:{' '}
+        <span
+          className={
+            rsi == null
+              ? 'text-white'
+              : rsi >= 70
+              ? 'text-red-400'
+              : rsi <= 30
+              ? 'text-green-400'
+              : 'text-white'
+          }
+        >
+          {rsi?.toFixed(1)}
+          {zone}
+        </span>
+      </p>
+    </div>
+  )
+}
+
+export const RSIChart: React.FC<Props> = ({ data }) => {
+  const len = data.length
+
+  return (
+    <ResponsiveContainer width="100%" height={180}>
+      <ComposedChart data={data} margin={{ top: 4, right: 16, left: 0, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+        <XAxis
+          dataKey="date"
+          tick={{ fill: '#94a3b8', fontSize: 10 }}
+          tickLine={false}
+          tickFormatter={(val, idx) => {
+            const step = Math.max(1, Math.floor(len / 10))
+            return idx % step === 0 ? val : ''
+          }}
+          interval={0}
+        />
+        <YAxis
+          domain={[0, 100]}
+          tick={{ fill: '#94a3b8', fontSize: 10 }}
+          tickLine={false}
+          ticks={[0, 30, 50, 70, 100]}
+          width={32}
+        />
+        <Tooltip content={<CustomTooltip />} />
+
+        {/* Overbought background zone */}
+        <ReferenceArea y1={70} y2={100} fill="#ef444422" fillOpacity={0.4} />
+        {/* Oversold background zone */}
+        <ReferenceArea y1={0} y2={30} fill="#22c55e22" fillOpacity={0.4} />
+
+        {/* Reference lines */}
+        <ReferenceLine y={70} stroke="#ef4444" strokeDasharray="4 4" strokeWidth={1} />
+        <ReferenceLine y={30} stroke="#22c55e" strokeDasharray="4 4" strokeWidth={1} />
+        <ReferenceLine y={50} stroke="#475569" strokeDasharray="2 4" strokeWidth={1} />
+
+        <Line
+          dataKey="rsi"
+          stroke="#a78bfa"
+          strokeWidth={1.5}
+          dot={false}
+          name="RSI"
+          isAnimationActive={false}
+          connectNulls
+        />
+      </ComposedChart>
+    </ResponsiveContainer>
+  )
+}

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Star, Trash2, ChevronRight } from 'lucide-react'
+
+interface FavoriteItem {
+  id: string
+  name: string
+}
+
+interface SidebarProps {
+  favorites: FavoriteItem[]
+  onSearch: (id: string, months: number) => void
+  onToggleFavorite: (id: string) => void
+  onViewFavorites: () => void
+  months: number
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  favorites,
+  onSearch,
+  onToggleFavorite,
+  onViewFavorites,
+  months,
+}) => (
+  <aside className="lg:col-span-1 space-y-4">
+    <div className="bg-slate-900 border border-slate-800 rounded-xl p-4">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Star className="text-yellow-500" size={16} fill="currentColor" />
+          <h2 className="font-bold text-white text-sm">我的最愛</h2>
+        </div>
+        {favorites.length > 0 && (
+          <button
+            onClick={onViewFavorites}
+            className="flex items-center gap-0.5 text-xs text-slate-500 hover:text-blue-400 transition-colors"
+          >
+            全部 <ChevronRight size={12} />
+          </button>
+        )}
+      </div>
+
+      {favorites.length === 0 ? (
+        <p className="text-xs text-slate-600 italic">尚未加入任何股票</p>
+      ) : (
+        <div className="space-y-1">
+          {favorites.map((fav) => (
+            <div key={fav.id} className="flex items-center justify-between group py-1">
+              <button
+                onClick={() => onSearch(fav.id, months)}
+                className="text-sm text-slate-300 hover:text-blue-400 transition-colors flex-1 text-left truncate"
+              >
+                <span className="font-mono font-bold mr-2 text-white">{fav.id}</span>
+                <span className="text-xs text-slate-400">{fav.name}</span>
+              </button>
+              <button
+                onClick={() => onToggleFavorite(fav.id)}
+                className="opacity-0 group-hover:opacity-100 p-1 text-slate-600 hover:text-red-400 transition-all flex-shrink-0"
+                title="移除"
+              >
+                <Trash2 size={13} />
+              </button>
+            </div>
+          ))}
+
+          <button
+            onClick={onViewFavorites}
+            className="w-full mt-2 pt-2 border-t border-slate-800 flex items-center justify-center gap-1 text-xs text-slate-500 hover:text-yellow-400 transition-colors py-1"
+          >
+            <Star size={11} />
+            管理我的最愛
+          </button>
+        </div>
+      )}
+    </div>
+  </aside>
+)

frontend/src/components/VolumeChart.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Cell,
+  ResponsiveContainer,
+} from 'recharts'
+import { OHLCVPoint } from '../api/stockApi'
+
+interface Props {
+  data: OHLCVPoint[]
+}
+
+function formatVolume(v: number): string {
+  if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`
+  if (v >= 1_000) return `${(v / 1_000).toFixed(0)}K`
+  return String(v)
+}
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (!active || !payload?.length) return null
+  const vol: number = payload[0]?.value
+  return (
+    <div className="bg-slate-800 border border-slate-600 rounded p-2 text-xs shadow-lg">
+      <p className="text-slate-300">{label}</p>
+      <p className="text-white font-semibold">Vol: {formatVolume(vol)}</p>
+    </div>
+  )
+}
+
+export const VolumeChart: React.FC<Props> = ({ data }) => {
+  const len = data.length
+
+  return (
+    <ResponsiveContainer width="100%" height={160}>
+      <BarChart data={data} margin={{ top: 4, right: 16, left: 0, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+        <XAxis
+          dataKey="date"
+          tick={{ fill: '#94a3b8', fontSize: 10 }}
+          tickLine={false}
+          tickFormatter={(val, idx) => {
+            const step = Math.max(1, Math.floor(len / 10))
+            return idx % step === 0 ? val : ''
+          }}
+          interval={0}
+        />
+        <YAxis
+          tick={{ fill: '#94a3b8', fontSize: 10 }}
+          tickLine={false}
+          tickFormatter={formatVolume}
+          width={48}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        <Bar dataKey="volume" isAnimationActive={false} maxBarSize={6}>
+          {data.map((d, i) => (
+            <Cell
+              key={i}
+              fill={d.close >= d.open ? '#22c55e' : '#ef4444'}
+              fillOpacity={0.8}
+            />
+          ))}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}

frontend/src/firebase.ts

@@ -0,0 +1,31 @@
+import { initializeApp, FirebaseApp } from 'firebase/app'
+import { getAuth, GoogleAuthProvider, Auth } from 'firebase/auth'
+import { getFirestore, Firestore } from 'firebase/firestore'
+
+const apiKey     = import.meta.env.VITE_FIREBASE_API_KEY            as string | undefined
+const authDomain = import.meta.env.VITE_FIREBASE_AUTH_DOMAIN        as string | undefined
+const projectId  = import.meta.env.VITE_FIREBASE_PROJECT_ID         as string | undefined
+
+// True only when all required env vars are present
+export const firebaseReady = !!(apiKey && authDomain && projectId)
+
+let app: FirebaseApp | null = null
+let _auth: Auth | null = null
+let _db: Firestore | null = null
+
+if (firebaseReady) {
+  app = initializeApp({
+    apiKey,
+    authDomain,
+    projectId,
+    storageBucket:     import.meta.env.VITE_FIREBASE_STORAGE_BUCKET      as string | undefined,
+    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID as string | undefined,
+    appId:             import.meta.env.VITE_FIREBASE_APP_ID              as string | undefined,
+  })
+  _auth = getAuth(app)
+  _db   = getFirestore(app)
+}
+
+export const auth           = _auth!
+export const db             = _db!
+export const googleProvider = new GoogleAuthProvider()

frontend/src/hooks/useFirestoreFavorites.ts

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react'
+import {
+  collection,
+  doc,
+  onSnapshot,
+  setDoc,
+  deleteDoc,
+  updateDoc,
+  serverTimestamp,
+} from 'firebase/firestore'
+import { db } from '../firebase'
+import { FavoriteItem } from '../components/FavoritesPage'
+import type { Market } from '../components/Header'
+
+// Firestore path: users/{uid}/favorites/{stockId}
+
+export function useFirestoreFavorites(uid: string | null) {
+  const [favorites, setFavorites] = useState<FavoriteItem[]>([])
+
+  // Real-time listener — updates automatically across tabs/devices
+  useEffect(() => {
+    if (!uid) { setFavorites([]); return }
+    const ref = collection(db, 'users', uid, 'favorites')
+    const unsub = onSnapshot(ref, (snap) => {
+      const items: FavoriteItem[] = snap.docs.map(d => d.data() as FavoriteItem)
+      // Sort by addedAt descending
+      items.sort((a, b) => ((b as any).addedAt?.seconds ?? 0) - ((a as any).addedAt?.seconds ?? 0))
+      setFavorites(items)
+    })
+    return unsub
+  }, [uid])
+
+  const addFavorite = async (id: string, name: string, market?: Market) => {
+    if (!uid) return
+    await setDoc(doc(db, 'users', uid, 'favorites', id), {
+      id,
+      name,
+      market: market ?? 'tw',
+      note: '',
+      addedAt: serverTimestamp(),
+    })
+  }
+
+  const removeFavorite = async (id: string) => {
+    if (!uid) return
+    await deleteDoc(doc(db, 'users', uid, 'favorites', id))
+  }
+
+  const toggleFavorite = async (id: string, name?: string, market?: Market) => {
+    const exists = favorites.find(f => f.id === id)
+    if (exists) {
+      await removeFavorite(id)
+    } else {
+      await addFavorite(id, name ?? id, market)
+    }
+  }
+
+  const updateNote = async (id: string, note: string) => {
+    if (!uid) return
+    await updateDoc(doc(db, 'users', uid, 'favorites', id), { note })
+  }
+
+  return { favorites, toggleFavorite, removeFavorite, updateNote }
+}

frontend/src/index.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body { @apply bg-gray-950 text-gray-100; }

frontend/src/main.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode><App /></React.StrictMode>
+)

routers/stock.py

@@ -18,6 +18,7 @@ from data.fetcher import (
     detect_exchange,
     is_us_ticker,
 )
+from data.fund_fetcher import search_funds
 from indicators.technical import add_all_indicators
 from models.predictor import StockPredictor
 
@@ -77,7 +78,9 @@ def _get_predictor(stock_no: str, df_with_indicators) -> StockPredictor:
 async def search_endpoint(q: str = Query(..., min_length=1), market: str = Query(default="tw")):
     """Search stocks by name or number. Returns up to 20 matches."""
     try:
-        if market in ("us", "fund"):
+        if market == "fund":
+            results = search_funds(q)
+        elif market == "us":
             results = search_us(q)
         else:
             results = search_stocks(q)

static/assets/{index-DpNIV5k-.css → index-BnFVDQ43.css}

@@ -1 +1 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.left-2\.5{left:.625rem}.left-3{left:.75rem}.top-0{top:0}.top-1\/2{top:50%}.top-2\.5{top:.625rem}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-auto{margin-right:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-2\.5{height:.625rem}.h-4{height:1rem}.h-7{height:1.75rem}.h-full{height:100%}.h-px{height:1px}.max-h-72{max-height:18rem}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-4{width:1rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-full{width:100%}.max-w-7xl{max-width:80rem}.max-w-\[120px\]{max-width:120px}.max-w-\[160px\]{max-width:160px}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-green-700{--tw-border-opacity: 1;border-color:rgb(21 128 61 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-red-600{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}.border-red-700{--tw-border-opacity: 1;border-color:rgb(185 28 28 / var(--tw-border-opacity, 1))}.border-slate-600{--tw-border-opacity: 1;border-color:rgb(71 85 105 / var(--tw-border-opacity, 1))}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-yellow-500{--tw-border-opacity: 1;border-color:rgb(234 179 8 / var(--tw-border-opacity, 1))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-blue-600\/20{background-color:#2563eb33}.bg-blue-900\/50{background-color:#1e3a8a80}.bg-gray-950{--tw-bg-opacity: 1;background-color:rgb(3 7 18 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-500\/10{background-color:#22c55e1a}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-green-900\/30{background-color:#14532d4d}.bg-green-900\/50{background-color:#14532d80}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-purple-900\/50{background-color:#581c8780}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-500\/10{background-color:#ef44441a}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.bg-red-900\/30{background-color:#7f1d1d4d}.bg-red-900\/40{background-color:#7f1d1d66}.bg-red-900\/50{background-color:#7f1d1d80}.bg-slate-700{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-slate-900\/60{background-color:#0f172a99}.bg-slate-900\/70{background-color:#0f172ab3}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-500{--tw-bg-opacity: 1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.bg-yellow-500\/10{background-color:#eab3081a}.bg-yellow-500\/20{background-color:#eab30833}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0{padding-bottom:0}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-7{padding-left:1.75rem}.pl-8{padding-left:2rem}.pr-3{padding-right:.75rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[10px\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-indigo-400{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.text-orange-400{--tw-text-opacity: 1;color:rgb(251 146 60 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity: 1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-red-300{--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-slate-200{--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/80{color:#fffc}.text-yellow-300{--tw-text-opacity: 1;color:rgb(253 224 71 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.placeholder-slate-500::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(100 116 139 / var(--tw-placeholder-opacity, 1))}.placeholder-slate-500::placeholder{--tw-placeholder-opacity: 1;color:rgb(100 116 139 / var(--tw-placeholder-opacity, 1))}.placeholder-slate-600::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(71 85 105 / var(--tw-placeholder-opacity, 1))}.placeholder-slate-600::placeholder{--tw-placeholder-opacity: 1;color:rgb(71 85 105 / var(--tw-placeholder-opacity, 1))}.opacity-0{opacity:0}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-700{transition-duration:.7s}body{--tw-bg-opacity: 1;background-color:rgb(3 7 18 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.hover\:border-slate-600:hover{--tw-border-opacity: 1;border-color:rgb(71 85 105 / var(--tw-border-opacity, 1))}.hover\:bg-blue-500:hover{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-600\/40:hover{background-color:#2563eb66}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-indigo-500:hover{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-800\/50:hover{background-color:#1e293b80}.hover\:text-blue-400:hover{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.hover\:text-red-400:hover{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.hover\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\:text-slate-400:hover{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-yellow-400:hover{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:border-slate-500:focus{--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-blue-800:disabled{--tw-bg-opacity: 1;background-color:rgb(30 64 175 / var(--tw-bg-opacity, 1))}.disabled\:bg-gray-200:disabled{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.disabled\:bg-indigo-800:disabled{--tw-bg-opacity: 1;background-color:rgb(55 48 163 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 640px){.sm\:ml-2{margin-left:.5rem}.sm\:inline{display:inline}.sm\:w-48{width:12rem}.sm\:w-auto{width:auto}.sm\:flex-none{flex:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}}@media (min-width: 1024px){.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width: 1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.left-2\.5{left:.625rem}.left-3{left:.75rem}.right-0{right:0}.right-2{right:.5rem}.top-0{top:0}.top-1\/2{top:50%}.top-2\.5{top:.625rem}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-2\.5{height:.625rem}.h-4{height:1rem}.h-7{height:1.75rem}.h-full{height:100%}.h-px{height:1px}.max-h-64{max-height:16rem}.min-h-screen{min-height:100vh}.w-4{width:1rem}.w-7{width:1.75rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0px}.min-w-\[16px\]{min-width:16px}.max-w-7xl{max-width:80rem}.max-w-\[100px\]{max-width:100px}.max-w-\[160px\]{max-width:160px}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-green-700{--tw-border-opacity: 1;border-color:rgb(21 128 61 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-red-700{--tw-border-opacity: 1;border-color:rgb(185 28 28 / var(--tw-border-opacity, 1))}.border-slate-600{--tw-border-opacity: 1;border-color:rgb(71 85 105 / var(--tw-border-opacity, 1))}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-yellow-500{--tw-border-opacity: 1;border-color:rgb(234 179 8 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-blue-600\/20{background-color:#2563eb33}.bg-blue-900\/50{background-color:#1e3a8a80}.bg-gray-950{--tw-bg-opacity: 1;background-color:rgb(3 7 18 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-500\/10{background-color:#22c55e1a}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-green-900\/30{background-color:#14532d4d}.bg-green-900\/50{background-color:#14532d80}.bg-purple-900\/50{background-color:#581c8780}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-500\/10{background-color:#ef44441a}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.bg-red-900\/30{background-color:#7f1d1d4d}.bg-slate-700{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-slate-900\/60{background-color:#0f172a99}.bg-slate-900\/70{background-color:#0f172ab3}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-500{--tw-bg-opacity: 1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.bg-yellow-500\/10{background-color:#eab3081a}.bg-yellow-500\/20{background-color:#eab30833}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.bg-yellow-900\/50{background-color:#713f1280}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pl-7{padding-left:1.75rem}.pl-8{padding-left:2rem}.pr-3{padding-right:.75rem}.pr-7{padding-right:1.75rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[10px\]{font-size:10px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-orange-400{--tw-text-opacity: 1;color:rgb(251 146 60 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity: 1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-red-300{--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-slate-200{--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/80{color:#fffc}.text-yellow-300{--tw-text-opacity: 1;color:rgb(253 224 71 / var(--tw-text-opacity, 1))}.text-yellow-400{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.placeholder-slate-500::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(100 116 139 / var(--tw-placeholder-opacity, 1))}.placeholder-slate-500::placeholder{--tw-placeholder-opacity: 1;color:rgb(100 116 139 / var(--tw-placeholder-opacity, 1))}.placeholder-slate-600::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(71 85 105 / var(--tw-placeholder-opacity, 1))}.placeholder-slate-600::placeholder{--tw-placeholder-opacity: 1;color:rgb(71 85 105 / var(--tw-placeholder-opacity, 1))}.opacity-0{opacity:0}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-700{transition-duration:.7s}body{--tw-bg-opacity: 1;background-color:rgb(3 7 18 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.hover\:border-slate-600:hover{--tw-border-opacity: 1;border-color:rgb(71 85 105 / var(--tw-border-opacity, 1))}.hover\:bg-blue-500:hover{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-600\/40:hover{background-color:#2563eb66}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\:text-blue-400:hover{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.hover\:text-red-400:hover{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.hover\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\:text-slate-400:hover{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:text-yellow-400:hover{--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity, 1))}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:border-slate-500:focus{--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-blue-800:disabled{--tw-bg-opacity: 1;background-color:rgb(30 64 175 / var(--tw-bg-opacity, 1))}.disabled\:bg-gray-200:disabled{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 640px){.sm\:ml-auto{margin-left:auto}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:w-52{width:13rem}.sm\:flex-none{flex:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}}@media (min-width: 1024px){.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

static/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>台股預測系統</title>
-    <script type="module" crossorigin src="/assets/index-DsCDWin_.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DpNIV5k-.css">
+    <script type="module" crossorigin src="/assets/index-BrxmzIxi.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BnFVDQ43.css">
   </head>
   <body>
     <div id="root"></div>