From dc137e33ca8e3a8abf38e2b4015c214ee2e715c6 Mon Sep 17 00:00:00 2001
From: OoO <ooo@MacBook-Pro.local>
Date: Wed, 6 May 2026 21:46:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AA=BF=E6=95=B4=E6=9A=96=E8=89=B2=E7=B3=BB?=
 =?UTF-8?q?=E7=82=BA=E9=AE=AE=E6=98=8E=E7=B4=94=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.py                                        |  2 +-
 config.py                                     |  2 +-
 scripts/check_observability_ui.py             |  5 +-
 templates/auto_import_index.html              | 46 +++++++-------
 .../components/_analysis_report_tabs.html     |  2 +-
 templates/components/_ewoooc_shell.html       | 20 +++---
 templates/components/_navbar.html             | 16 +++--
 templates/daily_sales.html                    | 58 +++++++++--------
 templates/ewoooc_base.html                    | 35 ++++++-----
 templates/growth_analysis.html                | 22 +++----
 templates/sales_analysis.html                 | 31 +++++----
 web/static/css/ewoooc-tokens.css              | 63 ++++++++++---------
 12 files changed, 149 insertions(+), 153 deletions(-)

diff --git a/app.py b/app.py
index 1c6b68a..8b809dc 100644
--- a/app.py
+++ b/app.py
@@ -96,7 +96,7 @@ except Exception as e:
 
 # 🚩 系統版本定義 (備份與顯示用)
 # 🚩 2026-05-01 V10.76: Move monthly analysis report onto V2 shell
-SYSTEM_VERSION = "V10.86"
+SYSTEM_VERSION = "V10.87"
 
 # ==========================================
 # 🔒 SQL Injection 防護函數
diff --git a/config.py b/config.py
index 6a548c1..d5358db 100644
--- a/config.py
+++ b/config.py
@@ -314,7 +314,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '')
 # ==========================================
 # 系統版本與路徑
 # ==========================================
-SYSTEM_VERSION = "V10.86"
+SYSTEM_VERSION = "V10.87"
 LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log')
 public_url = PUBLIC_URL  # 用於模板顯示
 
