@speechos/client 0.2.10 → 0.2.11

package/dist/index.iife.js

@@ -29040,6 +29040,17 @@
           document.addEventListener("touchstart", this.touchHandler, true);
           document.addEventListener("mousedown", this.mouseDownHandler, true);
           this.isActive = true;
+          // Check for already-focused form field (e.g., page loaded with autofocus)
+          const activeElement = document.activeElement;
+          if (isFormField(activeElement)) {
+              console.log("[SpeechOS] FormDetector: found initially focused form field", {
+                  element: activeElement,
+                  tagName: activeElement?.tagName,
+              });
+              state.setFocusedElement(activeElement);
+              state.show();
+              events.emit("form:focus", { element: activeElement });
+          }
       }
       /**
        * Stop detecting form field focus events
@@ -30509,9 +30520,9 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 
     /* Color tokens */
-    --speechos-primary: #10B981;
-    --speechos-primary-hover: #059669;
-    --speechos-primary-active: #047857;
+    --speechos-primary: #0d9488;
+    --speechos-primary-hover: #0f766e;
+    --speechos-primary-active: #115e59;
 
     --speechos-bg: #ffffff;
     --speechos-bg-hover: #f9fafb;
@@ -31076,45 +31087,51 @@
         width: 56px;
         height: 56px;
         border-radius: var(--speechos-radius-full);
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        background: #10b981;
         border: none;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
       }
 
       .mic-button:hover {
+        background: #059669;
         transform: scale(1.05);
-        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
+        box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45);
       }
 
       .mic-button:active {
         transform: scale(0.98);
       }
 
+      .mic-button:focus {
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 0 4px 16px rgba(16, 185, 129, 0.35);
+      }
+
       /* Expanded state - bubbles visible */
       .mic-button.expanded {
-        background: linear-gradient(135deg, #059669 0%, #047857 100%);
+        background: #059669;
       }
 
       /* Connecting state - Siri-style metallic spinner */
       .mic-button.connecting {
         background: radial-gradient(
           circle at 30% 30%,
-          #34d399 0%,
-          #10b981 40%,
-          #059669 70%,
-          #047857 100%
+          #2dd4bf 0%,
+          #14b8a6 40%,
+          #0d9488 70%,
+          #0f766e 100%
         );
         cursor: wait;
-        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4),
-          0 0 40px rgba(16, 185, 129, 0.2),
+        box-shadow: 0 0 20px rgba(13, 148, 136, 0.4),
+          0 0 40px rgba(13, 148, 136, 0.2),
           inset 0 0 20px rgba(255, 255, 255, 0.1);
       }
 
