updated: app/data-service.js, app/styles.css, app/ui-settings.js, index.html

app/styles.css

@@ -567,6 +567,46 @@
       font-size: 12px;
       line-height: 1.4;
     }
+    .settings-connection-summary {
+      margin-top: 16px;
+      padding: 14px 16px;
+      border-radius: 18px;
+      border: 1px solid rgba(63, 63, 70, 0.9);
+      background: rgba(9, 9, 11, 0.68);
+      display: grid;
+      gap: 10px;
+    }
+    .settings-connection-summary[data-tone="success"] {
+      border-color: rgba(34, 197, 94, 0.45);
+      background: rgba(20, 83, 45, 0.16);
+    }
+    .settings-connection-summary[data-tone="warning"] {
+      border-color: rgba(245, 158, 11, 0.45);
+      background: rgba(120, 53, 15, 0.16);
+    }
+    .settings-connection-summary[data-tone="error"] {
+      border-color: rgba(239, 68, 68, 0.45);
+      background: rgba(127, 29, 29, 0.18);
+    }
+    .settings-connection-summary-row {
+      display: grid;
+      grid-template-columns: 84px minmax(0, 1fr);
+      gap: 12px;
+      align-items: start;
+    }
+    .settings-connection-summary-label {
+      color: #94a3b8;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .settings-connection-summary-value {
+      color: #f8fafc;
+      font-size: 13px;
+      line-height: 1.5;
+      word-break: break-word;
+    }
     .settings-cache-progress-wrap {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;