fix: Darker modal backdrops for better contrast

SettingsModal + ArtworkGenerationModal:
- Backdrop: bg-black/60 → bg-black/80 (darker, less bleed-through)
- Backdrop blur: backdrop-blur-sm → backdrop-blur-md (stronger blur effect)
- Modal surface: added lyria-surface color (#1a1a24) to tailwind config
  for solid, opaque modal backgrounds

Result: Background elements are much less visible behind modals,
improving readability and focus.

frontend/src/components/ArtworkGenerationModal.tsx

@@ -36,7 +36,7 @@ export default function ArtworkGenerationModal({ isOpen, onClose, onGenerate, tr
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-md"
         onClick={handleClose}
       />
 

frontend/src/components/SettingsModal.tsx

@@ -99,7 +99,7 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/80 backdrop-blur-md"
         onClick={onClose}
       />
 

frontend/tailwind.config.js

@@ -9,6 +9,7 @@ export default {
       colors: {
         'lyria-dark': '#0a0a0f',
         'lyria-panel': '#12121a',
+        'lyria-surface': '#1a1a24',
         'lyria-accent': '#ff6b35',
         'lyria-text': '#e0e0e0',
         'lyria-muted': '#6b6b7b',