feat: add paired Chrome bridge authentication

chrome-extension/popup.css

@@ -2,120 +2,131 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
-  background: #1E1E1E;
-  color: #E0E0E0;
-  font-size: 14px;
-  min-width: 300px;
+  min-width: 320px;
+  background: #1e1e1e;
+  color: #e0e0e0;
+  font: 14px/1.4 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
 }
 
-.popup-container {
-  padding: 16px;
-}
+.popup-container { padding: 16px; }
 
 h1 {
+  margin: 0 0 12px;
+  color: #0e7afe;
   font-size: 16px;
   font-weight: 600;
-  color: #0E7AFE;
-  margin: 0 0 12px 0;
+  letter-spacing: 0.5px;
   text-align: center;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
 
-.tab-info {
-  background: #2D2D30;
-  border: 1px solid #3C3C3C;
+.tab-info,
+.pairing-info {
+  margin-bottom: 10px;
+  padding: 9px 11px;
+  border: 1px solid #3c3c3c;
   border-radius: 4px;
-  padding: 10px 12px;
-  margin-bottom: 12px;
+  background: #2d2d30;
+  color: #aaa;
   font-size: 13px;
-  color: #999999;
-  word-break: break-all;
+  overflow-wrap: anywhere;
 }
 
-.tab-info.detected {
-  color: #4CAF50;
-  border-color: #4CAF50;
+.tab-info.detected,
+.pairing-info.paired {
+  border-color: #4caf50;
+  color: #7bd67e;
 }
 
-.tab-info.not-detected {
-  color: #F44336;
-  border-color: #F44336;
+.tab-info.not-detected,
+.pairing-info.unpaired {
+  border-color: #f0a33a;
+  color: #ffc36d;
 }
 
-.action-buttons {
-  display: grid;
-  gap: 8px;
-}
+.action-buttons { display: grid; gap: 8px; }
 
 .primary-btn,
-.secondary-btn {
-  display: block;
+.secondary-btn,
+.link-btn {
   width: 100%;
   padding: 10px 16px;
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: bold;
-  color: white;
-  background: #0E7AFE;
-  border: none;
   border-radius: 4px;
   cursor: pointer;
-  transition: background 0.2s ease;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 700;
 }
 
 .primary-btn {
-  background: #0E7AFE;
+  border: 0;
+  background: #0e7afe;
+  color: #fff;
 }
 
 .secondary-btn {
-  background: #2D2D30;
-  border: 1px solid #0E7AFE;
-  color: #E0E0E0;
+  border: 1px solid #0e7afe;
+  background: #2d2d30;
+  color: #e0e0e0;
 }
 
-.primary-btn:hover:not(:disabled) {
-  background: #0A5FD9;
+.link-btn {
+  margin: -2px 0 10px;
+  padding: 5px;
+  border: 0;
+  background: transparent;
+  color: #75afff;
+  text-decoration: underline;
 }
 
-.secondary-btn:hover:not(:disabled) {
-  background: #0E7AFE;
-}
+.primary-btn:hover:not(:disabled) { background: #0a5fd9; }
+.secondary-btn:hover:not(:disabled) { background: #0e7afe; }
 
 .primary-btn:disabled,
 .secondary-btn:disabled {
-  opacity: 0.5;
   cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.copy-warning {
+  margin: 10px 0 0;
+  padding: 8px 10px;
+  border-left: 3px solid #f0a33a;
+  background: rgba(240, 163, 58, 0.08);
+  color: #d7c29f;
+  font-size: 12px;
 }
 
 .status-msg {
+  display: none;
   margin-top: 10px;
   padding: 8px 12px;
+  border: 1px solid transparent;
   border-radius: 4px;
   font-size: 13px;
-  font-weight: bold;
-  display: none;
-  border: 1px solid transparent;
+  font-weight: 700;
 }
 
+.status-msg.success,
+.status-msg.error,
+.status-msg.info { display: block; }
+
 .status-msg.success {
-  display: block;
+  border-color: #4caf50;
   background: rgba(76, 175, 80, 0.1);
-  color: #4CAF50;
-  border-color: #4CAF50;
+  color: #7bd67e;
 }
 
 .status-msg.error {
-  display: block;
+  border-color: #f44336;
   background: rgba(244, 67, 54, 0.1);
-  color: #F44336;
-  border-color: #F44336;
+  color: #ff7b72;
 }
 
 .status-msg.info {
-  display: block;
+  border-color: #0e7afe;
   background: rgba(14, 122, 254, 0.1);
-  color: #0E7AFE;
-  border-color: #0E7AFE;
+  color: #75afff;
 }
+
+[hidden] { display: none !important; }