feat: Replaced compact creator header with full hero section: 96px avat…

- "frontend/src/pages/CreatorDetail.tsx"
- "frontend/src/App.css"

GSD-Task: S01/T02

frontend/src/App.css

@@ -2659,32 +2659,51 @@ a.app-footer__repo:hover {
   max-width: 64rem;
 }
 
-.creator-detail__header {
+/* Creator Hero */
+.creator-hero {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.5rem;
   margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--color-border);
 }
 
-.creator-detail__name {
+.creator-hero__info {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
-  font-size: 1.75rem;
+  min-width: 0;
+}
+
+.creator-hero__name {
+  font-size: 2rem;
   font-weight: 800;
   letter-spacing: -0.02em;
-  margin-bottom: 0.5rem;
   line-height: 1.2;
+  margin: 0;
 }
 
-.creator-detail__meta {
+.creator-hero__bio {
+  color: var(--color-text-secondary);
+  font-size: 1rem;
+  line-height: 1.6;
+  max-width: 48rem;
+  margin: 0;
+}
+
+.creator-hero__genres {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.creator-detail__stats-bar {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   flex-wrap: wrap;
-}
+  margin-bottom: 0.5rem;
-
-.creator-detail__genres {
-  display: inline-flex;
-  gap: 0.25rem;
-  flex-wrap: wrap;
 }
 
 .creator-detail__stats {
@@ -3164,10 +3183,20 @@ a.app-footer__repo:hover {
 
   .creators-browse__title,
   .topics-browse__title,
-  .creator-detail__name {
+  .creator-hero__name {
     font-size: 1.375rem;
   }
 
+  .creator-hero {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .creator-hero__genres {
+    justify-content: center;
+  }
+
   .topics-grid {
     grid-template-columns: 1fr;
   }

frontend/src/pages/CreatorDetail.tsx

@@ -10,7 +10,6 @@ import { Link, useParams } from "react-router-dom";
 import {
   fetchCreator,
   type CreatorDetailResponse,
-  type CreatorTechniqueItem,
 } from "../api/public-client";
 import CreatorAvatar from "../components/CreatorAvatar";
 import SortDropdown from "../components/SortDropdown";
@@ -110,24 +109,35 @@ export default function CreatorDetail() {
         ← Creators
       </Link>
 
-      {/* Header */}
+      {/* Hero */}
-      <header className="creator-detail__header">
+      <header className="creator-hero">
-        <h1 className="creator-detail__name"><CreatorAvatar creatorId={creator.id} name={creator.name} size={48} /> {creator.name}</h1>
+        <CreatorAvatar
-        <div className="creator-detail__meta">
+          creatorId={creator.id}
-          {creator.genres && creator.genres.length > 0 && (
+          name={creator.name}
-            <span className="creator-detail__genres">
+          imageUrl={creator.avatar_url ?? undefined}
-              {creator.genres.map((g) => (
+          size={96}
-                <span key={g} className="pill">
+        />
-                  {g}
+        <div className="creator-hero__info">
-                </span>
+          <h1 className="creator-hero__name">{creator.name}</h1>
-              ))}
+          {creator.bio && (
-            </span>
+            <p className="creator-hero__bio">{creator.bio}</p>
           )}
+          {creator.genres && creator.genres.length > 0 && (
+            <div className="creator-hero__genres">
+              {creator.genres.map((g) => (
+                <span key={g} className="pill">{g}</span>
+              ))}
+            </div>
+          )}
+        </div>
+      </header>
+
+      {/* Stats */}
+      <div className="creator-detail__stats-bar">
         <span className="creator-detail__stats">
           {creator.video_count} video{creator.video_count !== 1 ? "s" : ""}
+        </span>
         {Object.keys(creator.genre_breakdown).length > 0 && (
-              <>
-                <span className="queue-card__separator">·</span>
           <span className="creator-detail__topic-pills">
             {Object.entries(creator.genre_breakdown)
               .sort(([, a], [, b]) => b - a)
@@ -137,11 +147,8 @@ export default function CreatorDetail() {
                 </span>
               ))}
           </span>
-              </>
         )}
-          </span>
       </div>
-      </header>
 
       {/* Technique pages */}
       <section className="creator-techniques">