fix: use direct hex colors for visual comparison bars

Fixed the colored bar segments not showing:

🎨 Direct Color Implementation:
- Added getCategoryColorHex() function to return actual hex values
- Changed from CSS variables to direct backgroundColor
- No more var(--color-*) that wasn't resolving
- Direct hex colors like #3B82F6 for length, #10B981 for mass, etc.

✨ Visual Improvements:
- Taller bars (h-8, 32px) for better visibility
- Drop shadow on percentage labels for readability
- White text on bars >30% filled
- Foreground color text on smaller bars
- pointer-events-none on overlay to prevent interaction issues

🔧 Updated Components:
- MainConverter: Import and use getCategoryColorHex()
- VisualComparison: Accept hex color string directly
- lib/units: Added getCategoryColorHex() with all 23 colors

The bars will now definitely show with vibrant colors!

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

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

lib/units.ts

@@ -116,7 +116,7 @@ export function convertToAll(
 }
 
 /**
- * Get category color for a measure
+ * Get category color for a measure (Tailwind class name)
  */
 export function getCategoryColor(measure: Measure): string {
   const colorMap: Record<Measure, string> = {
@@ -148,6 +148,39 @@ export function getCategoryColor(measure: Measure): string {
   return colorMap[measure];
 }
 
+/**
+ * Get category color hex value for a measure
+ */
+export function getCategoryColorHex(measure: Measure): string {
+  const colorMap: Record<Measure, string> = {
+    angle: '#0EA5E9',
+    apparentPower: '#8B5CF6',
+    area: '#F59E0B',
+    current: '#F59E0B',
+    digital: '#06B6D4',
+    each: '#64748B',
+    energy: '#EAB308',
+    frequency: '#A855F7',
+    illuminance: '#84CC16',
+    length: '#3B82F6',
+    mass: '#10B981',
+    pace: '#14B8A6',
+    partsPer: '#EC4899',
+    power: '#F43F5E',
+    pressure: '#6366F1',
+    reactiveEnergy: '#D946EF',
+    reactivePower: '#E879F9',
+    speed: '#10B981',
+    temperature: '#EF4444',
+    time: '#7C3AED',
+    voltage: '#FB923C',
+    volume: '#8B5CF6',
+    volumeFlowRate: '#22D3EE',
+  };
+
+  return colorMap[measure];
+}
+
 /**
  * Format measure name for display
  */