diff --git a/scripts/check_observability_ui.py b/scripts/check_observability_ui.py
index 18149bb..234f57d 100644
--- a/scripts/check_observability_ui.py
+++ b/scripts/check_observability_ui.py
@@ -97,14 +97,15 @@ REQUIRED_SHELL_SNIPPETS = [
     "momo-nav-subtitle",
     "momo-nav-sublink",
     "rgba(255, 248, 238, 0.72)",
-    "linear-gradient(180deg",
+    "background: #f2eadf",
+    "var(--momo-page-accent, #e4573d)",
 ]
 
 FORBIDDEN_SHELL_PATTERNS = [
     Rule(
         "pure_black_sidebar",
         re.compile(r"\.momo-sidebar\s*\{[^}]*background\s*:\s*(#000|black)\b", re.IGNORECASE | re.DOTALL),
-        "側欄不得回退成純黑背景；必須維持暖深咖啡漸層。",
+        "側欄不得回退成純黑背景；必須維持暖色系新版 shell。",
     ),
     Rule(
         "low_contrast_sublink",
diff --git a/templates/auto_import_index.html b/templates/auto_import_index.html
index dd609f8..aeaea7b 100644
--- a/templates/auto_import_index.html
+++ b/templates/auto_import_index.html
@@ -17,9 +17,7 @@
             padding: 22px;
             border: 1px solid var(--momo-border-strong);
             border-radius: 8px;
-            background:
-                radial-gradient(circle at 16px 16px, rgba(42, 37, 32, 0.11) 1px, transparent 1px),
-                linear-gradient(135deg, rgba(247, 239, 227, 0.98), rgba(237, 214, 204, 0.5) 48%, rgba(198, 154, 74, 0.12));
+            background: var(--momo-warm-cream);
             background-size: 18px 18px, auto;
             box-shadow: var(--momo-shadow-soft);
         }
@@ -46,19 +44,20 @@
         }
 
         .auto-import-page .card-header {
-            background: linear-gradient(135deg, var(--momo-warm-terracotta), var(--momo-warm-copper));
-            color: var(--momo-page-inverse);
-            border: none;
+            background: var(--momo-warm-apricot);
+            color: var(--momo-text-primary);
+            border: 0;
+            border-bottom: 1px solid var(--momo-warm-latte);
             border-radius: 8px 8px 0 0 !important;
             padding: 1rem 1.25rem;
         }
 
         .auto-import-page .card:nth-of-type(2) .card-header {
-            background: linear-gradient(135deg, var(--momo-warm-apricot), var(--momo-warm-caramel));
+            background: var(--momo-warm-amber);
         }
 
         .auto-import-page .card:nth-of-type(3) .card-header {
-            background: linear-gradient(135deg, var(--momo-warm-copper), var(--momo-warm-olive));
+            background: var(--momo-warm-cream);
         }
 
         .auto-import-page .card-header h5 {
@@ -67,19 +66,19 @@
         }
 
         .auto-import-page .btn-primary {
-            background: linear-gradient(135deg, var(--momo-warm-terracotta), var(--momo-warm-copper));
+            background: var(--momo-warm-terracotta);
             border: none;
             border-radius: 8px;
             padding: 0.6rem 1.5rem;
             font-weight: 750;
-            box-shadow: 0 4px 12px rgba(184, 111, 82, 0.18);
+            box-shadow: 0 4px 12px rgba(228, 87, 61, 0.18);
             transition: all 0.3s ease;
         }
 
         .auto-import-page .btn-primary:hover {
             transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(184, 111, 82, 0.24);
-            background: linear-gradient(135deg, var(--momo-warm-copper), var(--momo-warm-terracotta));
+            box-shadow: 0 6px 16px rgba(228, 87, 61, 0.24);
+            background: var(--momo-accent-600);
         }
 
         .auto-import-page .btn-secondary {
@@ -93,7 +92,7 @@
         }
 
         .auto-import-page .btn-success {
-            background: linear-gradient(135deg, var(--momo-warm-olive), var(--momo-warm-amber));
+            background: var(--momo-warm-olive);
             border: none;
             border-radius: 8px;
             padding: 0.6rem 1.5rem;
@@ -105,7 +104,7 @@
         .auto-import-page .btn-success:hover {
             transform: translateY(-2px);
             box-shadow: 0 6px 16px rgba(143, 137, 104, 0.24);
-            background: linear-gradient(135deg, var(--momo-warm-amber), var(--momo-warm-olive));
+            background: color-mix(in srgb, var(--momo-warm-olive) 88%, var(--momo-text-primary));
         }
 
         .auto-import-page .table {
@@ -114,9 +113,9 @@
         }
 
         .auto-import-page .table thead th {
-            background: linear-gradient(90deg, var(--momo-warm-copper), var(--momo-warm-terracotta));
+            background: var(--momo-warm-cream);
             border-bottom: 0;
-            color: var(--momo-page-inverse);
+            color: var(--momo-text-primary);
             font-weight: 800;
             text-transform: uppercase;
             font-size: 0.75rem;
@@ -154,12 +153,12 @@
 
         .auto-import-page .badge-downloading {
             background: var(--momo-warm-peach-soft);
-            color: #5f4035;
+            color: var(--momo-accent-700);
         }
 
         .auto-import-page .badge-importing {
             background: var(--momo-warm-mahogany-soft);
-            color: #5f4035;
+            color: var(--momo-accent-700);
         }
 
         .auto-import-page .badge-completed {
@@ -179,7 +178,7 @@
         }
 
         .auto-import-page .progress-bar {
-            background: linear-gradient(90deg, var(--momo-warm-terracotta), var(--momo-warm-apricot), var(--momo-warm-amber));
+            background: var(--momo-warm-terracotta);
         }
 
         .auto-import-page .form-label {
@@ -190,7 +189,7 @@
 
         .auto-import-page .form-control:focus {
             border-color: var(--momo-warm-terracotta);
-            box-shadow: 0 0 0 0.2rem rgba(184, 111, 82, 0.15);
+            box-shadow: 0 0 0 0.2rem rgba(228, 87, 61, 0.15);
         }
 
         .auto-import-page .alert {
@@ -198,10 +197,9 @@
         }
 
         .auto-import-page .alert-info {
-            color: #5f4035;
-            background:
-                linear-gradient(135deg, rgba(237, 214, 204, 0.58), rgba(247, 239, 227, 0.88));
-            border-color: rgba(184, 111, 82, 0.22);
+            color: var(--momo-accent-700);
+            background: rgba(255, 224, 211, 0.46);
+            border-color: rgba(228, 87, 61, 0.22);
         }
 
         .auto-import-page .alert-light {
diff --git a/templates/components/_analysis_report_tabs.html b/templates/components/_analysis_report_tabs.html
index 60aca1a..dc515f0 100644
--- a/templates/components/_analysis_report_tabs.html
+++ b/templates/components/_analysis_report_tabs.html
@@ -38,7 +38,7 @@
     }
     .analysis-report-tab.is-active {
         border-color: var(--momo-page-accent-dark, #a95846);
-        background: linear-gradient(135deg, var(--momo-page-accent, #d96f52), var(--momo-page-accent-dark, #a95846));
+        background: var(--momo-page-accent, #c8796a);
         color: var(--momo-page-inverse, #fff8ee);
     }
     .analysis-report-tab.is-external {
diff --git a/templates/components/_ewoooc_shell.html b/templates/components/_ewoooc_shell.html
index 93ad4ef..888d0da 100644
--- a/templates/components/_ewoooc_shell.html
+++ b/templates/components/_ewoooc_shell.html
@@ -18,9 +18,7 @@
 
 <style>
     .momo-sidebar {
-        background:
-            radial-gradient(circle at 28px 30px, rgba(184, 111, 82, 0.05), transparent 36px),
-            linear-gradient(180deg, #f4ecdf 0%, #e8dfd0 100%) !important;
+        background: #f2eadf !important;
         border-right: 1px solid rgba(42, 37, 32, 0.14);
         box-shadow: inset -1px 0 0 rgba(255, 248, 238, 0.72), 16px 0 32px rgba(61, 38, 27, 0.08);
     }
@@ -42,7 +40,7 @@
         text-rendering: geometricPrecision;
     }
     .momo-logo-mark {
-        background: linear-gradient(135deg, var(--momo-warm-copper, #7f5a49), var(--momo-warm-caramel, #b98a5f));
+        background: var(--momo-warm-terracotta, #e4573d);
         color: var(--momo-bg-elevated, #fdfaf3);
         box-shadow: none;
     }
@@ -61,9 +59,9 @@
         color: var(--momo-page-accent-dark, var(--momo-accent-700, #8f4530)) !important;
     }
     .momo-nav-link.is-active {
-        background: linear-gradient(135deg, var(--momo-page-accent, #d06d49), var(--momo-page-accent-dark, #c45f3f)) !important;
+        background: var(--momo-page-accent, #e4573d) !important;
         color: var(--momo-page-inverse, #fff8ee) !important;
-        box-shadow: 0 10px 22px rgba(127, 90, 73, 0.18);
+        box-shadow: 0 10px 22px rgba(228, 87, 61, 0.18);
     }
     .momo-nav-link .momo-nav-code {
         color: var(--momo-text-tertiary, #9b9184) !important;
@@ -101,10 +99,8 @@
     .momo-nav-subtree {
         margin: 0.42rem 0 0.72rem 1.05rem;
         padding: 0.42rem 0 0.42rem 0.78rem;
-        border-left: 1px solid color-mix(in srgb, var(--momo-page-accent, #b86f52) 34%, transparent);
-        background:
-            radial-gradient(circle at 6px 8px, rgba(184, 111, 82, 0.1) 1px, transparent 1.4px),
-            linear-gradient(180deg, rgba(255, 248, 238, 0.48), rgba(255, 252, 246, 0.18));
+        border-left: 1px solid color-mix(in srgb, var(--momo-page-accent, #e4573d) 34%, transparent);
+        background: rgba(255, 248, 238, 0.48);
         background-size: 10px 10px, auto;
         border-radius: 0 0.95rem 0.95rem 0;
     }
@@ -135,7 +131,7 @@
     }
     .momo-nav-sublink:hover,
     .momo-nav-sublink.is-active {
-        background: linear-gradient(135deg, rgba(255, 248, 238, 0.92), rgba(201, 100, 66, 0.13));
+        background: rgba(255, 248, 238, 0.92);
         color: var(--momo-page-accent-dark, var(--momo-accent-700, #8f4530));
         box-shadow: inset 0 0 0 1px rgba(201, 100, 66, 0.22), 0 8px 18px rgba(70, 46, 28, 0.08);
         transform: translateX(2px);
@@ -171,7 +167,7 @@
         align-items: center;
         justify-content: center;
         border: 1px solid rgba(255, 248, 238, 0.86);
-        background: linear-gradient(135deg, var(--momo-page-accent, #d76a45), var(--momo-page-accent-dark, #9d4a32));
+        background: var(--momo-page-accent, #e4573d);
         color: var(--momo-page-inverse, #fff8ee);
         box-shadow: 0 8px 18px rgba(132, 58, 34, 0.26);
         font-size: 0.62rem;
diff --git a/templates/components/_navbar.html b/templates/components/_navbar.html
index 02c3df8..d56ee75 100755
--- a/templates/components/_navbar.html
+++ b/templates/components/_navbar.html
@@ -14,9 +14,9 @@
         --momo-legacy-paper: #f3eee2;
         --momo-legacy-ink: #2a2520;
         --momo-legacy-muted: #645c52;
-        --momo-legacy-accent: #d96f52;
-        --momo-legacy-accent-dark: #a95846;
-        --momo-legacy-accent-soft: rgba(201, 100, 66, 0.12);
+        --momo-legacy-accent: #e4573d;
+        --momo-legacy-accent-dark: #9f332a;
+        --momo-legacy-accent-soft: rgba(228, 87, 61, 0.12);
         --momo-legacy-line: rgba(42, 37, 32, 0.16);
         --momo-legacy-inverse: #fff8ee;
     }
@@ -29,9 +29,7 @@
     .navbar.navbar-dark,
     .navbar.bg-custom-dark,
     .navbar-dark.bg-primary {
-        background:
-            radial-gradient(circle at 24px 24px, rgba(255, 248, 238, 0.16) 1px, transparent 1px),
-            linear-gradient(135deg, var(--momo-legacy-accent-dark), var(--momo-legacy-accent)) !important;
+        background: var(--momo-legacy-accent) !important;
         background-size: 10px 10px, auto;
         border-bottom: 1px solid rgba(255, 248, 238, 0.18);
         box-shadow: 0 10px 24px rgba(61, 38, 27, 0.16) !important;
@@ -94,15 +92,15 @@
     .page-item.active .page-link,
     .card-header.bg-primary {
         color: var(--momo-legacy-inverse) !important;
-        background: linear-gradient(135deg, var(--momo-legacy-accent), var(--momo-legacy-accent-dark)) !important;
+        background: var(--momo-legacy-accent) !important;
         border-color: var(--momo-legacy-accent-dark) !important;
     }
 
     .btn-primary:hover,
     .btn-primary:focus {
         color: var(--momo-legacy-inverse) !important;
-        background: linear-gradient(135deg, #c65f45, #9f4f3e) !important;
-        border-color: #7a3520 !important;
+        background: #cc4935 !important;
+        border-color: #9f332a !important;
     }
 
     .btn-outline-primary {
diff --git a/templates/daily_sales.html b/templates/daily_sales.html
index a1bcc12..bf5afc4 100644
--- a/templates/daily_sales.html
+++ b/templates/daily_sales.html
@@ -18,9 +18,7 @@
             padding: 22px;
             border: 1px solid var(--momo-border-strong);
             border-radius: 8px;
-            background:
-                radial-gradient(circle at 18px 18px, rgba(42, 37, 32, 0.12) 1px, transparent 1px),
-                linear-gradient(135deg, rgba(242, 178, 90, 0.22), rgba(255, 255, 255, 0.94) 46%, rgba(42, 37, 32, 0.06));
+            background: var(--momo-warm-cream);
             background-size: 18px 18px, auto;
             box-shadow: var(--momo-shadow-soft);
         }
@@ -131,7 +129,7 @@
         }
 
         .bg-purple {
-            background: linear-gradient(135deg, var(--momo-warm-rust), var(--momo-warm-mahogany));
+            background: var(--momo-warm-rose);
         }
 
         .chart-container {
@@ -204,7 +202,7 @@
         }
 
         .calendar-nav button {
-            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany));
+            background: var(--momo-page-accent);
             border: none;
             border-radius: 10px;
             padding: 0.6rem 1.2rem;
@@ -255,11 +253,11 @@
             transform: translateY(-3px) scale(1.02);
             box-shadow: 0 8px 20px rgba(217, 111, 82, 0.16);
             border-color: var(--momo-warm-caramel);
-            background: linear-gradient(135deg, #ffffff 0%, var(--momo-warm-peach-soft) 100%);
+            background: var(--momo-warm-peach-soft);
         }
 
         .calendar-day.has-data {
-            background: linear-gradient(135deg, #ffffff 0%, rgba(255, 248, 238, 0.9) 100%);
+            background: rgba(255, 248, 238, 0.9);
             border-color: #d0d5e0;
         }
 
@@ -277,7 +275,7 @@
             border-color: var(--momo-warm-caramel) !important;
             border-width: 5px !important;
             box-shadow: 0 0 0 6px rgba(217, 111, 82, 0.22), 0 12px 32px rgba(217, 111, 82, 0.28), inset 0 2px 10px rgba(217, 111, 82, 0.12) !important;
-            background: linear-gradient(135deg, var(--momo-warm-peach-soft) 0%, var(--momo-warm-caramel-soft) 100%) !important;
+            background: var(--momo-warm-peach-soft) !important;
             transform: scale(1.08) !important;
             position: relative;
             animation: pulseGlow 2s ease-in-out infinite;
@@ -290,7 +288,7 @@
             right: -8px;
             width: 32px;
             height: 32px;
-            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany));
+            background: var(--momo-page-accent);
             border-radius: 50%;
             color: white;
             display: flex;
@@ -377,26 +375,26 @@
         }
 
         .calendar-day.has-data.dod-up .calendar-day-badge {
-            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+            background: var(--momo-warm-rose);
             color: #fff;
             border: none;
         }
 
         .calendar-day.has-data.dod-down .calendar-day-badge {
-            background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
+            background: var(--momo-warm-olive);
             color: #fff;
             border: none;
         }
 
         /* 週末與假日背景 */
         .calendar-day.is-weekend {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
-            border-color: #d0d5ff;
+            background: var(--momo-warm-cream);
+            border-color: var(--momo-warm-latte);
         }
 
         .calendar-day.is-holiday {
-            background: linear-gradient(135deg, #fff5f7 0%, #ffe8ed 100%);
-            border-color: #ffc9d0;
+            background: var(--momo-warm-blush);
+            border-color: rgba(217, 108, 117, 0.32);
         }
 
         .calendar-day.is-holiday .calendar-day-number {
@@ -422,7 +420,7 @@
 
         /* 頁面標題樣式 */
         .page-header {
-            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany));
+            background: var(--momo-page-accent);
             padding: 2rem;
             border-radius: 16px;
             margin-bottom: 2rem;
@@ -454,7 +452,7 @@
 
         /* 按鈕樣式優化 */
         .btn-success {
-            background: linear-gradient(135deg, var(--momo-warm-earth), var(--momo-warm-honey));
+            background: var(--momo-warm-olive);
             border: none;
             border-radius: 10px;
             padding: 0.6rem 1.5rem;
@@ -466,7 +464,7 @@
         .btn-success:hover {
             transform: translateY(-2px);
             box-shadow: 0 6px 16px rgba(154, 143, 89, 0.32);
-            background: linear-gradient(135deg, var(--momo-warm-honey), var(--momo-warm-earth));
+            background: color-mix(in srgb, var(--momo-warm-olive) 88%, var(--momo-text-primary));
         }
 
         /* 表格樣式優化 */
@@ -476,7 +474,7 @@
         }
 
         .table thead {
-            background: linear-gradient(135deg, var(--momo-warm-mahogany), var(--momo-warm-caramel));
+            background: var(--momo-page-accent);
             color: #fff;
         }
 
@@ -494,7 +492,7 @@
         }
 
         .table tbody tr:hover {
-            background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+            background: var(--momo-warm-cream);
             transform: scale(1.01);
         }
 
@@ -1313,16 +1311,16 @@
         Chart.defaults.font.family = "'Noto Sans TC', 'Inter', system-ui, sans-serif";
 
         const chartPalette = {
-            caramel: 'rgba(201, 100, 66, 1)',
-            caramelSoft: 'rgba(201, 100, 66, 0.14)',
-            honey: 'rgba(184, 132, 22, 1)',
-            honeySoft: 'rgba(184, 132, 22, 0.14)',
-            rust: 'rgba(181, 52, 47, 1)',
-            rustSoft: 'rgba(181, 52, 47, 0.12)',
-            mahogany: 'rgba(143, 69, 48, 1)',
-            mahoganySoft: 'rgba(143, 69, 48, 0.12)',
-            earth: 'rgba(138, 90, 43, 1)',
-            earthSoft: 'rgba(138, 90, 43, 0.12)',
+            caramel: 'rgba(217, 138, 74, 1)',
+            caramelSoft: 'rgba(217, 138, 74, 0.14)',
+            honey: 'rgba(242, 184, 75, 1)',
+            honeySoft: 'rgba(242, 184, 75, 0.14)',
+            rust: 'rgba(228, 87, 61, 1)',
+            rustSoft: 'rgba(228, 87, 61, 0.12)',
+            mahogany: 'rgba(217, 108, 117, 1)',
+            mahoganySoft: 'rgba(217, 108, 117, 0.12)',
+            earth: 'rgba(145, 168, 90, 1)',
+            earthSoft: 'rgba(145, 168, 90, 0.12)',
             muted: 'rgba(126, 111, 92, 0.52)'
         };
 
diff --git a/templates/ewoooc_base.html b/templates/ewoooc_base.html
index cffa571..d8a0ff5 100644
--- a/templates/ewoooc_base.html
+++ b/templates/ewoooc_base.html
@@ -24,14 +24,17 @@
     {% block extra_css %}{% endblock %}
     <style>
         .momo-app[data-active-page="dashboard"] {
-            --momo-page-accent: var(--momo-warm-caramel);
-            --momo-page-accent-dark: var(--momo-warm-mahogany);
+            --momo-page-accent: var(--momo-warm-terracotta);
+            --momo-page-accent-dark: var(--momo-accent-700);
             --momo-page-accent-soft: var(--momo-warm-caramel-soft);
+            --momo-page-accent-2: var(--momo-warm-apricot);
+            --momo-page-accent-3: var(--momo-warm-amber);
+            --momo-page-accent-4: var(--momo-warm-olive);
         }
         .momo-app[data-active-page="edm"],
         .momo-app[data-active-page="campaigns"] {
             --momo-page-accent: var(--momo-warm-amber);
-            --momo-page-accent-dark: var(--momo-warm-copper);
+            --momo-page-accent-dark: var(--momo-warm-terracotta);
             --momo-page-accent-soft: var(--momo-warm-honey-soft);
             --momo-page-accent-2: var(--momo-warm-apricot);
             --momo-page-accent-3: var(--momo-warm-terracotta);
@@ -41,9 +44,13 @@
         .momo-app[data-active-page="daily_sales"],
         .momo-app[data-active-page="monthly"],
         .momo-app[data-active-page="growth"] {
-            --momo-page-accent: var(--momo-warm-caramel);
-            --momo-page-accent-dark: var(--momo-warm-mahogany);
+            --momo-page-accent: var(--momo-warm-terracotta);
+            --momo-page-accent-dark: var(--momo-accent-700);
             --momo-page-accent-soft: var(--momo-warm-peach-soft);
+            --momo-page-accent-2: var(--momo-warm-apricot);
+            --momo-page-accent-3: var(--momo-warm-amber);
+            --momo-page-accent-4: var(--momo-warm-rose);
+            --momo-page-accent-5: var(--momo-warm-olive);
         }
         .momo-app[data-active-page="vendor_stockout"] {
             --momo-page-accent: var(--momo-warm-rust);
@@ -60,7 +67,7 @@
         .momo-app[data-active-page="auto_import"],
         .momo-app[data-active-page="market_intel"] {
             --momo-page-accent: var(--momo-warm-terracotta);
-            --momo-page-accent-dark: var(--momo-warm-copper);
+            --momo-page-accent-dark: var(--momo-accent-700);
             --momo-page-accent-soft: var(--momo-warm-mahogany-soft);
             --momo-page-accent-2: var(--momo-warm-amber);
             --momo-page-accent-3: var(--momo-warm-apricot);
@@ -74,7 +81,7 @@
         .momo-app[data-active-page="user_management"],
         .momo-app[data-active-page="ai_automation_smoke"] {
             --momo-page-accent: var(--momo-warm-caramel);
-            --momo-page-accent-dark: var(--momo-warm-mahogany);
+            --momo-page-accent-dark: var(--momo-accent-700);
             --momo-page-accent-soft: var(--momo-warm-caramel-soft);
         }
 
@@ -109,22 +116,22 @@
         .momo-app .bg-primary,
         .momo-app .bg-dark {
             color: var(--momo-page-inverse) !important;
-            background: linear-gradient(135deg, var(--momo-page-accent), var(--momo-page-accent-dark)) !important;
-            border-color: var(--momo-page-accent-dark) !important;
+            background: var(--momo-page-accent) !important;
+            border-color: color-mix(in srgb, var(--momo-page-accent) 72%, var(--momo-warm-copper)) !important;
         }
 
         .momo-app .dashboard-kpi.is-accent,
         .momo-app .kpi-card.text-white:nth-child(2n),
         .momo-app .card:nth-of-type(2) .card-header.bg-gradient,
         .momo-app .auto-import-page .btn-success {
-            background: linear-gradient(135deg, var(--momo-page-accent-2), var(--momo-page-accent-5, var(--momo-warm-olive))) !important;
+            background: var(--momo-page-accent-2) !important;
             border-color: var(--momo-page-accent-5, var(--momo-warm-olive)) !important;
         }
 
         .momo-app .campaign-tab.is-active,
         .momo-app .campaign-slot-tab.active,
         .momo-app .auto-import-page .progress-bar {
-            background: linear-gradient(90deg, var(--momo-page-accent), var(--momo-page-accent-2), var(--momo-page-accent-3)) !important;
+            background: var(--momo-page-accent) !important;
         }
 
         .momo-app .page-header h1,
@@ -166,7 +173,7 @@
 
         .momo-app .dashboard-kpi.is-accent::before,
         .momo-app .momo-status-card::before {
-            background-image: radial-gradient(circle, rgba(255, 248, 238, 0.2) 1px, transparent 1px) !important;
+            background-image: none !important;
         }
 
         .momo-app .dashboard-table th,
@@ -178,8 +185,8 @@
         .momo-app .monthly-analysis-page .table-light th,
         .momo-app .ai-intel-page .table thead th {
             color: var(--momo-page-inverse) !important;
-            background: linear-gradient(90deg, var(--momo-page-accent-dark), var(--momo-page-accent)) !important;
-            border-bottom-color: color-mix(in srgb, var(--momo-page-accent-dark) 70%, #fff8ee) !important;
+            background: var(--momo-page-accent) !important;
+            border-bottom-color: color-mix(in srgb, var(--momo-page-accent) 62%, #fff8ee) !important;
         }
 
         .momo-app .dashboard-table th a,
diff --git a/templates/growth_analysis.html b/templates/growth_analysis.html
index fad9f2c..07640ee 100644
--- a/templates/growth_analysis.html
+++ b/templates/growth_analysis.html
@@ -33,15 +33,15 @@
         .growth-analysis-page .bg-primary,
         .growth-analysis-page .bg-success,
         .growth-analysis-page .bg-info {
-            background: linear-gradient(135deg, var(--momo-page-accent-dark), var(--momo-page-accent)) !important;
+            background: var(--momo-page-accent) !important;
         }
 
         .growth-analysis-page .bg-success {
-            background: linear-gradient(135deg, var(--momo-warm-earth), var(--momo-warm-honey)) !important;
+            background: var(--momo-warm-olive) !important;
         }
 
         .growth-analysis-page .bg-info {
-            background: linear-gradient(135deg, var(--momo-warm-rust), var(--momo-warm-caramel)) !important;
+            background: var(--momo-warm-rose) !important;
         }
 
         .growth-analysis-page .text-success,
@@ -177,14 +177,14 @@
     <script>
         const data = JSON.parse(document.getElementById('chart-data').textContent);
         const chartPalette = {
-            caramel: 'rgba(201, 100, 66, 1)',
-            caramelSoft: 'rgba(201, 100, 66, 0.58)',
-            honey: 'rgba(184, 132, 22, 1)',
-            honeySoft: 'rgba(184, 132, 22, 0.58)',
-            rust: 'rgba(181, 52, 47, 1)',
-            rustSoft: 'rgba(181, 52, 47, 0.48)',
-            mahogany: 'rgba(143, 69, 48, 1)',
-            mahoganySoft: 'rgba(143, 69, 48, 0.12)'
+            caramel: 'rgba(217, 138, 74, 1)',
+            caramelSoft: 'rgba(217, 138, 74, 0.58)',
+            honey: 'rgba(242, 184, 75, 1)',
+            honeySoft: 'rgba(242, 184, 75, 0.58)',
+            rust: 'rgba(228, 87, 61, 1)',
+            rustSoft: 'rgba(228, 87, 61, 0.42)',
+            mahogany: 'rgba(217, 108, 117, 1)',
+            mahoganySoft: 'rgba(217, 108, 117, 0.12)'
         };
 
         Chart.defaults.color = '#6f665a';
diff --git a/templates/sales_analysis.html b/templates/sales_analysis.html
index 8aa0fdf..fcbf461 100644
--- a/templates/sales_analysis.html
+++ b/templates/sales_analysis.html
@@ -127,7 +127,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 245, 255, 0.95) 100%);
+            background: rgba(255, 244, 230, 0.95);
             z-index: 9999;
             display: none;
             flex-direction: column;
@@ -150,14 +150,11 @@
         #loadingOverlay .loading-logo {
             z-index: 3;
             animation: cloud-float 3s ease-in-out infinite;
-            /* V-Fix: 極簡設計 - 純漸層文字 */
+            /* V-Fix: 極簡設計 - 純色文字 */
             font-size: 2.5rem;
             font-weight: 800;
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-rust));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
+            color: var(--momo-page-accent);
             letter-spacing: 4px;
             filter: drop-shadow(0 4px 15px rgba(217, 111, 82, 0.32));
         }
@@ -233,7 +230,7 @@
             position: absolute;
             width: 100px;
             height: 100px;
-            background: radial-gradient(circle, rgba(79, 70, 229, 0.3) 0%, transparent 70%);
+            background: rgba(228, 87, 61, 0.18);
             border-radius: 50%;
             animation: pulse-expand 2s ease-out infinite;
         }
@@ -282,7 +279,7 @@
             position: absolute;
             width: 8px;
             height: 8px;
-            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-rust));
+            background: var(--momo-page-accent);
             border-radius: 50%;
             box-shadow: 0 0 10px rgba(217, 111, 82, 0.68);
         }
@@ -412,7 +409,7 @@
 
         #loadingOverlay .loading-progress-bar {
             height: 100%;
-            background: linear-gradient(90deg, var(--momo-warm-caramel), var(--momo-warm-rust), var(--momo-warm-honey));
+            background: var(--momo-page-accent);
             background-size: 200% 100%;
             animation: progress-flow 1.5s linear infinite;
             width: 100%;
@@ -472,7 +469,7 @@
 
         /* Custom Dark Gray Navbar */
         .navbar.bg-custom-dark {
-            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
+            background: var(--momo-page-accent);
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
@@ -507,13 +504,13 @@
 
         .sales-analysis-page .bg-primary,
         .sales-analysis-page .btn-primary {
-            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany)) !important;
-            border-color: var(--momo-warm-mahogany) !important;
+            background: var(--momo-page-accent) !important;
+            border-color: var(--momo-accent-700) !important;
         }
 
         .sales-analysis-page .btn-success,
         .sales-analysis-page .bg-success {
-            background: linear-gradient(135deg, var(--momo-warm-earth), var(--momo-warm-honey)) !important;
+            background: var(--momo-warm-olive) !important;
             border-color: var(--momo-warm-earth) !important;
         }
 
@@ -613,7 +610,7 @@
         <!-- V-New: 控制面板 (篩選器) -->
         <div class="card mb-4 shadow-sm" style="z-index: 100; transform: none !important; transition: none;">
             <div class="card-header bg-gradient"
-                style="background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany)); border: none;">
+                style="background: var(--momo-page-accent); border: none;">
                 <div class="d-flex justify-content-between align-items-center">
                     <h5 class="mb-0 text-white"><i class="fas fa-sliders-h me-2"></i>進階篩選與分析</h5>
                     <!-- V-New: 分析維度切換（更顯眼的設計） -->
@@ -1170,7 +1167,7 @@
         {% if abc_stats %}
         <div class="row mb-4">
             <div class="col-12">
-                <div class="card border-0 shadow-sm" style="background: linear-gradient(to right, #f8f9fa, #fff);">
+                <div class="card border-0 shadow-sm" style="background: rgba(255, 252, 247, 0.94);">
                     <div class="card-body py-3">
                         <div class="d-flex align-items-center justify-content-between">
                             <h6 class="mb-0 fw-bold text-dark"><i
@@ -3035,8 +3032,8 @@
                         {
                             label: `${year2}年`,
                             data: year2Data,
-                            backgroundColor: 'rgba(79, 70, 229, 0.6)',
-                            borderColor: 'rgba(79, 70, 229, 1)',
+                            backgroundColor: 'rgba(228, 87, 61, 0.6)',
+                            borderColor: 'rgba(228, 87, 61, 1)',
                             borderWidth: 1
                         }
                     ]
diff --git a/web/static/css/ewoooc-tokens.css b/web/static/css/ewoooc-tokens.css
index 968060a..ccd9fa5 100644
--- a/web/static/css/ewoooc-tokens.css
+++ b/web/static/css/ewoooc-tokens.css
@@ -1,7 +1,7 @@
 /**
  * MOMO Pro × Nothing × Claude 設計 Token v2.0
  * — Nothing 的點陣骨架（黑白、像素、工業）
- * — Cream / warm wood / muted rose / apricot / terra cotta palette
+ * — Cream / warm coral / apricot / marigold / dusty rose palette
  */
 
 :root {
@@ -23,31 +23,32 @@
   --momo-line-faint:         rgba(42,37,32,0.10);
 
   /* EwoooC refined warm accent */
-  --momo-accent:            #b86f52;          /* muted terra cotta */
-  --momo-accent-50:         #fbf4ee;
-  --momo-accent-100:        #f2dfd2;
-  --momo-accent-200:        #dfb89f;
-  --momo-accent-500:        #b86f52;
-  --momo-accent-600:        #9f5f49;
-  --momo-accent-700:        #7a4d3f;
-  --momo-accent-soft:       rgba(184,111,82,0.12);
+  --momo-accent:            #e4573d;          /* tomato coral */
+  --momo-accent-50:         #fff3ed;
+  --momo-accent-100:        #ffd8c7;
+  --momo-accent-200:        #ffb49c;
+  --momo-accent-500:        #e4573d;
+  --momo-accent-600:        #cc4935;
+  --momo-accent-700:        #9f332a;
+  --momo-accent-soft:       rgba(228,87,61,0.12);
   --momo-accent-strong:     var(--momo-accent-700);
 
   /* ===== EwoooC 暖色家族（全站運用） =====
-   * 全部留在暖色域（terracotta / apricot / amber / dusty rose / olive bronze），避免髒棕與冷藍紫
+   * 全部留在暖色域（coral / apricot / marigold / dusty rose / olive），避免髒棕與冷藍紫
    * 用法：活動頁 / 標籤色 / 圖表分類色 / 各區段視覺主軸
    */
-  --momo-warm-cream:        #f7efe3;          /* 奶油米白 — 大面積背景 */
-  --momo-warm-latte:        #d8c1aa;          /* 奶茶木色 — 邊界 / 分隔 */
-  --momo-warm-caramel:      #b98a5f;          /* 低飽和焦糖 — 次重點 */
-  --momo-warm-terracotta:   #b86f52;          /* 磚紅土陶 — CTA / active */
-  --momo-warm-apricot:      #e7b98f;          /* 杏色 — hover / 淡暖層次 */
-  --momo-warm-amber:        #c69a4a;          /* 柔琥珀 — 提醒 / 數字亮點 */
-  --momo-warm-rose:         #b98286;          /* 乾燥玫瑰 — 風險 / 區塊底 */
-  --momo-warm-copper:       #7f5a49;          /* 溫潤木棕 — 深色 active / 邊界 */
-  --momo-warm-olive:        #8f8968;          /* 暖橄欖 — 中性成功 / 輔助 */
-  --momo-warm-greige:       #b8aea2;          /* 暖灰 — 次文字 / disabled */
-  --momo-warm-blush:        #edd6cc;          /* 霧粉 — 柔和分區底 */
+  --momo-warm-cream:        #fff4e6;          /* 奶油米白 — 大面積背景 */
+  --momo-warm-latte:        #e6cfba;          /* 奶茶木色 — 邊界 / 分隔 */
+  --momo-warm-caramel:      #d98a4a;          /* 杏焦橘 — 次重點 */
+  --momo-warm-terracotta:   #e4573d;          /* 番茄珊瑚 — CTA / active */
+  --momo-warm-coral:        #ff7a59;          /* 亮珊瑚 — 小面積亮點 */
+  --momo-warm-apricot:      #ffb36b;          /* 杏橘 — hover / 淡暖層次 */
+  --momo-warm-amber:        #f2b84b;          /* 金盞黃 — 提醒 / 數字亮點 */
+  --momo-warm-rose:         #d96c75;          /* 乾燥玫瑰 — 風險 / 區塊底 */
+  --momo-warm-copper:       #9a6a52;          /* 暖銅 — 只做文字 / 細邊 */
+  --momo-warm-olive:        #91a85a;          /* 暖橄欖 — 中性成功 / 輔助 */
+  --momo-warm-greige:       #b7aa9d;          /* 暖灰 — 次文字 / disabled */
+  --momo-warm-blush:        #ffe0d3;          /* 霧粉 — 柔和分區底 */
 
   /* 舊命名相容 */
   --momo-warm-peach:        var(--momo-warm-apricot);
@@ -56,12 +57,12 @@
   --momo-warm-mahogany:     var(--momo-warm-copper);
   --momo-warm-earth:        var(--momo-warm-olive);
   /* 對應淡色（背景 / 軟標籤用） */
-  --momo-warm-caramel-soft: rgba(185,138,95,0.14);
-  --momo-warm-peach-soft:   rgba(231,185,143,0.22);
-  --momo-warm-honey-soft:   rgba(198,154,74,0.15);
-  --momo-warm-rust-soft:    rgba(185,130,134,0.14);
-  --momo-warm-mahogany-soft:rgba(127,90,73,0.12);
-  --momo-warm-earth-soft:   rgba(143,137,104,0.15);
+  --momo-warm-caramel-soft: rgba(217,138,74,0.15);
+  --momo-warm-peach-soft:   rgba(255,179,107,0.22);
+  --momo-warm-honey-soft:   rgba(242,184,75,0.17);
+  --momo-warm-rust-soft:    rgba(217,108,117,0.16);
+  --momo-warm-mahogany-soft:rgba(154,106,82,0.10);
+  --momo-warm-earth-soft:   rgba(145,168,90,0.16);
 
   --momo-page-accent-2:     var(--momo-warm-apricot);
   --momo-page-accent-3:     var(--momo-warm-amber);
@@ -159,7 +160,7 @@
   --momo-primary-600:       var(--momo-accent-600);
   --momo-primary-700:       var(--momo-accent-700);
   --momo-primary-800:       var(--momo-accent-700);
-  --momo-primary-900:       #5f4035;
+  --momo-primary-900:       #7f241f;
 
   /* 導航（Nothing 黑） */
   --momo-nav-start:         #1a1a1a;
@@ -169,14 +170,14 @@
   --momo-nav-hover:         rgba(255,255,255,0.08);
   --momo-nav-active:        rgba(255,255,255,0.14);
 
-  /* 漸層 → Nothing 風幾乎不用，保留低調黑灰漸層 */
+  /* 漸層相容 token：實際輸出改為純色，避免大面積混色變髒 */
   --momo-gradient-primary:  #1a1a1a;
-  --momo-gradient-nav:      linear-gradient(180deg, #1a1a1a 0%, #000 100%);
+  --momo-gradient-nav:      #1a1a1a;
   --momo-gradient-success:  #2a7a3f;
   --momo-gradient-danger:   var(--momo-warm-rust);
   --momo-gradient-warning:  var(--momo-warm-honey);
   --momo-gradient-info:     #2d5d80;
-  --momo-gradient-subtle:   linear-gradient(180deg, #f7f5ef 0%, #ebe8e1 100%);
+  --momo-gradient-subtle:   #f7f1e8;
 
   /* 狀態色（去飽和化、配合米色底） */
   --momo-success:           #2a7a3f;