frontend: improve mobile responsiveness

frontend/src/components/ThemeSwitcher.astro

@@ -53,6 +53,15 @@
     font-size: 0.9rem;
     cursor: pointer;
     min-width: 200px;
+    width: 100%;
+    max-width: 320px;
+  }
+
+  @media (max-width: 480px) {
+    .theme-select {
+      min-width: 0;
+      max-width: 100%;
+    }
   }
 
   .theme-select:hover {

frontend/src/components/ui/DesignSystemStyles.astro

@@ -1016,4 +1016,20 @@
       justify-content: flex-start;
     }
   }
+
+  @media (max-width: 420px) {
+    .ui-btn {
+      white-space: normal;
+      text-align: center;
+    }
+
+    .ui-btn-lg {
+      padding: 0.8rem 1.25rem;
+    }
+
+    .ui-btn-xl {
+      padding: 0.9rem 1.25rem;
+      font-size: 1rem;
+    }
+  }
 </style>

frontend/src/pages/demo.astro

@@ -531,6 +531,7 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
   .card-stats {
     display: flex;
     gap: 1rem;
+    flex-wrap: wrap;
     padding-top: 1rem;
     border-top: 1px solid var(--color-border);
     font-size: 0.8125rem;
@@ -708,6 +709,14 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     align-items: flex-start;
   }
 
+  @media (max-width: 480px) {
+    .journey-step {
+      flex-direction: column;
+      gap: 0.75rem;
+      align-items: stretch;
+    }
+  }
+
   .step-number {
     width: 36px;
     height: 36px;

frontend/src/pages/settings.astro

@@ -181,6 +181,8 @@ import { API_BASE as apiBase } from '../lib/api';
   .settings-page {
     padding: 2rem 0;
     max-width: 500px;
+    width: 100%;
+    margin: 0 auto;
     --ui-form-group-mb: 1.25rem;
   }
 
@@ -189,6 +191,17 @@ import { API_BASE as apiBase } from '../lib/api';
     margin-bottom: 2rem;
   }
 
+  @media (max-width: 640px) {
+    .settings-page {
+      padding: 1.5rem 0;
+    }
+
+    h1 {
+      font-size: 1.75rem;
+      margin-bottom: 1.5rem;
+    }
+  }
+
   .settings-form {
     display: flex;
     flex-direction: column;