UI: teal theme + DEV badge + container rename canifa-backend-dev-experimental

backend/docker-compose.dev.yml

@@ -2,7 +2,7 @@ services:
   # --- Backend Service ---
   backend:
     build: .
-    container_name: canifa_backend
+    container_name: canifa-backend-dev-experimental
     env_file: .env
     ports:
       - "5005:5000"

backend/docker-compose.prod.yml

@@ -4,7 +4,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile.prod
-    container_name: canifa_backend
+    container_name: canifa-backend-dev-experimental
     env_file: .env
     ports:
       - "5005:5000"

backend/static/changelog.html

@@ -12,7 +12,7 @@
         /* ═══ SIDEBAR ═══ */
         .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
         .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
-        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
+        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
         .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
         .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
         .nav-group { padding: 16px 12px 8px; }
@@ -20,11 +20,11 @@
         .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
         .nav-item:hover { background: #161b22; color: #e6edf3; }
         .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
-        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; }
+        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
         .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
         .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
         .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
-        .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); }
+        .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
         .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
         .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
         .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
@@ -41,9 +41,9 @@
 
         /* ═══ FORM ═══ */
         .form-input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; }
-        .form-input:focus { outline: none; border-color: #667eea; }
+        .form-input:focus { outline: none; border-color: #0d9488; }
         .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; }
-        .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: #fff; }
+        .btn-primary { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; }
         .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
 
         /* ═══ CHANGELOG ═══ */

backend/static/dashboard.html

@@ -40,7 +40,7 @@
 
         .brand-icon {
             width: 40px; height: 40px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
+            background: linear-gradient(135deg, #0d9488, #065f46);
             border-radius: 10px;
             display: flex; align-items: center; justify-content: center;
             font-size: 1.3em; flex-shrink: 0;
@@ -74,7 +74,7 @@
         .nav-item.active::before {
             content: ''; position: absolute; left: 0; top: 50%;
             transform: translateY(-50%); width: 3px; height: 20px;
-            background: linear-gradient(180deg, #667eea, #764ba2);
+            background: linear-gradient(180deg, #0d9488, #065f46);
             border-radius: 0 3px 3px 0;
         }
 
@@ -86,7 +86,7 @@
         }
 
         .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
-        .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); }
+        .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
         .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
         .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
 
@@ -331,7 +331,7 @@
         .btn:hover { background: #1b2030; color: #e6edf3; border-color: #30363d; }
 
         .btn-primary {
-            background: linear-gradient(135deg, #667eea, #764ba2);
+            background: linear-gradient(135deg, #0d9488, #065f46);
             border-color: transparent; color: #fff;
         }
 
@@ -609,7 +609,7 @@
         }
 
         .form-input:focus, .form-textarea:focus, .form-select:focus {
-            outline: none; border-color: #667eea;
+            outline: none; border-color: #0d9488;
             box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
         }
 
@@ -644,7 +644,7 @@
 
         .loading .spinner {
             width: 36px; height: 36px; border: 3px solid #1b2030;
-            border-top-color: #667eea; border-radius: 50%;
+            border-top-color: #0d9488; border-radius: 50%;
             animation: spin 0.7s linear infinite; margin-bottom: 16px;
         }
 

backend/static/experiment_detail.html

@@ -12,7 +12,7 @@
         /* ═══ SIDEBAR ═══ */
         .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
         .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
-        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
+        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
         .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
         .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
         .nav-group { padding: 16px 12px 8px; }
@@ -21,11 +21,11 @@
         .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
         .nav-item:hover { background: #161b22; color: #e6edf3; }
         .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
-        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; }
+        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
         .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
         .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
         .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
-        .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); }
+        .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
         .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
         .badge-dev { background: rgba(167,139,250,0.15); color: #a78bfa; border: 1px solid rgba(167,139,250,0.25); }
         .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
@@ -49,7 +49,7 @@
         .btn { padding: 8px 18px; border-radius: 10px; font-size: 0.82em; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
         .btn-outline { background: none; border: 1px solid #30363d; color: #8b949e; }
         .btn-outline:hover { color: #e6edf3; border-color: #484f58; }
-        .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: #fff; }
+        .btn-primary { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; }
         .btn-primary:hover { opacity: 0.9; }
 
         /* ─── CONTENT PANELS ─── */
@@ -65,7 +65,7 @@
         .desc-text { font-size: 0.88em; color: #8b949e; line-height: 1.8; white-space: pre-wrap; }
         .desc-text.empty-hint { color: #484f58; font-style: italic; }
         .desc-edit { width: 100%; padding: 14px; background: #161b22; border: 1px solid #21262d; border-radius: 10px; color: #e6edf3; font-size: 0.88em; line-height: 1.7; resize: vertical; min-height: 100px; outline: none; font-family: inherit; }
-        .desc-edit:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
+        .desc-edit:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
         .desc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
 
         /* ─── VERSION TIMELINE ─── */
@@ -73,7 +73,7 @@
         .v-entry { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(27,32,48,0.5); position: relative; }
         .v-entry:last-child { border-bottom: none; }
         .v-timeline { display: flex; flex-direction: column; align-items: center; width: 28px; flex-shrink: 0; padding-top: 3px; }
-        .v-dot { width: 10px; height: 10px; border-radius: 50%; background: #667eea; border: 2px solid #0d1117; box-shadow: 0 0 0 2px #667eea; }
+        .v-dot { width: 10px; height: 10px; border-radius: 50%; background: #0d9488; border: 2px solid #0d1117; box-shadow: 0 0 0 2px #0d9488; }
         .v-line { flex: 1; width: 2px; background: #1b2030; margin-top: 4px; }
         .v-entry:last-child .v-line { display: none; }
         .v-content { flex: 1; }
@@ -92,10 +92,10 @@
         .add-form h4 { font-size: 0.8em; font-weight: 700; color: #8b949e; margin-bottom: 10px; letter-spacing: 0.5px; }
         .add-row { display: flex; gap: 8px; margin-bottom: 8px; }
         .add-row input { flex: 1; padding: 8px 12px; background: #161b22; border: 1px solid #21262d; border-radius: 8px; color: #e6edf3; font-size: 0.8em; outline: none; }
-        .add-row input:focus { border-color: #667eea; }
+        .add-row input:focus { border-color: #0d9488; }
         .add-row input::placeholder { color: #484f58; }
         .add-note { width: 100%; padding: 8px 12px; background: #161b22; border: 1px solid #21262d; border-radius: 8px; color: #e6edf3; font-size: 0.8em; outline: none; resize: none; font-family: inherit; min-height: 44px; }
-        .add-note:focus { border-color: #667eea; }
+        .add-note:focus { border-color: #0d9488; }
         .add-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
 
         @media (max-width: 1024px) {

backend/static/feedback_demo.html

@@ -22,7 +22,7 @@
 
         /* Nav */
         .nav-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             padding: 14px 30px;
             display: flex;
             justify-content: space-between;
@@ -79,7 +79,7 @@
         .chat-header .avatar {
             width: 40px;
             height: 40px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
+            background: linear-gradient(135deg, #0d9488, #065f46);
             border-radius: 12px;
             display: flex;
             align-items: center;
@@ -138,7 +138,7 @@
         }
 
         .msg-bubble.user {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             color: white;
             border-bottom-right-radius: 4px;
         }
@@ -175,7 +175,7 @@
         }
 
         .fb-btn:hover {
-            border-color: #667eea;
+            border-color: #0d9488;
             color: #b0b0dd;
             transform: translateY(-1px);
             box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
@@ -268,14 +268,14 @@
         }
 
         .category-chip:hover {
-            border-color: #667eea;
-            color: #667eea;
+            border-color: #0d9488;
+            color: #0d9488;
         }
 
         .category-chip.selected {
             background: rgba(102, 126, 234, 0.2);
-            border-color: #667eea;
-            color: #667eea;
+            border-color: #0d9488;
+            color: #0d9488;
             font-weight: 600;
         }
 
@@ -295,7 +295,7 @@
 
         .feedback-textarea:focus {
             outline: none;
-            border-color: #667eea;
+            border-color: #0d9488;
         }
 
         .feedback-textarea::placeholder {
@@ -332,7 +332,7 @@
         }
 
         .fb-send-btn {
-            background: linear-gradient(135deg, #667eea, #764ba2);
+            background: linear-gradient(135deg, #0d9488, #065f46);
             color: white;
             box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
         }
@@ -395,7 +395,7 @@
 
         .chat-input-bar input:focus {
             outline: none;
-            border-color: #667eea;
+            border-color: #0d9488;
         }
 
         .chat-input-bar input::placeholder {
@@ -404,7 +404,7 @@
 
         .send-btn {
             padding: 12px 24px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
+            background: linear-gradient(135deg, #0d9488, #065f46);
             border: none;
             border-radius: 14px;
             color: white;
@@ -452,7 +452,7 @@
         }
 
         .product-mini:hover {
-            border-color: #667eea;
+            border-color: #0d9488;
             transform: translateY(-2px);
         }
 

backend/static/guide.html

@@ -12,7 +12,7 @@
         /* ═══ SIDEBAR ═══ */
         .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
         .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
-        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
+        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
         .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
         .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
         .nav-group { padding: 16px 12px 8px; }
@@ -20,11 +20,11 @@
         .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
         .nav-item:hover { background: #161b22; color: #e6edf3; }
         .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
-        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; }
+        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
         .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
         .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
         .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
-        .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); }
+        .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
         .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
         .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
         .version-info { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #161b22; border-radius: 8px; border: 1px solid #1b2030; }

backend/static/history.html

@@ -15,7 +15,7 @@
         }
 
         .nav-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             padding: 15px 30px;
             display: flex;
             justify-content: space-between;
@@ -270,7 +270,7 @@
 
 <body>
     <div class="nav-header">
-        <h1>🤖 Canifa AI System</h1>
+        <h1>🤖 Canifa AI <span style="background:#fbbf24;color:#1e1e1e;padding:2px 10px;border-radius:6px;font-size:0.6em;vertical-align:middle;margin-left:8px;font-weight:700;letter-spacing:1px;">DEV</span></h1>
         <div class="nav-links">
             <a href="/static/dashboard.html">📊 Dashboard</a>
             <a href="/static/index.html">💬 Chatbot</a>

backend/static/index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Canifa Chatbot Test</title>
+    <title>Canifa DEV Experimental</title>
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -16,7 +16,7 @@
 
         /* Navigation Header */
         .nav-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             padding: 15px 30px;
             display: flex;
             justify-content: space-between;
@@ -289,7 +289,7 @@
         .product-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
-            border-color: #667eea;
+            border-color: #0d9488;
         }
 
         .product-card img {
@@ -308,7 +308,7 @@
 
         .product-sku {
             font-size: 0.75em;
-            color: #667eea;
+            color: #0d9488;
             font-weight: bold;
             margin-bottom: 5px;
         }
@@ -349,7 +349,7 @@
         .product-link {
             display: block;
             text-align: center;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             color: white;
             text-decoration: none;
             padding: 8px 12px;
@@ -405,7 +405,7 @@
         }
 
         .message-view-toggle button.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             color: white;
         }
 
@@ -544,7 +544,7 @@
         }
 
         .prompt-tab-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             color: #fff;
         }
 
@@ -583,7 +583,7 @@
 
         .prompt-textarea:focus {
             outline: none;
-            border-color: #667eea;
+            border-color: #0d9488;
             box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(102, 126, 234, 0.2);
         }
 
@@ -700,8 +700,8 @@
         }
 
         .feedback-bar .fb-btn:hover {
-            border-color: #667eea;
-            color: #667eea;
+            border-color: #0d9488;
+            color: #0d9488;
             background: rgba(102, 126, 234, 0.1);
         }
 
@@ -763,14 +763,14 @@
         }
 
         .complaint-form .cat-chip:hover {
-            border-color: #667eea;
-            color: #667eea;
+            border-color: #0d9488;
+            color: #0d9488;
         }
 
         .complaint-form .cat-chip.selected {
-            border-color: #667eea;
+            border-color: #0d9488;
             background: rgba(102, 126, 234, 0.2);
-            color: #667eea;
+            color: #0d9488;
         }
 
         .complaint-form textarea {
@@ -808,7 +808,7 @@
         }
 
         .complaint-form .btn-submit {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             color: white;
         }
 
@@ -870,7 +870,7 @@
             margin: 8px 0; padding-left: 22px;
         }
         .filtered-content .md-content li { margin: 4px 0; }
-        .filtered-content .md-content li::marker { color: #667eea; }
+        .filtered-content .md-content li::marker { color: #0d9488; }
         .filtered-content .md-content .md-heading {
             font-weight: 700; color: #fff; margin: 12px 0 6px;
         }
@@ -883,7 +883,7 @@
 <body>
     <!-- Navigation Header -->
     <div class="nav-header">
-        <h1>🤖 Canifa AI System</h1>
+        <h1>🧪 Canifa AI <span style="background:#fbbf24;color:#1e1e1e;padding:2px 10px;border-radius:6px;font-size:0.6em;vertical-align:middle;margin-left:8px;font-weight:700;letter-spacing:1px;">DEV EXPERIMENTAL</span></h1>
         <div class="nav-links">
             <a href="/static/dashboard.html">📊 Dashboard</a>
             <a href="/static/index.html" class="active">💬 Chatbot</a>
@@ -899,7 +899,7 @@
             <div class="container">
                 <div class="chat-internal-wrapper">
                     <div class="header">
-                        <h2>🤖 Canifa AI Chat</h2>
+                        <h2>🧪 Dev Experimental Chat</h2>
                         <div class="config-area"
                             style="flex-wrap: wrap; display: flex; align-items: center; gap: 10px;">
                             <div style="display: flex; gap: 5px; align-items: center;">
@@ -955,7 +955,7 @@
                         <button onclick="document.getElementById('imageFileInput').click()" id="imgBtn"
                             title="Upload Image (Experimental 📸)"
                             style="background: #4a4a4a; color: #ccc; padding: 0 14px; border: 1px dashed #666; border-radius: 8px; font-size: 1.2em; cursor: pointer; transition: all 0.2s;"
-                            onmouseover="this.style.background='#5a5a5a'; this.style.borderColor='#667eea'; this.style.color='#667eea'"
+                            onmouseover="this.style.background='#5a5a5a'; this.style.borderColor='#0d9488'; this.style.color='#0d9488'"
                             onmouseout="this.style.background='#4a4a4a'; this.style.borderColor='#666'; this.style.color='#ccc'">📷</button>
                         <input type="text" id="userInput" placeholder="Type your message..."
                             onkeypress="handleKeyPress(event)" autocomplete="off">
@@ -1923,7 +1923,7 @@
                             limitDiv.style.padding = '8px';
                             limitDiv.style.background = 'rgba(255, 255, 255, 0.05)';
                             limitDiv.style.borderRadius = '6px';
-                            limitDiv.style.borderLeft = '3px solid #667eea';
+                            limitDiv.style.borderLeft = '3px solid #0d9488';
 
                             const limitText = `📊 Message Limit: ${data.limit_info.used}/${data.limit_info.limit} (Còn ${data.limit_info.remaining} tin nhắn)`;
                             limitDiv.innerText = limitText;

backend/static/notes.html

@@ -12,7 +12,7 @@
         /* ═══ SIDEBAR ═══ */
         .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
         .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
-        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
+        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
         .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
         .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
         .nav-group { padding: 16px 12px 8px; }
@@ -20,11 +20,11 @@
         .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
         .nav-item:hover { background: #161b22; color: #e6edf3; }
         .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
-        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; }
+        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
         .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
         .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
         .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
-        .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); }
+        .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
         .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
         .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
         .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
@@ -42,7 +42,7 @@
         /* ═══ BUTTONS ═══ */
         .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; }
         .btn:hover { background: #1b2030; border-color: #30363d; }
-        .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: #fff; }
+        .btn-primary { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; }
         .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
 
         /* ═══ FILTERS ═══ */
@@ -80,7 +80,7 @@
         .form-group { margin-bottom: 14px; }
         .form-label { font-size: 0.78em; font-weight: 600; color: #8b949e; margin-bottom: 6px; display: block; }
         .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; }
-        .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #667eea; }
+        .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #0d9488; }
         .form-textarea { min-height: 120px; resize: vertical; }
         .form-select { cursor: pointer; }
         .form-select option { background: #161b22; }

backend/static/resources.html

@@ -12,7 +12,7 @@
         /* ═══ SIDEBAR ═══ */
         .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
         .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
-        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
+        .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
         .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
         .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
         .nav-group { padding: 16px 12px 8px; }
@@ -20,11 +20,11 @@
         .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
         .nav-item:hover { background: #161b22; color: #e6edf3; }
         .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
-        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; }
+        .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
         .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
         .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
         .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
-        .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); }
+        .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
         .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
         .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
         .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
@@ -42,7 +42,7 @@
         /* ═══ BUTTONS ═══ */
         .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; }
         .btn:hover { background: #1b2030; border-color: #30363d; }
-        .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: #fff; }
+        .btn-primary { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; }
         .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
 
         /* ═══ FILTERS ═══ */
@@ -86,7 +86,7 @@
         .form-group { margin-bottom: 14px; }
         .form-label { font-size: 0.78em; font-weight: 600; color: #8b949e; margin-bottom: 6px; display: block; }
         .form-input, .form-select { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; }
-        .form-input:focus, .form-select:focus { outline: none; border-color: #667eea; }
+        .form-input:focus, .form-select:focus { outline: none; border-color: #0d9488; }
         .form-select { cursor: pointer; }
         .form-select option { background: #161b22; }
         .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

backend/static/save.html

@@ -16,7 +16,7 @@
 
         /* Navigation Header */
         .nav-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             padding: 15px 30px;
             display: flex;
             justify-content: space-between;
@@ -289,7 +289,7 @@
         .product-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
-            border-color: #667eea;
+            border-color: #0d9488;
         }
 
         .product-card img {
@@ -308,7 +308,7 @@
 
         .product-sku {
             font-size: 0.75em;
-            color: #667eea;
+            color: #0d9488;
             font-weight: bold;
             margin-bottom: 5px;
         }
@@ -349,7 +349,7 @@
         .product-link {
             display: block;
             text-align: center;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             color: white;
             text-decoration: none;
             padding: 8px 12px;
@@ -395,7 +395,7 @@
         }
 
         .message-view-toggle button.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
             color: white;
         }
 
@@ -543,7 +543,7 @@
 
         .prompt-textarea:focus {
             outline: none;
-            border-color: #667eea;
+            border-color: #0d9488;
             box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(102, 126, 234, 0.2);
         }
 
@@ -615,7 +615,7 @@
 <body>
     <!-- Navigation Header -->
 <div class="nav-header">
-    <h1>🤖 Canifa AI System</h1>
+    <h1>🤖 Canifa AI <span style="background:#fbbf24;color:#1e1e1e;padding:2px 10px;border-radius:6px;font-size:0.6em;vertical-align:middle;margin-left:8px;font-weight:700;letter-spacing:1px;">DEV</span></h1>
     <div class="nav-links">
         <a href="/static/dashboard.html">📊 Dashboard</a>
         <a href="/static/index.html" class="active">💬 Chatbot</a>