fix: calm down UI colors, improve button visibility

index.html

@@ -22,12 +22,12 @@
   <style>
     :root {
       --bg: #0a0a0a;
-      --panel: #111111;
-      --border: #1a1a1a;
+      --panel: #161616;
+      --border: #2a2a2a;
       --text: #e0e0e0;
-      --muted: #666666;
-      --accent: #00cc44;
-      --accent-2: #00b4d8;
+      --muted: #888888;
+      --accent: #00a832;
+      --accent-2: #0e7a9a;
     }
     :root.light {
       --bg: #f8fafc;
@@ -80,8 +80,8 @@
       display: inline-block;
     }
     .status-dot.ok {
-      background: var(--accent);
-      box-shadow: 0 0 8px #00ff4188;
+      background: #00a832;
+      box-shadow: none;
     }
     .header-btn {
       padding: 6px 12px;
@@ -112,12 +112,13 @@
     .tts-btn {
       padding: 4px 12px;
       font-size: 12px;
-      background: var(--panel);
-      color: var(--muted);
-      border: 1px solid var(--border);
-      border-radius: 6px;
+      background: #1a1a1a;
+      color: #aaaaaa;
+      border: 1px solid #333333;
+      border-radius: 4px;
       cursor: pointer;
       font-weight: 600;
+      font-family: 'JetBrains Mono', monospace;
       transition: all 0.2s;
     }
     .tts-btn.tts-active {
@@ -133,23 +134,22 @@
     .mode-toggle {
       display: flex;
       align-items: center;
-      gap: 4px;
-      background: var(--panel);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 4px;
+      gap: 6px;
+      background: transparent;
+      border: none;
+      padding: 0;
     }
     .mode-btn {
       padding: 5px 14px;
       font-size: 12px;
-      border: 1px solid var(--border);
+      border: 1px solid #333333;
       border-radius: 4px;
       cursor: pointer;
       font-weight: 600;
       font-family: 'JetBrains Mono', monospace;
       transition: all 0.2s;
-      background: transparent;
-      color: var(--muted);
+      background: #1a1a1a;
+      color: #aaaaaa;
       letter-spacing: 0.5px;
     }
     .mode-btn:hover {
@@ -157,9 +157,9 @@
       border-color: var(--accent);
     }
     .mode-btn.active {
-      background: var(--accent);
+      background: #00a832;
       color: #000000;
-      box-shadow: 0 0 8px #00ff4155;
+      box-shadow: none;
     }
     .mode-btn.trainer-active {
       background: #f59e0b;
@@ -195,12 +195,12 @@
     }
     .message.user-msg {
       background: var(--panel);
-      border-color: var(--accent-2);
-      border-left: 3px solid #4f9eff;
+      border-color: #1e2a3a;
+      border-left: 2px solid #1e3a5a;
     }
     .message strong {
       display: inline-block;
-      color: var(--accent-2);
+      color: #00a832;
       margin-bottom: 6px;
     }
     .message.error {
@@ -244,8 +244,8 @@
     }
     #chat-input:focus {
       outline: none;
-      border-color: var(--accent);
-      box-shadow: 0 0 0 2px rgba(0,255,65,0.15);
+      border-color: #1e3a4a;
+      box-shadow: none;
     }
     #chat-send {
       height: 40px;
@@ -261,9 +261,9 @@
       letter-spacing: 1px;
     }
     #chat-send:hover:not(:disabled) {
-      background: var(--accent);
+      background: #00a832;
       color: #000000;
-      box-shadow: 0 0 12px #00ff4155;
+      box-shadow: none;
     }
     #chat-send:hover:not(:disabled) {
       border-color: #334155;