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>

components/converter/MainConverter.tsx

@@ -16,6 +16,7 @@ import {
   convertUnit,
   formatMeasureName,
   getCategoryColor,
+  getCategoryColorHex,
   type Measure,
   type ConversionResult,
 } from '@/lib/units';
@@ -253,7 +254,7 @@ export default function MainConverter() {
           {showVisualComparison ? (
             <VisualComparison
               conversions={conversions}
-              color={getCategoryColor(selectedMeasure)}
+              color={getCategoryColorHex(selectedMeasure)}
             />
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">