diff --git a/templates/dashboard_tesla.html b/templates/dashboard_tesla.html
index 8d375b9..9acb547 100644
--- a/templates/dashboard_tesla.html
+++ b/templates/dashboard_tesla.html
@@ -13,8 +13,8 @@
     --bg: #FFFFFF;
     --surface: #FFFFFF;
     --surface2: #F5F5F5;
-    --red: #E82127;
-    --red-hover: #C81017;
+    --blue: #3454D1;
+    --blue-hover: #2A3F9D;
     --text: #171A20;
     --text-secondary: #5C5E62;
     --text-muted: #A0A2A6;
@@ -45,7 +45,7 @@
   .header-left { display: flex; align-items: center; gap: 14px; }
   .logo-icon {
     width: 38px; height: 38px; border-radius: 8px;
-    background: var(--red); color: #fff;
+    background: var(--blue); color: #fff;
     display: flex; align-items: center; justify-content: center;
     font-size: 18px; font-weight: 600;
   }
@@ -68,7 +68,7 @@
     border: 1px solid var(--border);
   }
   .live-chip .dot {
-    width: 7px; height: 7px; border-radius: 50%; background: var(--red);
+    width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
   }
 
   /* Section title */
@@ -100,10 +100,10 @@
     color: var(--text-secondary); background: var(--surface2);
   }
   .s-card .s-chip.live-chip-tag {
-    background: rgba(232, 33, 39, 0.08); color: var(--red);
+    background: rgba(52, 69, 209, 0.08); color: var(--blue);
   }
   .s-card .s-chip.live-chip-tag .ldot {
-    width: 5px; height: 5px; border-radius: 50%; display: inline-block; background: var(--red); margin-right: 4px;
+    width: 5px; height: 5px; border-radius: 50%; display: inline-block; background: var(--blue); margin-right: 4px;
   }
   .s-card .s-val {
     font-size: 36px; font-weight: 500; color: var(--text);
@@ -143,7 +143,7 @@
     color: var(--text-secondary); transition: all 0.2s;
   }
   .video-toggle:hover { border-color: var(--text); color: var(--text); }
-  .video-toggle.active { border-color: var(--red); color: var(--red); background: rgba(232,33,39,0.04); }
+  .video-toggle.active { border-color: var(--blue); color: var(--blue); background: rgba(52,69,209,0.04); }
   .video-container {
     flex: 1; display: flex; align-items: center; justify-content: center;
     background: #000; border-radius: 6px;
@@ -159,7 +159,7 @@
   .video-error-overlay {
     position: absolute; inset: 0;
     display: flex; align-items: center; justify-content: center;
-    background: rgba(255,255,255,0.9); color: var(--red);
+    background: rgba(255,255,255,0.9); color: var(--blue);
     font-size: 11px; font-weight: 500;
     pointer-events: none; opacity: 0; transition: opacity 0.4s;
   }
@@ -214,7 +214,7 @@
   .quick-stat .qs-icon {
     width: 36px; height: 36px; border-radius: 8px;
     display: flex; align-items: center; justify-content: center;
-    font-size: 14px; color: var(--red); background: rgba(232,33,39,0.06);
+    font-size: 14px; color: var(--blue); background: rgba(52,69,209,0.06);
   }
   .quick-stat .qs-label { font-size: 12px; font-weight: 500; color: var(--text); }
   .quick-stat .qs-sub { font-size: 10px; color: var(--text-muted); }
@@ -236,7 +236,7 @@
     width: 32px; height: 32px; border-radius: 8px;
     display: flex; align-items: center; justify-content: center;
     font-size: 10px; font-weight: 600;
-    background: var(--red); color: #fff;
+    background: var(--blue); color: #fff;
   }
   .recent-item .ri-date { font-size: 11px; font-weight: 500; color: var(--text); }
   .recent-item .ri-time { font-size: 10px; color: var(--text-muted); }
