Mobile: modals, forms, tap targets, toast (Commit 3/4)

- Buttons: min-height 44px (36px for .btn-sm, 40px for .btn-icon) on mobile
- Inputs/selects/textarea: font-size 16px (prevents iOS focus zoom), min-height 44px
- Pairing input: scaled letter-spacing down so 6 digits fit at 375px width
- Modals at 95vw: tighter header/body/footer padding so content breathes
- Toast container: bar-style full-width (left/right:12px) instead of
  fixed-right 280px that clipped below 400px viewports

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/css/main.css

@@ -940,6 +940,40 @@ body {
   .schedule-controls > select { flex: 1 1 100%; }
   .schedule-controls > button,
   .schedule-controls > span { flex: 0 1 auto; }
+
+  /* Tap targets: minimum 44px height for interactive elements */
+  .btn { min-height: 44px; padding: 10px 16px; }
+  .btn-sm { min-height: 36px; padding: 8px 12px; }
+  .btn-icon { min-width: 40px; min-height: 40px; }
+
+  /* Form inputs: 16px font to prevent iOS focus zoom; 44px tap target */
+  .input,
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="url"],
+  input[type="search"],
+  input[type="tel"],
+  select,
+  textarea {
+    font-size: 16px;
+    min-height: 44px;
+  }
+  .pairing-input { font-size: 24px; letter-spacing: 6px; }
+
+  /* Modals: adjust padding at 95vw so content doesn't touch edges */
+  .modal-header,
+  .modal-footer { padding: 14px 16px; }
+  .modal-body { padding: 16px; }
+
+  /* Toast container: full-width bar instead of 280px fixed to right */
+  .toast-container {
+    left: 12px;
+    right: 12px;
+    bottom: 12px;
+  }
+  .toast { min-width: 0; width: 100%; }
 }
 
 @media (max-width: 480px) {