Mobile layout: responsive breakpoints for header, stats grid, model rows, key tokens, new-key form

app/main.py

@@ -376,6 +376,31 @@ PAGE_HTML = """<!DOCTYPE html>
   }
   footer a { color: var(--green-deep); text-decoration: none; margin: 0 8px; }
   footer a:hover { text-decoration: underline; }
+
+  /* ---------- Mobile (≤600px) ---------- */
+  @media (max-width: 600px) {
+    .wrap { padding: 20px 14px 16px; }
+    header { flex-direction: column; gap: 8px; }
+    .header-actions { width: 100%; justify-content: flex-start; }
+    .card { padding: 18px 16px; border-radius: 12px; margin-top: 16px; }
+    .balance .big { font-size: 28px; }
+    .stats { gap: 14px 22px; }
+    .stat { min-width: 40%; }        /* two columns of stats instead of cramped one-row wrap */
+    .model-row { flex-wrap: wrap; }
+    .model-spend { text-align: left; width: 100%; padding-left: 2px; }
+    .key-row { flex-wrap: wrap; }
+    .key-token { max-width: 100%; }
+    .new-key { flex-direction: column; }
+    .new-key button { width: 100%; }
+    .key-reveal-value { font-size: 11px; }
+    footer { padding: 16px 14px; }
+    footer a { display: inline-block; margin: 4px 8px; }
+  }
+  /* Very narrow phones: keep key/token text from overflowing */
+  @media (max-width: 380px) {
+    .balance .big { font-size: 24px; }
+    .stats { gap: 12px 16px; }
+  }
 </style>
 </head>
 <body>