design: WorkoutPage Hevy-style redesign + AlternativeModal + backend API

- Add GET /api/exercises/:id/alternatives endpoint
- Add GET /api/exercises/:id/last-workout endpoint
- New AlternativeModal component for swapping exercises
- WorkoutPage: single-tap logging, +/- buttons, rest timer
- Updated Icons with new workout icons
- Polish: card shadows, borders, micro-interactions
- Tasks directory for project management

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

@@ -0,0 +1,70 @@
+# Plan 03-01: Login/Onboarding Polish
+
+**\Goal:** Transform auth pages from "hobby app" to enterprise-grade fitness product
+
+## Current Issues
+
+1. **Emoji branding** - $ \nCravl\" looks amateur, violates design system (no emojis)
+2. **Basic form styling** - No visual polish, lacks professional feel
+3. **Missing brand presence** - No logo mark, weak visual identity
+4. **Form interactions** - No focus states, weak error presentation
+
+## Implementation
+
+### Files to Modify
+
+- frontend/src/pages/LoginPage.jsx
+- frontend/src/pages/RegisterPage.jsx
+- frontend/src/App.css (auth section)
+
+### Changes
+
+**1. Branding Component**
+Create SVG logo mark - abstract barbell/rack silhouette (single color, clean lines):
+const Logo = () => (
+  <svg viewBox="0 0 48 48" className="logo-mark">
+    <path d="M12 16h4v16h-4zM20 12h8v24h-8zM32 16h4v16h-4z" fill="currentColor"/>
+    <rect x="8" y="20" width="4" height="8"/>
+    <rect x="36" y="20" width="4" height="8"/>
+  </svg>
+);
+
+**2. LoginPage Changes**
+- Remove  \nGavl\" h1
+- Add Logo component above \"Logga in\"
+- Update to: <Logo /> + <h1 className="auth-title">Logga in</h1>
+- Add subtle tagline under title: \"Din personliga träningspartner\"
+- Improve error display with animation/fade-in
+
+**3. RegisterPage Changes**
+- Same logo/title treatment
+- Tagline: \"Börja din träningsresa\"
+- Form field focus improvements
+
+**4. CSS Updates (App.css auth section)**
+Add professional polish: gradient background, improved card styling with shadows, focus states, animations, proper spacing.
+
+- auth-page: add gradient bg, better spacing
+- auth-card: add borter, shadow, padding
+- logo-mark: 56px svg, accent color
+- auth-title: centered, font-2xl
+- auth-tagline: text-secondary, small
+- input focus: indicator (accent border + glow)
+- button: hover/active states, scale effect
+- error: animated error box
+
+
+## Verification
+
+- [ ] No emojis remain on auth pages
+- [ ] Logo mark displays correctly (56px, accent color)
+- [ ] Tagline visible under title
+- [ ] Focus states work on inputs (accent border + glow)
+- [ ] Error messages animate in smoothly
+- [ ] Button hover/active states feel responsive
+- [ ] Card has proper shadow and border
+- [ ] Form is centered vertically on mobile/desktop
+
+## Blockers
+
+None - frontend only changes.

TODO.md

@@ -16,12 +16,12 @@
 - [ ] Siffror/stats: Monospace eller tabular för alignment
 
 ### Ikoner & Grafik
-- [ ] **Bort med ALLA emojis** - ersätt med:
+- [x] **Bort med ALLA emojis** - ersätt med:
   - SVG-ikoner (Lucide, Heroicons, eller custom)
   - Stiliserade fitness-silhuetter för workout-typer
   - Abstrakta former/linjer istället för cartoonish grafik
-- [ ] Coach-avatar: Stiliserad silhuett eller initialer, inte emoji
+- [x] Coach-avatar: Stiliserad silhuett eller initialer, inte emoji
-- [ ] Workout-ikoner: Dumbbell, barbell, kettlebell som rena linjeikoner
+- [x] Workout-ikoner: Dumbbell, barbell, kettlebell som rena linjeikoner
 
 ### UI-komponenter
 - [ ] Kort: Subtila skuggor, mjuka kanter, inte "bubbliga"

backend/src/index.js

@@ -248,6 +248,61 @@ app.get('/api/days/:dayId/exercises', async (req, res) => {
   }
 });
 
