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

.pm-checkpoint.json

@@ -1,13 +1,8 @@
 {
-  "lastRun": "2026-02-28T22:49:00+01:00",
+  "lastRun": "2026-02-28T23:33:00+01:00",
-  "status": "completed",
+  "status": "in_progress",
-  "tasksCompleted": [
+  "tasksCompleted": ["emoji-replacement", "alternative-modal", "workout-page-ux-redish", "chat-onboarding", "03-01-login-onboarding-polish", "03-02-dashboard-polish"],
-    "emoji-replacement",
+  "activeTask": "03-03-workout-experience",
-    "alternative-modal",
+  "nextTask": null,
-    "workout-page-ux-redesign",
+  "notes": "Starting 03-03 Workout Experience Polish - spawning frontend agent"
-    "chat-onboarding",
-    "03-01-login-onboarding-polish"
-  ],
-  "currentPhase": "03-design-polish",
-  "notes": "03-01 klar: Logo.jsx med SVG barbell, LoginPage/RegisterPage uppdaterade med logotyp, taglines, index.css polerad med animationer."
 }

frontend/src/App.css

@@ -133,7 +133,7 @@
 
 .day-card {
   background: var(--bg-card);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   padding: var(--space-4);
   margin-bottom: var(--space-3);
   cursor: pointer;
@@ -234,7 +234,7 @@
 
 .exercise-card {
   background: var(--bg-card);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   margin-bottom: var(--space-3);
   overflow: hidden;
   border: 1px solid var(--border);
@@ -459,7 +459,7 @@
 .klart-btn {
   width: 100%;
   min-height: 52px;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   background: var(--accent);
   color: white;
   border: none;
@@ -851,7 +851,7 @@
   color: white;
   border: none;
   padding: var(--space-4);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   font-size: var(--font-base);
   font-weight: 600;
   cursor: pointer;
@@ -925,7 +925,7 @@
 
 .stat-card {
   background: var(--bg-card);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   padding: var(--space-4);
   text-align: center;
   border: 1px solid var(--border);
@@ -990,7 +990,7 @@
   gap: var(--space-4);
   background: var(--bg-card);
   padding: var(--space-4);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   border: 1px solid var(--border);
   cursor: pointer;
   transition: all var(--transition-base);
@@ -1384,7 +1384,7 @@
 .measurement-card {
   background: var(--bg-secondary);
   padding: var(--space-4);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1418,7 +1418,7 @@
   justify-content: space-between;
   padding: var(--space-4);
   background: var(--bg-secondary);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
 }
 
 .strength-exercise {
@@ -1445,7 +1445,7 @@
   gap: var(--space-2);
   background: var(--bg-card);
   padding: var(--space-2);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   border: 1px solid var(--border);
 }
 
@@ -1666,7 +1666,7 @@
 
 .rest-timer-btn {
   min-height: 48px;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   border: 1px solid var(--border);
   font-weight: 600;
   cursor: pointer;
@@ -1888,7 +1888,7 @@
   padding: var(--space-4);
   background: var(--bg-secondary);
   border: 2px dashed var(--border);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   color: var(--text-muted);
   font-size: var(--font-sm);
   cursor: pointer;
@@ -2502,7 +2502,7 @@
   width: 56px;
   height: 56px;
   min-width: 56px;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2583,7 +2583,7 @@
   background: var(--accent);
   color: white;
   border: none;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   font-size: var(--font-lg);
   font-weight: 600;
   cursor: pointer;
@@ -2687,7 +2687,7 @@
   width: 100%;
   background: var(--bg-elevated);
   border: 1.5px solid var(--border);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   padding: var(--space-4) var(--space-5);
   color: var(--text-primary);
   font-size: 16px; /* prevents iOS auto-zoom */
@@ -2711,7 +2711,7 @@
   background: var(--accent);
   color: white;
   border: none;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   font-size: var(--font-base);
   font-weight: 600;
   cursor: pointer;
@@ -2860,7 +2860,7 @@
 
 /* ── Calendar day cells: tighter spacing, better font ────── */
 .calendar-day {
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xl);
   gap: var(--space-1);
   min-height: 64px;
 }
@@ -2912,3 +2912,49 @@
 .week-calendar  { animation: sectionIn 300ms ease both; }
 .coach-section  { animation: sectionIn 300ms ease 80ms both; }
 .quick-stats    { animation: sectionIn 300ms ease 160ms both; }
+/* WORKOUT POLISH - 03-03 */
+.exercise-card { position: relative; }
+.exercise-card::before { 
+  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  background: linear-gradient(90deg, var(--accent), #ff8a65); opacity: 0; 
+  transition: opacity 0.2s ease; 
+}
+.exercise-card.expanded::before { opacity: 1; }
+.exercise-card.all-done::before { 
+  background: linear-gradient(90deg, var(--success), #4ade80); opacity: 1; 
+}
+.exercise-info h3 { font-size: var(--font-lg); font-weight: 700; }
+.muscle-group { 
+  display: inline-block; font-size: var(--font-xs); font-weight: 600;
+  text-transform: uppercase; padding: var(--space-1) var(--space-2);
+  background: var(--bg-tertiary); border-radius: var(--radius-full);
+}
+.progress-badge { 
+  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
+}
+.progress-badge.complete { 
+  background: linear-gradient(135deg, var(--success), #16a34a);
+  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
+}
+.rest-timer-card { 
+  box-shadow: 0 4px 16px rgba(255, 107, 74, 0.1);
+}
+.rest-timer-time.running { 
+  text-shadow: 0 0 20px rgba(255, 107, 74, 0.4);
+  animation: pulse-timer 1s ease-in-out infinite;
+}
+@keyframes pulse-timer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
+.klart-btn { 
+  background: linear-gradient(135deg, var(--accent), #e85a3c);
+  border-radius: var(--radius-xl);
+}
+.klart-btn.done { 
+  background: linear-gradient(135deg, var(--success), #16a34a); 
+  animation: success-bounce 0.5s ease;
+}
+@keyframes success-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
+.warmup-check { 
+  width: 22px; height: 22px; border-radius: var(--radius-md); 
+  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
+}
+.warmup-item.done .warmup-check { background: var(--success); border-color: var(--success); color: white; }