Mode switching (#10) (#26)

src/css/styles.css

@@ -781,3 +781,72 @@ body {
 ::-webkit-scrollbar-track { background: var(--bg-secondary); }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
+
+/* ── Connection Status ──────────────────── */
+.connection-status {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.3rem 0.7rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    user-select: none;
+}
+.connection-status:hover { opacity: 0.8; }
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.connection-status.managed .status-dot { background: #22c55e; }
+.connection-status.managed { color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
+
+.connection-status.available .status-dot { background: #f59e0b; }
+.connection-status.available { color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
+
+.connection-status.offline .status-dot { background: var(--text-secondary); }
+.connection-status.offline { color: var(--text-secondary); border: 1px solid var(--border); }
+
+/* ── Auth Modal ─────────────────────────── */
+.auth-modal {
+    max-width: 400px;
+}
+
+.auth-tabs {
+    display: flex;
+    gap: 0;
+    margin-bottom: 1.25rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.auth-tab {
+    flex: 1;
+    padding: 0.6rem;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.auth-tab:hover { color: var(--text-primary); }
+.auth-tab.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.auth-error {
+    color: #ef4444;
+    font-size: 0.85rem;
+    min-height: 1.2rem;
+    margin-top: 0.5rem;
+}