@@ -31157,15 +31174,15 @@
         background: conic-gradient(
           from 0deg,
           transparent 0deg,
-          rgba(52, 211, 153, 0.1) 30deg,
-          rgba(16, 185, 129, 0.8) 90deg,
+          rgba(45, 212, 191, 0.1) 30deg,
+          rgba(13, 148, 136, 0.8) 90deg,
           rgba(255, 255, 255, 0.95) 120deg,
-          rgba(52, 211, 153, 0.9) 150deg,
-          rgba(16, 185, 129, 0.6) 180deg,
-          rgba(5, 150, 105, 0.3) 210deg,
+          rgba(45, 212, 191, 0.9) 150deg,
+          rgba(13, 148, 136, 0.6) 180deg,
+          rgba(15, 118, 110, 0.3) 210deg,
           transparent 270deg,
-          rgba(110, 231, 183, 0.2) 300deg,
-          rgba(16, 185, 129, 0.5) 330deg,
+          rgba(94, 234, 212, 0.2) 300deg,
+          rgba(13, 148, 136, 0.5) 330deg,
           transparent 360deg
         );
         -webkit-mask: linear-gradient(#fff 0 0) content-box,
@@ -31186,13 +31203,13 @@
         background: conic-gradient(
           from 180deg,
           transparent 0deg,
-          rgba(167, 243, 208, 0.3) 60deg,
+          rgba(153, 246, 228, 0.3) 60deg,
           rgba(255, 255, 255, 0.7) 90deg,
-          rgba(110, 231, 183, 0.5) 120deg,
+          rgba(94, 234, 212, 0.5) 120deg,
           transparent 180deg,
-          rgba(52, 211, 153, 0.2) 240deg,
+          rgba(45, 212, 191, 0.2) 240deg,
           rgba(255, 255, 255, 0.5) 270deg,
-          rgba(16, 185, 129, 0.4) 300deg,
+          rgba(13, 148, 136, 0.4) 300deg,
           transparent 360deg
         );
         -webkit-mask: linear-gradient(#fff 0 0) content-box,
@@ -31233,8 +31250,8 @@
         border-radius: 50%;
         background: radial-gradient(
           circle,
-          rgba(16, 185, 129, 0.4) 0%,
-          rgba(16, 185, 129, 0.15) 40%,
+          rgba(13, 148, 136, 0.4) 0%,
+          rgba(13, 148, 136, 0.15) 40%,
           transparent 70%
         );
         animation: siri-glow-pulse 2s ease-in-out infinite;
@@ -32654,15 +32671,15 @@
   }
 
   .modal {
-    background: #1a1d24;
+    background: #f5f5f4;
     border-radius: 16px;
     width: 90%;
     max-width: 580px;
     height: min(560px, 85vh);
     display: flex;
     flex-direction: column;
-    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
     transform: scale(0.95) translateY(10px);
     transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     pointer-events: auto;
@@ -32687,16 +32704,16 @@
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .modal-title {
     font-size: 17px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
   }
 
   .modal-logo {
@@ -32709,7 +32726,7 @@
     width: 28px;
     height: 28px;
     border-radius: 8px;
-    background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+    background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -32724,13 +32741,13 @@
   .logo-text {
     font-size: 17px;
     font-weight: 500;
-    color: white;
+    color: #171717;
     letter-spacing: -0.02em;
   }
 
   .logo-os {
     font-weight: 700;
-    background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+    background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -32746,13 +32763,22 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
   .close-button:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: white;
+    background: #f5f5f4;
+    color: #171717;
+  }
+
+  .close-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #0d9488, 0 0 0 4px rgba(13, 148, 136, 0.2);
+  }
+
+  .close-button:active {
+    transform: scale(0.95);
   }
 
   .modal-body {
@@ -32764,8 +32790,8 @@
   .sidebar {
     width: 110px;
     flex-shrink: 0;
-    background: rgba(0, 0, 0, 0.25);
-    border-right: 1px solid rgba(255, 255, 255, 0.06);
+    background: #fafaf9;
+    border-right: 1px solid #e5e5e5;
     padding: 12px 8px;
     display: flex;
     flex-direction: column;
@@ -32794,19 +32820,25 @@
     border-radius: 10px;
     background: transparent;
     cursor: pointer;
-    color: rgba(255, 255, 255, 0.5);
+    color: #525252;
     transition: all 0.15s ease;
     position: relative;
   }
 
   .sidebar-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.8);
+    background: #ffffff;
+    color: #171717;
+  }
+
+  .sidebar-item:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.4);
   }
 
   .sidebar-item.active {
-    background: rgba(16, 185, 129, 0.12);
-    color: #34d399;
+    background: rgba(15, 118, 110, 0.12);
+    color: #0f766e;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   }
 
   .sidebar-item.active::before {
@@ -32817,7 +32849,7 @@
     transform: translateY(-50%);
     width: 3px;
     height: 24px;
-    background: #34d399;
+    background: #0f766e;
     border-radius: 0 3px 3px 0;
   }
 
@@ -32860,14 +32892,14 @@
   .section-title {
     font-size: 15px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0 0 6px 0;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.02em;
   }
 
   .section-description {
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.5);
+    color: #525252;
     line-height: 1.5;
     margin: 0;
   }
@@ -32875,7 +32907,7 @@
   .empty-state {
     text-align: center;
     padding: 40px 20px;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
   }
 
   .empty-state-icon {
@@ -32887,7 +32919,7 @@
     font-size: 15px;
     font-weight: 500;
     margin-bottom: 8px;
-    color: rgba(255, 255, 255, 0.7);
+    color: #525252;
   }
 
   .empty-state-text {
@@ -32905,7 +32937,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.35);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
@@ -32943,20 +32975,30 @@
     align-items: center;
     gap: 6px;
     padding: 10px 16px;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     border: none;
     border-radius: 8px;
     color: white;
     font-size: 13px;
     font-weight: 600;
+    letter-spacing: 0.01em;
     cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    transition: all 0.15s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .add-button:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .add-button:focus:not(:disabled) {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+  }