@@ -265,7 +265,7 @@
     border: 1px solid var(--border); border-radius: 6px;
     padding: 8px 14px; outline: none;
   }
-  .table-toolbar input[type="date"]:focus { border-color: var(--red); }
+  .table-toolbar input[type="date"]:focus { border-color: var(--blue); }
 
   .btn {
     font-size: 11px; font-weight: 500;
@@ -273,9 +273,9 @@
     transition: all 0.2s;
   }
   .btn-primary {
-    background: var(--red); color: #fff;
+    background: var(--blue); color: #fff;
   }
-  .btn-primary:hover { background: var(--red-hover); }
+  .btn-primary:hover { background: var(--blue-hover); }
   .btn-ghost {
     background: none; color: var(--text-secondary);
     border: 1px solid var(--border);
@@ -301,7 +301,7 @@
   }
   .table-row tr { transition: background 0.2s; cursor: pointer; }
   .table-row tr:hover { background: var(--surface2); }
-  .table-row tr:hover td { color: var(--red); }
+  .table-row tr:hover td { color: var(--blue); }
 
   .row-date { display: flex; align-items: center; gap: 10px; }
   .row-date .rd-icon {
@@ -311,7 +311,7 @@
     background: var(--surface2); color: var(--text-secondary);
   }
   .row-date .rd-icon.today {
-    background: var(--red); color: #fff;
+    background: var(--blue); color: #fff;
   }
   .badge {
     display: inline-flex; align-items: center; padding: 3px 10px;
@@ -320,7 +320,7 @@
   .badge-batches { background: var(--surface2); color: var(--text-secondary); }
   .badge-green { background: rgba(18,183,106,0.08); color: #12B76A; }
   .badge-gray { background: var(--surface2); color: var(--text-muted); }
-  .link-text { font-size: 11px; font-weight: 500; cursor: pointer; transition: color 0.2s; color: var(--red); }
+  .link-text { font-size: 11px; font-weight: 500; cursor: pointer; transition: color 0.2s; color: var(--blue); }
   .link-text:hover { opacity: 0.7; }
 
   /* Modal */
@@ -355,7 +355,7 @@
     font-size: 16px; display: flex; align-items: center; justify-content: center;
     transition: all 0.2s;
   }
-  .modal-header .close-btn:hover { border-color: var(--red); color: var(--red); }
+  .modal-header .close-btn:hover { border-color: var(--blue); color: var(--blue); }
   .modal-subtitle { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
 
   .modal-stats {
@@ -731,8 +731,8 @@ async function loadChartData(days) {
           {
             label: 'Total Count',
             data: counts,
-            backgroundColor: 'rgba(232, 33, 39, 0.5)',
-            borderColor: '#E82127',
+            backgroundColor: 'rgba(52, 69, 209, 0.5)',
+            borderColor: '#3454D1',
             borderWidth: 1,
             borderRadius: 4,
             yAxisID: 'y'
@@ -872,7 +872,7 @@ function renderDailyTable(dates) {
             <div class="rd-icon${isToday ? ' today' : ''}"><i class="fas fa-calendar"></i></div>
             <div>
               <div style="font-size:11px;font-weight:500;">${d.date}</div>
-              ${isToday ? '<div style="font-size:9px;color:var(--red);">Today</div>' : ''}
+              ${isToday ? '<div style="font-size:9px;color:var(--blue);">Today</div>' : ''}
             </div>
           </div>
         </td>
@@ -906,7 +906,7 @@ async function showDayDetail(date) {
     tbody.innerHTML = data.batches.map(b => `
       <tr style="border-bottom:1px solid var(--border);">
         <td style="padding:12px 0;padding-left:4px;">
-          <span style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;background:var(--red);color:#fff;font-size:10px;font-weight:600;">
+          <span style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;background:var(--blue);color:#fff;font-size:10px;font-weight:600;">
             ${b.batch_number}
           </span>
         </td>