diff --git a/templates/components/_analysis_report_tabs.html b/templates/components/_analysis_report_tabs.html
index f559e89..60aca1a 100644
--- a/templates/components/_analysis_report_tabs.html
+++ b/templates/components/_analysis_report_tabs.html
@@ -37,8 +37,8 @@
         color: var(--momo-text-primary, #2a2520);
     }
     .analysis-report-tab.is-active {
-        border-color: var(--momo-page-accent-dark, #65411f);
-        background: linear-gradient(135deg, var(--momo-page-accent, #8a5a2b), var(--momo-page-accent-dark, #65411f));
+        border-color: var(--momo-page-accent-dark, #a95846);
+        background: linear-gradient(135deg, var(--momo-page-accent, #d96f52), var(--momo-page-accent-dark, #a95846));
         color: var(--momo-page-inverse, #fff8ee);
     }
     .analysis-report-tab.is-external {
diff --git a/templates/components/_navbar.html b/templates/components/_navbar.html
index 4c96bcf..02c3df8 100755
--- a/templates/components/_navbar.html
+++ b/templates/components/_navbar.html
@@ -14,8 +14,8 @@
         --momo-legacy-paper: #f3eee2;
         --momo-legacy-ink: #2a2520;
         --momo-legacy-muted: #645c52;
-        --momo-legacy-accent: #c96442;
-        --momo-legacy-accent-dark: #8f4530;
+        --momo-legacy-accent: #d96f52;
+        --momo-legacy-accent-dark: #a95846;
         --momo-legacy-accent-soft: rgba(201, 100, 66, 0.12);
         --momo-legacy-line: rgba(42, 37, 32, 0.16);
         --momo-legacy-inverse: #fff8ee;
@@ -101,7 +101,7 @@
     .btn-primary:hover,
     .btn-primary:focus {
         color: var(--momo-legacy-inverse) !important;
-        background: linear-gradient(135deg, #b1543a, #7a3520) !important;
+        background: linear-gradient(135deg, #c65f45, #9f4f3e) !important;
         border-color: #7a3520 !important;
     }
 
diff --git a/templates/daily_sales.html b/templates/daily_sales.html
index a26083b..a1bcc12 100644
--- a/templates/daily_sales.html
+++ b/templates/daily_sales.html
@@ -130,16 +130,8 @@
             font-weight: 600;
         }
 
-        .trend-up {
-            color: #2ecc71;
-        }
-
-        .trend-down {
-            color: #e74c3c;
-        }
-
         .bg-purple {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, var(--momo-warm-rust), var(--momo-warm-mahogany));
         }
 
         .chart-container {
@@ -174,7 +166,7 @@
             padding: 2rem;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
             margin-bottom: 2rem;
-            border: 1px solid rgba(102, 126, 234, 0.1);
+            border: 1px solid var(--momo-border-strong);
         }
 
         .calendar-header {
@@ -196,12 +188,12 @@
         }
 
         .calendar-header h5:hover {
-            color: #667eea;
+            color: var(--momo-warm-caramel);
             transform: translateX(-4px);
         }
 
         .calendar-header h5:hover i {
-            color: #667eea;
+            color: var(--momo-warm-caramel);
             transform: rotate(360deg);
             transition: transform 0.5s ease;
         }
@@ -212,7 +204,7 @@
         }
 
         .calendar-nav button {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany));
             border: none;
             border-radius: 10px;
             padding: 0.6rem 1.2rem;
@@ -221,12 +213,12 @@
             transition: all 0.3s ease;
             font-size: 0.9rem;
             font-weight: 600;
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+            box-shadow: 0 4px 12px rgba(217, 111, 82, 0.26);
         }
 
         .calendar-nav button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+            box-shadow: 0 6px 16px rgba(217, 111, 82, 0.32);
         }
 
         .calendar-nav button:active {
@@ -261,19 +253,19 @@
 
         .calendar-day:hover {
             transform: translateY(-3px) scale(1.02);
-            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
-            border-color: #667eea;
-            background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
+            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%);
         }
 
         .calendar-day.has-data {
-            background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
+            background: linear-gradient(135deg, #ffffff 0%, rgba(255, 248, 238, 0.9) 100%);
             border-color: #d0d5e0;
         }
 
         .calendar-day.has-data:hover {
-            border-color: #667eea;
-            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
+            border-color: var(--momo-warm-caramel);
+            box-shadow: 0 8px 24px rgba(217, 111, 82, 0.2);
         }
 
         .calendar-day.other-month {
@@ -282,10 +274,10 @@
         }
 
         .calendar-day.selected {
-            border-color: #667eea !important;
+            border-color: var(--momo-warm-caramel) !important;
             border-width: 5px !important;
-            box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.25), 0 12px 32px rgba(102, 126, 234, 0.4), inset 0 2px 10px rgba(102, 126, 234, 0.15) !important;
-            background: linear-gradient(135deg, #e8edff 0%, #d0d9ff 100%) !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;
             transform: scale(1.08) !important;
             position: relative;
             animation: pulseGlow 2s ease-in-out infinite;
@@ -298,7 +290,7 @@
             right: -8px;
             width: 32px;
             height: 32px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany));
             border-radius: 50%;
             color: white;
             display: flex;
@@ -306,7 +298,7 @@
             justify-content: center;
             font-size: 1.2rem;
             font-weight: 900;
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
+            box-shadow: 0 4px 12px rgba(217, 111, 82, 0.36);
             z-index: 10;
         }
 
@@ -319,11 +311,11 @@
 
             0%,
             100% {
-                box-shadow: 0 0 0 6px rgba(102, 126, 234, 0.25), 0 12px 32px rgba(102, 126, 234, 0.4), inset 0 2px 10px rgba(102, 126, 234, 0.15);
+                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);
             }
 
             50% {
-                box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.35), 0 16px 40px rgba(102, 126, 234, 0.5), inset 0 2px 10px rgba(102, 126, 234, 0.2);
+                box-shadow: 0 0 0 8px rgba(217, 111, 82, 0.28), 0 16px 40px rgba(217, 111, 82, 0.34), inset 0 2px 10px rgba(217, 111, 82, 0.16);
             }
         }
 
