design: update logo to crossed wrench and brush

Logo Redesign:
- Simple, beautiful crossed design (wrench × brush in X formation)
- Wrench: Bottom-left to top-right with purple gradient
- Brush: Top-left to bottom-right with orange-red gradient
- Center circle at intersection with purple-to-cyan gradient
- Clean, minimal aesthetic with smooth animations

Favicon Update:
- Matching crossed design scaled for 64x64
- Clear visibility at small sizes
- Professional and memorable icon

Visual Elements:
- Wrench: Indigo (#667eea) to Purple (#a855f7) gradient
- Brush handle: Amber (#f59e0b) to Red (#ef4444) gradient
- Brush ferrule: Gray metal finish
- Brush bristles: Green (#10b981) to Cyan (#06b6d4) gradient
- Center: Purple to Cyan radial gradient

Animations:
- Initial rotation animation on logo
- Progressive drawing of wrench and brush
- Bristles expand effect
- Center circle pops in with spring animation

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

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

app/icon.svg

@@ -2,20 +2,30 @@
   <!-- Background -->
   <rect width="64" height="64" rx="12" fill="url(#bg)"/>
 
-  <!-- Suitcase body -->
-  <rect x="16" y="27" width="32" height="22" rx="2" stroke="url(#suitcase)" stroke-width="2" fill="rgba(139, 92, 246, 0.2)"/>
+  <!-- Wrench (bottom-left to top-right) -->
+  <g>
+    <!-- Wrench handle -->
+    <line x1="19" y1="45" x2="37" y2="27" stroke="url(#wrenchGrad)" stroke-width="3" stroke-linecap="round"/>
+    <!-- Wrench head -->
+    <path d="M 37 27 L 40 24 M 37 27 L 40 30" stroke="url(#wrenchGrad)" stroke-width="3" stroke-linecap="round"/>
+  </g>
 
-  <!-- Suitcase handle -->
-  <path d="M 27 27 Q 32 19, 37 27" stroke="url(#suitcase)" stroke-width="2" fill="none" stroke-linecap="round"/>
+  <!-- Brush (top-left to bottom-right) -->
+  <g>
+    <!-- Brush handle -->
+    <line x1="24" y1="19" x2="37" y2="32" stroke="url(#brushGrad)" stroke-width="2.5" stroke-linecap="round"/>
+    <!-- Brush ferrule -->
+    <ellipse cx="38.5" cy="33.5" rx="2.5" ry="4" fill="url(#ferrule)" transform="rotate(45 38.5 33.5)"/>
+    <!-- Brush bristles -->
+    <line x1="39.5" y1="34.5" x2="43" y2="38" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
+    <line x1="40.5" y1="35.5" x2="45" y2="40" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
+    <line x1="41.5" y1="36.5" x2="46" y2="41" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
+    <line x1="38.5" y1="35.5" x2="41" y2="38" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
+    <line x1="37.5" y1="36.5" x2="39.5" y2="38.5" stroke="url(#bristles)" stroke-width="1.2" stroke-linecap="round"/>
+  </g>
 
-  <!-- Suitcase latch -->
-  <rect x="30" y="26" width="4" height="3" rx="1" fill="url(#suitcase)"/>
-
-  <!-- Brush handle -->
-  <rect x="31" y="32" width="2" height="11" fill="url(#brushHandle)" rx="1"/>
-
-  <!-- Brush bristles -->
-  <path d="M 28 43 L 29 47 L 30 46 L 31 48 L 32 46 L 33 48 L 34 46 L 35 47 L 36 43 Z" fill="url(#brushBristles)"/>
+  <!-- Center circle -->
+  <circle cx="32" cy="32" r="4" fill="url(#center)"/>
 
   <!-- Gradients -->
   <defs>
@@ -23,17 +33,25 @@
       <stop offset="0%" stop-color="#1a1a2e"/>
       <stop offset="100%" stop-color="#0f0f1a"/>
     </linearGradient>
-    <linearGradient id="suitcase" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#a855f7"/>
-      <stop offset="100%" stop-color="#6366f1"/>
+    <linearGradient id="wrenchGrad" x1="19" y1="45" x2="40" y2="24">
+      <stop offset="0%" stop-color="#667eea"/>
+      <stop offset="100%" stop-color="#a855f7"/>
     </linearGradient>
-    <linearGradient id="brushHandle" x1="0%" y1="0%" x2="0%" y2="100%">
+    <linearGradient id="brushGrad" x1="24" y1="19" x2="37" y2="32">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="100%" stop-color="#ef4444"/>
     </linearGradient>
-    <linearGradient id="brushBristles" x1="0%" y1="0%" x2="0%" y2="100%">
+    <linearGradient id="ferrule" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#94a3b8"/>
+      <stop offset="100%" stop-color="#64748b"/>
+    </linearGradient>
+    <linearGradient id="bristles" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" stop-color="#10b981"/>
       <stop offset="100%" stop-color="#06b6d4"/>
     </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>
 </svg>