+
+  .add-button:active:not(:disabled) {
+    transform: scale(0.98);
   }
 
   .add-button:disabled {
@@ -32967,7 +33009,7 @@
 
   .count-badge {
     font-size: 12px;
-    color: rgba(255, 255, 255, 0.45);
+    color: #737373;
     font-weight: 500;
   }
 
@@ -32979,11 +33021,12 @@
   }
 
   .add-form {
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 16px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   }
 
   .form-group {
@@ -32998,7 +33041,7 @@
     display: block;
     font-size: 12px;
     font-weight: 600;
-    color: rgba(255, 255, 255, 0.7);
+    color: #525252;
     margin-bottom: 8px;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -33007,10 +33050,10 @@
   .form-input {
     width: 100%;
     padding: 12px 14px;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #d4d4d4;
     border-radius: 8px;
-    color: white;
+    color: #171717;
     font-size: 14px;
     font-family: inherit;
     transition: all 0.15s ease;
@@ -33019,12 +33062,12 @@
 
   .form-input:focus {
     outline: none;
-    border-color: #34d399;
-    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+    border-color: #0d9488;
+    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
   }
 
   .form-input::placeholder {
-    color: rgba(255, 255, 255, 0.3);
+    color: #a3a3a3;
   }
 
   .form-input.error {
@@ -33048,7 +33091,7 @@
 
   .char-count {
     font-size: 11px;
-    color: rgba(255, 255, 255, 0.4);
+    color: #737373;
     font-variant-numeric: tabular-nums;
   }
 
@@ -33082,26 +33125,35 @@
   }
 
   .form-btn.cancel {
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    color: rgba(255, 255, 255, 0.7);
+    background: #ffffff;
+    border: 1px solid #d4d4d4;
+    color: #525252;
   }
 
   .form-btn.cancel:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.25);
+    background: #fafaf9;
+    border-color: #a3a3a3;
   }
 
   .form-btn.save {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     border: none;
     color: white;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .form-btn.save:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .form-btn.save:focus:not(:disabled) {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+  }
+
+  .form-btn.save:active:not(:disabled) {
+    transform: scale(0.98);
   }
 
   .form-btn.save:disabled {
@@ -33135,16 +33187,17 @@
       }
 
       .transcript-item {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
         padding: 12px 14px;
         transition: all 0.15s ease;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .transcript-item:hover {
-        background: rgba(255, 255, 255, 0.06);
-        border-color: rgba(255, 255, 255, 0.1);
+        border-color: #d4d4d4;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       }
 
       .transcript-header {
@@ -33167,28 +33220,28 @@
       }
 
       .transcript-badge.dictate {
-        background: rgba(16, 185, 129, 0.15);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.18);
+        color: #0f766e;
       }
 
       .transcript-badge.edit {
-        background: rgba(139, 92, 246, 0.15);
-        color: #a78bfa;
+        background: rgba(139, 92, 246, 0.18);
+        color: #7c3aed;
       }
 
       .transcript-badge.command {
-        background: rgba(245, 158, 11, 0.15);
-        color: #fbbf24;
+        background: rgba(245, 158, 11, 0.18);
+        color: #b45309;
       }
 
       .transcript-time {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.35);
+        color: #737373;
       }
 
       .transcript-text {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.85);
+        color: #171717;
         line-height: 1.5;
         word-break: break-word;
         display: -webkit-box;
@@ -33203,7 +33256,7 @@
         gap: 8px;
         margin-top: 10px;
         padding-top: 10px;
-        border-top: 1px solid rgba(255, 255, 255, 0.06);
+        border-top: 1px solid #e5e5e5;
       }
 
       .transcript-action-btn {
@@ -33212,23 +33265,23 @@
         gap: 6px;
         padding: 6px 10px;
         border-radius: 6px;
-        background: rgba(255, 255, 255, 0.06);
+        background: rgba(0, 0, 0, 0.08);
         border: none;
         cursor: pointer;
         font-size: 12px;
         font-weight: 500;
-        color: rgba(255, 255, 255, 0.6);
+        color: #404040;
         transition: all 0.15s ease;
       }
 
       .transcript-action-btn:hover {
-        background: rgba(255, 255, 255, 0.1);
-        color: rgba(255, 255, 255, 0.9);
+        background: rgba(0, 0, 0, 0.12);
+        color: #171717;
       }
 
       .transcript-action-btn.copied {
-        background: rgba(16, 185, 129, 0.2);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.2);
+        color: #0d9488;
       }
 
       .transcript-action-btn.delete:hover {
@@ -33242,9 +33295,9 @@
         margin-top: 16px;
         padding: 10px;
         background: rgba(239, 68, 68, 0.1);
-        border: 1px solid rgba(239, 68, 68, 0.15);
+        border: 1px solid rgba(239, 68, 68, 0.2);
         border-radius: 8px;
-        color: #f87171;
+        color: #dc2626;
         font-size: 13px;
         font-weight: 500;
         cursor: pointer;
@@ -33253,18 +33306,18 @@
 
       .clear-all-button:hover {
         background: rgba(239, 68, 68, 0.18);
-        border-color: rgba(239, 68, 68, 0.25);
+        border-color: rgba(239, 68, 68, 0.3);
       }
 
       .command-matched {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.5);
+        color: #525252;
         margin-top: 6px;
       }
 
       .command-matched code {
         background: rgba(245, 158, 11, 0.15);
-        color: #fbbf24;
+        color: #d97706;
         padding: 2px 6px;
         border-radius: 4px;
         font-family: monospace;
@@ -33452,21 +33505,21 @@
         gap: 8px;
         font-size: 15px;
         font-weight: 600;
-        color: white;
+        color: #171717;
         margin-bottom: 10px;
       }
 
       .help-title.dictate {
-        color: #34d399;
+        color: #0f766e;
       }
 
       .help-title.edit {
-        color: #a78bfa;
+        color: #7c3aed;
       }
 
       .help-text {
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.6);
+        color: #525252;
         line-height: 1.6;
         margin-bottom: 10px;
       }