@@ -424,17 +416,17 @@
 
         .date-selector:focus {
             outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            border-color: var(--momo-warm-caramel);
+            box-shadow: 0 0 0 3px rgba(217, 111, 82, 0.12);
         }
 
         /* 頁面標題樣式 */
         .page-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany));
             padding: 2rem;
             border-radius: 16px;
             margin-bottom: 2rem;
-            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
+            box-shadow: 0 8px 24px rgba(217, 111, 82, 0.22);
         }
 
         .page-header h4 {
@@ -462,19 +454,19 @@
 
         /* 按鈕樣式優化 */
         .btn-success {
-            background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
+            background: linear-gradient(135deg, var(--momo-warm-earth), var(--momo-warm-honey));
             border: none;
             border-radius: 10px;
             padding: 0.6rem 1.5rem;
             font-weight: 600;
-            box-shadow: 0 4px 12px rgba(81, 207, 102, 0.3);
+            box-shadow: 0 4px 12px rgba(154, 143, 89, 0.24);
             transition: all 0.3s ease;
         }
 
         .btn-success:hover {
             transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(81, 207, 102, 0.4);
-            background: linear-gradient(135deg, #40c057 0%, #2f9e44 100%);
+            box-shadow: 0 6px 16px rgba(154, 143, 89, 0.32);
+            background: linear-gradient(135deg, var(--momo-warm-honey), var(--momo-warm-earth));
         }
 
         /* 表格樣式優化 */
@@ -484,7 +476,7 @@
         }
 
         .table thead {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, var(--momo-warm-mahogany), var(--momo-warm-caramel));
             color: #fff;
         }
 
@@ -1307,10 +1299,33 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js"></script>
     <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
     <script>
         {% if not error %}
+        if (typeof Chart === 'undefined') {
+            console.error('Chart.js 未載入，無法繪製當日業績圖表');
+        }
+
+        Chart.defaults.color = '#6f665a';
+        Chart.defaults.borderColor = 'rgba(126, 111, 92, 0.18)';
+        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)',
+            muted: 'rgba(126, 111, 92, 0.52)'
+        };
+
         const chartData = {{ chart_data | tojson }};
 
         // 調試：檢查數據
