dark mode support for extension popup

Uses @media (prefers-color-scheme: dark) to match browser preference.
Dark theme: slate-900/indigo-950/blue-900 backgrounds, cyan-50 text,
cyan borders on buttons, matches web app dark mode colors.

packages/extension/src/popup/popup.css

···
   background: linear-gradient(135deg, #faf5ff 0%, #ffffff 50%, #ecfeff 100%);
 }
 
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #e0f2fe;
+    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0c4a6e 100%);
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
···
   color: #334155;
 }
 
+@media (prefers-color-scheme: dark) {
+  .message {
+    color: #e0f2fe;
+  }
+}
+
 .hint {
   font-size: 13px;
   color: #64748b;
   margin-top: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .hint {
+    color: #94a3b8;
+  }
 }
 
 .btn-primary {
···
   background: #faf5ff;
 }
 
+@media (prefers-color-scheme: dark) {
+  .btn-secondary {
+    background: #1e1b4b;
+    color: #06b6d4;
+    border-color: #06b6d4;
+  }
+
+  .btn-secondary:hover {
+    background: #312e81;
+  }
+}
+
 .progress {
   margin-top: 20px;
 }
···
   margin-bottom: 12px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .progress-bar {
+    background: #1e293b;
+  }
+}
+
 .progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #ea580c 0%, #ec4899 100%);
···
   color: #334155;
 }
 
+@media (prefers-color-scheme: dark) {
+  .progress-text {
+    color: #e0f2fe;
+  }
+}
+
 .status-message {
   font-size: 13px;
   color: #64748b;
   margin-top: 8px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .status-message {
+    color: #94a3b8;
+  }
+}
+
 .count-display {
   font-size: 14px;
   color: #64748b;
   margin-top: 8px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .count-display {
+    color: #94a3b8;
+  }
+}
+
 .count-display strong {
   color: #ea580c;
   font-size: 18px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .count-display strong {
+    color: #fb923c;
+  }
+}
+
 .error-message {
   font-size: 13px;
   color: #dc2626;
···
   border-left: 3px solid #dc2626;
 }
 
+@media (prefers-color-scheme: dark) {
+  .error-message {
+    color: #fca5a5;
+    background: #450a0a;
+    border-left-color: #ef4444;
+  }
+}
+
 footer {
   padding: 16px;
   text-align: center;
···
   background: white;
 }
 
+@media (prefers-color-scheme: dark) {
+  footer {
+    border-top-color: #1e293b;
+    background: #0f172a;
+  }
+}
+
 footer a {
   color: #ea580c;
   text-decoration: none;
   font-size: 13px;
   font-weight: 500;
+}
+
+@media (prefers-color-scheme: dark) {
+  footer a {
+    color: #fb923c;
+  }
 }
 
 footer a:hover {