Add mobile-first responsiveness constraint to specs and CSS styling

frontend/src/app/app.css

@@ -330,3 +330,49 @@ h1 {
   font-size: 0.75rem;
   margin: 0;
 }
+
+@media (max-width: 480px) {
+  .app-container {
+    padding: 1rem;
+  }
+
+  .main-card {
+    padding: 2rem 1.5rem 1.5rem;
+    border-radius: 20px;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  .logo-wrapper {
+    width: 56px;
+    height: 56px;
+    margin-bottom: 1.25rem;
+  }
+
+  .logo-icon {
+    width: 28px;
+    height: 28px;
+  }
+
+  .card-header {
+    margin-bottom: 2rem;
+  }
+
+  .btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9rem;
+  }
+
+  .user-profile {
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .api-demo-section {
+    padding: 1.25rem;
+    margin-bottom: 1.5rem;
+  }
+}
+