@@ -1345,8 +1360,8 @@
                         {
                             label: '業績',
                             data: safeData.revenue,
-                            borderColor: 'rgba(54, 162, 235, 1)',
-                            backgroundColor: 'rgba(54, 162, 235, 0.1)',
+                            borderColor: chartPalette.caramel,
+                            backgroundColor: chartPalette.caramelSoft,
                             borderWidth: 2,
                             yAxisID: 'y',
                             tension: 0.3,
@@ -1355,8 +1370,8 @@
                         {
                             label: '毛利',
                             data: safeData.profit,
-                            borderColor: 'rgba(46, 204, 113, 1)',
-                            backgroundColor: 'rgba(46, 204, 113, 0.1)',
+                            borderColor: chartPalette.honey,
+                            backgroundColor: chartPalette.honeySoft,
                             borderWidth: 2,
                             yAxisID: 'y',
                             tension: 0.3,
@@ -1365,8 +1380,8 @@
                         {
                             label: '客單價',
                             data: safeData.avg_price,
-                            borderColor: 'rgba(153, 102, 255, 1)',
-                            backgroundColor: 'rgba(153, 102, 255, 0.1)',
+                            borderColor: chartPalette.mahogany,
+                            backgroundColor: chartPalette.mahoganySoft,
                             borderWidth: 2,
                             yAxisID: 'y1',
                             tension: 0.3,
@@ -1375,8 +1390,8 @@
                         {
                             label: '銷量',
                             data: safeData.qty,
-                            borderColor: 'rgba(255, 159, 64, 1)',
-                            backgroundColor: 'rgba(255, 159, 64, 0.1)',
+                            borderColor: chartPalette.earth,
+                            backgroundColor: chartPalette.earthSoft,
                             borderWidth: 2,
                             yAxisID: 'y2',
                             tension: 0.3,
@@ -1403,7 +1418,7 @@
                             display: true,
                             position: 'left',
                             beginAtZero: true,
-                            title: { display: true, text: '業績/毛利 ($)', color: '#54a0ff' }
+                            title: { display: true, text: '業績/毛利 ($)', color: chartPalette.caramel }
                         },
                         y1: {
                             type: 'linear',
@@ -1411,7 +1426,7 @@
                             position: 'right',
                             beginAtZero: true,
                             grid: { drawOnChartArea: false },
-                            title: { display: true, text: '客單價 ($)', color: '#9966ff' }
+                            title: { display: true, text: '客單價 ($)', color: chartPalette.mahogany }
                         },
                         y2: {
                             type: 'linear',
@@ -1433,8 +1448,8 @@
                         {
                             label: '業績 DoD%',
                             data: safeData.dod_revenue,
-                            borderColor: 'rgba(54, 162, 235, 1)',
-                            backgroundColor: 'rgba(54, 162, 235, 0.1)',
+                            borderColor: chartPalette.caramel,
+                            backgroundColor: chartPalette.caramelSoft,
                             borderWidth: 2,
                             tension: 0.3,
                             fill: false
@@ -1442,8 +1457,8 @@
                         {
                             label: '毛利 DoD%',
                             data: safeData.dod_profit,
-                            borderColor: 'rgba(46, 204, 113, 1)',
-                            backgroundColor: 'rgba(46, 204, 113, 0.1)',
+                            borderColor: chartPalette.honey,
+                            backgroundColor: chartPalette.honeySoft,
                             borderWidth: 2,
                             tension: 0.3,
                             fill: false
@@ -1451,8 +1466,8 @@
                         {
                             label: '客單 DoD%',
                             data: safeData.dod_avg_price,
-                            borderColor: 'rgba(153, 102, 255, 1)',
-                            backgroundColor: 'rgba(153, 102, 255, 0.1)',
+                            borderColor: chartPalette.mahogany,
+                            backgroundColor: chartPalette.mahoganySoft,
                             borderWidth: 2,
                             tension: 0.3,
                             fill: false
@@ -1460,8 +1475,8 @@
                         {
                             label: '銷量 DoD%',
                             data: safeData.dod_qty,
-                            borderColor: 'rgba(255, 159, 64, 1)',
-                            backgroundColor: 'rgba(255, 159, 64, 0.1)',
+                            borderColor: chartPalette.earth,
+                            backgroundColor: chartPalette.earthSoft,
                             borderWidth: 2,
                             tension: 0.3,
                             fill: false
@@ -1506,57 +1521,57 @@
                         {
                             label: '業績 WoW%',
                             data: safeData.wow_revenue,
-                            borderColor: 'rgba(54, 162, 235, 1)',
-                            backgroundColor: 'rgba(54, 162, 235, 0.1)',
+                            borderColor: chartPalette.caramel,
+                            backgroundColor: chartPalette.caramelSoft,
                             borderWidth: 2,
                             tension: 0.3,
                             fill: false,
                             segment: {
                                 borderColor: ctx => {
                                     // 前 7 天顯示為淺灰色
-                                    return ctx.p0DataIndex < 7 ? 'rgba(200, 200, 200, 0.5)' : 'rgba(54, 162, 235, 1)';
+                                    return ctx.p0DataIndex < 7 ? chartPalette.muted : chartPalette.caramel;
                                 }
                             }
                         },
                         {
                             label: '毛利 WoW%',
                             data: safeData.wow_profit,
-                            borderColor: 'rgba(46, 204, 113, 1)',
-                            backgroundColor: 'rgba(46, 204, 113, 0.1)',
+                            borderColor: chartPalette.honey,
+                            backgroundColor: chartPalette.honeySoft,
                             borderWidth: 2,
                             tension: 0.3,
                             fill: false,
                             segment: {
                                 borderColor: ctx => {
-                                    return ctx.p0DataIndex < 7 ? 'rgba(200, 200, 200, 0.5)' : 'rgba(46, 204, 113, 1)';
+                                    return ctx.p0DataIndex < 7 ? chartPalette.muted : chartPalette.honey;
                                 }
                             }
                         },
                         {
                             label: '客單 WoW%',
                             data: safeData.wow_avg_price,
-                            borderColor: 'rgba(153, 102, 255, 1)',
-                            backgroundColor: 'rgba(153, 102, 255, 0.1)',
+                            borderColor: chartPalette.mahogany,
+                            backgroundColor: chartPalette.mahoganySoft,
                             borderWidth: 2,
                             tension: 0.3,
                             fill: false,
                             segment: {
                                 borderColor: ctx => {
-                                    return ctx.p0DataIndex < 7 ? 'rgba(200, 200, 200, 0.5)' : 'rgba(153, 102, 255, 1)';
+                                    return ctx.p0DataIndex < 7 ? chartPalette.muted : chartPalette.mahogany;
                                 }
                             }
                         },
                         {
                             label: '銷量 WoW%',
                             data: safeData.wow_qty,
-                            borderColor: 'rgba(255, 159, 64, 1)',
-                            backgroundColor: 'rgba(255, 159, 64, 0.1)',
+                            borderColor: chartPalette.earth,
+                            backgroundColor: chartPalette.earthSoft,
                             borderWidth: 2,
                             tension: 0.3,
                             fill: false,
                             segment: {
                                 borderColor: ctx => {
-                                    return ctx.p0DataIndex < 7 ? 'rgba(200, 200, 200, 0.5)' : 'rgba(255, 159, 64, 1)';
+                                    return ctx.p0DataIndex < 7 ? chartPalette.muted : chartPalette.earth;
                                 }
                             }
                         }
@@ -1610,8 +1625,8 @@
                         datasets: [{
                             label: '銷售金額',
                             data: safeData.top10_values,
-                            backgroundColor: 'rgba(255, 159, 64, 0.6)',
-                            borderColor: 'rgba(255, 159, 64, 1)',
+                            backgroundColor: 'rgba(201, 100, 66, 0.62)',
+                            borderColor: chartPalette.caramel,
                             borderWidth: 1
                         }]
                     },
diff --git a/templates/ewoooc_base.html b/templates/ewoooc_base.html
index 6930707..681b491 100644
--- a/templates/ewoooc_base.html
+++ b/templates/ewoooc_base.html
@@ -38,9 +38,9 @@
         .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-earth);
-            --momo-page-accent-dark: #65411f;
-            --momo-page-accent-soft: var(--momo-warm-earth-soft);
+            --momo-page-accent: var(--momo-warm-caramel);
+            --momo-page-accent-dark: var(--momo-warm-mahogany);
+            --momo-page-accent-soft: var(--momo-warm-peach-soft);
         }
         .momo-app[data-active-page="vendor_stockout"] {
             --momo-page-accent: var(--momo-warm-rust);
@@ -57,7 +57,7 @@
         .momo-app[data-active-page="auto_import"],
         .momo-app[data-active-page="market_intel"] {
             --momo-page-accent: var(--momo-warm-mahogany);
-            --momo-page-accent-dark: #5e2e20;
+            --momo-page-accent-dark: #7f3f32;
             --momo-page-accent-soft: var(--momo-warm-mahogany-soft);
         }
         .momo-app[data-active-page^="obs_"],
diff --git a/templates/growth_analysis.html b/templates/growth_analysis.html
index ec58fc0..fad9f2c 100644
--- a/templates/growth_analysis.html
+++ b/templates/growth_analysis.html
@@ -1,33 +1,62 @@
-<!-- cspell:ignore MOMO -->
-<!DOCTYPE html>
-<html lang="zh-TW">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>營運成長報表 - MOMO 監控系統</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
+{% extends 'ewoooc_base.html' %}
+{% block title %}營運成長報表 - EwoooC{% endblock %}
+
+{% block extra_css %}
     <style>
-        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f4f6f9; }
-        .navbar { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
-        .card { border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); margin-bottom: 1.5rem; transition: all 0.3s ease; background: #fff; }
-        .card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
-        .card-header { background-color: transparent; border-bottom: 1px solid rgba(0,0,0,0.05); font-weight: 700; color: #2c3e50; padding: 1.25rem; }
+        .growth-analysis-page {
+            display: flex;
+            flex-direction: column;
+            gap: 18px;
+        }
+
+        .growth-analysis-page .card {
+            border: 1px solid var(--momo-border-strong);
+            border-radius: 8px;
+            box-shadow: var(--momo-shadow-soft);
+            margin-bottom: 1.5rem;
+            background: rgba(255, 253, 248, 0.94);
+        }
+
+        .growth-analysis-page .card-header {
+            background: rgba(250, 247, 240, 0.9);
+            border-bottom: 1px solid var(--momo-border-subtle);
+            font-weight: 800;
+            color: var(--momo-text-strong);
+            padding: 1rem 1.25rem;
+        }
         
         .kpi-card { position: relative; overflow: hidden; border: none; }
         .kpi-card .icon-bg { position: absolute; right: -15px; bottom: -15px; font-size: 6rem; opacity: 0.15; transform: rotate(-15deg); pointer-events: none; }
         .kpi-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 0.2rem; }
         .kpi-label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; }
         
-        .trend-up { color: #2ecc71; }
-        .trend-down { color: #e74c3c; }
-    </style>
-</head>
-<body class="bg-body-tertiary">
-    {% include 'components/_navbar.html' %}
+        .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;
+        }
 
-    <div class="container-fluid px-4">
+        .growth-analysis-page .bg-success {
+            background: linear-gradient(135deg, var(--momo-warm-earth), var(--momo-warm-honey)) !important;
+        }
+
+        .growth-analysis-page .bg-info {
+            background: linear-gradient(135deg, var(--momo-warm-rust), var(--momo-warm-caramel)) !important;
+        }
+
+        .growth-analysis-page .text-success,
+        .growth-analysis-page .trend-up {
+            color: var(--momo-warm-honey) !important;
+        }
+
+        .growth-analysis-page .trend-down {
+            color: var(--momo-warm-rust) !important;
+        }
+    </style>
+{% endblock %}
+
+{% block ewooo_content %}
+    <div class="growth-analysis-page">
         {% include 'components/_analysis_report_tabs.html' %}
         <div class="d-flex justify-content-between align-items-center mb-4 mt-4">
             <h4 class="mb-0 fw-bold text-dark"><i class="fas fa-rocket me-2 text-success"></i>營運成長策略報表</h4>
@@ -135,9 +164,11 @@
             </div>
         </div>
     </div>
+{% endblock %}
+
+{% block extra_js %}
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    
     <!-- Data Injection -->
     <script id="chart-data" type="application/json">
         {{ chart_data | tojson }}
@@ -145,6 +176,20 @@
 
     <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)'
+        };
+
+        Chart.defaults.color = '#6f665a';
+        Chart.defaults.borderColor = 'rgba(126, 111, 92, 0.18)';
+        Chart.defaults.font.family = "'Noto Sans TC', 'Inter', system-ui, sans-serif";
 
         // 1. Revenue & YoY Chart (Mixed)
         new Chart(document.getElementById('revenueChart'), {
@@ -155,14 +200,14 @@
                     {
                         label: '月營收 ($)',
                         data: data.revenue,
-                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
+                        backgroundColor: chartPalette.caramelSoft,
                         order: 2
                     },
                     {
                         label: 'YoY 年增率 (%)',
                         data: data.yoy,
                         type: 'line',
-                        borderColor: '#ff6384',
+                        borderColor: chartPalette.rust,
                         borderWidth: 2,
                         yAxisID: 'y1',
                         order: 1,
@@ -194,7 +239,7 @@
                     data: data.mom,
                     backgroundColor: (ctx) => {
                         const val = ctx.raw;
-                        return val >= 0 ? 'rgba(75, 192, 192, 0.6)' : 'rgba(255, 99, 132, 0.6)';
+                        return val >= 0 ? chartPalette.honeySoft : chartPalette.rustSoft;
                     }
                 }]
             },
@@ -213,8 +258,8 @@
                 datasets: [{
                     label: '平均客單價 ($)',
                     data: data.aov,
-                    borderColor: '#36a2eb',
-                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
+                    borderColor: chartPalette.caramel,
+                    backgroundColor: 'rgba(201, 100, 66, 0.12)',
                     fill: true,
                     tension: 0.4
                 }]
@@ -234,8 +279,8 @@
                 datasets: [{
                     label: '毛利率 (%)',
                     data: data.margin_rate,
-                    borderColor: '#2ecc71',
-                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
+                    borderColor: chartPalette.honey,
+                    backgroundColor: 'rgba(184, 132, 22, 0.12)',
                     fill: true,
                     tension: 0.4
                 }]
@@ -247,5 +292,4 @@
             }
         });
     </script>
-</body>
-</html>
+{% endblock %}
diff --git a/templates/sales_analysis.html b/templates/sales_analysis.html
index e7c3059..8aa0fdf 100644
--- a/templates/sales_analysis.html
+++ b/templates/sales_analysis.html
@@ -1,78 +1,15 @@
-<!-- cspell:ignore MOMO datatables Treemap -->
-<!DOCTYPE html>
-<html lang="zh-TW">
+{% extends 'ewoooc_base.html' %}
+{% block title %}業績分析 - EwoooC{% endblock %}
 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>業績分析 - EwoooC</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+{% block extra_css %}
     <!-- DataTables CSS -->
     <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
     <!-- V-New: Flatpickr 日期選擇器 CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
-    <!-- V-Fix: 使用 Chart.js v3.9.1 以確保與 Treemap v2.0.2 相容 -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@2.0.2/dist/chartjs-chart-treemap.min.js"></script>
     <style>
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            background-color: #f4f6f9;
-            padding-top: 70px;
-        }
-
-        .navbar-dark.bg-primary {
-            background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
-            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
-        }
-
-        .navbar-dark .navbar-brand {
-            color: #ffffff !important;
-            font-weight: 600;
-        }
-
-        .navbar-dark .navbar-nav .nav-link {
-            color: rgba(255, 255, 255, 0.9) !important;
-            font-weight: 500;
-            transition: all 0.3s;
-        }
-
-        .navbar-dark .navbar-nav .nav-link:hover {
-            color: #ffffff !important;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 6px;
-        }
-
-        .navbar-dark .navbar-nav .nav-link.active {
-            color: #ffffff !important;
-            background: rgba(255, 255, 255, 0.15);
-            border-radius: 6px;
-            font-weight: 600;
-        }
-
-        .navbar-dark .navbar-text {
-            color: rgba(255, 255, 255, 0.8) !important;
-        }
-
-        .navbar {
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
-        }
-
-        /* V-Fix: 防止導航列 dropdown 展開時背景變黑 */
-        .navbar-dark .nav-link.active,
-        .navbar-dark .nav-link.show,
-        .navbar-dark .nav-link:focus {
-            background-color: transparent !important;
-        }
-
-        .navbar-dark .dropdown-toggle.active::after,
-        .navbar-dark .dropdown-toggle.show::after {
-            color: #fff !important;
+            background-color: var(--momo-bg-canvas);
         }
 
         /* V-Opt: 現代化卡片風格 */
