Mobile responsive layout — bottom nav + table scroll

- Hide sidebar on mobile (≤640px), show fixed bottom nav bar instead
- Cards get overflow-x: auto so wide tables scroll horizontally
- Summary grid forces 2-column on mobile
- Reduce content padding to 12px, clear 68px for bottom nav
- Summary card values shrink to 18px on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/index.css

@@ -390,3 +390,66 @@ input[type="text"]:focus {
   color: var(--text-muted);
   font-size: 14px;
 }
+
+/* ── Bottom nav (mobile only) ───────────────────────────────────── */
+.bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  background: var(--navy);
+  border-top: 1px solid rgba(255,255,255,0.1);
+  z-index: 200;
+  height: 58px;
+  justify-content: space-around;
+  align-items: stretch;
+}
+
+.bottom-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  color: rgba(255,255,255,0.45);
+  font-size: 10px;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  padding: 4px 2px;
+  transition: color 0.15s;
+  user-select: none;
+}
+
+.bottom-nav-item.active { color: var(--gold); }
+.bottom-nav-item:hover  { color: rgba(255,255,255,0.85); }
+
+/* ── Mobile breakpoint ──────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .sidebar     { display: none; }
+  .bottom-nav  { display: flex; }
+
+  .content {
+    padding: 12px;
+    padding-bottom: 68px; /* clear bottom nav */
+  }
+
+  .card {
+    padding: 12px;
+    overflow-x: auto;
+  }
+
+  .summary-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+
+  .summary-card .value { font-size: 18px; }
+
+  .page-title  { font-size: 17px; }
+
+  .period-label {
+    font-size: 12px;
+    min-width: 110px;
+  }
+}