Update src/static/css/settings.css

src/static/css/settings.css

@@ -247,4 +247,82 @@
     background: rgba(255, 255, 255, 0.03);
     border-radius: 8px;
     border: 1px dashed var(--border, #2b3139);
+}
+
+/* --- Connection cards (status pill + compact actions) --- */
+.card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 6px;
+}
+.card-head h2 {
+    margin: 0;
+}
+.status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--border, #2b3139);
+    color: #9ca3af;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+.status-pill::before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #6b7280;
+}
+.status-pill.is-on {
+    color: var(--accent-green, #0ecb81);
+    border-color: rgba(14, 203, 129, 0.35);
+    background: rgba(14, 203, 129, 0.08);
+}
+.status-pill.is-on::before {
+    background: var(--accent-green, #0ecb81);
+}
+.conn-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+.conn-meta {
+    flex: 1;
+    min-width: 0;
+    font-size: 0.85rem;
+    color: #9ca3af;
+    line-height: 1.5;
+}
+.conn-meta strong {
+    color: var(--text-main, #eaecef);
+    overflow-wrap: anywhere;
+}
+.btn-sm {
+    width: auto;
+    padding: 9px 16px;
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+.btn-sm-red {
+    background: transparent;
+    border: 1px solid var(--accent-red, #f6465d);
+    color: var(--accent-red, #f6465d);
+}
+.btn-sm-red:hover {
+    background: rgba(246, 70, 93, 0.12);
 }