Design overhaul: Dark fitness theme, no emojis

CSS:
- Dark background (#0a0a0f, #0d0d12, #15151b)
- Orange accent (#ff6b35)
- Muted text (#a1a1aa, #71717a)
- Inter font from Google Fonts
- Workout type colors (push/pull/legs/etc)

Dashboard:
- Calendar dots are CSS circles, not emoji
- Coach avatar uses SVG icon
- All emojis replaced with Icons.jsx SVGs
- Navigation uses proper icons

WorkoutPage:
- Warmup exercises without emojis
- Check icons instead of emoji checkmarks
- Arrow icons for navigation
- Fire icon for warmup section

Professional fitness app aesthetic inspired by Nike/FITBOD

frontend/src/pages/WorkoutPage.jsx

@@ -1,13 +1,14 @@
 import { useState, useEffect } from 'react'
+import { Icon } from '../components/Icons'
 
 // Uppvärmningsövningar baserat på muskelgrupp
 const warmupExercises = {
   general: [
-    { name: 'Cykel eller roddmaskin', duration: '5 min', icon: '🚴' },
-    { name: 'Armcirklar', duration: '30 sek/riktning', icon: '🔄' },
-    { name: 'Bensvingar (framåt/bakåt)', duration: '10 per ben', icon: '🦵' },
-    { name: 'Bensvingar (sidled)', duration: '10 per ben', icon: '🦵' },
-    { name: 'Höftcirklar', duration: '10 per riktning', icon: '⭕' },
+    { name: 'Cykel eller roddmaskin', duration: '5 min' },
+    { name: 'Armcirklar', duration: '30 sek/riktning' },
+    { name: 'Bensvingar (framåt/bakåt)', duration: '10 per ben' },
+    { name: 'Bensvingar (sidled)', duration: '10 per ben' },
+    { name: 'Höftcirklar', duration: '10 per riktning' },
   ],
   specific: {
     'Bröst': [
@@ -97,7 +98,9 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) {
   return (
     <div className="workout-page">
       <header className="page-header">
-        <button className="back-btn" onClick={onBack}>← Tillbaka</button>
+        <button className="back-btn" onClick={onBack}>
+          <Icon name="arrowLeft" size={16} /> Tillbaka
+        </button>
         <div className="header-center">
           <h1>{day.name}</h1>
           <span className="header-subtitle">Vecka {week} • Dag {day.day_number}</span>
@@ -123,11 +126,13 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) {
             onClick={() => setWarmupExpanded(!warmupExpanded)}
           >
             <div className="warmup-title">
-              <span className="warmup-icon">🔥</span>
+              <span className="warmup-icon"><Icon name="fire" size={20} /></span>
               <h2>Uppvärmning</h2>
               <span className="warmup-progress">{warmupProgress}/{totalWarmups}</span>
             </div>
-            <span className={`expand-icon ${warmupExpanded ? 'expanded' : ''}`}>▼</span>
+            <span className={`expand-icon ${warmupExpanded ? 'expanded' : ''}`}>
+              <Icon name="chevronDown" size={16} />
+            </span>
           </div>
 
           {warmupExpanded && (
@@ -143,9 +148,8 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) {
                       onClick={() => toggleWarmup(idx)}
                     >
                       <span className="warmup-check">
-                        {completedWarmups.has(idx) ? '✓' : '○'}
+                        {completedWarmups.has(idx) ? <Icon name="check" size={14} /> : ''}
                       </span>
-                      <span className="warmup-item-icon">{warmup.icon}</span>
                       <span className="warmup-name">{warmup.name}</span>
                       <span className="warmup-duration">{warmup.duration || warmup.reps}</span>
                     </div>
@@ -167,7 +171,7 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) {
                           onClick={() => toggleWarmup(globalIdx)}
                         >
                           <span className="warmup-check">
-                            {completedWarmups.has(globalIdx) ? '✓' : '○'}
+                            {completedWarmups.has(globalIdx) ? <Icon name="check" size={14} /> : ''}
                           </span>
                           <span className="warmup-name">{warmup.name}</span>
                           <span className="warmup-duration">{warmup.reps}</span>
@@ -196,10 +200,10 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) {
                       }}
                     >
                       <span className="warmup-check">
-                        {completedWarmups.has('prep') ? '✓' : '○'}
+                        {completedWarmups.has('prep') ? <Icon name="check" size={14} /> : ''}
                       </span>
                       <span className="warmup-name">Lätta set {exercises[0].name}</span>
-                      <span className="warmup-duration">2×10 @ 50%</span>
+                      <span className="warmup-duration">2x10 @ 50%</span>
                     </div>
                   </div>
                 </div>
@@ -209,7 +213,11 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) {
                 className={`warmup-done-btn ${warmupDone ? 'completed' : ''}`}
                 onClick={() => setWarmupDone(!warmupDone)}
               >
-                {warmupDone ? '✓ Uppvärmning klar!' : 'Markera uppvärmning som klar'}
+                {warmupDone ? (
+                  <><Icon name="check" size={18} /> Uppvärmning klar</>
+                ) : (
+                  'Markera uppvärmning som klar'
+                )}
               </button>
             </div>
           )}
@@ -239,7 +247,7 @@ function WorkoutPage({ day, week, logs, onLogSet, onBack, fetchProgression }) {
           onClick={onBack}
         >
           {completedExercises === exercises.length
-            ? '🎉 Avsluta pass'
+            ? 'Avsluta pass'
             : `Avsluta pass (${completedExercises}/${exercises.length} klara)`}
         </button>
       </main>
@@ -302,9 +310,9 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
         <div className="exercise-body">
           {progression && (
             <div className="progression-hint">
-              💡 {progression.reason}
+              {progression.reason}
               {progression.suggestedWeight && (
-                <strong> → {progression.suggestedWeight} kg</strong>
+                <strong> {progression.suggestedWeight} kg</strong>
               )}
             </div>
           )}
@@ -338,7 +346,7 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
                     className={`complete-btn ${input.completed ? 'done' : ''}`}
                     onClick={() => handleComplete(setNum)}
                   >
-                    {input.completed ? '✓' : '○'}
+                    {input.completed ? <Icon name="check" size={18} /> : ''}
                   </button>
                 </div>
               )