feat: add interactive SVG muscle anatomy map to exercise browser

[vucongchien]

📌 Summary

This Pull Request integrates an Interactive SVG Muscle Anatomy Map into the exercise detail modal in the browser (index.html). When a user opens any exercise, the targeted primary muscles highlight in red, and secondary muscles highlight in orange.

---

🎯 Problem

• Issue: The exercise browser UI (index.html) relies solely on raw text chips to list the target and secondary muscles.
• Impact: It is difficult for users to quickly visualize which muscle groups are active during an exercise. Premium fitness app experiences (like Fitbod or Strong) generally provide a visual body map, which was missing from this repository.
• Root cause: The initial HTML structure only designed metadata lists for muscle groups without graphical/vector rendering capabilities.

---

🛠️ Solution

• Approach: Design a lightweight, clean, low-poly SVG representation of the human muscular system (both Anterior/Front and Posterior/Back views) and inject it dynamically into the modal. Highlight vector groups using classes mapped to database attributes.
• Key changes:
  • CSS: Created a new .modal-visuals responsive grid layout (side-by-side columns on desktop, single stacked column on mobile). Added state styling for .muscle-path.primary (coral red) and .muscle-path.secondary (warm orange).
  • HTML: Updated the modal container to accommodate both the exercise animation/thumbnail and the anatomy vector container.
  • JS: Added a DOM reference for #modal-muscle-map, implemented getMuscleKeys() to map raw muscle data (e.g., lats, pectorals, soleus, quadriceps) to SVG paths, and added renderMuscleMap() to dynamically colorize paths inside openModal().
• Trade-offs: Used simplified geometric vector paths instead of high-fidelity medical illustrations. This trade-off keeps the payload extremely light (adding <10KB of inline markup) and ensures zero impact on load performance.

---

🔍 How to test

• Step 1: Open index.html in any modern web browser.
• Step 2: Search for a chest exercise (e.g., "Dumbbell Fly") and click on it.
• Step 3: Search for a back/leg exercise (e.g., "Hamstring Stretch" or "Smith Deadlift") and click on it.
• Expected result:
  • The modal displays the SVG anatomy diagram next to the exercise preview.
  • Clicking a chest exercise highlights the chest/delts in red/orange on the Anterior (Front) model.
  • Clicking a back/leg exercise highlights the hamstrings/glutes/traps on the Posterior (Back) model.
  • The layout displays side-by-side on screens > 600px and stacks vertically on mobile screens.

---

⚠️ Risk & Impact

• DB change?: No database structural changes.
• Backward compatibility?: 100% backward compatible. Operates entirely on top of the existing schema in data/exercises.json.
• Performance impact?: None. Uses clean client-side SVG rendering and CSS transitions with zero external requests.

---

📦 Related

• Issue ticket: None
• Docs: None
• Dependency PRs: None

---

✅ Checklist

• Self-reviewed code
• Added tests (unit/integration nếu cần)
• No breaking changes (or documented)
• CI passed