design: use authentic Lucide icons (brush × wrench) crossed

Logo Update:
- Using official Lucide SVG paths for brush and wrench icons
- Crossed in X formation (45° and -45° rotation)
- Professional, recognizable design from established icon library

Icon Details:
- Wrench (Lucide): Purple gradient (#667eea → #a855f7)
- Brush (Lucide): Orange-to-pink gradient (#f59e0b → #ec4899)
- Brush bristles: Green-cyan fill with transparency
- Center circle: Purple-to-cyan gradient accent

Animations:
- Wrench draws in with path animation
- Brush draws in with delay
- Center circle pops in with spring effect
- Smooth, professional entrance

Favicon:
- Matching crossed Lucide icons for 64x64
- Scaled appropriately for small sizes
- Dark background with gradient icons

Benefits:
- Authentic, recognizable icons from Lucide library
- Professional design language
- Consistent with modern UI/UX standards
- Clear symbolism: utility (wrench) + creativity (brush)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/icon.svg

@@ -1,44 +1,65 @@
 <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Background circle -->
-  <circle cx="32" cy="32" r="27" fill="url(#bg)"/>
+  <!-- Background -->
+  <rect width="64" height="64" rx="12" fill="url(#bg)"/>
 
-  <!-- Wrench icon -->
-  <g>
+  <!-- Wrench (Lucide) - rotated 45 degrees -->
+  <g transform="translate(32, 32) rotate(45) scale(1.8) translate(-12, -12)">
     <path
-      d="M24 29L27 26M27 26L30 29M27 26V35M22 35H32"
-      stroke="white"
-      stroke-width="2"
+      d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+      stroke="url(#wrench)"
+      stroke-width="1.5"
       stroke-linecap="round"
       stroke-linejoin="round"
-    />
-  </g>
-
-  <!-- Paintbrush icon -->
-  <g>
-    <path
-      d="M37 29V35M37 35L34 40L37 42L40 40L37 35Z"
-      stroke="white"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <rect
-      x="35"
-      y="27"
-      width="4"
-      height="5"
-      rx="1"
-      stroke="white"
-      stroke-width="2"
       fill="none"
+      vector-effect="non-scaling-stroke"
     />
   </g>
 
+  <!-- Brush (Lucide) - rotated -45 degrees -->
+  <g transform="translate(32, 32) rotate(-45) scale(1.8) translate(-12, -12)">
+    <path
+      d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"
+      stroke="url(#brush)"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      vector-effect="non-scaling-stroke"
+    />
+    <path
+      d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"
+      stroke="url(#brush)"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="url(#brushFill)"
+      vector-effect="non-scaling-stroke"
+    />
+  </g>
+
+  <!-- Center circle -->
+  <circle cx="32" cy="32" r="3" fill="url(#center)"/>
+
   <!-- Gradients -->
   <defs>
     <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1a1a2e"/>
+      <stop offset="100%" stop-color="#0f0f1a"/>
+    </linearGradient>
+    <linearGradient id="wrench" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" stop-color="#667eea"/>
-      <stop offset="50%" stop-color="#8b5cf6"/>
+      <stop offset="100%" stop-color="#a855f7"/>
+    </linearGradient>
+    <linearGradient id="brush" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#ec4899"/>
+    </linearGradient>
+    <linearGradient id="brushFill" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#10b981" stop-opacity="0.3"/>
+      <stop offset="100%" stop-color="#06b6d4" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="center" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#a855f7"/>
       <stop offset="100%" stop-color="#06b6d4"/>
     </linearGradient>
   </defs>