feat: sync extension to DESIGN.md — amber accent, zinc neutrals, grain texture

Import design system from gstack-website. Update all extension colors:
green (#4ade80) → amber (#F59E0B/#FBBF24), zinc gray neutrals, grain
texture overlay. Regenerate icons as amber "G" monogram on dark background.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

extension/content.css

@@ -1,7 +1,9 @@
-/* gstack browse — ref overlay + status pill styles */
+/* gstack browse — ref overlay + status pill styles
+ * Design system: DESIGN.md (amber accent, zinc neutrals)
+ */
 
 #gstack-ref-overlays {
-  font-family: 'SF Mono', 'Fira Code', monospace !important;
+  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace !important;
 }
 
 /* Connection status pill — bottom-right corner */
@@ -14,13 +16,13 @@
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
-  background: rgba(10, 10, 10, 0.85);
+  background: rgba(12, 12, 12, 0.85);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  border: 1px solid rgba(74, 222, 128, 0.3);
-  border-radius: 20px;
+  border: 1px solid rgba(245, 158, 11, 0.25);
+  border-radius: 9999px;
   color: #e0e0e0;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.02em;
@@ -38,8 +40,8 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #4ade80;
-  box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
+  background: #F59E0B;
+  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
   flex-shrink: 0;
 }
 
@@ -56,7 +58,7 @@
   font-size: 10px;
   font-weight: 700;
   padding: 1px 4px;
-  border-radius: 3px;
+  border-radius: 4px;
   line-height: 14px;
   pointer-events: none;
   z-index: 2147483647;
@@ -69,9 +71,9 @@
   right: 12px;
   width: 220px;
   max-height: 300px;
-  background: rgba(10, 10, 10, 0.95);
-  border: 1px solid #333;
-  border-radius: 6px;
+  background: rgba(12, 12, 12, 0.95);
+  border: 1px solid #262626;
+  border-radius: 8px;
   overflow: hidden;
   pointer-events: auto;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
@@ -80,9 +82,9 @@
 
 .gstack-ref-panel-header {
   padding: 6px 10px;
-  background: #0f0f0f;
-  border-bottom: 1px solid #222;
-  color: #fff;
+  background: #141414;
+  border-bottom: 1px solid #262626;
+  color: #FAFAFA;
   font-weight: 600;
   font-size: 11px;
 }
@@ -94,20 +96,20 @@
 
 .gstack-ref-panel-row {
   padding: 3px 10px;
-  border-bottom: 1px solid #1a1a1a;
+  border-bottom: 1px solid #1f1f1f;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .gstack-ref-panel-id {
-  color: #4ade80;
+  color: #FBBF24;
   font-weight: 600;
   margin-right: 4px;
 }
 
 .gstack-ref-panel-role {
-  color: #888;
+  color: #A1A1AA;
   margin-right: 4px;
 }
 
@@ -117,6 +119,6 @@
 
 .gstack-ref-panel-more {
   padding: 4px 10px;
-  color: #666;
+  color: #52525B;
   font-style: italic;
 }

extension/popup.html

@@ -6,7 +6,7 @@
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
       width: 240px;
-      background: #0a0a0a;
+      background: #0C0C0C;
       color: #e0e0e0;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
       font-size: 13px;
@@ -15,29 +15,29 @@
     h1 {
       font-size: 16px;
       font-weight: 700;
-      color: #fff;
+      color: #FAFAFA;
       margin-bottom: 16px;
       letter-spacing: -0.3px;
     }
     label {
       display: block;
       font-size: 12px;
-      color: #888;
+      color: #A1A1AA;
       margin-bottom: 4px;
     }
     input {
       width: 100%;
       padding: 8px;
-      background: #1a1a1a;
-      border: 1px solid #333;
-      border-radius: 4px;
-      color: #fff;
-      font-family: 'SF Mono', 'Fira Code', monospace;
+      background: #141414;
+      border: 1px solid #262626;
+      border-radius: 8px;
+      color: #FAFAFA;
+      font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
       font-size: 13px;
       outline: none;
-      transition: border-color 0.15s;
+      transition: border-color 150ms;
     }
-    input:focus { border-color: #4ade80; }
+    input:focus { border-color: #F59E0B; }
     .status {
       margin: 12px 0;
       display: flex;
@@ -48,35 +48,35 @@
       width: 8px;
       height: 8px;
       border-radius: 50%;
-      background: #555;
+      background: #3f3f46;
       flex-shrink: 0;
     }
-    .dot.connected { background: #4ade80; }
-    .dot.error { background: #f87171; }
+    .dot.connected { background: #22C55E; }
+    .dot.error { background: #EF4444; }
     .dot.reconnecting {
-      background: #fbbf24;
-      animation: pulse 1.5s ease-in-out infinite;
+      background: #F59E0B;
+      animation: pulse 2s ease-in-out infinite;
     }
     @keyframes pulse {
       0%, 100% { opacity: 0.4; }
       50% { opacity: 1; }
     }
-    .status-text { color: #888; font-size: 12px; }
-    .status-text.connected { color: #4ade80; }
-    .details { color: #666; font-size: 11px; margin-top: 2px; }
+    .status-text { color: #A1A1AA; font-size: 12px; }
+    .status-text.connected { color: #22C55E; }
+    .details { color: #52525B; font-size: 11px; margin-top: 2px; }
     button {
       width: 100%;
       margin-top: 12px;
       padding: 8px;
-      background: #0a2a14;
-      border: 1px solid #4ade80;
-      border-radius: 4px;
-      color: #4ade80;
+      background: rgba(245, 158, 11, 0.1);
+      border: 1px solid #F59E0B;
+      border-radius: 8px;
+      color: #FBBF24;
       font-size: 13px;
       cursor: pointer;
-      transition: all 0.15s;
+      transition: all 150ms;
     }
-    button:hover { background: #0f3a1c; }
+    button:hover { background: rgba(245, 158, 11, 0.2); }
   </style>
 </head>
 <body>