Apply Design A: dark theme, type badges, code cleanup

Visual:
- Dark theme throughout (#111 bg, #1c1c1c panels, #2a2a2a borders)
- Type badges with color: Monster=orange, Spell=green, Trap=purple
- Owned count shown as ×3 (highlighted) or — (dimmed)
- Printing column headers in CardRow
- Card detail panel: type badge, attribute, race, level stars

Cleanup:
- Replace index.css (was Vite boilerplate) with dark base + shared CSS classes
  (.card-row-header:hover, .filter-chip, .icon-btn, modal styles)
- Clear App.css (Vite boilerplate, unused)
- Remove Footer.css (modal styles consolidated into index.css)
- Extract useDebounce to src/hooks/useDebounce.js
- Remove react-window (installed but never used)
- App.jsx: remove unnecessary wrapper div
- gitignore: add mockups/

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

src/components/CardRow/CardRow.jsx

@@ -2,39 +2,76 @@ import React, { useContext } from 'react';
 import { CardContext } from '../../store/CardContext';
 import PrintingRow from '../PrintingRow/PrintingRow';
 
+const BADGE = {
+  monster: { background: '#3a2000', color: '#d4820a' },
+  spell:   { background: '#002820', color: '#10a06a' },
+  trap:    { background: '#280020', color: '#c040a0' },
+  other:   { background: '#202020', color: '#666' },
+};
+
+function typeBadge(type) {
+  const t = type.toLowerCase();
+  if (t.includes('monster')) return BADGE.monster;
+  if (t.includes('spell'))   return BADGE.spell;
+  if (t.includes('trap'))    return BADGE.trap;
+  return BADGE.other;
+}
+
+const PRINTING_COLS = '80px 1fr 150px 100px';
+
 function CardRow({ card }) {
   const { expandedCardId, setExpandedCardId, ownedAmounts } = useContext(CardContext);
   const isExpanded = expandedCardId === card.id;
 
-  const toggleExpand = () => setExpandedCardId(isExpanded ? null : card.id);
-
-  // ✅ Calculate total owned across all printings using combined key
   const totalOwned = card.printings?.reduce((sum, p) => {
     const key = `${p.set_id}-${p.rarity_id}`;
-    const owned = ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0;
-    return sum + owned;
+    return sum + (ownedAmounts[card.id]?.[key] ?? p.amount_owned ?? 0);
   }, 0) ?? 0;
 
   return (
-    <div style={{ borderBottom: '1px solid #eee', padding: '0.5rem' }}>
+    <div style={{ borderBottom: '1px solid #1e1e1e' }}>
       <div
-        style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-        onClick={toggleExpand}
+        className="card-row-header"
+        onClick={() => setExpandedCardId(isExpanded ? null : card.id)}
+        style={{
+          display: 'flex', alignItems: 'center', gap: '12px',
+          padding: '9px 16px',
+          background: isExpanded ? '#1c1c1c' : 'transparent',
+        }}
       >
-        <span>{card.name}</span>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span>{card.type}</span>
-          <span>Total owned: {totalOwned}</span>
-        </div>
+        <span style={{ flex: 1, fontSize: '13px', color: '#d8d8d8' }}>{card.name}</span>
+        <span style={{
+          fontSize: '11px', padding: '2px 8px', borderRadius: '10px',
+          fontWeight: 500, whiteSpace: 'nowrap',
+          ...typeBadge(card.type),
+        }}>
+          {card.type}
+        </span>
+        <span style={{
+          fontSize: '12px', whiteSpace: 'nowrap', minWidth: '48px', textAlign: 'right',
+          color: totalOwned > 0 ? '#aaa' : '#444',
+        }}>
+          {totalOwned > 0 ? `×${totalOwned}` : '—'}
+        </span>
       </div>
 
       {isExpanded && card.printings?.length > 0 && (
-        <div style={{ marginTop: '0.5rem', paddingLeft: '1rem' }}>
+        <div style={{ background: '#161616', paddingBottom: '6px' }}>
+          <div style={{
+            display: 'grid', gridTemplateColumns: PRINTING_COLS,
+            gap: '8px', padding: '5px 16px 5px 32px',
+            fontSize: '10px', color: '#444',
+            textTransform: 'uppercase', letterSpacing: '0.05em',
+            borderBottom: '1px solid #222',
+          }}>
+            <span>Code</span><span>Set</span><span>Rarity</span><span>Owned</span>
+          </div>
           {card.printings.map(printing => (
             <PrintingRow
               key={`${card.id}-${printing.set_id}-${printing.rarity_id}`}
               card_id={card.id}
               printing={printing}
+              cols={PRINTING_COLS}
             />
           ))}
         </div>
@@ -43,4 +80,4 @@ function CardRow({ card }) {
   );
 }
 
-export default CardRow;
+export default CardRow;