@@ -33483,17 +33536,17 @@
       }
 
       .help-example {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 6px;
         padding: 8px 12px;
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.5);
+        color: #525252;
         font-style: italic;
       }
 
       .help-title.languages {
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #0f766e 0%, #1d4ed8 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -33571,7 +33624,7 @@
         width: 36px;
         height: 36px;
         border-radius: 10px;
-        background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -33586,13 +33639,13 @@
       .about-logo-text {
         font-size: 22px;
         font-weight: 500;
-        color: white;
+        color: #171717;
         letter-spacing: -0.02em;
       }
 
       .logo-os {
         font-weight: 700;
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -33600,7 +33653,7 @@
 
       .about-description {
         font-size: 14px;
-        color: rgba(255, 255, 255, 0.65);
+        color: #525252;
         line-height: 1.7;
         margin-bottom: 24px;
       }
@@ -33618,19 +33671,29 @@
         align-items: center;
         gap: 8px;
         padding: 12px 18px;
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        background: #0d9488;
         border-radius: 10px;
         color: white;
         font-size: 14px;
         font-weight: 600;
+        letter-spacing: 0.01em;
         text-decoration: none;
-        transition: all 0.2s ease;
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
+        transition: all 0.15s ease;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
       }
 
       .about-link:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
+        background: #0f766e;
+        box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+      }
+
+      .about-link:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
+      }
+
+      .about-link:active {
+        transform: scale(0.98);
       }
     `,
       ]; }
@@ -33710,20 +33773,21 @@
         gap: 3px;
         height: 32px;
         padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.2);
+        background: #ffffff;
+        border: 2px solid #e5e5e5;
         border-radius: 8px;
       }
 
       .meter-bar {
         width: 6px;
         min-height: 4px;
-        background: rgba(255, 255, 255, 0.2);
+        background: #d4d4d4;
         border-radius: 2px;
         transition: height 50ms ease-out, background 100ms ease;
       }
 
       .meter-bar.active {
-        background: var(--speechos-primary);
+        background: #10b981;
       }
 
       .meter-inactive {
@@ -33732,14 +33796,15 @@
         justify-content: center;
         height: 32px;
         padding: 8px 12px;
-        background: rgba(0, 0, 0, 0.2);
+        background: #ffffff;
+        border: 2px solid #e5e5e5;
         border-radius: 8px;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         font-size: 13px;
       }
 
       .meter-error {
-        color: #f87171;
+        color: #dc2626;
       }
     `,
       ]; }
@@ -33936,18 +34001,18 @@
       }
 
       .settings-section-icon {
-        color: #34d399;
+        color: #0d9488;
       }
 
       .settings-section-title {
         font-size: 14px;
         font-weight: 600;
-        color: white;
+        color: #171717;
       }
 
       .settings-section-description {
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.45);
+        color: #525252;
         line-height: 1.5;
         margin-bottom: 14px;
       }