@@ -217,12 +154,12 @@
             font-size: 2.5rem;
             font-weight: 800;
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
+            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-rust));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             letter-spacing: 4px;
-            filter: drop-shadow(0 4px 15px rgba(79, 70, 229, 0.4));
+            filter: drop-shadow(0 4px 15px rgba(217, 111, 82, 0.32));
         }
 
 
@@ -273,8 +210,8 @@
             width: 150px;
             height: 150px;
             border: 4px solid transparent;
-            border-top-color: #4F46E5;
-            border-right-color: #7C3AED;
+            border-top-color: var(--momo-warm-caramel);
+            border-right-color: var(--momo-warm-rust);
             border-radius: 50%;
             animation: ring-spin 2s linear infinite;
         }
@@ -345,9 +282,9 @@
             position: absolute;
             width: 8px;
             height: 8px;
-            background: linear-gradient(135deg, #4F46E5, #7C3AED);
+            background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-rust));
             border-radius: 50%;
-            box-shadow: 0 0 10px rgba(79, 70, 229, 0.8);
+            box-shadow: 0 0 10px rgba(217, 111, 82, 0.68);
         }
 
         #loadingOverlay .orbit-particle:nth-child(1) {
@@ -452,7 +389,7 @@
 
         #loadingOverlay .loading-text {
             font-size: 1.2rem;
