Modernize the UI and fix the equalizer sizing bug

Bug fix

- EqualizerIcon: the SVG was rendering at the wrong size (filling
  its parent) because it had no explicit width/height attributes.
  Now it accepts a size prop with a 24px default and the SVG element
  carries the size as width/height attributes, with the className
  on top. Can't accidentally balloon.

Design

- Stripped the light-mode CSS — the app is dark-only now, and the
  theme toggle was a no-op (clicking it just toggled a class that
  had no matching rules). ThemeToggle.tsx and lib/theme.ts are
  gone; initTheme() call removed from main.tsx.

- Reworked the input form:
    • brand row is now small + refined (icon + wordmark, no huge
      gradient title)
    • Options is a single subtle collapsible card with a chevron and
      a count badge showing how many options are non-default
    • Vocals is now a segmented pill (single rounded container, two
      flat segments) instead of two full-width grid buttons
    • Generate button is slightly smaller (py-3.5, text-sm) and
      uses a softer shadow (shadow-violet-900/20)

- Empty state in the results panel: dashed-border card, soft
  gradient blur behind the music icon, cleaner copy.

- Results header: smaller heading, the 'Regenerate All' and
  'Cancel' buttons are now tiny ghost-style pills in the top-right.

- Sticky ZIP bar: softer shadow, more refined copy.

- Result cards: smaller icon, single-line title, the Regenerate
  button is now an inline pill that fits next to Revert + Copy.

- Home page header now has a tiny equalizer icon + 'MelodyMuse'
  wordmark on the left (was just text). Settings page header has
  the back arrow on the left and the title, no theme toggle.

- Global CSS: added modern focus-visible ring, custom selection
  color, subtle scrollbar thumb, slightly tweaked the gradient
  text to a softer violet-300 → cyan-300 instead of the loud
  violet-400 → fuchsia-400 → cyan-400.

src/pages/HomePage.tsx

@@ -7,9 +7,9 @@ import {
   type SectionKey,
 } from "../components/ResultsPanel";
 import { StickyZipBar } from "../components/StickyZipBar";
-import { ThemeToggle } from "../components/ThemeToggle";
 import { HistoryPanel } from "../components/HistoryPanel";
 import { Footer } from "../components/Footer";
+import { EqualizerIcon } from "../components/EqualizerIcon";
 import { useToast } from "../lib/toast";
 import { generateSong, getServerStatus } from "../lib/llm";
 import { addToHistory, type HistoryEntry } from "../lib/history";
@@ -302,9 +302,14 @@ export function HomePage() {
 
   return (
     <div className="min-h-screen pb-32">
-      <header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
+      <header className="sticky top-0 z-20 bg-bg/80 backdrop-blur border-b border-border">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
-          <span className="text-sm text-fg-muted">MelodyMuse</span>
+          <div className="flex items-center gap-2.5">
+            <EqualizerIcon size={18} className="shrink-0" />
+            <span className="text-sm font-medium text-fg-muted">
+              MelodyMuse
+            </span>
+          </div>
           <div className="flex items-center gap-3">
             {serverOk === false && (
               <span
@@ -314,7 +319,6 @@ export function HomePage() {
                 Server offline
               </span>
             )}
-            <ThemeToggle />
           </div>
         </div>
       </header>

src/pages/SettingsPage.tsx

@@ -9,7 +9,6 @@ import {
   Trash2,
   Server,
 } from "lucide-react";
-import { ThemeToggle } from "../components/ThemeToggle";
 import { useToast } from "../lib/toast";
 import { getServerStatus, type ServerStatus } from "../lib/llm";
 
@@ -115,17 +114,16 @@ export function SettingsPage() {
   return (
     <div className="min-h-screen">
       <header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
-        <div className="max-w-md mx-auto px-4 h-14 flex items-center justify-between">
+        <div className="max-w-md mx-auto px-4 h-14 flex items-center gap-2">
           <button
             type="button"
             onClick={() => navigate("/")}
-            className="btn-ghost p-2"
+            className="p-2 -ml-2 rounded-md text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors"
             aria-label="Back"
           >
             <ArrowLeft className="w-5 h-5" />
           </button>
           <h1 className="text-sm font-semibold text-fg">Settings</h1>
-          <ThemeToggle />
         </div>
       </header>