From fd64d4357449992f9082ecb2b9ba561e358fe1bb Mon Sep 17 00:00:00 2001
From: Lxy <windsdreaming@163.com>
Date: Wed, 20 May 2026 23:19:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD;=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=87=AA=E9=80=89=E7=AD=89=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 DESIGN.md                        |  185 +++
 app/static/futures_analysis.css  | 2151 ++++++++++++++++++++++++------
 app/static/futures_analysis.html |  428 +++---
 app/static/futures_analysis.js   |  838 ++++++------
 4 files changed, 2686 insertions(+), 916 deletions(-)
 create mode 100644 DESIGN.md

diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..2b71ea3
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,185 @@
+# Design System Inspired by Revolut
+
+## 1. Visual Theme & Atmosphere
+
+Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
+
+The color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
+
+What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.
+
+**Key Characteristics:**
+- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines
+- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens
+- Universal pill buttons (9999px radius) with generous padding (14px 32px)
+- Inter for body text with positive letter-spacing (0.16px–0.24px)
+- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
+- Zero shadows detected — depth through color contrast only
+- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text
+- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface
+- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface
+
+### Brand / Interactive
+- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue
+- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent
+- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue
+
+### Semantic
+- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error/destructive
+- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent
+- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states
+- **Yellow** (`#b09000`): `--rui-color-yellow`, attention
+- **Teal** (`#00a87e`): `--rui-color-teal`, success/positive
+- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success
+- **Green Text** (`#006400`): `--website-color-green-text`, green text
+- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational
+- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent
+- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text
+
+### Neutral Scale
+- **Mid Slate** (`#505a63`): Secondary text
+- **Cool Gray** (`#8d969e`): Muted text, tertiary
+- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders/dividers
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Aeonik Pro` — geometric grotesque, no detected fallbacks
+- **Body / UI**: `Inter` — standard system sans
+- **Fallback**: `Arial` for specific button contexts
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
+| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
+| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
+| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
+| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
+| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
+| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
+| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
+| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
+| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
+| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |
+
+### Principles
+- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.
+- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.
+- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark Pill**
+- Background: `#191c1f`
+- Text: `#ffffff`
+- Padding: 14px 32px
+- Radius: 9999px (full pill)
+- Hover: opacity 0.85
+- Focus: `0 0 0 0.125rem` ring
+
+**Secondary Light Pill**
+- Background: `#f4f4f4`
+- Text: `#000000`
+- Padding: 14px 34px
+- Radius: 9999px
+- Hover: opacity 0.85
+
+**Outlined Pill**
+- Background: transparent
+- Text: `#191c1f`
+- Border: `2px solid #191c1f`
+- Padding: 14px 32px
+- Radius: 9999px
+
+**Ghost on Dark**
+- Background: `rgba(244, 244, 244, 0.1)`
+- Text: `#f4f4f4`
+- Border: `2px solid #f4f4f4`
+- Padding: 14px 32px
+- Radius: 9999px
+
+### Cards & Containers
+- Radius: 12px (small), 20px (cards)
+- No shadows — flat surfaces with color contrast
+- Dark and light section alternation
+
+### Navigation
+- Aeonik Pro 20px weight 500
+- Clean header, hamburger toggle at 12px radius
+- Pill CTAs right-aligned
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
+- Large section spacing: 80px–120px
+
+### Border Radius Scale
+- Standard (12px): Navigation, small buttons
+- Card (20px): Feature cards
+- Pill (9999px): All buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
+| Focus | `0 0 0 0.125rem` ring | Accessibility focus |
+
+**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Aeonik Pro weight 500 for all display headings
+- Apply 9999px radius to all buttons — pill shape is universal
+- Use generous button padding (14px 32px)
+- Keep the palette to near-black + white for marketing surfaces
+- Apply positive letter-spacing on Inter body text
+
+### Don't
+- Don't use shadows — Revolut is flat by design
+- Don't use bold (700) for Aeonik Pro headings — 500 is the weight
+- Don't use small buttons — the generous padding is intentional
+- Don't apply semantic colors to marketing surfaces — they're for the product
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <400px | Compact, single column |
+| Mobile | 400–720px | Standard mobile |
+| Tablet | 720–1024px | 2-column layouts |
+| Desktop | 1024–1280px | Standard desktop |
+| Large | 1280–1920px | Full layout |
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Dark: Revolut Dark (`#191c1f`)
+- Light: White (`#ffffff`)
+- Surface: Light (`#f4f4f4`)
+- Blue: Revolut Blue (`#494fdf`)
+- Danger: Red (`#e23b4a`)
+- Success: Teal (`#00a87e`)
+
+### Example Component Prompts
+- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
+- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."
+
+### Iteration Guide
+1. Aeonik Pro 500 for headings — never bold
+2. All buttons are pills (9999px) with generous padding
+3. Zero shadows — flat is the Revolut identity
+4. Near-black + white for marketing, semantic colors for product
diff --git a/app/static/futures_analysis.css b/app/static/futures_analysis.css
index f256196..ebe543c 100644
--- a/app/static/futures_analysis.css
+++ b/app/static/futures_analysis.css
@@ -1,23 +1,30 @@
+/* ============================================
+   期货智析 - 科技感界面样式
+   风格：低调鲜明、赛博朋克科技感
+   ============================================ */
+
 :root {
-    --bg-primary: #0d0f14;
-    --bg-secondary: #151820;
-    --bg-card: #1a1d28;
-    --bg-card-hover: #222633;
-    --border-color: #2a2d3a;
-    --text-primary: #e8eaed;
-    --text-secondary: #9aa0ab;
-    --text-muted: #6b7280;
-    --green: #22c55e;
-    --green-bg: rgba(34, 197, 94, 0.15);
-    --green-border: rgba(34, 197, 94, 0.3);
-    --red: #ef4444;
-    --red-bg: rgba(239, 68, 68, 0.15);
-    --red-border: rgba(239, 68, 68, 0.3);
-    --orange: #f59e0b;
-    --orange-bg: rgba(245, 158, 11, 0.15);
-    --blue: #3b82f6;
+    --bg-primary: #06080d;
+    --bg-secondary: #0c1017;
+    --bg-card: rgba(15, 20, 30, 0.7);
+    --bg-card-hover: rgba(20, 28, 42, 0.8);
+    --border-color: rgba(56, 189, 248, 0.1);
+    --border-glow: rgba(56, 189, 248, 0.3);
+    
+    --text-primary: #e2e8f0;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+    
+    --cyan: #06b6d4;
+    --cyan-glow: rgba(6, 182, 212, 0.4);
     --purple: #8b5cf6;
-    --accent: #22c55e;
+    --purple-glow: rgba(139, 92, 246, 0.4);
+    --green: #10b981;
+    --green-glow: rgba(16, 185, 129, 0.4);
+    --red: #ef4444;
+    --red-glow: rgba(239, 68, 68, 0.4);
+    --amber: #f59e0b;
+    --amber-glow: rgba(245, 158, 11, 0.4);
 }
 
 * {
@@ -27,25 +34,59 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
     background: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.5;
+    overflow-x: hidden;
+}
+
+/* 背景网格和光效 */
+.bg-grid {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
+    background-size: 40px 40px;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.bg-glow {
+    position: fixed;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(ellipse at 30% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
+                radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
 }
 
 .app-container {
+    position: relative;
+    z-index: 1;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }
 
-/* 顶部导航 */
+/* ============================================
+   顶部导航
+   ============================================ */
 .top-nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 12px 24px;
-    background: var(--bg-secondary);
+    padding: 0 24px;
+    height: 56px;
+    background: rgba(6, 8, 13, 0.8);
+    backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--border-color);
     position: sticky;
     top: 0;
@@ -64,16 +105,31 @@ body {
 }
 
 .logo-icon {
+    position: relative;
     width: 36px;
     height: 36px;
-    background: var(--green-bg);
-    border: 1px solid var(--green-border);
-    border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--green);
-    font-size: 18px;
+    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.2));
+    border: 1px solid var(--border-glow);
+    border-radius: 10px;
+    color: var(--cyan);
+    font-size: 16px;
+}
+
+.logo-pulse {
+    position: absolute;
+    inset: -2px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, var(--cyan), var(--purple));
+    opacity: 0;
+    animation: pulse 3s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 0; transform: scale(1); }
+    50% { opacity: 0.3; transform: scale(1.05); }
 }
 
 .logo-text {
@@ -82,51 +138,51 @@ body {
 }
 
 .logo-title {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
-    color: var(--text-primary);
+    background: linear-gradient(135deg, var(--text-primary), var(--cyan));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .logo-subtitle {
-    font-size: 11px;
-    color: var(--text-secondary);
+    font-size: 9px;
+    color: var(--text-muted);
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
 }
 
 .nav-center {
     display: flex;
-    gap: 8px;
+    gap: 4px;
 }
 
 .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     padding: 8px 16px;
     color: var(--text-secondary);
     text-decoration: none;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
-    border-radius: 6px;
+    border-radius: 8px;
     transition: all 0.2s;
-    position: relative;
 }
 
 .nav-item:hover {
     color: var(--text-primary);
-    background: var(--bg-card);
+    background: rgba(56, 189, 248, 0.08);
 }
 
 .nav-item.active {
-    color: var(--green);
+    color: var(--cyan);
+    background: rgba(6, 182, 212, 0.1);
 }
 
-.nav-item.active::after {
-    content: '';
-    position: absolute;
-    bottom: -4px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 24px;
-    height: 2px;
-    background: var(--green);
-    border-radius: 1px;
+.nav-icon {
+    font-size: 14px;
 }
 
 .nav-right {
@@ -135,56 +191,66 @@ body {
     gap: 16px;
 }
 
-.datetime {
+.system-status {
     display: flex;
     align-items: center;
     gap: 6px;
-    color: var(--text-secondary);
-    font-size: 13px;
+    padding: 4px 10px;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    border-radius: 20px;
 }
 
-.nav-icon-btn {
-    color: var(--text-secondary);
-    text-decoration: none;
-    font-size: 16px;
-    padding: 6px;
-    border-radius: 6px;
-    transition: all 0.2s;
+.status-dot {
+    width: 6px;
+    height: 6px;
+    background: var(--green);
+    border-radius: 50%;
+    animation: blink 2s ease-in-out infinite;
 }
 
-.nav-icon-btn:hover {
-    color: var(--text-primary);
-    background: var(--bg-card);
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
 }
 
-.notification {
-    position: relative;
-    color: var(--text-secondary);
-    font-size: 16px;
-    cursor: pointer;
-    padding: 6px;
+.status-text {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--green);
+    letter-spacing: 1px;
 }
 
-.notification .badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 16px;
-    height: 16px;
-    background: var(--red);
-    border-radius: 50%;
-    font-size: 10px;
+.datetime {
+    font-size: 12px;
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.nav-btn {
+    width: 32px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white;
+    color: var(--text-secondary);
+    text-decoration: none;
+    border-radius: 8px;
+    transition: all 0.2s;
 }
 
-/* 主内容区 */
+.nav-btn:hover {
+    color: var(--cyan);
+    background: rgba(6, 182, 212, 0.1);
+}
+
+/* ============================================
+   主内容区
+   ============================================ */
 .main-content {
     flex: 1;
     padding: 20px 24px;
-    max-width: 1400px;
+    max-width: 1440px;
     margin: 0 auto;
     width: 100%;
 }
@@ -197,24 +263,31 @@ body {
     display: block;
 }
 
-/* 工具栏 */
-.toolbar {
+/* ============================================
+   搜索栏
+   ============================================ */
+.search-section {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    gap: 12px;
     margin-bottom: 16px;
 }
 
 .search-box {
     flex: 1;
-    max-width: 600px;
+    max-width: 480px;
     display: flex;
     align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 10px 14px;
-    gap: 10px;
+    border-radius: 10px;
+    transition: all 0.2s;
+}
+
+.search-box:focus-within {
+    border-color: var(--cyan);
+    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
 }
 
 .search-box i {
@@ -234,155 +307,303 @@ body {
     color: var(--text-muted);
 }
 
-.view-toggle {
+.search-box kbd {
+    padding: 2px 6px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 11px;
+    color: var(--text-muted);
+}
+
+.view-controls {
     display: flex;
     gap: 4px;
 }
 
-.toggle-btn {
-    width: 36px;
-    height: 36px;
+.view-btn {
+    width: auto;
+    height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 6px;
+    padding: 8px 14px;
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 6px;
-    color: var(--text-secondary);
+    border-radius: 8px;
+    color: var(--text-muted);
     cursor: pointer;
     transition: all 0.2s;
+    font-size: 13px;
 }
 
-.toggle-btn.active {
-    background: var(--green);
-    border-color: var(--green);
-    color: white;
+.view-btn i {
+    font-size: 14px;
+}
+
+.view-btn span {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.view-btn:hover {
+    color: var(--text-secondary);
+}
+
+.view-btn.active {
+    background: rgba(6, 182, 212, 0.15);
+    border-color: var(--cyan);
+    color: var(--cyan);
 }
 
-/* 筛选栏 */
+/* ============================================
+   筛选栏
+   ============================================ */
 .filter-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 12px 16px;
     margin-bottom: 16px;
 }
 
-.filter-group, .sort-group {
+.filter-tabs {
     display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.filter-label {
-    color: var(--text-secondary);
-    font-size: 13px;
+    gap: 6px;
 }
 
-.filter-btn {
-    padding: 6px 12px;
-    background: var(--bg-secondary);
+.filter-tab {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 6px;
+    border-radius: 8px;
     color: var(--text-secondary);
     font-size: 13px;
     cursor: pointer;
     transition: all 0.2s;
 }
 
-.filter-btn:hover {
+.filter-tab:hover {
     border-color: var(--text-muted);
     color: var(--text-primary);
 }
 
-.filter-btn.active {
-    background: var(--green);
-    border-color: var(--green);
-    color: white;
+.filter-tab.active {
+    background: rgba(6, 182, 212, 0.12);
+    border-color: var(--cyan);
+    color: var(--cyan);
+}
+
+.filter-tab i {
+    font-size: 12px;
+}
+
+.filter-count {
+    padding: 1px 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    font-size: 11px;
 }
 
 .sort-select {
-    padding: 6px 12px;
-    background: var(--bg-secondary);
+    position: relative;
+}
+
+.sort-select select {
+    padding: 8px 32px 8px 12px;
+    background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 6px;
+    border-radius: 8px;
     color: var(--text-primary);
     font-size: 13px;
-    cursor: pointer;
+    font-weight: 500;
     outline: none;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 12px;
+    transition: all 0.2s;
 }
 
-/* 统计栏 */
-.stats-bar {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 20px;
-    font-size: 14px;
-    color: var(--text-secondary);
+.sort-select select:hover {
+    border-color: var(--text-muted);
+}
+
+.sort-select select:focus {
+    border-color: var(--cyan);
+    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
 }
 
-.stats-bar strong {
+.sort-select select option {
+    background: var(--bg-card);
     color: var(--text-primary);
+    padding: 8px;
+}
+
+/* 下拉菜单展开样式 */
+.sort-select select:focus option {
+    background: var(--bg-card);
+}
+
+.sort-select select option:hover,
+.sort-select select option:checked {
+    background: rgba(6, 182, 212, 0.1) !important;
+}
+
+/* ============================================
+   统计概览
+   ============================================ */
+.stats-overview {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.stat-card {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 18px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    transition: all 0.2s;
 }
 
-.stat-up {
+.stat-card:hover {
+    border-color: var(--border-glow);
+    transform: translateY(-2px);
+}
+
+.stat-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(56, 189, 248, 0.1);
+    border-radius: 10px;
+    color: var(--cyan);
+    font-size: 16px;
+}
+
+.stat-card.up .stat-icon {
+    background: rgba(16, 185, 129, 0.1);
     color: var(--green);
 }
 
-.stat-down {
+.stat-card.down .stat-icon {
+    background: rgba(239, 68, 68, 0.1);
     color: var(--red);
 }
 
-/* 品种卡片网格 */
+.stat-card.neutral .stat-icon {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--amber);
+}
+
+.stat-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-value {
+    font-size: 22px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+/* ============================================
+   品种卡片网格
+   ============================================ */
 .futures-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
-    gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    gap: 14px;
 }
 
 .futures-card {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 14px;
     padding: 18px;
     cursor: pointer;
-    transition: all 0.2s;
+    transition: all 0.25s;
+    position: relative;
+    overflow: hidden;
+}
+
+.futures-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
+    opacity: 0;
+    transition: opacity 0.25s;
 }
 
 .futures-card:hover {
     background: var(--bg-card-hover);
-    border-color: var(--text-muted);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    border-color: var(--border-glow);
+    transform: translateY(-3px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+.futures-card:hover::before {
+    opacity: 1;
 }
 
-.card-header {
+.card-top {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-bottom: 12px;
+    margin-bottom: 14px;
 }
 
-.card-title {
+.card-symbol {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
+}
+
+.symbol-tag {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.15));
+    border: 1px solid var(--border-glow);
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--cyan);
 }
 
 .card-name {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
 }
 
 .card-code {
-    font-size: 12px;
+    font-size: 11px;
     color: var(--text-muted);
-    background: var(--bg-secondary);
-    padding: 2px 6px;
-    border-radius: 4px;
 }
 
 .card-price {
@@ -391,178 +612,161 @@ body {
 
 .price-value {
     font-size: 20px;
-    font-weight: 600;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
 }
 
 .price-change {
-    font-size: 13px;
+    font-size: 12px;
+    font-weight: 500;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 3px;
     justify-content: flex-end;
 }
 
-.up {
-    color: var(--green);
-}
-
-.down {
-    color: var(--red);
-}
+.up { color: var(--green); }
+.down { color: var(--red); }
+.neutral { color: var(--amber); }
 
 .suggestion-badge {
     display: inline-block;
     padding: 4px 10px;
-    border-radius: 4px;
+    border-radius: 6px;
     font-size: 12px;
     font-weight: 500;
     margin-bottom: 12px;
 }
 
 .suggestion-badge.up {
-    background: var(--green-bg);
+    background: rgba(16, 185, 129, 0.12);
     color: var(--green);
-    border: 1px solid var(--green-border);
+    border: 1px solid rgba(16, 185, 129, 0.25);
 }
 
 .suggestion-badge.down {
-    background: var(--red-bg);
+    background: rgba(239, 68, 68, 0.12);
     color: var(--red);
-    border: 1px solid var(--red-border);
+    border: 1px solid rgba(239, 68, 68, 0.25);
 }
 
 .suggestion-badge.neutral {
-    background: rgba(107, 114, 128, 0.15);
-    color: var(--text-muted);
-    border: 1px solid rgba(107, 114, 128, 0.3);
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--amber);
+    border: 1px solid rgba(245, 158, 11, 0.2);
 }
 
-.card-section {
+.card-metrics {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
     margin-bottom: 12px;
 }
 
-.section-label {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-bottom: 8px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.period-tags {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-}
-
-.period-tag {
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 12px;
+.metric-item {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: 4px;
 }
 
-.period-tag.up {
-    background: var(--green-bg);
-    color: var(--green);
-    border: 1px solid var(--green-border);
-}
-
-.period-tag.down {
-    background: var(--red-bg);
-    color: var(--red);
-    border: 1px solid var(--red-border);
-}
-
-.period-tag.neutral {
-    background: rgba(107, 114, 128, 0.1);
+.metric-label {
+    font-size: 11px;
     color: var(--text-muted);
-    border: 1px solid rgba(107, 114, 128, 0.2);
 }
 
-.progress-bar {
-    height: 6px;
-    background: var(--bg-secondary);
-    border-radius: 3px;
+.metric-bar {
+    height: 4px;
+    background: rgba(255, 255, 255, 0.06);
+    border-radius: 2px;
     overflow: hidden;
-    margin-bottom: 4px;
 }
 
-.progress-fill {
+.metric-fill {
     height: 100%;
-    border-radius: 3px;
+    border-radius: 2px;
     transition: width 0.3s;
 }
 
-.progress-fill.up {
-    background: var(--green);
-}
-
-.progress-fill.down {
-    background: var(--red);
-}
+.metric-fill.up { background: var(--green); }
+.metric-fill.down { background: var(--red); }
+.metric-fill.orange { background: var(--amber); }
 
-.progress-fill.orange {
-    background: var(--orange);
+.metric-value {
+    font-size: 13px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
 }
 
-.progress-info {
+.period-trends {
     display: flex;
-    justify-content: space-between;
-    font-size: 12px;
-}
-
-.progress-label {
-    color: var(--text-secondary);
+    gap: 6px;
+    margin-bottom: 12px;
 }
 
-.progress-value {
-    font-weight: 500;
+.period-tag {
+    flex: 1;
+    padding: 5px 8px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font-size: 11px;
+    text-align: center;
+    transition: all 0.2s;
 }
 
-.key-levels-row {
-    display: flex;
-    justify-content: space-between;
-    font-size: 12px;
+.period-tag.up {
+    background: rgba(16, 185, 129, 0.1);
+    border-color: rgba(16, 185, 129, 0.25);
+    color: var(--green);
 }
 
-.level-label {
-    color: var(--text-secondary);
+.period-tag.down {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: rgba(239, 68, 68, 0.25);
+    color: var(--red);
 }
 
-.level-value {
-    font-weight: 500;
+.period-tag.neutral {
+    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba(245, 158, 11, 0.2);
+    color: var(--amber);
 }
 
 .card-footer {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    align-items: center;
     padding-top: 12px;
     border-top: 1px solid var(--border-color);
 }
 
-.detail-link {
-    color: var(--text-secondary);
+.key-levels {
+    display: flex;
+    gap: 12px;
     font-size: 12px;
-    text-decoration: none;
+}
+
+.key-levels span {
     display: flex;
     align-items: center;
     gap: 4px;
-    transition: color 0.2s;
 }
 
-.detail-link:hover {
-    color: var(--green);
+.key-levels .label {
+    color: var(--text-muted);
 }
 
-/* 详情视图 */
-.detail-header {
-    margin-bottom: 20px;
+.detail-link {
+    font-size: 12px;
+    color: var(--cyan);
+    display: flex;
+    align-items: center;
+    gap: 4px;
 }
 
+/* ============================================
+   详情视图
+   ============================================ */
 .back-btn {
     display: inline-flex;
     align-items: center;
@@ -572,7 +776,7 @@ body {
     border: 1px solid var(--border-color);
     border-radius: 8px;
     color: var(--text-secondary);
-    font-size: 14px;
+    font-size: 13px;
     cursor: pointer;
     margin-bottom: 16px;
     transition: all 0.2s;
@@ -581,35 +785,64 @@ body {
 .back-btn:hover {
     background: var(--bg-card-hover);
     color: var(--text-primary);
+    border-color: var(--border-glow);
 }
 
-.detail-title-bar {
+.detail-header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 16px 20px;
+    border-radius: 14px;
+    margin-bottom: 16px;
 }
 
-.price-info {
+.header-left {
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+}
+
+.symbol-info {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+}
+
+.symbol-name {
+    font-size: 22px;
+    font-weight: 700;
+}
+
+.symbol-code {
+    font-size: 13px;
+    color: var(--text-muted);
+    padding: 2px 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+}
+
+.price-main {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 12px;
 }
 
-.current-price {
+.price-value {
     font-size: 28px;
     font-weight: 700;
-    color: var(--green);
+    font-variant-numeric: tabular-nums;
 }
 
 .price-change {
     font-size: 14px;
-    margin-top: 4px;
+    font-weight: 500;
 }
 
-.quote-info {
+.quote-grid {
     display: flex;
     gap: 24px;
 }
@@ -618,44 +851,51 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    gap: 4px;
 }
 
 .quote-label {
-    font-size: 12px;
+    font-size: 11px;
     color: var(--text-muted);
-    margin-bottom: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
 .quote-value {
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
 }
 
 /* 周期选择 */
-.period-selector {
+.period-bar {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 12px;
     margin-bottom: 16px;
 }
 
-.period-selector i {
-    color: var(--green);
-}
-
 .period-label {
-    color: var(--text-secondary);
     font-size: 13px;
-    margin-right: 8px;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.period-btns {
+    display: flex;
+    gap: 4px;
 }
 
 .period-btn {
-    padding: 8px 16px;
+    padding: 6px 16px;
     background: var(--bg-card);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     color: var(--text-secondary);
     font-size: 13px;
+    font-weight: 500;
     cursor: pointer;
     transition: all 0.2s;
 }
@@ -665,122 +905,147 @@ body {
 }
 
 .period-btn.active {
-    background: var(--green);
-    border-color: var(--green);
-    color: white;
+    background: rgba(6, 182, 212, 0.15);
+    border-color: var(--cyan);
+    color: var(--cyan);
 }
 
 /* 详情主体 */
 .detail-body {
     display: grid;
-    grid-template-columns: 1fr 340px;
-    gap: 20px;
+    grid-template-columns: 1fr 360px;
+    gap: 16px;
 }
 
-.chart-section {
+.chart-container {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 14px;
     padding: 16px;
 }
 
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.chart-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.chart-legend {
+    display: flex;
+    gap: 14px;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--text-muted);
+}
+
+.legend-dot {
+    width: 10px;
+    height: 3px;
+    border-radius: 2px;
+}
+
+.legend-dot.ma5 { background: #f59e0b; }
+.legend-dot.ma10 { background: #3b82f6; }
+.legend-dot.ma20 { background: #8b5cf6; }
+
 .kline-chart {
     width: 100%;
-    height: 500px;
+    height: 480px;
 }
 
-/* 分析面板 */
-.analysis-panel {
+/* 分析侧边栏 */
+.analysis-sidebar {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 14px;
 }
 
 .panel-card {
     background: var(--bg-card);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: 14px;
     padding: 16px;
+    transition: all 0.2s;
+}
+
+.panel-card:hover {
+    border-color: var(--border-glow);
 }
 
-.panel-title {
+.panel-header {
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 600;
     margin-bottom: 14px;
     color: var(--text-primary);
 }
 
-.panel-title i {
-    color: var(--green);
+.panel-header i {
+    color: var(--cyan);
+    font-size: 14px;
 }
 
-/* 交易建议 */
-.suggestion-box {
-    padding: 14px;
-    border-radius: 8px;
-    margin-bottom: 14px;
+/* AI建议卡片 */
+.suggestion-card .suggestion-content {
     text-align: center;
+    padding: 16px;
+    background: rgba(6, 182, 212, 0.06);
+    border: 1px solid rgba(6, 182, 212, 0.15);
+    border-radius: 10px;
+    margin-bottom: 14px;
 }
 
-.suggestion-box.up {
-    background: var(--green-bg);
-    border: 1px solid var(--green-border);
-}
-
-.suggestion-box.down {
-    background: var(--red-bg);
-    border: 1px solid var(--red-border);
-}
-
-.suggestion-label {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-bottom: 6px;
-}
-
-.suggestion-action {
+.suggestion-badge {
     font-size: 18px;
-    font-weight: 600;
+    font-weight: 700;
     margin-bottom: 6px;
 }
 
-.suggestion-box.up .suggestion-action {
-    color: var(--green);
-}
-
-.suggestion-box.down .suggestion-action {
-    color: var(--red);
-}
+.suggestion-badge.up { color: var(--green); }
+.suggestion-badge.down { color: var(--red); }
+.suggestion-badge.neutral { color: var(--amber); }
 
 .suggestion-reason {
     font-size: 12px;
     color: var(--text-secondary);
 }
 
-.suggestion-details {
+.trade-params {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 10px;
+    gap: 8px;
 }
 
-.detail-row {
+.param-row {
     display: flex;
     justify-content: space-between;
     padding: 8px 10px;
-    background: var(--bg-secondary);
+    background: rgba(255, 255, 255, 0.03);
     border-radius: 6px;
     font-size: 12px;
 }
 
-.detail-label {
+.param-label {
     color: var(--text-muted);
 }
 
-.detail-value {
-    font-weight: 500;
+.param-value {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
 }
 
 /* 技术指标 */
@@ -790,22 +1055,23 @@ body {
     gap: 10px;
 }
 
-.indicator-item {
+.indicator-cell {
     padding: 12px;
-    background: var(--bg-secondary);
+    background: rgba(255, 255, 255, 0.03);
     border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 }
 
-.indicator-name {
-    font-size: 12px;
+.indicator-label {
+    font-size: 11px;
     color: var(--text-muted);
-    margin-bottom: 6px;
 }
 
 .indicator-value {
     font-size: 14px;
     font-weight: 600;
-    margin-bottom: 4px;
 }
 
 .indicator-detail {
@@ -814,125 +1080,1236 @@ body {
 }
 
 /* 关键点位 */
-.levels-section {
-    margin-bottom: 12px;
-}
-
-.levels-section:last-child {
-    margin-bottom: 0;
+.levels-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
-.levels-header {
-    font-size: 12px;
+.level-group-label {
+    font-size: 11px;
     font-weight: 600;
-    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 6px;
+    display: block;
 }
 
-.levels-header.resistance {
-    color: var(--red);
+.level-group.resistance .level-group-label { color: var(--red); }
+.level-group.support .level-group-label { color: var(--green); }
+
+.level-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 6px 10px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 6px;
+    font-size: 12px;
 }
 
-.levels-header.support {
-    color: var(--green);
+.level-item span:first-child {
+    color: var(--text-muted);
+    font-weight: 500;
 }
 
-.level-row {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px 0;
-    border-bottom: 1px solid var(--border-color);
-    font-size: 13px;
+.level-item span:last-child {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
 }
 
-.level-row:last-child {
-    border-bottom: none;
+.level-divider {
+    height: 1px;
+    background: var(--border-color);
+    margin: 4px 0;
 }
 
-.level-row span:first-child {
-    color: var(--text-secondary);
+/* 多周期趋势 */
+.trends-container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
 }
 
-/* 多周期一致性 */
-.consistency-row {
+.trend-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 0;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.consistency-row:last-child {
-    border-bottom: none;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 6px;
 }
 
-.period-name {
-    font-size: 13px;
+.trend-period {
+    font-size: 12px;
     color: var(--text-secondary);
 }
 
-.consistency-badge {
-    padding: 4px 10px;
+.trend-badge {
+    padding: 3px 10px;
     border-radius: 4px;
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    gap: 4px;
+    font-size: 11px;
+    font-weight: 500;
 }
 
-.consistency-badge.up {
-    background: var(--green-bg);
+.trend-badge.up {
+    background: rgba(16, 185, 129, 0.12);
     color: var(--green);
 }
 
-.consistency-badge.down {
-    background: var(--red-bg);
+.trend-badge.down {
+    background: rgba(239, 68, 68, 0.12);
     color: var(--red);
 }
 
-.consistency-badge.neutral {
-    background: rgba(107, 114, 128, 0.15);
+.trend-badge.neutral {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--amber);
+}
+
+/* 趋势评分 */
+.score-display {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.score-ring {
+    position: relative;
+    width: 100px;
+    height: 100px;
+}
+
+.score-ring svg {
+    transform: rotate(-90deg);
+}
+
+.score-bg {
+    fill: none;
+    stroke: rgba(255, 255, 255, 0.06);
+    stroke-width: 8;
+}
+
+.score-fill {
+    fill: none;
+    stroke: url(#scoreGradient);
+    stroke-width: 8;
+    stroke-linecap: round;
+    stroke-dasharray: 283;
+    stroke-dashoffset: 283;
+    transition: stroke-dashoffset 0.8s ease-out;
+}
+
+.score-value {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.score-label {
+    font-size: 12px;
     color: var(--text-muted);
 }
 
-/* 响应式 */
+/* ============================================
+   响应式
+   ============================================ */
 @media (max-width: 1200px) {
     .detail-body {
         grid-template-columns: 1fr;
     }
     
-    .analysis-panel {
+    .analysis-sidebar {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 768px) {
-    .top-nav {
-        flex-wrap: wrap;
-        gap: 12px;
-    }
-    
-    .nav-center {
-        order: 3;
-        width: 100%;
-        justify-content: center;
+    .stats-overview {
+        grid-template-columns: repeat(2, 1fr);
     }
     
     .futures-grid {
         grid-template-columns: 1fr;
     }
     
-    .analysis-panel {
+    .analysis-sidebar {
         grid-template-columns: 1fr;
     }
     
-    .detail-title-bar {
+    .detail-header {
         flex-direction: column;
         gap: 16px;
     }
     
-    .quote-info {
+    .quote-grid {
         width: 100%;
         justify-content: space-between;
     }
+    
+    .filter-bar {
+        flex-direction: column;
+        gap: 12px;
+    }
+}
+
+/* ============================================
+   简洁风格主题 - Revolut 设计系统
+   ============================================ */
+body.theme-minimal {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f4f4f4;
+    --bg-card: #ffffff;
+    --bg-card-hover: #f4f4f4;
+    --border-color: #c9c9cd;
+    --border-glow: #c9c9cd;
+    
+    --text-primary: #191c1f;
+    --text-secondary: #505a63;
+    --text-muted: #8d969e;
+    
+    --cyan: #494fdf;
+    --cyan-glow: rgba(73, 79, 223, 0.2);
+    --purple: #494fdf;
+    --purple-glow: rgba(73, 79, 223, 0.2);
+    --green: #00a87e;
+    --green-glow: rgba(0, 168, 126, 0.2);
+    --red: #e23b4a;
+    --red-glow: rgba(226, 59, 74, 0.2);
+    --amber: #ec7e00;
+    --amber-glow: rgba(236, 126, 0, 0.2);
+}
+
+body.theme-minimal {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
+    letter-spacing: 0.16px;
+}
+
+body.theme-minimal .bg-grid,
+body.theme-minimal .bg-glow {
+    display: none;
+}
+
+body.theme-minimal .top-nav {
+    background: var(--bg-primary);
+    border-bottom-color: var(--border-color);
+}
+
+body.theme-minimal .logo-icon {
+    background: var(--bg-secondary);
+    border-color: var(--border-color);
+    border-radius: 12px;
+    color: var(--text-primary);
+}
+
+body.theme-minimal .logo-pulse {
+    display: none;
+}
+
+body.theme-minimal .logo-title {
+    background: none;
+    -webkit-text-fill-color: var(--text-primary);
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+}
+
+body.theme-minimal .logo-subtitle {
+    color: var(--text-muted);
+    letter-spacing: 0.24px;
+}
+
+body.theme-minimal .nav-item {
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    letter-spacing: 0.16px;
+    color: var(--text-secondary);
+}
+
+body.theme-minimal .nav-item:hover {
+    color: var(--text-primary);
+}
+
+body.theme-minimal .nav-item.active {
+    background: var(--bg-card-hover);
+    border-radius: 9999px;
+    color: var(--text-primary);
+}
+
+body.theme-minimal .system-status {
+    background: var(--bg-secondary);
+    border-color: var(--border-color);
+    border-radius: 9999px;
+}
+
+body.theme-minimal .system-status .status-dot {
+    background: var(--green);
+}
+
+body.theme-minimal .system-status .status-text {
+    color: var(--green);
+}
+
+body.theme-minimal .search-box {
+    background: var(--bg-secondary);
+    border-radius: 9999px;
+    box-shadow: none;
+}
+
+body.theme-minimal .search-box:focus-within {
+    box-shadow: 0 0 0 0.125rem rgba(73, 79, 223, 0.2);
+}
+
+body.theme-minimal .search-box i {
+    color: var(--text-muted);
+}
+
+body.theme-minimal .view-btn,
+body.theme-minimal .filter-tab {
+    background: var(--bg-secondary);
+    border-radius: 9999px;
+    box-shadow: none;
+    padding: 10px 16px;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+body.theme-minimal .view-btn:hover,
+body.theme-minimal .filter-tab:hover {
+    color: var(--text-primary);
+}
+
+body.theme-minimal .view-btn i {
+    font-size: 14px;
+}
+
+body.theme-minimal .view-btn span {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+body.theme-minimal .stat-card {
+    background: var(--bg-secondary);
+    box-shadow: none;
+    border-radius: 20px;
+    padding: 20px 24px;
+}
+
+body.theme-minimal .stat-card:hover {
+    box-shadow: none;
+    transform: none;
+    background: var(--bg-card-hover);
+}
+
+body.theme-minimal .stat-icon {
+    background: var(--bg-card);
+    border-radius: 12px;
+    color: var(--cyan);
+}
+
+body.theme-minimal .stat-card.up .stat-icon {
+    color: var(--green);
+}
+
+body.theme-minimal .stat-card.down .stat-icon {
+    color: var(--red);
+}
+
+body.theme-minimal .stat-card.neutral .stat-icon {
+    color: var(--amber);
+}
+
+body.theme-minimal .futures-card {
+    background: var(--bg-secondary);
+    box-shadow: none;
+    border-radius: 20px;
+}
+
+body.theme-minimal .futures-card::before {
+    display: none;
+}
+
+body.theme-minimal .futures-card:hover {
+    box-shadow: none;
+    transform: none;
+    background: var(--bg-card-hover);
+}
+
+body.theme-minimal .symbol-tag {
+    background: var(--bg-card);
+    border-color: var(--border-color);
+    border-radius: 12px;
+    color: var(--cyan);
+}
+
+body.theme-minimal .period-tag {
+    background: var(--bg-card);
+    border-radius: 9999px;
+    padding: 6px 12px;
+}
+
+body.theme-minimal .detail-link {
+    color: var(--cyan);
+}
+
+body.theme-minimal .detail-header {
+    background: var(--bg-secondary);
+    box-shadow: none;
+    border-radius: 20px;
+}
+
+body.theme-minimal .symbol-code {
+    background: var(--bg-card);
+    border-radius: 9999px;
+    padding: 4px 12px;
+}
+
+body.theme-minimal .period-btn {
+    background: var(--bg-secondary);
+    border-radius: 9999px;
+    padding: 10px 20px;
+    color: var(--text-secondary);
+}
+
+body.theme-minimal .period-btn:hover {
+    color: var(--text-primary);
+}
+
+body.theme-minimal .chart-container {
+    background: var(--bg-secondary);
+    box-shadow: none;
+    border-radius: 20px;
+}
+
+body.theme-minimal .panel-card {
+    background: var(--bg-secondary);
+    box-shadow: none;
+    border-radius: 20px;
+}
+
+body.theme-minimal .panel-card:hover {
+    box-shadow: none;
+}
+
+body.theme-minimal .panel-header i {
+    color: var(--text-primary);
+}
+
+body.theme-minimal .suggestion-card .suggestion-content {
+    background: var(--bg-card);
+    border-color: var(--border-color);
+    border-radius: 12px;
+}
+
+body.theme-minimal .indicator-cell {
+    background: var(--bg-card);
+    border-radius: 12px;
+}
+
+body.theme-minimal .level-item {
+    background: var(--bg-card);
+    border-radius: 9999px;
+}
+
+body.theme-minimal .trend-row {
+    background: var(--bg-card);
+    border-radius: 9999px;
+}
+
+body.theme-minimal .param-row {
+    background: var(--bg-card);
+    border-radius: 9999px;
+}
+
+body.theme-minimal .back-btn {
+    background: var(--bg-secondary);
+    box-shadow: none;
+    border-radius: 9999px;
+    padding: 14px 32px;
+    color: var(--text-secondary);
+}
+
+body.theme-minimal .back-btn:hover {
+    color: var(--text-primary);
+}
+
+body.theme-minimal .datetime {
+    color: var(--text-muted);
+}
+
+body.theme-minimal .nav-btn {
+    border-radius: 9999px;
+    color: var(--text-secondary);
+}
+
+body.theme-minimal .nav-btn:hover {
+    background: var(--bg-card-hover);
+    color: var(--text-primary);
+}
+
+body.theme-minimal .sort-select select {
+    background: var(--bg-secondary);
+    border-color: var(--border-color);
+    border-radius: 9999px;
+    padding: 10px 36px 10px 16px;
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23505a63' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+    background-size: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+body.theme-minimal .sort-select select:hover {
+    border-color: var(--text-muted);
+}
+
+body.theme-minimal .sort-select select:focus {
+    border-color: var(--cyan);
+    box-shadow: 0 0 0 0.125rem rgba(73, 79, 223, 0.2);
+}
+
+body.theme-minimal .sort-select select option {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+body.theme-minimal .sort-select select option:hover,
+body.theme-minimal .sort-select select option:checked {
+    background: rgba(73, 79, 223, 0.1) !important;
+}
+
+body.theme-minimal .filter-tab.active {
+    background: var(--cyan);
+    color: white;
+    border-color: var(--cyan);
+}
+
+body.theme-minimal .view-btn.active {
+    background: var(--cyan);
+    border-color: var(--cyan);
+    color: white;
+}
+
+body.theme-minimal .period-btn.active {
+    background: var(--cyan);
+    border-color: var(--cyan);
+    color: white;
+}
+
+body.theme-minimal .suggestion-badge {
+    border-radius: 9999px;
+    padding: 6px 16px;
+}
+
+body.theme-minimal .btn,
+body.theme-minimal button {
+    border-radius: 9999px;
+}
+
+/* 主题切换按钮 */
+.theme-toggle {
+    position: relative;
+}
+
+.theme-toggle i {
+    transition: transform 0.3s ease;
+}
+
+body.theme-minimal .theme-toggle i::before {
+    content: '\f185';
+}
+
+/* ============================================
+   自选按钮
+   ============================================ */
+.watch-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.watch-btn:hover {
+    border-color: var(--amber);
+    color: var(--amber);
+}
+
+.watch-btn.active {
+    background: rgba(245, 158, 11, 0.1);
+    border-color: var(--amber);
+    color: var(--amber);
+}
+
+body.theme-minimal .watch-btn {
+    border-radius: 9999px;
+    background: var(--bg-card);
+}
+
+body.theme-minimal .watch-btn:hover {
+    background: rgba(236, 126, 0, 0.1);
+}
+
+body.theme-minimal .watch-btn.active {
+    background: rgba(236, 126, 0, 0.15);
+}
+
+/* ============================================
+   价格关键位标签
+   ============================================ */
+.price-levels {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.level-tag {
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.level-tag.resistance {
+    background: rgba(226, 59, 74, 0.1);
+    color: #e23b4a;
+}
+
+.level-tag.support {
+    background: rgba(0, 168, 126, 0.1);
+    color: #00a87e;
+}
+
+body.theme-minimal .level-tag {
+    border-radius: 9999px;
+}
+
+/* ============================================
+   历史分析记录
+   ============================================ */
+.chart-section {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.history-container {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 14px;
+    padding: 16px;
+}
+
+body.theme-minimal .history-container {
+    background: var(--bg-secondary);
+    border-radius: 20px;
+    box-shadow: none;
+}
+
+.history-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+}
+
+.history-header i {
+    color: var(--cyan);
+}
+
+body.theme-minimal .history-header i {
+    color: var(--text-primary);
+}
+
+.history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 30px;
+    color: var(--text-muted);
+    font-size: 14px;
+}
+
+.history-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.history-item:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: var(--border-glow);
+}
+
+body.theme-minimal .history-item {
+    background: var(--bg-card);
+    border-radius: 12px;
+}
+
+body.theme-minimal .history-item:hover {
+    background: var(--bg-card-hover);
+}
+
+.history-item-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.history-time {
+    font-size: 12px;
+    color: var(--text-muted);
+    min-width: 130px;
+}
+
+.history-suggestion {
+    padding: 3px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.history-suggestion.up {
+    background: rgba(16, 185, 129, 0.12);
+    color: var(--green);
+}
+
+.history-suggestion.down {
+    background: rgba(239, 68, 68, 0.12);
+    color: var(--red);
+}
+
+.history-suggestion.neutral {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--amber);
+}
+
+body.theme-minimal .history-suggestion {
+    border-radius: 9999px;
+}
+
+.history-score {
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.history-item-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.history-metric {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+}
+
+.history-metric-label {
+    font-size: 10px;
+    color: var(--text-muted);
+}
+
+.history-metric-value {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.history-detail-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.history-detail-btn:hover {
+    color: var(--cyan);
+    border-color: var(--cyan);
+}
+
+body.theme-minimal .history-detail-btn {
+    border-radius: 9999px;
+}
+
+/* ============================================
+   面板头部操作按钮
+   ============================================ */
+.panel-header-action {
+    margin-left: auto;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.2s;
+}
+
+.panel-header-action:hover {
+    color: var(--text-primary);
+    background: rgba(255, 255, 255, 0.06);
+}
+
+/* ============================================
+   对话框
+   ============================================ */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-overlay.active {
+    display: flex;
+}
+
+.modal-content {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    width: 90%;
+    max-width: 600px;
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+body.theme-minimal .modal-content {
+    background: #ffffff;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h3 {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.modal-header h3 i {
+    color: var(--cyan);
+}
+
+body.theme-minimal .modal-header h3 i {
+    color: var(--text-primary);
+}
+
+.modal-close {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.2s;
+}
+
+.modal-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+}
+
+body.theme-minimal .modal-close:hover {
+    background: var(--bg-secondary);
+}
+
+.modal-body {
+    padding: 24px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+/* 对话框内容样式 */
+.modal-suggestion-main {
+    text-align: center;
+    padding: 20px;
+    background: rgba(6, 182, 212, 0.06);
+    border: 1px solid rgba(6, 182, 212, 0.15);
+    border-radius: 12px;
+    margin-bottom: 20px;
+}
+
+body.theme-minimal .modal-suggestion-main {
+    background: var(--bg-secondary);
+    border-color: var(--border-color);
+}
+
+.modal-suggestion-main .suggestion-badge {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+
+.modal-suggestion-main .suggestion-reason {
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.modal-params-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.modal-param-card {
+    padding: 14px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 10px;
+    text-align: center;
+}
+
+body.theme-minimal .modal-param-card {
+    background: var(--bg-secondary);
+}
+
+.modal-param-card .param-label {
+    display: block;
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-bottom: 6px;
+}
+
+.modal-param-card .param-value {
+    font-size: 18px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.modal-section {
+    margin-bottom: 20px;
+}
+
+.modal-section:last-child {
+    margin-bottom: 0;
+}
+
+.modal-section-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.modal-section-title i {
+    color: var(--cyan);
+}
+
+body.theme-minimal .modal-section-title i {
+    color: var(--text-primary);
+}
+
+.modal-indicators-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+}
+
+.modal-indicator-item {
+    padding: 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+}
+
+body.theme-minimal .modal-indicator-item {
+    background: var(--bg-secondary);
+}
+
+.modal-indicator-item .indicator-label {
+    font-size: 11px;
+    color: var(--text-muted);
+    margin-bottom: 4px;
+}
+
+.modal-indicator-item .indicator-value {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.modal-indicator-item .indicator-detail {
+    font-size: 11px;
+    color: var(--text-secondary);
+}
+
+.modal-levels-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.modal-level-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 6px;
+    font-size: 13px;
+}
+
+body.theme-minimal .modal-level-row {
+    background: var(--bg-secondary);
+}
+
+.modal-level-row .level-label {
+    color: var(--text-secondary);
+}
+
+.modal-level-row .level-value {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.modal-trends-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.modal-trend-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 6px;
+}
+
+body.theme-minimal .modal-trend-row {
+    background: var(--bg-secondary);
+}
+
+.modal-trend-period {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.modal-trend-badge {
+    padding: 3px 10px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.modal-trend-badge.up {
+    background: rgba(16, 185, 129, 0.12);
+    color: var(--green);
+}
+
+.modal-trend-badge.down {
+    background: rgba(239, 68, 68, 0.12);
+    color: var(--red);
+}
+
+.modal-trend-badge.neutral {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--amber);
+}
+
+body.theme-minimal .modal-trend-badge {
+    border-radius: 9999px;
+}
+
+body.theme-minimal .period-tag {
+    border-radius: 9999px;
+    padding: 6px 12px;
+}
+
+body.theme-minimal .detail-link {
+    color: var(--cyan);
+}
+
+body.theme-minimal .suggestion-card .suggestion-content {
+    background: var(--bg-card);
+    border-color: var(--border-color);
+    border-radius: 12px;
+}
+
+body.theme-minimal .indicator-cell {
+    background: var(--bg-card);
+    border-radius: 12px;
+}
+
+body.theme-minimal .level-item {
+    background: var(--bg-card);
+    border-radius: 9999px;
+}
+
+body.theme-minimal .trend-row {
+    background: var(--bg-card);
+    border-radius: 9999px;
+}
+
+body.theme-minimal .param-row {
+    background: var(--bg-card);
+    border-radius: 9999px;
+}
+
+body.theme-minimal .back-btn {
+    background: var(--bg-secondary);
+    box-shadow: none;
+    border-radius: 9999px;
+    padding: 14px 32px;
+    color: var(--text-secondary);
+}
+
+body.theme-minimal .back-btn:hover {
+    color: var(--text-primary);
+}
+
+body.theme-minimal .datetime {
+    color: var(--text-muted);
+}
+
+body.theme-minimal .nav-btn {
+    border-radius: 9999px;
+    color: var(--text-secondary);
+}
+
+body.theme-minimal .nav-btn:hover {
+    background: var(--bg-card-hover);
+    color: var(--text-primary);
+}
+
+body.theme-minimal .sort-select select {
+    background: var(--bg-secondary);
+    border-color: var(--border-color);
+    border-radius: 9999px;
+    padding: 10px 36px 10px 16px;
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23505a63' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+    background-size: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+body.theme-minimal .sort-select select:hover {
+    border-color: var(--text-muted);
+}
+
+body.theme-minimal .sort-select select:focus {
+    border-color: var(--cyan);
+    box-shadow: 0 0 0 0.125rem rgba(73, 79, 223, 0.2);
+}
+
+body.theme-minimal .sort-select select option {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+body.theme-minimal .sort-select select option:hover,
+body.theme-minimal .sort-select select option:checked {
+    background: rgba(73, 79, 223, 0.1) !important;
+}
+
+body.theme-minimal .filter-tab.active {
+    background: var(--cyan);
+    color: white;
+    border-color: var(--cyan);
+}
+
+body.theme-minimal .view-btn.active {
+    background: var(--cyan);
+    border-color: var(--cyan);
+    color: white;
+}
+
+body.theme-minimal .period-btn.active {
+    background: var(--cyan);
+    border-color: var(--cyan);
+    color: white;
+}
+
+body.theme-minimal .suggestion-badge {
+    border-radius: 9999px;
+    padding: 6px 16px;
+}
+
+body.theme-minimal .btn,
+body.theme-minimal button {
+    border-radius: 9999px;
+}
+
+/* 主题切换按钮 */
+.theme-toggle {
+    position: relative;
+}
+
+.theme-toggle i {
+    transition: transform 0.3s ease;
+}
+
+body.theme-minimal .theme-toggle i::before {
+    content: '\f185';
 }
diff --git a/app/static/futures_analysis.html b/app/static/futures_analysis.html
index 9a1e700..d0d1628 100644
--- a/app/static/futures_analysis.html
+++ b/app/static/futures_analysis.html
@@ -7,39 +7,57 @@
     <link rel="stylesheet" href="/static/futures_analysis.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
-<body>
+<body class="theme-minimal">
+    <div class="bg-grid"></div>
+    <div class="bg-glow"></div>
+    
     <div class="app-container">
         <!-- 顶部导航 -->
         <header class="top-nav">
             <div class="nav-left">
                 <div class="logo">
-                    <div class="logo-icon"><i class="fas fa-chart-line"></i></div>
+                    <div class="logo-icon">
+                        <i class="fas fa-chart-line"></i>
+                        <div class="logo-pulse"></div>
+                    </div>
                     <div class="logo-text">
                         <span class="logo-title">期货智析</span>
-                        <span class="logo-subtitle">智能期货期权分析系统</span>
+                        <span class="logo-subtitle">FUTURES INTELLIGENCE</span>
                     </div>
                 </div>
             </div>
             <nav class="nav-center">
-                <a href="#" class="nav-item" data-page="market">市场概览</a>
-                <a href="#" class="nav-item" data-page="events">热点事件</a>
-                <a href="#" class="nav-item active" data-page="analysis">品种分析</a>
-                <a href="#" class="nav-item" data-page="risk">风险提醒</a>
+                <a href="#" class="nav-item active" data-page="analysis">
+                    <span class="nav-icon"><i class="fas fa-microchip"></i></span>
+                    <span>品种分析</span>
+                </a>
+                <a href="#" class="nav-item" data-page="watched">
+                    <span class="nav-icon"><i class="fas fa-star"></i></span>
+                    <span>自选</span>
+                </a>
+                <a href="#" class="nav-item" data-page="market">
+                    <span class="nav-icon"><i class="fas fa-globe"></i></span>
+                    <span>市场概览</span>
+                </a>
+                <a href="#" class="nav-item" data-page="risk">
+                    <span class="nav-icon"><i class="fas fa-shield-alt"></i></span>
+                    <span>风险预警</span>
+                </a>
             </nav>
             <div class="nav-right">
-                <div class="datetime">
-                    <i class="far fa-clock"></i>
-                    <span id="current-time">2026/03/14 16:07:52</span>
+                <div class="system-status">
+                    <span class="status-dot"></span>
+                    <span class="status-text">LIVE</span>
                 </div>
-                <a href="/static/ai_config.html" class="nav-icon-btn" title="AI配置">
-                    <i class="fas fa-robot"></i>
+                <div class="datetime" id="current-time">--</div>
+                <a href="/ai-config" class="nav-btn" title="AI配置">
+                    <i class="fas fa-brain"></i>
                 </a>
-                <div class="notification">
-                    <i class="far fa-bell"></i>
-                    <span class="badge">3</span>
-                </div>
-                <a href="/" class="nav-icon-btn" title="返回首页">
-                    <i class="fas fa-home"></i>
+                <button class="nav-btn theme-toggle" id="theme-toggle" title="切换主题">
+                    <i class="fas fa-moon"></i>
+                </button>
+                <a href="/" class="nav-btn" title="返回首页">
+                    <i class="fas fa-th-large"></i>
                 </a>
             </div>
         </header>
@@ -48,43 +66,94 @@
         <main class="main-content">
             <!-- 品种列表视图 -->
             <div id="list-view" class="view active">
-                <!-- 搜索和筛选栏 -->
-                <div class="toolbar">
+                <!-- 搜索栏 -->
+                <div class="search-section">
                     <div class="search-box">
                         <i class="fas fa-search"></i>
                         <input type="text" id="search-input" placeholder="搜索品种名称或代码...">
+                        <kbd>⌘K</kbd>
                     </div>
-                    <div class="view-toggle">
-                        <button class="toggle-btn active" data-view="grid"><i class="fas fa-th"></i></button>
-                        <button class="toggle-btn" data-view="list"><i class="fas fa-list"></i></button>
+                    <div class="view-controls">
+                        <button class="view-btn active" data-view="grid" title="网格视图">
+                            <i class="fas fa-grid-2"></i>
+                            <span>网格</span>
+                        </button>
+                        <button class="view-btn" data-view="list" title="列表视图">
+                            <i class="fas fa-list"></i>
+                            <span>列表</span>
+                        </button>
                     </div>
                 </div>
 
+                <!-- 筛选栏 -->
                 <div class="filter-bar">
-                    <div class="filter-group">
-                        <span class="filter-label">分类:</span>
-                        <button class="filter-btn active" data-category="all">全部</button>
-                        <button class="filter-btn" data-category="energy">能源</button>
-                        <button class="filter-btn" data-category="metal">金属</button>
-                        <button class="filter-btn" data-category="agriculture">农产品</button>
-                        <button class="filter-btn" data-category="finance">金融</button>
+                    <div class="filter-tabs">
+                        <button class="filter-tab active" data-category="all">
+                            <span>全部</span>
+                            <span class="filter-count" id="count-all">0</span>
+                        </button>
+                        <button class="filter-tab" data-category="watched">
+                            <i class="fas fa-star"></i>
+                            <span>自选</span>
+                            <span class="filter-count" id="count-watched">0</span>
+                        </button>
+                        <button class="filter-tab" data-category="energy">
+                            <i class="fas fa-fire"></i>
+                            <span>能源</span>
+                        </button>
+                        <button class="filter-tab" data-category="metal">
+                            <i class="fas fa-cube"></i>
+                            <span>金属</span>
+                        </button>
+                        <button class="filter-tab" data-category="agriculture">
+                            <i class="fas fa-seedling"></i>
+                            <span>农产品</span>
+                        </button>
+                        <button class="filter-tab" data-category="finance">
+                            <i class="fas fa-chart-pie"></i>
+                            <span>金融</span>
+                        </button>
                     </div>
-                    <div class="sort-group">
-                        <span class="filter-label">排序:</span>
-                        <select id="sort-select" class="sort-select">
-                            <option value="success_rate">成功率</option>
+                    <div class="sort-select">
+                        <select id="sort-select">
                             <option value="trend_score">趋势评分</option>
+                            <option value="success_rate">成功率</option>
                             <option value="change_pct">涨跌幅</option>
                             <option value="name">名称</option>
                         </select>
                     </div>
                 </div>
 
-                <!-- 统计信息 -->
-                <div class="stats-bar">
-                    <span>共 <strong id="total-count">8</strong> 个品种</span>
-                    <span class="stat-up"><i class="fas fa-arrow-up"></i> <strong id="up-count">7</strong></span>
-                    <span class="stat-down"><i class="fas fa-arrow-down"></i> <strong id="down-count">1</strong></span>
+                <!-- 统计概览 -->
+                <div class="stats-overview">
+                    <div class="stat-card">
+                        <div class="stat-icon"><i class="fas fa-layer-group"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="total-count">0</span>
+                            <span class="stat-label">监控品种</span>
+                        </div>
+                    </div>
+                    <div class="stat-card up">
+                        <div class="stat-icon"><i class="fas fa-arrow-trend-up"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="up-count">0</span>
+                            <span class="stat-label">上涨趋势</span>
+                        </div>
+                    </div>
+                    <div class="stat-card down">
+                        <div class="stat-icon"><i class="fas fa-arrow-trend-down"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="down-count">0</span>
+                            <span class="stat-label">下跌趋势</span>
+                        </div>
+                    </div>
+                    <div class="stat-card neutral">
+                        <div class="stat-icon"><i class="fas fa-arrows-left-right"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="neutral-count">0</span>
+                            <span class="stat-label">震荡整理</span>
+                        </div>
+                    </div>
                 </div>
 
                 <!-- 品种卡片网格 -->
@@ -95,180 +164,201 @@
 
             <!-- 详情分析视图 -->
             <div id="detail-view" class="view">
-                <!-- 返回按钮和品种标题 -->
+                <!-- 返回按钮 -->
+                <button class="back-btn" id="back-btn">
+                    <i class="fas fa-arrow-left"></i>
+                    <span>返回</span>
+                </button>
+
+                <!-- 品种标题区 -->
                 <div class="detail-header">
-                    <button class="back-btn" id="back-btn">
-                        <i class="fas fa-arrow-left"></i> 返回列表
-                    </button>
-                    <div class="detail-title-bar">
-                        <div class="price-info">
-                            <span class="current-price" id="detail-price">¥2,150</span>
-                            <span class="price-change up" id="detail-change">
-                                <i class="fas fa-arrow-up"></i> +196.00 (+10.06%)
-                            </span>
+                    <div class="header-left">
+                        <div class="symbol-info">
+                            <span class="symbol-name" id="detail-name">--</span>
+                            <span class="symbol-code" id="detail-symbol">--</span>
                         </div>
-                        <div class="quote-info">
+                        <div class="price-main">
+                            <span class="price-value" id="detail-price">--</span>
+                            <span class="price-change" id="detail-change">--</span>
+                            <div class="price-levels">
+                                <span class="level-tag resistance" id="detail-r1">R1: --</span>
+                                <span class="level-tag support" id="detail-s1">S1: --</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="header-right">
+                        <div class="quote-grid">
                             <div class="quote-item">
                                 <span class="quote-label">开盘</span>
-                                <span class="quote-value" id="detail-open">1,960</span>
+                                <span class="quote-value" id="detail-open">--</span>
                             </div>
                             <div class="quote-item">
                                 <span class="quote-label">最高</span>
-                                <span class="quote-value up" id="detail-high">2,200</span>
+                                <span class="quote-value up" id="detail-high">--</span>
                             </div>
                             <div class="quote-item">
                                 <span class="quote-label">最低</span>
-                                <span class="quote-value down" id="detail-low">1,940</span>
+                                <span class="quote-value down" id="detail-low">--</span>
                             </div>
                             <div class="quote-item">
-                                <span class="quote-label">持仓量</span>
-                                <span class="quote-value" id="detail-volume">45,600</span>
+                                <span class="quote-label">成交量</span>
+                                <span class="quote-value" id="detail-volume">--</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <!-- 周期选择 -->
-                <div class="period-selector">
-                    <i class="far fa-clock"></i>
-                    <span class="period-label">周期选择</span>
-                    <button class="period-btn" data-period="5">5分钟</button>
-                    <button class="period-btn active" data-period="15">15分钟</button>
-                    <button class="period-btn" data-period="30">30分钟</button>
-                    <button class="period-btn" data-period="60">60分钟</button>
+                <div class="period-bar">
+                    <span class="period-label"><i class="fas fa-clock"></i> 周期</span>
+                    <div class="period-btns">
+                        <button class="period-btn" data-period="5">5M</button>
+                        <button class="period-btn active" data-period="15">15M</button>
+                        <button class="period-btn" data-period="30">30M</button>
+                        <button class="period-btn" data-period="60">1H</button>
+                    </div>
                 </div>
 
                 <!-- 图表和侧边栏 -->
                 <div class="detail-body">
-                    <!-- K线图表区 -->
                     <div class="chart-section">
-                        <div id="kline-chart" class="kline-chart"></div>
+                        <!-- K线图表区 -->
+                        <div class="chart-container">
+                            <div class="chart-header">
+                                <span class="chart-title">K线图</span>
+                                <div class="chart-legend">
+                                    <span class="legend-item"><span class="legend-dot ma5"></span>MA5</span>
+                                    <span class="legend-item"><span class="legend-dot ma10"></span>MA10</span>
+                                    <span class="legend-item"><span class="legend-dot ma20"></span>MA20</span>
+                                </div>
+                            </div>
+                            <div id="kline-chart" class="kline-chart"></div>
+                        </div>
+
+                        <!-- 历史分析记录 -->
+                        <div class="history-container">
+                            <div class="history-header">
+                                <i class="fas fa-clock-rotate-left"></i>
+                                <span>历史分析记录</span>
+                            </div>
+                            <div class="history-list" id="history-list">
+                                <!-- 动态生成 -->
+                            </div>
+                        </div>
                     </div>
 
                     <!-- 右侧分析面板 -->
-                    <div class="analysis-panel">
-                        <!-- 交易建议 -->
-                        <div class="panel-card trade-suggestion">
-                            <div class="panel-title">
-                                <i class="fas fa-bullseye"></i>
-                                <span>交易建议</span>
+                    <div class="analysis-sidebar">
+                        <!-- AI交易建议 -->
+                        <div class="panel-card suggestion-card" id="suggestion-card">
+                            <div class="panel-header">
+                                <i class="fas fa-robot"></i>
+                                <span>AI 交易建议</span>
+                                <span class="panel-header-action"><i class="fas fa-expand"></i></span>
                             </div>
-                            <div class="suggestion-box up" id="suggestion-box">
-                                <div class="suggestion-label">操作建议</div>
-                                <div class="suggestion-action" id="suggestion-action">逢低做多</div>
-                                <div class="suggestion-reason" id="suggestion-reason">涨停突破，地缘风险推升运价</div>
+                            <div class="suggestion-content">
+                                <div class="suggestion-badge" id="suggestion-badge">--</div>
+                                <div class="suggestion-reason" id="suggestion-reason">--</div>
                             </div>
-                            <div class="suggestion-details">
-                                <div class="detail-row">
-                                    <span class="detail-label">建议入场</span>
-                                    <span class="detail-value" id="entry-price">2,137.1</span>
+                            <div class="trade-params">
+                                <div class="param-row">
+                                    <span class="param-label">入场</span>
+                                    <span class="param-value" id="entry-price">--</span>
                                 </div>
-                                <div class="detail-row">
-                                    <span class="detail-label">目标价位</span>
-                                    <span class="detail-value up" id="target-price">2,236</span>
+                                <div class="param-row">
+                                    <span class="param-label">目标</span>
+                                    <span class="param-value up" id="target-price">--</span>
                                 </div>
-                                <div class="detail-row">
-                                    <span class="detail-label">止损价位</span>
-                                    <span class="detail-value down" id="stop-loss">2,107</span>
+                                <div class="param-row">
+                                    <span class="param-label">止损</span>
+                                    <span class="param-value down" id="stop-loss">--</span>
                                 </div>
-                                <div class="detail-row">
-                                    <span class="detail-label">风险等级</span>
-                                    <span class="detail-value" id="risk-level">低</span>
+                                <div class="param-row">
+                                    <span class="param-label">风险</span>
+                                    <span class="param-value" id="risk-level">--</span>
                                 </div>
                             </div>
                         </div>
 
                         <!-- 技术指标 -->
-                        <div class="panel-card tech-indicators">
-                            <div class="panel-title">
-                                <i class="fas fa-wave-square"></i>
+                        <div class="panel-card indicators-card">
+                            <div class="panel-header">
+                                <i class="fas fa-wave-pulse"></i>
                                 <span>技术指标</span>
                             </div>
                             <div class="indicators-grid">
-                                <div class="indicator-item">
-                                    <div class="indicator-name">MACD</div>
-                                    <div class="indicator-value up" id="macd-signal">金叉</div>
-                                    <div class="indicator-detail" id="macd-detail">DIF: -0.0147</div>
+                                <div class="indicator-cell">
+                                    <span class="indicator-label">MACD</span>
+                                    <span class="indicator-value" id="macd-signal">--</span>
+                                    <span class="indicator-detail" id="macd-detail">--</span>
                                 </div>
-                                <div class="indicator-item">
-                                    <div class="indicator-name">RSI</div>
-                                    <div class="indicator-value" id="rsi-value">47</div>
-                                    <div class="indicator-detail" id="rsi-status">正常</div>
+                                <div class="indicator-cell">
+                                    <span class="indicator-label">RSI</span>
+                                    <span class="indicator-value" id="rsi-value">--</span>
+                                    <span class="indicator-detail" id="rsi-status">--</span>
                                 </div>
-                                <div class="indicator-item">
-                                    <div class="indicator-name">布林带</div>
-                                    <div class="indicator-value" id="boll-signal">中轨</div>
-                                    <div class="indicator-detail" id="boll-detail">区间: 2086-2215</div>
+                                <div class="indicator-cell">
+                                    <span class="indicator-label">BOLL</span>
+                                    <span class="indicator-value" id="boll-signal">--</span>
+                                    <span class="indicator-detail" id="boll-detail">--</span>
                                 </div>
-                                <div class="indicator-item">
-                                    <div class="indicator-name">KDJ</div>
-                                    <div class="indicator-value" id="kdj-signal">中性</div>
-                                    <div class="indicator-detail" id="kdj-detail">K: 71 D: 87</div>
+                                <div class="indicator-cell">
+                                    <span class="indicator-label">KDJ</span>
+                                    <span class="indicator-value" id="kdj-signal">--</span>
+                                    <span class="indicator-detail" id="kdj-detail">--</span>
                                 </div>
                             </div>
                         </div>
 
                         <!-- 关键点位 -->
-                        <div class="panel-card key-levels">
-                            <div class="panel-title">
-                                <i class="fas fa-chart-bar"></i>
+                        <div class="panel-card levels-card">
+                            <div class="panel-header">
+                                <i class="fas fa-crosshairs"></i>
                                 <span>关键点位</span>
                             </div>
-                            <div class="levels-section">
-                                <div class="levels-header resistance">压力位</div>
-                                <div class="level-row" id="resistance-1">
-                                    <span>压力 1</span>
-                                    <span class="level-value down">2,200</span>
-                                </div>
-                                <div class="level-row" id="resistance-2">
-                                    <span>压力 2</span>
-                                    <span class="level-value down">2,300</span>
+                            <div class="levels-container">
+                                <div class="level-group resistance">
+                                    <span class="level-group-label">压力</span>
+                                    <div class="level-item" id="resistance-1"><span>R1</span><span>--</span></div>
+                                    <div class="level-item" id="resistance-2"><span>R2</span><span>--</span></div>
+                                    <div class="level-item" id="resistance-3"><span>R3</span><span>--</span></div>
                                 </div>
-                                <div class="level-row" id="resistance-3">
-                                    <span>压力 3</span>
-                                    <span class="level-value down">2,400</span>
+                                <div class="level-divider"></div>
+                                <div class="level-group support">
+                                    <span class="level-group-label">支撑</span>
+                                    <div class="level-item" id="support-1"><span>S1</span><span>--</span></div>
+                                    <div class="level-item" id="support-2"><span>S2</span><span>--</span></div>
+                                    <div class="level-item" id="support-3"><span>S3</span><span>--</span></div>
                                 </div>
                             </div>
-                            <div class="levels-section">
-                                <div class="levels-header support">支撑位</div>
-                                <div class="level-row" id="support-1">
-                                    <span>支撑 1</span>
-                                    <span class="level-value up">2,000</span>
-                                </div>
-                                <div class="level-row" id="support-2">
-                                    <span>支撑 2</span>
-                                    <span class="level-value up">1,900</span>
-                                </div>
-                                <div class="level-row" id="support-3">
-                                    <span>支撑 3</span>
-                                    <span class="level-value up">1,800</span>
-                                </div>
+                        </div>
+
+                        <!-- 多周期趋势 -->
+                        <div class="panel-card trends-card">
+                            <div class="panel-header">
+                                <i class="fas fa-timeline"></i>
+                                <span>多周期趋势</span>
+                            </div>
+                            <div class="trends-container" id="period-trends">
+                                <!-- 动态生成 -->
                             </div>
                         </div>
 
-                        <!-- 多周期一致性 -->
-                        <div class="panel-card multi-period">
-                            <div class="panel-title">
-                                <i class="fas fa-bolt"></i>
-                                <span>多周期一致性</span>
+                        <!-- 趋势评分 -->
+                        <div class="panel-card score-card">
+                            <div class="panel-header">
+                                <i class="fas fa-gauge-high"></i>
+                                <span>趋势评分</span>
                             </div>
-                            <div class="period-consistency" id="period-consistency">
-                                <div class="consistency-row">
-                                    <span class="period-name">5分钟</span>
-                                    <span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span>
-                                </div>
-                                <div class="consistency-row">
-                                    <span class="period-name">15分钟</span>
-                                    <span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span>
-                                </div>
-                                <div class="consistency-row">
-                                    <span class="period-name">30分钟</span>
-                                    <span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span>
-                                </div>
-                                <div class="consistency-row">
-                                    <span class="period-name">60分钟</span>
-                                    <span class="consistency-badge neutral"><i class="fas fa-minus"></i> 震荡</span>
+                            <div class="score-display">
+                                <div class="score-ring">
+                                    <svg viewBox="0 0 100 100">
+                                        <circle class="score-bg" cx="50" cy="50" r="45"/>
+                                        <circle class="score-fill" id="score-fill" cx="50" cy="50" r="45"/>
+                                    </svg>
+                                    <span class="score-value" id="trend-score">--</span>
                                 </div>
+                                <div class="score-label">综合评分</div>
                             </div>
                         </div>
                     </div>
@@ -277,6 +367,32 @@
         </main>
     </div>
 
+    <!-- AI建议详情对话框 -->
+    <div class="modal-overlay" id="suggestion-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-robot"></i> AI 交易建议详情</h3>
+                <button class="modal-close" onclick="closeModal('suggestion-modal')"><i class="fas fa-xmark"></i></button>
+            </div>
+            <div class="modal-body" id="suggestion-modal-body">
+                <!-- 动态生成 -->
+            </div>
+        </div>
+    </div>
+
+    <!-- 历史记录详情对话框 -->
+    <div class="modal-overlay" id="history-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-clock-rotate-left"></i> 分析记录详情</h3>
+                <button class="modal-close" onclick="closeModal('history-modal')"><i class="fas fa-xmark"></i></button>
+            </div>
+            <div class="modal-body" id="history-modal-body">
+                <!-- 动态生成 -->
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
     <script src="/static/futures_analysis.js"></script>
 </body>
diff --git a/app/static/futures_analysis.js b/app/static/futures_analysis.js
index acae11e..ce31b65 100644
--- a/app/static/futures_analysis.js
+++ b/app/static/futures_analysis.js
@@ -4,19 +4,54 @@ let klineChart = null;
 let currentSymbol = null;
 let currentPeriod = '15';
 let allFuturesData = [];
+let watchedSymbols = [];
+let currentDetailData = null;
 
 document.addEventListener('DOMContentLoaded', function() {
+    addScoreGradient();
     updateTime();
     setInterval(updateTime, 1000);
     
     initEventListeners();
+    loadWatchedSymbols();
     loadFuturesList();
 });
 
+function addScoreGradient() {
+    const svg = document.querySelector('.score-ring svg');
+    if (svg && !svg.querySelector('defs')) {
+        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
+        gradient.setAttribute('id', 'scoreGradient');
+        gradient.setAttribute('x1', '0%');
+        gradient.setAttribute('y1', '0%');
+        gradient.setAttribute('x2', '100%');
+        gradient.setAttribute('y2', '0%');
+        
+        const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+        stop1.setAttribute('offset', '0%');
+        stop1.setAttribute('stop-color', '#ef4444');
+        
+        const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+        stop2.setAttribute('offset', '50%');
+        stop2.setAttribute('stop-color', '#f59e0b');
+        
+        const stop3 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+        stop3.setAttribute('offset', '100%');
+        stop3.setAttribute('stop-color', '#10b981');
+        
+        gradient.appendChild(stop1);
+        gradient.appendChild(stop2);
+        gradient.appendChild(stop3);
+        defs.appendChild(gradient);
+        svg.insertBefore(defs, svg.firstChild);
+    }
+}
+
 function updateTime() {
     const now = new Date();
-    const timeStr = now.getFullYear() + '/' + 
-        String(now.getMonth() + 1).padStart(2, '0') + '/' + 
+    const timeStr = now.getFullYear() + '-' + 
+        String(now.getMonth() + 1).padStart(2, '0') + '-' + 
         String(now.getDate()).padStart(2, '0') + ' ' + 
         String(now.getHours()).padStart(2, '0') + ':' + 
         String(now.getMinutes()).padStart(2, '0') + ':' + 
@@ -27,6 +62,23 @@ function updateTime() {
 function initEventListeners() {
     document.getElementById('back-btn').addEventListener('click', showListView);
     
+    document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+    
+    document.getElementById('suggestion-card').addEventListener('click', function() {
+        if (currentDetailData) {
+            showSuggestionModal(currentDetailData);
+        }
+    });
+    
+    const savedTheme = localStorage.getItem('futures-theme');
+    if (savedTheme === 'dark') {
+        document.body.classList.remove('theme-minimal');
+        updateThemeIcon(false);
+    } else {
+        document.body.classList.add('theme-minimal');
+        updateThemeIcon(true);
+    }
+    
     document.querySelectorAll('.period-btn').forEach(btn => {
         btn.addEventListener('click', function() {
             document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));
@@ -40,9 +92,9 @@ function initEventListeners() {
         filterFuturesList(this.value);
     });
     
-    document.querySelectorAll('.filter-btn').forEach(btn => {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+    document.querySelectorAll('.filter-tab').forEach(tab => {
+        tab.addEventListener('click', function() {
+            document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
             this.classList.add('active');
             filterByCategory(this.dataset.category);
         });
@@ -51,6 +103,18 @@ function initEventListeners() {
     document.getElementById('sort-select').addEventListener('change', function() {
         sortFuturesList(this.value);
     });
+    
+    document.querySelectorAll('.modal-overlay').forEach(modal => {
+        modal.addEventListener('click', function(e) {
+            if (e.target === this) {
+                this.classList.remove('active');
+            }
+        });
+    });
+}
+
+function closeModal(modalId) {
+    document.getElementById(modalId).classList.remove('active');
 }
 
 function showListView() {
@@ -68,6 +132,80 @@ function showDetailView(symbol) {
     document.getElementById('detail-view').classList.add('active');
     loadFuturesDetail(symbol);
     loadKlineData(symbol, currentPeriod);
+    loadHistoryList(symbol);
+}
+
+async function loadWatchedSymbols() {
+    try {
+        const response = await fetch(`${API_BASE}/watched`);
+        const data = await response.json();
+        if (data.success) {
+            watchedSymbols = data.data.map(s => s.symbol);
+            document.getElementById('count-watched').textContent = watchedSymbols.length;
+        }
+    } catch (error) {
+        console.error('加载自选列表失败:', error);
+        watchedSymbols = [];
+    }
+}
+
+async function toggleWatch(symbol, name, event) {
+    event.stopPropagation();
+    const isWatched = watchedSymbols.includes(symbol);
+    
+    try {
+        if (isWatched) {
+            const response = await fetch(`${API_BASE}/watched/${symbol}`, { method: 'DELETE' });
+            const data = await response.json();
+            if (data.success) {
+                watchedSymbols = watchedSymbols.filter(s => s !== symbol);
+            }
+        } else {
+            const response = await fetch(`${API_BASE}/watched`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ symbol, name })
+            });
+            const data = await response.json();
+            if (data.success) {
+                watchedSymbols.push(symbol);
+            }
+        }
+        document.getElementById('count-watched').textContent = watchedSymbols.length;
+        
+        const activeTab = document.querySelector('.filter-tab.active');
+        if (activeTab && activeTab.dataset.category === 'watched') {
+            filterByCategory('watched');
+        } else {
+            renderFuturesGrid(getCurrentFilteredData());
+        }
+    } catch (error) {
+        console.error('切换自选失败:', error);
+    }
+}
+
+function getCurrentFilteredData() {
+    const activeTab = document.querySelector('.filter-tab.active');
+    const category = activeTab ? activeTab.dataset.category : 'all';
+    return filterDataByCategory(allFuturesData, category);
+}
+
+function filterDataByCategory(data, category) {
+    if (category === 'all') return data;
+    if (category === 'watched') {
+        return data.filter(item => watchedSymbols.includes(item.symbol));
+    }
+    const categoryMap = {
+        'energy': ['SC', 'FU', 'LU', 'BU', 'RU', 'NR'],
+        'metal': ['AU', 'AG', 'CU', 'AL', 'ZN', 'NI', 'SN', 'PB', 'SS', 'RB', 'HC', 'I', 'J', 'JM', 'AO', 'SI', 'LC', 'PS'],
+        'agriculture': ['M', 'RM', 'C', 'CS', 'A', 'B', 'Y', 'P', 'OI', 'CF', 'SR', 'AP', 'LH'],
+        'finance': ['IF', 'IC', 'IH', 'IM', 'T', 'TF', 'TS', 'TL']
+    };
+    const symbols = categoryMap[category] || [];
+    return data.filter(item => {
+        const symbolBase = item.symbol.replace(/[0-9]/g, '').toUpperCase();
+        return symbols.includes(symbolBase);
+    });
 }
 
 async function loadFuturesList() {
@@ -123,265 +261,125 @@ async function loadFuturesFromConfig() {
 
 function generateMockFuturesData() {
     return [
-        {
-            symbol: 'EC',
-            name: '集运指数',
-            price: 2150,
-            change: 196,
-            changePct: 10.06,
-            suggestion: '逢低做多',
-            suggestionType: 'up',
-            periods: { '5': 'up', '15': 'up', '30': 'up', '60': 'up' },
-            successRate: 80,
-            trendScore: 90,
-            resistance: 2200,
-            support: 2000,
-            open: 1960,
-            high: 2200,
-            low: 1940,
-            volume: 45600
-        },
-        {
-            symbol: 'AU',
-            name: '黄金',
-            price: 685.2,
-            change: 12.45,
-            changePct: 1.85,
-            suggestion: '逢低做多',
-            suggestionType: 'up',
-            periods: { '5': 'up', '15': 'up', '30': 'up', '60': 'up' },
-            successRate: 78,
-            trendScore: 92,
-            resistance: 692,
-            support: 678,
-            open: 672.75,
-            high: 688,
-            low: 670,
-            volume: 128000
-        },
-        {
-            symbol: 'AG',
-            name: '白银',
-            price: 8250,
-            change: 165,
-            changePct: 2.04,
-            suggestion: '逢低做多',
-            suggestionType: 'up',
-            periods: { '5': 'up', '15': 'up', '30': 'up', '60': 'up' },
-            successRate: 75,
-            trendScore: 88,
-            resistance: 8350,
-            support: 8100,
-            open: 8085,
-            high: 8280,
-            low: 8050,
-            volume: 95000
-        },
-        {
-            symbol: 'SC',
-            name: '原油',
-            price: 528.6,
-            change: 12.1,
-            changePct: 2.35,
-            suggestion: '逢低做多',
-            suggestionType: 'up',
-            periods: { '5': 'up', '15': 'up', '30': 'up', '60': 'neutral' },
-            successRate: 72,
-            trendScore: 85,
-            resistance: 535,
-            support: 518,
-            open: 516.5,
-            high: 530,
-            low: 515,
-            volume: 78000
-        },
-        {
-            symbol: 'I',
-            name: '铁矿石',
-            price: 785.5,
-            change: 28,
-            changePct: 3.7,
-            suggestion: '逢低做多',
-            suggestionType: 'up',
-            periods: { '5': 'up', '15': 'up', '30': 'up', '60': 'up' },
-            successRate: 68,
-            trendScore: 82,
-            resistance: 792,
-            support: 770,
-            open: 757.5,
-            high: 788,
-            low: 755,
-            volume: 156000
-        },
-        {
-            symbol: 'CU',
-            name: '铜',
-            price: 80610,
-            change: 112,
-            changePct: 0.14,
-            suggestion: '观望等待',
-            suggestionType: 'neutral',
-            periods: { '5': 'neutral', '15': 'up', '30': 'neutral', '60': 'up' },
-            successRate: 58,
-            trendScore: 65,
-            resistance: 81200,
-            support: 79800,
-            open: 80498,
-            high: 80850,
-            low: 80200,
-            volume: 42000
-        },
-        {
-            symbol: 'P',
-            name: '棕榈油',
-            price: 8750,
-            change: 0,
-            changePct: 0,
-            suggestion: '观望等待',
-            suggestionType: 'neutral',
-            periods: { '5': 'neutral', '15': 'neutral', '30': 'neutral', '60': 'neutral' },
-            successRate: 52,
-            trendScore: 50,
-            resistance: 8850,
-            support: 8650,
-            open: 8750,
-            high: 8780,
-            low: 8720,
-            volume: 65000
-        },
-        {
-            symbol: 'M',
-            name: '豆粕',
-            price: 2985,
-            change: -51,
-            changePct: -1.68,
-            suggestion: '逢高做空',
-            suggestionType: 'down',
-            periods: { '5': 'down', '15': 'down', '30': 'down', '60': 'neutral' },
-            successRate: 65,
-            trendScore: 35,
-            resistance: 3050,
-            support: 2920,
-            open: 3036,
-            high: 3040,
-            low: 2980,
-            volume: 185000
-        }
+        { symbol: 'SC2606', name: '原油', price: 528.6, change: 12.1, changePct: 2.35, suggestion: '逢低做多', suggestionType: 'up', periods: { '5': 'up', '15': 'up', '30': 'up', '60': 'neutral' }, successRate: 72, trendScore: 85, resistance: 535, support: 518, open: 516.5, high: 530, low: 515, volume: 78000 },
+        { symbol: 'AU2606', name: '黄金', price: 685.2, change: 12.45, changePct: 1.85, suggestion: '逢低做多', suggestionType: 'up', periods: { '5': 'up', '15': 'up', '30': 'up', '60': 'up' }, successRate: 78, trendScore: 92, resistance: 692, support: 678, open: 672.75, high: 688, low: 670, volume: 128000 },
+        { symbol: 'AG2606', name: '白银', price: 8250, change: 165, changePct: 2.04, suggestion: '逢低做多', suggestionType: 'up', periods: { '5': 'up', '15': 'up', '30': 'up', '60': 'up' }, successRate: 75, trendScore: 88, resistance: 8350, support: 8100, open: 8085, high: 8280, low: 8050, volume: 95000 },
+        { symbol: 'CU2606', name: '沪铜', price: 80610, change: 112, changePct: 0.14, suggestion: '观望等待', suggestionType: 'neutral', periods: { '5': 'neutral', '15': 'up', '30': 'neutral', '60': 'up' }, successRate: 58, trendScore: 65, resistance: 81200, support: 79800, open: 80498, high: 80850, low: 80200, volume: 42000 },
+        { symbol: 'M2609', name: '豆粕', price: 2985, change: -51, changePct: -1.68, suggestion: '逢高做空', suggestionType: 'down', periods: { '5': 'down', '15': 'down', '30': 'down', '60': 'neutral' }, successRate: 65, trendScore: 35, resistance: 3050, support: 2920, open: 3036, high: 3040, low: 2980, volume: 185000 }
     ];
 }
 
 function renderFuturesGrid(data) {
     const grid = document.getElementById('futures-grid');
-    grid.innerHTML = data.map(item => `
+    if (data.length === 0) {
+        grid.innerHTML = '<div class="empty-state">暂无数据</div>';
+        return;
+    }
+    
+    grid.innerHTML = data.map(item => {
+        const isWatched = watchedSymbols.includes(item.symbol);
+        return `
         <div class="futures-card" onclick="showDetailView('${item.symbol}')">
-            <div class="card-header">
-                <div class="card-title">
-                    <span class="card-name">${item.name}</span>
-                    <span class="card-code">(${item.symbol})</span>
+            <div class="card-top">
+                <div class="card-symbol">
+                    <div class="symbol-tag">${item.symbol.replace(/[0-9]/g, '').substring(0, 2)}</div>
+                    <div>
+                        <div class="card-name">${item.name}</div>
+                        <div class="card-code">${item.symbol}</div>
+                    </div>
                 </div>
                 <div class="card-price">
                     <div class="price-value ${item.change >= 0 ? 'up' : 'down'}">¥${formatNumber(item.price)}</div>
                     <div class="price-change ${item.change >= 0 ? 'up' : 'down'}">
                         <i class="fas fa-arrow-${item.change >= 0 ? 'up' : 'down'}"></i>
-                        +${formatNumber(item.change)} (+${item.changePct.toFixed(2)}%)
+                        ${item.change >= 0 ? '+' : ''}${formatNumber(item.change)} (${item.changePct >= 0 ? '+' : ''}${item.changePct.toFixed(2)}%)
                     </div>
                 </div>
             </div>
             <span class="suggestion-badge ${item.suggestionType}">${item.suggestion}</span>
-            <div class="card-section">
-                <div class="section-label"><i class="far fa-clock"></i> 多周期趋势</div>
-                <div class="period-tags">
-                    <span class="period-tag ${item.periods['5']}"><i class="fas fa-arrow-${getArrow(item.periods['5'])}"></i> 5分</span>
-                    <span class="period-tag ${item.periods['15']}"><i class="fas fa-arrow-${getArrow(item.periods['15'])}"></i> 15分</span>
-                    <span class="period-tag ${item.periods['30']}"><i class="fas fa-arrow-${getArrow(item.periods['30'])}"></i> 30分</span>
-                    <span class="period-tag ${item.periods['60']}"><i class="fas fa-arrow-${getArrow(item.periods['60'])}"></i> 60分</span>
+            <div class="card-metrics">
+                <div class="metric-item">
+                    <span class="metric-label">成功率</span>
+                    <div class="metric-bar"><div class="metric-fill ${item.successRate >= 70 ? 'up' : item.successRate >= 60 ? 'orange' : 'down'}" style="width: ${item.successRate}%"></div></div>
+                    <span class="metric-value ${item.successRate >= 70 ? 'up' : item.successRate >= 60 ? '' : 'down'}">${item.successRate}%</span>
                 </div>
-            </div>
-            <div class="card-section">
-                <div class="section-label"><i class="fas fa-chart-bar"></i> 交易成功率</div>
-                <div class="progress-bar">
-                    <div class="progress-fill ${item.successRate >= 70 ? 'up' : item.successRate >= 60 ? 'orange' : 'down'}" style="width: ${item.successRate}%"></div>
-                </div>
-                <div class="progress-info">
-                    <span class="progress-label"></span>
-                    <span class="progress-value ${item.successRate >= 70 ? 'up' : item.successRate >= 60 ? '' : 'down'}">${item.successRate}%</span>
-                </div>
-            </div>
-            <div class="card-section">
-                <div class="section-label">趋势评分</div>
-                <div class="progress-bar">
-                    <div class="progress-fill ${item.trendScore >= 70 ? 'up' : item.trendScore >= 50 ? 'orange' : 'down'}" style="width: ${item.trendScore}%"></div>
-                </div>
-                <div class="progress-info">
-                    <span class="progress-label"></span>
-                    <span class="progress-value ${item.trendScore >= 70 ? 'up' : item.trendScore >= 50 ? '' : 'down'}">${item.trendScore}/100</span>
+                <div class="metric-item">
+                    <span class="metric-label">趋势评分</span>
+                    <div class="metric-bar"><div class="metric-fill ${item.trendScore >= 70 ? 'up' : item.trendScore >= 50 ? 'orange' : 'down'}" style="width: ${item.trendScore}%"></div></div>
+                    <span class="metric-value ${item.trendScore >= 70 ? 'up' : item.trendScore >= 50 ? '' : 'down'}">${item.trendScore}</span>
                 </div>
             </div>
-            <div class="card-section">
-                <div class="section-label"><i class="fas fa-crosshairs"></i> 关键点位</div>
-                <div class="key-levels-row">
-                    <span class="level-label">压力: <span class="level-value down">${formatNumber(item.resistance)}</span></span>
-                    <span class="level-label">支撑: <span class="level-value up">${formatNumber(item.support)}</span></span>
-                </div>
+            <div class="period-trends">
+                <span class="period-tag ${item.periods['5']}">5M</span>
+                <span class="period-tag ${item.periods['15']}">15M</span>
+                <span class="period-tag ${item.periods['30']}">30M</span>
+                <span class="period-tag ${item.periods['60']}">1H</span>
             </div>
             <div class="card-footer">
-                <span class="detail-link">查看详情 <i class="fas fa-chevron-right"></i></span>
+                <div class="key-levels">
+                    <span><span class="label">压力</span> <span class="down">${formatNumber(item.resistance)}</span></span>
+                    <span><span class="label">支撑</span> <span class="up">${formatNumber(item.support)}</span></span>
+                </div>
+                <div style="display:flex;align-items:center;gap:8px;">
+                    <button class="watch-btn ${isWatched ? 'active' : ''}" onclick="toggleWatch('${item.symbol}', '${item.name}', event)" title="${isWatched ? '取消自选' : '加入自选'}">
+                        <i class="fas fa-star"></i>
+                    </button>
+                    <span class="detail-link"><i class="fas fa-arrow-right"></i> 详情</span>
+                </div>
             </div>
         </div>
-    `).join('');
-}
-
-function getArrow(type) {
-    if (type === 'up') return 'up';
-    if (type === 'down') return 'down';
-    return 'right';
+    `}).join('');
 }
 
 function formatNumber(num) {
+    if (num === 0 || num === undefined || num === null) return '--';
     return num.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
 }
 
+function calcPriceChangePercent(current, target) {
+    if (!current || !target || current === 0) return '--';
+    const pct = ((target - current) / current * 100).toFixed(2);
+    return (pct >= 0 ? '+' : '') + pct + '%';
+}
+
 function updateStats(data) {
-    document.getElementById('total-count').textContent = data.length;
-    const upCount = data.filter(d => d.change >= 0).length;
-    const downCount = data.length - upCount;
+    const total = data.length;
+    const upCount = data.filter(d => d.change > 0).length;
+    const downCount = data.filter(d => d.change < 0).length;
+    const neutralCount = total - upCount - downCount;
+    
+    document.getElementById('total-count').textContent = total;
     document.getElementById('up-count').textContent = upCount;
     document.getElementById('down-count').textContent = downCount;
+    document.getElementById('neutral-count').textContent = neutralCount;
+    document.getElementById('count-all').textContent = total;
+    document.getElementById('count-watched').textContent = watchedSymbols.length;
 }
 
 function filterFuturesList(keyword) {
     keyword = keyword.toLowerCase();
-    const filtered = allFuturesData.filter(item => 
-        item.name.toLowerCase().includes(keyword) || 
-        item.symbol.toLowerCase().includes(keyword)
-    );
+    const activeTab = document.querySelector('.filter-tab.active');
+    const category = activeTab ? activeTab.dataset.category : 'all';
+    
+    let filtered = filterDataByCategory(allFuturesData, category);
+    
+    if (keyword) {
+        filtered = filtered.filter(item => 
+            item.name.toLowerCase().includes(keyword) || 
+            item.symbol.toLowerCase().includes(keyword)
+        );
+    }
+    
     renderFuturesGrid(filtered);
-    updateStats(filtered);
 }
 
 function filterByCategory(category) {
-    if (category === 'all') {
-        renderFuturesGrid(allFuturesData);
-        updateStats(allFuturesData);
-    } else {
-        const categoryMap = {
-            'energy': ['SC', 'EC', 'FU', 'LU', 'BU', 'RU', 'NR', 'ZC'],
-            'metal': ['AU', 'AG', 'CU', 'AL', 'ZN', 'NI', 'SN', 'PB', 'SS', 'RB', 'HC', 'I', 'J', 'JM', 'SF', 'SM'],
-            'agriculture': ['M', 'RM', 'C', 'CS', 'A', 'B', 'Y', 'P', 'OI', 'CF', 'SR', 'AP', 'JD', 'LH', 'MA', 'TA', 'EG', 'PP', 'L', 'V', 'SA', 'FG', 'UR', 'SP'],
-            'finance': ['IF', 'IC', 'IH', 'IM', 'T', 'TF', 'TS', 'TL']
-        };
-        const symbols = categoryMap[category] || [];
-        const filtered = allFuturesData.filter(item => {
-            const symbolBase = item.symbol.replace(/[0-9]/g, '').toUpperCase();
-            return symbols.includes(symbolBase);
-        });
-        renderFuturesGrid(filtered);
-        updateStats(filtered);
-    }
+    let filtered = filterDataByCategory(allFuturesData, category);
+    renderFuturesGrid(filtered);
 }
 
 function sortFuturesList(sortBy) {
-    let sorted = [...allFuturesData];
+    let sorted = [...getCurrentFilteredData()];
     switch(sortBy) {
         case 'success_rate':
             sorted.sort((a, b) => b.successRate - a.successRate);
@@ -404,59 +402,46 @@ async function loadFuturesDetail(symbol) {
         const response = await fetch(`${API_BASE}/detail/${symbol}`);
         const data = await response.json();
         if (data.success) {
+            currentDetailData = data.data;
             updateDetailView(data.data);
         }
     } catch (error) {
         console.error('加载详情失败:', error);
-        const item = allFuturesData.find(d => d.symbol === symbol);
-        if (item) {
-            updateDetailView({
-                ...item,
-                entryPrice: item.price * 0.99,
-                targetPrice: item.resistance,
-                stopLoss: item.support,
-                riskLevel: item.trendScore >= 80 ? '低' : item.trendScore >= 60 ? '中' : '高',
-                macd: { signal: '金叉', detail: 'DIF: -0.0147' },
-                rsi: { value: 47, status: '正常' },
-                boll: { signal: '中轨', detail: '区间: 2086-2215' },
-                kdj: { signal: '中性', detail: 'K: 71 D: 87' },
-                resistances: [item.resistance, item.resistance * 1.05, item.resistance * 1.1],
-                supports: [item.support, item.support * 0.95, item.support * 0.9],
-                periodConsistency: {
-                    '5': item.periods['5'],
-                    '15': item.periods['15'],
-                    '30': item.periods['30'],
-                    '60': item.periods['60']
-                },
-                suggestionReason: '技术面突破，趋势明确'
-            });
-        }
     }
 }
 
 function updateDetailView(data) {
-    document.getElementById('detail-price').textContent = '¥' + formatNumber(data.price);
-    document.getElementById('detail-price').className = 'current-price ' + (data.change >= 0 ? 'up' : 'down');
+    document.getElementById('detail-name').textContent = data.name || '--';
+    document.getElementById('detail-symbol').textContent = data.symbol || '--';
+    
+    const priceEl = document.getElementById('detail-price');
+    priceEl.textContent = '¥' + formatNumber(data.price);
+    priceEl.className = 'price-value ' + (data.change >= 0 ? 'up' : 'down');
     
     const changeEl = document.getElementById('detail-change');
-    const changeIcon = data.change >= 0 ? 'up' : 'down';
     changeEl.className = 'price-change ' + (data.change >= 0 ? 'up' : 'down');
-    changeEl.innerHTML = `<i class="fas fa-arrow-${changeIcon}"></i> ${data.change >= 0 ? '+' : ''}${formatNumber(data.change)} (${data.changePct >= 0 ? '+' : ''}${data.changePct.toFixed(2)}%)`;
+    changeEl.innerHTML = `<i class="fas fa-arrow-${data.change >= 0 ? 'up' : 'down'}"></i> ${data.change >= 0 ? '+' : ''}${formatNumber(data.change)} (${data.changePct >= 0 ? '+' : ''}${data.changePct.toFixed(2)}%)`;
     
     document.getElementById('detail-open').textContent = formatNumber(data.open);
     document.getElementById('detail-high').textContent = formatNumber(data.high);
     document.getElementById('detail-low').textContent = formatNumber(data.low);
     document.getElementById('detail-volume').textContent = formatNumber(data.volume);
     
-    const suggestionBox = document.getElementById('suggestion-box');
-    suggestionBox.className = 'suggestion-box ' + data.suggestionType;
-    document.getElementById('suggestion-action').textContent = data.suggestion;
-    document.getElementById('suggestion-reason').textContent = data.suggestionReason || '';
+    const r1 = data.resistances ? data.resistances[0] : data.resistance;
+    const s1 = data.supports ? data.supports[0] : data.support;
+    
+    document.getElementById('detail-r1').textContent = `R1: ${formatNumber(r1)} (${calcPriceChangePercent(data.price, r1)})`;
+    document.getElementById('detail-s1').textContent = `S1: ${formatNumber(s1)} (${calcPriceChangePercent(data.price, s1)})`;
     
-    document.getElementById('entry-price').textContent = formatNumber(data.entryPrice || data.price * 0.99);
-    document.getElementById('target-price').textContent = formatNumber(data.targetPrice || data.resistance);
-    document.getElementById('stop-loss').textContent = formatNumber(data.stopLoss || data.support);
-    document.getElementById('risk-level').textContent = data.riskLevel || '中';
+    const badge = document.getElementById('suggestion-badge');
+    badge.textContent = data.suggestion || '--';
+    badge.className = 'suggestion-badge ' + (data.suggestionType || 'neutral');
+    
+    document.getElementById('suggestion-reason').textContent = data.suggestionReason || '--';
+    document.getElementById('entry-price').textContent = formatNumber(data.entryPrice);
+    document.getElementById('target-price').textContent = formatNumber(data.targetPrice);
+    document.getElementById('stop-loss').textContent = formatNumber(data.stopLoss);
+    document.getElementById('risk-level').textContent = data.riskLevel || '--';
     
     if (data.macd) {
         document.getElementById('macd-signal').textContent = data.macd.signal;
@@ -478,70 +463,214 @@ function updateDetailView(data) {
     if (data.resistances) {
         for (let i = 0; i < 3; i++) {
             const el = document.getElementById(`resistance-${i + 1}`);
-            if (el && data.resistances[i]) {
-                el.querySelector('.level-value').textContent = formatNumber(data.resistances[i]);
+            if (el) {
+                el.querySelector('span:last-child').textContent = formatNumber(data.resistances[i]);
             }
         }
     }
     if (data.supports) {
         for (let i = 0; i < 3; i++) {
             const el = document.getElementById(`support-${i + 1}`);
-            if (el && data.supports[i]) {
-                el.querySelector('.level-value').textContent = formatNumber(data.supports[i]);
+            if (el) {
+                el.querySelector('span:last-child').textContent = formatNumber(data.supports[i]);
             }
         }
     }
     
     if (data.periodConsistency) {
-        const container = document.getElementById('period-consistency');
+        const container = document.getElementById('period-trends');
         const periodNames = { '5': '5分钟', '15': '15分钟', '30': '30分钟', '60': '60分钟' };
         container.innerHTML = Object.entries(data.periodConsistency).map(([period, trend]) => `
-            <div class="consistency-row">
-                <span class="period-name">${periodNames[period]}</span>
-                <span class="consistency-badge ${trend}">
-                    <i class="fas fa-arrow-${trend === 'up' ? 'up' : trend === 'down' ? 'down' : 'right'}"></i>
+            <div class="trend-row">
+                <span class="trend-period">${periodNames[period]}</span>
+                <span class="trend-badge ${trend}">
                     ${trend === 'up' ? '上涨' : trend === 'down' ? '下跌' : '震荡'}
                 </span>
             </div>
         `).join('');
     }
+    
+    if (data.trendScore !== undefined) {
+        document.getElementById('trend-score').textContent = data.trendScore;
+        const circle = document.getElementById('score-fill');
+        const circumference = 2 * Math.PI * 45;
+        const offset = circumference - (data.trendScore / 100) * circumference;
+        circle.style.strokeDasharray = circumference;
+        circle.style.strokeDashoffset = offset;
+    }
 }
 
-async function loadKlineData(symbol, period) {
+async function loadHistoryList(symbol) {
     try {
-        const response = await fetch(`${API_BASE}/kline/${symbol}?period=${period}`);
+        const response = await fetch(`${API_BASE}/analysis/history/${symbol}?limit=10`);
         const data = await response.json();
         if (data.success) {
-            renderKlineChart(data.data);
+            renderHistoryList(data.data);
         }
     } catch (error) {
-        console.error('加载K线数据失败:', error);
-        const mockKline = generateMockKlineData();
-        renderKlineChart(mockKline);
+        console.error('加载历史记录失败:', error);
+        document.getElementById('history-list').innerHTML = '<div class="empty-state">暂无历史记录</div>';
     }
 }
 
-function generateMockKlineData() {
-    const data = [];
-    let basePrice = 2100;
-    const now = new Date();
-    now.setHours(13, 0, 0, 0);
-    
-    for (let i = 0; i < 60; i++) {
-        const time = new Date(now.getTime() + i * 15 * 60000);
-        const timeStr = String(time.getHours()).padStart(2, '0') + ':' + String(time.getMinutes()).padStart(2, '0');
-        
-        const open = basePrice + (Math.random() - 0.5) * 20;
-        const close = open + (Math.random() - 0.45) * 25;
-        const high = Math.max(open, close) + Math.random() * 10;
-        const low = Math.min(open, close) - Math.random() * 10;
-        const volume = Math.floor(Math.random() * 1000 + 200);
-        
-        data.push([timeStr, open.toFixed(2), close.toFixed(2), low.toFixed(2), high.toFixed(2), volume]);
-        basePrice = close;
+function renderHistoryList(records) {
+    const container = document.getElementById('history-list');
+    if (!records || records.length === 0) {
+        container.innerHTML = '<div class="empty-state">暂无历史记录</div>';
+        return;
     }
     
-    return data;
+    container.innerHTML = records.map(record => `
+        <div class="history-item" onclick="showHistoryModal(${JSON.stringify(record).replace(/"/g, '&quot;')})">
+            <div class="history-item-left">
+                <span class="history-time">${record.analysis_time ? record.analysis_time.replace('T', ' ').substring(0, 16) : '--'}</span>
+                <span class="history-suggestion ${record.suggestion_type || 'neutral'}">${record.suggestion || '--'}</span>
+                <span class="history-score">评分: ${record.trend_score || '--'}</span>
+            </div>
+            <div class="history-item-right">
+                <div class="history-metric">
+                    <span class="history-metric-label">MACD</span>
+                    <span class="history-metric-value">${record.macd_signal || '--'}</span>
+                </div>
+                <div class="history-metric">
+                    <span class="history-metric-label">RSI</span>
+                    <span class="history-metric-value">${record.rsi_value || '--'}</span>
+                </div>
+                <button class="history-detail-btn" onclick="event.stopPropagation(); showHistoryModal(${JSON.stringify(record).replace(/"/g, '&quot;')})">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
+        </div>
+    `).join('');
+}
+
+function showSuggestionModal(data) {
+    const body = document.getElementById('suggestion-modal-body');
+    body.innerHTML = `
+        <div class="modal-suggestion-main">
+            <div class="suggestion-badge ${data.suggestionType || 'neutral'}" style="font-size:24px;font-weight:700;">${data.suggestion || '--'}</div>
+            <div class="suggestion-reason" style="margin-top:8px;">${data.suggestionReason || '--'}</div>
+        </div>
+        <div class="modal-params-grid">
+            <div class="modal-param-card">
+                <span class="param-label">建议入场</span>
+                <span class="param-value">${formatNumber(data.entryPrice)}</span>
+            </div>
+            <div class="modal-param-card">
+                <span class="param-label">目标价位</span>
+                <span class="param-value up">${formatNumber(data.targetPrice)}</span>
+            </div>
+            <div class="modal-param-card">
+                <span class="param-label">止损价位</span>
+                <span class="param-value down">${formatNumber(data.stopLoss)}</span>
+            </div>
+            <div class="modal-param-card">
+                <span class="param-label">风险等级</span>
+                <span class="param-value">${data.riskLevel || '--'}</span>
+            </div>
+        </div>
+    `;
+    document.getElementById('suggestion-modal').classList.add('active');
+}
+
+function showHistoryModal(record) {
+    const body = document.getElementById('history-modal-body');
+    body.innerHTML = `
+        <div class="modal-section">
+            <div class="modal-section-title"><i class="fas fa-robot"></i> AI交易建议</div>
+            <div class="modal-suggestion-main" style="margin-bottom:0;">
+                <div class="suggestion-badge ${record.suggestion_type || 'neutral'}" style="font-size:20px;font-weight:700;">${record.suggestion || '--'}</div>
+            </div>
+            <div class="modal-params-grid" style="margin-top:12px;">
+                <div class="modal-param-card">
+                    <span class="param-label">入场</span>
+                    <span class="param-value">${formatNumber(record.entry_price)}</span>
+                </div>
+                <div class="modal-param-card">
+                    <span class="param-label">目标</span>
+                    <span class="param-value up">${formatNumber(record.target_price)}</span>
+                </div>
+                <div class="modal-param-card">
+                    <span class="param-label">止损</span>
+                    <span class="param-value down">${formatNumber(record.stop_loss)}</span>
+                </div>
+                <div class="modal-param-card">
+                    <span class="param-label">风险</span>
+                    <span class="param-value">${record.risk_level || '--'}</span>
+                </div>
+            </div>
+        </div>
+        <div class="modal-section">
+            <div class="modal-section-title"><i class="fas fa-wave-pulse"></i> 技术指标</div>
+            <div class="modal-indicators-grid">
+                <div class="modal-indicator-item">
+                    <span class="indicator-label">MACD</span>
+                    <span class="indicator-value">${record.macd_signal || '--'}</span>
+                </div>
+                <div class="modal-indicator-item">
+                    <span class="indicator-label">RSI</span>
+                    <span class="indicator-value">${record.rsi_value || '--'}</span>
+                </div>
+                <div class="modal-indicator-item">
+                    <span class="indicator-label">BOLL</span>
+                    <span class="indicator-value">${record.boll_signal || '--'}</span>
+                </div>
+                <div class="modal-indicator-item">
+                    <span class="indicator-label">KDJ</span>
+                    <span class="indicator-value">${record.kdj_signal || '--'}</span>
+                </div>
+            </div>
+        </div>
+        <div class="modal-section">
+            <div class="modal-section-title"><i class="fas fa-crosshairs"></i> 关键点位</div>
+            <div class="modal-levels-list">
+                ${(record.resistance_levels || []).map((v, i) => `
+                    <div class="modal-level-row">
+                        <span class="level-label">压力${i + 1}</span>
+                        <span class="level-value down">${formatNumber(v)}</span>
+                    </div>
+                `).join('')}
+                ${(record.support_levels || []).map((v, i) => `
+                    <div class="modal-level-row">
+                        <span class="level-label">支撑${i + 1}</span>
+                        <span class="level-value up">${formatNumber(v)}</span>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+        <div class="modal-section">
+            <div class="modal-section-title"><i class="fas fa-timeline"></i> 多周期趋势</div>
+            <div class="modal-trends-list">
+                ${Object.entries(record.period_trends || {}).map(([period, trend]) => {
+                    const names = { '5': '5分钟', '15': '15分钟', '30': '30分钟', '60': '60分钟' };
+                    return `<div class="modal-trend-row">
+                        <span class="modal-trend-period">${names[period] || period}</span>
+                        <span class="modal-trend-badge ${trend}">${trend === 'up' ? '上涨' : trend === 'down' ? '下跌' : '震荡'}</span>
+                    </div>`;
+                }).join('')}
+            </div>
+        </div>
+        <div class="modal-section">
+            <div class="modal-section-title"><i class="fas fa-gauge-high"></i> 趋势评分</div>
+            <div class="modal-param-card" style="text-align:center;">
+                <span class="param-value" style="font-size:32px;">${record.trend_score || '--'}</span>
+                <span class="param-label" style="display:block;margin-top:4px;">综合评分</span>
+            </div>
+        </div>
+    `;
+    document.getElementById('history-modal').classList.add('active');
+}
+
+async function loadKlineData(symbol, period) {
+    try {
+        const response = await fetch(`${API_BASE}/kline/${symbol}?period=${period}`);
+        const data = await response.json();
+        if (data.success) {
+            renderKlineChart(data.data);
+        }
+    } catch (error) {
+        console.error('加载K线数据失败:', error);
+    }
 }
 
 function renderKlineChart(data) {
@@ -564,67 +693,36 @@ function renderKlineChart(data) {
     const option = {
         backgroundColor: 'transparent',
         animation: false,
-        legend: {
-            data: ['K线', 'MA5', 'MA10', 'MA20', 'DIF', 'DEA', 'MACD'],
-            top: 10,
-            left: 10,
-            textStyle: { color: '#9aa0ab', fontSize: 11 }
-        },
         tooltip: {
             trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                crossStyle: { color: '#999' }
-            },
-            backgroundColor: 'rgba(26, 29, 40, 0.95)',
-            borderColor: '#2a2d3a',
-            textStyle: { color: '#e8eaed', fontSize: 12 },
-            formatter: function(params) {
-                if (!params || params.length === 0) return '';
-                let result = `<div style="font-weight:600;margin-bottom:6px">${params[0].axisValue}</div>`;
-                params.forEach(p => {
-                    if (p.seriesName === 'K线' && p.data) {
-                        const [o, c, l, h] = p.data;
-                        result += `开: ${o} 收: ${c}<br/>低: ${l} 高: ${h}`;
-                    } else if (p.seriesName === '成交量') {
-                        result += `<br/>成交量: ${p.data}`;
-                    } else if (p.seriesName === 'DIF' || p.seriesName === 'DEA') {
-                        result += `<br/>${p.seriesName}: ${p.data}`;
-                    } else if (p.seriesName === 'MACD') {
-                        result += `<br/>MACD: ${p.data}`;
-                    } else {
-                        result += `<br/>${p.seriesName}: ${p.data}`;
-                    }
-                });
-                return result;
-            }
+            axisPointer: { type: 'cross' },
+            backgroundColor: 'rgba(10, 15, 25, 0.95)',
+            borderColor: 'rgba(56, 189, 248, 0.2)',
+            textStyle: { color: '#e2e8f0', fontSize: 12 }
         },
         axisPointer: {
             link: [{ xAxisIndex: 'all' }],
-            label: {
-                backgroundColor: '#22c55e'
-            }
+            label: { backgroundColor: '#06b6d4' }
         },
         grid: [
-            { left: 70, right: 20, top: 60, height: '48%' },
-            { left: 70, right: 20, top: '54%', height: '14%' },
-            { left: 70, right: 20, top: '73%', height: '17%' }
+            { left: 70, right: 20, top: 10, height: '50%' },
+            { left: 70, right: 20, top: '56%', height: '16%' },
+            { left: 70, right: 20, top: '76%', height: '16%' }
         ],
         xAxis: [
             {
                 type: 'category',
                 data: dates,
                 boundaryGap: true,
-                axisLine: { lineStyle: { color: '#2a2d3a' } },
-                axisLabel: { color: '#9aa0ab', fontSize: 10 },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
+                axisLabel: { color: '#64748b', fontSize: 10 },
                 splitLine: { show: false }
             },
             {
                 type: 'category',
                 gridIndex: 1,
                 data: dates,
-                boundaryGap: true,
-                axisLine: { lineStyle: { color: '#2a2d3a' } },
+                axisLine: { show: false },
                 axisLabel: { show: false },
                 splitLine: { show: false }
             },
@@ -632,53 +730,46 @@ function renderKlineChart(data) {
                 type: 'category',
                 gridIndex: 2,
                 data: dates,
-                boundaryGap: true,
-                axisLine: { lineStyle: { color: '#2a2d3a' } },
-                axisLabel: { color: '#9aa0ab', fontSize: 10 },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
+                axisLabel: { color: '#64748b', fontSize: 10 },
                 splitLine: { show: false }
             }
         ],
         yAxis: [
             {
                 scale: true,
-                axisLine: { lineStyle: { color: '#2a2d3a' } },
-                axisLabel: { color: '#9aa0ab' },
-                splitLine: { lineStyle: { color: '#2a2d3a', type: 'dashed' } }
+                axisLine: { show: false },
+                axisLabel: { color: '#64748b' },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255,0.05)', type: 'dashed' } }
             },
             {
                 scale: true,
                 gridIndex: 1,
                 axisLine: { show: false },
-                axisTick: { show: false },
                 axisLabel: { show: false },
                 splitLine: { show: false }
             },
             {
                 scale: true,
                 gridIndex: 2,
-                axisLine: { lineStyle: { color: '#2a2d3a' } },
-                axisLabel: { color: '#9aa0ab', fontSize: 10 },
-                splitLine: { lineStyle: { color: '#2a2d3a', type: 'dashed' } }
+                axisLine: { show: false },
+                axisLabel: { color: '#64748b', fontSize: 10 },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255,0.05)', type: 'dashed' } }
             }
         ],
         dataZoom: [
-            {
-                type: 'inside',
-                xAxisIndex: [0, 1, 2],
-                start: 50,
-                end: 100
-            },
+            { type: 'inside', xAxisIndex: [0, 1, 2], start: 50, end: 100 },
             {
                 show: true,
                 xAxisIndex: [0, 1, 2],
                 type: 'slider',
                 bottom: 5,
-                height: 18,
+                height: 16,
                 borderColor: 'transparent',
-                backgroundColor: '#1a1d28',
-                fillerColor: 'rgba(34, 197, 94, 0.15)',
-                handleStyle: { color: '#22c55e' },
-                textStyle: { color: '#9aa0ab' }
+                backgroundColor: 'rgba(15, 20, 30, 0.5)',
+                fillerColor: 'rgba(6, 182, 212, 0.15)',
+                handleStyle: { color: '#06b6d4' },
+                textStyle: { color: '#64748b' }
             }
         ],
         series: [
@@ -687,9 +778,9 @@ function renderKlineChart(data) {
                 type: 'candlestick',
                 data: values,
                 itemStyle: {
-                    color: '#22c55e',
+                    color: '#10b981',
                     color0: '#ef4444',
-                    borderColor: '#22c55e',
+                    borderColor: '#10b981',
                     borderColor0: '#ef4444'
                 }
             },
@@ -721,10 +812,7 @@ function renderKlineChart(data) {
                 yAxisIndex: 1,
                 data: volumes.map(v => ({
                     value: v[0],
-                    itemStyle: {
-                        color: v[1] >= 0 ? '#22c55e' : '#ef4444',
-                        opacity: 0.6
-                    }
+                    itemStyle: { color: v[1] >= 0 ? 'rgba(16,185,129,0.5)' : 'rgba(239,68,68,0.5)' }
                 }))
             },
             {
@@ -750,22 +838,16 @@ function renderKlineChart(data) {
                 type: 'bar',
                 xAxisIndex: 2,
                 yAxisIndex: 2,
-                data: macdData.macd.map((val, idx) => ({
+                data: macdData.macd.map(val => ({
                     value: val,
-                    itemStyle: {
-                        color: val >= 0 ? '#22c55e' : '#ef4444',
-                        opacity: 0.7
-                    }
+                    itemStyle: { color: val >= 0 ? 'rgba(16,185,129,0.6)' : 'rgba(239,68,68,0.6)' }
                 }))
             }
         ]
     };
     
     klineChart.setOption(option);
-    
-    window.addEventListener('resize', () => {
-        klineChart && klineChart.resize();
-    });
+    window.addEventListener('resize', () => klineChart && klineChart.resize());
 }
 
 function calculateMA(data, dayCount) {
@@ -784,6 +866,19 @@ function calculateMA(data, dayCount) {
     return result;
 }
 
+function toggleTheme() {
+    const isMinimal = document.body.classList.toggle('theme-minimal');
+    localStorage.setItem('futures-theme', isMinimal ? 'minimal' : 'dark');
+    updateThemeIcon(isMinimal);
+}
+
+function updateThemeIcon(isMinimal) {
+    const icon = document.querySelector('#theme-toggle i');
+    if (icon) {
+        icon.className = isMinimal ? 'fas fa-sun' : 'fas fa-moon';
+    }
+}
+
 function calculateMACD(data) {
     const closes = data.map(d => parseFloat(d[2]));
     const ema12 = calcEMA(closes, 12);
@@ -799,7 +894,6 @@ function calculateMACD(data) {
     }
     
     const dea = calcEMA(dif, 9);
-    
     const macd = dif.map((d, i) => 2 * (d - (dea[i] || 0)));
     
     return { dif, dea, macd };
@@ -812,9 +906,7 @@ function calcEMA(data, period) {
     if (data.length < period) return result;
     
     let sum = 0;
-    for (let i = 0; i < period; i++) {
-        sum += data[i];
-    }
+    for (let i = 0; i < period; i++) sum += data[i];
     result[period - 1] = sum / period;
     
     for (let i = period; i < data.length; i++) {