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;
-  gap: 0.75rem;
-  font-size: 1.75rem;
+  flex-direction: column;
+  gap: 0.5rem;
+  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;
-}
-
-.creator-detail__genres {
-  display: inline-flex;
-  gap: 0.25rem;
-  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
 }
 
 .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,39 +109,47 @@ export default function CreatorDetail() {
         ← Creators
       </Link>
 
-      {/* Header */}
-      <header className="creator-detail__header">
-        <h1 className="creator-detail__name"><CreatorAvatar creatorId={creator.id} name={creator.name} size={48} /> {creator.name}</h1>
-        <div className="creator-detail__meta">
-          {creator.genres && creator.genres.length > 0 && (
-            <span className="creator-detail__genres">
-              {creator.genres.map((g) => (
-                <span key={g} className="pill">
-                  {g}
-                </span>
-              ))}
-            </span>
+      {/* Hero */}
+      <header className="creator-hero">
+        <CreatorAvatar
+          creatorId={creator.id}
+          name={creator.name}
+          imageUrl={creator.avatar_url ?? undefined}
+          size={96}
+        />
+        <div className="creator-hero__info">
+          <h1 className="creator-hero__name">{creator.name}</h1>
+          {creator.bio && (
+            <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>
           )}
-          <span className="creator-detail__stats">
-            {creator.video_count} video{creator.video_count !== 1 ? "s" : ""}
-            {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)
-                    .map(([cat, count]) => (
-                      <span key={cat} className={`badge badge--cat-${catSlug(cat)}`}>
-                        {cat}: {count}
-                      </span>
-                    ))}
-                </span>
-              </>
-            )}
-          </span>
         </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="creator-detail__topic-pills">
+            {Object.entries(creator.genre_breakdown)
+              .sort(([, a], [, b]) => b - a)
+              .map(([cat, count]) => (
+                <span key={cat} className={`badge badge--cat-${catSlug(cat)}`}>
+                  {cat}: {count}
+                </span>
+              ))}
+          </span>
+        )}
+      </div>
+
       {/* Technique pages */}
       <section className="creator-techniques">
         <div className="creator-techniques__header">