Restyle UI with a channel-strip console look and brand icon

Adds a pink/purple/blue SVG brand mark (favicon + header) and reworks
the visual language around the app's actual interaction - fader-driven
device control - via LED-style indicators, mono instrument readouts,
hairline-framed cards, console-tab nav, and an oscilloscope-style
session timeline. Leaves components/ui/* untouched, restyling only via
design tokens and the app's own composed components. Also fixes a
proxy.ts matcher gap that was gating /icon.svg behind auth.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb

components/layout/ConnectionStatus.tsx

@@ -8,15 +8,10 @@ export function ConnectionStatus() {
   const deviceCount = useButtplugStore((s) => Object.keys(s.devices).length);
 
   return (
-    <div className="flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1 text-xs">
-      <span
-        className={cn(
-          "size-2 rounded-full",
-          connected ? "bg-primary bp-pulse" : "bg-muted-foreground/50",
-        )}
-      />
-      <span className="text-muted-foreground">
-        {connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "Not connected"}
+    <div className="flex items-center gap-2 rounded-md border border-border bg-card/60 px-3 py-1 text-xs">
+      <span className={cn("bp-led", connected && "bp-pulse")} data-on={connected} aria-hidden />
+      <span className="bp-readout text-muted-foreground">
+        {connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "not connected"}
       </span>
     </div>
   );