components/CardItem.js

@@ -181,11 +181,15 @@ export default function CardItem({
   if (viewMode === 'list') {
     return (
       <div
-        className={`flex items-center p-4 border rounded-lg transition-all duration-200 cursor-pointer ${
+        className="flex items-center p-4 rounded-xl transition-all duration-200 cursor-pointer nav-item-hover"
-          isSelected 
+        style={{
-            ? 'border-purple-500 bg-purple-50 shadow-md' 
+          backgroundColor: isSelected
-            : 'border-gray-200 hover:border-gray-300 hover:shadow-sm'
+            ? 'rgba(255, 110, 0, 0.08)'
-        }`}
+            : 'transparent',
+          border: '1px solid',
+          borderColor: isSelected ? 'var(--accent-ember)' : 'var(--border)',
+          boxShadow: isSelected ? 'var(--rim-light-inner)' : 'none',
+        }}
         onClick={handleCardClick}
       >
         {/* Selection Checkbox */}
@@ -204,7 +208,10 @@ export default function CardItem({
 
         {/* Card Image */}
         <div className="flex-shrink-0 mr-4">
-          <div className="w-16 h-22 bg-gray-200 rounded-lg overflow-hidden">
+          <div
+            className="w-16 h-22 rounded-lg overflow-hidden"
+            style={{ backgroundColor: 'var(--bg-tertiary)' }}
+          >
             {!imageError ? (
               <img
                 src={card.image_url}
@@ -213,7 +220,10 @@ export default function CardItem({
                 onError={handleImageError}
               />
             ) : (
-              <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
+              <div
+                className="w-full h-full flex items-center justify-center text-xs"
+                style={{ color: 'var(--text-secondary)' }}
+              >
                 No Image
               </div>
             )}
@@ -222,21 +232,40 @@ export default function CardItem({
 
         {/* Card Info */}
         <div className="flex-1 min-w-0">
-          <h3 className="font-semibold text-gray-900 truncate">{card.name}</h3>
+          <h3
-          <p className="text-sm text-gray-600">{card.set_name} • {card.rarity}</p>
+            className="font-semibold truncate"
-          <p className="text-sm text-gray-500">{card.card_type}</p>
+            style={{ color: 'var(--text-primary)' }}
+          >
+            {card.name}
+          </h3>
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            {card.set_name} • {card.rarity}
+          </p>
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+            {card.card_type}
+          </p>
         </div>
 
         {/* Game Badge */}
         <div className="flex-shrink-0 mx-4">
-          <span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
+          <span
+            className="px-2 py-1 text-xs font-medium rounded-full"
+            style={{
+              backgroundColor: 'var(--bg-tertiary)',
+              color: 'var(--text-primary)',
+              border: '1px solid var(--border)',
+            }}
+          >
             {card.game}
           </span>
         </div>
 
         {/* Price */}
         <div className="flex-shrink-0 mx-4">
-          <span className="text-lg font-bold text-green-600">
+          <span
+            className="text-lg font-bold"
+            style={{ color: 'var(--accent-flame)' }}
+          >
             ${card.market_price}
           </span>
         </div>
@@ -248,11 +277,12 @@ export default function CardItem({
               e.stopPropagation();
               onToggleFavorite(card);
             }}
-            className={`p-2 rounded-lg transition-colors ${
+            className="nav-item-hover p-2 rounded-xl transition-colors"
-              isFavorited 
+            style={{
-                ? 'text-red-500 hover:text-red-600' 
+              color: isFavorited
-                : 'text-gray-400 hover:text-red-500'
+                ? 'var(--accent-ember)'
-            }`}
+                : 'var(--text-secondary)',
+            }}
           >
             <svg className="w-5 h-5" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
@@ -264,7 +294,8 @@ export default function CardItem({
               e.stopPropagation();
               onAddToCollection(card);
             }}
-            className="p-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg transition-colors"
+            className="nav-item-hover p-2 rounded-xl transition-colors"
+            style={{ color: 'var(--accent-ember)' }}
             title={VOCAB.ADD_TO_LIST}
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -277,7 +308,8 @@ export default function CardItem({
               e.stopPropagation();
               onAddToDeck(card);
             }}
-            className="p-2 text-green-600 hover:text-green-700 hover:bg-green-50 rounded-lg transition-colors"
+            className="nav-item-hover p-2 rounded-xl transition-colors"
+            style={{ color: 'var(--accent-flame)' }}
             title="Add to Deck"
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">