feat: Added 480px media query with 15 rule overrides for stats bar, fea…

- "frontend/src/App.css"

GSD-Task: S04/T02

frontend/src/App.css

@@ -3434,6 +3434,109 @@ a.app-footer__repo:hover {
   }
 }
 
+/* ── Mobile narrow (≤480px) — Creator detail page ─────────────────────── */
+
+@media (max-width: 480px) {
+  /* Stats bar: smaller text, tighter spacing */
+  .creator-detail__stats-bar {
+    gap: 0.25rem 0.375rem;
+    font-size: 0.8125rem;
+  }
+
+  .creator-detail__stats {
+    font-size: 0.75rem;
+  }
+
+  .creator-detail__stats-sep {
+    margin: 0;
+  }
+
+  /* Topic pills: ensure wrap, smaller badges */
+  .creator-detail__topic-pills {
+    gap: 0.25rem;
+  }
+
+  .creator-detail__topic-pills .badge {
+    font-size: 0.6875rem;
+    padding: 0.125rem 0.375rem;
+  }
+
+  /* Hero: tighter on very narrow screens */
+  .creator-hero__name {
+    font-size: 1.25rem;
+  }
+
+  .creator-hero__bio {
+    font-size: 0.875rem;
+  }
+
+  .creator-hero__socials {
+    gap: 0.375rem;
+  }
+
+  .creator-hero__genres {
+    gap: 0.25rem;
+  }
+
+  /* Featured card: reduce padding, contain text */
+  .creator-featured {
+    padding: 0.875rem 1rem;
+  }
+
+  .creator-featured__title {
+    font-size: 1.0625rem;
+  }
+
+  .creator-featured__summary {
+    font-size: 0.8125rem;
+  }
+
+  /* Techniques header: wrap title + sort */
+  .creator-techniques__header {
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .creator-techniques__title {
+    font-size: 1.0625rem;
+  }
+
+  /* Technique cards: smaller padding */
+  .creator-technique-card {
+    padding: 0.625rem 0.75rem;
+  }
+
+  .creator-technique-card__title {
+    font-size: 0.875rem;
+  }
+
+  /* Edit form: full width, stacked link rows */
+  .creator-edit-form {
+    max-width: 100%;
+  }
+
+  .creator-edit-form__link-row {
+    flex-wrap: wrap;
+  }
+
+  .creator-edit-form__platform-select {
+    flex: 1 1 100%;
+  }
+
+  .creator-edit-form__url-input {
+    flex: 1 1 100%;
+  }
+
+  .creator-edit-form__actions {
+    flex-wrap: wrap;
+  }
+
+  .creator-edit-form__actions .btn {
+    flex: 1;
+    text-align: center;
+  }
+}
+
 /* ── Report Issue Modal ─────────────────────────────────────────────────── */
 
 .modal-overlay {