-            color: #4F46E5;
+            color: var(--momo-warm-mahogany);
             font-weight: 600;
             text-align: center;
             letter-spacing: 0.5px;
@@ -468,14 +405,14 @@
         #loadingOverlay .loading-progress {
             width: 200px;
             height: 4px;
-            background: rgba(79, 70, 229, 0.2);
+            background: rgba(217, 111, 82, 0.18);
             border-radius: 2px;
             overflow: hidden;
         }
 
         #loadingOverlay .loading-progress-bar {
             height: 100%;
-            background: linear-gradient(90deg, #4F46E5, #7C3AED, #4F46E5);
+            background: linear-gradient(90deg, var(--momo-warm-caramel), var(--momo-warm-rust), var(--momo-warm-honey));
             background-size: 200% 100%;
             animation: progress-flow 1.5s linear infinite;
             width: 100%;
@@ -562,11 +499,36 @@
         .navbar.bg-custom-dark .navbar-text {
             color: rgba(255, 255, 255, 0.75);
         }
-    </style>
-</head>
+        .sales-analysis-page .card,
+        .sales-analysis-page .panel,
+        .sales-analysis-page .filter-section {
+            border-radius: 8px;
+        }
 
-<body class="bg-body-tertiary">
-    {% include 'components/_navbar.html' %}
+        .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;
+        }
+
+        .sales-analysis-page .btn-success,
+        .sales-analysis-page .bg-success {
+            background: linear-gradient(135deg, var(--momo-warm-earth), var(--momo-warm-honey)) !important;
+            border-color: var(--momo-warm-earth) !important;
+        }
+
+        .sales-analysis-page .text-primary,
+        .sales-analysis-page .text-success {
+            color: var(--momo-warm-caramel) !important;
+        }
+
+        .sales-analysis-page .badge.bg-secondary {
+            background-color: rgba(111, 102, 90, 0.86) !important;
+        }
+    </style>
+{% endblock %}
+
+{% block ewooo_content %}
 
     <!-- Loading Overlay -->
     <div id="loadingOverlay">