+// Get alternative exercises for a given exercise (same muscle group)
+app.get('/api/exercises/:id/alternatives', async (req, res) => {
+  try {
+    const exerciseResult = await pool.query(
+      'SELECT muscle_group FROM exercises WHERE id = $1',
+      [req.params.id]
+    );
+
+    if (!exerciseResult.rows.length) {
+      return res.status(404).json({ error: 'Exercise not found' });
+    }
+
+    const muscleGroup = exerciseResult.rows[0].muscle_group;
+    const alternatives = await pool.query(
+      `SELECT id, name, muscle_group, description
+       FROM exercises
+       WHERE muscle_group = $1 AND id <> $2
+       ORDER BY name`,
+      [muscleGroup, req.params.id]
+    );
+
+    res.json(alternatives.rows);
+  } catch (err) {
+    console.error('Error fetching alternatives:', err);
+    res.status(500).json({ error: 'Database error' });
+  }
+});
+
+// Get last workout for a specific exercise id
+app.get('/api/exercises/:id/last-workout', async (req, res) => {
+  try {
+    const { user_id } = req.query;
+    const result = await pool.query(`
+      WITH latest AS (
+        SELECT wl.date
+        FROM workout_logs wl
+        JOIN program_exercises pe ON wl.program_exercise_id = pe.id
+        WHERE pe.exercise_id = $1 AND wl.user_id = $2
+        ORDER BY wl.date DESC
+        LIMIT 1
+      )
+      SELECT wl.*
+      FROM workout_logs wl
+      JOIN program_exercises pe ON wl.program_exercise_id = pe.id
+      JOIN latest l ON wl.date = l.date
+      WHERE pe.exercise_id = $1 AND wl.user_id = $2
+      ORDER BY wl.set_number ASC
+    `, [req.params.id, user_id || 1]);
+    res.json(result.rows);
+  } catch (err) {
+    console.error('Error fetching last workout for exercise:', err);
+    res.status(500).json({ error: 'Database error' });
+  }
+});
+
 // Get workout logs for a user and date
 app.get('/api/logs', async (req, res) => {
   try {

frontend/dist/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="sv">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#0a0a0f" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <title>Gravl - Träning</title>
+    <script type="module" crossorigin src="/assets/index-hhKetRGz.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-my_lGtI5.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

frontend/src/components/AlternativeModal.jsx

@@ -0,0 +1,51 @@
+import { Icon } from './Icons'
+
+function AlternativeModal({ exercise, alternatives, loading, error, onSelect, onClose }) {
+  if (!exercise) return null
+
+  return (
+    <div className="alternative-modal-overlay" onClick={onClose}>
+      <div className="alternative-modal" onClick={(event) => event.stopPropagation()}>
+        <div className="alternative-modal-header">
+          <div>
+            <h3>Alternativa övningar</h3>
+            <p>För {exercise.name}</p>
+          </div>
+          <button className="alternative-modal-close" onClick={onClose} aria-label="Stäng">
+            <Icon name="chevronDown" size={18} />
+          </button>
+        </div>
+
+        {loading && (
+          <div className="alternative-modal-state">Laddar alternativ...</div>
+        )}
+
+        {!loading && error && (
+          <div className="alternative-modal-state error">{error}</div>
+        )}
+
+        {!loading && !error && alternatives.length === 0 && (
+          <div className="alternative-modal-state">Inga alternativ hittades.</div>
+        )}
+
+        {!loading && !error && alternatives.length > 0 && (
+          <div className="alternative-list">
+            {alternatives.map((alt) => (
+              <div key={alt.id} className="alternative-item">
+                <div className="alternative-info">
+                  <strong>{alt.name}</strong>
+                  <span>{alt.description || 'Ingen beskrivning tillgänglig.'}</span>
+                </div>
+                <button className="alternative-select-btn" onClick={() => onSelect(alt)}>
+                  Välj
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AlternativeModal

frontend/src/components/Icons.jsx

@@ -62,6 +62,14 @@ export const Icons = {
       <line x1="5" y1="12" x2="19" y2="12"/>
     </svg>
   ),
+  swap: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="7 7 3 11 7 15"/>
+      <polyline points="17 9 21 13 17 17"/>
+      <line x1="3" y1="11" x2="21" y2="11"/>
+      <line x1="3" y1="13" x2="21" y2="13"/>
+    </svg>
+  ),
   check: (
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
       <polyline points="20 6 9 17 4 12"/>

frontend/src/index.css

@@ -5,39 +5,91 @@
 }
 
 :root {
-  /* Dark fitness palette */
+  /* Dark fitness palette - refined */
   --bg-primary: #0a0a0f;
-  --bg-secondary: #0d0d12;
+  --bg-secondary: #0d0d14;
-  --bg-card: #15151b;
+  --bg-tertiary: #12121a;
-  --bg-card-hover: #1a1a22;
+  --bg-card: #16161f;
+  --bg-card-hover: #1c1c28;
+  --bg-elevated: #1a1a24;
   --bg: #0a0a0f;
 
-  /* Text colors */
+  /* Text colors - better hierarchy */
   --text-primary: #ffffff;
   --text-secondary: #a1a1aa;
   --text-muted: #71717a;
+  --text-tertiary: #52525b;
   --text: #ffffff;
 
-  /* Accent - energetic orange */
+  /* Accent - refined energetic coral */
-  --accent: #ff6b35;
+  --accent: #ff6b4a;
-  --accent-hover: #ff8555;
+  --accent-hover: #ff8066;
+  --accent-subtle: rgba(255, 107, 74, 0.15);
+  --accent-glow: rgba(255, 107, 74, 0.25);
 
-  /* Status colors */
+  /* Status colors - refined */
   --success: #22c55e;
+  --success-subtle: rgba(34, 197, 94, 0.15);
   --warning: #f59e0b;
+  --warning-subtle: rgba(245, 158, 11, 0.15);
   --error: #ef4444;
+  --error-subtle: rgba(239, 68, 68, 0.15);
 
-  /* Border */
+  /* Borders - refined */
-  --border: #1f1f28;
+  --border: #1f1f2a;
+  --border-hover: #2a2a38;
+  --border-accent: var(--accent-subtle);
 
-  /* Workout type colors - muted, professional */
+  /* Shadows - key for enterprise feel */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+  --shadow-glow: 0 0 20px var(--accent-glow);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-elevated: 0 8px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
+
+  /* Workout type colors - refined */
   --workout-push: #ef4444;
   --workout-pull: #3b82f6;
   --workout-legs: #22c55e;
   --workout-shoulders: #f59e0b;
   --workout-upper: #8b5cf6;
   --workout-lower: #06b6d4;
-  --workout-default: #ff6b35;
+  --workout-default: #ff6b4a;
+
+  /* Typography scale */
+  --font-xs: 0.75rem;
+  --font-sm: 0.875rem;
+  --font-base: 1rem;
+  --font-lg: 1.125rem;
+  --font-xl: 1.25rem;
+  --font-2xl: 1.5rem;
+  --font-3xl: 2rem;
+
+  /* Spacing scale */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+
+  /* Border radius */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
 }
 
 html, body {
@@ -47,10 +99,12 @@ html, body {
   min-height: 100vh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
+  line-height: 1.2;
 }
 
 #root {
@@ -62,74 +116,458 @@ button {
   cursor: pointer;
   border: none;
   outline: none;
+  font-size: var(--font-base);
 }
 
 input {
   font-family: inherit;
   outline: none;
+  font-size: var(--font-base);
 }
 
-/* Scrollbar styling */
+/* Scrollbar styling - refined */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-track {
   background: var(--bg-secondary);
+  border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
   background: var(--border);
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--text-secondary);
+  background: var(--text-tertiary);
 }
 
-/* Auth pages */
+/* ============================================
-.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
+   AUTH PAGES - Premium First Impression
-.auth-card { background: var(--bg-card); padding: 40px; border-radius: 16px; width: 100%; max-width: 400px; text-align: center; }
+   ============================================ */
-.auth-card h1 { font-size: 2.5rem; margin-bottom: 8px; }
-.auth-card h2 { color: var(--text-secondary); font-weight: 400; margin-bottom: 24px; }
-.auth-card form { display: flex; flex-direction: column; gap: 16px; }
-.auth-card input { padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font-size: 1rem; }
-.auth-card input:focus { border-color: var(--accent); }
-.auth-card button[type="submit"] { padding: 14px; background: var(--accent); color: white; border-radius: 8px; font-size: 1rem; font-weight: 600; transition: background 0.2s; }
-.auth-card button[type="submit"]:hover:not(:disabled) { background: var(--accent-hover); }
-.auth-card button:disabled { opacity: 0.6; cursor: not-allowed; }
-.auth-card .error { background: rgba(233,69,96,0.15); color: var(--accent); padding: 12px; border-radius: 8px; margin-bottom: 16px; }
-.auth-link { margin-top: 20px; color: var(--text-secondary); }
-.auth-link a { color: var(--accent); text-decoration: none; }
 
-/* Onboarding */
+.auth-page {
-.onboarding { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
+  min-height: 100vh;
-.onboarding-card { background: var(--bg-card); padding: 32px; border-radius: 16px; width: 100%; max-width: 480px; }
+  display: flex;
-.steps-indicator { display: flex; justify-content: center; gap: 12px; margin-bottom: 28px; }
+  align-items: center;
-.steps-indicator span { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--text-secondary); }
+  justify-content: center;
-.steps-indicator span.active { background: var(--accent); color: white; }
+  padding: var(--space-5);
-.step h2 { margin-bottom: 20px; text-align: center; }
+  background: var(--bg-primary);
-.step .hint { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 16px; text-align: center; }
+  position: relative;
-.field { margin-bottom: 16px; }
+  overflow: hidden;
-.field label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 0.875rem; }
+}
-.field input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font-size: 1rem; }
+
-.field input:focus { border-color: var(--accent); }
+/* Subtle background gradient */
-.btn-group { display: flex; gap: 8px; }
+.auth-page::before {
-.btn-group.vertical { flex-direction: column; }
+  content: '';
-.btn-group button { flex: 1; padding: 12px; border-radius: 8px; background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); transition: all 0.2s; }
+  position: absolute;
-.btn-group button:hover { border-color: var(--accent); }
+  top: -50%;
-.btn-group button.active { background: var(--accent); color: white; border-color: var(--accent); }
+  left: -50%;
-.rm-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
+  width: 200%;
-.rm-fields .field { margin-bottom: 0; }
+  height: 200%;
-.bodyfat-result { background: rgba(78,204,163,0.15); color: var(--success); padding: 16px; border-radius: 8px; text-align: center; margin: 16px 0; }
+  background: radial-gradient(
-.nav-btns { display: flex; gap: 12px; margin-top: 24px; }
+    ellipse at 30% 20%,
-.nav-btns button { flex: 1; padding: 14px; border-radius: 8px; font-size: 1rem; }
+    rgba(255, 107, 74, 0.03) 0%,
-.nav-btns button:first-child { background: var(--bg-secondary); color: var(--text-secondary); }
+    transparent 50%
-.next-btn, .finish-btn { background: var(--accent) !important; color: white !important; font-weight: 600; }
+  ),
-.next-btn:hover:not(:disabled), .finish-btn:hover:not(:disabled) { background: var(--accent-hover) !important; }
+  radial-gradient(
-button:disabled { opacity: 0.5; cursor: not-allowed; }
+    ellipse at 70% 80%,
+    rgba(99, 102, 241, 0.03) 0%,
+    transparent 50%
+  );
+  pointer-events: none;
+}
+
+.auth-card {
+  background: var(--bg-card);
+  padding: var(--space-10) var(--space-8);
+  border-radius: var(--radius-2xl);
+  width: 100%;
+  max-width: 420px;
+  text-align: center;
+  box-shadow: var(--shadow-elevated);
+  border: 1px solid var(--border);
+  position: relative;
+  z-index: 1;
+}
+
+.auth-card h1 {
+  font-size: var(--font-3xl);
+  margin-bottom: var(--space-2);
+  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.auth-card h2 {
+  color: var(--text-secondary);
+  font-weight: 500;
+  margin-bottom: var(--space-8);
+  font-size: var(--font-lg);
+}
+
+.auth-card form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.auth-card input {
+  padding: var(--space-4) var(--space-5);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 16px;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.auth-card input:hover {
+  border-color: var(--border-hover);
+}
+
+.auth-card input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-subtle);
+}
+
+.auth-card input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.auth-card button[type="submit"] {
+  padding: var(--space-4);
+  background: var(--accent);
+  color: white;
+  border-radius: var(--radius-md);
+  font-size: var(--font-base);
+  font-weight: 600;
+  transition: all var(--transition-base);
+  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.auth-card button[type="submit"]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+.auth-card button[type="submit"]:hover:not(:disabled) {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(255, 107, 74, 0.4);
+}
+
+.auth-card button[type="submit"]:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(255, 107, 74, 0.3);
+}
+
+.auth-card button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.auth-card .error {
+  background: var(--error-subtle);
+  color: var(--error);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-4);
+  font-size: var(--font-sm);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.auth-link {
+  margin-top: var(--space-6);
+  color: var(--text-muted);
+  font-size: var(--font-sm);
+}
+
+.auth-link a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color var(--transition-fast);
+}
+
+.auth-link a:hover {
+  color: var(--accent-hover);
+  text-decoration: underline;
+}
+
+/* ============================================
+   ONBOARDING - Premium Step Wizard
+   ============================================ */
+
+.onboarding {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-5);
+  background: var(--bg-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+.onboarding::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    ellipse at 30% 20%,
+    rgba(255, 107, 74, 0.04) 0%,
+    transparent 50%
+  ),
+  radial-gradient(
+    ellipse at 70% 80%,
+    rgba(99, 102, 241, 0.04) 0%,
+    transparent 50%
+  );
+  pointer-events: none;
+}
+
+.onboarding-card {
+  background: var(--bg-card);
+  padding: var(--space-8);
+  border-radius: var(--radius-2xl);
+  width: 100%;
+  max-width: 520px;
+  box-shadow: var(--shadow-elevated);
+  border: 1px solid var(--border);
+  position: relative;
+  z-index: 1;
+}
+
+.steps-indicator {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-8);
+}
+
+.steps-indicator span {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-sm);
+  font-weight: 600;
+  color: var(--text-muted);
+  transition: all var(--transition-base);
+  border: 2px solid var(--border);
+}
+
+.steps-indicator span.active {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.3);
+}
+
+.step h2 {
+  margin-bottom: var(--space-6);
+  text-align: center;
+  font-size: var(--font-xl);
+}
+
+.step .hint {
+  color: var(--text-muted);
+  font-size: var(--font-sm);
+  margin-bottom: var(--space-4);
+  text-align: center;
+}
+
+.field {
+  margin-bottom: var(--space-4);
+}
+
+.field label {
+  display: block;
+  margin-bottom: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--font-sm);
+  font-weight: 500;
+}
+
+.field input {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 16px;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.field input:hover {
+  border-color: var(--border-hover);
+}
+
+.field input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-subtle);
+}
+
+.field input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.btn-group {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.btn-group.vertical {
+  flex-direction: column;
+}
+
+.btn-group button {
+  flex: 1;
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  transition: all var(--transition-base);
+  font-weight: 500;
+  min-height: 44px;
+}
+
+.btn-group button:hover {
+  border-color: var(--accent);
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.btn-group button.active {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.25);
+}
+
+.rm-fields {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-3);
+  margin-top: var(--space-2);
+}
+
+.rm-fields .field {
+  margin-bottom: 0;
+}
+
+.bodyfat-result {
+  background: var(--success-subtle);
+  color: var(--success);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  text-align: center;
+  margin: var(--space-4) 0;
+  border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.bodyfat-result strong {
+  font-size: var(--font-lg);
+}
+
+.nav-btns {
+  display: flex;
+  gap: var(--space-3);
+  margin-top: var(--space-6);
+}
+
+.nav-btns button {
+  flex: 1;
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--font-base);
+  transition: all var(--transition-base);
+  min-height: 44px;
+}
+
+.nav-btns button:first-child {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+
+.nav-btns button:first-child:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--border-hover);
+}
+
+.next-btn, .finish-btn {
+  background: var(--accent) !important;
+  color: white !important;
+  font-weight: 600;
+  border: none !important;
+  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.3);
+}
+
+.next-btn:hover:not(:disabled), .finish-btn:hover:not(:disabled) {
+  background: var(--accent-hover) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(255, 107, 74, 0.4);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 /* Header logout */
-.header-left { display: flex; align-items: center; gap: 16px; }
+.header-left {
-.logout-btn { padding: 6px 12px; background: var(--bg-secondary); color: var(--text-secondary); border-radius: 6px; font-size: 0.75rem; }
+  display: flex;
-.logout-btn:hover { background: var(--border); }
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.logout-btn {
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg-secondary);
+  color: var(--text-muted);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-xs);
+  transition: all var(--transition-base);
+  border: 1px solid var(--border);
+}
+
+.logout-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--border-hover);
+}
+
+/* ============================================
+   GLOBAL INPUT ACCESSIBILITY
+   Ensure all inputs have font-size >= 16px to prevent iOS auto-zoom
+   ============================================ */
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+select,
+textarea {
+  font-size: 16px;
+}

