feat: categories, runtime nav, and UX updates

app/static/style.css

@@ -242,10 +242,10 @@ button {
   flex: 0 0 40px;
 }
 .service-icon-preview {
-  width: 80px;
-  height: 80px;
+  width: 96px;
+  height: 96px;
   border-radius: 10px;
-  object-fit: cover;
+  object-fit: contain;
   border: 1px solid #d8e3ed;
   background: #edf3f9;
 }
@@ -286,11 +286,43 @@ button {
   .split {
     grid-template-columns: 1fr;
   }
+  .service-grid {
+    grid-template-columns: 1fr;
+  }
+  .tile-icon-box,
+  .tile-icon {
+    width: min(100%, 240px);
+    height: min(100%, 240px);
+  }
   .brand-logo-fullscreen {
     width: min(42vw, 260px);
     max-height: 20vh;
   }
 }
+.service-grid {
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+}
+.category-strip {
+  margin-top: 0.9rem;
+  display: flex;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+}
+.category-chip {
+  text-decoration: none;
+  border: 1px solid #c8d9e8;
+  color: #20425f;
+  padding: 0.34rem 0.7rem;
+  border-radius: 999px;
+  background: #eef5fb;
+  font-size: 0.86rem;
+  font-weight: 600;
+}
+.category-chip.active {
+  background: #0f5b94;
+  border-color: #0f5b94;
+  color: #fff;
+}
 .tile {
   display: block;
   text-decoration: none;
@@ -307,14 +339,22 @@ button {
   border-color: #bdd3e6;
   box-shadow: 0 14px 26px rgba(15, 64, 103, 0.12);
 }
-.tile-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 10px;
-  object-fit: cover;
+.tile-icon-box {
+  width: min(100%, 336px);
+  aspect-ratio: 1 / 1;
+  border-radius: 16px;
   border: 1px solid #d8e3ed;
   background: #edf3f9;
-  margin-bottom: 0.5rem;
+  display: grid;
+  place-items: center;
+  margin-bottom: 0.8rem;
+}
+.tile-icon {
+  width: min(100%, 336px);
+  height: min(100%, 336px);
+  border-radius: 14px;
+  object-fit: contain;
+  background: #edf3f9;
 }
 .tile h3 {
   margin: 0.1rem 0 0.25rem;
@@ -328,3 +368,38 @@ button {
   margin-top: 0.45rem;
   color: #4b6178;
 }
+.service-categories {
+  margin-top: 0.7rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.service-cat-badge {
+  border-radius: 999px;
+  border: 1px solid #c7d9e8;
+  background: #f0f6fc;
+  color: #234662;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.76rem;
+  font-weight: 600;
+}
+.compact-grid {
+  margin-bottom: 0.7rem;
+}
+.category-item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+}
+
+.auth-error {
+  background: #ffe8e8;
+  border: 1px solid #f2b7b7;
+  color: #7a1f1f;
+  border-radius: 10px;
+  padding: 0.7rem 0.8rem;
+  max-width: min(520px, 92vw);
+  margin: 0 auto 0.3rem;
+  font-weight: 600;
+}