Added a logo

webextension/popup.css

@@ -1,13 +1,14 @@
 body {
   width: 360px;
   margin: 0;
-  font-family: sans-serif;
-  background: #f5f7fb;
-  color: #1f2937;
+  font-family: 'Avenir Next', sans-serif;
+  background: #1e1e2e;
+  color: #cdd6f4;
 }
 
 .popup-shell {
   padding: 16px;
+  background: linear-gradient(145deg, #313244, #1e1e2e 42%);
 }
 
 header h1 {
@@ -19,7 +20,7 @@ header h1 {
   display: block;
   width: 150px;
   height: 42px;
-  margin-bottom: 8px;
+  margin-bottom: 14px;
   object-fit: contain;
   object-position: left center;
 }
@@ -29,6 +30,7 @@ label {
   margin-bottom: 12px;
   font-size: 0.85rem;
   font-weight: 600;
+  color: #a6adc8;
 }
 
 input,
@@ -42,10 +44,11 @@ button {
 input,
 textarea {
   margin-top: 6px;
-  border: 1px solid #cbd5e1;
+  border: 1px solid #585b70;
   border-radius: 8px;
   padding: 8px 10px;
-  background: white;
+  background: #313244;
+  color: #cdd6f4;
 }
 
 textarea {
@@ -57,12 +60,13 @@ fieldset {
   gap: 8px;
   margin: 0;
   padding: 10px;
-  border: 1px solid #cbd5e1;
+  border: 1px solid #585b70;
   border-radius: 8px;
 }
 
 legend {
   padding: 0 4px;
+  color: #b4befe;
   font-weight: 600;
 }
 
@@ -85,21 +89,24 @@ legend {
 }
 
 button {
-  border: none;
+  border: 1px solid #cba6f7;
   border-radius: 8px;
   padding: 10px 12px;
   cursor: pointer;
   font-weight: 600;
+  background: #cba6f7;
+  color: #11111b;
 }
 
 #submit-link {
-  background: #2563eb;
-  color: white;
+  background: #cba6f7;
+  color: #11111b;
 }
 
 .secondary {
-  background: #e2e8f0;
-  color: #0f172a;
+  background: #45475a;
+  border-color: #585b70;
+  color: #cdd6f4;
 }
 
 .status {
@@ -110,13 +117,13 @@ button {
 }
 
 .status.success {
-  background: #dcfce7;
-  color: #166534;
+  background: #1e3a38;
+  color: #94e2d5;
 }
 
 .status.error {
-  background: #fee2e2;
-  color: #991b1b;
+  background: #45243a;
+  color: #f38ba8;
 }
 
 .hidden {