@@ -33976,10 +34041,10 @@
       .settings-select {
         width: 100%;
         padding: 12px 40px 12px 14px;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: #ffffff;
+        border: 1px solid #d4d4d4;
         border-radius: 10px;
-        color: white;
+        color: #171717;
         font-size: 14px;
         font-family: inherit;
         cursor: pointer;
@@ -33989,19 +34054,19 @@
       }
 
       .settings-select:hover {
-        border-color: rgba(255, 255, 255, 0.15);
-        background: rgba(0, 0, 0, 0.4);
+        border-color: #a3a3a3;
+        background: #ffffff;
       }
 
       .settings-select:focus {
         outline: none;
-        border-color: #34d399;
-        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+        border-color: #0d9488;
+        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
       }
 
       .settings-select option {
-        background: #1a1d24;
-        color: white;
+        background: #ffffff;
+        color: #171717;
         padding: 8px;
       }
 
@@ -34011,8 +34076,8 @@
       }
 
       .settings-select:disabled:hover {
-        border-color: rgba(255, 255, 255, 0.08);
-        background: rgba(0, 0, 0, 0.3);
+        border-color: #d4d4d4;
+        background: #ffffff;
       }
 
       .settings-select-arrow {
@@ -34021,12 +34086,12 @@
         top: 50%;
         transform: translateY(-50%);
         pointer-events: none;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
       }
 
       .settings-permission-note {
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         margin-top: 10px;
         font-style: italic;
       }
@@ -34036,7 +34101,7 @@
         align-items: center;
         gap: 4px;
         font-size: 11px;
-        color: #34d399;
+        color: #059669;
         font-weight: 500;
         opacity: 0;
         transition: opacity 0.2s ease;
@@ -34052,28 +34117,34 @@
         align-items: center;
         justify-content: space-between;
         padding: 12px 14px;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .settings-toggle-label {
         font-size: 14px;
-        color: white;
+        color: #171717;
       }
 
       .settings-toggle {
         position: relative;
         width: 44px;
         height: 24px;
-        background: rgba(255, 255, 255, 0.1);
+        background: #d4d4d4;
         border-radius: 12px;
         cursor: pointer;
         transition: background 0.2s ease;
       }
 
       .settings-toggle.active {
-        background: #34d399;
+        background: #0d9488;
+      }
+
+      .settings-toggle:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
       }
 
       .settings-toggle-knob {
@@ -34431,17 +34502,18 @@
       }
 
       .snippet-item {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.06);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 10px;
         padding: 14px;
         transition: all 0.15s ease;
         position: relative;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
       }
 
       .snippet-item:hover {
-        background: rgba(255, 255, 255, 0.06);
-        border-color: rgba(255, 255, 255, 0.1);
+        border-color: #d4d4d4;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       }
 
       .snippet-trigger {
@@ -34454,7 +34526,7 @@
       .snippet-trigger-text {
         font-size: 14px;
         font-weight: 600;
-        color: #34d399;
+        color: #0d9488;
       }
 
       .snippet-trigger-text::before {
@@ -34472,12 +34544,12 @@
         align-items: flex-start;
         gap: 8px;
         font-size: 13px;
-        color: rgba(255, 255, 255, 0.65);
+        color: #525252;
         line-height: 1.5;
       }
 
       .snippet-expansion-arrow {
-        color: rgba(255, 255, 255, 0.3);
+        color: #a3a3a3;
         flex-shrink: 0;
         margin-top: 2px;
       }
@@ -34506,13 +34578,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        color: rgba(255, 255, 255, 0.4);
+        color: #737373;
         transition: all 0.15s ease;
       }
 
       .edit-btn:hover {
-        background: rgba(52, 211, 153, 0.15);
-        color: #34d399;
+        background: rgba(13, 148, 136, 0.1);
+        color: #0d9488;
       }
     `,
       ]; }
@@ -34795,30 +34867,32 @@
         gap: 8px;
         padding: 8px 12px;
         background: rgba(139, 92, 246, 0.1);
-        border: 1px solid rgba(139, 92, 246, 0.2);
+        border: 1px solid rgba(139, 92, 246, 0.25);
         border-radius: 8px;
         transition: all 0.15s ease;
       }
 
       .vocabulary-chip:hover {
         background: rgba(139, 92, 246, 0.15);
-        border-color: rgba(139, 92, 246, 0.3);
+        border-color: rgba(139, 92, 246, 0.35);
       }
 
       .vocabulary-chip-text {
         font-size: 13px;
         font-weight: 500;
-        color: #c4b5fd;
+        color: #7c3aed;
       }
 
       .vocabulary-chip .delete-btn {
         width: 20px;
         height: 20px;
         margin: -4px -4px -4px 0;
+        color: #737373;
       }
 
       .vocabulary-chip .delete-btn:hover {
         background: rgba(239, 68, 68, 0.2);
+        color: #f87171;
       }
     `,
       ]; }