@@ -607,7 +569,7 @@
         </div>
     </div>
 
-    <div class="container-fluid px-4">
+    <div class="sales-analysis-page">
         {% include 'components/_analysis_report_tabs.html' %}
         <div class="d-flex justify-content-between align-items-center mb-4 mt-4">
             <div class="d-flex align-items-center gap-3">
@@ -651,29 +613,26 @@
         <!-- 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, #667eea 0%, #764ba2 100%); border: none;">
+                style="background: linear-gradient(135deg, var(--momo-warm-caramel), var(--momo-warm-mahogany)); 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: 分析維度切換（更顯眼的設計） -->
                     <div class="btn-group shadow-sm" role="group">
                         <input type="radio" class="btn-check" name="metric" id="metricAmount" value="amount"
-                            autocomplete="off" onchange="setFilter('metric', 'amount')" {% if selected_metric=='amount'
-                            %}checked{% endif %}>
+                            autocomplete="off" onchange="setFilter('metric', 'amount')" {% if selected_metric=='amount' %}checked{% endif %}>
                         <label class="btn btn-sm btn-light fw-bold" for="metricAmount">
                             <i class="fas fa-dollar-sign me-1"></i>依金額分析
                         </label>
 
                         <input type="radio" class="btn-check" name="metric" id="metricQty" value="qty"
-                            autocomplete="off" onchange="setFilter('metric', 'qty')" {% if selected_metric=='qty'
-                            %}checked{% endif %}>
+                            autocomplete="off" onchange="setFilter('metric', 'qty')" {% if selected_metric=='qty' %}checked{% endif %}>
                         <label class="btn btn-sm btn-light fw-bold" for="metricQty">
                             <i class="fas fa-box me-1"></i>依銷售量分析
                         </label>
 
                         {% if cols.cost or cols.profit %}
                         <input type="radio" class="btn-check" name="metric" id="metricProfit" value="profit"
-                            autocomplete="off" onchange="setFilter('metric', 'profit')" {% if selected_metric=='profit'
-                            %}checked{% endif %}>
+                            autocomplete="off" onchange="setFilter('metric', 'profit')" {% if selected_metric=='profit' %}checked{% endif %}>
                         <label class="btn btn-sm btn-light fw-bold" for="metricProfit">
                             <i class="fas fa-chart-line me-1"></i>依毛利分析
                         </label>
@@ -701,16 +660,11 @@
                                         onchange="handleDataRangeChange(this)">
                                         <option value="" {% if not request.args.get('data_range') %}selected{% endif %}>
                                             -- 請選擇 --</option>
-                                        <option value="1" {% if request.args.get('data_range')=='1' %}selected{% endif
-                                            %}>最近 1 個月 (推薦)</option>
-                                        <option value="3" {% if request.args.get('data_range')=='3' %}selected{% endif
-                                            %}>最近 3 個月</option>
-                                        <option value="6" {% if request.args.get('data_range')=='6' %}selected{% endif
-                                            %}>最近 6 個月</option>
-                                        <option value="12" {% if request.args.get('data_range')=='12' %}selected{% endif
-                                            %}>最近 12 個月</option>
-                                        <option value="0" {% if request.args.get('data_range')=='0' %}selected{% endif
-                                            %}>全部資料</option>
+                                        <option value="1" {% if request.args.get('data_range')=='1' %}selected{% endif %}>最近 1 個月 (推薦)</option>
+                                        <option value="3" {% if request.args.get('data_range')=='3' %}selected{% endif %}>最近 3 個月</option>
+                                        <option value="6" {% if request.args.get('data_range')=='6' %}selected{% endif %}>最近 6 個月</option>
+                                        <option value="12" {% if request.args.get('data_range')=='12' %}selected{% endif %}>最近 12 個月</option>
+                                        <option value="0" {% if request.args.get('data_range')=='0' %}selected{% endif %}>全部資料</option>
                                     </select>
                                 </div>
 
@@ -1750,14 +1704,18 @@
         </div>
         {% endif %}
     </div>
+    {% endif %}
+{% endblock %}
+
+{% block extra_js %}
+    <!-- Chart.js v3 + Treemap v2 are paired intentionally. -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@2.0.2/dist/chartjs-chart-treemap.min.js"></script>
 
     <!-- DataTables JS -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
-
-    {% endif %}
-
     {% if not error %}
     <!-- V-New: JSON Data Block for Data Injection -->
     <script id="sales-data" type="application/json">
@@ -1960,6 +1918,20 @@
         const treemapDataPoints = salesData.treemapData;
         const cols = salesData.cols;
         const selectedMetric = salesData.selectedMetric;
