Make entire UI mobile-friendly with responsive breakpoints

Add media queries at 480px/768px across all components: single-column
dashboard cards on phones, progressive table column hiding, smaller
typography, reduced padding, full-width toggle buttons, and compact
header. Desktop layout unchanged.

ui/src/app.css

@@ -98,6 +98,34 @@ code,
   grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
 }
 
+/* ── Mobile breakpoints ── */
+@media (max-width: 480px) {
+  :root {
+    font-size: 13px;
+  }
+  .card {
+    padding: 1rem 1rem;
+  }
+  .grid-4 {
+    grid-template-columns: 1fr 1fr;
+  }
+  .grid-2 {
+    grid-template-columns: 1fr;
+  }
+  .stat-value {
+    font-size: 1.4rem;
+  }
+  th, td {
+    padding: 0.4rem 0.5rem;
+    font-size: 0.9em;
+  }
+}
+@media (max-width: 360px) {
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+
 .stat-label {
   color: var(--fg-dim);
   font-size: 0.82em;