feat: Reordered technique page sidebar (plugins first), added prominent…

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

GSD-Task: S04/T01

frontend/src/App.css

@@ -85,6 +85,20 @@
   --color-badge-quality-unstructured-bg: #422006;
   --color-badge-quality-unstructured-text: #fcd34d;
 
+  /* Per-category badge colors */
+  --color-badge-cat-sound-design-bg: #0d3b3b;
+  --color-badge-cat-sound-design-text: #5eead4;
+  --color-badge-cat-mixing-bg: #2e1065;
+  --color-badge-cat-mixing-text: #c4b5fd;
+  --color-badge-cat-synthesis-bg: #0c2461;
+  --color-badge-cat-synthesis-text: #93c5fd;
+  --color-badge-cat-arrangement-bg: #422006;
+  --color-badge-cat-arrangement-text: #fcd34d;
+  --color-badge-cat-workflow-bg: #052e16;
+  --color-badge-cat-workflow-text: #6ee7b7;
+  --color-badge-cat-mastering-bg: #4a1035;
+  --color-badge-cat-mastering-text: #f9a8d4;
+
   /* Genre pills */
   --color-genre-pill-bg: #1a1a24;
   --color-genre-pill-text: #e2e2ea;
@@ -1184,6 +1198,13 @@ body {
   color: var(--color-badge-category-text);
 }
 
+.badge--cat-sound-design { background: var(--color-badge-cat-sound-design-bg); color: var(--color-badge-cat-sound-design-text); }
+.badge--cat-mixing { background: var(--color-badge-cat-mixing-bg); color: var(--color-badge-cat-mixing-text); }
+.badge--cat-synthesis { background: var(--color-badge-cat-synthesis-bg); color: var(--color-badge-cat-synthesis-text); }
+.badge--cat-arrangement { background: var(--color-badge-cat-arrangement-bg); color: var(--color-badge-cat-arrangement-text); }
+.badge--cat-workflow { background: var(--color-badge-cat-workflow-bg); color: var(--color-badge-cat-workflow-text); }
+.badge--cat-mastering { background: var(--color-badge-cat-mastering-bg); color: var(--color-badge-cat-mastering-text); }
+
 .badge--type {
   font-size: 0.6875rem;
   text-transform: uppercase;
@@ -1305,14 +1326,31 @@ body {
   gap: 0.25rem;
 }
 
-.technique-header__creator {
+.technique-header__creator-block {
-  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.technique-header__creator-link {
+  font-size: 1.125rem;
+  font-weight: 600;
   color: var(--color-link-accent);
   text-decoration: none;
 }
 
-.technique-header__creator:hover {
+.technique-header__creator-link:hover {
   text-decoration: underline;
+  color: var(--color-accent-hover);
+}
+
+.pill--genre-small {
+  font-size: 0.625rem;
+  padding: 0.0625rem 0.375rem;
+  background: var(--color-pill-bg);
+  color: var(--color-text-secondary);
 }
 
 .technique-header__stats {

frontend/src/pages/TechniquePage.tsx

@@ -226,8 +226,24 @@ export default function TechniquePage() {
       {/* Header */}
       <header className="technique-header">
         <h1 className="technique-header__title">{displayTitle}</h1>
+        {technique.creator_info && (
+          <div className="technique-header__creator-block">
+            <Link to={`/creators/${technique.creator_info.slug}`} className="technique-header__creator-link">
+              {technique.creator_info.name}
+            </Link>
+            {technique.creator_info.genres && technique.creator_info.genres.length > 0 && (
+              <span className="technique-header__creator-genres">
+                {technique.creator_info.genres.map((g) => (
+                  <span key={g} className="pill pill--genre-small">{g}</span>
+                ))}
+              </span>
+            )}
+          </div>
+        )}
         <div className="technique-header__meta">
-          <span className="badge badge--category">{displayCategory}</span>
+          <span className={`badge badge--category badge--cat-${displayCategory?.toLowerCase().replace(/\s+/g, '-') ?? ''}`}>
+            {displayCategory}
+          </span>
           {displayTags && displayTags.length > 0 && (
             <span className="technique-header__tags">
               {displayTags.map((tag) => (
@@ -237,14 +253,6 @@ export default function TechniquePage() {
               ))}
             </span>
           )}
-          {technique.creator_info && (
-            <Link
-              to={`/creators/${technique.creator_info.slug}`}
-              className="technique-header__creator"
-            >
-              by {technique.creator_info.name}
-            </Link>
-          )}
           {displayQuality && (
             <span
               className={`badge badge--quality badge--quality-${displayQuality}`}
@@ -405,6 +413,20 @@ export default function TechniquePage() {
 
         </div>
         <div className="technique-columns__sidebar">
+          {/* Plugins */}
+      {displayPlugins && displayPlugins.length > 0 && (
+        <section className="technique-plugins">
+          <h2>Plugins Referenced</h2>
+          <div className="pill-list">
+            {displayPlugins.map((plugin) => (
+              <span key={plugin} className="pill pill--plugin">
+                {plugin}
+              </span>
+            ))}
+          </div>
+        </section>
+      )}
+
           {/* Key moments (always from live data — not versioned) */}
       {technique.key_moments.length > 0 && (
         <section className="technique-moments">
@@ -472,20 +494,6 @@ export default function TechniquePage() {
           </section>
         )}
 
-      {/* Plugins */}
-      {displayPlugins && displayPlugins.length > 0 && (
-        <section className="technique-plugins">
-          <h2>Plugins Referenced</h2>
-          <div className="pill-list">
-            {displayPlugins.map((plugin) => (
-              <span key={plugin} className="pill pill--plugin">
-                {plugin}
-              </span>
-            ))}
-          </div>
-        </section>
-      )}
-
       {/* Related techniques (always from live data) */}
       {technique.related_links.length > 0 && (
         <section className="technique-related">