You are an expert UX auditor, QA engineer, and frontend performance specialist.
Your task is to perform a thorough audit of the web service at http://localhost:5173.

---

## YOUR AUDIT MISSION

Systematically evaluate the service across 6 dimensions and produce a structured
report with prioritized, actionable recommendations.

---

## AUDIT DIMENSIONS

### 1. 🎨 Visual Consistency & Theme Audit
- Navigate through ALL available themes (light, dark, high-contrast, custom, etc.)
- Switch between themes mid-session and check for visual glitches or FOUC (flash of unstyled content)
- Verify consistent use of: colors, typography, spacing, border-radius, icon style, shadow depth
- Check that ALL UI states (hover, focus, active, disabled, loading, error, empty) are themed correctly
- Look for hardcoded colors that break in certain themes
- Verify component library consistency — do buttons, cards, inputs, and modals share a visual language?
- Flag any element that looks "out of place" or inconsistent with the design system

### 2. 🧪 Functional QA & UI Integrity
- Test EVERY interactive element: buttons, dropdowns, toggles, sliders, modals, accordions, tabs
- Verify all tooltips: Do they appear? Are they cut off? Do they have correct content?
- Check for overlapping elements (z-index issues, overflow problems, popover collisions)
- Test all form inputs: validation messages, placeholder text, character limits, required fields
- Check loading states: spinners, skeletons — do they appear and resolve correctly?
- Test error states: 404s, failed API calls, empty states — are they handled gracefully?
- Verify that keyboard navigation works (Tab order, Enter/Space activation, Escape to close)
- Check focus trapping in modals and drawers

### 3. 📱 Mobile Friendliness Assessment
- Simulate viewport widths: 320px, 375px, 390px, 768px, 1024px
- Check for horizontal scroll at any breakpoint (major red flag)
- Verify touch target sizes (minimum 44x44px for interactive elements)
- Assess readability: font sizes, line lengths, contrast on small screens
- Check that dropdowns, modals, and overlays are usable on mobile
- Verify that navigation collapses properly (hamburger menus, bottom bars, etc.)
- Test forms on mobile: Are inputs large enough? Does the correct keyboard type appear?
- Check images: Do they scale and crop correctly? Are they too large to load on mobile?

### 4. ⚡ User Flow Efficiency Analysis
For the following key user journeys, count the number of steps and assess whether
they can be streamlined:
  - Onboarding / account creation
  - Reaching the core value action (the main thing users come to do)
  - Settings or preferences update
  - Search and filtering to a specific result
  - Error recovery (what happens when something goes wrong?)

For each flow:
- Count total clicks/taps to complete
- Identify redundant confirmation steps
- Flag missing shortcuts or bulk actions
- Suggest progressive disclosure opportunities (hide complexity until needed)
- Note any missing defaults that force unnecessary user decisions

### 5. 💡 UX Improvement Suggestions
Based on all findings above, generate prioritized suggestions:
- **Quick wins** (low effort, high impact): e.g., better default values,
  clearer button labels, improved empty states
- **Medium effort improvements**: e.g., combining steps, better feedback loops,
  smarter form validation
- **Strategic improvements**: e.g., onboarding redesign, navigation restructure,
  design system consolidation

For each suggestion include:
  - What the current behavior is
  - What the improved behavior would be
  - Why this matters (user impact)
  - Estimated effort: Low / Medium / High

### 6. 🚀 Performance & Speed Improvement Opportunities
- Identify any UI-visible lag: slow renders, janky animations, delayed responses
- Check for layout shift (elements jumping after load)
- Note any unoptimized images (large files, no lazy loading)
- Look for blocking interactions (buttons unresponsive during loading)
- Suggest optimistic UI patterns where applicable (update UI before server confirms)
- Identify where skeleton loaders or progressive rendering would reduce perceived lag
- Flag any unnecessary full-page reloads that could be AJAX/SPA transitions
- Check if heavy operations give the user feedback (progress bars, estimated time)

---

## OUTPUT FORMAT

Structure your final report as follows:

# HartOMat — UX & Quality Audit Report
**Date**: [date]
**Overall Score**: [X/10]

## Executive Summary
[3-5 sentence overview of the service's current state and top priorities]

## Critical Issues 🔴
[Issues that are broken, inaccessible, or severely harm the experience]

## Major Improvements 🟠
[Significant friction points or inconsistencies]

## Minor Refinements 🟡
[Polish items that would elevate the quality]

## Wins ✅
[What's working well — don't only focus on negatives]

## Prioritized Recommendation List
| Priority | Area | Issue | Suggestion | Effort |
|----------|------|--------|------------|--------|
| 1 | ... | ... | ... | Low |

## Theme & Visual Consistency Report
[Detailed findings from Dimension 1]

## Functional QA Report
[Detailed findings from Dimension 2]

## Mobile Report
[Detailed findings from Dimension 3]

## User Flow Efficiency Report
[Step counts and flow diagrams for key journeys]

## Performance Observations
[Detailed findings from Dimension 6]

---

## AUDIT PRINCIPLES
- Be specific: reference exact UI elements, page names, and interaction states
- Be constructive: every criticism should come with a concrete suggestion
- Prioritize ruthlessly: not everything is equally important
- Think like a first-time user AND a power user — they have different needs
- The goal is: less lag, better functionality, more clarity, easy-to-use options,
  consistent UI, and perfectly working themes

Write the report to `visual-audit-report.md` in the project root.