Add Mac client mode and simplify local proxy UI

src/web/styles.css

@@ -116,6 +116,9 @@ code, .mono {
   grid-template-columns: var(--sidebar-w) 1fr var(--status-w);
   min-height: 0;
 }
+.app-body.client-mode {
+  grid-template-columns: 1fr;
+}
 
 .app-main {
   padding: var(--space-6);
@@ -129,6 +132,7 @@ code, .mono {
 }
 @media (max-width: 768px) {
   .app-body { grid-template-columns: 1fr; }
+  .app-body.client-mode { grid-template-columns: 1fr; }
   .sidebar { display: none; }
   .app-main { padding: var(--space-4); }
 }
@@ -821,6 +825,124 @@ code, .mono {
 }
 .subscription-input .input { flex: 1; }
 
+/* ============ Client overview ============ */
+
+.client-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr);
+  gap: var(--space-4);
+  align-items: stretch;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-card);
+}
+.client-mode .app-main {
+  max-width: 1120px;
+  width: 100%;
+  margin: 0 auto;
+}
+.client-hero-main {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+.client-hero-main h1 {
+  font-size: 28px;
+  letter-spacing: 0;
+}
+.client-hero-main p {
+  color: var(--muted);
+}
+.client-hero-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: var(--space-2);
+}
+.client-hero-meta {
+  display: grid;
+  gap: var(--space-3);
+  align-content: center;
+}
+.client-hero-meta > div {
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-input);
+  background: var(--surface-2);
+}
+.client-hero-meta strong {
+  display: block;
+  margin-top: 4px;
+  overflow-wrap: anywhere;
+}
+.copy-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.client-setup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.copy-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-input);
+}
+.copy-field .text-mono {
+  margin-top: 4px;
+  overflow-wrap: anywhere;
+}
+.client-flow {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
+  gap: var(--space-3);
+  align-items: stretch;
+}
+.flow-node {
+  min-width: 0;
+  padding: var(--space-3);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-input);
+}
+.flow-node strong {
+  display: block;
+  margin-top: 4px;
+  overflow-wrap: anywhere;
+}
+.flow-arrow {
+  display: flex;
+  align-items: center;
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  .client-hero {
+    grid-template-columns: 1fr;
+  }
+  .client-flow {
+    grid-template-columns: 1fr;
+  }
+  .flow-arrow {
+    justify-content: center;
+    transform: rotate(90deg);
+  }
+  .copy-field {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
 /* For drawer rule editor */
 .field-row {
   display: grid;