+        const momoChartColors = {
+            coral: 'rgba(217, 111, 82, 0.64)',
+            coralLine: 'rgba(217, 111, 82, 1)',
+            peach: 'rgba(242, 159, 126, 0.62)',
+            amber: 'rgba(214, 161, 47, 0.64)',
+            amberLine: 'rgba(214, 161, 47, 1)',
+            rose: 'rgba(200, 95, 106, 0.62)',
+            roseLine: 'rgba(200, 95, 106, 1)',
+            clay: 'rgba(169, 88, 70, 0.62)',
+            clayLine: 'rgba(169, 88, 70, 1)',
+            olive: 'rgba(154, 143, 89, 0.62)',
+            oliveLine: 'rgba(154, 143, 89, 1)',
+            neutral: 'rgba(111, 102, 90, 0.42)'
+        };
 
         // 1. 橫向長條圖 (Horizontal Bar Chart) - 更易讀
         const ctxBar = document.getElementById('barChart').getContext('2d');
@@ -1970,8 +1942,8 @@
                 datasets: [{
                     label: barData.metricLabel,
                     data: barData.values,
-                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
-                    borderColor: 'rgba(54, 162, 235, 1)',
+                    backgroundColor: momoChartColors.coral,
+                    borderColor: momoChartColors.coralLine,
                     borderWidth: 1
                 }]
             },
@@ -2003,7 +1975,14 @@
                 labels: catData.labels,
                 datasets: [{
                     data: catData.values,
-                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#C9CBCF']
+                    backgroundColor: [
+                        momoChartColors.coral,
+                        momoChartColors.peach,
+                        momoChartColors.amber,
+                        momoChartColors.rose,
+                        momoChartColors.olive,
+                        momoChartColors.neutral
+                    ]
                 }]
             },
             options: {
@@ -2044,8 +2023,8 @@
                 datasets: [{
                     label: '區間總業績 ($)',
                     data: priceDistData.values,
-                    backgroundColor: 'rgba(75, 192, 192, 0.6)',
-                    borderColor: 'rgba(75, 192, 192, 1)',
+                    backgroundColor: momoChartColors.amber,
+                    borderColor: momoChartColors.amberLine,
                     borderWidth: 1
                 }]
             },
@@ -2127,8 +2106,8 @@
                             datasets: [{
                                 label: metricLabel,
                                 data: mkt.discount.map(i => i[metricKey] || 0),
-                                backgroundColor: 'rgba(54, 162, 235, 0.7)',
-                                borderColor: 'rgba(54, 162, 235, 1)',
+                                backgroundColor: momoChartColors.peach,
+                                borderColor: momoChartColors.coralLine,
                                 borderWidth: 1
                             }]
                         },
@@ -2162,8 +2141,8 @@
                             datasets: [{
                                 label: metricLabel,
                                 data: mkt.coupon.map(i => i[metricKey] || 0),
-                                backgroundColor: 'rgba(75, 192, 192, 0.7)',
-                                borderColor: 'rgba(75, 192, 192, 1)',
+                                backgroundColor: momoChartColors.amber,
+                                borderColor: momoChartColors.amberLine,
                                 borderWidth: 1
                             }]
                         },
@@ -2385,8 +2364,8 @@
                     datasets: [{
                         label: '月總業績 ($)',
                         data: monthlyData.values,
-                        backgroundColor: 'rgba(54, 162, 235, 0.6)',
-                        borderColor: 'rgba(54, 162, 235, 1)',
+                        backgroundColor: momoChartColors.coral,
+                        borderColor: momoChartColors.coralLine,
                         borderWidth: 1
                     }]
                 },
