03-03: Workout Experience Polish - enhanced exercise cards, progress badges, rest timer, KLART button, warmup styling

.planning/phases/03-design-polish/03-03-PLAN.md

@@ -0,0 +1,73 @@
+# Plan 03-03: Workout Experience Polish
+
+**Goal:** Transform the workout session from "functional" to a polished, motivating experience
+
+## Current Issues
+
+1. **Exercise cards** - Plain layout, no visual polish, basic text styling
+2. **Set logging UX** - Stepper inputs work but lack visual refinement
+3. **Progress indicators** - Progress badges are basic, no visual hierarchy
+4. **Warmup section** - Collapsible but visually plain, checklist items lack polish
+5. **Rest timer** - Functional but doesn't feel integrated or premium
+6. **Alternative exercise modal** - Just implemented (02-02), needs polish pass
+
+## Implementation
+
+### Files to Modify
+
+- frontend/src/pages/WorkoutPage.jsx
+- frontend/src/components/AlternativeModal.jsx
+- frontend/src/App.css (workout section)
+
+### Changes
+
+**1. Exercise Cards Enhancement**
+- Add subtle card depth/shadow
+- Better exercise name typography (larger, weight hierarchy)
+- Muscle group badges with color coding
+- Improved spacing between elements
+- Subtle hover/focus states for interactive elements
+
+**2. Set Logging UX Polish**
+- Refined stepper input styling (consistent with dashboard buttons)
+- Better "Log Set" button - more prominent when active
+- Clearer visual distinction between logged/unlogged sets
+- Improved checkmark animation on completion
+
+**3. Progress Indicators**
+- Premium progress badges (gradient or subtle depth)
+- Better "All Done" state - celebration micro-interaction
+- Visual progress bar or completion percentage
+
+**4. Warmup Section Polish**
+- Cleaner checklist styling (custom checkboxes)
+- Better expansion animation
+- Subtle completion progress indicator
+
+**5. Rest Timer Enhancement**
+- Better visual integration with set cards
+- Circular progress indicator or countdown animation
+- Brand color accent when timer active
+- Gentle pulse animation when running
+
+**6. Alternative Modal Polish**
+- Consistent styling with other modals
+- Better exercise card layouts in modal
+- Hover states for alternative options
+
+**7. CSS Polish**
+- Consistent use of CSS variables (--space-*, --radius-*)
+- Better typography scale for workout context
+- Subtle animations (card entry, completion)
+- Mobile-optimized spacing
+
+## Success Criteria
+
+- [ ] Exercise cards have visual depth and hierarchy
+- [ ] Set logging feels smooth and responsive
+- [ ] Progress badges look premium
+- [ ] Warmup section feels motivating, not tedious
+- [ ] Rest timer is visually integrated
+- [ ] Alternative modal matches app polish level
+- [ ] All animations feel smooth (not janky)
+- [ ] Mobile experience is thumb-friendly