diff --git a/EXHAUSTIVE_TODO_LIST.md b/EXHAUSTIVE_TODO_LIST.md
index d61325c04..230dda703 100644
--- a/EXHAUSTIVE_TODO_LIST.md
+++ b/EXHAUSTIVE_TODO_LIST.md
@@ -3125,8 +3125,10 @@ Critical path dependencies:
     - ✅ Batch 19 complete: CheckoutView.tsx (20 instances)
     - ✅ Batch 20 complete: FileManagerView.tsx (20 instances)
     - ✅ Total: 294 instances migrated (1,492 → 1,198 remaining, ~19.7% complete)
+    - ✅ **Full instance list generated**: `apps/web/docs/TAILWIND_INSTANCES_FULL_LIST.md` (1,169 instances across 203 files)
     - ⏳ Continuing with remaining files incrementally
   - **Validation**: No Tailwind default colors used (in progress)
+  - **Reference**: See `TAILWIND_INSTANCES_FULL_LIST.md` for complete list of all remaining instances
   - **Rollback**: Restore Tailwind colors
 
 - [ ] **Action 9.1.1.4**: Add ESLint rule to prevent Tailwind defaults
diff --git a/apps/web/docs/TAILWIND_INSTANCES_FULL_LIST.md b/apps/web/docs/TAILWIND_INSTANCES_FULL_LIST.md
new file mode 100644
index 000000000..4ead4b778
--- /dev/null
+++ b/apps/web/docs/TAILWIND_INSTANCES_FULL_LIST.md
@@ -0,0 +1,6885 @@
+# Complete List of Remaining Tailwind Default Color Instances
+**Generated**: Automatically generated list
+**Total Files**: 203
+**Total Instances**: 1169
+**Status**: Action 9.1.1.3 - In Progress (294 instances migrated, ~19.7% complete)
+
+## Usage
+This document lists all remaining Tailwind default color instances organized by file path.
+Each entry includes:
+- File path
+- Line number
+- Color classes found
+- Full line context
+
+## Migration Guidelines
+Refer to `TAILWIND_COLORS_AUDIT.md` for color mapping:
+- `text-gray-*` → `text-kodo-content-dim` or `text-kodo-text-main`
+- `bg-gray-*` → `bg-kodo-graphite`, `bg-kodo-ink`, `bg-kodo-steel`, etc.
+- `border-gray-*` → `border-kodo-steel`
+- `text-blue-*` → `text-kodo-cyan` (when appropriate)
+- Other colors: Map to appropriate Kodo design system colors
+
+## Files with Tailwind Default Colors
+
+---
+
+### apps/web/src/components/ErrorBoundary.tsx
+**Total instances in file**: 1
+
+- **Line 90**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
+  ```
+
+---
+
+### apps/web/src/components/admin/AdminDashboardView.tsx
+**Total instances in file**: 8
+
+- **Line 109**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-400 flex items-center gap-1">
+  ```
+
+- **Line 113**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-400 flex items-center gap-1">
+  ```
+
+- **Line 181**: `text-gray-`
+  ```tsx
+  <span className="text-gray-400">Database</span>
+  ```
+
+- **Line 185**: `text-gray-`
+  ```tsx
+  <span className="text-gray-400">Storage</span>
+  ```
+
+- **Line 189**: `text-gray-`
+  ```tsx
+  <span className="text-gray-400">API Latency</span>
+  ```
+
+- **Line 218**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 243**: `text-gray-`
+  ```tsx
+  <div className="text-center text-gray-500 py-4">
+  ```
+
+- **Line 270**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+---
+
+### apps/web/src/components/admin/AdminModerationView.tsx
+**Total instances in file**: 7
+
+- **Line 82**: `text-gray-`, `text-gray-`
+  ```tsx
+  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-red text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
+  ```
+
+- **Line 107**: `text-gray-`
+  ```tsx
+  <div className="text-center py-20 text-gray-500">
+  ```
+
+- **Line 127**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500 font-mono flex items-center gap-1">
+  ```
+
+- **Line 135**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-300">
+  ```
+
+- **Line 139**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">
+  ```
+
+- **Line 149**: `bg-red-`, `bg-red-`, `border-red-`
+  ```tsx
+  className="bg-red-600 hover:bg-red-700 border-red-500 text-white"
+  ```
+
+- **Line 174**: `text-gray-`
+  ```tsx
+  className="text-gray-500 hover:text-white"
+  ```
+
+---
+
+### apps/web/src/components/admin/AdminSettingsView.tsx
+**Total instances in file**: 6
+
+- **Line 40**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-bold text-gray-400 mb-2">
+  ```
+
+- **Line 49**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 mt-1">
+  ```
+
+- **Line 54**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-bold text-gray-400 mb-2">
+  ```
+
+- **Line 102**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 108**: `bg-gray-`
+  ```tsx
+  className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${maintenance ? 'bg-kodo-red' : 'bg-gray-600'}`}
+  ```
+
+- **Line 117**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-bold text-gray-400 mb-2">
+  ```
+
+---
+
+### apps/web/src/components/admin/AdminUsersView.tsx
+**Total instances in file**: 4
+
+- **Line 73**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 130**: `text-gray-`
+  ```tsx
+  <tr className="border-b border-kodo-steel bg-kodo-graphite text-xs font-bold text-gray-500 uppercase tracking-wider">
+  ```
+
+- **Line 154**: `text-gray-`
+  ```tsx
+  <td colSpan={7} className="p-8 text-center text-gray-500">
+  ```
+
+- **Line 164**: `text-gray-`
+  ```tsx
+  <div className="p-4 border-t border-kodo-steel bg-kodo-ink/30 text-xs text-gray-500 flex justify-between items-center">
+  ```
+
+---
+
+### apps/web/src/components/admin/UserTableRow.tsx
+**Total instances in file**: 9
+
+- **Line 23**: `bg-gray-`
+  ```tsx
+  offline: 'bg-gray-500',
+  ```
+
+- **Line 45**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 font-mono">{user.id}</div>
+  ```
+
+- **Line 49**: `text-gray-`
+  ```tsx
+  <td className="p-4 text-sm text-gray-400">{user.email}</td>
+  ```
+
+- **Line 64**: `text-gray-`
+  ```tsx
+  <td className="p-4 text-sm text-gray-400">{user.tier || 'Free'}</td>
+  ```
+
+- **Line 65**: `text-gray-`
+  ```tsx
+  <td className="p-4 text-sm text-gray-400 font-mono">
+  ```
+
+- **Line 68**: `text-gray-`
+  ```tsx
+  <td className="p-4 text-sm text-gray-400 font-mono">
+  ```
+
+- **Line 74**: `text-gray-`
+  ```tsx
+  className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white"
+  ```
+
+- **Line 91**: `text-gray-`
+  ```tsx
+  className="w-full text-left px-4 py-2.5 text-xs text-gray-300 hover:bg-white/10 flex items-center gap-2"
+  ```
+
+- **Line 99**: `text-gray-`
+  ```tsx
+  <button className="w-full text-left px-4 py-2.5 text-xs text-gray-300 hover:bg-white/10 flex items-center gap-2">
+  ```
+
+---
+
+### apps/web/src/components/admin/modals/BanUserModal.tsx
+**Total instances in file**: 11
+
+- **Line 33**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 38**: `text-gray-`
+  ```tsx
+  <p className="text-gray-300 text-sm">
+  ```
+
+- **Line 45**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 63**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 76**: `text-gray-`
+  ```tsx
+  <Calendar className="w-5 h-5 text-gray-400" />
+  ```
+
+- **Line 79**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 86**: `text-gray-`
+  ```tsx
+  className={`text-xs ${!isPermanent ? 'text-white' : 'text-gray-500'}`}
+  ```
+
+- **Line 92**: `bg-gray-`
+  ```tsx
+  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-gray-600'}`}
+  ```
+
+- **Line 99**: `text-gray-`
+  ```tsx
+  className={`text-xs ${isPermanent ? 'text-kodo-red font-bold' : 'text-gray-500'}`}
+  ```
+
+- **Line 108**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 128**: `bg-red-`, `bg-red-`, `border-red-`
+  ```tsx
+  className="bg-red-600 hover:bg-red-700 border-red-500 text-white"
+  ```
+
+---
+
+### apps/web/src/components/analytics/TrackAnalyticsView.tsx
+**Total instances in file**: 3
+
+- **Line 53**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm">Analytics Report</p>
+  ```
+
+- **Line 130**: `text-gray-`
+  ```tsx
+  <div className="w-16 text-sm text-gray-400">{g.country}</div>
+  ```
+
+- **Line 170**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-xs text-gray-500 mt-2">
+  ```
+
+---
+
+### apps/web/src/components/commerce/CartItem.tsx
+**Total instances in file**: 4
+
+- **Line 24**: `bg-gray-`
+  ```tsx
+  <div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-gray-800">
+  ```
+
+- **Line 35**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm mb-2">{item.author}</p>
+  ```
+
+- **Line 40**: `text-gray-`
+  ```tsx
+  <span className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded uppercase font-bold text-gray-500">
+  ```
+
+- **Line 54**: `text-gray-`
+  ```tsx
+  className="text-gray-500 hover:text-kodo-red hover:bg-kodo-red/10"
+  ```
+
+---
+
+### apps/web/src/components/commerce/OrderSummary.tsx
+**Total instances in file**: 5
+
+- **Line 42**: `border-gray-`
+  ```tsx
+  <h3 className="font-bold text-white mb-6 uppercase tracking-wider text-sm border-b border-gray-700 pb-2">
+  ```
+
+- **Line 47**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-gray-400">
+  ```
+
+- **Line 63**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-gray-400">
+  ```
+
+- **Line 71**: `border-gray-`
+  ```tsx
+  <div className="border-t border-gray-700 pt-4 mb-6">
+  ```
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 leading-relaxed">
+  ```
+
+---
+
+### apps/web/src/components/commerce/WishlistView.tsx
+**Total instances in file**: 7
+
+- **Line 79**: `text-gray-`
+  ```tsx
+  <Heart className="w-10 h-10 text-gray-600" />
+  ```
+
+- **Line 84**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 max-w-sm">
+  ```
+
+- **Line 98**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 119**: `bg-gray-`
+  ```tsx
+  <div className="relative w-24 h-24 bg-gray-800 rounded-lg overflow-hidden flex-shrink-0">
+  ```
+
+- **Line 150**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 truncate">
+  ```
+
+- **Line 153**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 mt-1 capitalize">
+  ```
+
+- **Line 175**: `text-gray-`
+  ```tsx
+  className="text-gray-500 hover:text-kodo-red"
+  ```
+
+---
+
+### apps/web/src/components/commerce/modals/PromoCodeModal.tsx
+**Total instances in file**: 1
+
+- **Line 43**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+---
+
+### apps/web/src/components/commerce/modals/RefundRequestModal.tsx
+**Total instances in file**: 5
+
+- **Line 36**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 41**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400">
+  ```
+
+- **Line 48**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 64**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 75**: `text-gray-`, `border-gray-`
+  ```tsx
+  <div className="border-2 border-dashed border-kodo-steel rounded-lg p-6 flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-gray-500 cursor-pointer transition-colors">
+  ```
+
+---
+
+### apps/web/src/components/dashboard/StatCard.tsx
+**Total instances in file**: 2
+
+- **Line 83**: `text-gray-`
+  ```tsx
+  <p className="text-xs font-mono text-gray-400 uppercase tracking-widest mb-1">
+  ```
+
+- **Line 106**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500 font-normal">vs last period</span>
+  ```
+
+---
+
+### apps/web/src/components/dashboard/TrackList.tsx
+**Total instances in file**: 5
+
+- **Line 96**: `text-gray-`
+  ```tsx
+  <div className="text-gray-500 text-center py-10 bg-kodo-ink/30 rounded-xl border border-dashed border-kodo-steel">
+  ```
+
+- **Line 122**: `text-gray-`
+  ```tsx
+  <div className="w-8 text-center text-gray-500 font-mono text-xs font-bold pl-2">
+  ```
+
+- **Line 130**: `text-gray-`
+  ```tsx
+  <span className="group-hover:hidden text-gray-600">
+  ```
+
+- **Line 156**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 truncate hover:underline">
+  ```
+
+- **Line 161**: `text-gray-`
+  ```tsx
+  <div className="hidden md:flex items-center gap-6 text-gray-500 text-xs font-medium">
+  ```
+
+---
+
+### apps/web/src/components/developer/APIPlaygroundView.tsx
+**Total instances in file**: 7
+
+- **Line 61**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 78**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 mt-1">
+  ```
+
+- **Line 84**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 125**: `text-gray-`
+  ```tsx
+  <span className="text-xs font-bold text-gray-400 bg-white/10 px-2 py-1 rounded">
+  ```
+
+- **Line 135**: `text-green-`
+  ```tsx
+  <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap overflow-auto h-full max-h-[500px]">
+  ```
+
+- **Line 139**: `bg-gray-`, `text-gray-`
+  ```tsx
+  className="absolute top-2 right-2 p-2 bg-gray-800 rounded text-gray-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
+  ```
+
+- **Line 149**: `text-gray-`
+  ```tsx
+  <div className="flex flex-col items-center justify-center h-full text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/developer/DeveloperDashboardView.tsx
+**Total instances in file**: 6
+
+- **Line 91**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 143**: `text-gray-`
+  ```tsx
+  <tr className="text-xs text-gray-500 uppercase border-b border-kodo-steel/50">
+  ```
+
+- **Line 161**: `text-gray-`
+  ```tsx
+  <td className="py-4 text-gray-400">{key.created}</td>
+  ```
+
+- **Line 162**: `text-gray-`
+  ```tsx
+  <td className="py-4 text-gray-300">{key.lastUsed}</td>
+  ```
+
+- **Line 167**: `text-gray-`
+  ```tsx
+  className="h-8 w-8 text-gray-400 hover:text-white"
+  ```
+
+- **Line 185**: `text-gray-`
+  ```tsx
+  <td colSpan={5} className="py-8 text-center text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/developer/WebhooksView.tsx
+**Total instances in file**: 5
+
+- **Line 65**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 108**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400 mt-1 flex flex-wrap gap-2">
+  ```
+
+- **Line 109**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500">Events:</span>
+  ```
+
+- **Line 113**: `text-gray-`
+  ```tsx
+  className="bg-white/5 px-1.5 rounded text-gray-300"
+  ```
+
+- **Line 118**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500 ml-2">
+  ```
+
+---
+
+### apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
+**Total instances in file**: 6
+
+- **Line 66**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 82**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-3">
+  ```
+
+- **Line 89**: `border-gray-`
+  ```tsx
+  className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors"
+  ```
+
+- **Line 93**: `border-gray-`
+  ```tsx
+  className="rounded border-gray-600 bg-transparent text-kodo-gold focus:ring-0"
+  ```
+
+- **Line 97**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">
+  ```
+
+- **Line 114**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 max-w-xs mx-auto">
+  ```
+
+---
+
+### apps/web/src/components/education/CourseCard.tsx
+**Total instances in file**: 4
+
+- **Line 25**: `bg-gray-`
+  ```tsx
+  <div className="relative aspect-video bg-gray-900 overflow-hidden">
+  ```
+
+- **Line 68**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-xs mb-3">by {course.instructor}</p>
+  ```
+
+- **Line 73**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-xs text-gray-400">
+  ```
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-1 text-xs text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/education/CourseDetailView.tsx
+**Total instances in file**: 18
+
+- **Line 51**: `text-gray-`
+  ```tsx
+  className="pl-0 text-gray-400 hover:text-white"
+  ```
+
+- **Line 65**: `text-gray-`
+  ```tsx
+  <p className="text-xl text-gray-300 mb-6 font-light">
+  ```
+
+- **Line 69**: `text-gray-`
+  ```tsx
+  <div className="flex flex-wrap items-center gap-6 text-sm text-gray-400 mb-6">
+  ```
+
+- **Line 93**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase">
+  ```
+
+- **Line 109**: `text-gray-`, `text-gray-`
+  ```tsx
+  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
+  ```
+
+- **Line 125**: `text-gray-`
+  ```tsx
+  <div key={i} className="flex gap-3 text-sm text-gray-300">
+  ```
+
+- **Line 137**: `text-gray-`
+  ```tsx
+  <ul className="list-disc pl-5 space-y-1 text-sm text-gray-400">
+  ```
+
+- **Line 148**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between items-center text-sm text-gray-400 mb-2">
+  ```
+
+- **Line 185**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">
+  ```
+
+- **Line 198**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-3 text-sm text-gray-300">
+  ```
+
+- **Line 208**: `text-gray-`
+  ```tsx
+  <Lock className="w-3 h-3 text-gray-500" />
+  ```
+
+- **Line 210**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">
+  ```
+
+- **Line 243**: `text-gray-`
+  ```tsx
+  className={`w-3 h-3 ${i < review.rating ? 'fill-current' : 'text-gray-700'}`}
+  ```
+
+- **Line 248**: `text-gray-`
+  ```tsx
+  <span className="ml-auto text-xs text-gray-500">
+  ```
+
+- **Line 252**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-300">{review.comment}</p>
+  ```
+
+- **Line 291**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-xs mb-6 line-through">
+  ```
+
+- **Line 313**: `text-gray-`
+  ```tsx
+  <p className="text-center text-xs text-gray-500">
+  ```
+
+- **Line 323**: `text-gray-`
+  ```tsx
+  <ul className="text-sm text-gray-400 space-y-2">
+  ```
+
+---
+
+### apps/web/src/components/education/CourseLearningView.tsx
+**Total instances in file**: 11
+
+- **Line 124**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400 font-mono hidden md:block">
+  ```
+
+- **Line 149**: `text-gray-`
+  ```tsx
+  <p className="text-gray-500">Video Player Placeholder</p>
+  ```
+
+- **Line 150**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-600 mt-2">
+  ```
+
+- **Line 174**: `text-gray-`
+  ```tsx
+  <p className="text-gray-300 leading-relaxed">
+  ```
+
+- **Line 211**: `text-gray-`, `text-gray-`
+  ```tsx
+  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
+  ```
+
+- **Line 219**: `text-gray-`
+  ```tsx
+  <div className="text-gray-300 space-y-4">
+  ```
+
+- **Line 283**: `text-gray-`
+  ```tsx
+  <div className="p-4 bg-kodo-ink/50 text-xs font-bold text-gray-400 uppercase tracking-wider sticky top-0 backdrop-blur-sm z-10">
+  ```
+
+- **Line 301**: `text-gray-`
+  ```tsx
+  className={`w-4 h-4 ${isActive ? 'text-kodo-cyan' : 'text-gray-500'}`}
+  ```
+
+- **Line 304**: `text-gray-`
+  ```tsx
+  <HelpCircle className="w-4 h-4 text-gray-500" />
+  ```
+
+- **Line 309**: `text-gray-`
+  ```tsx
+  className={`text-sm font-medium leading-snug ${isActive ? 'text-white' : 'text-gray-300'}`}
+  ```
+
+- **Line 313**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 mt-1 flex items-center gap-2">
+  ```
+
+---
+
+### apps/web/src/components/education/MyCoursesView.tsx
+**Total instances in file**: 4
+
+- **Line 93**: `bg-gray-`
+  ```tsx
+  <div className="w-full bg-gray-700 h-2 rounded-full mb-4 max-w-md mx-auto md:mx-0">
+  ```
+
+- **Line 113**: `text-gray-`, `text-gray-`
+  ```tsx
+  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'in_progress' ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
+  ```
+
+- **Line 119**: `text-gray-`, `text-gray-`
+  ```tsx
+  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === 'completed' ? 'border-kodo-lime text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
+  ```
+
+- **Line 136**: `text-gray-`
+  ```tsx
+  <div className="col-span-full text-center py-20 text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/education/modals/CertificateModal.tsx
+**Total instances in file**: 14
+
+- **Line 41**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 45**: `bg-gray-`
+  ```tsx
+  <div className="p-8 bg-gray-900 flex justify-center">
+  ```
+
+- **Line 47**: `border-gray-`
+  ```tsx
+  <div className="w-full aspect-[1.414] bg-white text-black p-8 relative shadow-2xl max-w-2xl border-8 border-double border-gray-300">
+  ```
+
+- **Line 50**: `text-gray-`
+  ```tsx
+  <h1 className="text-4xl font-display font-bold text-gray-900 mb-2 uppercase tracking-widest">
+  ```
+
+- **Line 53**: `text-gray-`
+  ```tsx
+  <p className="text-sm font-serif italic text-gray-500">
+  ```
+
+- **Line 58**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-600 mb-2">
+  ```
+
+- **Line 61**: `border-gray-`
+  ```tsx
+  <h2 className="text-3xl font-script font-bold text-kodo-cyan-dim mb-6 border-b-2 border-gray-200 pb-2 px-8">
+  ```
+
+- **Line 65**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-600 mb-2">
+  ```
+
+- **Line 68**: `text-gray-`
+  ```tsx
+  <h3 className="text-xl font-bold text-gray-800 mb-8 max-w-md leading-tight">
+  ```
+
+- **Line 72**: `border-gray-`
+  ```tsx
+  <div className="flex justify-between w-full mt-auto pt-8 border-t border-gray-300">
+  ```
+
+- **Line 74**: `text-gray-`
+  ```tsx
+  <p className="text-xs font-bold text-gray-900">
+  ```
+
+- **Line 77**: `text-gray-`
+  ```tsx
+  <p className="text-[10px] text-gray-500 uppercase">Date</p>
+  ```
+
+- **Line 80**: `bg-gray-`
+  ```tsx
+  <div className="h-8 w-24 bg-gray-200 mb-1 opacity-50"></div>{' '}
+  ```
+
+- **Line 82**: `text-gray-`
+  ```tsx
+  <p className="text-[10px] text-gray-500 uppercase">
+  ```
+
+---
+
+### apps/web/src/components/education/modals/QuizModal.tsx
+**Total instances in file**: 6
+
+- **Line 79**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 mb-6">
+  ```
+
+- **Line 114**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 130**: `text-gray-`
+  ```tsx
+  <span className="text-xs font-bold text-gray-500 uppercase mb-2 block">
+  ```
+
+- **Line 145**: `text-gray-`, `border-gray-`
+  ```tsx
+  : 'bg-kodo-ink border-kodo-steel text-gray-300 hover:bg-white/5 hover:border-gray-500'
+  ```
+
+- **Line 150**: `border-gray-`, `text-gray-`
+  ```tsx
+  className={`w-6 h-6 rounded-full border flex items-center justify-center text-xs font-bold ${selectedAnswers[currentQuestionIndex] === idx ? 'bg-kodo-cyan border-kodo-cyan text-black' : 'border-gray-500 text-gray-500'}`}
+  ```
+
+- **Line 163**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/forms/RegisterForm.tsx
+**Total instances in file**: 4
+
+- **Line 135**: `border-green-`
+  ```tsx
+  ? 'border-green-500 focus-visible:ring-green-500'
+  ```
+
+- **Line 136**: `border-red-`
+  ```tsx
+  : 'border-red-500 focus-visible:ring-red-500'),
+  ```
+
+- **Line 143**: `text-green-`
+  ```tsx
+  className="h-5 w-5 text-green-500"
+  ```
+
+- **Line 147**: `text-red-`
+  ```tsx
+  <XCircle className="h-5 w-5 text-red-500" aria-hidden="true" />
+  ```
+
+---
+
+### apps/web/src/components/gamification/AchievementCard.tsx
+**Total instances in file**: 7
+
+- **Line 32**: `text-gray-`
+  ```tsx
+  <div className="absolute top-2 right-2 text-gray-500">
+  ```
+
+- **Line 41**: `from-gray-`, `border-gray-`, `text-gray-`
+  ```tsx
+  className={`rounded-full bg-gradient-to-br from-gray-800 to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-kodo-gold w-16 h-16 text-3xl shadow-[0_0_15px_rgba(234,179,8,0.3)]' : 'border-gray-700 w-12 h-12 text-xl text-gray-500'}`}
+  ```
+
+- **Line 48**: `text-gray-`
+  ```tsx
+  className={`font-bold truncate ${isUnlocked ? 'text-white' : 'text-gray-400'}`}
+  ```
+
+- **Line 52**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 line-clamp-2 mb-2">
+  ```
+
+- **Line 57**: `bg-gray-`
+  ```tsx
+  <div className="w-full bg-gray-800 h-1.5 rounded-full overflow-hidden">
+  ```
+
+- **Line 59**: `bg-gray-`
+  ```tsx
+  className={`h-full transition-all duration-500 ${isUnlocked ? 'bg-kodo-gold' : 'bg-gray-600'}`}
+  ```
+
+- **Line 64**: `text-gray-`
+  ```tsx
+  <span className={isUnlocked ? 'text-kodo-gold' : 'text-gray-500'}>
+  ```
+
+---
+
+### apps/web/src/components/gamification/AchievementsView.tsx
+**Total instances in file**: 1
+
+- **Line 61**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+---
+
+### apps/web/src/components/gamification/LeaderboardView.tsx
+**Total instances in file**: 7
+
+- **Line 40**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 50**: `text-gray-`
+  ```tsx
+  className={`px-4 py-2 rounded text-xs font-bold uppercase transition-all ${period === p ? 'bg-kodo-gold text-black shadow-lg' : 'text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 75**: `border-gray-`
+  ```tsx
+  className={`w-20 h-20 md:w-24 md:h-24 rounded-full overflow-hidden border-4 ${i === 1 ? 'border-kodo-gold' : i === 0 ? 'border-gray-300' : 'border-orange-400'}`}
+  ```
+
+- **Line 107**: `text-gray-`
+  ```tsx
+  <tr className="border-b border-kodo-steel bg-kodo-ink text-xs font-bold text-gray-500 uppercase tracking-wider">
+  ```
+
+- **Line 121**: `text-gray-`
+  ```tsx
+  <td className="p-4 text-center font-bold font-mono text-gray-400">
+  ```
+
+- **Line 136**: `text-gray-`
+  ```tsx
+  <span className="bg-kodo-slate px-2 py-1 rounded text-xs font-mono text-gray-300">
+  ```
+
+- **Line 154**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500 flex items-center justify-center">
+  ```
+
+---
+
+### apps/web/src/components/gamification/ProfileXPView.tsx
+**Total instances in file**: 8
+
+- **Line 81**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm">
+  ```
+
+- **Line 89**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">
+  ```
+
+- **Line 104**: `text-gray-`
+  ```tsx
+  <div className="bg-black/30 px-3 py-1 rounded text-xs text-gray-400">
+  ```
+
+- **Line 110**: `text-gray-`
+  ```tsx
+  <div className="bg-black/30 px-3 py-1 rounded text-xs text-gray-400">
+  ```
+
+- **Line 126**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 137**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 148**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 192**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-xs text-gray-500 mt-2">
+  ```
+
+---
+
+### apps/web/src/components/gamification/XPBar.tsx
+**Total instances in file**: 2
+
+- **Line 44**: `text-gray-`
+  ```tsx
+  <span className="text-gray-400">
+  ```
+
+- **Line 67**: `text-gray-`
+  ```tsx
+  <div className="text-right text-[10px] text-gray-500 mt-1 font-mono">
+  ```
+
+---
+
+### apps/web/src/components/inventory/AddEquipmentView.tsx
+**Total instances in file**: 5
+
+- **Line 59**: `text-gray-`
+  ```tsx
+  <div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-kodo-cyan cursor-pointer transition-colors group mb-4">
+  ```
+
+- **Line 75**: `text-gray-`
+  ```tsx
+  <FileText className="w-4 h-4 text-gray-400" /> Documents
+  ```
+
+- **Line 78**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 mt-2 text-center">
+  ```
+
+- **Line 92**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+- **Line 162**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+---
+
+### apps/web/src/components/inventory/EquipmentCard.tsx
+**Total instances in file**: 3
+
+- **Line 19**: `text-gray-`, `bg-gray-`
+  ```tsx
+  Sold: 'text-gray-400 bg-gray-500/10',
+  ```
+
+- **Line 29**: `bg-gray-`
+  ```tsx
+  <div className="relative aspect-square bg-gray-900 overflow-hidden">
+  ```
+
+- **Line 56**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-1 text-gray-400">
+  ```
+
+---
+
+### apps/web/src/components/inventory/EquipmentDetailView.tsx
+**Total instances in file**: 18
+
+- **Line 65**: `text-gray-`
+  ```tsx
+  <div className="text-center py-20 text-gray-500">Item not found</div>
+  ```
+
+- **Line 83**: `text-gray-`
+  ```tsx
+  className="pl-0 text-gray-400 hover:text-white"
+  ```
+
+- **Line 127**: `bg-gray-`
+  ```tsx
+  className={`w-2 h-2 rounded-full ${i === activeImgIndex ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
+  ```
+
+- **Line 143**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500 block text-xs uppercase">
+  ```
+
+- **Line 150**: `text-gray-`
+  ```tsx
+  <p className="text-gray-500">No specs defined.</p>
+  ```
+
+- **Line 162**: `bg-gray-`, `text-gray-`
+  ```tsx
+  className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${item.status === 'Active' ? 'bg-kodo-lime/10 text-kodo-lime' : 'bg-gray-700 text-gray-300'}`}
+  ```
+
+- **Line 174**: `text-gray-`
+  ```tsx
+  <div className="flex gap-6 text-sm text-gray-400 mb-6 font-mono bg-kodo-ink p-4 rounded-lg border border-kodo-steel/50">
+  ```
+
+- **Line 176**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] uppercase font-bold text-gray-500">
+  ```
+
+- **Line 182**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] uppercase font-bold text-gray-500">
+  ```
+
+- **Line 188**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] uppercase font-bold text-gray-500">
+  ```
+
+- **Line 199**: `border-gray-`
+  ```tsx
+  <h3 className="font-bold text-white mb-4 border-b border-gray-700 pb-2 flex items-center gap-2">
+  ```
+
+- **Line 205**: `text-gray-`
+  ```tsx
+  <span className="block text-xs text-gray-500 uppercase">
+  ```
+
+- **Line 216**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500">Support: </span>
+  ```
+
+- **Line 229**: `text-gray-`
+  ```tsx
+  <FileText className="w-4 h-4 text-gray-400" /> Documentation
+  ```
+
+- **Line 239**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">{doc.name}</span>
+  ```
+
+- **Line 244**: `text-gray-`
+  ```tsx
+  className="h-8 w-8 text-gray-500 hover:text-white"
+  ```
+
+- **Line 268**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">{log.date}</span>
+  ```
+
+- **Line 270**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 mt-1">{log.notes}</p>
+  ```
+
+---
+
+### apps/web/src/components/inventory/InventoryView.tsx
+**Total instances in file**: 6
+
+- **Line 59**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 93**: `text-gray-`
+  ```tsx
+  <Filter className="w-4 h-4 text-gray-500 ml-2" />
+  ```
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  className="bg-transparent text-sm text-gray-300 focus:outline-none p-1 cursor-pointer"
+  ```
+
+- **Line 108**: `text-gray-`
+  ```tsx
+  <Box className="w-4 h-4 text-gray-500 ml-2" />
+  ```
+
+- **Line 110**: `text-gray-`
+  ```tsx
+  className="bg-transparent text-sm text-gray-300 focus:outline-none p-1 cursor-pointer"
+  ```
+
+- **Line 139**: `text-gray-`
+  ```tsx
+  <div className="col-span-full text-center py-20 text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx
+**Total instances in file**: 3
+
+- **Line 80**: `border-gray-`, `border-gray-`
+  ```tsx
+  className="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 last:border-0"
+  ```
+
+- **Line 82**: `text-gray-`, `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 85**: `text-gray-`, `text-gray-`, `bg-gray-`, `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded">
+  ```
+
+---
+
+### apps/web/src/components/layout/AudioPlayer.tsx
+**Total instances in file**: 15
+
+- **Line 72**: `text-gray-`
+  ```tsx
+  className="w-5 h-5 text-gray-400 cursor-pointer hover:text-white"
+  ```
+
+- **Line 80**: `text-gray-`
+  ```tsx
+  className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${queueTab === 'up-next' ? 'text-kodo-cyan border-b-2 border-kodo-cyan bg-white/5' : 'text-gray-500 hover:text-white'}`}
+  ```
+
+- **Line 86**: `text-gray-`
+  ```tsx
+  className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider transition-colors ${queueTab === 'history' ? 'text-kodo-magenta border-b-2 border-kodo-magenta bg-white/5' : 'text-gray-500 hover:text-white'}`}
+  ```
+
+- **Line 110**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400 truncate">
+  ```
+
+- **Line 115**: `text-gray-`
+  ```tsx
+  className="p-2 hover:bg-white/10 rounded-full text-gray-400 hover:text-kodo-magenta"
+  ```
+
+- **Line 125**: `text-gray-`
+  ```tsx
+  <div className="text-center text-gray-500 py-12 flex flex-col items-center">
+  ```
+
+- **Line 140**: `text-gray-`
+  ```tsx
+  <div className="cursor-grab active:cursor-grabbing text-gray-600 hover:text-white p-1">
+  ```
+
+- **Line 157**: `text-gray-`
+  ```tsx
+  <div className="text-sm font-medium text-gray-300 group-hover:text-white truncate">
+  ```
+
+- **Line 160**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 truncate">
+  ```
+
+- **Line 178**: `text-red-`
+  ```tsx
+  className="p-1.5 hover:text-red-500"
+  ```
+
+- **Line 197**: `text-gray-`
+  ```tsx
+  <div className="text-center text-gray-500 py-12 flex flex-col items-center">
+  ```
+
+- **Line 215**: `text-gray-`
+  ```tsx
+  <div className="text-sm font-medium text-gray-300 group-hover:text-white truncate">
+  ```
+
+- **Line 218**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 truncate">
+  ```
+
+- **Line 223**: `text-gray-`
+  ```tsx
+  className="p-1.5 text-gray-400 hover:text-kodo-cyan opacity-0 group-hover:opacity-100 transition-opacity"
+  ```
+
+- **Line 242**: `text-gray-`, `text-red-`
+  ```tsx
+  className="w-full text-xs text-gray-400 hover:text-red-400"
+  ```
+
+---
+
+### apps/web/src/components/layout/Header.tsx
+**Total instances in file**: 1
+
+- **Line 209**: `text-red-`, `text-red-`, `bg-red-`
+  ```tsx
+  className="flex items-center gap-3 w-full px-3 py-2 text-sm text-red-400/80 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all group cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
+  ```
+
+---
+
+### apps/web/src/components/layout/Navbar.tsx
+**Total instances in file**: 6
+
+- **Line 174**: `from-gray-`, `to-gray-`
+  ```tsx
+  <div className="w-9 h-9 rounded-full bg-gradient-to-tr from-gray-700 to-gray-600 p-[1px] hover:ring-2 hover:ring-kodo-cyan transition-all">
+  ```
+
+- **Line 192**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500">Pro Plan</p>
+  ```
+
+- **Line 199**: `text-gray-`
+  ```tsx
+  className="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
+  ```
+
+- **Line 208**: `text-gray-`
+  ```tsx
+  className="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
+  ```
+
+- **Line 217**: `text-gray-`
+  ```tsx
+  className="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
+  ```
+
+- **Line 226**: `text-gray-`
+  ```tsx
+  className="w-full text-left px-4 py-2.5 text-sm text-gray-300 hover:bg-white/5 hover:text-white flex items-center gap-3 transition-colors"
+  ```
+
+---
+
+### apps/web/src/components/layout/Sidebar.tsx
+**Total instances in file**: 1
+
+- **Line 324**: `text-red-`, `text-red-`, `bg-red-`
+  ```tsx
+  className="w-full flex items-center gap-3 px-4 py-2.5 text-red-400/80 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all text-sm mt-1 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
+  ```
+
+---
+
+### apps/web/src/components/library/AutoMetadataDetectionModal.tsx
+**Total instances in file**: 6
+
+- **Line 52**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 69**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mt-2">
+  ```
+
+- **Line 80**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold mb-1">
+  ```
+
+- **Line 88**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold mb-1">
+  ```
+
+- **Line 96**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold mb-1">
+  ```
+
+- **Line 104**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold mb-1">
+  ```
+
+---
+
+### apps/web/src/components/library/WatermarkSettingsModal.tsx
+**Total instances in file**: 6
+
+- **Line 56**: `bg-gray-`
+  ```tsx
+  className={`w-10 h-5 rounded-full relative transition-colors ${enabled ? 'bg-kodo-magenta' : 'bg-gray-600'}`}
+  ```
+
+- **Line 72**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 80**: `text-gray-`, `border-gray-`
+  ```tsx
+  className={`h-10 rounded border text-[10px] uppercase font-bold transition-all ${position === i ? 'bg-kodo-magenta border-kodo-magenta text-white' : 'bg-kodo-void border-kodo-steel text-gray-500 hover:border-gray-400'}`}
+  ```
+
+- **Line 84**: `bg-gray-`
+  ```tsx
+  className={`w-2 h-2 rounded-full mx-auto ${position === i ? 'bg-white' : 'bg-gray-600'}`}
+  ```
+
+- **Line 92**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-xs text-gray-400 mb-2">
+  ```
+
+- **Line 132**: `bg-gray-`
+  ```tsx
+  <div className="w-3/4 aspect-square bg-gray-800 rounded-lg relative overflow-hidden shadow-2xl">
+  ```
+
+---
+
+### apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
+**Total instances in file**: 4
+
+- **Line 82**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+  ```
+
+- **Line 126**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">
+  ```
+
+- **Line 131**: `border-gray-`
+  ```tsx
+  className={`w-5 h-5 rounded-full border flex items-center justify-center ${selectedIds.includes(playlist.id) ? 'bg-kodo-cyan border-kodo-cyan' : 'border-gray-600'}`}
+  ```
+
+---
+
+### apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
+**Total instances in file**: 7
+
+- **Line 41**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 46**: `text-gray-`
+  ```tsx
+  <div className="w-40 h-40 bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-lg flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-kodo-cyan cursor-pointer transition-colors flex-shrink-0">
+  ```
+
+- **Line 81**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 89**: `bg-gray-`
+  ```tsx
+  className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
+  ```
+
+- **Line 103**: `text-gray-`
+  ```tsx
+  className={`w-4 h-4 ${isCollaborative ? 'text-kodo-lime' : 'text-gray-400'}`}
+  ```
+
+- **Line 107**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 113**: `bg-gray-`
+  ```tsx
+  className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-kodo-lime' : 'bg-gray-600'}`}
+  ```
+
+---
+
+### apps/web/src/components/library/playlists/EditPlaylistModal.tsx
+**Total instances in file**: 4
+
+- **Line 53**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mb-6">
+  ```
+
+- **Line 62**: `bg-red-`, `bg-red-`, `border-red-`
+  ```tsx
+  className="bg-red-600 hover:bg-red-700 border-red-500"
+  ```
+
+- **Line 83**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 130**: `bg-gray-`
+  ```tsx
+  className={`w-8 h-4 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
+  ```
+
+---
+
+### apps/web/src/components/library/playlists/PlaylistDetailView.tsx
+**Total instances in file**: 13
+
+- **Line 121**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm mb-6 max-w-2xl">
+  ```
+
+- **Line 125**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-4 text-sm text-gray-300 font-medium mb-6">
+  ```
+
+- **Line 127**: `bg-gray-`
+  ```tsx
+  <div className="w-6 h-6 rounded-full bg-gray-700"></div>
+  ```
+
+- **Line 132**: `bg-gray-`
+  ```tsx
+  <span className="w-1 h-1 bg-gray-500 rounded-full"></span>
+  ```
+
+- **Line 134**: `bg-gray-`
+  ```tsx
+  <span className="w-1 h-1 bg-gray-500 rounded-full"></span>
+  ```
+
+- **Line 160**: `text-gray-`
+  ```tsx
+  className="border border-white/10 hover:border-white text-gray-300 hover:text-white"
+  ```
+
+- **Line 169**: `text-gray-`
+  ```tsx
+  className="border border-white/10 hover:border-white text-gray-300 hover:text-white"
+  ```
+
+- **Line 181**: `text-gray-`
+  ```tsx
+  <div className="grid grid-cols-[auto_1fr_auto_auto_auto] gap-4 text-xs font-bold text-gray-500 uppercase px-4 pb-2 border-b border-white/10 mb-2">
+  ```
+
+- **Line 201**: `text-gray-`
+  ```tsx
+  <div className="w-8 text-center flex justify-center text-gray-500 group-hover:text-white cursor-grab active:cursor-grabbing">
+  ```
+
+- **Line 217**: `text-gray-`
+  ```tsx
+  <div className="text-gray-400 text-xs truncate hover:underline cursor-pointer">
+  ```
+
+- **Line 222**: `text-gray-`
+  ```tsx
+  <div className="hidden md:block text-gray-400 text-sm truncate">
+  ```
+
+- **Line 225**: `text-gray-`
+  ```tsx
+  <div className="hidden sm:block text-gray-500 text-xs">
+  ```
+
+- **Line 228**: `text-gray-`
+  ```tsx
+  <div className="text-right pr-2 flex items-center justify-end gap-4 text-sm text-gray-400 font-mono">
+  ```
+
+---
+
+### apps/web/src/components/library/playlists/PlaylistsView.tsx
+**Total instances in file**: 7
+
+- **Line 97**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 131**: `bg-gray-`
+  ```tsx
+  <div className="aspect-square relative bg-gray-900">
+  ```
+
+- **Line 138**: `text-gray-`
+  ```tsx
+  <div className="w-full h-full flex items-center justify-center text-gray-600">
+  ```
+
+- **Line 157**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 mb-3 line-clamp-1">
+  ```
+
+- **Line 160**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between items-center text-[10px] font-bold text-gray-500 uppercase">
+  ```
+
+- **Line 163**: `text-gray-`
+  ```tsx
+  <Globe className="w-3 h-3 text-gray-600" />
+  ```
+
+- **Line 165**: `text-gray-`
+  ```tsx
+  <Lock className="w-3 h-3 text-gray-600" />
+  ```
+
+---
+
+### apps/web/src/components/library/playlists/QueueView.tsx
+**Total instances in file**: 11
+
+- **Line 64**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 90**: `text-gray-`
+  ```tsx
+  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-3">
+  ```
+
+- **Line 126**: `text-gray-`
+  ```tsx
+  <div className="text-gray-500 font-mono text-sm hidden md:block">
+  ```
+
+- **Line 136**: `text-gray-`
+  ```tsx
+  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest">
+  ```
+
+- **Line 144**: `text-gray-`
+  ```tsx
+  className={`text-xs font-bold ${autoplay ? 'text-kodo-lime' : 'text-gray-500'}`}
+  ```
+
+- **Line 149**: `bg-gray-`
+  ```tsx
+  className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-kodo-lime' : 'bg-gray-700'}`}
+  ```
+
+- **Line 160**: `text-gray-`
+  ```tsx
+  <div className="text-center py-12 border-2 border-dashed border-kodo-steel rounded-xl text-gray-500">
+  ```
+
+- **Line 181**: `text-gray-`
+  ```tsx
+  <div className="text-gray-600 cursor-grab active:cursor-grabbing hover:text-white p-1">
+  ```
+
+- **Line 200**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400 truncate">
+  ```
+
+- **Line 204**: `text-gray-`
+  ```tsx
+  <div className="text-gray-500 font-mono text-xs hidden sm:block">
+  ```
+
+- **Line 208**: `text-gray-`
+  ```tsx
+  className="p-2 text-gray-500 hover:text-kodo-red opacity-0 group-hover:opacity-100 transition-opacity"
+  ```
+
+---
+
+### apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
+**Total instances in file**: 4
+
+- **Line 38**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 52**: `border-gray-`
+  ```tsx
+  className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500"
+  ```
+
+- **Line 65**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 71**: `bg-gray-`
+  ```tsx
+  className={`w-10 h-5 rounded-full relative transition-colors ${isPublic ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
+  ```
+
+---
+
+### apps/web/src/components/live/LiveStreamDetailView.tsx
+**Total instances in file**: 4
+
+- **Line 52**: `text-gray-`
+  ```tsx
+  color: 'text-gray-400',
+  ```
+
+- **Line 170**: `text-gray-`
+  ```tsx
+  <Settings className="w-4 h-4 text-gray-400 cursor-pointer hover:text-white" />
+  ```
+
+- **Line 181**: `text-gray-`
+  ```tsx
+  <span className="text-gray-300">{msg.text}</span>
+  ```
+
+- **Line 203**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] text-gray-500">Slow Mode: Off</span>
+  ```
+
+---
+
+### apps/web/src/components/live/modals/TipStreamerModal.tsx
+**Total instances in file**: 9
+
+- **Line 46**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 53**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 61**: `text-gray-`
+  ```tsx
+  className={`flex-1 py-2 rounded font-bold border transition-colors ${amount === val ? 'bg-kodo-gold text-black border-kodo-gold' : 'bg-kodo-void border-kodo-steel text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 68**: `text-gray-`
+  ```tsx
+  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 font-bold">
+  ```
+
+- **Line 83**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 93**: `text-gray-`
+  ```tsx
+  <p className="text-right text-xs text-gray-500 mt-1">
+  ```
+
+- **Line 100**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 106**: `text-gray-`
+  ```tsx
+  className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'card' ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-void border-kodo-steel text-gray-400'}`}
+  ```
+
+- **Line 112**: `text-gray-`
+  ```tsx
+  className={`flex-1 flex items-center justify-center gap-2 py-2 rounded border ${paymentMethod === 'crypto' ? 'bg-kodo-magenta/10 border-kodo-magenta text-kodo-magenta' : 'bg-kodo-void border-kodo-steel text-gray-400'}`}
+  ```
+
+---
+
+### apps/web/src/components/marketplace/LicenceCard.tsx
+**Total instances in file**: 2
+
+- **Line 42**: `text-gray-`
+  ```tsx
+  <li key={i} className="flex items-start gap-2 text-sm text-gray-300">
+  ```
+
+- **Line 48**: `text-gray-`
+  ```tsx
+  <li className="text-xs text-gray-500 pl-6">
+  ```
+
+---
+
+### apps/web/src/components/marketplace/ProductCard.tsx
+**Total instances in file**: 3
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-xs mb-4 flex items-center gap-1">
+  ```
+
+- **Line 97**: `text-gray-`
+  ```tsx
+  <span className="text-gray-300 hover:underline">
+  ```
+
+- **Line 105**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500">({product.reviewCount || 0})</span>
+  ```
+
+---
+
+### apps/web/src/components/marketplace/ProductDetailView.tsx
+**Total instances in file**: 19
+
+- **Line 65**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500 text-sm">
+  ```
+
+- **Line 93**: `bg-gray-`
+  ```tsx
+  <div className="h-1 bg-gray-600 rounded-full overflow-hidden">
+  ```
+
+- **Line 125**: `text-gray-`
+  ```tsx
+  className="border border-kodo-steel text-gray-400 hover:text-kodo-magenta"
+  ```
+
+- **Line 132**: `text-gray-`
+  ```tsx
+  className="border border-kodo-steel text-gray-400 hover:text-white"
+  ```
+
+- **Line 141**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-4 text-sm text-gray-400">
+  ```
+
+- **Line 155**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 161**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 167**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 173**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 182**: `text-gray-`
+  ```tsx
+  <h3 className="text-sm font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
+  ```
+
+- **Line 201**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400 uppercase font-bold">
+  ```
+
+- **Line 228**: `text-gray-`
+  ```tsx
+  <div className="prose prose-invert max-w-none text-gray-300">
+  ```
+
+- **Line 255**: `bg-gray-`
+  ```tsx
+  className="w-10 h-10 rounded-full bg-gray-700"
+  ```
+
+- **Line 266**: `text-gray-`
+  ```tsx
+  className={`w-3 h-3 ${i < review.rating ? 'fill-current' : 'text-gray-600'}`}
+  ```
+
+- **Line 270**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">
+  ```
+
+- **Line 274**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-300">{review.comment}</p>
+  ```
+
+- **Line 279**: `text-gray-`
+  ```tsx
+  <p className="text-gray-500 italic text-center py-4">
+  ```
+
+- **Line 314**: `bg-gray-`
+  ```tsx
+  className="w-16 h-16 rounded bg-gray-800 object-cover"
+  ```
+
+- **Line 320**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500">{p.type}</p>
+  ```
+
+---
+
+### apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
+**Total instances in file**: 6
+
+- **Line 29**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 39**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm">
+  ```
+
+- **Line 57**: `text-gray-`
+  ```tsx
+  className="flex items-start gap-3 text-sm text-gray-300"
+  ```
+
+- **Line 73**: `text-gray-`
+  ```tsx
+  <li className="flex items-start gap-3 text-sm text-gray-400">
+  ```
+
+- **Line 79**: `text-gray-`
+  ```tsx
+  <li className="flex items-start gap-3 text-sm text-gray-400">
+  ```
+
+- **Line 88**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 italic">
+  ```
+
+---
+
+### apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
+**Total instances in file**: 4
+
+- **Line 43**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 49**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm mb-2">
+  ```
+
+- **Line 68**: `text-gray-`
+  ```tsx
+  : 'text-gray-600'
+  ```
+
+- **Line 76**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+---
+
+### apps/web/src/components/modals/CreatorModal.tsx
+**Total instances in file**: 11
+
+- **Line 48**: `text-gray-`
+  ```tsx
+  className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'track' ? 'bg-kodo-cyan text-black' : 'text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 54**: `text-gray-`
+  ```tsx
+  className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'product' ? 'bg-kodo-magenta text-white' : 'text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 60**: `text-gray-`
+  ```tsx
+  className={`px-4 py-1.5 rounded text-sm font-bold transition-all flex items-center gap-2 ${activeTab === 'course' ? 'bg-kodo-gold text-black' : 'text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 66**: `text-gray-`
+  ```tsx
+  <button onClick={onClose} className="text-gray-400 hover:text-white">
+  ```
+
+- **Line 79**: `text-gray-`
+  ```tsx
+  className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${step >= i ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-gray-500'}`}
+  ```
+
+- **Line 91**: `text-gray-`
+  ```tsx
+  <h4 className="font-bold text-gray-400 text-sm mb-2 uppercase">
+  ```
+
+- **Line 94**: `text-gray-`
+  ```tsx
+  <ul className="text-xs text-gray-500 space-y-1">
+  ```
+
+- **Line 109**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2 font-body">
+  ```
+
+- **Line 117**: `text-gray-`
+  ```tsx
+  <button className="p-3 rounded border border-kodo-steel bg-kodo-slate text-gray-400 flex flex-col items-center justify-center gap-2 hover:border-white hover:text-white">
+  ```
+
+- **Line 121**: `text-gray-`
+  ```tsx
+  <button className="p-3 rounded border border-kodo-steel bg-kodo-slate text-gray-400 flex flex-col items-center justify-center gap-2 hover:border-white hover:text-white">
+  ```
+
+- **Line 136**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 mb-6">
+  ```
+
+---
+
+### apps/web/src/components/notifications/NotificationBell.tsx
+**Total instances in file**: 2
+
+- **Line 57**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400">{unreadCount} unread</p>
+  ```
+
+- **Line 71**: `text-gray-`
+  ```tsx
+  <div className="text-center py-10 text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/notifications/NotificationItem.tsx
+**Total instances in file**: 3
+
+- **Line 38**: `text-gray-`
+  ```tsx
+  return <Info className="w-4 h-4 text-gray-400" />;
+  ```
+
+- **Line 63**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-200 leading-relaxed">
+  ```
+
+- **Line 66**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500 font-mono mt-1 block">
+  ```
+
+---
+
+### apps/web/src/components/player/LyricsPanel.tsx
+**Total instances in file**: 2
+
+- **Line 34**: `text-gray-`
+  ```tsx
+  <div className="flex flex-col items-center justify-center h-full text-gray-500 opacity-50">
+  ```
+
+- **Line 50**: `text-gray-`
+  ```tsx
+  className={`p-2 rounded-full backdrop-blur-md ${autoScroll ? 'bg-kodo-cyan/20 text-kodo-cyan' : 'bg-black/30 text-gray-400'}`}
+  ```
+
+---
+
+### apps/web/src/components/player/MiniPlayer.tsx
+**Total instances in file**: 7
+
+- **Line 61**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-xs truncate hover:text-white cursor-pointer">
+  ```
+
+- **Line 66**: `text-gray-`
+  ```tsx
+  className="text-gray-500 hover:text-kodo-magenta transition-colors ml-2"
+  ```
+
+- **Line 78**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] font-mono text-gray-500 w-8 text-right">
+  ```
+
+- **Line 97**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] font-mono text-gray-500 w-8">
+  ```
+
+- **Line 106**: `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-kodo-magenta transition-colors hidden xl:block"
+  ```
+
+- **Line 113**: `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-kodo-lime transition-colors"
+  ```
+
+- **Line 120**: `text-gray-`
+  ```tsx
+  className={`text-gray-400 hover:text-kodo-cyan transition-colors ${isQueueOpen ? 'text-kodo-cyan' : ''}`}
+  ```
+
+---
+
+### apps/web/src/components/player/PlaybackSpeedModal.tsx
+**Total instances in file**: 5
+
+- **Line 27**: `text-gray-`
+  ```tsx
+  <X className="w-4 h-4 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 34**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-xs text-gray-400">
+  ```
+
+- **Line 58**: `text-gray-`
+  ```tsx
+  className={`px-2 py-1.5 rounded text-xs font-bold transition-all ${playbackRate === rate ? 'bg-kodo-gold text-black' : 'bg-kodo-slate text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 71**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] text-gray-500">
+  ```
+
+- **Line 77**: `bg-gray-`
+  ```tsx
+  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-kodo-gold' : 'bg-gray-600'}`}
+  ```
+
+---
+
+### apps/web/src/components/player/PlayerControls.tsx
+**Total instances in file**: 7
+
+- **Line 51**: `text-gray-`
+  ```tsx
+  className={`transition-colors hover:text-white ${shuffle ? 'text-kodo-cyan' : 'text-gray-500'}`}
+  ```
+
+- **Line 58**: `text-gray-`
+  ```tsx
+  className={`transition-colors hover:text-white relative ${repeatMode !== 'off' ? 'text-kodo-cyan' : 'text-gray-500'}`}
+  ```
+
+- **Line 74**: `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-white transition-colors hover:scale-110"
+  ```
+
+- **Line 108**: `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-white transition-colors hover:scale-110"
+  ```
+
+- **Line 126**: `text-gray-`
+  ```tsx
+  className={`text-gray-400 hover:text-kodo-gold transition-colors ${showSpeed ? 'text-kodo-gold' : ''}`}
+  ```
+
+- **Line 136**: `text-gray-`
+  ```tsx
+  className={`text-gray-400 hover:text-kodo-cyan transition-colors ${showVisualizer ? 'text-kodo-cyan' : ''}`}
+  ```
+
+- **Line 152**: `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-white"
+  ```
+
+---
+
+### apps/web/src/components/player/VisualizerSettingsModal.tsx
+**Total instances in file**: 5
+
+- **Line 27**: `text-gray-`
+  ```tsx
+  <X className="w-4 h-4 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 34**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 42**: `text-gray-`
+  ```tsx
+  className={`px-2 py-1.5 rounded text-xs font-bold capitalize transition-all border ${visualizerSettings.mode === mode ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-slate border-transparent text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 52**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-xs text-gray-400 mb-1">
+  ```
+
+- **Line 70**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+---
+
+### apps/web/src/components/search/SearchBar.tsx
+**Total instances in file**: 10
+
+- **Line 98**: `text-gray-`
+  ```tsx
+  className={`w-5 h-5 mr-3 transition-colors ${isFocused ? 'text-kodo-cyan' : 'text-gray-500'}`}
+  ```
+
+- **Line 112**: `text-gray-`
+  ```tsx
+  className="text-gray-500 hover:text-white transition-colors"
+  ```
+
+- **Line 126**: `text-gray-`
+  ```tsx
+  <div className="px-4 py-2 text-[10px] font-bold text-gray-500 uppercase">
+  ```
+
+- **Line 135**: `text-gray-`
+  ```tsx
+  <div className="w-8 h-8 rounded bg-kodo-slate flex items-center justify-center text-gray-400">
+  ```
+
+- **Line 142**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 capitalize">
+  ```
+
+- **Line 150**: `text-gray-`
+  ```tsx
+  <div className="p-4 text-center text-gray-500 text-sm">
+  ```
+
+- **Line 158**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] font-bold text-gray-500 uppercase">
+  ```
+
+- **Line 174**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-3 text-gray-300 group-hover:text-white">
+  ```
+
+- **Line 175**: `text-gray-`
+  ```tsx
+  <Clock className="w-4 h-4 text-gray-500" />
+  ```
+
+- **Line 178**: `text-gray-`
+  ```tsx
+  <ArrowUpRight className="w-3 h-3 text-gray-600 opacity-0 group-hover:opacity-100" />
+  ```
+
+---
+
+### apps/web/src/components/seller/CreateProductView.tsx
+**Total instances in file**: 16
+
+- **Line 65**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 86**: `text-gray-`
+  ```tsx
+  <div className="aspect-square bg-kodo-ink border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center text-gray-500 hover:text-white hover:border-kodo-cyan cursor-pointer transition-colors group">
+  ```
+
+- **Line 90**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 mt-2 text-center">
+  ```
+
+- **Line 101**: `text-gray-`
+  ```tsx
+  <label className="text-xs text-gray-400 mb-1 block">
+  ```
+
+- **Line 104**: `border-gray-`
+  ```tsx
+  <div className="h-20 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-500">
+  ```
+
+- **Line 105**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">
+  ```
+
+- **Line 111**: `text-gray-`
+  ```tsx
+  <label className="text-xs text-gray-400 mb-1 block">
+  ```
+
+- **Line 114**: `border-gray-`
+  ```tsx
+  <div className="h-12 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-500">
+  ```
+
+- **Line 115**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">
+  ```
+
+- **Line 139**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+- **Line 152**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+- **Line 189**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+- **Line 192**: `text-gray-`
+  ```tsx
+  <div className="p-3 bg-kodo-ink border border-kodo-steel rounded-lg text-gray-400 text-sm">
+  ```
+
+- **Line 217**: `bg-gray-`
+  ```tsx
+  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${lic.enabled ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
+  ```
+
+- **Line 227**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 239**: `text-gray-`
+  ```tsx
+  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/seller/SellerDashboardView.tsx
+**Total instances in file**: 9
+
+- **Line 75**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 103**: `text-gray-`
+  ```tsx
+  <div className="text-gray-400 text-xs font-bold uppercase mb-1">
+  ```
+
+- **Line 118**: `text-gray-`
+  ```tsx
+  <div className="text-gray-400 text-xs font-bold uppercase mb-1">
+  ```
+
+- **Line 133**: `text-gray-`
+  ```tsx
+  <div className="text-gray-400 text-xs font-bold uppercase mb-1">
+  ```
+
+- **Line 150**: `text-gray-`
+  ```tsx
+  <div className="text-gray-400 text-xs font-bold uppercase mb-1">
+  ```
+
+- **Line 178**: `text-gray-`
+  ```tsx
+  <div className="w-8 text-center font-mono text-gray-500">
+  ```
+
+- **Line 189**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 222**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400 flex justify-between mt-1">
+  ```
+
+- **Line 226**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 mt-1">
+  ```
+
+---
+
+### apps/web/src/components/seller/modals/FlashSaleModal.tsx
+**Total instances in file**: 9
+
+- **Line 50**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 58**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 62**: `text-gray-`
+  ```tsx
+  <Percent className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+  ```
+
+- **Line 75**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 79**: `text-gray-`
+  ```tsx
+  <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+  ```
+
+- **Line 99**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-300">
+  ```
+
+- **Line 114**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase">
+  ```
+
+- **Line 141**: `text-gray-`
+  ```tsx
+  className={`text-gray-500 ${selectedIds.includes(product.id) ? 'text-kodo-gold' : ''}`}
+  ```
+
+- **Line 157**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/settings/accessibility/AccessibilitySettingsView.tsx
+**Total instances in file**: 2
+
+- **Line 35**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 135**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">{desc}</div>
+  ```
+
+---
+
+### apps/web/src/components/settings/account/AccountSettings.tsx
+**Total instances in file**: 17
+
+- **Line 73**: `text-gray-`
+  ```tsx
+  <div className="w-10 h-10 bg-kodo-slate rounded-full flex items-center justify-center text-gray-400">
+  ```
+
+- **Line 80**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">{user.email}</div>
+  ```
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  <div className="w-10 h-10 bg-kodo-slate rounded-full flex items-center justify-center text-gray-400">
+  ```
+
+- **Line 100**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">@{user.username}</div>
+  ```
+
+- **Line 123**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-bold text-gray-400 mb-3">
+  ```
+
+- **Line 147**: `text-gray-`
+  ```tsx
+  className={`flex flex-col items-center justify-center gap-2 p-3 rounded-lg border transition-all ${theme === opt.id ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-kodo-ink border-kodo-steel text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 157**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-bold text-gray-400 mb-3">
+  ```
+
+- **Line 161**: `text-gray-`
+  ```tsx
+  <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+  ```
+
+- **Line 162**: `border-gray-`
+  ```tsx
+  <select className="w-full bg-kodo-ink border border-kodo-steel rounded-lg py-2.5 pl-10 pr-4 text-white text-sm focus:border-kodo-cyan outline-none appearance-none cursor-pointer hover:border-gray-500 transition-colors">
+  ```
+
+- **Line 182**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">Email Notifications</span>
+  ```
+
+- **Line 189**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">Push Notifications</span>
+  ```
+
+- **Line 205**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300 block">
+  ```
+
+- **Line 208**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] text-gray-500">
+  ```
+
+- **Line 219**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300 block">
+  ```
+
+- **Line 222**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] text-gray-500">
+  ```
+
+- **Line 244**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm mb-6">
+  ```
+
+- **Line 251**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/settings/account/ChangeEmailModal.tsx
+**Total instances in file**: 4
+
+- **Line 45**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 52**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400">
+  ```
+
+- **Line 73**: `text-gray-`
+  ```tsx
+  <div className="bg-kodo-ink p-3 rounded text-xs text-gray-400 border border-kodo-steel">
+  ```
+
+- **Line 86**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mb-6">
+  ```
+
+---
+
+### apps/web/src/components/settings/account/ChangeUsernameModal.tsx
+**Total instances in file**: 3
+
+- **Line 55**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 72**: `text-gray-`
+  ```tsx
+  <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
+  ```
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-300">
+  ```
+
+---
+
+### apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
+**Total instances in file**: 4
+
+- **Line 47**: `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-white disabled:opacity-50"
+  ```
+
+- **Line 54**: `text-gray-`
+  ```tsx
+  <p className="text-gray-300 text-sm">
+  ```
+
+- **Line 60**: `text-gray-`
+  ```tsx
+  <ul className="text-xs text-gray-400 space-y-2 list-disc pl-4">
+  ```
+
+- **Line 87**: `bg-red-`, `bg-red-`, `border-red-`
+  ```tsx
+  className="bg-red-600 hover:bg-red-700 border-red-500 text-white"
+  ```
+
+---
+
+### apps/web/src/components/settings/account/DeleteAccountView.tsx
+**Total instances in file**: 15
+
+- **Line 43**: `text-gray-`
+  ```tsx
+  className="p-2 hover:bg-white/5 rounded-full text-gray-400 hover:text-white transition-colors"
+  ```
+
+- **Line 64**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm leading-relaxed">
+  ```
+
+- **Line 72**: `border-gray-`
+  ```tsx
+  <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors">
+  ```
+
+- **Line 75**: `border-gray-`
+  ```tsx
+  className="mt-1 bg-kodo-graphite border-gray-600 text-kodo-red focus:ring-kodo-red rounded"
+  ```
+
+- **Line 82**: `text-gray-`
+  ```tsx
+  <span className="font-bold text-gray-200 block mb-1">
+  ```
+
+- **Line 85**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500">
+  ```
+
+- **Line 92**: `border-gray-`
+  ```tsx
+  <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors">
+  ```
+
+- **Line 95**: `border-gray-`
+  ```tsx
+  className="mt-1 bg-kodo-graphite border-gray-600 text-kodo-red focus:ring-kodo-red rounded"
+  ```
+
+- **Line 102**: `text-gray-`
+  ```tsx
+  <span className="font-bold text-gray-200 block mb-1">
+  ```
+
+- **Line 105**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500">
+  ```
+
+- **Line 112**: `border-gray-`
+  ```tsx
+  <label className="flex items-start gap-3 p-4 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500 transition-colors">
+  ```
+
+- **Line 115**: `border-gray-`
+  ```tsx
+  className="mt-1 bg-kodo-graphite border-gray-600 text-kodo-red focus:ring-kodo-red rounded"
+  ```
+
+- **Line 122**: `text-gray-`
+  ```tsx
+  <span className="font-bold text-gray-200 block mb-1">
+  ```
+
+- **Line 125**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500">
+  ```
+
+- **Line 149**: `bg-red-`, `bg-red-`, `border-red-`, `bg-gray-`, `border-gray-`, `text-gray-`
+  ```tsx
+  className="w-full bg-red-600 hover:bg-red-700 text-white border-red-500 disabled:bg-gray-800 disabled:border-gray-700 disabled:text-gray-500"
+  ```
+
+---
+
+### apps/web/src/components/settings/appearance/AppearanceSettingsView.tsx
+**Total instances in file**: 12
+
+- **Line 45**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 85**: `border-gray-`
+  ```tsx
+  ${theme === opt.id ? 'border-kodo-cyan bg-kodo-cyan/5' : 'border-kodo-steel bg-kodo-ink hover:border-gray-500'}
+  ```
+
+- **Line 89**: `text-gray-`
+  ```tsx
+  className={`p-3 rounded-full ${theme === opt.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-slate text-gray-400'}`}
+  ```
+
+- **Line 94**: `text-gray-`
+  ```tsx
+  className={`font-bold ${theme === opt.id ? 'text-white' : 'text-gray-400'}`}
+  ```
+
+- **Line 133**: `border-gray-`
+  ```tsx
+  className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${density === opt.id ? 'border-kodo-magenta' : 'border-gray-500'}`}
+  ```
+
+- **Line 141**: `text-gray-`
+  ```tsx
+  className={`text-sm font-bold ${density === opt.id ? 'text-white' : 'text-gray-300'}`}
+  ```
+
+- **Line 145**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">{opt.desc}</div>
+  ```
+
+- **Line 158**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-sm text-gray-400 mb-2">
+  ```
+
+- **Line 171**: `text-gray-`
+  ```tsx
+  className="mt-4 p-4 bg-kodo-ink rounded border border-kodo-steel text-gray-300"
+  ```
+
+- **Line 205**: `text-gray-`
+  ```tsx
+  <Layout className="w-5 h-5 text-gray-400" /> Layout
+  ```
+
+- **Line 208**: `border-gray-`
+  ```tsx
+  className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-kodo-steel cursor-pointer hover:border-gray-500"
+  ```
+
+- **Line 213**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+---
+
+### apps/web/src/components/settings/backups/BackupsView.tsx
+**Total instances in file**: 9
+
+- **Line 76**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm">
+  ```
+
+- **Line 114**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400 flex gap-2">
+  ```
+
+- **Line 160**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 166**: `bg-gray-`
+  ```tsx
+  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoBackup ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
+  ```
+
+- **Line 175**: `border-gray-`
+  ```tsx
+  <div className="animate-fadeIn space-y-3 pt-2 border-t border-gray-700">
+  ```
+
+- **Line 177**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-1">
+  ```
+
+- **Line 187**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-1">
+  ```
+
+- **Line 197**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-1">
+  ```
+
+- **Line 217**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-300">
+  ```
+
+---
+
+### apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
+**Total instances in file**: 11
+
+- **Line 33**: `bg-gray-`, `text-gray-`
+  ```tsx
+  className={`w-16 h-16 rounded-full flex items-center justify-center ${isConnected ? 'bg-kodo-cyan text-black' : 'bg-gray-700 text-gray-400'}`}
+  ```
+
+- **Line 41**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm">
+  ```
+
+- **Line 88**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">Host</div>
+  ```
+
+- **Line 93**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">Sync Frequency</div>
+  ```
+
+- **Line 98**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">Status</div>
+  ```
+
+- **Line 115**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 121**: `bg-gray-`
+  ```tsx
+  className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${autoSync ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
+  ```
+
+- **Line 130**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 142**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 168**: `text-gray-`
+  ```tsx
+  <div className="text-sm text-gray-400">used of 100 GB</div>
+  ```
+
+- **Line 171**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 flex justify-between">
+  ```
+
+---
+
+### apps/web/src/components/settings/data/DataExportModal.tsx
+**Total instances in file**: 16
+
+- **Line 46**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 51**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400">
+  ```
+
+- **Line 58**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 73**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 77**: `border-gray-`
+  ```tsx
+  <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
+  ```
+
+- **Line 82**: `border-gray-`
+  ```tsx
+  className="rounded border-gray-600 bg-transparent text-kodo-cyan"
+  ```
+
+- **Line 84**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">
+  ```
+
+- **Line 88**: `border-gray-`
+  ```tsx
+  <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
+  ```
+
+- **Line 93**: `border-gray-`
+  ```tsx
+  className="rounded border-gray-600 bg-transparent text-kodo-cyan"
+  ```
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">
+  ```
+
+- **Line 99**: `border-gray-`
+  ```tsx
+  <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
+  ```
+
+- **Line 104**: `border-gray-`
+  ```tsx
+  className="rounded border-gray-600 bg-transparent text-kodo-cyan"
+  ```
+
+- **Line 106**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">
+  ```
+
+- **Line 110**: `border-gray-`
+  ```tsx
+  <label className="flex items-center gap-3 p-3 bg-kodo-ink rounded border border-kodo-steel cursor-pointer hover:border-gray-500">
+  ```
+
+- **Line 115**: `border-gray-`
+  ```tsx
+  className="rounded border-gray-600 bg-transparent text-kodo-cyan"
+  ```
+
+- **Line 117**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">
+  ```
+
+---
+
+### apps/web/src/components/settings/data/DataExportView.tsx
+**Total instances in file**: 5
+
+- **Line 32**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 46**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm mt-1 max-w-xl">
+  ```
+
+- **Line 71**: `text-gray-`
+  ```tsx
+  <FileText className="w-5 h-5 text-gray-500" />
+  ```
+
+- **Line 76**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 flex gap-2">
+  ```
+
+- **Line 93**: `text-gray-`, `bg-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500 bg-gray-800 px-3 py-1 rounded">
+  ```
+
+---
+
+### apps/web/src/components/settings/integrations/IntegrationsView.tsx
+**Total instances in file**: 6
+
+- **Line 99**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 136**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500">Not Connected</span>
+  ```
+
+- **Line 139**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500">
+  ```
+
+- **Line 153**: `text-gray-`
+  ```tsx
+  <RefreshCw className="w-4 h-4 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 158**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm mb-6 flex-1">
+  ```
+
+- **Line 167**: `text-gray-`
+  ```tsx
+  className="flex-1 border border-kodo-steel text-gray-300"
+  ```
+
+---
+
+### apps/web/src/components/settings/profile/EditProfile.tsx
+**Total instances in file**: 5
+
+- **Line 153**: `bg-gray-`
+  ```tsx
+  <div className="h-48 md:h-64 bg-gray-900 relative">
+  ```
+
+- **Line 230**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+- **Line 241**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 text-right mt-1">
+  ```
+
+- **Line 254**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+- **Line 280**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 mb-4">
+  ```
+
+---
+
+### apps/web/src/components/settings/security/LoginHistory.tsx
+**Total instances in file**: 5
+
+- **Line 93**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400">
+  ```
+
+- **Line 121**: `text-gray-`
+  ```tsx
+  <tr className="border-b border-kodo-steel text-gray-500 font-mono text-xs uppercase bg-kodo-ink/30">
+  ```
+
+- **Line 147**: `text-gray-`
+  ```tsx
+  <div className="text-gray-500">{log.time}</div>
+  ```
+
+- **Line 150**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-2 text-gray-300">
+  ```
+
+- **Line 162**: `text-gray-`
+  ```tsx
+  <td className="p-3 text-gray-400">
+  ```
+
+---
+
+### apps/web/src/components/settings/security/PasskeyModal.tsx
+**Total instances in file**: 4
+
+- **Line 49**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 60**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-300">
+  ```
+
+- **Line 90**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400">
+  ```
+
+- **Line 104**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mb-6">
+  ```
+
+---
+
+### apps/web/src/components/settings/security/SecuritySettings.tsx
+**Total instances in file**: 4
+
+- **Line 101**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 mt-1">
+  ```
+
+- **Line 131**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 mt-1">
+  ```
+
+- **Line 145**: `text-gray-`
+  ```tsx
+  <span className="text-gray-300">MacBook Pro (Chrome)</span>
+  ```
+
+- **Line 146**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">Added 2d ago</span>
+  ```
+
+---
+
+### apps/web/src/components/settings/security/SessionManagement.tsx
+**Total instances in file**: 7
+
+- **Line 56**: `text-gray-`
+  ```tsx
+  <div className="text-center p-4 text-gray-500">Loading sessions...</div>
+  ```
+
+- **Line 64**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400">
+  ```
+
+- **Line 88**: `text-gray-`
+  ```tsx
+  className={`p-3 rounded-full ${session.is_current ? 'bg-kodo-cyan/10 text-kodo-cyan' : 'bg-kodo-slate text-gray-400'}`}
+  ```
+
+- **Line 107**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 mt-1 truncate max-w-xs">
+  ```
+
+- **Line 110**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
+  ```
+
+- **Line 123**: `text-gray-`
+  ```tsx
+  className="mt-4 md:mt-0 text-gray-400 hover:text-white border border-kodo-steel hover:bg-white/5"
+  ```
+
+- **Line 133**: `text-gray-`
+  ```tsx
+  <p className="text-gray-500 text-sm">No active sessions found.</p>
+  ```
+
+---
+
+### apps/web/src/components/settings/security/TwoFactorSetup.tsx
+**Total instances in file**: 10
+
+- **Line 63**: `text-gray-`
+  ```tsx
+  className="p-2 hover:bg-white/5 rounded-full text-gray-400 hover:text-white transition-colors"
+  ```
+
+- **Line 71**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm">
+  ```
+
+- **Line 95**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400">
+  ```
+
+- **Line 117**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400">
+  ```
+
+- **Line 132**: `bg-gray-`
+  ```tsx
+  <div className="w-48 h-48 bg-gray-900 flex items-center justify-center relative overflow-hidden">
+  ```
+
+- **Line 144**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-300 mb-2">
+  ```
+
+- **Line 148**: `text-gray-`
+  ```tsx
+  className="text-xs text-gray-500 font-mono bg-black/30 py-1 px-2 rounded inline-block cursor-pointer hover:text-white"
+  ```
+
+- **Line 187**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 mb-6">
+  ```
+
+- **Line 241**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-300">
+  ```
+
+- **Line 248**: `text-gray-`
+  ```tsx
+  <div className="grid grid-cols-2 gap-3 bg-black/40 p-4 rounded-lg font-mono text-sm text-gray-300 text-center border border-kodo-steel/50">
+  ```
+
+---
+
+### apps/web/src/components/share/ShareLinkManager.tsx
+**Total instances in file**: 1
+
+- **Line 325**: `text-green-`
+  ```tsx
+  <Check className="h-4 w-4 text-green-600" />
+  ```
+
+---
+
+### apps/web/src/components/social/CommentItem.tsx
+**Total instances in file**: 3
+
+- **Line 39**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500 text-xs">{comment.timestamp}</span>
+  ```
+
+- **Line 42**: `text-gray-`
+  ```tsx
+  <p className="text-gray-300 leading-relaxed whitespace-pre-wrap">
+  ```
+
+- **Line 47**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-4 mt-1 pl-2 text-xs text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/social/CreatePostModal.tsx
+**Total instances in file**: 7
+
+- **Line 51**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 57**: `bg-gray-`
+  ```tsx
+  <div className="w-10 h-10 rounded-full bg-gray-700 overflow-hidden flex-shrink-0">
+  ```
+
+- **Line 87**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500 flex items-center gap-1">
+  ```
+
+- **Line 105**: `text-gray-`
+  ```tsx
+  className={`p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-cyan ${postType === 'image' ? 'text-kodo-cyan' : ''}`}
+  ```
+
+- **Line 115**: `text-gray-`
+  ```tsx
+  className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-magenta"
+  ```
+
+- **Line 125**: `text-gray-`
+  ```tsx
+  className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-lime"
+  ```
+
+- **Line 135**: `text-gray-`
+  ```tsx
+  className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-gold"
+  ```
+
+---
+
+### apps/web/src/components/social/ExploreView.tsx
+**Total instances in file**: 7
+
+- **Line 32**: `from-gray-`
+  ```tsx
+  //     { name: 'Techno', color: 'from-gray-700 to-black' },
+  ```
+
+- **Line 33**: `from-blue-`
+  ```tsx
+  //     { name: 'Ambient', color: 'from-blue-400 to-teal-500' },
+  ```
+
+- **Line 36**: `to-blue-600`
+  ```tsx
+  //     { name: 'House', color: 'from-indigo-500 to-blue-600' },
+  ```
+
+- **Line 118**: `text-gray-`
+  ```tsx
+  className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold transition-all whitespace-nowrap ${activeTab === tab.id ? 'bg-kodo-cyan text-black shadow-neon-cyan' : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
+  ```
+
+- **Line 144**: `border-gray-`, `text-gray-`, `border-gray-`
+  ```tsx
+  className={`px-3 py-1 rounded-full text-xs font-bold border transition-colors ${filter === f ? 'bg-white text-black border-white' : 'border-gray-600 text-gray-400 hover:border-gray-400'}`}
+  ```
+
+- **Line 161**: `bg-gray-`
+  ```tsx
+  className={`relative group cursor-pointer overflow-hidden rounded-xl bg-gray-900 aspect-square ${i === 0 ? 'col-span-2 row-span-2' : ''}`}
+  ```
+
+- **Line 174**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between items-center text-xs text-gray-300">
+  ```
+
+---
+
+### apps/web/src/components/social/FeedView.tsx
+**Total instances in file**: 6
+
+- **Line 83**: `bg-gray-`
+  ```tsx
+  <div className="w-10 h-10 rounded-full bg-gray-700 flex-shrink-0 overflow-hidden cursor-pointer">
+  ```
+
+- **Line 93**: `text-gray-`
+  ```tsx
+  <div className="w-full bg-kodo-void/50 border border-kodo-steel rounded-full px-4 py-2.5 text-gray-500 hover:bg-kodo-void hover:border-kodo-cyan/50 transition-all text-sm">
+  ```
+
+- **Line 101**: `text-gray-`
+  ```tsx
+  className="flex items-center gap-1 text-gray-400 hover:text-kodo-cyan text-xs font-bold cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
+  ```
+
+- **Line 107**: `text-gray-`
+  ```tsx
+  className="flex items-center gap-1 text-gray-400 hover:text-kodo-magenta text-xs font-bold cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
+  ```
+
+- **Line 113**: `text-gray-`
+  ```tsx
+  className="flex items-center gap-1 text-gray-400 hover:text-kodo-lime text-xs font-bold cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
+  ```
+
+- **Line 119**: `text-gray-`
+  ```tsx
+  className="flex items-center gap-1 text-gray-400 hover:text-kodo-gold text-xs font-bold cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
+  ```
+
+---
+
+### apps/web/src/components/social/PostCard.tsx
+**Total instances in file**: 10
+
+- **Line 74**: `text-gray-`
+  ```tsx
+  <div className="px-4 pt-3 pb-0 flex items-center gap-2 text-xs text-gray-500 font-bold uppercase tracking-wider">
+  ```
+
+- **Line 82**: `bg-gray-`
+  ```tsx
+  <div className="w-10 h-10 rounded-full bg-gray-700 overflow-hidden border border-kodo-steel cursor-pointer">
+  ```
+
+- **Line 99**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">
+  ```
+
+- **Line 110**: `text-gray-`
+  ```tsx
+  <div className="px-4 pb-2 text-gray-200 whitespace-pre-wrap leading-relaxed text-sm">
+  ```
+
+- **Line 139**: `bg-gray-`
+  ```tsx
+  <div className="w-12 h-12 bg-gray-800 rounded overflow-hidden relative group cursor-pointer">
+  ```
+
+- **Line 152**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400 truncate">
+  ```
+
+- **Line 184**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-400">{opt.votes}%</span>
+  ```
+
+- **Line 188**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 px-1">
+  ```
+
+- **Line 195**: `text-gray-`
+  ```tsx
+  <div className="p-4 border-t border-kodo-steel flex items-center justify-between text-gray-400 text-sm">
+  ```
+
+- **Line 244**: `bg-gray-`
+  ```tsx
+  <div className="w-8 h-8 rounded-full bg-gray-700 overflow-hidden flex-shrink-0">
+  ```
+
+---
+
+### apps/web/src/components/social/SharePostModal.tsx
+**Total instances in file**: 7
+
+- **Line 39**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 60**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 line-clamp-2">
+  ```
+
+- **Line 94**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 111**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 126**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 138**: `bg-gray-`, `text-gray-`
+  ```tsx
+  <div className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 group-hover:text-white">
+  ```
+
+- **Line 152**: `bg-gray-`, `text-gray-`
+  ```tsx
+  <div className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 group-hover:text-white">
+  ```
+
+---
+
+### apps/web/src/components/social/connections/ConnectionsView.tsx
+**Total instances in file**: 4
+
+- **Line 59**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 78**: `text-gray-`
+  ```tsx
+  className={filter === 'all' ? 'text-white' : 'text-gray-500'}
+  ```
+
+- **Line 86**: `text-gray-`
+  ```tsx
+  className={filter === 'mutual' ? 'text-white' : 'text-gray-500'}
+  ```
+
+- **Line 94**: `text-gray-`
+  ```tsx
+  className={filter === 'recent' ? 'text-white' : 'text-gray-500'}
+  ```
+
+---
+
+### apps/web/src/components/social/groups/CreateGroupModal.tsx
+**Total instances in file**: 6
+
+- **Line 54**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 64**: `text-gray-`
+  ```tsx
+  <div className="text-gray-500 flex flex-col items-center group-hover:text-kodo-cyan">
+  ```
+
+- **Line 89**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+- **Line 101**: `border-gray-`
+  ```tsx
+  className="bg-kodo-ink p-3 rounded-lg border border-kodo-steel flex items-center justify-between cursor-pointer hover:border-gray-500"
+  ```
+
+- **Line 114**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 120**: `bg-gray-`
+  ```tsx
+  className={`w-10 h-5 rounded-full relative transition-colors ${isPrivate ? 'bg-kodo-cyan' : 'bg-gray-600'}`}
+  ```
+
+---
+
+### apps/web/src/components/social/groups/GroupCard.tsx
+**Total instances in file**: 4
+
+- **Line 28**: `bg-gray-`
+  ```tsx
+  <div className="h-32 relative overflow-hidden bg-gray-900">
+  ```
+
+- **Line 51**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mb-4 line-clamp-2 flex-1">
+  ```
+
+- **Line 55**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-4 text-xs text-gray-500 mb-4 font-mono">
+  ```
+
+- **Line 71**: `bg-red-`
+  ```tsx
+  className="w-full border border-kodo-steel hover:bg-red-500/10 hover:text-kodo-red hover:border-kodo-red"
+  ```
+
+---
+
+### apps/web/src/components/social/groups/GroupDetailView.tsx
+**Total instances in file**: 11
+
+- **Line 87**: `text-gray-`
+  ```tsx
+  <div className="text-center py-20 text-gray-500">Group not found</div>
+  ```
+
+- **Line 94**: `bg-gray-`
+  ```tsx
+  <div className="h-64 bg-gray-900 relative">
+  ```
+
+- **Line 122**: `text-red-`, `bg-red-`
+  ```tsx
+  className="bg-black/50 backdrop-blur text-red-400 hover:bg-red-500/20 border-none"
+  ```
+
+- **Line 153**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 max-w-2xl leading-relaxed">
+  ```
+
+- **Line 158**: `text-gray-`
+  ```tsx
+  <div className="flex gap-6 text-sm text-gray-400 font-mono bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/30">
+  ```
+
+- **Line 187**: `text-gray-`, `text-gray-`
+  ```tsx
+  className={`py-4 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'text-white border-kodo-cyan' : 'text-gray-500 border-transparent hover:text-gray-300'}`}
+  ```
+
+- **Line 213**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] bg-kodo-slate px-1.5 py-0.5 rounded text-gray-400">
+  ```
+
+- **Line 224**: `text-gray-`
+  ```tsx
+  <div className="col-span-full text-center py-8 text-gray-500 text-sm">
+  ```
+
+- **Line 250**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-2 text-gray-400 text-sm mt-1">
+  ```
+
+- **Line 266**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mb-4">
+  ```
+
+- **Line 275**: `text-gray-`
+  ```tsx
+  className="px-2 py-1 bg-kodo-ink border border-kodo-steel rounded text-xs text-gray-400"
+  ```
+
+---
+
+### apps/web/src/components/social/groups/GroupsView.tsx
+**Total instances in file**: 4
+
+- **Line 100**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 117**: `text-gray-`
+  ```tsx
+  className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'my_groups' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 123**: `text-gray-`
+  ```tsx
+  className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-bold transition-colors ${activeTab === 'discover' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 155**: `text-gray-`
+  ```tsx
+  <div className="col-span-full text-center py-20 text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/studio/AIToolsView.tsx
+**Total instances in file**: 7
+
+- **Line 94**: `text-gray-`
+  ```tsx
+  className={`w-10 h-10 rounded-lg flex items-center justify-center mb-3 ${activeTool === tool.id ? 'bg-kodo-cyan text-black' : 'bg-kodo-ink text-gray-400 group-hover:text-white'}`}
+  ```
+
+- **Line 99**: `text-gray-`
+  ```tsx
+  className={`font-bold text-sm ${activeTool === tool.id ? 'text-white' : 'text-gray-300'}`}
+  ```
+
+- **Line 103**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 mt-1 leading-tight">
+  ```
+
+- **Line 118**: `text-gray-`
+  ```tsx
+  <p className="text-center text-xs text-gray-500 mt-4">
+  ```
+
+- **Line 130**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm">
+  ```
+
+- **Line 143**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-300">{result.fileName}</p>
+  ```
+
+- **Line 155**: `text-gray-`
+  ```tsx
+  <h4 className="text-sm font-bold text-gray-400 uppercase mb-4 tracking-wider">
+  ```
+
+---
+
+### apps/web/src/components/studio/CloudFileBrowser.tsx
+**Total instances in file**: 18
+
+- **Line 183**: `text-gray-`
+  ```tsx
+  <Filter className="w-4 h-4 text-gray-500 shrink-0" />
+  ```
+
+- **Line 188**: `text-gray-`, `border-gray-`
+  ```tsx
+  className={`px-2 py-1 rounded text-xs border transition-colors whitespace-nowrap ${activeTags.includes(tag) ? 'bg-kodo-cyan/20 border-kodo-cyan text-kodo-cyan' : 'border-kodo-steel text-gray-400 hover:border-gray-400'}`}
+  ```
+
+- **Line 247**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500 px-2 uppercase font-bold">
+  ```
+
+- **Line 264**: `text-gray-`
+  ```tsx
+  className="ml-2 p-1 hover:text-white text-gray-400"
+  ```
+
+- **Line 277**: `text-gray-`
+  ```tsx
+  className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 283**: `text-gray-`
+  ```tsx
+  className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
+  ```
+
+- **Line 297**: `text-gray-`
+  ```tsx
+  <thead className="bg-kodo-ink text-xs font-mono text-gray-500 uppercase tracking-wider sticky top-0 z-10">
+  ```
+
+- **Line 343**: `text-gray-`
+  ```tsx
+  className="cursor-pointer text-gray-500 hover:text-white"
+  ```
+
+- **Line 368**: `text-gray-`
+  ```tsx
+  ) && <File className="w-5 h-5 text-gray-400" />}
+  ```
+
+- **Line 369**: `text-gray-`
+  ```tsx
+  <span className="font-medium text-gray-200 group-hover:text-white transition-colors">
+  ```
+
+- **Line 379**: `text-gray-`
+  ```tsx
+  className="text-[10px] bg-kodo-slate px-1.5 py-0.5 rounded text-gray-400 border border-kodo-steel"
+  ```
+
+- **Line 386**: `text-gray-`
+  ```tsx
+  <td className="p-4 text-gray-400 font-mono text-xs">
+  ```
+
+- **Line 389**: `text-gray-`
+  ```tsx
+  <td className="p-4 text-gray-400 text-xs">
+  ```
+
+- **Line 403**: `text-gray-`
+  ```tsx
+  <button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
+  ```
+
+- **Line 406**: `text-gray-`
+  ```tsx
+  <button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white">
+  ```
+
+- **Line 435**: `text-gray-`
+  ```tsx
+  <Square className="w-4 h-4 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 450**: `text-gray-`
+  ```tsx
+  <File className="w-8 h-8 text-gray-400" />
+  ```
+
+- **Line 464**: `text-gray-`
+  ```tsx
+  className="text-[8px] bg-white/10 px-1 rounded text-gray-400"
+  ```
+
+---
+
+### apps/web/src/components/studio/CloudSettingsView.tsx
+**Total instances in file**: 7
+
+- **Line 24**: `text-gray-`
+  ```tsx
+  <div className="text-sm text-gray-400">used of 100 GB (Pro Plan)</div>
+  ```
+
+- **Line 29**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 35**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 41**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase font-bold">
+  ```
+
+- **Line 62**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-bold text-gray-400 mb-2 flex items-center gap-2">
+  ```
+
+- **Line 75**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 mt-1">
+  ```
+
+- **Line 81**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-bold text-gray-400 mb-2 flex items-center gap-2">
+  ```
+
+---
+
+### apps/web/src/components/studio/ConnectivityView.tsx
+**Total instances in file**: 9
+
+- **Line 54**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mt-1">
+  ```
+
+- **Line 66**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
+  ```
+
+- **Line 70**: `text-gray-`
+  ```tsx
+  <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono truncate">
+  ```
+
+- **Line 86**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
+  ```
+
+- **Line 90**: `text-gray-`
+  ```tsx
+  <div className="flex-1 bg-kodo-graphite border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono">
+  ```
+
+- **Line 104**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
+  ```
+
+- **Line 115**: `text-gray-`
+  ```tsx
+  <p className="text-[10px] text-gray-500 mt-2">
+  ```
+
+- **Line 130**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mt-1">
+  ```
+
+- **Line 162**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 mt-1 flex gap-2">
+  ```
+
+---
+
+### apps/web/src/components/studio/GoLiveView.tsx
+**Total instances in file**: 15
+
+- **Line 53**: `text-gray-`
+  ```tsx
+  className={`w-8 h-8 ${isLive ? 'text-kodo-red animate-pulse' : 'text-gray-500'}`}
+  ```
+
+- **Line 57**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 63**: `text-gray-`
+  ```tsx
+  className={`px-4 py-2 rounded-lg border flex items-center gap-2 font-bold ${isLive ? 'bg-kodo-red text-white border-kodo-red' : 'bg-kodo-ink text-gray-500 border-kodo-steel'}`}
+  ```
+
+- **Line 66**: `bg-gray-`
+  ```tsx
+  className={`w-3 h-3 rounded-full ${isLive ? 'bg-white animate-pulse' : 'bg-gray-600'}`}
+  ```
+
+- **Line 97**: `bg-gray-`
+  ```tsx
+  <div className="w-full h-full flex items-center justify-center bg-gray-900">
+  ```
+
+- **Line 101**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400">Receiving Stream Data...</p>
+  ```
+
+- **Line 105**: `text-gray-`
+  ```tsx
+  <div className="w-full h-full flex items-col items-center justify-center bg-kodo-ink/50 text-gray-500">
+  ```
+
+- **Line 128**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+- **Line 168**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
+  ```
+
+- **Line 173**: `text-gray-`
+  ```tsx
+  className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono"
+  ```
+
+- **Line 189**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-500 uppercase mb-2">
+  ```
+
+- **Line 194**: `text-gray-`
+  ```tsx
+  className="flex-1 bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-gray-300 font-mono"
+  ```
+
+- **Line 233**: `text-gray-`
+  ```tsx
+  <ol className="text-sm text-gray-400 space-y-2 list-decimal pl-4">
+  ```
+
+- **Line 244**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300">Microphone</span>
+  ```
+
+- **Line 247**: `bg-gray-`
+  ```tsx
+  <div className="w-full bg-gray-800 h-2 rounded-full overflow-hidden">
+  ```
+
+---
+
+### apps/web/src/components/studio/ProjectsManager.tsx
+**Total instances in file**: 12
+
+- **Line 161**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 font-mono text-sm">
+  ```
+
+- **Line 187**: `text-gray-`, `border-gray-`
+  ```tsx
+  className={`px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors border ${filter === daw ? 'bg-kodo-cyan text-black border-kodo-cyan' : 'bg-kodo-slate text-gray-400 border-transparent hover:border-gray-500'}`}
+  ```
+
+- **Line 199**: `text-gray-`
+  ```tsx
+  <button className="p-1.5 rounded text-gray-500 hover:text-white">
+  ```
+
+- **Line 237**: `text-gray-`
+  ```tsx
+  <MoreVertical className="w-4 h-4 text-gray-500 hover:text-white" />
+  ```
+
+- **Line 244**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 mb-4 font-mono">
+  ```
+
+- **Line 250**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-400 uppercase font-bold">
+  ```
+
+- **Line 256**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-400 uppercase font-bold">
+  ```
+
+- **Line 265**: `text-gray-`
+  ```tsx
+  <span className="text-gray-400 font-bold">
+  ```
+
+- **Line 278**: `border-gray-`
+  ```tsx
+  <div className="flex justify-between items-center pt-4 border-t border-gray-800">
+  ```
+
+- **Line 280**: `bg-gray-`
+  ```tsx
+  <div className="w-6 h-6 rounded-full bg-gray-600 border border-black"></div>
+  ```
+
+- **Line 296**: `text-gray-`
+  ```tsx
+  className="border-2 border-dashed border-kodo-steel rounded-xl flex flex-col items-center justify-center p-8 hover:bg-kodo-slate/20 transition-colors cursor-pointer text-gray-500 hover:text-kodo-cyan hover:border-kodo-cyan min-h-[250px]"
+  ```
+
+- **Line 308**: `text-gray-`
+  ```tsx
+  <div className="text-center py-20 text-gray-500">
+  ```
+
+---
+
+### apps/web/src/components/studio/projects/CreateProjectModal.tsx
+**Total instances in file**: 4
+
+- **Line 47**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 61**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+- **Line 69**: `text-gray-`, `border-gray-`
+  ```tsx
+  className={`p-3 rounded-lg border text-sm font-bold transition-all ${formData.daw === daw ? 'bg-kodo-cyan/10 border-kodo-cyan text-white' : 'bg-kodo-void border-kodo-steel text-gray-500 hover:border-gray-400'}`}
+  ```
+
+- **Line 98**: `text-gray-`
+  ```tsx
+  <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
+  ```
+
+---
+
+### apps/web/src/components/studio/projects/ProjectDetailView.tsx
+**Total instances in file**: 18
+
+- **Line 103**: `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-4 text-sm text-gray-400 font-mono">
+  ```
+
+- **Line 134**: `text-gray-`, `text-gray-`
+  ```tsx
+  className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
+  ```
+
+- **Line 149**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-sm text-gray-400 mb-1">
+  ```
+
+- **Line 162**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase">
+  ```
+
+- **Line 170**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 uppercase">
+  ```
+
+- **Line 193**: `text-gray-`
+  ```tsx
+  <div className="text-sm text-gray-300">
+  ```
+
+- **Line 197**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">2 hours ago</div>
+  ```
+
+- **Line 224**: `text-gray-`
+  ```tsx
+  <div className="w-10 h-10 bg-kodo-slate rounded flex items-center justify-center text-gray-400">
+  ```
+
+- **Line 235**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500">
+  ```
+
+- **Line 307**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mb-4">
+  ```
+
+- **Line 329**: `bg-gray-`
+  ```tsx
+  <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-gray-700"></div>
+  ```
+
+- **Line 330**: `bg-gray-`
+  ```tsx
+  <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-gray-600"></div>
+  ```
+
+- **Line 331**: `text-gray-`
+  ```tsx
+  <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-ink flex items-center justify-center text-xs text-gray-400 font-bold">
+  ```
+
+- **Line 351**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">2h ago</span>
+  ```
+
+- **Line 353**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-gray-400">
+  ```
+
+- **Line 355**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-600">1d ago</span>
+  ```
+
+- **Line 357**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-gray-400">
+  ```
+
+- **Line 359**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-600">3d ago</span>
+  ```
+
+---
+
+### apps/web/src/components/ui/DataList.tsx
+**Total instances in file**: 9
+
+- **Line 131**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  className="animate-pulse bg-gray-200 dark:bg-gray-700 rounded h-16"
+  ```
+
+- **Line 141**: `text-red-`, `text-red-`
+  ```tsx
+  <p className="text-red-500 dark:text-red-400">{error}</p>
+  ```
+
+- **Line 149**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="text-gray-500 dark:text-gray-400">{emptyMessage}</p>
+  ```
+
+- **Line 258**: `bg-gray-`
+  ```tsx
+  'relative bg-white dark:bg-gray-800 rounded-lg shadow-xl',
+  ```
+
+- **Line 265**: `border-gray-`, `border-gray-`
+  ```tsx
+  <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+  ```
+
+- **Line 267**: `text-gray-`
+  ```tsx
+  <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+  ```
+
+- **Line 274**: `text-gray-`, `text-gray-`, `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+  ```
+
+- **Line 386**: `bg-gray-`
+  ```tsx
+  'absolute z-20 mt-1 bg-white dark:bg-gray-800 rounded-md shadow-lg',
+  ```
+
+- **Line 387**: `border-gray-`, `border-gray-`
+  ```tsx
+  'border border-gray-200 dark:border-gray-700',
+  ```
+
+---
+
+### apps/web/src/components/ui/FormField.tsx
+**Total instances in file**: 13
+
+- **Line 115**: `text-gray-`, `text-gray-`
+  ```tsx
+  <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+  ```
+
+- **Line 117**: `text-red-`
+  ```tsx
+  {required && <span className="text-red-500 ml-1">*</span>}
+  ```
+
+- **Line 121**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 dark:text-gray-400">{helpText}</p>
+  ```
+
+- **Line 124**: `text-red-`, `text-red-`
+  ```tsx
+  <p className="text-xs text-red-500 dark:text-red-400">{error}</p>
+  ```
+
+- **Line 144**: `bg-gray-`, `border-gray-`
+  ```tsx
+  'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
+  ```
+
+- **Line 146**: `border-red-`
+  ```tsx
+  ? 'border-red-500 focus:ring-red-500'
+  ```
+
+- **Line 147**: `border-gray-`, `border-gray-`
+  ```tsx
+  : 'border-gray-300 dark:border-gray-600',
+  ```
+
+- **Line 170**: `bg-gray-`, `border-gray-`
+  ```tsx
+  'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
+  ```
+
+- **Line 172**: `border-red-`
+  ```tsx
+  ? 'border-red-500 focus:ring-red-500'
+  ```
+
+- **Line 173**: `border-gray-`, `border-gray-`
+  ```tsx
+  : 'border-gray-300 dark:border-gray-600',
+  ```
+
+- **Line 197**: `bg-gray-`, `border-gray-`
+  ```tsx
+  'dark:bg-gray-800 dark:border-gray-600 dark:text-white',
+  ```
+
+- **Line 199**: `border-red-`
+  ```tsx
+  ? 'border-red-500 focus:ring-red-500'
+  ```
+
+- **Line 200**: `border-gray-`, `border-gray-`
+  ```tsx
+  : 'border-gray-300 dark:border-gray-600',
+  ```
+
+---
+
+### apps/web/src/components/ui/ImageCropper.tsx
+**Total instances in file**: 6
+
+- **Line 7**: `bg-gray-`
+  ```tsx
+  <div className="bg-gray-800 flex items-center justify-center h-full text-white">
+  ```
+
+- **Line 138**: `text-gray-`
+  ```tsx
+  <button onClick={onCancel} className="text-gray-400 hover:text-white">
+  ```
+
+- **Line 170**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-400 w-16">Zoom</span>
+  ```
+
+- **Line 171**: `text-gray-`
+  ```tsx
+  <ZoomIn className="w-4 h-4 text-gray-500" />
+  ```
+
+- **Line 185**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-400 w-16">Rotate</span>
+  ```
+
+- **Line 186**: `text-gray-`
+  ```tsx
+  <RotateCw className="w-4 h-4 text-gray-500" />
+  ```
+
+---
+
+### apps/web/src/components/ui/LazyComponent.tsx
+**Total instances in file**: 2
+
+- **Line 28**: `text-yellow-`
+  ```tsx
+  <AlertTriangle className="h-6 w-6 text-yellow-600" />
+  ```
+
+- **Line 31**: `bg-yellow-`, `bg-yellow-`, `text-yellow-`, `text-yellow-`
+  ```tsx
+  <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-yellow-700 dark:text-yellow-300 px-4 py-3 rounded-lg mb-4">
+  ```
+
+---
+
+### apps/web/src/components/ui/LoadingState.tsx
+**Total instances in file**: 6
+
+- **Line 123**: `text-gray-`
+  ```tsx
+  className={cn('animate-spin text-gray-400', sizeClasses[size])}
+  ```
+
+- **Line 127**: `text-gray-`, `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 141**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
+  ```
+
+- **Line 142**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
+  ```
+
+- **Line 143**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
+  ```
+
+- **Line 159**: `text-gray-`
+  ```tsx
+  className={cn('animate-spin text-gray-400', sizeClasses[size], className)}
+  ```
+
+---
+
+### apps/web/src/components/ui/Toast.tsx
+**Total instances in file**: 1
+
+- **Line 103**: `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-white transition-colors"
+  ```
+
+---
+
+### apps/web/src/components/ui/avatar.tsx
+**Total instances in file**: 2
+
+- **Line 117**: `bg-gray-`
+  ```tsx
+  offline: 'bg-gray-500',
+  ```
+
+- **Line 163**: `text-gray-`
+  ```tsx
+  <span className="font-bold text-gray-400">{initials}</span>
+  ```
+
+---
+
+### apps/web/src/components/ui/checkbox.tsx
+**Total instances in file**: 1
+
+- **Line 121**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300 group-hover:text-white transition-colors select-none">
+  ```
+
+---
+
+### apps/web/src/components/ui/confirmation-dialog.tsx
+**Total instances in file**: 2
+
+- **Line 153**: `bg-red-`, `bg-red-`
+  ```tsx
+  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
+  ```
+
+- **Line 154**: `text-red-`, `text-red-`
+  ```tsx
+  <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
+  ```
+
+---
+
+### apps/web/src/components/ui/dialog.tsx
+**Total instances in file**: 1
+
+- **Line 322**: `text-gray-`
+  ```tsx
+  return <p className={cn('text-sm text-gray-400', className)}>{children}</p>;
+  ```
+
+---
+
+### apps/web/src/components/ui/dropdown-menu.tsx
+**Total instances in file**: 5
+
+- **Line 188**: `text-gray-`
+  ```tsx
+  'text-gray-300 hover:text-white w-full text-left',
+  ```
+
+- **Line 216**: `text-gray-`
+  ```tsx
+  'text-gray-300 hover:text-white w-full text-left',
+  ```
+
+- **Line 244**: `text-gray-`
+  ```tsx
+  'text-gray-300 hover:text-white w-full text-left',
+  ```
+
+- **Line 269**: `text-gray-`
+  ```tsx
+  'px-2 py-1.5 text-sm font-semibold text-gray-400',
+  ```
+
+- **Line 300**: `text-gray-`
+  ```tsx
+  'ml-auto text-xs tracking-widest opacity-60 text-gray-500',
+  ```
+
+---
+
+### apps/web/src/components/ui/empty-state.tsx
+**Total instances in file**: 2
+
+- **Line 149**: `text-gray-`
+  ```tsx
+  <div className={cn('text-gray-400', iconSizeClasses[size])}>
+  ```
+
+- **Line 158**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mb-4 max-w-md mx-auto">
+  ```
+
+---
+
+### apps/web/src/components/ui/file-upload.tsx
+**Total instances in file**: 1
+
+- **Line 458**: `text-green-`
+  ```tsx
+  <div className="flex items-center gap-1 text-xs text-green-600">
+  ```
+
+---
+
+### apps/web/src/components/ui/label.tsx
+**Total instances in file**: 1
+
+- **Line 41**: `text-gray-`
+  ```tsx
+  'text-sm font-medium leading-none text-gray-400 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  ```
+
+---
+
+### apps/web/src/components/ui/loading-spinner.tsx
+**Total instances in file**: 2
+
+- **Line 79**: `border-gray-`
+  ```tsx
+  'animate-spin rounded-full border-2 border-gray-300 border-t-blue-600',
+  ```
+
+- **Line 88**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{text}</p>
+  ```
+
+---
+
+### apps/web/src/components/ui/optimized-image.tsx
+**Total instances in file**: 3
+
+- **Line 154**: `bg-gray-`
+  ```tsx
+  className={`bg-gray-200 animate-pulse ${className}`}
+  ```
+
+- **Line 298**: `bg-gray-`
+  ```tsx
+  className={`bg-gray-200 flex items-center justify-center ${className}`}
+  ```
+
+- **Line 301**: `text-gray-`
+  ```tsx
+  <span className="text-gray-400 text-sm">Image non disponible</span>
+  ```
+
+---
+
+### apps/web/src/components/ui/progress.tsx
+**Total instances in file**: 2
+
+- **Line 130**: `to-blue-500`
+  ```tsx
+  cyan: 'from-kodo-cyan to-blue-500',
+  ```
+
+- **Line 170**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-xs text-gray-500 mt-1 font-mono">
+  ```
+
+---
+
+### apps/web/src/components/ui/select.tsx
+**Total instances in file**: 3
+
+- **Line 363**: `text-gray-`
+  ```tsx
+  <div className="px-3 py-1.5 text-xs font-semibold text-gray-400 uppercase">
+  ```
+
+- **Line 382**: `text-gray-`
+  ```tsx
+  <div className="px-3 py-2 text-sm text-gray-400 text-center">
+  ```
+
+- **Line 444**: `text-gray-`
+  ```tsx
+  'transition-colors text-gray-300',
+  ```
+
+---
+
+### apps/web/src/components/ui/table.tsx
+**Total instances in file**: 3
+
+- **Line 168**: `text-gray-`
+  ```tsx
+  'h-12 px-4 text-left align-middle font-bold text-gray-400 uppercase tracking-wider [&:has([role=checkbox])]:pr-0',
+  ```
+
+- **Line 190**: `text-gray-`
+  ```tsx
+  'p-4 align-middle [&:has([role=checkbox])]:pr-0 text-gray-300',
+  ```
+
+- **Line 212**: `text-gray-`
+  ```tsx
+  className={cn('mt-4 text-sm text-gray-400', className)}
+  ```
+
+---
+
+### apps/web/src/components/ui/tabs.tsx
+**Total instances in file**: 2
+
+- **Line 171**: `text-gray-`
+  ```tsx
+  'inline-flex h-10 items-center justify-center rounded-md bg-kodo-graphite p-1 text-gray-400 border border-kodo-steel/30',
+  ```
+
+- **Line 256**: `text-gray-`, `text-gray-`
+  ```tsx
+  : 'text-gray-500 hover:text-gray-300',
+  ```
+
+---
+
+### apps/web/src/components/ui/textarea.tsx
+**Total instances in file**: 1
+
+- **Line 77**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2 font-body">
+  ```
+
+---
+
+### apps/web/src/components/upload/BulkUploadModal.tsx
+**Total instances in file**: 5
+
+- **Line 41**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 mt-1">
+  ```
+
+- **Line 46**: `text-gray-`
+  ```tsx
+  <button onClick={onClose} className="text-gray-400 hover:text-white">
+  ```
+
+- **Line 53**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-[10px] font-bold text-gray-400 uppercase mb-1">
+  ```
+
+- **Line 57**: `bg-gray-`
+  ```tsx
+  <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
+  ```
+
+- **Line 84**: `text-gray-`
+  ```tsx
+  className="text-gray-400 hover:text-white"
+  ```
+
+---
+
+### apps/web/src/components/upload/FilePreviewCard.tsx
+**Total instances in file**: 2
+
+- **Line 51**: `text-gray-`
+  ```tsx
+  return <File className="w-6 h-6 text-gray-400" />;
+  ```
+
+- **Line 81**: `text-gray-`
+  ```tsx
+  <span className="text-[10px] text-gray-500 font-mono flex-shrink-0">
+  ```
+
+---
+
+### apps/web/src/components/upload/FileUploadZone.tsx
+**Total instances in file**: 3
+
+- **Line 100**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 mb-6 max-w-sm">
+  ```
+
+- **Line 108**: `text-gray-`
+  ```tsx
+  className="px-2 py-1 bg-black/30 rounded text-[10px] font-mono text-gray-500 border border-white/5 uppercase"
+  ```
+
+- **Line 114**: `text-gray-`
+  ```tsx
+  <p className="mt-4 text-[10px] text-gray-600">
+  ```
+
+---
+
+### apps/web/src/components/upload/UploadProgressBar.tsx
+**Total instances in file**: 1
+
+- **Line 33**: `text-gray-`
+  ```tsx
+  <div className="flex justify-between text-[10px] uppercase font-bold text-gray-500 mb-1">
+  ```
+
+---
+
+### apps/web/src/components/upload/metadata/CoverArtUploadModal.tsx
+**Total instances in file**: 3
+
+- **Line 117**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 126**: `text-gray-`
+  ```tsx
+  <Upload className="w-8 h-8 text-gray-500" />
+  ```
+
+- **Line 135**: `text-gray-`
+  ```tsx
+  <p className="text-gray-400 text-sm">
+  ```
+
+---
+
+### apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
+**Total instances in file**: 5
+
+- **Line 48**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 55**: `text-gray-`
+  ```tsx
+  <label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
+  ```
+
+- **Line 58**: `border-gray-`
+  ```tsx
+  className="rounded border-gray-600 bg-transparent text-kodo-cyan focus:ring-0"
+  ```
+
+- **Line 64**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500 flex items-center gap-1">
+  ```
+
+- **Line 92**: `text-gray-`
+  ```tsx
+  <p className="text-right text-xs text-gray-500 mt-2">
+  ```
+
+---
+
+### apps/web/src/components/upload/metadata/MetadataEditor.tsx
+**Total instances in file**: 1
+
+- **Line 148**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 font-mono">
+  ```
+
+---
+
+### apps/web/src/components/upload/metadata/MetadataForm.tsx
+**Total instances in file**: 7
+
+- **Line 73**: `text-gray-`
+  ```tsx
+  <div className="absolute inset-0 flex flex-col items-center justify-center text-gray-500 group-hover:text-kodo-cyan">
+  ```
+
+- **Line 84**: `text-gray-`
+  ```tsx
+  <p className="text-center text-xs text-gray-500 mt-2">
+  ```
+
+- **Line 185**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300 flex items-center gap-2">
+  ```
+
+- **Line 204**: `text-gray-`
+  ```tsx
+  className="text-[10px] bg-kodo-slate px-2 py-1 rounded text-gray-300"
+  ```
+
+- **Line 215**: `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-300 flex items-center gap-2">
+  ```
+
+- **Line 221**: `text-gray-`
+  ```tsx
+  className={data.lyrics ? 'text-kodo-lime' : 'text-gray-400'}
+  ```
+
+- **Line 236**: `text-gray-`
+  ```tsx
+  <label className="block text-sm font-medium text-gray-400 mb-2">
+  ```
+
+---
+
+### apps/web/src/components/upload/metadata/TagSuggestionsModal.tsx
+**Total instances in file**: 5
+
+- **Line 67**: `text-gray-`
+  ```tsx
+  <X className="w-5 h-5 text-gray-400 hover:text-white" />
+  ```
+
+- **Line 104**: `text-gray-`
+  ```tsx
+  <span className="text-gray-500 text-sm italic">
+  ```
+
+- **Line 109**: `text-gray-`
+  ```tsx
+  <p className="text-right text-xs text-gray-500 mt-1">
+  ```
+
+- **Line 115**: `text-gray-`
+  ```tsx
+  <h4 className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">
+  ```
+
+- **Line 123**: `text-gray-`
+  ```tsx
+  className="px-3 py-1 bg-kodo-slate border border-kodo-steel rounded-full text-sm text-gray-300 hover:text-white hover:border-white transition-colors flex items-center gap-1"
+  ```
+
+---
+
+### apps/web/src/components/user/UserCard.tsx
+**Total instances in file**: 5
+
+- **Line 49**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-400 font-mono mb-3">@{user.username}</p>
+  ```
+
+- **Line 52**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mb-4 line-clamp-2 min-h-[2.5em]">
+  ```
+
+- **Line 60**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 uppercase">Tracks</div>
+  ```
+
+- **Line 66**: `text-gray-`
+  ```tsx
+  <div className="text-[10px] text-gray-500 uppercase">Fans</div>
+  ```
+
+- **Line 74**: `text-gray-`
+  ```tsx
+  className={`flex-1 ${isFollowing ? 'border border-kodo-steel text-gray-400' : ''}`}
+  ```
+
+---
+
+### apps/web/src/components/views/DiscoverView.tsx
+**Total instances in file**: 3
+
+- **Line 22**: `from-gray-`
+  ```tsx
+  { name: 'Techno', color: 'from-gray-700 to-black' },
+  ```
+
+- **Line 23**: `from-blue-`
+  ```tsx
+  { name: 'Ambient', color: 'from-blue-400 to-teal-500' },
+  ```
+
+- **Line 26**: `to-blue-600`
+  ```tsx
+  { name: 'House', color: 'from-indigo-500 to-blue-600' },
+  ```
+
+---
+
+### apps/web/src/components/views/FileDetailsView.tsx
+**Total instances in file**: 1
+
+- **Line 143**: `to-blue-600`
+  ```tsx
+  <div className="w-32 h-32 bg-gradient-to-br from-kodo-cyan to-blue-600 rounded-full mx-auto mb-8 flex items-center justify-center shadow-[0_0_50px_rgba(102,252,241,0.3)] animate-pulse">
+  ```
+
+---
+
+### apps/web/src/features/auth/components/AuthButton.tsx
+**Total instances in file**: 2
+
+- **Line 23**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
+  ```tsx
+  ? 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600'
+  ```
+
+- **Line 24**: `bg-gray-`, `text-gray-`, `bg-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
+  ```tsx
+  : 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600',
+  ```
+
+---
+
+### apps/web/src/features/auth/components/AuthFormField.tsx
+**Total instances in file**: 4
+
+- **Line 30**: `text-gray-`, `text-gray-`
+  ```tsx
+  className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+  ```
+
+- **Line 34**: `text-red-`
+  ```tsx
+  <span className="text-red-500 ml-1" aria-label="required">
+  ```
+
+- **Line 41**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500 dark:text-gray-400">{helpText}</p>
+  ```
+
+- **Line 45**: `text-red-`, `text-red-`
+  ```tsx
+  className="text-sm text-red-600 dark:text-red-400"
+  ```
+
+---
+
+### apps/web/src/features/auth/components/AuthInput.tsx
+**Total instances in file**: 5
+
+- **Line 26**: `text-gray-`, `text-gray-`
+  ```tsx
+  className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+  ```
+
+- **Line 35**: `bg-gray-`, `border-gray-`
+  ```tsx
+  'dark:bg-gray-800 dark:text-white dark:border-gray-600',
+  ```
+
+- **Line 37**: `border-red-`, `border-red-`
+  ```tsx
+  ? 'border-red-500 focus:ring-red-500 dark:border-red-500'
+  ```
+
+- **Line 38**: `border-gray-`, `border-gray-`
+  ```tsx
+  : 'border-gray-300 focus:ring-blue-500 dark:border-gray-600',
+  ```
+
+- **Line 63**: `text-red-`, `text-red-`
+  ```tsx
+  className="mt-1 text-sm text-red-600 dark:text-red-400"
+  ```
+
+---
+
+### apps/web/src/features/auth/components/AuthLayout.tsx
+**Total instances in file**: 1
+
+- **Line 78**: `text-blue-`, `text-blue-`, `text-blue-`, `text-blue-`
+  ```tsx
+  className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+  ```
+
+---
+
+### apps/web/src/features/auth/components/EmailVerificationBadge.tsx
+**Total instances in file**: 2
+
+- **Line 14**: `bg-green-`, `text-green-`, `bg-green-`, `text-green-`
+  ```tsx
+  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+  ```
+
+- **Line 21**: `bg-yellow-`, `text-yellow-`, `bg-yellow-`, `text-yellow-`
+  ```tsx
+  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
+  ```
+
+---
+
+### apps/web/src/features/auth/components/OAuthButtons.tsx
+**Total instances in file**: 1
+
+- **Line 43**: `text-gray-`
+  ```tsx
+  <div className="text-sm text-center text-gray-500 mb-4">
+  ```
+
+---
+
+### apps/web/src/features/auth/components/PasswordStrengthIndicator.tsx
+**Total instances in file**: 9
+
+- **Line 52**: `bg-red-`
+  ```tsx
+  color = 'bg-red-500';
+  ```
+
+- **Line 55**: `bg-orange-`
+  ```tsx
+  color = 'bg-orange-500';
+  ```
+
+- **Line 58**: `bg-yellow-`
+  ```tsx
+  color = 'bg-yellow-500';
+  ```
+
+- **Line 61**: `bg-green-`
+  ```tsx
+  color = 'bg-green-500';
+  ```
+
+- **Line 64**: `bg-green-`
+  ```tsx
+  color = 'bg-green-600';
+  ```
+
+- **Line 84**: `bg-gray-`
+  ```tsx
+  className="w-full bg-gray-200 rounded-full h-2"
+  ```
+
+- **Line 97**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-600 mt-1" id="password-strength-label">
+  ```
+
+- **Line 102**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-600">
+  ```
+
+- **Line 106**: `text-red-`
+  ```tsx
+  <li key={index} className="text-red-600">
+  ```
+
+---
+
+### apps/web/src/features/auth/components/TwoFactorVerify.tsx
+**Total instances in file**: 5
+
+- **Line 78**: `text-blue-`
+  ```tsx
+  <Shield className="h-5 w-5 text-blue-500" />
+  ```
+
+- **Line 119**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-500">
+  ```
+
+- **Line 123**: `text-blue-`
+  ```tsx
+  className="text-blue-600 hover:underline"
+  ```
+
+- **Line 144**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-500">
+  ```
+
+- **Line 147**: `text-blue-`
+  ```tsx
+  className="text-blue-600 hover:underline"
+  ```
+
+---
+
+### apps/web/src/features/auth/pages/ForgotPasswordPage.tsx
+**Total instances in file**: 4
+
+- **Line 74**: `bg-green-`, `border-green-`, `text-green-`
+  ```tsx
+  className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
+  ```
+
+- **Line 83**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-600">
+  ```
+
+- **Line 89**: `text-blue-`
+  ```tsx
+  className="text-blue-600 hover:underline text-sm block focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+  ```
+
+- **Line 102**: `bg-red-`, `border-red-`, `text-red-`
+  ```tsx
+  className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded"
+  ```
+
+---
+
+### apps/web/src/features/auth/pages/LoginPage.tsx
+**Total instances in file**: 5
+
+- **Line 206**: `border-gray-`
+  ```tsx
+  <div className="w-full border-t border-gray-300"></div>
+  ```
+
+- **Line 209**: `text-gray-`
+  ```tsx
+  <span className="px-2 bg-white text-gray-500" aria-hidden="true">
+  ```
+
+- **Line 224**: `bg-red-`, `border-red-`, `text-red-`
+  ```tsx
+  className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded"
+  ```
+
+- **Line 266**: `text-blue-`, `border-gray-`
+  ```tsx
+  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+  ```
+
+- **Line 271**: `text-gray-`
+  ```tsx
+  className="ml-2 block text-sm text-gray-900"
+  ```
+
+---
+
+### apps/web/src/features/auth/pages/OAuthCallbackPage.tsx
+**Total instances in file**: 2
+
+- **Line 10**: `border-blue-`
+  ```tsx
+  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+  ```
+
+- **Line 11**: `text-gray-`
+  ```tsx
+  <p className="mt-4 text-sm text-gray-600">
+  ```
+
+---
+
+### apps/web/src/features/auth/pages/RegisterPage.tsx
+**Total instances in file**: 13
+
+- **Line 167**: `bg-green-`, `border-green-`, `text-green-`
+  ```tsx
+  className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
+  ```
+
+- **Line 176**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-600">
+  ```
+
+- **Line 182**: `text-green-`
+  ```tsx
+  className="text-sm text-green-600"
+  ```
+
+- **Line 193**: `text-blue-`
+  ```tsx
+  className="text-blue-600 hover:underline text-sm disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+  ```
+
+- **Line 215**: `bg-red-`, `border-red-`, `text-red-`
+  ```tsx
+  className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded"
+  ```
+
+- **Line 236**: `text-gray-`
+  ```tsx
+  <p className="text-xs text-gray-500" role="status">
+  ```
+
+- **Line 241**: `text-green-`
+  ```tsx
+  <p className="text-xs text-green-600" role="status">
+  ```
+
+- **Line 247**: `text-red-`
+  ```tsx
+  <p className="text-xs text-red-600" role="alert">
+  ```
+
+- **Line 300**: `text-blue-`, `border-gray-`
+  ```tsx
+  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mt-1"
+  ```
+
+- **Line 307**: `text-gray-`
+  ```tsx
+  <label htmlFor="terms" className="ml-2 block text-sm text-gray-900">
+  ```
+
+- **Line 311**: `text-blue-`
+  ```tsx
+  className="text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+  ```
+
+- **Line 319**: `text-blue-`
+  ```tsx
+  className="text-blue-600 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+  ```
+
+- **Line 331**: `text-red-`
+  ```tsx
+  <p id="terms-error" className="text-sm text-red-600" role="alert">
+  ```
+
+---
+
+### apps/web/src/features/auth/pages/ResetPasswordPage.tsx
+**Total instances in file**: 2
+
+- **Line 124**: `bg-red-`, `border-red-`, `text-red-`
+  ```tsx
+  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
+  ```
+
+- **Line 146**: `bg-green-`, `border-green-`, `text-green-`
+  ```tsx
+  className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
+  ```
+
+---
+
+### apps/web/src/features/auth/pages/VerifyEmailPage.tsx
+**Total instances in file**: 5
+
+- **Line 152**: `border-blue-`
+  ```tsx
+  <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+  ```
+
+- **Line 154**: `text-gray-`
+  ```tsx
+  <p className="text-gray-600">{message}</p>
+  ```
+
+- **Line 173**: `bg-green-`, `border-green-`, `text-green-`
+  ```tsx
+  className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
+  ```
+
+- **Line 178**: `text-gray-`
+  ```tsx
+  <p className="text-xs mt-2 text-gray-600">
+  ```
+
+- **Line 196**: `bg-red-`, `border-red-`, `text-red-`
+  ```tsx
+  className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded"
+  ```
+
+---
+
+### apps/web/src/features/chat/components/ChatMessage.tsx
+**Total instances in file**: 1
+
+- **Line 72**: `text-gray-`
+  ```tsx
+  : 'bg-white/5 border border-white/10 text-gray-100 rounded-tl-sm hover:bg-white/10',
+  ```
+
+---
+
+### apps/web/src/features/chat/components/MessageSearch.tsx
+**Total instances in file**: 6
+
+- **Line 63**: `text-gray-`
+  ```tsx
+  <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+  ```
+
+- **Line 100**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-500 mb-2">
+  ```
+
+- **Line 106**: `bg-gray-`
+  ```tsx
+  className="p-2 hover:bg-gray-100 rounded cursor-pointer"
+  ```
+
+- **Line 115**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-600 truncate">
+  ```
+
+- **Line 118**: `text-gray-`
+  ```tsx
+  <div className="text-xs text-gray-400">
+  ```
+
+- **Line 128**: `text-gray-`
+  ```tsx
+  <div className="absolute z-10 w-full mt-2 bg-white border rounded-lg shadow-lg p-4 text-sm text-gray-500">
+  ```
+
+---
+
+### apps/web/src/features/chat/components/TypingIndicator.tsx
+**Total instances in file**: 1
+
+- **Line 17**: `text-gray-`
+  ```tsx
+  <div className="px-4 py-1 text-xs text-gray-500 italic animate-pulse">
+  ```
+
+---
+
+### apps/web/src/features/chat/components/VirtualizedChatMessages.tsx
+**Total instances in file**: 13
+
+- **Line 49**: `border-gray-`, `bg-gray-`
+  ```tsx
+  className={`p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer transition-colors ${
+  ```
+
+- **Line 58**: `bg-blue-`
+  ```tsx
+  <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
+  ```
+
+- **Line 66**: `text-gray-`
+  ```tsx
+  <span className="text-sm font-medium text-gray-900">
+  ```
+
+- **Line 69**: `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500">
+  ```
+
+- **Line 79**: `text-gray-`
+  ```tsx
+  className="text-sm text-gray-700 break-words"
+  ```
+
+- **Line 87**: `text-gray-`
+  ```tsx
+  <div className="mt-2 text-xs text-gray-500">
+  ```
+
+- **Line 88**: `bg-blue-`, `text-blue-`
+  ```tsx
+  <span className="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded-full">
+  ```
+
+- **Line 126**: `border-blue-`
+  ```tsx
+  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+  ```
+
+- **Line 127**: `text-gray-`
+  ```tsx
+  <span className="ml-2 text-sm text-gray-500">
+  ```
+
+- **Line 139**: `text-gray-`
+  ```tsx
+  <div className="text-gray-400 text-6xl mb-4">💬</div>
+  ```
+
+- **Line 140**: `text-gray-`
+  ```tsx
+  <p className="text-gray-500">Aucun message dans cette conversation</p>
+  ```
+
+- **Line 141**: `text-gray-`
+  ```tsx
+  <p className="text-sm text-gray-400 mt-2">
+  ```
+
+- **Line 173**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  className="absolute bottom-4 right-4 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 shadow-lg transition-colors"
+  ```
+
+---
+
+### apps/web/src/features/dashboard/pages/DashboardPage.tsx
+**Total instances in file**: 8
+
+- **Line 35**: `text-blue-`
+  ```tsx
+  color: 'text-blue-600',
+  ```
+
+- **Line 42**: `text-green-`
+  ```tsx
+  color: 'text-green-600',
+  ```
+
+- **Line 49**: `text-red-`
+  ```tsx
+  color: 'text-red-600',
+  ```
+
+- **Line 56**: `text-purple-`
+  ```tsx
+  color: 'text-purple-600',
+  ```
+
+- **Line 85**: `text-green-`
+  ```tsx
+  <span className="text-green-600">{stat.change}</span> par
+  ```
+
+- **Line 105**: `bg-blue-`
+  ```tsx
+  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
+  ```
+
+- **Line 114**: `bg-green-`
+  ```tsx
+  <div className="w-2 h-2 bg-green-600 rounded-full"></div>
+  ```
+
+- **Line 123**: `bg-purple-`
+  ```tsx
+  <div className="w-2 h-2 bg-purple-600 rounded-full"></div>
+  ```
+
+---
+
+### apps/web/src/features/error/pages/NotFoundPage.tsx
+**Total instances in file**: 8
+
+- **Line 24**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
+  ```
+
+- **Line 28**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+  ```
+
+- **Line 29**: `text-blue-`, `text-blue-`
+  ```tsx
+  <Search className="h-8 w-8 text-blue-600 dark:text-blue-400" />
+  ```
+
+- **Line 37**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="text-6xl font-bold text-gray-300 dark:text-gray-700">
+  ```
+
+- **Line 40**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 65**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+  ```
+
+- **Line 91**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+  ```
+
+- **Line 94**: `text-gray-`, `text-gray-`
+  ```tsx
+  <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 list-disc list-inside">
+  ```
+
+---
+
+### apps/web/src/features/error/pages/ServerErrorPage.tsx
+**Total instances in file**: 16
+
+- **Line 40**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
+  ```
+
+- **Line 44**: `bg-red-`, `bg-red-`
+  ```tsx
+  <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900">
+  ```
+
+- **Line 45**: `text-red-`, `text-red-`
+  ```tsx
+  <AlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+  ```
+
+- **Line 53**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="text-6xl font-bold text-gray-300 dark:text-gray-700">
+  ```
+
+- **Line 56**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 63**: `bg-blue-`, `bg-blue-`, `border-blue-`, `border-blue-`
+  ```tsx
+  <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+  ```
+
+- **Line 65**: `text-blue-`, `text-blue-`
+  ```tsx
+  <Clock className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5" />
+  ```
+
+- **Line 67**: `text-blue-`, `text-blue-`
+  ```tsx
+  <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
+  ```
+
+- **Line 70**: `text-blue-`, `text-blue-`
+  ```tsx
+  <ul className="text-sm text-blue-800 dark:text-blue-200 mt-2 space-y-1 list-disc list-inside">
+  ```
+
+- **Line 103**: `text-gray-`, `text-gray-`
+  ```tsx
+  <p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+  ```
+
+- **Line 107**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 108**: `text-green-`
+  ```tsx
+  <CheckCircle className="h-4 w-4 text-green-600" />
+  ```
+
+- **Line 113**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 114**: `text-blue-`
+  ```tsx
+  <Mail className="h-4 w-4 text-blue-600" />
+  ```
+
+- **Line 125**: `text-gray-`, `text-gray-`, `text-gray-`, `text-gray-`
+  ```tsx
+  <summary className="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer hover:text-gray-900 dark:hover:text-gray-100">
+  ```
+
+- **Line 128**: `bg-gray-`, `bg-gray-`, `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs font-mono text-gray-600 dark:text-gray-400">
+  ```
+
+---
+
+### apps/web/src/features/library/components/LibraryManager.tsx
+**Total instances in file**: 1
+
+- **Line 227**: `text-red-`
+  ```tsx
+  <div className="text-center text-red-500">
+  ```
+
+---
+
+### apps/web/src/features/library/pages/LibraryPage.tsx
+**Total instances in file**: 1
+
+- **Line 782**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-400">
+  ```
+
+---
+
+### apps/web/src/features/player/components/AudioPlayer.tsx
+**Total instances in file**: 8
+
+- **Line 192**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="text-sm text-gray-500 dark:text-gray-400">
+  ```
+
+- **Line 203**: `bg-gray-`
+  ```tsx
+  'bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6',
+  ```
+
+- **Line 308**: `border-gray-`, `border-gray-`
+  ```tsx
+  <div className="flex items-center justify-between gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+  ```
+
+- **Line 313**: `text-gray-`
+  ```tsx
+  className={cn('gap-1', !isSynced && 'text-gray-500')}
+  ```
+
+- **Line 332**: `text-gray-`, `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 344**: `text-gray-`, `text-gray-`
+  ```tsx
+  <span className="text-sm text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 362**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="text-gray-500 dark:text-gray-400 mb-2">
+  ```
+
+- **Line 365**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="text-sm text-gray-400 dark:text-gray-500">
+  ```
+
+---
+
+### apps/web/src/features/player/components/MiniPlayer.tsx
+**Total instances in file**: 5
+
+- **Line 51**: `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  'fixed left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 shadow-lg',
+  ```
+
+- **Line 118**: `text-gray-`, `text-gray-`
+  ```tsx
+  'p-2 rounded-lg text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 119**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+- **Line 136**: `text-gray-`, `text-gray-`
+  ```tsx
+  'p-2 rounded-lg text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 137**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+---
+
+### apps/web/src/features/player/components/NextPreviousButtons.tsx
+**Total instances in file**: 3
+
+- **Line 44**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
+  ```
+
+- **Line 46**: `text-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
+  ```tsx
+  'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
+  ```
+
+- **Line 48**: `border-gray-`, `text-gray-`, `bg-gray-`, `border-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
+  ```tsx
+  'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
+  ```
+
+---
+
+### apps/web/src/features/player/components/PlayPauseButton.tsx
+**Total instances in file**: 3
+
+- **Line 42**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
+  ```
+
+- **Line 44**: `text-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
+  ```tsx
+  'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
+  ```
+
+- **Line 46**: `border-gray-`, `text-gray-`, `bg-gray-`, `border-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
+  ```tsx
+  'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
+  ```
+
+---
+
+### apps/web/src/features/player/components/PlaybackSpeedControl.tsx
+**Total instances in file**: 9
+
+- **Line 90**: `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600',
+  ```
+
+- **Line 91**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-700 dark:text-gray-300',
+  ```
+
+- **Line 92**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-50 dark:hover:bg-gray-700',
+  ```
+
+- **Line 116**: `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  className="absolute z-50 mt-1 w-32 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg"
+  ```
+
+- **Line 126**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-700',
+  ```
+
+- **Line 127**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700',
+  ```
+
+- **Line 130**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-50 dark:bg-blue-900/20',
+  ```
+
+- **Line 135**: `text-gray-`
+  ```tsx
+  <span className="font-medium text-gray-900 dark:text-white">
+  ```
+
+- **Line 140**: `text-blue-`, `text-blue-`
+  ```tsx
+  className="h-4 w-4 text-blue-600 dark:text-blue-400"
+  ```
+
+---
+
+### apps/web/src/features/player/components/PlayerLoading.tsx
+**Total instances in file**: 2
+
+- **Line 55**: `text-blue-`, `text-blue-`
+  ```tsx
+  'animate-spin text-blue-600 dark:text-blue-400',
+  ```
+
+- **Line 63**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-700 dark:text-gray-300 text-center',
+  ```
+
+---
+
+### apps/web/src/features/player/components/ProgressBar.tsx
+**Total instances in file**: 6
+
+- **Line 155**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 rounded-full" />
+  ```
+
+- **Line 160**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'absolute left-0 top-0 h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all',
+  ```
+
+- **Line 161**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  isDragging && 'bg-blue-700 dark:bg-blue-600',
+  ```
+
+- **Line 169**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  className="absolute top-0 h-full w-0.5 bg-blue-800 dark:bg-blue-400 opacity-50"
+  ```
+
+- **Line 177**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-500 rounded-full',
+  ```
+
+- **Line 188**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  className="absolute bottom-full mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-800 text-white text-xs rounded pointer-events-none whitespace-nowrap"
+  ```
+
+---
+
+### apps/web/src/features/player/components/QualitySelector.tsx
+**Total instances in file**: 10
+
+- **Line 86**: `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600',
+  ```
+
+- **Line 87**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-700 dark:text-gray-300',
+  ```
+
+- **Line 88**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-50 dark:hover:bg-gray-700',
+  ```
+
+- **Line 111**: `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  className="absolute z-50 mt-1 w-48 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg"
+  ```
+
+- **Line 121**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-700',
+  ```
+
+- **Line 122**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700',
+  ```
+
+- **Line 125**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-50 dark:bg-blue-900/20',
+  ```
+
+- **Line 131**: `text-gray-`
+  ```tsx
+  <span className="font-medium text-gray-900 dark:text-white">
+  ```
+
+- **Line 135**: `text-gray-`, `text-gray-`
+  ```tsx
+  <span className="text-xs text-gray-500 dark:text-gray-400">
+  ```
+
+- **Line 142**: `text-blue-`, `text-blue-`
+  ```tsx
+  className="h-4 w-4 text-blue-600 dark:text-blue-400"
+  ```
+
+---
+
+### apps/web/src/features/player/components/RepeatShuffleButtons.tsx
+**Total instances in file**: 6
+
+- **Line 44**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600',
+  ```
+
+- **Line 46**: `text-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
+  ```tsx
+  'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
+  ```
+
+- **Line 48**: `border-gray-`, `text-gray-`, `bg-gray-`, `border-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
+  ```tsx
+  'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700',
+  ```
+
+- **Line 98**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600',
+  ```
+
+- **Line 112**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  className="absolute bottom-0 right-0 text-[8px] font-bold leading-none bg-blue-700 dark:bg-blue-600 rounded-full w-3 h-3 flex items-center justify-center"
+  ```
+
+- **Line 131**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600',
+  ```
+
+---
+
+### apps/web/src/features/player/components/TimeDisplay.tsx
+**Total instances in file**: 1
+
+- **Line 30**: `text-gray-`, `text-gray-`
+  ```tsx
+  'flex items-center text-sm text-gray-600 dark:text-gray-400',
+  ```
+
+---
+
+### apps/web/src/features/player/components/TrackInfo.tsx
+**Total instances in file**: 8
+
+- **Line 29**: `text-gray-`, `text-gray-`
+  ```tsx
+  'flex items-center gap-3 text-gray-500 dark:text-gray-400',
+  ```
+
+- **Line 56**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'rounded-lg object-cover bg-gray-200 dark:bg-gray-700',
+  ```
+
+- **Line 63**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center',
+  ```
+
+- **Line 73**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-400 dark:text-gray-500',
+  ```
+
+- **Line 85**: `text-gray-`
+  ```tsx
+  className="text-sm font-semibold text-gray-900 dark:text-white truncate"
+  ```
+
+- **Line 92**: `text-gray-`, `text-gray-`
+  ```tsx
+  className="text-xs text-gray-600 dark:text-gray-400 truncate"
+  ```
+
+- **Line 101**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="flex items-center gap-2 mt-1 text-xs text-gray-500 dark:text-gray-500">
+  ```
+
+- **Line 108**: `text-gray-`, `text-gray-`
+  ```tsx
+  <span className="text-gray-400 dark:text-gray-600">•</span>
+  ```
+
+---
+
+### apps/web/src/features/player/components/VolumeControl.tsx
+**Total instances in file**: 6
+
+- **Line 110**: `text-gray-`, `bg-gray-`, `text-gray-`, `bg-gray-`
+  ```tsx
+  'bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-800',
+  ```
+
+- **Line 140**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="absolute inset-0 bg-gray-200 dark:bg-gray-700 rounded-full" />
+  ```
+
+- **Line 145**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'absolute left-0 top-0 h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all',
+  ```
+
+- **Line 146**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  isDragging && 'bg-blue-700 dark:bg-blue-600',
+  ```
+
+- **Line 154**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-blue-600 dark:bg-blue-500 rounded-full',
+  ```
+
+- **Line 166**: `text-gray-`, `text-gray-`
+  ```tsx
+  className="text-xs text-gray-600 dark:text-gray-400 min-w-[3ch] text-right"
+  ```
+
+---
+
+### apps/web/src/features/playlists/components/ImportPlaylistButton.tsx
+**Total instances in file**: 1
+
+- **Line 267**: `border-gray-`
+  ```tsx
+  className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
+  ```
+
+---
+
+### apps/web/src/features/playlists/components/PlaylistActions.tsx
+**Total instances in file**: 1
+
+- **Line 125**: `text-green-`
+  ```tsx
+  className="w-4 h-4 sm:mr-2 text-green-600"
+  ```
+
+---
+
+### apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
+**Total instances in file**: 2
+
+- **Line 200**: `bg-blue-`, `bg-blue-`, `border-blue-`, `border-blue-`
+  ```tsx
+  'p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg',
+  ```
+
+- **Line 208**: `text-blue-`, `text-blue-`
+  ```tsx
+  <span className="text-sm font-medium text-blue-900 dark:text-blue-100">
+  ```
+
+---
+
+### apps/web/src/features/playlists/components/PlaylistCard.tsx
+**Total instances in file**: 5
+
+- **Line 68**: `border-blue-`
+  ```tsx
+  selectable && selected && 'ring-2 ring-blue-500 border-blue-500',
+  ```
+
+- **Line 100**: `bg-blue-`, `border-blue-`
+  ```tsx
+  ? 'bg-blue-600 border-blue-600 text-white'
+  ```
+
+- **Line 101**: `bg-gray-`, `border-gray-`, `border-gray-`, `border-blue-`
+  ```tsx
+  : 'bg-white/90 dark:bg-gray-800/90 border-gray-300 dark:border-gray-600 text-transparent hover:border-blue-500',
+  ```
+
+- **Line 119**: `bg-green-`
+  ```tsx
+  className="bg-green-500/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
+  ```
+
+- **Line 127**: `bg-gray-`
+  ```tsx
+  className="bg-gray-700/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
+  ```
+
+---
+
+### apps/web/src/features/playlists/components/PlaylistHeader.tsx
+**Total instances in file**: 2
+
+- **Line 56**: `bg-green-`
+  ```tsx
+  className="bg-green-500/90 text-white px-3 py-1.5 rounded-full text-sm flex items-center gap-2"
+  ```
+
+- **Line 64**: `bg-gray-`
+  ```tsx
+  className="bg-gray-700/90 text-white px-3 py-1.5 rounded-full text-sm flex items-center gap-2"
+  ```
+
+---
+
+### apps/web/src/features/playlists/components/PlaylistList.tsx
+**Total instances in file**: 7
+
+- **Line 298**: `bg-gray-`, `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  className="inline-flex items-center gap-1 p-1 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
+  ```
+
+- **Line 307**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-200 dark:hover:bg-gray-700',
+  ```
+
+- **Line 311**: `bg-gray-`, `text-blue-`, `text-blue-`
+  ```tsx
+  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+  ```
+
+- **Line 312**: `text-gray-`, `text-gray-`
+  ```tsx
+  : 'text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 325**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-200 dark:hover:bg-gray-700',
+  ```
+
+- **Line 329**: `bg-gray-`, `text-blue-`, `text-blue-`
+  ```tsx
+  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+  ```
+
+- **Line 330**: `text-gray-`, `text-gray-`
+  ```tsx
+  : 'text-gray-600 dark:text-gray-400',
+  ```
+
+---
+
+### apps/web/src/features/playlists/components/PlaylistTrackItem.tsx
+**Total instances in file**: 10
+
+- **Line 66**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+- **Line 67**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'active:bg-gray-200 dark:active:bg-gray-700',
+  ```
+
+- **Line 95**: `bg-gray-`, `bg-gray-`, `bg-gray-`, `bg-gray-`
+  ```tsx
+  className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 active:bg-gray-300 dark:active:bg-gray-600 transition-colors touch-manipulation min-h-[32px] min-w-[32px] sm:min-h-0 sm:min-w-0"
+  ```
+
+- **Line 103**: `text-gray-`, `text-gray-`
+  ```tsx
+  <Pause className="h-3 w-3 sm:h-4 sm:w-4 text-gray-700 dark:text-gray-300" />
+  ```
+
+- **Line 105**: `text-gray-`, `text-gray-`
+  ```tsx
+  <Play className="h-3 w-3 sm:h-4 sm:w-4 text-gray-700 dark:text-gray-300" />
+  ```
+
+- **Line 122**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-md bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+  ```
+
+- **Line 123**: `text-gray-`, `text-gray-`
+  ```tsx
+  <Music className="h-5 w-5 sm:h-6 sm:w-6 text-gray-400 dark:text-gray-500" />
+  ```
+
+- **Line 130**: `text-gray-`
+  ```tsx
+  <div className="font-medium text-sm sm:text-base text-gray-900 dark:text-white truncate">
+  ```
+
+- **Line 133**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="text-xs sm:text-sm text-gray-600 dark:text-gray-400 truncate">
+  ```
+
+- **Line 142**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="hidden sm:block text-sm text-gray-500 dark:text-gray-500 flex-shrink-0">
+  ```
+
+---
+
+### apps/web/src/features/playlists/components/PlaylistTrackList.tsx
+**Total instances in file**: 1
+
+- **Line 222**: `text-gray-`
+  ```tsx
+  <p className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+  ```
+
+---
+
+### apps/web/src/features/playlists/pages/PlaylistListPage.tsx
+**Total instances in file**: 2
+
+- **Line 109**: `text-gray-`
+  ```tsx
+  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+  ```
+
+- **Line 126**: `bg-blue-`
+  ```tsx
+  <span className="ml-2 bg-blue-600 text-white rounded-full px-2 py-0.5 text-xs">
+  ```
+
+---
+
+### apps/web/src/features/streaming/components/PlaybackDashboard.tsx
+**Total instances in file**: 4
+
+- **Line 145**: `text-green-`
+  ```tsx
+  {isPositive && <TrendingUp className="h-4 w-4 text-green-500" />}
+  ```
+
+- **Line 146**: `text-red-`
+  ```tsx
+  {isNegative && <TrendingDown className="h-4 w-4 text-red-500" />}
+  ```
+
+- **Line 151**: `text-green-`
+  ```tsx
+  ? 'text-green-500'
+  ```
+
+- **Line 153**: `text-red-`
+  ```tsx
+  ? 'text-red-500'
+  ```
+
+---
+
+### apps/web/src/features/streaming/components/PlaybackHeatmap.tsx
+**Total instances in file**: 1
+
+- **Line 304**: `bg-gray-`
+  ```tsx
+  <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block z-10 bg-gray-900 text-white text-xs rounded px-2 py-1 whitespace-nowrap">
+  ```
+
+---
+
+### apps/web/src/features/streaming/components/PlaybackSummary.tsx
+**Total instances in file**: 3
+
+- **Line 145**: `text-blue-`
+  ```tsx
+  <Play className="h-4 w-4 text-blue-600" />
+  ```
+
+- **Line 163**: `text-green-`
+  ```tsx
+  <Clock className="h-4 w-4 text-green-600" />
+  ```
+
+- **Line 181**: `text-purple-`
+  ```tsx
+  <CheckCircle2 className="h-4 w-4 text-purple-600" />
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/LikeButton.tsx
+**Total instances in file**: 1
+
+- **Line 163**: `text-red-`, `text-red-`
+  ```tsx
+  isLiked && 'text-red-500 hover:text-red-600',
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackCard.tsx
+**Total instances in file**: 1
+
+- **Line 155**: `text-red-`
+  ```tsx
+  className="text-white hover:text-red-500"
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
+**Total instances in file**: 4
+
+- **Line 53**: `bg-gray-`, `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  'bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
+  ```
+
+- **Line 69**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-200 dark:hover:bg-gray-700',
+  ```
+
+- **Line 72**: `bg-gray-`, `text-blue-`, `text-blue-`
+  ```tsx
+  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+  ```
+
+- **Line 73**: `text-gray-`, `text-gray-`
+  ```tsx
+  : 'text-gray-600 dark:text-gray-400',
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackHistory.tsx
+**Total instances in file**: 6
+
+- **Line 125**: `text-green-`, `bg-green-`
+  ```tsx
+  return 'text-green-600 bg-green-50';
+  ```
+
+- **Line 127**: `text-blue-`, `bg-blue-`
+  ```tsx
+  return 'text-blue-600 bg-blue-50';
+  ```
+
+- **Line 129**: `text-red-`, `bg-red-`
+  ```tsx
+  return 'text-red-600 bg-red-50';
+  ```
+
+- **Line 131**: `text-purple-`, `bg-purple-`
+  ```tsx
+  return 'text-purple-600 bg-purple-50';
+  ```
+
+- **Line 133**: `text-orange-`, `bg-orange-`
+  ```tsx
+  return 'text-orange-600 bg-orange-50';
+  ```
+
+- **Line 137**: `text-gray-`, `bg-gray-`
+  ```tsx
+  return 'text-gray-600 bg-gray-50';
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackList.tsx
+**Total instances in file**: 2
+
+- **Line 133**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-50 dark:bg-blue-900/20',
+  ```
+
+- **Line 162**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-50 dark:bg-blue-900/20',
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackListContainer.tsx
+**Total instances in file**: 1
+
+- **Line 22**: `text-red-`
+  ```tsx
+  <div className="p-4 text-red-500">
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackListEmpty.tsx
+**Total instances in file**: 8
+
+- **Line 85**: `text-red-`, `text-red-`
+  ```tsx
+  ? 'text-red-500 dark:text-red-400'
+  ```
+
+- **Line 86**: `text-gray-`, `text-gray-`
+  ```tsx
+  : 'text-gray-400 dark:text-gray-500';
+  ```
+
+- **Line 106**: `text-red-`, `text-red-`
+  ```tsx
+  ? 'text-red-900 dark:text-red-100'
+  ```
+
+- **Line 107**: `text-gray-`
+  ```tsx
+  : 'text-gray-900 dark:text-white',
+  ```
+
+- **Line 117**: `text-red-`, `text-red-`
+  ```tsx
+  ? 'text-red-700 dark:text-red-300'
+  ```
+
+- **Line 118**: `text-gray-`, `text-gray-`
+  ```tsx
+  : 'text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 136**: `bg-red-`, `bg-red-`, `bg-red-`, `bg-red-`
+  ```tsx
+  ? 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:ring-red-500'
+  ```
+
+- **Line 137**: `bg-blue-`, `bg-blue-`, `bg-blue-`, `bg-blue-`
+  ```tsx
+  : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:ring-blue-500',
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackListPagination.tsx
+**Total instances in file**: 21
+
+- **Line 104**: `border-gray-`, `border-gray-`
+  ```tsx
+  'px-4 py-3 border-t border-gray-200 dark:border-gray-700',
+  ```
+
+- **Line 112**: `text-gray-`, `text-gray-`
+  ```tsx
+  <div className="text-sm text-gray-600 dark:text-gray-400">
+  ```
+
+- **Line 114**: `text-gray-`
+  ```tsx
+  <span className="font-medium text-gray-900 dark:text-white">
+  ```
+
+- **Line 118**: `text-gray-`
+  ```tsx
+  <span className="font-medium text-gray-900 dark:text-white">
+  ```
+
+- **Line 122**: `text-gray-`
+  ```tsx
+  <span className="font-medium text-gray-900 dark:text-white">
+  ```
+
+- **Line 138**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 139**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+- **Line 156**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 157**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+- **Line 178**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-700 dark:text-gray-300',
+  ```
+
+- **Line 179**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+- **Line 188**: `text-gray-`, `text-gray-`
+  ```tsx
+  <span className="px-2 text-gray-500 dark:text-gray-400">
+  ```
+
+- **Line 205**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  ? 'bg-blue-600 text-white dark:bg-blue-500'
+  ```
+
+- **Line 206**: `text-gray-`, `text-gray-`, `bg-gray-`, `bg-gray-`
+  ```tsx
+  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+- **Line 219**: `text-gray-`, `text-gray-`
+  ```tsx
+  <span className="px-2 text-gray-500 dark:text-gray-400">
+  ```
+
+- **Line 229**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-700 dark:text-gray-300',
+  ```
+
+- **Line 230**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+- **Line 250**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 251**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+- **Line 268**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 269**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-100 dark:hover:bg-gray-800',
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackListRow.tsx
+**Total instances in file**: 2
+
+- **Line 71**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  isSelected && 'bg-blue-50 dark:bg-blue-900/20',
+  ```
+
+- **Line 149**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  isSelected && 'bg-blue-50 dark:bg-blue-900/20',
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
+**Total instances in file**: 7
+
+- **Line 60**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'bg-blue-600 dark:bg-blue-700 text-white',
+  ```
+
+- **Line 82**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'hover:bg-blue-700 dark:hover:bg-blue-600',
+  ```
+
+- **Line 98**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'hover:bg-blue-700 dark:hover:bg-blue-600',
+  ```
+
+- **Line 114**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'hover:bg-blue-700 dark:hover:bg-blue-600',
+  ```
+
+- **Line 130**: `bg-red-`, `bg-red-`
+  ```tsx
+  'hover:bg-red-600 dark:hover:bg-red-500',
+  ```
+
+- **Line 146**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'hover:bg-blue-700 dark:hover:bg-blue-600',
+  ```
+
+- **Line 164**: `bg-blue-`, `bg-blue-`
+  ```tsx
+  'hover:bg-blue-700 dark:hover:bg-blue-600',
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackListSkeleton.tsx
+**Total instances in file**: 5
+
+- **Line 32**: `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  className="flex items-center gap-4 p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
+  ```
+
+- **Line 37**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="w-12 h-12 rounded-md bg-gray-200 dark:bg-gray-700 animate-pulse" />
+  ```
+
+- **Line 43**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4" />
+  ```
+
+- **Line 45**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2" />
+  ```
+
+- **Line 52**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-12" />
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/TrackSort.tsx
+**Total instances in file**: 9
+
+- **Line 133**: `text-gray-`
+  ```tsx
+  <FieldIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
+  ```
+
+- **Line 141**: `border-gray-`, `border-gray-`
+  ```tsx
+  'pl-10 pr-8 py-2 border border-gray-300 dark:border-gray-600',
+  ```
+
+- **Line 142**: `bg-gray-`
+  ```tsx
+  'rounded-md bg-white dark:bg-gray-700',
+  ```
+
+- **Line 143**: `text-gray-`
+  ```tsx
+  'text-sm font-medium text-gray-900 dark:text-white',
+  ```
+
+- **Line 155**: `text-gray-`
+  ```tsx
+  <ArrowUpDown className="absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
+  ```
+
+- **Line 165**: `border-gray-`, `border-gray-`
+  ```tsx
+  'p-2 rounded-md border border-gray-300 dark:border-gray-600',
+  ```
+
+- **Line 166**: `bg-gray-`
+  ```tsx
+  'bg-white dark:bg-gray-700',
+  ```
+
+- **Line 167**: `text-gray-`, `text-gray-`
+  ```tsx
+  'text-gray-700 dark:text-gray-300',
+  ```
+
+- **Line 168**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-50 dark:hover:bg-gray-600',
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/UploadQuota.tsx
+**Total instances in file**: 5
+
+- **Line 132**: `text-yellow-`
+  ```tsx
+  isQuotaNearLimit && !isQuotaExceeded && 'text-yellow-600',
+  ```
+
+- **Line 142**: `bg-yellow-`
+  ```tsx
+  isQuotaNearLimit && !isQuotaExceeded && '[&>div]:bg-yellow-500',
+  ```
+
+- **Line 163**: `text-yellow-`
+  ```tsx
+  isQuotaNearLimit && !isQuotaExceeded && 'text-yellow-600',
+  ```
+
+- **Line 174**: `bg-yellow-`
+  ```tsx
+  isQuotaNearLimit && !isQuotaExceeded && '[&>div]:bg-yellow-500',
+  ```
+
+- **Line 186**: `bg-yellow-`, `bg-yellow-`, `text-yellow-`, `text-yellow-`
+  ```tsx
+  <div className="flex items-start gap-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-md text-xs text-yellow-800 dark:text-yellow-200">
+  ```
+
+---
+
+### apps/web/src/features/tracks/components/ViewToggle.tsx
+**Total instances in file**: 7
+
+- **Line 69**: `bg-gray-`, `bg-gray-`, `border-gray-`, `border-gray-`
+  ```tsx
+  'bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
+  ```
+
+- **Line 83**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-200 dark:hover:bg-gray-700',
+  ```
+
+- **Line 87**: `bg-gray-`, `text-blue-`, `text-blue-`
+  ```tsx
+  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+  ```
+
+- **Line 88**: `text-gray-`, `text-gray-`
+  ```tsx
+  : 'text-gray-600 dark:text-gray-400',
+  ```
+
+- **Line 106**: `bg-gray-`, `bg-gray-`
+  ```tsx
+  'hover:bg-gray-200 dark:hover:bg-gray-700',
+  ```
+
+- **Line 110**: `bg-gray-`, `text-blue-`, `text-blue-`
+  ```tsx
+  ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
+  ```
+
+- **Line 111**: `text-gray-`, `text-gray-`
+  ```tsx
+  : 'text-gray-600 dark:text-gray-400',
+  ```
+
+---
+
+### apps/web/src/features/upload/components/UploadModal.tsx
+**Total instances in file**: 1
+
+- **Line 426**: `bg-green-`, `border-green-`, `text-green-`
+  ```tsx
+  <Alert className="bg-green-50 border-green-200 text-green-800">
+  ```
+
+---
+
+### apps/web/src/features/user/components/ProfileForm.tsx
+**Total instances in file**: 17
+
+- **Line 307**: `text-green-`
+  ```tsx
+  <CheckCircle2 className="h-5 w-5 text-green-600" />
+  ```
+
+- **Line 309**: `text-yellow-`
+  ```tsx
+  <AlertCircle className="h-5 w-5 text-yellow-600" />
+  ```
+
+- **Line 379**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 396**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">{errors.email.message}</p>
+  ```
+
+- **Line 411**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 426**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 444**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 465**: `text-red-`
+  ```tsx
+  <p className="text-red-500">{errors.bio.message}</p>
+  ```
+
+- **Line 493**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 514**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 535**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 556**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 577**: `text-red-`
+  ```tsx
+  <p className="text-sm text-red-500">
+  ```
+
+- **Line 596**: `text-blue-`
+  ```tsx
+  className="flex items-center gap-2 text-blue-500 hover:underline"
+  ```
+
+- **Line 607**: `text-pink-`
+  ```tsx
+  className="flex items-center gap-2 text-pink-500 hover:underline"
+  ```
+
+- **Line 618**: `text-blue-`
+  ```tsx
+  className="flex items-center gap-2 text-blue-600 hover:underline"
+  ```
+
+- **Line 629**: `text-red-`
+  ```tsx
+  className="flex items-center gap-2 text-red-500 hover:underline"
+  ```
+
+---
+
+### apps/web/src/pages/marketplace/MarketplaceHome.tsx
+**Total instances in file**: 2
+
+- **Line 212**: `bg-blue-`
+  ```tsx
+  <Badge className="ml-2 bg-blue-600">{getItemCount()}</Badge>
+  ```
+
+- **Line 223**: `text-gray-`
+  ```tsx
+  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+  ```
+
+---
diff --git a/scripts/generate_tailwind_list.py b/scripts/generate_tailwind_list.py
new file mode 100644
index 000000000..ccc0f44af
--- /dev/null
+++ b/scripts/generate_tailwind_list.py
@@ -0,0 +1,140 @@
+#!/usr/bin/env python3
+"""
+Generate a comprehensive list of all Tailwind default color instances.
+Excludes test files and backup files.
+"""
+
+import re
+import subprocess
+from collections import defaultdict
+from pathlib import Path
+
+# Patterns to search for
+PATTERNS = [
+    r'text-gray-',
+    r'bg-gray-',
+    r'border-gray-',
+    r'text-blue-',
+    r'bg-blue-',
+    r'border-blue-',
+    r'text-red-',
+    r'bg-red-',
+    r'border-red-',
+    r'text-green-',
+    r'bg-green-',
+    r'border-green-',
+    r'text-yellow-',
+    r'bg-yellow-',
+    r'text-purple-',
+    r'bg-purple-',
+    r'text-pink-',
+    r'bg-pink-',
+    r'text-indigo-',
+    r'bg-indigo-',
+    r'text-orange-',
+    r'bg-orange-',
+    r'from-gray-',
+    r'to-gray-',
+    r'from-blue-',
+    r'to-blue-',
+]
+
+# Combine patterns
+PATTERN = '|'.join(PATTERNS)
+
+def find_instances():
+    """Find all Tailwind default color instances."""
+    root = Path(__file__).parent.parent / 'apps' / 'web' / 'src'
+    
+    instances = defaultdict(list)
+    
+    # Find all .tsx and .ts files
+    for file_path in root.rglob('*.tsx'):
+        if 'ui.backup' in str(file_path) or file_path.name.endswith('.test.tsx'):
+            continue
+        check_file(file_path, instances)
+    
+    for file_path in root.rglob('*.ts'):
+        if 'ui.backup' in str(file_path) or file_path.name.endswith('.test.ts'):
+            continue
+        check_file(file_path, instances)
+    
+    return instances
+
+def check_file(file_path, instances):
+    """Check a file for Tailwind default colors."""
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            for line_num, line in enumerate(f, 1):
+                if re.search(PATTERN, line):
+                    # Extract the color class
+                    matches = re.findall(r'(' + PATTERN + r'[^\s"\'`)]+)', line)
+                    if matches:
+                        # Get relative path
+                        rel_path = file_path.relative_to(Path(__file__).parent.parent)
+                        instances[str(rel_path)].append({
+                            'line': line_num,
+                            'content': line.strip(),
+                            'colors': matches
+                        })
+    except Exception as e:
+        print(f"Error reading {file_path}: {e}", file=sys.stderr)
+
+def generate_markdown(instances):
+    """Generate markdown documentation."""
+    output = []
+    output.append("# Complete List of Remaining Tailwind Default Color Instances\n")
+    output.append("**Generated**: Automatically generated list\n")
+    output.append(f"**Total Files**: {len(instances)}\n")
+    
+    total_instances = sum(len(v) for v in instances.values())
+    output.append(f"**Total Instances**: {total_instances}\n")
+    output.append("**Status**: Action 9.1.1.3 - In Progress (294 instances migrated, ~19.7% complete)\n")
+    
+    output.append("\n## Usage\n")
+    output.append("This document lists all remaining Tailwind default color instances organized by file path.\n")
+    output.append("Each entry includes:\n")
+    output.append("- File path\n")
+    output.append("- Line number\n")
+    output.append("- Color classes found\n")
+    output.append("- Full line context\n")
+    
+    output.append("\n## Migration Guidelines\n")
+    output.append("Refer to `TAILWIND_COLORS_AUDIT.md` for color mapping:\n")
+    output.append("- `text-gray-*` → `text-kodo-content-dim` or `text-kodo-text-main`\n")
+    output.append("- `bg-gray-*` → `bg-kodo-graphite`, `bg-kodo-ink`, `bg-kodo-steel`, etc.\n")
+    output.append("- `border-gray-*` → `border-kodo-steel`\n")
+    output.append("- `text-blue-*` → `text-kodo-cyan` (when appropriate)\n")
+    output.append("- Other colors: Map to appropriate Kodo design system colors\n")
+    
+    output.append("\n## Files with Tailwind Default Colors\n")
+    output.append("\n---\n")
+    
+    # Sort files alphabetically
+    for file_path in sorted(instances.keys()):
+        file_instances = instances[file_path]
+        output.append(f"\n### {file_path}\n")
+        output.append(f"**Total instances in file**: {len(file_instances)}\n")
+        
+        for inst in file_instances:
+            colors_str = ', '.join(f"`{c}`" for c in inst['colors'])
+            output.append(f"\n- **Line {inst['line']}**: {colors_str}\n")
+            output.append(f"  ```tsx\n")
+            output.append(f"  {inst['content']}\n")
+            output.append(f"  ```\n")
+        
+        output.append("\n---\n")
+    
+    return ''.join(output)
+
+if __name__ == '__main__':
+    import sys
+    instances = find_instances()
+    markdown = generate_markdown(instances)
+    
+    output_file = Path(__file__).parent.parent / 'apps' / 'web' / 'docs' / 'TAILWIND_INSTANCES_FULL_LIST.md'
+    output_file.write_text(markdown, encoding='utf-8')
+    
+    total = sum(len(v) for v in instances.values())
+    print(f"Generated list with {total} instances across {len(instances)} files")
+    print(f"Output saved to: {output_file}")