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">

components/converter/VisualComparison.tsx

@@ -81,16 +81,27 @@ export default function VisualComparison({
             </span>
           </div>
           {/* Progress bar */}
-          <div className="w-full h-6 bg-secondary/20 rounded-lg overflow-hidden border border-border">
+          <div className="w-full h-8 bg-muted rounded-lg overflow-hidden border border-border relative">
+            {/* Colored fill */}
             <div
-              className="h-full flex items-center justify-end px-2 transition-all duration-500 ease-out"
+              className="absolute inset-y-0 left-0 transition-all duration-500 ease-out"
               style={{
                 width: `${item.percentage}%`,
-                backgroundColor: `var(--color-${color})`,
+                backgroundColor: color,
               }}
-            >
-              <span className="text-[11px] font-semibold text-white drop-shadow">
-                {item.percentage >= 15 && `${Math.round(item.percentage)}%`}
+            />
+            {/* Percentage label overlay */}
+            <div className="absolute inset-0 flex items-center justify-between px-3 text-xs font-bold pointer-events-none">
+              <span className="text-foreground drop-shadow-sm">
+                {Math.round(item.percentage)}%
+              </span>
+              <span
+                className="tabular-nums drop-shadow-sm"
+                style={{
+                  color: item.percentage > 30 ? 'white' : 'var(--foreground)',
+                }}
+              >
+                {item.percentage > 30 && formatNumber(item.value)}
               </span>
             </div>
           </div>