@@ -2414,8 +2393,8 @@
                     datasets: [{
                         label: '週總業績 ($)',
                         data: weeklyData.values,
-                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                        borderColor: 'rgba(75, 192, 192, 1)',
+                        backgroundColor: 'rgba(214, 161, 47, 0.16)',
+                        borderColor: momoChartColors.amberLine,
                         borderWidth: 2,
                         fill: true,
                         tension: 0.3
@@ -2453,8 +2432,8 @@
                     datasets: [{
                         label: '時段總業績 ($)',
                         data: hourlyData.values,
-                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
-                        borderColor: 'rgba(153, 102, 255, 1)',
+                        backgroundColor: 'rgba(200, 95, 106, 0.14)',
+                        borderColor: momoChartColors.roseLine,
                         borderWidth: 2,
                         fill: true,
                         tension: 0.3 // 平滑曲線
@@ -3160,8 +3139,4 @@
             window.endDatePicker = endPicker;
         });
     </script>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-</body>
-
-</html>
+{% endblock %}
diff --git a/web/static/css/ewoooc-tokens.css b/web/static/css/ewoooc-tokens.css
index bd1e021..5dd14ce 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 的點陣骨架（黑白、像素、工業）
- * — Claude 的暖米基底（#f0eee9、焦糖橘 #c96442）
+ * — Claude 的暖米基底（#f0eee9、EwoooC 珊瑚橘 #d96f52）
  */
 
 :root {
@@ -22,32 +22,34 @@
   --momo-line-soft:          rgba(42,37,32,0.18);
   --momo-line-faint:         rgba(42,37,32,0.10);
 
-  /* Claude 焦糖橘（accent） */
-  --momo-accent:            #c96442;          /* 主 accent */
-  --momo-accent-50:         #fbf2ef;
-  --momo-accent-100:        #f5e1d9;
-  --momo-accent-200:        #ecc3b3;
-  --momo-accent-500:        #c96442;
-  --momo-accent-600:        #b1543a;
-  --momo-accent-700:        #8f4530;
-  --momo-accent-soft:       rgba(201,100,66,0.12);
+  /* EwoooC 珊瑚橘（accent） */
+  --momo-accent:            #d96f52;          /* 主 accent */
+  --momo-accent-50:         #fff4ef;
+  --momo-accent-100:        #fde4d8;
+  --momo-accent-200:        #f8c6b3;
+  --momo-accent-500:        #d96f52;
+  --momo-accent-600:        #c65f45;
+  --momo-accent-700:        #9f4f3e;
+  --momo-accent-soft:       rgba(217,111,82,0.13);
   --momo-accent-strong:     var(--momo-accent-700);
 
   /* ===== EwoooC 暖色家族（全站運用） =====
-   * 全部留在暖色域（紅/橘/金/土），不混入冷色
+   * 全部留在暖色域（珊瑚/蜜桃/琥珀/玫瑰銅/暖橄欖），避免髒棕與冷藍紫
    * 用法：活動頁 / 標籤色 / 圖表分類色 / 各區段視覺主軸
    */
-  --momo-warm-caramel:      #c96442;          /* 焦糖橘 — 主 accent / 限時搶購 */
-  --momo-warm-honey:        #b88416;          /* 蜂蜜金 — 1.1 狂歡 / 警示 */
-  --momo-warm-rust:         #b5342f;          /* 暖紅 — 母親節 / danger */
-  --momo-warm-mahogany:     #8f4530;          /* 深焦糖 — 520 情人節 / 強調 */
-  --momo-warm-earth:        #8a5a2b;          /* 焦土 — 勞動節 / 中性暖 */
+  --momo-warm-caramel:      #d96f52;          /* 珊瑚橘 — 主 accent / 主要動作 */
+  --momo-warm-peach:        #f29f7e;          /* 蜜桃 — hover / 淡底層 */
+  --momo-warm-honey:        #d6a12f;          /* 琥珀金 — 提醒 / 次重點 */
+  --momo-warm-rust:         #c85f6a;          /* 玫瑰銅 — 下降 / 風險 */
+  --momo-warm-mahogany:     #a95846;          /* 暖陶紅 — 強調 / active */
+  --momo-warm-earth:        #9a8f59;          /* 暖橄欖 — 中性成功 / 輔助 */
   /* 對應淡色（背景 / 軟標籤用） */
-  --momo-warm-caramel-soft: rgba(201,100,66,0.12);
-  --momo-warm-honey-soft:   rgba(184,132,22,0.12);
-  --momo-warm-rust-soft:    rgba(181,52,47,0.12);
-  --momo-warm-mahogany-soft:rgba(143,69,48,0.12);
-  --momo-warm-earth-soft:   rgba(138,90,43,0.12);
+  --momo-warm-caramel-soft: rgba(217,111,82,0.13);
+  --momo-warm-peach-soft:   rgba(242,159,126,0.18);
+  --momo-warm-honey-soft:   rgba(214,161,47,0.15);
+  --momo-warm-rust-soft:    rgba(200,95,106,0.14);
+  --momo-warm-mahogany-soft:rgba(169,88,70,0.13);
+  --momo-warm-earth-soft:   rgba(154,143,89,0.15);
 
   /* 頁面調性：共用 shell 與反白 UI 以此套用各頁暖色 accent */
   --momo-page-accent:       var(--momo-warm-caramel);
@@ -140,7 +142,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:       #5e2e20;
+  --momo-primary-900:       #7f3f32;
 
   /* 導航（Nothing 黑） */
   --momo-nav-start:         #1a1a1a;
@@ -154,8 +156,8 @@
   --momo-gradient-primary:  #1a1a1a;
   --momo-gradient-nav:      linear-gradient(180deg, #1a1a1a 0%, #000 100%);
   --momo-gradient-success:  #2a7a3f;
-  --momo-gradient-danger:   #b5342f;
-  --momo-gradient-warning:  #b88416;
+  --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%);
 
@@ -164,11 +166,11 @@
   --momo-success-bg:        #e3ebd9;
   --momo-success-border:    #c5d4b0;
   --momo-success-text:      #1f5a2d;
-  --momo-danger:            #b5342f;
+  --momo-danger:            var(--momo-warm-rust);
   --momo-danger-bg:         #f0d8d4;
   --momo-danger-border:     #d9b1ac;
   --momo-danger-text:       #7d2520;
-  --momo-warning:           #b88416;
+  --momo-warning:           var(--momo-warm-honey);
   --momo-warning-bg:        #f3e7c4;
   --momo-warning-border:    #d9c590;
   --momo-warning-text:      #6e500e;
@@ -183,8 +185,8 @@
   --momo-text-tertiary:     #9b9081;
   --momo-text-disabled:     #c4baa8;
   --momo-text-inverse:      #faf7f0;
-  --momo-text-link:         #c96442;
-  --momo-text-link-hover:   #8f4530;
+  --momo-text-link:         var(--momo-warm-caramel);
+  --momo-text-link-hover:   var(--momo-warm-mahogany);
   --momo-text-strong:       var(--momo-text-primary);
   --momo-text-muted:        var(--momo-text-secondary);
   --momo-muted:             var(--momo-text-secondary);
@@ -196,7 +198,7 @@
   --momo-border-strong:     rgba(42,37,32,0.42);
   --momo-border-subtle:     var(--momo-border-light);
   --momo-border-dark:       #2a2520;
-  --momo-border-focus:      #c96442;
+  --momo-border-focus:      var(--momo-warm-caramel);
   --momo-divider:           rgba(42,37,32,0.12);
 
   /* Overlay */