04-06-02: Save error handling & retry logic

- Added specific error type differentiation:
  * Network errors → 'Anslutning misslyckades'
  * Validation (400) → 'Ogiltiga ändringar'
  * Auth (401/403) → 'Saknar behörighet'
  * Server (500+) → 'Serverfel'
  * Generic fallback messages

- Implemented retry tracking:
  * retryCount state for monitoring attempts
  * lastSavePayload storage for potential retry (future feature)
  * Console logging with context for debugging

- Enhanced error handling:
  * getErrorMessage() function for error classification
  * Comprehensive error logging with workout/exercise context
  * Draft preserved on all error types (no data loss)

- Improved UI/UX:
  * Error banner with specific, actionable messages
  * 'Försök igen' button with retry tracking
  * Sync status feedback (idle/saving/saved/error)
  * Success checkmark animation (2s duration)
  * Spinner animation during save

- CSS Enhancements:
  * @keyframes spin for loading spinner
  * @keyframes slideInCheckmark for success feedback
  * Mobile-responsive error banner (flex column on <480px)
  * Smooth animations for state transitions

Tests: npm run build ✓ (no syntax errors)
Files modified:
  - frontend/src/pages/WorkoutEditPage.jsx
  - frontend/src/pages/WorkoutEditPage.css

frontend/src/pages/WorkoutEditPage.css

@@ -434,3 +434,53 @@
     max-width: 90%;
   }
 }
+
+/* Spinner Animation for Save Loading */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Apply spinner animation to Icon component with spinner class */
+.save-header-btn svg[class*="spinner"],
+.save-header-btn .icon-spinner {
+  animation: spin 1s linear infinite;
+}
+
+/* Success Checkmark Animation */
+@keyframes slideInCheckmark {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.sync-status.saved {
+  animation: slideInCheckmark 0.3s ease-out;
+}
+
+/* Ensure error actions align properly on mobile */
+@media (max-width: 480px) {
+  .error-banner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .error-message {
+    width: 100%;
+    margin-bottom: 0.75rem;
+  }
+  
+  .error-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+}