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/BrandMark.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+
+interface BrandMarkProps {
+  size?: number;
+  className?: string;
+}
+
+/** Inline twin of app/icon.svg (the favicon) - kept as markup, not an <img>, so it can be sized/animated with CSS. */
+export function BrandMark({ size = 28, className }: BrandMarkProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("shrink-0", className)}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="bpGradMark" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#ff6fb0" />
+          <stop offset="52%" stopColor="#b34bde" />
+          <stop offset="100%" stopColor="#4f7fe0" />
+        </linearGradient>
+      </defs>
+      <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGradMark)" />
+      <path
+        d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
+        fill="rgba(255,255,255,0.22)"
+      />
+      <polyline
+        points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth={1.7}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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>
   );

components/layout/NavBar.tsx

@@ -7,6 +7,7 @@ import { Menu, Moon, Sun, LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { ConnectionStatus } from "./ConnectionStatus";
+import { BrandMark } from "./BrandMark";
 import { cn } from "@/lib/utils";
 
 const LINKS = [
@@ -28,10 +29,10 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
           href={link.href}
           onClick={onNavigate}
           className={cn(
-            "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
+            "border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
             pathname === link.href
-              ? "bg-primary/15 text-primary"
-              : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              ? "border-primary text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground",
           )}
         >
           {link.label}
@@ -54,8 +55,9 @@ export function NavBar() {
   return (
     <header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-lg">
       <div className="mx-auto flex h-14 max-w-6xl items-center gap-3 px-4">
-        <Link href="/" className="font-display bp-gradient-text mr-2 text-lg font-semibold">
-          sexy
+        <Link href="/" className="mr-2 flex items-center gap-2">
+          <BrandMark size={26} />
+          <span className="font-heading bp-gradient-text text-lg font-semibold">SEXY</span>
         </Link>
 
         <nav className="hidden items-center gap-1 md:flex">