feat(ui): responsive layout for mobile and wide screens

- Add explicit viewport meta (device-width) for proper mobile scaling.
- Widen the main container (720 -> 960, 1120 on >=1280px) with fluid
  clamp() padding so wide screens are used better.
- Wrap the top nav and allow it to reflow on narrow screens.
- Collapse the key/value grid to a single column and enlarge touch
  targets on small screens.
- Keep single-form pages (login/signup/activate) in a readable narrow
  column instead of stretching full width.

app/globals.css

@@ -40,9 +40,22 @@ a:hover {
 }
 
 .container {
-  max-width: 720px;
+  width: 100%;
+  max-width: 960px;
   margin: 0 auto;
-  padding: 2rem 1rem;
+  padding: 2rem clamp(1rem, 4vw, 2.5rem);
+}
+
+/* Narrow column for single-form pages (login/signup/activate) that read
+   better when not stretched across a wide screen. */
+.container.narrow {
+  max-width: 480px;
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1120px;
+  }
 }
 
 .stack {
@@ -55,7 +68,9 @@ a:hover {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem;
+  gap: 0.75rem 1rem;
+  flex-wrap: wrap;
+  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
   border-bottom: 1px solid var(--border);
 }
 
@@ -67,6 +82,14 @@ a:hover {
   margin: 1rem 0;
 }
 
+/* Single-form cards (login / signup / activate) stay readable instead of
+   stretching across a wide screen. */
+.form-card {
+  max-width: 460px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 h1,
 h2,
 h3 {
@@ -170,6 +193,36 @@ button.secondary,
   display: flex;
   gap: 0.5rem;
   align-items: center;
+  flex-wrap: wrap;
+}
+
+/* ----------------------------------------------------------------------- */
+/* Mobile / small-screen refinements                                        */
+/* ----------------------------------------------------------------------- */
+@media (max-width: 520px) {
+  .kv {
+    grid-template-columns: 1fr;
+    gap: 0.15rem 0;
+  }
+  .kv .k {
+    margin-top: 0.5rem;
+  }
+  .card {
+    padding: 1.15rem;
+  }
+  /* Larger touch targets on touch devices. */
+  button,
+  .btn,
+  input[type='text'],
+  input[type='email'],
+  input[type='password'],
+  select {
+    min-height: 44px;
+  }
+  .nav button,
+  .nav .btn {
+    padding: 0.5rem 0.8rem;
+  }
 }
 
 /* ----------------------------------------------------------------------- */