feat: Camelot wheel key colors + BPM gradient for all badges

New musicColors.ts utility:
- getKeyColor(): Maps musical key to Camelot wheel position → hue.
  12 positions × 30° = full color wheel. Major = brighter/more saturated.
  Minor = slightly darker/less saturated. Returns {bg, text, border}.
- getBPMColor(): Gradient from slow (blue, 240°) to fast (red, 0°).
  Default range: 60 BPM → 180 BPM. Configurable via BPMRange.
  Clamps outside range. Returns {bg, text, border}.

Gallery.tsx:
- Ribbons: BPM and key badges now use dynamic HSL colors
- Tiles: Same colored badges in tile footer
- Both use inline styles for bg/text/border

DetailPanel.tsx:
- BPM and key metadata items now show as colored badges
- Same color system as gallery badges

All badges: subtle translucent background, colored text, thin colored border.
Consistent visual language across ribbon, tile, and detail views.

frontend/src/components/DetailPanel.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState, useEffect } from 'react'
+import { getKeyColor, getBPMColor } from '../utils/musicColors'
 
 interface Clip {
   id: string
@@ -260,18 +261,34 @@ export default function DetailPanel({ clip, onClose, onRename, onDelete, onUploa
                 <p className="text-sm text-white">{(clip.file_size_bytes / 1024).toFixed(0)} KB</p>
               </div>
             )}
-            {clip.bpm && (
-              <div>
-                <label className="text-xs text-lyria-muted uppercase tracking-wider block">BPM</label>
-                <p className="text-sm text-white">{Math.round(clip.bpm)}</p>
-              </div>
-            )}
-            {clip.key && (
-              <div>
-                <label className="text-xs text-lyria-muted uppercase tracking-wider block">Key</label>
-                <p className="text-sm text-white">{clip.key}</p>
-              </div>
-            )}
+            {clip.bpm && (() => {
+              const c = getBPMColor(clip.bpm)
+              return c ? (
+                <div>
+                  <label className="text-xs text-lyria-muted uppercase tracking-wider block">BPM</label>
+                  <span
+                    className="text-sm px-2 py-0.5 rounded font-medium inline-block"
+                    style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                  >
+                    {Math.round(clip.bpm)}
+                  </span>
+                </div>
+              ) : null
+            })()}
+            {clip.key && (() => {
+              const c = getKeyColor(clip.key)
+              return c ? (
+                <div>
+                  <label className="text-xs text-lyria-muted uppercase tracking-wider block">Key</label>
+                  <span
+                    className="text-sm px-2 py-0.5 rounded font-medium inline-block"
+                    style={{ backgroundColor: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+                  >
+                    {clip.key}
+                  </span>
+                </div>
+              ) : null
+            })()}
             <div>
               <label className="text-xs text-lyria-muted uppercase tracking-wider block">Created</label>
               <p className="text-sm text-white">{formatDate(clip.created_at)}</p>