update browser extension and app

browser-extension/popup/popup.css

@@ -20,12 +20,79 @@ html, body {
 .header {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   padding: 12px 14px;
   background: #191b22;
   border-bottom: 1px solid #282a36;
 }
 
+.icon-btn {
+  background: transparent;
+  border: none;
+  font-size: 15px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background 0.15s ease;
+}
+
+.icon-btn:hover {
+  background: #282c3f;
+}
+
+.api-config-card {
+  background: #191b26;
+  border: 1px solid #0066ff44;
+  border-radius: 8px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.api-config-card.hidden {
+  display: none;
+}
+
+.config-header {
+  font-size: 11px;
+  font-weight: 700;
+  color: #4da6ff;
+  margin-bottom: 2px;
+}
+
+.api-config-card .field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.api-config-card label {
+  font-size: 10px;
+  color: #a0a6b8;
+}
+
+.api-config-card input {
+  background: #12131a;
+  border: 1px solid #282c3f;
+  color: #ffffff;
+  padding: 6px 8px;
+  border-radius: 5px;
+  font-size: 11px;
+}
+
+.config-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.popup-toast {
+  font-size: 10px;
+  margin-left: 4px;
+}
+
 .brand {
   display: flex;
   align-items: center;