frontend/src/pages/WorkoutPage.jsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react'
 import { Icon } from '../components/Icons'
-import WeightInput from '../components/WeightInput'
+import AlternativeModal from '../components/AlternativeModal'
-import RepsInput from '../components/RepsInput'
+
+const API_URL = '/api'
 
 // Uppvärmningsövningar baserat på muskelgrupp
 const warmupExercises = {
@@ -53,11 +54,33 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
   const [warmupDone, setWarmupDone] = useState(false)
   const [warmupExpanded, setWarmupExpanded] = useState(true)
   const [completedWarmups, setCompletedWarmups] = useState(new Set())
+  const [swapExercise, setSwapExercise] = useState(null)
+  const [alternatives, setAlternatives] = useState([])
+  const [alternativesLoading, setAlternativesLoading] = useState(false)
+  const [alternativesError, setAlternativesError] = useState('')
+  const [swappedExercises, setSwappedExercises] = useState({})
+  const defaultRestSeconds = 90
+  const [restSeconds, setRestSeconds] = useState(defaultRestSeconds)
+  const [restRunning, setRestRunning] = useState(false)
 
   useEffect(() => {
     loadProgressions()
   }, [day])
 
+  useEffect(() => {
+    if (!restRunning) return
+    const timer = setInterval(() => {
+      setRestSeconds(prev => {
+        if (prev <= 1) {
+          setRestRunning(false)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [restRunning])
+
   const loadProgressions = async () => {
     const progs = {}
     for (const exercise of day.exercises) {
@@ -68,6 +91,40 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
     setProgressions(progs)
   }
 
+  const openAlternatives = async (exercise) => {
+    if (!exercise?.exercise_id) {
+      setAlternativesError('Saknar övningsdata för alternativa val.')
+      setSwapExercise(exercise)
+      return
+    }
+
+    setSwapExercise(exercise)
+    setAlternatives([])
+    setAlternativesError('')
+    setAlternativesLoading(true)
+
+    try {
+      const res = await fetch(`${API_URL}/exercises/${exercise.exercise_id}/alternatives`)
+      if (!res.ok) throw new Error('Failed to fetch alternatives')
+      const data = await res.json()
+      setAlternatives(data)
+    } catch (err) {
+      console.error('Failed to fetch alternatives:', err)
+      setAlternativesError('Kunde inte hämta alternativ.')
+    } finally {
+      setAlternativesLoading(false)
+    }
+  }
+
+  const handleSelectAlternative = (alternative) => {
+    if (!swapExercise) return
+    setSwappedExercises(prev => ({
+      ...prev,
+      [swapExercise.id]: alternative
+    }))
+    setSwapExercise(null)
+  }
+
   const exercises = day.exercises?.filter(e => e.name) || []
   const muscleGroups = getMuscleGroups(exercises)
 
@@ -97,6 +154,26 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
   const totalWarmups = generalWarmups.length + specificWarmups.length
   const warmupProgress = completedWarmups.size
 
+  const formatRestTime = (totalSeconds) => {
+    const minutes = Math.floor(totalSeconds / 60)
+    const seconds = totalSeconds % 60
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`
+  }
+
+  const startRest = (seconds = defaultRestSeconds) => {
+    setRestSeconds(seconds)
+    setRestRunning(true)
+  }
+
+  const toggleRest = () => {
+    setRestRunning(prev => !prev)
+  }
+
+  const resetRest = () => {
+    setRestRunning(false)
+    setRestSeconds(defaultRestSeconds)
+  }
+
   return (
     <div className="workout-page">
       <header className="page-header">
@@ -113,6 +190,29 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
       </header>
 
       <main className="page-main workout-main">
+        {/* Vila */}
+        <section className="rest-timer-card">
+          <div className="rest-timer-header">
+            <div className="rest-timer-label">Vilotimer</div>
+            <div className={`rest-timer-time ${restRunning ? 'running' : ''}`}>
+              {formatRestTime(restSeconds)}
+            </div>
+          </div>
+          <div className="rest-timer-actions">
+            <button className="rest-timer-btn primary" onClick={toggleRest}>
+              {restRunning ? 'Pausa' : 'Starta vila'}
+            </button>
+            <button className="rest-timer-btn secondary" onClick={resetRest}>
+              Återställ
+            </button>
+          </div>
+          <div className="rest-timer-presets">
+            <button className="rest-timer-chip" onClick={() => startRest(60)}>1:00</button>
+            <button className="rest-timer-chip" onClick={() => startRest(90)}>1:30</button>
+            <button className="rest-timer-chip" onClick={() => startRest(120)}>2:00</button>
+          </div>
+        </section>
+
         {/* Progress Bar */}
         <div className="workout-progress-bar">
           <div
@@ -228,10 +328,17 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
         {/* Övningslista */}
         <section className="exercises-section">
           <h2>Övningar</h2>
-          {exercises.map((exercise, idx) => (
+          {exercises.map((exercise, idx) => {
+            const swapped = swappedExercises[exercise.id]
+            const displayExercise = swapped
+              ? { ...exercise, name: swapped.name, muscle_group: swapped.muscle_group, description: swapped.description }
+              : exercise
+
+            return (
               <ExerciseCard
                 key={exercise.id || idx}
-              exercise={exercise}
+                exercise={displayExercise}
+                isSwapped={Boolean(swapped)}
                 logs={logs[exercise.id] || []}
                 progression={progressions[exercise.id]}
                 expanded={expandedExercise === exercise.id}
@@ -240,8 +347,11 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
                 )}
                 onLogSet={onLogSet}
                 onDeleteSet={onDeleteSet}
+                onStartRest={startRest}
+                onSwap={() => openAlternatives(exercise)}
               />
-          ))}
+            )
+          })}
         </section>
 
         {/* Avsluta pass */}
@@ -254,13 +364,24 @@ function WorkoutPage({ day, week, logs, onLogSet, onDeleteSet, onBack, fetchProg
             : `Avsluta pass (${completedExercises}/${exercises.length} klara)`}
         </button>
       </main>
+
+      <AlternativeModal
+        exercise={swapExercise}
+        alternatives={alternatives}
+        loading={alternativesLoading}
+        error={alternativesError}
+        onSelect={handleSelectAlternative}
+        onClose={() => setSwapExercise(null)}
+      />
     </div>
   )
 }
 
-function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSet, onDeleteSet }) {
+function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSet, onDeleteSet, onSwap, isSwapped, onStartRest }) {
   const [setList, setSetList] = useState([])
   const [showAddModal, setShowAddModal] = useState(false)
+  const weightStep = 2.5
+  const repsStep = 1
 
   useEffect(() => {
     const initial = []
@@ -279,11 +400,34 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
     setSetList(prev => prev.map((s, i) => i === idx ? { ...s, [field]: value } : s))
   }
 
+  const parseNumber = (value) => {
+    const parsed = parseFloat(value)
+    return Number.isFinite(parsed) ? parsed : 0
+  }
+
+  const formatWeight = (value) => {
+    const fixed = Number.isInteger(value) ? String(value) : value.toFixed(1)
+    return fixed.replace(/\.0$/, '')
+  }
+
+  const handleAdjust = (idx, field, delta, min = 0) => {
+    const current = parseNumber(setList[idx]?.[field])
+    const next = Math.max(min, current + delta)
+    if (field === 'weight') {
+      handleInputChange(idx, field, formatWeight(next))
+    } else {
+      handleInputChange(idx, field, String(Math.round(next)))
+    }
+  }
+
   const handleComplete = (idx) => {
     const input = setList[idx]
     const newCompleted = !input.completed
     setSetList(prev => prev.map((s, i) => i === idx ? { ...s, completed: newCompleted } : s))
     onLogSet(exercise.id, idx + 1, input.weight, input.reps, newCompleted)
+    if (newCompleted) {
+      onStartRest?.()
+    }
   }
 
   const handleAddNormal = () => {
@@ -320,13 +464,26 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
         <div className="exercise-info">
           <h3>{exercise.name}</h3>
           <span className="muscle-group">{exercise.muscle_group}</span>
+          {isSwapped && <span className="swap-badge">Alternativ</span>}
         </div>
+        <div className="exercise-actions">
           <div className="exercise-meta">
             <span className="sets-info">{exercise.sets}×{exercise.reps_min}-{exercise.reps_max}</span>
             <span className={`progress-badge ${completedSets === setList.length ? 'complete' : ''}`}>
               {completedSets}/{setList.length}
             </span>
           </div>
+          <button
+            className="swap-btn"
+            onClick={(event) => {
+              event.stopPropagation()
+              onSwap?.()
+            }}
+            aria-label="Byt övning"
+          >
+            <Icon name="swap" size={16} />
+          </button>
+        </div>
       </div>
 
       {expanded && (
@@ -343,18 +500,8 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
           <div className="sets-list">
             {setList.map((input, idx) => (
               <div key={idx} className={`set-row ${input.completed ? 'completed' : ''}`}>
+                <div className="set-row-top">
                   <span className="set-number">Set {idx + 1}</span>
-                <div className="set-inputs">
-                  <WeightInput
-                    value={input.weight}
-                    onChange={(val) => handleInputChange(idx, 'weight', val)}
-                  />
-                  <span className="input-separator">×</span>
-                  <RepsInput
-                    value={input.reps}
-                    onChange={(val) => handleInputChange(idx, 'reps', val)}
-                  />
-                </div>
                   <button
                     className={`delete-set-btn ${setList.length <= 1 ? 'disabled' : ''}`}
                     onClick={() => handleDeleteSet(idx)}
@@ -363,11 +510,64 @@ function ExerciseCard({ exercise, logs, progression, expanded, onToggle, onLogSe
                   >
                     <Icon name="trash" size={16} />
                   </button>
+                </div>
+                <div className="set-controls">
+                  <div className="set-metric">
+                    <span className="metric-label">Vikt</span>
+                    <div className="metric-controls">
                       <button
-                  className={`complete-btn ${input.completed ? 'done' : ''}`}
+                        type="button"
+                        className="metric-btn"
+                        onClick={() => handleAdjust(idx, 'weight', -weightStep)}
+                        aria-label="Minska vikt"
+                      >
+                        −
+                      </button>
+                      <div className="metric-value">
+                        <span className="metric-number">{input.weight === '' ? '0' : input.weight}</span>
+                        <span className="metric-suffix">kg</span>
+                      </div>
+                      <button
+                        type="button"
+                        className="metric-btn"
+                        onClick={() => handleAdjust(idx, 'weight', weightStep)}
+                        aria-label="Öka vikt"
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                  <div className="set-metric">
+                    <span className="metric-label">Reps</span>
+                    <div className="metric-controls">
+                      <button
+                        type="button"
+                        className="metric-btn"
+                        onClick={() => handleAdjust(idx, 'reps', -repsStep)}
+                        aria-label="Minska reps"
+                      >
+                        −
+                      </button>
+                      <div className="metric-value">
+                        <span className="metric-number">{input.reps === '' ? '0' : input.reps}</span>
+                      </div>
+                      <button
+                        type="button"
+                        className="metric-btn"
+                        onClick={() => handleAdjust(idx, 'reps', repsStep)}
+                        aria-label="Öka reps"
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <button
+                  className={`klart-btn ${input.completed ? 'done' : ''}`}
                   onClick={() => handleComplete(idx)}
                 >
-                  {input.completed ? <Icon name="check" size={18} /> : ''}
+                  {input.completed ? <Icon name="check" size={18} /> : null}
+                  KLART
                 </button>
               </div>
             ))}

frontend/tasks/task-001-workout-ux-redesign.md

@@ -0,0 +1,3 @@
+# Task 001: WorkoutPage UX Redesign
+Single-tap logging with +/- buttons and rest timer
+Notify: openclaw system event --text Done --mode now