@@ -35219,14 +35293,14 @@
   }
 
   .modal-card {
-    background: #1a1d24;
+    background: #f5f5f4;
     border-radius: 16px;
     width: 90%;
     max-width: 400px;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
     transform: scale(0.95) translateY(10px);
     transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     pointer-events: auto;
@@ -35242,14 +35316,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .modal-title {
     font-size: 16px;
     font-weight: 600;
-    color: white;
+    color: #171717;
     margin: 0;
     letter-spacing: -0.01em;
   }
@@ -35264,13 +35338,22 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.5);
+    color: #737373;
     transition: all 0.15s ease;
   }
 
   .close-button:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: white;
+    background: #f5f5f4;
+    color: #171717;
+  }
+
+  .close-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #0d9488, 0 0 0 4px rgba(13, 148, 136, 0.2);
+  }
+
+  .close-button:active {
+    transform: scale(0.95);
   }
 
   .modal-body {
@@ -35282,8 +35365,8 @@
     justify-content: flex-end;
     gap: 10px;
     padding: 16px 20px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(0, 0, 0, 0.1);
+    border-top: 1px solid #e5e5e5;
+    background: #ffffff;
   }
 
   .btn {
@@ -35300,42 +35383,47 @@
   }
 
   .btn-secondary {
-    background: rgba(255, 255, 255, 0.08);
-    color: rgba(255, 255, 255, 0.8);
+    background: rgba(0, 0, 0, 0.08);
+    color: #525252;
   }
 
   .btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.12);
-    color: white;
+    background: rgba(0, 0, 0, 0.12);
+    color: #171717;
   }
 
   .btn-primary {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     color: white;
-    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }
 
   .btn-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+    background: #0f766e;
+    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+  }
+
+  .btn-primary:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
   }
 
   .btn-primary:active {
-    transform: translateY(0);
+    transform: scale(0.98);
   }
 
   /* Success state for copy button */
   .btn-success {
-    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
+    background: #059669;
   }
 
   /* Text display area */
   .text-display {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
     border-radius: 10px;
     padding: 14px 16px;
-    color: white;
+    color: #171717;
     font-size: 14px;
     line-height: 1.5;
     max-height: 200px;
@@ -35354,12 +35442,12 @@
   }
 
   .text-display::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba(0, 0, 0, 0.15);
     border-radius: 3px;
   }
 
   .text-display::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba(0, 0, 0, 0.25);
   }
 
   /* Instruction list styling */
@@ -35374,7 +35462,7 @@
     align-items: flex-start;
     gap: 12px;
     padding: 12px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid #e5e5e5;
   }
 
   .instruction-item:last-child {
@@ -35385,7 +35473,7 @@
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    background: #0d9488;
     color: white;
     font-size: 12px;
     font-weight: 700;
@@ -35397,7 +35485,7 @@
 
   .instruction-text {
     font-size: 14px;
-    color: rgba(255, 255, 255, 0.85);
+    color: #171717;
     line-height: 1.5;
     padding-top: 2px;
   }
@@ -35455,7 +35543,7 @@
         width: 32px;
         height: 32px;
         border-radius: 8px;
-        background: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -35469,31 +35557,35 @@
       }
 
       .modal-title {
-        background: linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
+        background: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
       }
 
       .btn-primary {
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        background: #0d9488;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         border-radius: 999px;
       }
 
       .btn-primary:hover {
-        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-        transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+        background: #0f766e;
+        box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
+      }
+
+      .btn-primary:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0d9488;
       }
 
       .btn-primary:active {
-        transform: translateY(0);
+        transform: scale(0.98);
       }
 
       .btn-success {
-        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-        box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
+        background: #059669;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         border-radius: 999px;
       }
 
@@ -35507,14 +35599,15 @@
         gap: 6px;
         margin-top: 12px;
         padding: 8px 12px;
-        background: rgba(16, 185, 129, 0.08);
+        background: #ffffff;
+        border: 1px solid #e5e5e5;
         border-radius: 8px;
         font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
+        color: #525252;
       }
 
       .hint-icon {
-        color: #10b981;
+        color: #0d9488;
         flex-shrink: 0;
       }