Update logo and enhance layout responsiveness; add stroke animation for frequency chart paths

client/src/components/ConnectScreen.tsx

@@ -27,13 +27,19 @@ export default function ConnectScreen() {
     <div className="min-h-screen bg-black flex flex-col items-center justify-center px-6">
       {/* Logo / Brand */}
       <div className="mb-10 flex flex-col items-center">
-        <img
-          src={`${import.meta.env.BASE_URL}logo.png`}
-          alt="Luxsin"
-          className="mb-4 h-auto w-20 object-contain"
-        />
-        <h1 className="text-[30px] font-bold text-white tracking-tight">Luxsin X8</h1>
-        <p className="text-[14px] text-white/35 mt-1 tracking-wide">Controller</p>
+        <div
+          className="mb-4 flex size-[5.5rem] shrink-0 items-center justify-center rounded-[17px] border border-white/15 bg-white/[0.02]"
+        >
+          <img
+            src={`${import.meta.env.BASE_URL}logo.png`}
+            alt="Luxsin"
+            className="h-auto max-h-[3.75rem] w-auto max-w-[3.75rem] object-contain"
+          />
+        </div>
+        <h1 className="text-[16px] font-semibold tracking-tight text-white/70">
+          Luxsin X8 Controller
+        </h1>
+        
       </div>
 
       {/* Connection card */}
@@ -58,7 +64,7 @@ export default function ConnectScreen() {
               style={{
                 background: "rgba(44,44,46,0.8)",
                 border: "1px solid rgba(255,255,255,0.08)",
-                fontFamily: "'JetBrains Mono', monospace",
+                fontFamily: "inherit",
               }}
               onFocus={(e) => { e.target.style.borderColor = "rgba(0,255,246,0.4)"; e.target.style.boxShadow = "0 0 0 3px rgba(0,255,246,0.06)"; }}
               onBlur={(e) => { e.target.style.borderColor = "rgba(255,255,255,0.08)"; e.target.style.boxShadow = "none"; }}

client/src/components/Layout.tsx

@@ -16,21 +16,24 @@ interface LayoutProps {
 
 export default function Layout({ children, title, subtitle }: LayoutProps) {
   return (
-    <div className="min-h-screen flex flex-col" style={{ background: "#0d1117" }}>
+    <div
+      className="min-h-screen flex min-w-0 flex-col max-lg:overflow-x-hidden"
+      style={{ background: "#0d1117" }}
+    >
       {/* Global Status Bar */}
       <StatusBar />
 
-      <div className="flex flex-1">
+      <div className="flex min-w-0 flex-1">
         {/* Desktop sidebar — hidden on mobile */}
         <div className="hidden lg:block">
           <Sidebar />
         </div>
 
         {/* Main content area */}
-        <div className="flex-1 flex flex-col min-h-screen lg:ml-[220px]">
+        <div className="flex min-h-screen min-w-0 flex-1 flex-col max-lg:overflow-x-hidden lg:ml-[220px]">
           <TopBar title={title} subtitle={subtitle} />
         <main
-          className="flex-1 p-4 md:p-6 overflow-y-auto"
+          className="min-w-0 flex-1 overflow-y-auto p-4 md:p-6 max-lg:overflow-x-hidden"
           /* On mobile, add bottom padding so content isn't hidden behind BottomNav */
           style={{ paddingBottom: "calc(5rem + env(safe-area-inset-bottom, 0px))" }}
         >

client/src/index.css

@@ -132,6 +132,23 @@
   input[type="radio"]:not(:disabled) {
     @apply cursor-pointer;
   }
+
+  /* Phones & tablets: no whole-app horizontal pan / rubber-band */
+  @media (max-width: 1024px), (hover: none) and (pointer: coarse) {
+    html {
+      overflow-x: hidden;
+      overscroll-behavior-x: none;
+    }
+    body {
+      overflow-x: hidden;
+      overscroll-behavior-x: none;
+    }
+    #root {
+      overflow-x: hidden;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
 }
 
 @layer components {

client/src/pages/EQPage.tsx

@@ -109,6 +109,8 @@ function FreqChart({
   const svgRef = useRef<SVGSVGElement | null>(null);
   const draggingBandRef = useRef<number | null>(null);
   const curvePathRef = useRef<SVGPathElement | null>(null);
+  const rawPathRef = useRef<SVGPathElement | null>(null);
+  const equalizedPathRef = useRef<SVGPathElement | null>(null);
   const [chartWidth, setChartWidth] = useState(340);
   const W = chartWidth;
   const [isBandDragging, setIsBandDragging] = useState(false);
@@ -221,6 +223,14 @@ function FreqChart({
     enabled: !isBandDragging,
     durationMs: 1350,
   });
+  useStrokeDrawAnimation(rawPathRef, rawPathD, {
+    enabled: !isBandDragging && !!rawPathD,
+    durationMs: 1350,
+  });
+  useStrokeDrawAnimation(equalizedPathRef, equalizedPathD, {
+    enabled: !isBandDragging && !!equalizedPathD,
+    durationMs: 1350,
+  });
 
   const freqLabels = [20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000];
   const gainLabels = [20, 15, 10, 5, 0, -5, -10, -15, -20];
@@ -337,6 +347,7 @@ function FreqChart({
           {/* Raw */}
           {rawPathD && showRaw && (
             <path
+              ref={rawPathRef}
               d={rawPathD}
               fill="none"
               stroke="#ffffff"
@@ -349,6 +360,7 @@ function FreqChart({
           {/* Equalized = EQ + Raw */}
           {equalizedPathD && showEqualized && (
             <path
+              ref={equalizedPathRef}
               d={equalizedPathD}
               fill="none"
               stroke="#23d2fe"