added app.py

.dockerignore

@@ -0,0 +1,19 @@
+__pycache__/
+*.py[cod]
+*.pyo
+*.pyd
+.Python
+venv/
+.venv/
+env/
+*.egg-info/
+dist/
+build/
+*.db
+*.sqlite3
+*.log
+instance/
+node_modules/
+frontend/node_modules/
+.DS_Store
+.env

.env.example

@@ -0,0 +1,40 @@
+# ════════════════════════════════════════════════
+#  BREATHE — Sample Environment File
+#  Copy this file to .env and fill in your values.
+#  NEVER commit the real .env to version control.
+# ════════════════════════════════════════════════
+
+# ── Flask ────────────────────────────────────────
+FLASK_APP=app.py
+FLASK_DEBUG=true         # set to false in production
+
+# A long random string — generate with: python -c "import secrets; print(secrets.token_hex(32))"
+SECRET_KEY=change-me-to-a-very-long-random-secret-key
+
+# ── Database ─────────────────────────────────────
+# SQLite (default, zero-config)
+DATABASE_URL=sqlite:///breathe.db
+
+# PostgreSQL (recommended for production)
+# DATABASE_URL=postgresql://user:password@localhost:5432/breathe
+
+# ── ML Model Paths ───────────────────────────────
+# Directory containing the saved psychometric model artefacts:
+#   base_scaler.pkl, final_scaler.pkl, le_dict.pkl, le_target.pkl,
+#   selected_cols.pkl, poly.pkl, top_num.pkl,
+#   lightgbm_best_model.pkl (or another *_best_model.pkl)
+PSYCHO_MODEL_DIR=models/psychometric
+
+# Path to the RoBERTa .pt checkpoint file
+ROBERTA_CKPT=models/text/roberta-model.pt
+
+# ── Server ───────────────────────────────────────
+HOST=0.0.0.0
+PORT=5000
+
+# ── CORS (comma-separated origins) ──────────────
+# Leave as * for development, restrict in production
+CORS_ORIGINS=*
+
+# ── W&B (only needed if you re-train models) ─────
+# WANDB_API_KEY=your_wandb_api_key_here

.gitignore

@@ -0,0 +1,23 @@
+# Local environment secrets
+.env
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+venv/
+.venv/
+env/
+*.egg-info/
+dist/
+build/
+*.db
+*.sqlite3
+# Exclude large model weights from git (store separately or use Git LFS)
+models/
+*.pt
+*.pkl
+*.log
+instance/
+.DS_Store
+node_modules/

.tool-versions

@@ -0,0 +1 @@
+python 3.11.3

DEPLOYMENT.md

@@ -0,0 +1,169 @@
+# Deploying BREATHE — Completely Free
+
+This guide deploys the app using:
+| Layer | Service | Cost |
+|---|---|---|
+| Frontend (React/Vite) | **Vercel** | Free forever |
+| Backend (Flask API) | **Render** | Free tier |
+| Database | **Supabase** | Free tier (500MB) |
+
+> **Note on ML models:** PyTorch and the transformer models require ~1–2 GB RAM. Render's free tier provides only 512 MB. The app will run without the ML features on the free tier — assessments and auth still work. To enable ML inference for free, see [Option B: Hugging Face Spaces](#option-b-ml-on-hugging-face-spaces-free) below.
+
+---
+
+## Prerequisites
+
+- A [GitHub](https://github.com) account (push your project there first)
+- Accounts on [Vercel](https://vercel.com), [Render](https://render.com), [Supabase](https://supabase.com) — all free to sign up
+
+---
+
+## Step 1 — Push to GitHub
+
+```bash
+cd breathe-app
+git init
+git add .
+git commit -m "Initial commit"
+# Create a repo on github.com, then:
+git remote add origin https://github.com/YOUR_USERNAME/breathe-app.git
+git push -u origin main
+```
+
+Make sure `.env` is in `.gitignore` (never commit secrets).
+
+---
+
+## Step 2 — Set up the Database on Supabase (free)
+
+1. Go to [supabase.com](https://supabase.com) → **New Project**
+2. Give it a name (e.g. `breathe`) and set a database password
+3. Once created, go to **Project Settings → Database**
+4. Copy the **Connection string (URI)** — it looks like:
+   ```
+   postgresql://postgres:[PASSWORD]@db.xxxx.supabase.co:5432/postgres
+   ```
+5. Save this — you'll need it in Steps 3 and 4.
+
+---
+
+## Step 3 — Deploy the Backend on Render (free)
+
+1. Go to [render.com](https://render.com) → **New → Web Service**
+2. Connect your GitHub repo
+3. Configure the service:
+   | Setting | Value |
+   |---|---|
+   | **Root Directory** | `breathe-app` |
+   | **Runtime** | Python 3 |
+   | **Build Command** | `pip install -r requirements.txt` |
+   | **Start Command** | `gunicorn app:app` |
+   | **Instance Type** | Free |
+
+4. Under **Environment Variables**, add:
+   ```
+   FLASK_APP=app.py
+   FLASK_DEBUG=false
+   SECRET_KEY=<run: python -c "import secrets; print(secrets.token_hex(32))">
+   DATABASE_URL=<your Supabase connection string from Step 2>
+   ```
+
+5. Click **Create Web Service** — Render will build and deploy.
+6. Your backend URL will be: `https://your-service-name.onrender.com`
+
+> ⚠️ Free tier services spin down after 15 minutes of inactivity and take ~30s to wake up on the next request. This is normal.
+
+---
+
+## Step 4 — Deploy the Frontend on Vercel (free)
+
+1. Go to [vercel.com](https://vercel.com) → **Add New Project**
+2. Import your GitHub repo
+3. Configure the project:
+   | Setting | Value |
+   |---|---|
+   | **Root Directory** | `breathe-app/frontend` |
+   | **Framework Preset** | Vite |
+   | **Build Command** | `npm run build` |
+   | **Output Directory** | `dist` |
+
+4. Under **Environment Variables**, add:
+   ```
+   VITE_API_URL=https://your-service-name.onrender.com
+   ```
+
+5. Click **Deploy** — Vercel builds and publishes instantly.
+6. Your app will be live at: `https://your-project.vercel.app`
+
+---
+
+## Option C — Deploy on Hugging Face Spaces with Docker
+
+This repository now includes a root-level `Dockerfile` so you can deploy the full app as one Docker Space.
+
+1. Go to [huggingface.co/spaces](https://huggingface.co/spaces) → **Create new Space**
+2. Choose **Docker** as the SDK
+3. Push or upload this repository to the Space
+4. In Space settings, add environment variables:
+   ```
+   SECRET_KEY=<a strong random value>
+   DATABASE_URL=<optional postgres connection string>
+   PSYCHO_MODEL_DIR=models/psychometric
+   ROBERTA_CKPT=models/text/roberta-model.pt
+   ```
+
+5. Build the Space. The app will start on port `7860` and serve both the React frontend and Flask API from the same domain.
+
+> Note: If model files are missing, the app falls back to demo mode for assessments.
+
+---
+
+## Step 5 — Update the API Client
+
+In `frontend/src/api/client.js`, make sure the base URL reads from the env variable:
+
+```js
+const BASE_URL = import.meta.env.VITE_API_URL || ''
+```
+
+Redeploy the frontend after making this change.
+
+---
+
+## Option B: ML on Hugging Face Spaces (free)
+
+If you want the full ML-powered assessments for free:
+
+1. Go to [huggingface.co/spaces](https://huggingface.co/spaces) → **Create new Space**
+2. Choose **Docker** as the SDK
+3. Upload:
+   - `app.py`, `backend/`, `models/`, `requirements.txt`
+   - A `Dockerfile` (see below)
+4. Add the same environment variables in the Space settings
+
+**Dockerfile for Hugging Face:**
+```dockerfile
+FROM python:3.11-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+EXPOSE 7860
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]
+```
+
+HF Spaces provides 2 CPU cores and 16 GB RAM on the free tier — enough for the ML models.
+
+---
+
+## Summary
+
+| Step | Action | Time |
+|---|---|---|
+| 1 | Push code to GitHub | 5 min |
+| 2 | Create Supabase database, copy connection string | 5 min |
+| 3 | Deploy Flask backend on Render | 10 min |
+| 4 | Deploy React frontend on Vercel | 5 min |
+| 5 | Set `VITE_API_URL` and redeploy frontend | 2 min |
+
+Total: ~30 minutes, $0.

Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-bullseye AS frontend-build
+
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend/ .
+RUN npm run build
+
+FROM python:3.11-slim
+
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+COPY --from=frontend-build /app/frontend/dist ./frontend/dist
+
+EXPOSE 7860
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]

FUTURE_ENHANCEMENTS.md

@@ -0,0 +1,555 @@
+# 🚀 BREATHE — Future Enhancements
+
+A living document of planned and possible improvements to the BREATHE platform.
+
+---
+
+## 1. PostgreSQL — Persistent Production Database
+
+SQLite is fine for development but it resets or corrupts when the server restarts on many cloud platforms. PostgreSQL is a proper production-grade database where your data persists independently of the server.
+
+### Why switch?
+- Data survives server restarts, crashes, and re-deployments
+- Multiple workers can read/write simultaneously (SQLite locks)
+- You can inspect, back up, and query data directly from any Postgres client
+- Required by most cloud platforms (Railway, Render, Supabase, AWS RDS, etc.)
+
+### Step-by-step setup (local)
+
+**1. Install PostgreSQL**
+```bash
+# macOS (Homebrew)
+brew install postgresql@16
+brew services start postgresql@16
+
+# Ubuntu / Debian
+sudo apt install postgresql postgresql-contrib
+sudo systemctl start postgresql
+```
+
+**2. Create the database and user**
+```bash
+psql postgres
+```
+```sql
+CREATE USER breathe_user WITH PASSWORD 'your_strong_password';
+CREATE DATABASE breathe_db OWNER breathe_user;
+GRANT ALL PRIVILEGES ON DATABASE breathe_db TO breathe_user;
+\q
+```
+
+**3. Install the Python driver**
+```bash
+source venv/bin/activate
+pip install psycopg2-binary
+```
+
+**4. Update `.env`**
+```
+DATABASE_URL=postgresql://breathe_user:your_strong_password@localhost:5432/breathe_db
+```
+
+**5. Run the app — tables are created automatically**
+```bash
+python app.py
+```
+Flask's `db.create_all()` will create all tables in Postgres on first run.
+
+**6. Verify**
+```bash
+psql -U breathe_user -d breathe_db -c "\dt"
+# Should list: users, assessments, gratitude_entries
+```
+
+### Step-by-step setup (cloud — Supabase, free tier)
+
+1. Go to [supabase.com](https://supabase.com) → New project
+2. In **Settings → Database** copy the **Connection string** (URI format)
+3. Paste it into `.env` as `DATABASE_URL`
+4. The app connects and creates tables on next start — no other changes needed
+
+### Step-by-step setup (cloud — Railway)
+
+1. Go to [railway.app](https://railway.app) → New project → Add PostgreSQL
+2. Click the Postgres service → **Connect** tab → copy the `DATABASE_URL`
+3. Add it as an environment variable in your BREATHE service on Railway
+4. Re-deploy — done
+
+### Keeping data safe with backups
+```bash
+# Dump the entire database
+pg_dump -U breathe_user breathe_db > backup_$(date +%Y%m%d).sql
+
+# Restore from a dump
+psql -U breathe_user breathe_db < backup_20260502.sql
+```
+
+---
+
+## 2. Sign Up / Log In with Google (OAuth 2.0)
+
+Let users authenticate with their Google account — no password to remember.
+
+### How it works
+1. User clicks "Continue with Google"
+2. Browser redirects to Google's OAuth consent screen
+3. Google returns an authorization code to your callback URL
+4. Flask exchanges the code for an access token and reads the user's profile (name, email, avatar)
+5. Your app creates or logs in the user automatically
+
+### Backend — Flask-Dance (simplest approach)
+
+**Install**
+```bash
+pip install flask-dance[sqla]
+```
+
+**Register a Google OAuth app**
+1. Go to [console.cloud.google.com](https://console.cloud.google.com)
+2. Create a new project → **APIs & Services → Credentials**
+3. Click **Create Credentials → OAuth client ID**
+4. Application type: **Web application**
+5. Authorised redirect URI: `http://localhost:5000/login/google/authorized`
+6. Copy the **Client ID** and **Client Secret** into `.env`:
+
+```
+GOOGLE_CLIENT_ID=your_client_id
+GOOGLE_CLIENT_SECRET=your_client_secret
+```
+
+**Add to `backend/__init__.py`**
+```python
+from flask_dance.contrib.google import make_google_blueprint, google
+
+google_bp = make_google_blueprint(
+    client_id=os.environ.get("GOOGLE_CLIENT_ID"),
+    client_secret=os.environ.get("GOOGLE_CLIENT_SECRET"),
+    scope=["openid", "email", "profile"],
+    redirect_url="/api/auth/google/callback",
+)
+app.register_blueprint(google_bp, url_prefix="/login")
+```
+
+**Add a callback route in `auth.py`**
+```python
+from flask_dance.contrib.google import google
+
+@auth_bp.route("/google/callback")
+def google_callback():
+    if not google.authorized:
+        return jsonify({"error": "Not authorized"}), 401
+    resp = google.get("/oauth2/v2/userinfo")
+    info = resp.json()
+    user = User.query.filter_by(email=info["email"]).first()
+    if not user:
+        user = User(username=info["name"], email=info["email"])
+        user.avatar = info.get("picture")
+        db.session.add(user)
+        db.session.commit()
+    session["user_id"] = user.id
+    return redirect("http://localhost:5173/app/breathe")
+```
+
+**Frontend — add a Google button to `AuthPage.jsx`**
+```jsx
+<a href="http://localhost:5000/login/google" className="btn-google">
+  <img src="/google-icon.svg" alt="" /> Continue with Google
+</a>
+```
+
+---
+
+## 3. Improved UI & UX
+
+### Ideas to implement
+
+| Area | Enhancement |
+|------|-------------|
+| Onboarding | First-time walkthrough tooltip tour (using `driver.js` or `intro.js`) |
+| Themes | Light mode toggle + system preference detection |
+| Animations | Framer Motion page transitions and micro-interactions |
+| Mobile | Full PWA support — installable on phone home screen |
+| Accessibility | ARIA labels, keyboard navigation, high-contrast mode |
+| Charts | Hover annotations, zoom on timeline, weekly/monthly toggle |
+| Notifications | Browser push notifications for daily assessment reminders |
+| Streaks | Gamification — show journaling streak counter on dashboard |
+| Data export | Download your assessment + journal history as CSV or PDF |
+
+### Quick win — dark/light theme toggle
+```js
+// in index.css: add a [data-theme="light"] block overriding --bg, --surface, etc.
+// in a ThemeToggle component:
+document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light')
+localStorage.setItem('theme', isDark ? 'dark' : 'light')
+```
+
+---
+
+## 4. Calm Background Music
+
+Play ambient/calming audio tracks inside the app to accompany breathing and journaling sessions.
+
+### Option A — Self-hosted audio files (simplest)
+
+1. Download royalty-free tracks from [freemusicarchive.org](https://freemusicarchive.org) or [pixabay.com/music](https://pixabay.com/music/)
+2. Place `.mp3` files in `frontend/public/audio/`
+3. Build a `MusicPlayer` component:
+
+```jsx
+// frontend/src/components/MusicPlayer.jsx
+import { useState, useRef } from 'react'
+
+const TRACKS = [
+  { title: 'Forest Rain',   src: '/audio/forest-rain.mp3' },
+  { title: 'Ocean Waves',   src: '/audio/ocean-waves.mp3' },
+  { title: 'Tibetan Bowls', src: '/audio/tibetan-bowls.mp3' },
+]
+
+export default function MusicPlayer() {
+  const [playing, setPlaying] = useState(false)
+  const [track,   setTrack]   = useState(0)
+  const audioRef = useRef(null)
+
+  function togglePlay() {
+    if (playing) { audioRef.current.pause() }
+    else         { audioRef.current.play() }
+    setPlaying(!playing)
+  }
+
+  function changeTrack(i) {
+    setTrack(i)
+    setPlaying(false)
+    setTimeout(() => { audioRef.current.load(); audioRef.current.play(); setPlaying(true) }, 50)
+  }
+
+  return (
+    <div className="music-player">
+      <audio ref={audioRef} loop src={TRACKS[track].src} />
+      <button onClick={togglePlay}>{playing ? '⏸' : '▶'}</button>
+      <span>{TRACKS[track].title}</span>
+      {TRACKS.map((t, i) => (
+        <button key={i} onClick={() => changeTrack(i)}>{t.title}</button>
+      ))}
+    </div>
+  )
+}
+```
+
+4. Add `<MusicPlayer />` to `BreathePage.jsx` or the guided exercise modal
+
+### Option B — Streaming via YouTube IFrame API (no file hosting needed)
+
+```jsx
+// Embed a YouTube ambient playlist
+<iframe
+  src="https://www.youtube.com/embed/videoseries?list=PLQ6T_LmSTMi17X70BIqNfSFRMC1u83M7m&autoplay=1&loop=1"
+  allow="autoplay"
+  style={{ display: 'none' }}   // audio only
+/>
+```
+
+---
+
+## 5. Text-to-Speech for Activity Instructions
+
+Convert the step-by-step instructions in guided exercises into spoken audio so users can close their eyes and follow along hands-free.
+
+### Option A — Web Speech API (free, no API key, built into browser)
+
+```jsx
+// frontend/src/utils/tts.js
+export function speak(text, { rate = 0.85, pitch = 1, volume = 1 } = {}) {
+  if (!window.speechSynthesis) return
+  window.speechSynthesis.cancel()
+  const utt = new SpeechSynthesisUtterance(text)
+  utt.rate   = rate
+  utt.pitch  = pitch
+  utt.volume = volume
+  // Pick a calm voice if available
+  const voices = window.speechSynthesis.getVoices()
+  const calm = voices.find(v => v.name.includes('Samantha') || v.name.includes('Karen'))
+  if (calm) utt.voice = calm
+  window.speechSynthesis.speak(utt)
+}
+
+export function stopSpeaking() {
+  window.speechSynthesis.cancel()
+}
+```
+
+**Use it in `BreathePage.jsx` guided modal:**
+```jsx
+import { speak, stopSpeaking } from '../utils/tts'
+
+// When step changes, read it aloud:
+useEffect(() => {
+  speak(`${s.label}. ${s.desc}`)
+  return () => stopSpeaking()
+}, [step])
+
+// Add a toggle button:
+const [ttsOn, setTtsOn] = useState(false)
+```
+
+**Add a count-down timer with spoken cues for Box Breathing:**
+```jsx
+useEffect(() => {
+  if (!s.duration || !ttsOn) return
+  speak(`${s.label}. ${s.duration} seconds.`)
+  const timer = setTimeout(() => speak('Next.'), s.duration * 1000)
+  return () => clearTimeout(timer)
+}, [step])
+```
+
+### Option B — ElevenLabs API (natural-sounding AI voices)
+
+1. Sign up at [elevenlabs.io](https://elevenlabs.io) (free tier: 10,000 chars/month)
+2. Generate MP3 files for each step offline and include them as static assets (same as Option A of music)
+3. Or call the API at runtime:
+
+```python
+# backend/routes/tts.py
+import requests, os
+from flask import Blueprint, jsonify, request
+
+tts_bp = Blueprint("tts", __name__, url_prefix="/api/tts")
+
+@tts_bp.route("/speak", methods=["POST"])
+def speak():
+    text = (request.get_json() or {}).get("text", "")[:500]
+    resp = requests.post(
+        "https://api.elevenlabs.io/v1/text-to-speech/EXAVITQu4vr4xnSDxMaL",
+        headers={"xi-api-key": os.environ["ELEVEN_API_KEY"]},
+        json={"text": text, "voice_settings": {"stability": 0.5, "similarity_boost": 0.75}},
+    )
+    return resp.content, 200, {"Content-Type": "audio/mpeg"}
+```
+
+```js
+// Frontend: fetch and play
+const res = await fetch('/api/tts/speak', { method:'POST', body: JSON.stringify({text}), headers:{'Content-Type':'application/json'} })
+const blob = await res.blob()
+new Audio(URL.createObjectURL(blob)).play()
+```
+
+### Option C — Google Cloud Text-to-Speech (highest quality, WaveNet voices)
+
+```bash
+pip install google-cloud-texttospeech
+```
+
+```python
+from google.cloud import texttospeech
+
+client = texttospeech.TextToSpeechClient()
+synthesis_input = texttospeech.SynthesisInput(text=text)
+voice = texttospeech.VoiceSelectionParams(
+    language_code="en-US",
+    name="en-US-Wavenet-F",
+)
+audio_config = texttospeech.AudioConfig(audio_encoding=texttospeech.AudioEncoding.MP3)
+response = client.synthesize_speech(input=synthesis_input, voice=voice, audio_config=audio_config)
+# response.audio_content is bytes → stream to frontend
+```
+
+---
+
+## 6. Spotify Integration — Play Your Playlists Inside BREATHE
+
+Let users connect their Spotify account and play their own playlists (or curated calm playlists) without leaving the app.
+
+### How it works (Spotify Web Playback SDK + OAuth PKCE)
+
+**Step 1 — Create a Spotify app**
+1. Go to [developer.spotify.com/dashboard](https://developer.spotify.com/dashboard)
+2. Click **Create App**
+3. Set **Redirect URI** to `http://localhost:5173/app/spotify/callback`
+4. Copy your **Client ID** (no secret needed for PKCE flow)
+5. Add to `.env`: `VITE_SPOTIFY_CLIENT_ID=your_client_id`
+
+**Step 2 — Authorization (PKCE, no backend needed)**
+```js
+// frontend/src/utils/spotify.js
+const CLIENT_ID    = import.meta.env.VITE_SPOTIFY_CLIENT_ID
+const REDIRECT_URI = 'http://localhost:5173/app/spotify/callback'
+const SCOPES       = 'streaming user-read-email user-read-private user-library-read playlist-read-private'
+
+export async function loginWithSpotify() {
+  const verifier  = generateCodeVerifier(128)
+  const challenge = await generateCodeChallenge(verifier)
+  localStorage.setItem('spotify_verifier', verifier)
+
+  const params = new URLSearchParams({
+    response_type: 'code',
+    client_id:     CLIENT_ID,
+    scope:         SCOPES,
+    redirect_uri:  REDIRECT_URI,
+    code_challenge_method: 'S256',
+    code_challenge: challenge,
+  })
+  window.location = 'https://accounts.spotify.com/authorize?' + params
+}
+
+export async function exchangeToken(code) {
+  const verifier = localStorage.getItem('spotify_verifier')
+  const res = await fetch('https://accounts.spotify.com/api/token', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: new URLSearchParams({
+      grant_type:    'authorization_code',
+      code,
+      redirect_uri:  REDIRECT_URI,
+      client_id:     CLIENT_ID,
+      code_verifier: verifier,
+    }),
+  })
+  const data = await res.json()
+  localStorage.setItem('spotify_token',   data.access_token)
+  localStorage.setItem('spotify_refresh', data.refresh_token)
+  return data.access_token
+}
+
+// Helper: generate PKCE verifier/challenge
+function generateCodeVerifier(length) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~'
+  return Array.from(crypto.getRandomValues(new Uint8Array(length)))
+    .map(b => chars[b % chars.length]).join('')
+}
+async function generateCodeChallenge(verifier) {
+  const data = new TextEncoder().encode(verifier)
+  const digest = await crypto.subtle.digest('SHA-256', data)
+  return btoa(String.fromCharCode(...new Uint8Array(digest)))
+    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
+}
+```
+
+**Step 3 — Load the Spotify Web Playback SDK**
+```html
+<!-- frontend/index.html -->
+<script src="https://sdk.scdn.co/spotify-player.js"></script>
+```
+
+**Step 4 — Create a `SpotifyPlayer` component**
+```jsx
+// frontend/src/components/SpotifyPlayer.jsx
+import { useEffect, useState } from 'react'
+
+export default function SpotifyPlayer({ token }) {
+  const [player,   setPlayer]   = useState(null)
+  const [deviceId, setDeviceId] = useState(null)
+  const [playing,  setPlaying]  = useState(false)
+  const [track,    setTrack]    = useState(null)
+  const [playlists, setPlaylists] = useState([])
+
+  useEffect(() => {
+    window.onSpotifyWebPlaybackSDKReady = () => {
+      const p = new window.Spotify.Player({
+        name:         'BREATHE Player',
+        getOAuthToken: cb => cb(token),
+        volume:        0.5,
+      })
+      p.addListener('ready', ({ device_id }) => setDeviceId(device_id))
+      p.addListener('player_state_changed', state => {
+        if (!state) return
+        setTrack(state.track_window.current_track)
+        setPlaying(!state.paused)
+      })
+      p.connect()
+      setPlayer(p)
+    }
+  }, [token])
+
+  // Fetch user's playlists
+  useEffect(() => {
+    fetch('https://api.spotify.com/v1/me/playlists', {
+      headers: { Authorization: `Bearer ${token}` }
+    }).then(r => r.json()).then(d => setPlaylists(d.items || []))
+  }, [token])
+
+  async function playPlaylist(uri) {
+    await fetch(`https://api.spotify.com/v1/me/player/play?device_id=${deviceId}`, {
+      method:  'PUT',
+      headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
+      body:    JSON.stringify({ context_uri: uri }),
+    })
+  }
+
+  return (
+    <div className="spotify-player">
+      {track && (
+        <div className="sp-now-playing">
+          <img src={track.album.images[0]?.url} alt="" className="sp-album-art" />
+          <div>
+            <div className="sp-track-name">{track.name}</div>
+            <div className="sp-artist">{track.artists.map(a => a.name).join(', ')}</div>
+          </div>
+          <button onClick={() => player.togglePlay()}>{playing ? '⏸' : '▶'}</button>
+          <button onClick={() => player.previousTrack()}>⏮</button>
+          <button onClick={() => player.nextTrack()}>⏭</button>
+        </div>
+      )}
+      <div className="sp-playlists">
+        {playlists.map(pl => (
+          <button key={pl.id} onClick={() => playPlaylist(pl.uri)}>
+            {pl.images[0] && <img src={pl.images[0].url} alt="" />}
+            {pl.name}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+**Step 5 — Add a callback route in React**
+```jsx
+// App.jsx — add inside <Routes>
+<Route path="/app/spotify/callback" element={<SpotifyCallback />} />
+```
+
+```jsx
+// pages/SpotifyCallback.jsx
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { exchangeToken } from '../utils/spotify'
+
+export default function SpotifyCallback() {
+  const navigate = useNavigate()
+  useEffect(() => {
+    const code = new URLSearchParams(window.location.search).get('code')
+    if (code) exchangeToken(code).then(() => navigate('/app/breathe'))
+  }, [])
+  return <div>Connecting to Spotify…</div>
+}
+```
+
+**Step 6 — Add "Connect Spotify" button to the Breathe hub or Dashboard**
+```jsx
+import { loginWithSpotify } from '../utils/spotify'
+
+const token = localStorage.getItem('spotify_token')
+if (!token) {
+  return <button onClick={loginWithSpotify}>🎵 Connect Spotify</button>
+}
+return <SpotifyPlayer token={token} />
+```
+
+> **Note:** The Spotify Web Playback SDK requires a **Spotify Premium** account to play audio.
+> Free accounts can still fetch playlist metadata but cannot stream tracks directly.
+
+---
+
+## 7. Other Future Enhancements
+
+| Enhancement | Notes |
+|-------------|-------|
+| **Wearable data sync** | Import heart rate & sleep data from Apple Health / Google Fit via their REST APIs and use it as auto-filled psychometric inputs |
+| **AI chat support** | Add a "Talk to BREATHE" widget using OpenAI's chat API — gives personalised coping suggestions based on the user's stress history |
+| **Mood tracker** | Daily one-tap mood log (separate from assessments) charted over time |
+| **Weekly report email** | Cron job + Flask-Mail sends a weekly PDF summary of stress trends |
+| **Multi-language support** | i18n with `react-i18next` — translate UI strings and TTS language |
+| **Community / anonymous sharing** | Opt-in feed where users share their coping strategies anonymously |
+| **Therapist portal** | Separate role for mental-health professionals to view consented patient dashboards |
+| **Mobile app** | Wrap the React frontend with Capacitor or React Native for iOS/Android |
+| **Offline mode** | Service Worker caches the app shell; assessments queue and sync when back online |
+| **Biometric login** | WebAuthn passkey support — log in with Face ID or fingerprint |

README.md

@@ -1,10 +1,402 @@
+# 🫁 BREATHE
+
+> **Stress Intelligence Platform** — understand your stress before it controls you.
+
+BREATHE is a full-stack web app that fuses psychometric lifestyle data and free-text journaling through an ML pipeline to give you a personalised stress score, trend charts, and actionable advice — all in a clean, dark-themed React dashboard.
+
+---
+
+## ✨ Features
+
+### Core
+- **Secure auth** — sign up / log in with hashed passwords and server-side sessions
+- **Psychometric assessment** — 12 lifestyle sliders (sleep, work hours, screen time, caffeine …) + 4 categorical cues
+- **Text journaling** — write freely; RoBERTa NLP analyses the sentiment
+- **ML fusion** — tabular ensemble (LightGBM / CatBoost / XGBoost / Stacking) + RoBERTa → weighted probability fusion → 5-class stress output
+- **Demo mode** — app runs fully with rule-based heuristics when ML model files are absent
+
+### Dashboard
+- Area timeline chart of stress scores
+- Pie distribution of stress levels
+- Stat cards (total assessments, latest level, average score, trend)
+- Recent assessments with per-assessment detail modal
+- Stress relief activity panel (accordion)
+
+### Profile
+- Upload a profile photo (JPG/PNG/GIF/WebP, max 2 MB)
+- Set gender, working status, and date of birth
+- Write a short bio
+- **Anonymous mode** — toggle to hide your name in shared/exported views
+
+### Gratitude Journal
+- Write 3 prompted daily gratitude items + optional mood tag + free-text reflection
+- All entries saved to your account with timestamps
+- Paginated history view with expand/collapse and per-entry delete
+
+### Daily To-Do
+- Add tasks with High / Medium / Low priority
+- Filter by All / Active / Done; bulk-clear completed tasks
+- **Stored in browser localStorage only** — never sent to the server
+
+### Breathe Hub
+- Full-screen activity centre (no sidebar) — opens on login
+- 6 activity cards: Gratitude Journal, Box Breathing, Daily To-Do, Body Scan, Sound Bath, Progressive Relaxation
+- Guided exercise modal with step-through progress dots for breathing and relaxation exercises
+- Quick nav buttons to Dashboard and Profile
+
+---
+
+## 🖥️ Tech Stack
+
+| Layer | Technology |
+|-------|------------|
+| Frontend | React 18, Vite 5, React Router v6, Recharts 2 |
+| Backend | Python 3.10+, Flask 3, Flask-SQLAlchemy |
+| Database | SQLite (dev) / PostgreSQL (prod) |
+| Auth | Server-side sessions, Werkzeug password hashing |
+| ML — Tabular | LightGBM / CatBoost / XGBoost / Stacking ensemble |
+| ML — Text | RoBERTa-base fine-tuned on mental-health dataset |
+| ML — Fusion | Weighted probability fusion → Minimal / Mild / Moderate / Severe / Critical |
+
+---
+
+## 🚀 Quick Start
+
+> Full instructions are in [SETUP.md](SETUP.md). This is the short version.
+
+### Prerequisites
+- Python ≥ 3.10
+- Node.js ≥ 18 + npm ≥ 9
+
+### 1 — Install Python deps
+```bash
+cd breathe-app
+python -m venv venv
+source venv/bin/activate          # Windows: venv\Scripts\Activate.ps1
+pip install -r requirements.txt
+```
+
+### 2 — Configure environment
+```bash
+cp .env.example .env
+# edit .env — set SECRET_KEY at minimum
+```
+
+### 3 — Install frontend deps
+```bash
+cd frontend && npm install && cd ..
+```
+
+### 3.1 — Docker deployment support
+This repo includes a root-level `Dockerfile` so you can build the app as a single container for Hugging Face Spaces or any Docker host.
+
+### 4 — Run (two terminals)
+
+**Terminal 1 — Flask API (port 5000)**
+```bash
+source venv/bin/activate
+python app.py
+```
+
+**Terminal 2 — React dev server (port 5173)**
+```bash
+cd frontend
+npm run dev
+```
+
+Open **http://localhost:5173** — after login you land on the Breathe hub 🎉
+
+---
+
+## 📁 Project Structure
+
+```
+breathe-app/
+├── app.py                    # WSGI entry-point
+├── requirements.txt
+├── .env.example
+├── backend/
+│   ├── __init__.py           # Flask app factory
+│   ├── models/
+│   │   ├── user.py           # User ORM (incl. profile fields)
+│   │   ├── assessment.py     # Assessment ORM
+│   │   └── gratitude.py      # GratitudeEntry ORM
+│   ├── routes/
+│   │   ├── auth.py           # /api/auth/*
+│   │   ├── assessments.py    # /api/assessments/*
+│   │   ├── profile.py        # /api/profile/*
+│   │   └── gratitude.py      # /api/gratitude/*
+│   └── ml/ml_engine.py       # Inference wrapper + demo fallback
+├── frontend/
+│   ├── vite.config.js        # Proxies /api → Flask :5000
+│   └── src/
+│       ├── pages/
+│       │   ├── LandingPage.jsx
+│       │   ├── AuthPage.jsx
+│       │   ├── BreathePage.jsx    # Activity hub (post-login home)
+│       │   ├── DashboardPage.jsx
+│       │   ├── AssessPage.jsx
+│       │   ├── HistoryPage.jsx
+│       │   ├── ProfilePage.jsx
+│       │   ├── GratitudePage.jsx
+│       │   └── TodoPage.jsx
+│       ├── components/Layout.jsx  # Sidebar shell
+│       ├── context/AuthContext.jsx
+│       └── api/client.js          # Fetch wrapper (get/post/put/del)
+├── models/
+│   ├── psychometric/         # .pkl files from notebook
+│   └── text/                 # roberta-model.pt
+└── instance/
+    └── breathe.db            # SQLite DB (auto-created)
+```
+
+---
+
+## 🧠 ML Pipeline
+
+```
+Lifestyle cues (12 numeric + 4 categorical)
+        │
+        ▼
+  Feature engineering (PolynomialFeatures, scaling, label encoding)
+        │
+        ▼
+  Stacking ensemble  ──────────────────────────────┐
+  (LightGBM + CatBoost + XGBoost + RF + MLP)       │
+        │                                           │
+        ▼                                           ▼
+  psycho_score (0–1)              text_score (0–1) ← RoBERTa fine-tuned
+        │                                           │
+        └──────────── fusion (50/50) ───────────────┘
+                             │
+                             ▼
+              fused_score → stress label
+          [Minimal | Mild | Moderate | Severe | Critical]
+```
+
+The engine falls back to **Demo mode** (rule-based heuristics) if model files are missing.
+
+---
+
+## 🔌 API Reference
+
+### Auth
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/api/auth/signup` | Register (`username`, `email`, `password`) |
+| POST | `/api/auth/login` | Login (`email` or `username`, `password`) |
+| POST | `/api/auth/logout` | Logout |
+| GET | `/api/auth/me` | Current user |
+
+### Assessments
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/api/assessments` | Submit assessment |
+| GET | `/api/assessments` | List (paginated `?page=1&per_page=20`) |
+| GET | `/api/assessments/<id>` | Single assessment |
+| GET | `/api/assessments/summary` | Dashboard data + timeline |
+
+### Profile
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/api/profile` | Get current profile |
+| PUT | `/api/profile` | Update bio, gender, working status, DOB, anonymous flag |
+| POST | `/api/profile/avatar` | Upload / remove avatar (base64 data-url) |
+
+### Gratitude Journal
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/api/gratitude` | Save entry (`items[]`, `content`, `mood`) |
+| GET | `/api/gratitude` | List entries (paginated `?page=1`) |
+| DELETE | `/api/gratitude/<id>` | Delete entry |
+
+---
+
+## 🗺️ Page Routes
+
+| URL | Page | Auth |
+|-----|------|------|
+| `/` | Landing page | Public |
+| `/auth` | Login / Signup | Public |
+| `/app/breathe` | Breathe hub (post-login home) | Protected |
+| `/app/dashboard` | Stress dashboard | Protected |
+| `/app/assess` | New assessment | Protected |
+| `/app/history` | Assessment history | Protected |
+| `/app/profile` | User profile | Protected |
+| `/app/gratitude` | Gratitude journal | Protected |
+| `/app/todo` | Daily to-do list | Protected |
+
 ---
-title: BREATHE
-emoji: 🌍
-colorFrom: green
-colorTo: blue
-sdk: docker
-pinned: false
+
+## 📦 Production Build
+
+```bash
+# Build React bundle (output → frontend/dist/)
+cd frontend && npm run build && cd ..
+
+# Flask auto-serves frontend/dist/ — no Node process needed
+gunicorn "app:app" --workers 2 --bind 0.0.0.0:5000 --timeout 120
+```
+
+---
+
+## 📄 License
+
+MIT — see `LICENSE` for details.
+
+
+---
+
+## 🖥️ Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Frontend | React 18, Vite 5, React Router v6, Recharts 2 |
+| Backend | Python 3.10+, Flask 3, Flask-SQLAlchemy |
+| Database | SQLite (dev) / PostgreSQL (prod) |
+| Auth | Server-side sessions, Werkzeug password hashing |
+| ML — Tabular | LightGBM / CatBoost / XGBoost / Stacking ensemble |
+| ML — Text | RoBERTa-base fine-tuned on mental-health dataset |
+| ML — Fusion | Weighted probability fusion → Minimal / Mild / Moderate / Severe / Critical |
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## 🚀 Quick Start
+
+> Full instructions are in [SETUP.md](SETUP.md). This is the short version.
+
+### Prerequisites
+- Python ≥ 3.10
+- Node.js ≥ 18 + npm ≥ 9
+
+### 1 — Install Python deps
+```bash
+python -m venv venv
+source venv/bin/activate          # Windows: venv\Scripts\Activate.ps1
+pip install -r requirements.txt
+```
+
+### 2 — Configure environment
+```bash
+cp .env.example .env
+# edit .env — set SECRET_KEY at minimum
+```
+
+### 3 — Install frontend deps
+```bash
+cd frontend && npm install && cd ..
+```
+
+### 3.1 — Docker deployment support
+This repo includes a root-level `Dockerfile` so you can build the app as a single container for Hugging Face Spaces or any Docker host.
+
+### 4 — Run (two terminals)
+
+**Terminal 1 — Flask API**
+```bash
+source venv/bin/activate
+python app.py
+```
+
+**Terminal 2 — React dev server**
+```bash
+cd frontend
+npm run dev
+```
+
+Open **http://localhost:5173** 🎉
+
+---
+
+## 📁 Project Structure
+
+```
+breathe-app/
+├── app.py                  # WSGI entry-point
+├── requirements.txt
+├── .env.example
+├── backend/
+│   ├── __init__.py         # Flask app factory
+│   ├── models/             # SQLAlchemy ORM models
+│   ├── routes/             # Auth + Assessment API blueprints
+│   └── ml/ml_engine.py     # Inference wrapper + demo fallback
+├── frontend/
+│   ├── vite.config.js      # Proxies /api → Flask :5000
+│   └── src/
+│       ├── pages/          # AuthPage, DashboardPage, AssessPage, HistoryPage
+│       ├── components/     # Layout (sidebar shell)
+│       ├── context/        # AuthContext
+│       └── api/client.js   # Fetch wrapper
+├── models/
+│   ├── psychometric/       # .pkl files from notebook
+│   └── text/               # roberta-model.pt
+└── notebooks/              # Original Jupyter notebooks
+```
+
+---
+
+## 🧠 ML Pipeline
+
+```
+Lifestyle cues (12 numeric + 4 categorical)
+        │
+        ▼
+  Feature engineering (PolynomialFeatures, scaling, label encoding)
+        │
+        ▼
+  Stacking ensemble  ──────────────────────────────┐
+  (LightGBM + CatBoost + XGBoost + RF + MLP)       │
+        │                                           │
+        ▼                                           ▼
+  psycho_score (0–1)              text_score (0–1) ← RoBERTa fine-tuned
+        │                                           │
+        └──────────── fusion (50/50) ───────────────┘
+                             │
+                             ▼
+              fused_score → stress label
+          [Minimal | Mild | Moderate | Severe | Critical]
+```
+
+The engine falls back to **Demo mode** (rule-based heuristics) if model files are missing — the full UI still works.
+
+---
+
+## 🔌 API Reference
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/api/auth/signup` | Register (`username`, `email`, `password`) |
+| POST | `/api/auth/login` | Login (`email` or `username`, `password`) |
+| POST | `/api/auth/logout` | Logout |
+| GET | `/api/auth/me` | Current user |
+| POST | `/api/assessments` | Submit assessment |
+| GET | `/api/assessments` | List (paginated) |
+| GET | `/api/assessments/<id>` | Single assessment |
+| GET | `/api/assessments/summary` | Dashboard data |
+
+---
+
+## 📦 Production Build
+
+```bash
+# Build React bundle (output → frontend/dist/)
+cd frontend && npm run build && cd ..
+
+# Flask auto-serves frontend/dist/ — no Node process needed
+gunicorn "app:app" --workers 2 --bind 0.0.0.0:5000 --timeout 120
+```
+
+---
+
+## 🤝 Contributing
+
+1. Fork the repo
+2. Create a feature branch: `git checkout -b feat/my-feature`
+3. Commit your changes: `git commit -m "feat: add my feature"`
+4. Push and open a Pull Request
+
+---
+
+## 📄 License
+
+MIT — see `LICENSE` for details.

SETUP.md

@@ -0,0 +1,642 @@
+# BREATHE — Project Setup Guide
+
+## Overview
+
+**BREATHE** is a full-stack stress intelligence web application. After logging in, users land on the **Breathe hub** — a full-screen activity centre with cards for:
+- Stress assessments (psychometric + free-text, ML-powered)
+- Gratitude journaling (saved to account)
+- Daily to-do list (saved in browser only)
+- Guided breathing and relaxation exercises
+
+All stress data is stored in a database and shown on a live dashboard with charts and history.
+
+---
+
+## Project Structure
+
+```
+breathe-app/
+├── app.py                    # WSGI entry-point
+├── requirements.txt
+├── .env.example              # copy → .env and fill in values
+├── .gitignore
+├── backend/
+│   ├── __init__.py           # Flask app factory + DB init
+│   ├── models/
+│   │   ├── user.py           # User ORM (profile fields: avatar, gender, dob, bio, is_anonymous)
+│   │   ├── assessment.py     # Assessment ORM
+│   │   └── gratitude.py      # GratitudeEntry ORM
+│   ├── routes/
+│   │   ├── auth.py           # /api/auth/*
+│   │   ├── assessments.py    # /api/assessments/*
+│   │   ├── profile.py        # /api/profile/*
+│   │   └── gratitude.py      # /api/gratitude/*
+│   └── ml/
+│       └── ml_engine.py      # Psychometric + RoBERTa inference (demo fallback)
+├── frontend/                 # React 18 + Vite 5 SPA
+│   ├── index.html
+│   ├── vite.config.js        # Vite config (proxy /api → Flask :5000)
+│   ├── package.json
+│   └── src/
+│       ├── main.jsx
+│       ├── App.jsx           # Router + auth guards
+│       ├── index.css         # Global design system
+│       ├── utils.js          # Shared helpers + colour maps
+│       ├── api/client.js     # Fetch wrapper (get/post/put/del)
+│       ├── context/
+│       │   └── AuthContext.jsx
+│       ├── components/
+│       │   └── Layout.jsx    # Sidebar shell
+│       └── pages/
+│           ├── LandingPage.jsx
+│           ├── AuthPage.jsx
+│           ├── BreathePage.jsx    # Activity hub (post-login home)
+│           ├── DashboardPage.jsx
+│           ├── AssessPage.jsx
+│           ├── HistoryPage.jsx
+│           ├── ProfilePage.jsx
+│           ├── GratitudePage.jsx
+│           └── TodoPage.jsx
+├── models/
+│   ├── psychometric/         # .pkl files from notebook
+│   └── text/                 # roberta-model.pt
+└── instance/
+    └── breathe.db            # SQLite DB (auto-created)
+```
+
+---
+
+## Prerequisites
+
+| Requirement | Version |
+|-------------|---------|
+| Python | ≥ 3.10 |
+| Node.js | ≥ 18 |
+| npm | ≥ 9 |
+| pip | ≥ 23 |
+| (Optional) NVIDIA GPU + CUDA 12.x | for full RoBERTa inference |
+
+---
+
+## Step-by-Step Setup
+
+### 1 — Open the project folder
+
+```bash
+cd breathe-app
+```
+
+### 2 — Create a Python virtual environment
+
+```bash
+python -m venv venv
+
+# macOS / Linux
+source venv/bin/activate
+
+# Windows PowerShell
+venv\Scripts\Activate.ps1
+```
+
+### 3 — Install Python dependencies
+
+```bash
+pip install --upgrade pip
+pip install -r requirements.txt
+```
+
+> **GPU note:** For GPU-accelerated RoBERTa inference, replace the `torch` line in
+> `requirements.txt` with:
+> ```
+> torch==2.2.2+cu121 --index-url https://download.pytorch.org/whl/cu121
+> ```
+
+### 4 — Configure environment variables
+
+```bash
+cp .env.example .env
+```
+
+Open `.env` and fill in:
+
+| Variable | What to set |
+|----------|-------------|
+| `SECRET_KEY` | Long random string |
+| `DATABASE_URL` | `sqlite:///breathe.db` (default) or a PostgreSQL URI |
+| `PSYCHO_MODEL_DIR` | Path to folder with trained psychometric `.pkl` files |
+| `ROBERTA_CKPT` | Path to `roberta-model.pt` |
+
+> **Demo mode:** If model paths are missing or `torch` is not installed, the app runs with
+> rule-based heuristic predictions. All features of the UI still work.
+
+#### Psychometric model artefacts
+
+Run `psychometric notebook.ipynb` to produce these files, then set `PSYCHO_MODEL_DIR`:
+
+```
+base_scaler.pkl   final_scaler.pkl   le_dict.pkl   le_target.pkl
+selected_cols.pkl poly.pkl           top_num.pkl   *_best_model.pkl
+```
+
+#### RoBERTa checkpoint
+
+```
+ROBERTA_CKPT=/path/to/breathe/text-sentiment/roberta-model.pt
+```
+
+### 5 — Install frontend dependencies
+
+```bash
+cd frontend
+npm install
+cd ..
+```
+
+> **asdf users:** run `asdf set nodejs 20.18.1` inside the `frontend/` directory first.
+
+### 6 — Run the development servers
+
+Open **two terminal tabs**.
+
+**Terminal 1 — Flask API (port 5000)**
+```bash
+# from breathe-app/
+source venv/bin/activate
+python app.py
+```
+
+**Terminal 2 — React dev server (port 5173)**
+```bash
+# from breathe-app/frontend/
+npm run dev
+```
+
+Open **http://localhost:5173** in your browser.
+
+- After login you land on the **Breathe hub** (`/app/breathe`)
+- The React dev server proxies all `/api/*` requests to Flask on port 5000 automatically
+- The SQLite database (`instance/breathe.db`) is created automatically on first run
+
+### 7 — (Optional) PostgreSQL
+
+```bash
+pip install psycopg2-binary
+createdb breathe
+# Set in .env:
+# DATABASE_URL=postgresql://postgres:password@localhost:5432/breathe
+```
+
+---
+
+## Database Migrations
+
+The app uses `db.create_all()` on startup to create new tables. If you add columns to an
+existing table (e.g. upgrading from an older version), run the migration script manually:
+
+```bash
+source venv/bin/activate
+python3 - <<'EOF'
+import sqlite3, os
+conn = sqlite3.connect('instance/breathe.db')
+cur  = conn.cursor()
+# Example: add profile columns if missing
+cur.execute("PRAGMA table_info(users)")
+existing = {row[1] for row in cur.fetchall()}
+new_cols = {
+    "avatar": "TEXT", "gender": "VARCHAR(32)",
+    "working_status": "VARCHAR(64)", "dob": "VARCHAR(10)",
+    "bio": "VARCHAR(500)", "is_anonymous": "BOOLEAN DEFAULT 0",
+}
+for col, t in new_cols.items():
+    if col not in existing:
+        cur.execute(f"ALTER TABLE users ADD COLUMN {col} {t}")
+conn.commit(); conn.close(); print('done')
+EOF
+```
+
+---
+
+## Running in Production
+
+### 1 — Build the React frontend
+
+```bash
+cd frontend
+npm run build
+cd ..
+```
+
+Outputs a static bundle to `frontend/dist/`. Flask auto-detects and serves it.
+
+### 2 — Start the Flask server
+
+```bash
+source venv/bin/activate
+gunicorn "app:app" \
+  --workers 2 \
+  --bind 0.0.0.0:5000 \
+  --timeout 120
+```
+
+Set `FLASK_DEBUG=false` and a strong `SECRET_KEY` in `.env` before deploying.
+
+---
+
+## API Reference
+
+### Auth
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/api/auth/signup` | Create account (`username`, `email`, `password`) |
+| POST | `/api/auth/login` | Log in (`email` or `username`, `password`) |
+| POST | `/api/auth/logout` | Log out |
+| GET | `/api/auth/me` | Current user |
+
+### Assessments
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/api/assessments` | Submit assessment |
+| GET | `/api/assessments` | List (paginated `?page=1&per_page=20`) |
+| GET | `/api/assessments/<id>` | Single assessment |
+| GET | `/api/assessments/summary` | Dashboard summary + timeline |
+
+### Profile
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/api/profile` | Get current profile |
+| PUT | `/api/profile` | Update bio, gender, working_status, dob, is_anonymous |
+| POST | `/api/profile/avatar` | Upload/remove avatar (base64 data-url, max 2 MB) |
+
+### Gratitude Journal
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/api/gratitude` | Save entry (`items[]`, `content`, `mood`) |
+| GET | `/api/gratitude` | List entries (`?page=1`) |
+| DELETE | `/api/gratitude/<id>` | Delete entry |
+
+---
+
+## Page Routes
+
+| URL | Page | Auth |
+|-----|------|------|
+| `/` | Landing page | Public |
+| `/auth` | Login / Signup | Public |
+| `/app/breathe` | Breathe hub (post-login home) | Protected |
+| `/app/dashboard` | Stress dashboard | Protected |
+| `/app/assess` | New assessment | Protected |
+| `/app/history` | Assessment history | Protected |
+| `/app/profile` | User profile | Protected |
+| `/app/gratitude` | Gratitude journal | Protected |
+| `/app/todo` | Daily to-do list | Protected |
+
+---
+
+## Stress Level Mapping
+
+| Level | Score Range | Colour |
+|-------|-------------|--------|
+| Minimal | 0.00 – 0.20 | 🟢 Green |
+| Mild | 0.20 – 0.40 | 🟡 Light green |
+| Moderate | 0.40 – 0.60 | 🟠 Yellow |
+| Severe | 0.60 – 0.80 | 🔴 Orange |
+| Critical | 0.80 – 1.00 | 🚨 Red |
+
+---
+
+## Troubleshooting
+
+| Problem | Fix |
+|---------|-----|
+| `No version is set for nodejs` | Run `asdf set nodejs 20.18.1` in `frontend/` |
+| Blank page in browser | Make sure Flask is running on port 5000 |
+| CORS errors | Add `http://localhost:5173` to `CORS_ORIGINS` in `.env` |
+| `ModuleNotFoundError: torch` | `pip install torch` or use demo mode |
+| `FileNotFoundError: base_scaler.pkl` | Set `PSYCHO_MODEL_DIR` in `.env` |
+| HTTP 500 on login after upgrade | Run the DB migration script above to add new columns |
+| Port 5000 in use | Set `PORT=5001` in `.env` and update `vite.config.js` proxy target |
+| Database locked (SQLite) | Use PostgreSQL for multi-worker deployments |
+
+
+---
+
+## Project Structure
+
+```
+breathe-app/
+├── app.py                   # WSGI entry-point
+├── requirements.txt
+├── .env.example             # copy → .env and fill in values
+├── .gitignore
+├── backend/
+│   ├── __init__.py          # Flask app factory + DB init
+│   ├── models/
+│   │   ├── user.py          # User ORM model
+│   │   └── assessment.py    # Assessment ORM model
+│   ├── routes/
+│   │   ├── auth.py          # /api/auth/* endpoints
+│   │   └── assessments.py   # /api/assessments/* endpoints
+│   └── ml/
+│       └── ml_engine.py     # Psychometric + RoBERTa inference
+├── frontend/                # React + Vite SPA
+│   ├── index.html           # Vite HTML shell
+│   ├── vite.config.js       # Vite config (proxy /api → Flask)
+│   ├── package.json
+│   └── src/
+│       ├── main.jsx
+│       ├── App.jsx          # Router + auth guards
+│       ├── index.css        # Global design system
+│       ├── utils.js         # Shared helpers + colour maps
+│       ├── api/client.js    # Fetch wrapper
+│       ├── context/
+│       │   └── AuthContext.jsx
+│       ├── components/
+│       │   └── Layout.jsx   # Sidebar shell
+│       └── pages/
+│           ├── AuthPage.jsx      # Login / Signup
+│           ├── DashboardPage.jsx # Charts + stats
+│           ├── AssessPage.jsx    # Sliders + gauge
+│           └── HistoryPage.jsx   # Paginated history
+├── models/
+│   ├── psychometric/        # .pkl files from notebook
+│   └── text/                # roberta-model.pt
+└── instance/
+    └── breathe.db           # SQLite DB (auto-created)
+```
+
+---
+
+## Prerequisites
+
+| Requirement | Version |
+|-------------|---------|
+| Python      | ≥ 3.10  || Node.js     | ≥ 18    |
+| npm         | ≥ 9     || pip         | ≥ 23    |
+| Git         | any     |
+| (Optional) NVIDIA GPU + CUDA 12.x | for full RoBERTa inference |
+
+---
+
+## Step-by-Step Setup
+
+### 1 — Clone / open the project
+
+```bash
+cd breathe-app
+```
+
+### 2 — Create a virtual environment
+
+```bash
+python -m venv venv
+
+# macOS / Linux
+source venv/bin/activate
+
+# Windows PowerShell
+venv\Scripts\Activate.ps1
+```
+
+### 3 — Install Python dependencies
+
+```bash
+pip install --upgrade pip
+pip install -r requirements.txt
+```
+
+> **GPU note:** For GPU-accelerated RoBERTa inference, replace the `torch` line in
+> `requirements.txt` with:
+> ```
+> torch==2.2.2+cu121 --index-url https://download.pytorch.org/whl/cu121
+> ```
+
+### 4 — Configure environment variables
+
+```bash
+cp .env.example .env
+```
+
+Open `.env` in any editor and fill in:
+
+| Variable | What to set |
+|----------|------------|
+| `SECRET_KEY` | Long random string (see comment in file) |
+| `DATABASE_URL` | SQLite default works out of the box. For Postgres: `postgresql://user:pass@host/db` |
+| `PSYCHO_MODEL_DIR` | Absolute path to the directory containing your trained psychometric model `.pkl` files (output of `psychometric notebook.ipynb`) |
+| `ROBERTA_CKPT` | Absolute path to `roberta-model.pt` (found in `text-sentiment/`) |
+
+#### Generating the psychometric model artefacts
+
+The psychometric notebook saves these files into `SAVE_DIR` (`/kaggle/working/saved_models` by default):
+
+```
+base_scaler.pkl
+final_scaler.pkl
+le_dict.pkl
+le_target.pkl
+selected_cols.pkl
+poly.pkl
+top_num.pkl
+<model>_best_model.pkl   (e.g. lightgbm_best_model.pkl)
+```
+
+Download them from Kaggle → paste into any local folder → set `PSYCHO_MODEL_DIR` to that folder.
+
+#### Using the RoBERTa checkpoint
+
+The file `text-sentiment/roberta-model.pt` is already in the workspace.
+Set `ROBERTA_CKPT` to its full path:
+
+```
+ROBERTA_CKPT=/Users/you/Downloads/breathe/text-sentiment/roberta-model.pt
+```
+
+> **Demo mode:** If you omit or leave either path blank, the app runs in
+> **Demo mode** — a rule-based heuristic engine. All features of the UI work;
+> only the ML predictions are approximate.
+
+### 5 — Install frontend dependencies
+
+```bash
+cd frontend
+npm install
+cd ..
+```
+
+> If you use **asdf** to manage Node versions, first run:
+> ```bash
+> asdf set nodejs 20.18.1   # or whichever version is installed
+> ```
+
+### 6 — Run the development servers
+
+The app requires **two processes** running at the same time — open two terminal tabs.
+
+**Terminal 1 — Flask API (port 5000)**
+```bash
+# from breathe-app/
+source venv/bin/activate      # Windows: venv\Scripts\Activate.ps1
+python app.py
+```
+
+**Terminal 2 — React dev server (port 5173)**
+```bash
+# from breathe-app/frontend/
+npm run dev
+```
+
+Then open **http://localhost:5173** in your browser.
+
+> The React dev server proxies all `/api/*` requests to Flask on port 5000 automatically — no extra config needed.
+
+The database (`instance/breathe.db`) is created automatically by Flask on first run.
+
+### 7 — (Optional) PostgreSQL setup
+
+```bash
+# Install psycopg2
+pip install psycopg2-binary
+
+# Create database
+createdb breathe
+
+# Set in .env:
+DATABASE_URL=postgresql://postgres:password@localhost:5432/breathe
+```
+
+---
+
+## Running in Production
+
+### 1 — Build the React frontend
+
+```bash
+cd frontend
+npm run build
+cd ..
+```
+
+This outputs a fully static bundle to `frontend/dist/`. Flask automatically detects and serves it — no separate Node process needed in production.
+
+### 2 — Start the Flask server
+
+```bash
+source venv/bin/activate
+gunicorn "app:app" \
+  --workers 2 \
+  --bind 0.0.0.0:5000 \
+  --timeout 120
+```
+
+Set `FLASK_DEBUG=false` and a strong `SECRET_KEY` in `.env` before deploying.
+
+For HTTPS, put Nginx or Caddy in front as a reverse proxy.
+
+---
+
+## API Reference
+
+All endpoints return JSON.
+
+### Auth
+
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/api/auth/signup` | Create account (`username`, `email`, `password`) |
+| POST | `/api/auth/login` | Log in (`email` or `username`, `password`) |
+| POST | `/api/auth/logout` | Log out |
+| GET | `/api/auth/me` | Get current user |
+
+### Assessments
+
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/api/assessments` | Submit assessment (psychometric JSON + text note) |
+| GET | `/api/assessments` | List assessments (paginated: `?page=1&per_page=20`) |
+| GET | `/api/assessments/<id>` | Get single assessment |
+| GET | `/api/assessments/summary` | Dashboard summary + timeline |
+
+#### Example POST body
+
+```json
+{
+  "psychometric": {
+    "Sleep_Duration": 6.5,
+    "Sleep_Quality": 2,
+    "Work_Hours": 11,
+    "Physical_Activity": 0.5,
+    "Screen_Time": 8,
+    "Travel_Time": 1.5,
+    "Social_Interactions": 2,
+    "Caffeine_Intake": 4,
+    "Alcohol_Intake": 0,
+    "Blood_Pressure": 125,
+    "Cholesterol_Level": 200,
+    "Blood_Sugar_Level": 95,
+    "Gender": "Female",
+    "Occupation": "Working Professional",
+    "Smoking_Status": "Non-Smoker",
+    "Diet_Quality": "Average"
+  },
+  "text_note": "I've been feeling overwhelmed with deadlines lately and can't stop overthinking at night."
+}
+```
+
+#### Example response
+
+```json
+{
+  "message": "Assessment saved",
+  "prediction": {
+    "psycho_label": "High",
+    "psycho_score": 0.8241,
+    "text_label": "Stress",
+    "text_score": 0.4512,
+    "fused_label": "Severe",
+    "fused_score": 0.6376,
+    "modality_used": "both"
+  },
+  "assessment": { "id": 7, "created_at": "2026-05-02T14:32:00", ... }
+}
+```
+
+---
+
+## Stress Level Mapping
+
+| Level | Score Range | Colour |
+|-------|-------------|--------|
+| Minimal  | 0.00 – 0.20 | 🟢 Green |
+| Mild     | 0.20 – 0.40 | 🟡 Light green |
+| Moderate | 0.40 – 0.60 | 🟠 Yellow |
+| Severe   | 0.60 – 0.80 | 🔴 Orange |
+| Critical | 0.80 – 1.00 | 🚨 Red |
+
+---
+
+## Troubleshooting
+
+| Problem | Fix |
+|---------|-----|
+| `No version is set for nodejs` | Run `asdf set nodejs 20.18.1` in the `frontend/` directory |
+| React dev server shows blank page | Make sure Flask is running on port 5000 (the Vite proxy needs it) |
+| `CORS` errors in browser console | Ensure `CORS_ORIGINS` in `.env` includes `http://localhost:5173` |
+| `ModuleNotFoundError: torch` | Run `pip install torch` or install the CUDA wheel |
+| `FileNotFoundError: base_scaler.pkl` | Set `PSYCHO_MODEL_DIR` correctly in `.env` |
+| `RoBERTa weights not found` | App falls back to demo mode — set `ROBERTA_CKPT` |
+| `Port 5000 in use` | Change `PORT=5001` in `.env` and update `vite.config.js` proxy target |
+| Database locked (SQLite) | Only one worker at a time with SQLite; use Postgres for multi-worker |
+
+---
+
+## Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Backend | Python 3.10+, Flask 3, SQLAlchemy |
+| Database | SQLite (dev) / PostgreSQL (prod) |
+| Auth | Server-side sessions + Werkzeug password hashing |
+| ML — Tabular | LightGBM / CatBoost / XGBoost / Stacking ensemble |
+| ML — Text | RoBERTa-base fine-tuned on mental-health dataset |
+| ML — Fusion | Weighted probability fusion → 5-class output |
+| Frontend | React 18, Vite 5, React Router v6, Recharts 2 |

app.py

@@ -0,0 +1,14 @@
+from dotenv import load_dotenv
+load_dotenv()
+
+from backend import create_app
+
+app = create_app()
+
+if __name__ == "__main__":
+    import os
+    app.run(
+        host=os.environ.get("HOST", "0.0.0.0"),
+        port=int(os.environ.get("PORT", 5000)),
+        debug=os.environ.get("FLASK_DEBUG", "false").lower() == "true",
+    )

backend/__init__.py

@@ -0,0 +1,90 @@
+import os
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_cors import CORS
+
+db = SQLAlchemy()
+
+# Paths resolved relative to this file's location
+_HERE      = os.path.dirname(__file__)
+_FRONT     = os.path.join(_HERE, "..", "frontend")
+_DIST      = os.path.join(_FRONT, "dist")          # React production build
+_TEMPLATES = os.path.join(_FRONT, "templates")     # Vanilla HTML fallback
+
+
+def create_app(config_override: dict | None = None) -> Flask:
+    # Prefer React build if it exists
+    if os.path.isdir(_DIST):
+        template_folder = _DIST
+        static_folder   = os.path.join(_DIST, "assets")
+        static_url_path = "/assets"
+    else:
+        template_folder = _TEMPLATES
+        static_folder   = os.path.join(_FRONT, "static")
+        static_url_path = "/static"
+
+    app = Flask(
+        __name__,
+        template_folder=template_folder,
+        static_folder=static_folder,
+        static_url_path=static_url_path,
+    )
+
+    # ── Configuration ────────────────────────────────────────────────────────
+    app.config["SECRET_KEY"]                 = os.environ.get("SECRET_KEY", "change-me-in-production")
+    app.config["SQLALCHEMY_DATABASE_URI"]    = os.environ.get(
+        "DATABASE_URL", "sqlite:///breathe.db"
+    )
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+    app.config["SESSION_COOKIE_HTTPONLY"]    = True
+    app.config["SESSION_COOKIE_SAMESITE"]    = "Lax"
+
+    if config_override:
+        app.config.update(config_override)
+
+    # ── Extensions ───────────────────────────────────────────────────────────
+    db.init_app(app)
+    default_origins = "http://localhost:5173,http://127.0.0.1:5173"
+    CORS(app, supports_credentials=True,
+         origins=os.environ.get("CORS_ORIGINS", default_origins).split(","))
+
+    # ── Blueprints ───────────────────────────────────────────────────────────
+    from .routes.auth        import auth_bp
+    from .routes.assessments import assess_bp
+    from .routes.profile     import profile_bp
+    from .routes.gratitude   import gratitude_bp
+    app.register_blueprint(auth_bp)
+    app.register_blueprint(assess_bp)
+    app.register_blueprint(profile_bp)
+    app.register_blueprint(gratitude_bp)
+
+    # ── Serve SPA ────────────────────────────────────────────────────────────
+    from flask import send_from_directory
+
+    _dist_or_tmpl = _DIST if os.path.isdir(_DIST) else _TEMPLATES
+
+    @app.route("/")
+    def index():
+        return send_from_directory(_dist_or_tmpl, "index.html")
+
+    @app.route("/<path:path>")
+    def catch_all(path):
+        # Serve any real file that lives inside the dist/template dir
+        target = os.path.join(_dist_or_tmpl, path)
+        if os.path.isfile(target):
+            return send_from_directory(_dist_or_tmpl, path)
+        # SPA fallback
+        return send_from_directory(_dist_or_tmpl, "index.html")
+
+    # ── Create tables ────────────────────────────────────────────────────────
+    with app.app_context():
+        db.create_all()
+
+    # ── ML model loading ─────────────────────────────────────────────────────
+    from .ml.ml_engine import init_models
+    init_models(
+        psycho_model_dir=os.environ.get("PSYCHO_MODEL_DIR", ""),
+        roberta_ckpt    =os.environ.get("ROBERTA_CKPT", ""),
+    )
+
+    return app

backend/ml/__init__.py

@@ -0,0 +1,3 @@
+from .ml_engine import init_models, predict, FUSED_LABELS, DEMO_MODE
+
+__all__ = ["init_models", "predict", "FUSED_LABELS", "DEMO_MODE"]

backend/ml/ml_engine.py

@@ -0,0 +1,381 @@
+"""
+ml_engine.py
+────────────
+Wraps the psychometric tabular model and the RoBERTa text model into a
+single predict() function that returns a fused 5-class stress result.
+
+On first import the models are loaded once and cached globally.
+If a model file is not found the module operates in DEMO mode, returning
+plausible random predictions so the web app can run without GPU weights.
+"""
+
+from __future__ import annotations
+
+import os
+import re
+import logging
+import warnings
+import numpy as np
+import pandas as pd
+
+warnings.filterwarnings("ignore")
+logger = logging.getLogger(__name__)
+
+# ── Label architecture ───────────────────────────────────────────────────────
+PSYCHO_SCORE = {"High": 1.00, "Medium": 0.50, "Low": 0.00}
+
+TEXT_SCORE = {
+    "Normal": 0.00,
+    "Stress": 0.45,
+    "Personality disorder": 0.60,
+    "Bipolar": 0.65,
+    "Anxiety": 0.70,
+    "Depression": 0.80,
+    "Suicidal": 1.00,
+}
+
+FUSED_BINS   = [0.0, 0.2, 0.4, 0.6, 0.8, 1.001]
+FUSED_LABELS = ["Minimal", "Mild", "Moderate", "Severe", "Critical"]
+TEXT_CLASSES = sorted(TEXT_SCORE.keys())
+PSYCHO_CLASSES_DEFAULT = ["High", "Low", "Medium"]   # sorted order as LabelEncoder would produce
+
+
+def _score_to_fused(score: float) -> str:
+    for lo, hi, lbl in zip(FUSED_BINS[:-1], FUSED_BINS[1:], FUSED_LABELS):
+        if lo <= score < hi:
+            return lbl
+    return FUSED_LABELS[-1]
+
+
+# ── Model artefacts (lazy-loaded) ────────────────────────────────────────────
+_psycho_model   = None
+_base_scaler    = None
+_final_scaler   = None
+_le_dict        = None
+_le_target      = None
+_selected_cols  = None
+_poly           = None
+_top_num        = None
+_loaded_model_name = ""
+
+_roberta_model  = None
+_tokenizer      = None
+
+DEMO_MODE = False          # flips to True if weights are missing
+
+
+def _load_psycho(model_dir: str) -> bool:
+    global _psycho_model, _base_scaler, _final_scaler, _le_dict, _le_target
+    global _selected_cols, _poly, _top_num, _loaded_model_name
+
+    try:
+        import joblib
+        _base_scaler   = joblib.load(os.path.join(model_dir, "base_scaler.pkl"))
+        _final_scaler  = joblib.load(os.path.join(model_dir, "final_scaler.pkl"))
+        _le_dict       = joblib.load(os.path.join(model_dir, "le_dict.pkl"))
+        _le_target     = joblib.load(os.path.join(model_dir, "le_target.pkl"))
+        _selected_cols = joblib.load(os.path.join(model_dir, "selected_cols.pkl"))
+        _poly          = joblib.load(os.path.join(model_dir, "poly.pkl"))
+        _top_num       = joblib.load(os.path.join(model_dir, "top_num.pkl"))
+
+        for candidate in [
+            "stacking_ensemble_best_model.pkl",
+            "lightgbm_best_model.pkl",
+            "catboost_best_model.pkl",
+            "xgboost_best_model.pkl",
+            "random_forest_best_model.pkl",
+            "mlp_sklearn_best_model.pkl",
+        ]:
+            p = os.path.join(model_dir, candidate)
+            if os.path.exists(p):
+                _psycho_model      = joblib.load(p)
+                _loaded_model_name = candidate
+                logger.info("Loaded psychometric model: %s", candidate)
+                return True
+        logger.warning("Psychometric model pkl not found in %s", model_dir)
+    except Exception as exc:
+        logger.warning("Failed to load psychometric model: %s", exc)
+    return False
+
+
+def _load_roberta(ckpt_path: str) -> bool:
+    global _roberta_model, _tokenizer
+
+    try:
+        import torch
+        import torch.nn as nn
+        from transformers import AutoTokenizer, AutoModel
+
+        MODEL_NAME = "roberta-base"
+
+        class RobertaClassifier(nn.Module):
+            def __init__(self):
+                super().__init__()
+                self.roberta = AutoModel.from_pretrained(MODEL_NAME)
+                self.dropout = nn.Dropout(0.3)
+                self.fc      = nn.Linear(self.roberta.config.hidden_size, 7)
+                for p in self.roberta.parameters():
+                    p.requires_grad = False
+                for layer in self.roberta.encoder.layer[-3:]:
+                    for p in layer.parameters():
+                        p.requires_grad = True
+
+            def forward(self, input_ids, attention_mask):
+                out     = self.roberta(input_ids=input_ids,
+                                       attention_mask=attention_mask)
+                cls_out = out.last_hidden_state[:, 0]
+                return self.fc(self.dropout(cls_out))
+
+        device = "cuda" if __import__("torch").cuda.is_available() else "cpu"
+        model  = RobertaClassifier().to(device)
+        model.load_state_dict(
+            __import__("torch").load(ckpt_path, map_location=device)
+        )
+        model.eval()
+        _roberta_model = model
+        _tokenizer     = AutoTokenizer.from_pretrained(MODEL_NAME)
+        logger.info("Loaded RoBERTa model from %s", ckpt_path)
+        return True
+    except Exception as exc:
+        logger.warning("Failed to load RoBERTa model: %s", exc)
+    return False
+
+
+def init_models(psycho_model_dir: str, roberta_ckpt: str) -> None:
+    global DEMO_MODE
+    # Resolve relative paths from the project root (where app.py lives)
+    _root = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    if psycho_model_dir and not os.path.isabs(psycho_model_dir):
+        psycho_model_dir = os.path.join(_root, psycho_model_dir)
+    if roberta_ckpt and not os.path.isabs(roberta_ckpt):
+        roberta_ckpt = os.path.join(_root, roberta_ckpt)
+    ok_p = _load_psycho(psycho_model_dir)
+    ok_r = _load_roberta(roberta_ckpt)
+    if not ok_p and not ok_r:
+        DEMO_MODE = True
+        logger.warning("Both models unavailable — running in DEMO mode.")
+    elif not ok_p:
+        logger.warning("Psychometric model unavailable — text-only mode.")
+    elif not ok_r:
+        logger.warning("RoBERTa model unavailable — psychometric-only mode.")
+
+
+# ── Feature engineering (mirrors notebook) ──────────────────────────────────
+
+def _add_interactions(X: pd.DataFrame) -> pd.DataFrame:
+    X = X.copy()
+    if {"Sleep_Duration", "Sleep_Quality"}.issubset(X.columns):
+        X["sleep_score"]         = X["Sleep_Duration"] * X["Sleep_Quality"]
+    if {"Sleep_Quality", "Screen_Time"}.issubset(X.columns):
+        X["screen_sleep_ratio"]  = X["Screen_Time"] / (X["Sleep_Quality"] + 1e-6)
+    if {"Physical_Activity", "Work_Hours"}.issubset(X.columns):
+        X["activity_work_ratio"] = X["Physical_Activity"] / (X["Work_Hours"] + 1e-6)
+    if {"Social_Interactions", "Travel_Time"}.issubset(X.columns):
+        X["social_travel"]       = X["Social_Interactions"] * X["Travel_Time"]
+    if {"Work_Hours", "Travel_Time", "Screen_Time"}.issubset(X.columns):
+        X["daily_burden"]        = X["Work_Hours"] + X["Travel_Time"] + X["Screen_Time"]
+    if {"Blood_Pressure", "Cholesterol_Level", "Blood_Sugar_Level"}.issubset(X.columns):
+        X["cardio_risk"]         = (X["Blood_Pressure"] + X["Cholesterol_Level"]
+                                    + X["Blood_Sugar_Level"])
+    if {"Caffeine_Intake", "Alcohol_Intake"}.issubset(X.columns):
+        X["stimulant_load"]      = X["Caffeine_Intake"] + 2 * X["Alcohol_Intake"]
+    if {"Physical_Activity", "Sleep_Duration"}.issubset(X.columns):
+        X["recovery_index"]      = X["Physical_Activity"] + X["Sleep_Duration"]
+    return X
+
+
+def _preprocess_psycho(raw_df: pd.DataFrame) -> np.ndarray:
+    """Returns proba array (N, 3) in le_target.classes_ order."""
+    df = raw_df.copy()
+    if "Stress_Detection" in df.columns:
+        df = df.drop(columns=["Stress_Detection"])
+
+    for col, le in _le_dict.items():
+        if col in df.columns:
+            df[col] = le.transform(df[col])
+
+    if hasattr(_base_scaler, "feature_names_in_"):
+        for c in _base_scaler.feature_names_in_:
+            if c not in df.columns:
+                df[c] = 0.0
+        df = df[_base_scaler.feature_names_in_]
+
+    df_inter = _add_interactions(df)
+    poly_arr = _poly.transform(df_inter[_top_num])
+    poly_cols = [f"poly_{i}" for i in range(poly_arr.shape[1])]
+    df_poly   = pd.concat(
+        [df_inter.reset_index(drop=True),
+         pd.DataFrame(poly_arr, columns=poly_cols)], axis=1
+    )
+    df_sel = df_poly[_selected_cols].copy()
+
+    needs_scale = {"mlp_sklearn_best_model.pkl", "svm-rbf_best_model.pkl",
+                   "logreg_best_model.pkl"}
+    if _loaded_model_name in needs_scale:
+        df_sel = pd.DataFrame(
+            _final_scaler.transform(df_sel), columns=_selected_cols
+        )
+
+    return _psycho_model.predict_proba(df_sel)
+
+
+def _get_text_proba(text: str) -> np.ndarray:
+    """Returns proba array (7,) in TEXT_CLASSES order."""
+    import torch
+    import torch.nn.functional as F
+
+    device = next(_roberta_model.parameters()).device
+    enc = _tokenizer(
+        re.sub(r"[^a-zA-Z\s]", "", text.lower()),
+        padding="max_length", truncation=True,
+        max_length=128, return_tensors="pt",
+    )
+    ids  = enc["input_ids"].to(device)
+    mask = enc["attention_mask"].to(device)
+    with torch.no_grad():
+        logits = _roberta_model(ids, mask)
+    return F.softmax(logits, dim=-1).cpu().numpy()[0]
+
+
+# ── Public inference entry point ─────────────────────────────────────────────
+
+def predict(
+    psychometric_row: dict | None = None,
+    text_note: str | None         = None,
+    psycho_weight: float          = 0.5,
+) -> dict:
+    """
+    Run stress prediction.
+
+    Parameters
+    ----------
+    psychometric_row : dict mapping feature-name → value (or None)
+    text_note        : raw text string (or None)
+    psycho_weight    : weight given to psychometric score [0..1]
+
+    Returns
+    -------
+    dict with keys:
+        psycho_label, psycho_score, text_label, text_score,
+        fused_label, fused_score, modality_used
+    """
+    if DEMO_MODE:
+        return _demo_predict(psychometric_row, text_note)
+
+    psycho_score = None
+    psycho_label = None
+    text_score   = None
+    text_label   = None
+
+    # ── Psychometric branch ─────────────────────────────────────────────────
+    if psychometric_row and _psycho_model is not None:
+        try:
+            df_row = pd.DataFrame([psychometric_row])
+            proba  = _preprocess_psycho(df_row)[0]          # shape (3,)
+            classes = list(_le_target.classes_)
+            psycho_score = sum(PSYCHO_SCORE[c] * p
+                               for c, p in zip(classes, proba))
+            psycho_label = classes[int(np.argmax(proba))]
+        except Exception as exc:
+            logger.error("Psychometric inference error: %s", exc)
+
+    # ── Text branch ─────────────────────────────────────────────────────────
+    if text_note and text_note.strip() and _roberta_model is not None:
+        try:
+            proba      = _get_text_proba(text_note)          # shape (7,)
+            text_score = sum(TEXT_SCORE[c] * p
+                             for c, p in zip(TEXT_CLASSES, proba))
+            text_label = TEXT_CLASSES[int(np.argmax(proba))]
+        except Exception as exc:
+            logger.error("Text inference error: %s", exc)
+
+    # ── Fusion ───────────────────────────────────────────────────────────────
+    tw = 1.0 - psycho_weight
+
+    if psycho_score is not None and text_score is not None:
+        fused_score   = psycho_weight * psycho_score + tw * text_score
+        modality_used = "both"
+    elif psycho_score is not None:
+        fused_score   = float(psycho_score)
+        modality_used = "psycho"
+    elif text_score is not None:
+        fused_score   = float(text_score)
+        modality_used = "text"
+    else:
+        fused_score   = 0.0
+        modality_used = "none"
+
+    fused_label = _score_to_fused(fused_score)
+
+    return {
+        "psycho_label":  psycho_label,
+        "psycho_score":  round(psycho_score, 4) if psycho_score is not None else None,
+        "text_label":    text_label,
+        "text_score":    round(text_score, 4) if text_score is not None else None,
+        "fused_label":   fused_label,
+        "fused_score":   round(fused_score, 4),
+        "modality_used": modality_used,
+    }
+
+
+# ── Demo / fallback (no weights needed) ─────────────────────────────────────
+
+def _demo_predict(psychometric_row, text_note) -> dict:
+    """Rule-based heuristic demo prediction — no ML weights required."""
+    score = 0.3   # baseline: mild
+
+    if psychometric_row:
+        sh  = float(psychometric_row.get("Sleep_Duration", 7))
+        pa  = float(psychometric_row.get("Physical_Activity", 3))
+        wh  = float(psychometric_row.get("Work_Hours", 8))
+        caf = float(psychometric_row.get("Caffeine_Intake", 2))
+        alc = float(psychometric_row.get("Alcohol_Intake", 0))
+        slq = float(psychometric_row.get("Sleep_Quality", 3))
+
+        score += max(0, (8 - sh) * 0.04)          # less sleep → more stress
+        score += max(0, (wh - 8) * 0.03)          # overwork
+        score -= pa * 0.02                         # activity lowers stress
+        score += caf * 0.01
+        score += alc * 0.02
+        score -= slq * 0.015
+        score = float(np.clip(score, 0, 1))
+
+    psycho_label = ("High" if score >= 0.6
+                    else "Medium" if score >= 0.3 else "Low")
+
+    text_score  = None
+    text_label  = None
+
+    KEYWORDS = {
+        "suicid": 0.95, "depress": 0.78, "anxiet": 0.68,
+        "panic": 0.65, "overwhelm": 0.55, "stress": 0.45,
+        "tired": 0.40, "exhaust": 0.50, "happy": 0.05, "fine": 0.1,
+    }
+    if text_note and text_note.strip():
+        t = text_note.lower()
+        ts = 0.3
+        for kw, s in KEYWORDS.items():
+            if kw in t:
+                ts = max(ts, s)
+        text_score = float(np.clip(ts, 0, 1))
+        text_label = TEXT_CLASSES[min(
+            int(text_score / (1.0 / 7)),
+            len(TEXT_CLASSES) - 1
+        )]
+
+    if text_score is not None:
+        fused = 0.5 * score + 0.5 * text_score
+        modality = "both"
+    else:
+        fused = score
+        modality = "psycho" if psychometric_row else "none"
+
+    return {
+        "psycho_label":  psycho_label,
+        "psycho_score":  round(score, 4),
+        "text_label":    text_label,
+        "text_score":    round(text_score, 4) if text_score is not None else None,
+        "fused_label":   _score_to_fused(fused),
+        "fused_score":   round(fused, 4),
+        "modality_used": modality,
+    }

backend/routes/__init__.py

@@ -0,0 +1,4 @@
+from .auth import auth_bp
+from .assessments import assess_bp
+
+__all__ = ["auth_bp", "assess_bp"]

backend/routes/assessments.py

@@ -0,0 +1,131 @@
+from flask import Blueprint, request, jsonify, session
+from ..models.assessment import Assessment
+from .. import db
+from ..ml.ml_engine import predict
+
+assess_bp = Blueprint("assessments", __name__, url_prefix="/api/assessments")
+
+
+def _require_auth():
+    uid = session.get("user_id")
+    if not uid:
+        return None, (jsonify({"error": "Not authenticated"}), 401)
+    return uid, None
+
+
+@assess_bp.route("", methods=["POST"])
+def create_assessment():
+    uid, err = _require_auth()
+    if err:
+        return err
+
+    data             = request.get_json(silent=True) or {}
+    psychometric_row = data.get("psychometric") or None
+    text_note        = (data.get("text_note") or "").strip() or None
+
+    if not psychometric_row and not text_note:
+        return jsonify({"error": "Provide at least psychometric data or a text note"}), 400
+
+    result = predict(
+        psychometric_row=psychometric_row,
+        text_note=text_note,
+    )
+
+    assessment = Assessment(
+        user_id          = uid,
+        psychometric_data = psychometric_row,
+        text_note        = text_note,
+        psycho_label     = result["psycho_label"],
+        psycho_score     = result["psycho_score"],
+        text_label       = result["text_label"],
+        text_score       = result["text_score"],
+        fused_label      = result["fused_label"],
+        fused_score      = result["fused_score"],
+        modality_used    = result["modality_used"],
+    )
+    db.session.add(assessment)
+    db.session.commit()
+
+    return jsonify({
+        "message":    "Assessment saved",
+        "assessment": assessment.to_dict(),
+        "prediction": result,
+    }), 201
+
+
+@assess_bp.route("", methods=["GET"])
+def list_assessments():
+    uid, err = _require_auth()
+    if err:
+        return err
+
+    page     = max(1, request.args.get("page", 1, type=int))
+    per_page = min(50, request.args.get("per_page", 20, type=int))
+
+    q = (
+        Assessment.query
+        .filter_by(user_id=uid)
+        .order_by(Assessment.created_at.desc())
+        .paginate(page=page, per_page=per_page, error_out=False)
+    )
+
+    return jsonify({
+        "assessments": [a.to_dict() for a in q.items],
+        "total":       q.total,
+        "page":        q.page,
+        "pages":       q.pages,
+    }), 200
+
+
+@assess_bp.route("/<int:aid>", methods=["GET"])
+def get_assessment(aid: int):
+    uid, err = _require_auth()
+    if err:
+        return err
+
+    a = Assessment.query.filter_by(id=aid, user_id=uid).first_or_404()
+    return jsonify({"assessment": a.to_dict()}), 200
+
+
+@assess_bp.route("/summary", methods=["GET"])
+def summary():
+    """Aggregated stats for the dashboard."""
+    uid, err = _require_auth()
+    if err:
+        return err
+
+    rows = (
+        Assessment.query
+        .filter_by(user_id=uid)
+        .order_by(Assessment.created_at.asc())
+        .all()
+    )
+
+    if not rows:
+        return jsonify({"summary": {}, "timeline": []}), 200
+
+    scores  = [r.fused_score for r in rows if r.fused_score is not None]
+    labels  = [r.fused_label for r in rows if r.fused_label]
+
+    from collections import Counter
+    label_counts = Counter(labels)
+
+    timeline = [
+        {
+            "date":        r.created_at.strftime("%Y-%m-%d %H:%M"),
+            "fused_score": r.fused_score,
+            "fused_label": r.fused_label,
+            "id":          r.id,
+        }
+        for r in rows
+    ]
+
+    summary_data = {
+        "total_assessments": len(rows),
+        "avg_score":         round(sum(scores) / len(scores), 4) if scores else 0,
+        "latest_label":      rows[-1].fused_label if rows else None,
+        "latest_score":      rows[-1].fused_score if rows else None,
+        "label_distribution": dict(label_counts),
+    }
+
+    return jsonify({"summary": summary_data, "timeline": timeline}), 200

backend/routes/auth.py

@@ -0,0 +1,69 @@
+from flask import Blueprint, request, jsonify, session
+from ..models.user import User
+from .. import db
+
+auth_bp = Blueprint("auth", __name__, url_prefix="/api/auth")
+
+
+@auth_bp.route("/signup", methods=["POST"])
+def signup():
+    data = request.get_json(silent=True) or {}
+    username = (data.get("username") or "").strip()
+    email    = (data.get("email") or "").strip().lower()
+    password = data.get("password") or ""
+
+    if not username or not email or not password:
+        return jsonify({"error": "username, email and password are required"}), 400
+
+    if len(password) < 8:
+        return jsonify({"error": "Password must be at least 8 characters"}), 400
+
+    if User.query.filter(
+        (User.username == username) | (User.email == email)
+    ).first():
+        return jsonify({"error": "Username or email already exists"}), 409
+
+    user = User(username=username, email=email)
+    user.set_password(password)
+    db.session.add(user)
+    db.session.commit()
+
+    session["user_id"] = user.id
+    return jsonify({"message": "Account created", "user": user.to_dict()}), 201
+
+
+@auth_bp.route("/login", methods=["POST"])
+def login():
+    data     = request.get_json(silent=True) or {}
+    identity = (data.get("email") or data.get("username") or "").strip()
+    password = data.get("password") or ""
+
+    if not identity or not password:
+        return jsonify({"error": "Email/username and password are required"}), 400
+
+    user = User.query.filter(
+        (User.email == identity.lower()) | (User.username == identity)
+    ).first()
+
+    if not user or not user.check_password(password):
+        return jsonify({"error": "Invalid credentials"}), 401
+
+    session["user_id"] = user.id
+    return jsonify({"message": "Logged in", "user": user.to_dict()}), 200
+
+
+@auth_bp.route("/logout", methods=["POST"])
+def logout():
+    session.pop("user_id", None)
+    return jsonify({"message": "Logged out"}), 200
+
+
+@auth_bp.route("/me", methods=["GET"])
+def me():
+    uid = session.get("user_id")
+    if not uid:
+        return jsonify({"error": "Not authenticated"}), 401
+    user = User.query.get(uid)
+    if not user:
+        return jsonify({"error": "User not found"}), 404
+    return jsonify({"user": user.to_dict()}), 200

backend/routes/gratitude.py

@@ -0,0 +1,75 @@
+from flask import Blueprint, request, jsonify, session
+from ..models.gratitude import GratitudeEntry
+from .. import db
+
+gratitude_bp = Blueprint("gratitude", __name__, url_prefix="/api/gratitude")
+
+_MAX_CONTENT = 2000
+_PER_PAGE    = 10
+
+
+def _uid():
+    return session.get("user_id")
+
+
+@gratitude_bp.route("", methods=["POST"])
+def create_entry():
+    uid = _uid()
+    if not uid:
+        return jsonify({"error": "Not authenticated"}), 401
+
+    data    = request.get_json(silent=True) or {}
+    content = (data.get("content") or "").strip()[:_MAX_CONTENT]
+    mood    = (data.get("mood") or "").strip()[:32] or None
+    items   = data.get("items")
+
+    if not content and not items:
+        return jsonify({"error": "content or items required"}), 400
+
+    # Sanitise items list
+    if items is not None:
+        if not isinstance(items, list):
+            return jsonify({"error": "items must be a list"}), 400
+        items = [str(i).strip()[:300] for i in items if str(i).strip()][:10]
+
+    entry = GratitudeEntry(user_id=uid, content=content, mood=mood, items=items)
+    db.session.add(entry)
+    db.session.commit()
+    return jsonify({"message": "Entry saved", "entry": entry.to_dict()}), 201
+
+
+@gratitude_bp.route("", methods=["GET"])
+def list_entries():
+    uid = _uid()
+    if not uid:
+        return jsonify({"error": "Not authenticated"}), 401
+
+    page = max(1, int(request.args.get("page", 1)))
+    q = (GratitudeEntry.query
+         .filter_by(user_id=uid)
+         .order_by(GratitudeEntry.created_at.desc())
+         .paginate(page=page, per_page=_PER_PAGE, error_out=False))
+
+    return jsonify({
+        "entries":   [e.to_dict() for e in q.items],
+        "total":     q.total,
+        "page":      page,
+        "pages":     q.pages,
+        "has_next":  q.has_next,
+        "has_prev":  q.has_prev,
+    }), 200
+
+
+@gratitude_bp.route("/<int:entry_id>", methods=["DELETE"])
+def delete_entry(entry_id):
+    uid = _uid()
+    if not uid:
+        return jsonify({"error": "Not authenticated"}), 401
+
+    entry = GratitudeEntry.query.filter_by(id=entry_id, user_id=uid).first()
+    if not entry:
+        return jsonify({"error": "Entry not found"}), 404
+
+    db.session.delete(entry)
+    db.session.commit()
+    return jsonify({"message": "Deleted"}), 200

backend/routes/profile.py

@@ -0,0 +1,125 @@
+import base64
+import imghdr
+from flask import Blueprint, request, jsonify, session
+from ..models.user import User
+from .. import db
+
+profile_bp = Blueprint("profile", __name__, url_prefix="/api/profile")
+
+_MAX_AVATAR_BYTES = 2 * 1024 * 1024   # 2 MB limit
+
+ALLOWED_GENDERS = {"male", "female", "non-binary", "prefer not to say", "other"}
+ALLOWED_WORKING = {
+    "employed full-time",
+    "employed part-time",
+    "self-employed",
+    "student",
+    "unemployed",
+    "homemaker",
+    "retired",
+    "prefer not to say",
+}
+
+
+def _current_user():
+    uid = session.get("user_id")
+    if not uid:
+        return None
+    return User.query.get(uid)
+
+
+@profile_bp.route("", methods=["GET"])
+def get_profile():
+    user = _current_user()
+    if not user:
+        return jsonify({"error": "Not authenticated"}), 401
+    return jsonify({"profile": user.to_dict()}), 200
+
+
+@profile_bp.route("", methods=["PUT"])
+def update_profile():
+    user = _current_user()
+    if not user:
+        return jsonify({"error": "Not authenticated"}), 401
+
+    data = request.get_json(silent=True) or {}
+
+    # bio
+    bio = data.get("bio")
+    if bio is not None:
+        bio = str(bio).strip()[:500]
+        user.bio = bio or None
+
+    # gender
+    gender = data.get("gender")
+    if gender is not None:
+        gender = str(gender).strip().lower()
+        if gender and gender not in ALLOWED_GENDERS:
+            return jsonify({"error": "Invalid gender value"}), 400
+        user.gender = gender or None
+
+    # working_status
+    ws = data.get("working_status")
+    if ws is not None:
+        ws = str(ws).strip().lower()
+        if ws and ws not in ALLOWED_WORKING:
+            return jsonify({"error": "Invalid working status"}), 400
+        user.working_status = ws or None
+
+    # dob  (YYYY-MM-DD)
+    dob = data.get("dob")
+    if dob is not None:
+        dob = str(dob).strip()
+        if dob:
+            # basic format validation — no future dates, sensible range
+            import re
+            if not re.match(r"^\d{4}-\d{2}-\d{2}$", dob):
+                return jsonify({"error": "dob must be YYYY-MM-DD"}), 400
+        user.dob = dob or None
+
+    # is_anonymous
+    anon = data.get("is_anonymous")
+    if anon is not None:
+        user.is_anonymous = bool(anon)
+
+    db.session.commit()
+    return jsonify({"message": "Profile updated", "profile": user.to_dict()}), 200
+
+
+@profile_bp.route("/avatar", methods=["POST"])
+def upload_avatar():
+    """Accept a base64 data-url in JSON body: { "avatar": "data:image/png;base64,..." }"""
+    user = _current_user()
+    if not user:
+        return jsonify({"error": "Not authenticated"}), 401
+
+    data = request.get_json(silent=True) or {}
+    avatar = data.get("avatar", "")
+
+    if not avatar:
+        user.avatar = None
+        db.session.commit()
+        return jsonify({"message": "Avatar removed"}), 200
+
+    # Validate it is a data-url
+    if not avatar.startswith("data:image/"):
+        return jsonify({"error": "avatar must be an image data-url"}), 400
+
+    # Check size (base64 overhead ~33 %)
+    try:
+        header, b64data = avatar.split(",", 1)
+        raw = base64.b64decode(b64data)
+    except Exception:
+        return jsonify({"error": "Invalid base64 data"}), 400
+
+    if len(raw) > _MAX_AVATAR_BYTES:
+        return jsonify({"error": "Image too large (max 2 MB)"}), 413
+
+    # Validate actual image type
+    img_type = imghdr.what(None, h=raw)
+    if img_type not in ("jpeg", "png", "gif", "webp"):
+        return jsonify({"error": "Unsupported image format"}), 415
+
+    user.avatar = avatar
+    db.session.commit()
+    return jsonify({"message": "Avatar updated", "avatar": user.avatar}), 200

frontend/.tool-versions

@@ -0,0 +1 @@
+nodejs 20.18.1

frontend/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BREATHE — Stress Intelligence</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package-lock.json

@@ -0,0 +1,2097 @@
+{
+  "name": "breathe-frontend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "breathe-frontend",
+      "version": "1.0.0",
+      "dependencies": {
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
+        "react-router-dom": "^6.23.0",
+        "recharts": "^2.12.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-react": "^4.7.0",
+        "vite": "^5.4.21"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.3.tgz",
+      "integrity": "sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
+      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz",
+      "integrity": "sha512-dnlp69efPPg6Uaw2dVqzWRfAWRnYVb1XJ8CyyhIbZeaq4CA5/mLeZ1IEt9QqQxmbdvagjLIm2ZL8BxXv5lH4Yw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.2.tgz",
+      "integrity": "sha512-OqZTwDRDchGRHHm/hwLOL7uVPB9aUvI0am/eQuWMNyFHf5PSEQmyEeYYheA0EPPKUO/l0uigCp+iaTjoLjVoHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.2.tgz",
+      "integrity": "sha512-UwRE7CGpvSVEQS8gUMBe1uADWjNnVgP3Iusyda1nSRwNDCsRjnGc7w6El6WLQsXmZTbLZx9cecegumcitNfpmA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.2.tgz",
+      "integrity": "sha512-gjEtURKLCC5VXm1I+2i1u9OhxFsKAQJKTVB8WvDAHF+oZlq0GTVFOlTlO1q3AlCTE/DF32c16ESvfgqR7343/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.2.tgz",
+      "integrity": "sha512-Bcl6CYDeAgE70cqZaMojOi/eK63h5Me97ZqAQoh77VPjMysA/4ORQBRGo3rRy45x4MzVlU9uZxs8Uwy7ZaKnBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.2.tgz",
+      "integrity": "sha512-LU+TPda3mAE2QB0/Hp5VyeKJivpC6+tlOXd1VMoXV/YFMvk/MNk5iXeBfB4MQGRWyOYVJ01625vjkr0Az98OJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.2.tgz",
+      "integrity": "sha512-2QxQrM+KQ7DAW4o22j+XZ6RKdxjLD7BOWTP0Bv0tmjdyhXSsr2Ul1oJDQqh9Zf5qOwTuTc7Ek83mOFaKnodPjg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.2.tgz",
+      "integrity": "sha512-TbziEu2DVsTEOPif2mKWkMeDMLoYjx95oESa9fkQQK7r/Orta0gnkcDpzwufEcAO2BLBsD7mZkXGFqEdMRRwfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.2.tgz",
+      "integrity": "sha512-bO/rVDiDUuM2YfuCUwZ1t1cP+/yqjqz+Xf2VtkdppefuOFS2OSeAfgafaHNkFn0t02hEyXngZkxtGqXcXwO8Rg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.2.tgz",
+      "integrity": "sha512-hr26p7e93Rl0Za+JwW7EAnwAvKkehh12BU1Llm9Ykiibg4uIr2rbpxG9WCf56GuvidlTG9KiiQT/TXT1yAWxTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.2.tgz",
+      "integrity": "sha512-pOjB/uSIyDt+ow3k/RcLvUAOGpysT2phDn7TTUB3n75SlIgZzM6NKAqlErPhoFU+npgY3/n+2HYIQVbF70P9/A==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.2.tgz",
+      "integrity": "sha512-2/w+q8jszv9Ww1c+6uJT3OwqhdmGP2/4T17cu8WuwyUuuaCDDJ2ojdyYwZzCxx0GcsZBhzi3HmH+J5pZNXnd+Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.2.tgz",
+      "integrity": "sha512-11+aL5vKheYgczxtPVVRhdptAM2H7fcDR5Gw4/bTcteuZBlH4oP9f5s9zYO9aGZvoGeBpqXI/9TZZihZ609wKw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.2.tgz",
+      "integrity": "sha512-i16fokAGK46IVZuV8LIIwMdtqhin9hfYkCh8pf8iC3QU3LpwL+1FSFGej+O7l3E/AoknL6Dclh2oTdnRMpTzFQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.2.tgz",
+      "integrity": "sha512-49FkKS6RGQoriDSK/6E2GkAsAuU5kETFCh7pG4yD/ylj9rKhTmO3elsnmBvRD4PgJPds5W2PkhC82aVwmUcJ7A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.2.tgz",
+      "integrity": "sha512-mjYNkHPfGpUR00DuM1ZZIgs64Hpf4bWcz9Z41+4Q+pgDx73UwWdAYyf6EG/lRFldmdHHzgrYyge5akFUW0D3mQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.2.tgz",
+      "integrity": "sha512-ALyvJz965BQk8E9Al/JDKKDLH2kfKFLTGMlgkAbbYtZuJt9LU8DW3ZoDMCtQpXAltZxwBHevXz5u+gf0yA0YoA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.2.tgz",
+      "integrity": "sha512-UQjrkIdWrKI626Du8lCQ6MJp/6V1LAo2bOK9OTu4mSn8GGXIkPXk/Vsp4bLHCd9Z9Iz2OTEaokUE90VweJgIYQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.2.tgz",
+      "integrity": "sha512-bTsRGj6VlSdn/XD4CGyzMnzaBs9bsRxy79eTqTCBsA8TMIEky7qg48aPkvJvFe1HyzQ5oMZdg7AnVlWQSKLTnw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.2.tgz",
+      "integrity": "sha512-6d4Z3534xitaA1FcMWP7mQPq5zGwBmGbhphh2DwaA1aNIXUu3KTOfwrWpbwI4/Gr0uANo7NTtaykFyO2hPuFLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.2.tgz",
+      "integrity": "sha512-NetAg5iO2uN7eB8zE5qrZ3CSil+7IJt4WDFLcC75Ymywq1VZVD6qJ6EvNLjZ3rEm6gB7XW5JdT60c6MN35Z85Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.2.tgz",
+      "integrity": "sha512-NCYhOotpgWZ5kdxCZsv6Iudx0wX8980Q/oW4pNFNihpBKsDbEA1zpkfxJGC0yugsUuyDZ7gL37dbzwhR0VI7pQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.2.tgz",
+      "integrity": "sha512-RXsaOqXxfoUBQoOgvmmijVxJnW2IGB0eoMO7F8FAjaj0UTywUO/luSqimWBJn04WNgUkeNhh7fs7pESXajWmkg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.2.tgz",
+      "integrity": "sha512-qdAzEULD+/hzObedtmV6iBpdL5TIbKVztGiK7O3/KYSf+HIzU257+MX1EXJcyIiDbMAqmbwaufcYPvyRryeZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.2.tgz",
+      "integrity": "sha512-Nd/SgG27WoA9e+/TdK74KnHz852TLa94ovOYySo/yMPuTmpckK/jIF2jSwS3g7ELSKXK13/cVdmg1Z/DaCWKxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.25",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.25.tgz",
+      "integrity": "sha512-QO/VHsXCQdnzADMfmkeOPvHdIAkoB7i0/rGjINPJEetLx75hNttVWGQ/jycHUDP9zZ9rupbm60WRxcwViB0MiA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001791",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz",
+      "integrity": "sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.349",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.349.tgz",
+      "integrity": "sha512-QsWVGyRuY07Aqb234QytTfwd5d9AJlfNIQ5wIOl1L+PZDzI9d9+Fn0FRale/QYlFxt/bUnB0/nLd1jFPGxGK1A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-equals": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.4.0.tgz",
+      "integrity": "sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.38.tgz",
+      "integrity": "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.13",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.13.tgz",
+      "integrity": "sha512-qif0+jGGZoLWdHey3UFHHWP0H7Gbmsk8T5VEqyYFbWqPr1XqvLGBbk/sl8V5exGmcYJklJOhOQq1pV9IcsiFag==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.2",
+        "react-router": "6.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
+      "integrity": "sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.2.tgz",
+      "integrity": "sha512-J9qZyW++QK/09NyN/zeO0dG/1GdGfyp9lV8ajHnRVLfo/uFsbji5mHnDgn/qYdUHyCkM2N+8VyspgZclfAh0eQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.60.2",
+        "@rollup/rollup-android-arm64": "4.60.2",
+        "@rollup/rollup-darwin-arm64": "4.60.2",
+        "@rollup/rollup-darwin-x64": "4.60.2",
+        "@rollup/rollup-freebsd-arm64": "4.60.2",
+        "@rollup/rollup-freebsd-x64": "4.60.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.2",
+        "@rollup/rollup-linux-arm64-musl": "4.60.2",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.2",
+        "@rollup/rollup-linux-loong64-musl": "4.60.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.2",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.2",
+        "@rollup/rollup-linux-x64-gnu": "4.60.2",
+        "@rollup/rollup-linux-x64-musl": "4.60.2",
+        "@rollup/rollup-openbsd-x64": "4.60.2",
+        "@rollup/rollup-openharmony-arm64": "4.60.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.2",
+        "@rollup/rollup-win32-x64-gnu": "4.60.2",
+        "@rollup/rollup-win32-x64-msvc": "4.60.2",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "breathe-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^6.23.0",
+    "recharts": "^2.12.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.7.0",
+    "vite": "^5.4.21"
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,60 @@
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { AuthProvider, useAuth } from './context/AuthContext'
+import { ThemeProvider } from './context/ThemeContext'
+import AuthPage      from './pages/AuthPage'
+import LandingPage   from './pages/LandingPage'
+import Layout        from './components/Layout'
+import DashboardPage from './pages/DashboardPage'
+import AssessPage    from './pages/AssessPage'
+import HistoryPage   from './pages/HistoryPage'
+import ProfilePage   from './pages/ProfilePage'
+import BreathePage      from './pages/BreathePage'
+import BoxBreathingPage from './pages/BoxBreathingPage'
+import GratitudePage    from './pages/GratitudePage'
+import TodoPage      from './pages/TodoPage'
+
+function PrivateRoute({ children }) {
+  const { user, loading } = useAuth()
+  if (loading) return <div className="full-loader"><div className="spinner" /></div>
+  return user ? children : <Navigate to="/auth" replace />
+}
+
+function PublicRoute({ children }) {
+  const { user, loading } = useAuth()
+  if (loading) return <div className="full-loader"><div className="spinner" /></div>
+  return user ? <Navigate to="/app/breathe" replace /> : children
+}
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <AuthProvider>
+      <Routes>
+        {/* Public landing */}
+        <Route path="/"     element={<PublicRoute><LandingPage /></PublicRoute>} />
+        <Route path="/auth" element={<PublicRoute><AuthPage /></PublicRoute>} />
+
+        {/* Breathe hub — full-screen, no sidebar */}
+        <Route path="/app/breathe"     element={<PrivateRoute><BreathePage /></PrivateRoute>} />
+        <Route path="/app/breathe/box" element={<PrivateRoute><BoxBreathingPage /></PrivateRoute>} />
+
+        {/* Protected app shell (with sidebar) */}
+        <Route path="/app" element={<PrivateRoute><Layout /></PrivateRoute>}>
+          <Route index            element={<Navigate to="breathe" replace />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+          <Route path="assess"    element={<AssessPage />} />
+          <Route path="history"   element={<HistoryPage />} />
+          <Route path="profile"   element={<ProfilePage />} />
+          <Route path="gratitude" element={<GratitudePage />} />
+          <Route path="todo"      element={<TodoPage />} />
+        </Route>
+
+        {/* Legacy short URLs — redirect logged-in users straight to app */}
+        <Route path="/dashboard" element={<PrivateRoute><Navigate to="/app/dashboard" replace /></PrivateRoute>} />
+        <Route path="/assess"    element={<PrivateRoute><Navigate to="/app/assess"    replace /></PrivateRoute>} />
+        <Route path="/history"   element={<PrivateRoute><Navigate to="/app/history"   replace /></PrivateRoute>} />
+
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </AuthProvider>    </ThemeProvider>  )
+}

frontend/src/api/client.js

@@ -0,0 +1,19 @@
+const BASE = ''   // same-origin in prod; Vite proxy handles /api in dev
+
+async function request(path, options = {}) {
+  const res = await fetch(BASE + path, {
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
+    ...options,
+  })
+  const json = await res.json().catch(() => ({}))
+  if (!res.ok) throw new Error(json.error || `HTTP ${res.status}`)
+  return json
+}
+
+export const api = {
+  get:  (path)         => request(path),
+  post: (path, body)   => request(path, { method: 'POST',   body: JSON.stringify(body) }),
+  put:  (path, body)   => request(path, { method: 'PUT',    body: JSON.stringify(body) }),
+  del:  (path)         => request(path, { method: 'DELETE' }),
+}

frontend/src/components/DeepBreathWidget.jsx

@@ -0,0 +1,114 @@
+import { useState, useEffect, useRef } from 'react'
+
+const PHASES = [
+  { label: 'Inhale',  duration: 4, scale: 1.55 },
+  { label: 'Hold',    duration: 4, scale: 1.55 },
+  { label: 'Exhale',  duration: 6, scale: 1.0  },
+  { label: 'Hold',    duration: 2, scale: 1.0  },
+]
+
+export default function DeepBreathWidget() {
+  const [running,  setRunning]  = useState(false)
+  const [phaseIdx, setPhaseIdx] = useState(0)
+  const [tick,     setTick]     = useState(PHASES[0].duration)
+  const [breaths,  setBreaths]  = useState(0)
+  const intervalRef = useRef(null)
+
+  function stop() {
+    clearInterval(intervalRef.current)
+    setRunning(false)
+    setPhaseIdx(0)
+    setTick(PHASES[0].duration)
+  }
+
+  function start() {
+    setRunning(true)
+    setPhaseIdx(0)
+    setTick(PHASES[0].duration)
+  }
+
+  useEffect(() => {
+    if (!running) return
+    intervalRef.current = setInterval(() => {
+      setTick(t => {
+        if (t > 1) return t - 1
+        setPhaseIdx(pi => {
+          const next = (pi + 1) % PHASES.length
+          if (next === 0) setBreaths(b => b + 1)
+          setTick(PHASES[next].duration)
+          return next
+        })
+        return PHASES[0].duration
+      })
+    }, 1000)
+    return () => clearInterval(intervalRef.current)
+  }, [running])
+
+  const phase = PHASES[phaseIdx]
+  const pct   = running ? (tick / phase.duration) : 1
+
+  return (
+    <div className="dbw">
+      <div className="dbw-orb-wrap">
+        <div className={`dbw-ring dbw-ring-1 ${running ? `dbw-ring--${phaseIdx}` : ''}`} />
+        <div className={`dbw-ring dbw-ring-2 ${running ? `dbw-ring--${phaseIdx}` : ''}`} />
+
+        <div
+          className="dbw-orb"
+          style={{
+            transform: running ? `scale(${phase.scale})` : 'scale(1)',
+            transition: phaseIdx === 0
+              ? `transform ${phase.duration}s cubic-bezier(.4,0,.2,1)`
+              : phaseIdx === 2
+                ? `transform ${phase.duration}s cubic-bezier(.4,0,.2,1)`
+                : 'none',
+          }}
+        >
+          <img src="/logo.svg" alt="" className="dbw-logo" />
+        </div>
+
+        {running && (
+          <svg className="dbw-arc" viewBox="0 0 120 120">
+            <circle cx="60" cy="60" r="54" fill="none" stroke="rgba(255,255,255,.08)" strokeWidth="4"/>
+            <circle
+              cx="60" cy="60" r="54"
+              fill="none"
+              stroke="url(#arcGrad)"
+              strokeWidth="4"
+              strokeLinecap="round"
+              strokeDasharray={`${2 * Math.PI * 54}`}
+              strokeDashoffset={`${2 * Math.PI * 54 * (1 - pct)}`}
+              transform="rotate(-90 60 60)"
+            />
+            <defs>
+              <linearGradient id="arcGrad" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%"   stopColor="#FF4A26"/>
+                <stop offset="100%" stopColor="#7B4ABE"/>
+              </linearGradient>
+            </defs>
+          </svg>
+        )}
+      </div>
+
+      <div className="dbw-info">
+        <div className="dbw-phase">{running ? phase.label : 'Box Breathing'}</div>
+        <div className="dbw-tick">{running ? tick : '—'}</div>
+        <div className="dbw-counter">
+          {breaths > 0 || running
+            ? `${breaths} breath${breaths !== 1 ? 's' : ''} completed`
+            : 'Tap start to begin'}
+        </div>
+      </div>
+
+      <div className="dbw-controls">
+        {!running
+          ? <button className="dbw-btn dbw-btn--start" onClick={start}>▶ Start</button>
+          : <button className="dbw-btn dbw-btn--stop"  onClick={stop}>■ Stop</button>
+        }
+        {!running && breaths > 0 && (
+          <button className="dbw-btn dbw-btn--reset" onClick={() => setBreaths(0)}>Reset</button>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/Layout.jsx

@@ -0,0 +1,113 @@
+import { useState } from 'react'
+import { Outlet, NavLink, useNavigate, Link } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+import { useTheme } from '../context/ThemeContext'
+
+const NAV_MAIN = [
+  { to: '/app/dashboard', icon: '◈', label: 'Dashboard'      },
+  { to: '/app/assess',    icon: '⊕', label: 'New Assessment' },
+  { to: '/app/history',   icon: '◷', label: 'History'        },
+]
+
+const NAV_WELLNESS = [
+  { to: '/app/breathe',   icon: '🫁', label: 'Breathe Hub'    },
+  { to: '/app/gratitude', icon: '✍️', label: 'Gratitude'      },
+  { to: '/app/todo',      icon: '✅', label: 'Daily To-Do'    },
+]
+
+export default function Layout() {
+  const { user, logout } = useAuth()
+  const { theme, toggle } = useTheme()
+  const navigate          = useNavigate()
+  const [open, setOpen]   = useState(false)   // mobile sidebar
+
+  async function handleLogout() {
+    await logout()
+    navigate('/auth')
+  }
+
+  const initials = user?.username?.slice(0, 2).toUpperCase() || 'U'
+
+  return (
+    <div className="app-shell">
+      {/* Mobile top bar */}
+      <header className="mobile-bar">
+        <button className="hamburger" onClick={() => setOpen(o => !o)}>☰</button>
+        <Link to="/app/breathe" className="mobile-brand-link">
+          <img src="/logo.svg" alt="BREATHE" className="mobile-brand-logo" />
+        </Link>
+        <button className="mobile-theme-toggle" onClick={toggle} aria-label="Toggle theme">
+          {theme === 'dark' ? '☀️' : '🌙'}
+        </button>
+      </header>
+
+      {/* Backdrop (mobile) */}
+      {open && <div className="sidebar-backdrop" onClick={() => setOpen(false)} />}
+
+      <aside className={`sidebar ${open ? 'sidebar--open' : ''}`}>
+        <div className="sidebar-top">
+          <div className="sidebar-brand">
+            <Link to="/app/breathe" className="sidebar-brand-link" onClick={() => setOpen(false)}>
+              <img src="/logo.svg" alt="BREATHE" className="brand-logo" />
+              <div className="brand-sub">Stress Intelligence</div>
+            </Link>
+          </div>
+
+          <nav className="sidebar-nav">
+            <div className="nav-section-label">Overview</div>
+            {NAV_MAIN.map(n => (
+              <NavLink
+                key={n.to}
+                to={n.to}
+                className={({ isActive }) => `nav-link ${isActive ? 'nav-link--active' : ''}`}
+                onClick={() => setOpen(false)}
+              >
+                <span className="nav-icon">{n.icon}</span>
+                <span>{n.label}</span>
+              </NavLink>
+            ))}
+
+            <div className="nav-section-label" style={{ marginTop: '16px' }}>Wellness</div>
+            {NAV_WELLNESS.map(n => (
+              <NavLink
+                key={n.to}
+                to={n.to}
+                className={({ isActive }) => `nav-link ${isActive ? 'nav-link--active' : ''}`}
+                onClick={() => setOpen(false)}
+              >
+                <span className="nav-icon">{n.icon}</span>
+                <span>{n.label}</span>
+              </NavLink>
+            ))}
+          </nav>
+        </div>
+
+        <div className="sidebar-bottom">
+          <div className="user-chip">
+            <Link to="/app/profile" className="user-chip-link" onClick={() => setOpen(false)}>
+              {user?.avatar
+                ? <img src={user.avatar} alt="avatar" className="user-avatar user-avatar--img" />
+                : <div className="user-avatar">{initials}</div>
+              }
+              <div className="user-meta">
+                <div className="user-name">{user?.display_name || user?.username}</div>
+                <div className="user-email">{user?.email}</div>
+              </div>
+            </Link>
+          </div>
+          <button className="theme-toggle" onClick={toggle}>
+            <span className="theme-toggle-icon">{theme === 'dark' ? '☀️' : '🌙'}</span>
+            {theme === 'dark' ? 'Light mode' : 'Dark mode'}
+          </button>
+          <button className="logout-btn" onClick={handleLogout}>
+            ↩ Log out
+          </button>
+        </div>
+      </aside>
+
+      <main className="main-area">
+        <Outlet />
+      </main>
+    </div>
+  )
+}

frontend/src/components/VideoBackground.jsx

@@ -0,0 +1,15 @@
+export default function VideoBackground() {
+  return (
+    <div className="video-bg-wrap">
+      <video
+        className="video-bg"
+        src="/bg-video.mp4"
+        autoPlay
+        muted
+        loop
+        playsInline
+      />
+      <div className="video-bg-overlay" />
+    </div>
+  )
+}

frontend/src/context/AuthContext.jsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useState, useEffect } from 'react'
+import { api } from '../api/client'
+
+const AuthContext = createContext(null)
+
+export function AuthProvider({ children }) {
+  const [user,    setUser]    = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api.get('/api/auth/me')
+      .then(d => setUser(d.user))
+      .catch(() => setUser(null))
+      .finally(() => setLoading(false))
+  }, [])
+
+  async function login(identity, password) {
+    const d = await api.post('/api/auth/login', { email: identity, username: identity, password })
+    setUser(d.user)
+    return d.user
+  }
+
+  async function signup(username, email, password) {
+    const d = await api.post('/api/auth/signup', { username, email, password })
+    setUser(d.user)
+    return d.user
+  }
+
+  async function logout() {
+    await api.post('/api/auth/logout', {}).catch(() => {})
+    setUser(null)
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, setUser, loading, login, signup, logout }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export const useAuth = () => useContext(AuthContext)

frontend/src/context/ThemeContext.jsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+
+const ThemeContext = createContext()
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState(() => localStorage.getItem('breathe-theme') || 'dark')
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    localStorage.setItem('breathe-theme', theme)
+  }, [theme])
+
+  function toggle() {
+    setTheme(t => t === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggle }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}

frontend/src/index.css

@@ -0,0 +1,1717 @@
+/* ═══════════════════════════════════════════════════════════
+   BREATHE — Design System
+   ═══════════════════════════════════════════════════════════ */
+
+/* ─────────────────────────────────────────────────────────────
+   LANDING PAGE
+───────────────────────────────────────────────────────────── */
+
+/* Root wrapper */
+.lp {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Inter', sans-serif;
+  overflow-x: hidden;
+}
+
+/* ── Shared gradient text ── */
+.lp-gradient-text {
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 60%, #f472b6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ── Nav ─────────────────────────────────────────────────── */
+.lp-nav {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
+  background: rgba(var(--nav-bg-rgb, 7,9,15),.85);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+}
+.lp-nav-inner {
+  max-width: 1100px; margin: 0 auto;
+  display: flex; align-items: center;
+  padding: 0 24px; height: 64px; gap: 32px;
+}
+.lp-logo         { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
+.lp-logo-img     { height: 48px; width: auto; display: block; }
+.lp-nav-links    { display: flex; gap: 4px; flex: 1; }
+.lp-nav-link     { padding: 7px 14px; border-radius: var(--r-sm); color: var(--muted);
+                   font-size: .88rem; font-weight: 500; transition: var(--t); text-decoration: none; }
+.lp-nav-link:hover { color: var(--text); background: var(--surface2); }
+.lp-nav-cta      { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+
+/* Nav buttons */
+.lp-btn-ghost {
+  padding: 8px 18px; border: 1px solid var(--border2); border-radius: var(--r-sm);
+  color: var(--muted2); font-size: .88rem; font-weight: 500;
+  background: transparent; text-decoration: none; transition: var(--t);
+}
+.lp-btn-ghost:hover { color: var(--text); border-color: var(--accent); }
+
+.lp-btn-solid {
+  padding: 8px 18px; border-radius: var(--r-sm); border: none;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none;
+  transition: opacity var(--t), box-shadow var(--t);
+  box-shadow: 0 4px 14px rgba(91,156,246,.3);
+}
+.lp-btn-solid:hover { opacity: .88; box-shadow: 0 6px 20px rgba(91,156,246,.45); }
+
+/* ── Hero ─────────────────────────────────────────────────── */
+.lp-hero {
+  min-height: 100vh;
+  display: flex; align-items: center; justify-content: center;
+  text-align: center;
+  position: relative; overflow: hidden;
+  padding: 120px 24px 80px;
+}
+
+/* Rings */
+.lp-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.lp-ring  { position: absolute; border-radius: 50%; animation: lp-breathe 6s ease-in-out infinite; }
+.lp-ring-1 { width: 160px;  height: 160px;  border: 1.5px solid rgba(91,156,246,.5);  animation-delay: 0s; }
+.lp-ring-2 { width: 300px;  height: 300px;  border: 1px   solid rgba(91,156,246,.28); animation-delay: .8s; }
+.lp-ring-3 { width: 460px;  height: 460px;  border: 1px   solid rgba(167,139,250,.18);animation-delay: 1.6s; }
+.lp-ring-4 { width: 640px;  height: 640px;  border: 1px   solid rgba(167,139,250,.1); animation-delay: 2.4s; }
+.lp-ring-5 { width: 860px;  height: 860px;  border: 1px   solid rgba(91,156,246,.06); animation-delay: 3.2s; }
+
+@keyframes lp-breathe {
+  0%,100% { transform: scale(.94); opacity: .6; }
+  50%      { transform: scale(1.06); opacity: .2; }
+}
+
+/* Radial glow behind hero */
+.lp-hero::before {
+  content: '';
+  position: absolute; inset: 0;
+  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(91,156,246,.1) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.lp-hero-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
+
+.lp-hero-badge {
+  display: inline-block; margin-bottom: 24px;
+  padding: 6px 16px; border-radius: 20px;
+  background: rgba(91,156,246,.1); border: 1px solid rgba(91,156,246,.25);
+  color: var(--accent); font-size: .78rem; font-weight: 600; letter-spacing: .04em;
+}
+
+.lp-hero-h1 {
+  font-size: clamp(2.4rem, 6vw, 4.2rem);
+  font-weight: 900; line-height: 1.1; letter-spacing: -.02em;
+  color: var(--text); margin-bottom: 22px;
+}
+
+.lp-hero-sub {
+  font-size: clamp(.95rem, 2vw, 1.15rem);
+  color: var(--muted2); line-height: 1.75;
+  max-width: 580px; margin: 0 auto 36px;
+}
+
+.lp-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
+
+/* Hero CTA buttons */
+.lp-btn-hero-primary {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 14px 32px; border-radius: var(--r-sm); border: none;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff; font-size: 1rem; font-weight: 700; text-decoration: none;
+  box-shadow: 0 6px 28px rgba(91,156,246,.4);
+  transition: opacity var(--t), transform var(--t), box-shadow var(--t);
+}
+.lp-btn-hero-primary:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 10px 36px rgba(91,156,246,.55); }
+.lp-btn--xl { padding: 16px 40px; font-size: 1.05rem; }
+
+.lp-btn-hero-ghost {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 14px 32px; border-radius: var(--r-sm);
+  border: 1px solid var(--border2); color: var(--muted2);
+  font-size: 1rem; font-weight: 500; text-decoration: none;
+  transition: var(--t); background: transparent;
+}
+.lp-btn-hero-ghost:hover { color: var(--text); border-color: var(--accent); background: rgba(91,156,246,.05); }
+.lp-btn-arrow { transition: transform var(--t); }
+.lp-btn-hero-primary:hover .lp-btn-arrow { transform: translateX(4px); }
+
+/* ── Stats bar ─────────────────────────────────────────────── */
+.lp-stats {
+  display: flex; align-items: center; justify-content: center;
+  gap: 0; flex-wrap: wrap;
+  background: var(--surface);
+  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+  padding: 28px 24px;
+}
+.lp-stat        { text-align: center; padding: 8px 40px; }
+.lp-stat-num    { font-size: 1.7rem; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
+.lp-stat-lbl    { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
+.lp-stat-div    { width: 1px; height: 44px; background: var(--border); flex-shrink: 0; }
+
+/* ── Sections ──────────────────────────────────────────────── */
+.lp-section {
+  max-width: 1100px; margin: 0 auto;
+  padding: 96px 24px;
+  text-align: center;
+}
+.lp-section--alt {
+  background: var(--surface);
+  max-width: 100%; padding: 96px 24px;
+}
+.lp-section--alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
+
+.lp-section-label {
+  font-size: .73rem; font-weight: 700; letter-spacing: .12em;
+  text-transform: uppercase; color: var(--accent);
+  margin-bottom: 14px;
+}
+.lp-section-h2 {
+  font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 800;
+  line-height: 1.2; letter-spacing: -.02em; color: var(--text);
+  margin-bottom: 14px;
+}
+.lp-section-sub {
+  color: var(--muted2); font-size: 1rem; max-width: 520px;
+  margin: 0 auto 56px; line-height: 1.7;
+}
+
+/* ── Feature cards ─────────────────────────────────────────── */
+.lp-features {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
+  margin-top: 56px;
+}
+.lp-feat-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r); padding: 28px 24px; text-align: left;
+  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
+}
+.lp-feat-card:hover {
+  border-color: var(--fc, var(--accent));
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0,0,0,.4);
+}
+.lp-feat-icon  { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 18px; }
+.lp-feat-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
+.lp-feat-desc  { font-size: .875rem; color: var(--muted); line-height: 1.7; }
+
+/* ── How it works ──────────────────────────────────────────── */
+.lp-steps {
+  display: flex; align-items: flex-start; justify-content: center;
+  gap: 0; margin-top: 56px; position: relative;
+  max-width: 800px; margin-left: auto; margin-right: auto;
+}
+.lp-step {
+  flex: 1; display: flex; flex-direction: column; align-items: center;
+  text-align: center; position: relative; padding: 0 16px;
+}
+.lp-step-n {
+  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff; font-size: 1rem; font-weight: 800;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 0 0 6px rgba(91,156,246,.15), 0 4px 18px rgba(91,156,246,.3);
+  margin-bottom: 20px; z-index: 1;
+}
+.lp-step-line {
+  position: absolute; top: 28px; left: calc(50% + 36px); right: calc(-50% + 36px);
+  height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent2));
+  opacity: .35;
+}
+.lp-step-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
+.lp-step-desc  { font-size: .875rem; color: var(--muted); line-height: 1.65; }
+
+/* ── Stress levels ─────────────────────────────────────────── */
+.lp-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 56px; }
+.lp-level-card {
+  background: var(--lb, rgba(91,156,246,.08));
+  border: 1px solid rgba(255,255,255,.06);
+  border-top: 3px solid var(--lc, var(--accent));
+  border-radius: var(--r); padding: 22px 18px; text-align: left;
+  transition: transform var(--t), box-shadow var(--t);
+}
+.lp-level-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
+.lp-level-top    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.lp-level-badge  { padding: 4px 12px; border-radius: 20px; font-size: .8rem; font-weight: 700; }
+.lp-level-range  { font-size: .75rem; color: var(--muted); }
+.lp-level-desc   { font-size: .82rem; color: var(--muted2); line-height: 1.55; margin-bottom: 16px; }
+.lp-level-bar-track { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
+.lp-level-bar-fill  { height: 100%; width: 100%; border-radius: 2px; }
+
+/* ── CTA section ───────────────────────────────────────────── */
+.lp-cta {
+  position: relative; text-align: center;
+  padding: 120px 24px;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  overflow: hidden;
+}
+.lp-cta-glow {
+  position: absolute; top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  width: 600px; height: 300px;
+  background: radial-gradient(ellipse, rgba(91,156,246,.15) 0%, transparent 70%);
+  pointer-events: none;
+}
+.lp-cta-h2  { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; position: relative; }
+.lp-cta-sub { color: var(--muted2); font-size: 1rem; margin-bottom: 36px; position: relative; }
+
+/* ── Footer ────────────────────────────────────────────────── */
+.lp-footer {
+  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
+  gap: 14px; padding: 28px 40px;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+}
+.lp-footer-logo { display: flex; align-items: center; }
+.lp-footer-logo-img { height: 32px; width: auto; }
+.lp-footer-copy { font-size: .8rem; color: var(--muted); }
+.lp-footer-links { display: flex; gap: 20px; }
+.lp-footer-link  { font-size: .82rem; color: var(--muted); transition: color var(--t); text-decoration: none; }
+.lp-footer-link:hover { color: var(--text); }
+
+/* ── Landing page responsive ───────────────────────────────── */
+@media (max-width: 1024px) {
+  .lp-features { grid-template-columns: repeat(2, 1fr); }
+  .lp-levels   { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 768px) {
+  .lp-nav-links       { display: none; }
+  .lp-hero            { padding: 100px 20px 60px; }
+  .lp-stats           { gap: 0; }
+  .lp-stat            { padding: 8px 20px; }
+  .lp-stat-div        { display: none; }
+  .lp-steps           { flex-direction: column; align-items: center; gap: 32px; }
+  .lp-step-line       { display: none; }
+  .lp-levels          { grid-template-columns: repeat(2, 1fr); }
+  .lp-footer          { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; }
+}
+
+@media (max-width: 540px) {
+  .lp-features   { grid-template-columns: 1fr; }
+  .lp-levels     { grid-template-columns: 1fr; }
+  .lp-nav-cta .lp-btn-ghost { display: none; }
+  .lp-section    { padding: 64px 20px; }
+  .lp-cta        { padding: 80px 20px; }
+}
+
+:root,
+[data-theme="dark"] {
+  --bg:        #07090f;
+  --surface:   #0d1420;
+  --surface2:  #121c2e;
+  --surface3:  #192436;
+  --border:    #1a2840;
+  --border2:   #243554;
+
+  --accent:    #5b9cf6;
+  --accent2:   #a78bfa;
+  --glow:      rgba(91,156,246,.2);
+
+  --text:      #e2e8f0;
+  --muted:     #64748b;
+  --muted2:    #94a3b8;
+
+  --success:   #2dd4a5;
+  --warning:   #fbbf24;
+  --danger:    #f87171;
+
+  --minimal:   #2dd4a5;
+  --mild:      #86efac;
+  --moderate:  #fbbf24;
+  --severe:    #fb923c;
+  --critical:  #f87171;
+
+  --r:    16px;
+  --r-sm: 10px;
+  --r-xs:  6px;
+  --sh:   0 8px 40px rgba(0,0,0,.55);
+  --sh-sm:0 4px 20px rgba(0,0,0,.35);
+  --t:    200ms cubic-bezier(.4,0,.2,1);
+  --nav-bg-rgb: 7,9,15;
+}
+
+[data-theme="light"] {
+  /* Palette: FFDDDA · FFF4CB · CBEDD4 · E3D7FF · D0EAFF · FFF9F2 */
+  --bg:        #FFF9F2;   /* warm cream — page background           */
+  --surface:   #FFFFFF;   /* pure white — cards / modals            */
+  --surface2:  #FFDDDA;   /* rose petal — hover / secondary surface */
+  --surface3:  #FFF4CB;   /* soft yellow — tertiary / highlight     */
+  --border:    #F0C8C4;   /* rose border (FFDDDA darkened)          */
+  --border2:   #C4E8D0;   /* mint border (CBEDD4 darkened)          */
+
+  --accent:    #6A9FD8;   /* D0EAFF deepened — interactive blue     */
+  --accent2:   #9B8BD4;   /* E3D7FF deepened — interactive lavender */
+  --glow:      rgba(208,234,255,.45);
+
+  --text:      #1a1228;   /* near-black with warm-purple tint       */
+  --muted:     #7a6e80;
+  --muted2:    #5c5266;
+
+  --success:   #2ea868;   /* CBEDD4 deepened                        */
+  --warning:   #c98a0a;   /* FFF4CB deepened                        */
+  --danger:    #d94f4f;   /* FFDDDA deepened                        */
+
+  --minimal:   #2ea868;
+  --mild:      #52c48a;
+  --moderate:  #c98a0a;
+  --severe:    #e07030;
+  --critical:  #d94f4f;
+
+  --sh:        0 8px 40px rgba(255,221,218,.55);
+  --sh-sm:     0 4px 20px rgba(227,215,255,.35);
+  --nav-bg-rgb: 255,249,242;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html   { scroll-behavior: smooth; }
+body   { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text);
+         font-size: 15px; line-height: 1.6; min-height: 100vh; }
+a      { text-decoration: none; }
+button { font-family: inherit; cursor: pointer; }
+
+/* ── Scrollbar ─────────────────────────────────────────────── */
+::-webkit-scrollbar        { width: 6px; }
+::-webkit-scrollbar-track  { background: var(--bg); }
+::-webkit-scrollbar-thumb  { background: var(--border2); border-radius: 3px; }
+
+/* ── Loaders ───────────────────────────────────────────────── */
+.full-loader  { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+.page-loader  { display: flex; align-items: center; justify-content: center; min-height: 40vh; }
+.spinner      { width: 32px; height: 32px; border: 3px solid var(--border2);
+                border-top-color: var(--accent); border-radius: 50%;
+                animation: spin .7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ─────────────────────────────────────────────────────────────
+   AUTH SCREEN
+───────────────────────────────────────────────────────────── */
+.auth-screen {
+  min-height: 100vh;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--bg);
+  position: relative; overflow: hidden;
+}
+
+/* Breathing rings animation */
+.breath-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(91,156,246,.18); animation: breathe 5s ease-in-out infinite; }
+.ring-1 { width: 180px; height: 180px; animation-delay: 0s;    border-color: rgba(91,156,246,.35); }
+.ring-2 { width: 320px; height: 320px; animation-delay: .7s;   border-color: rgba(91,156,246,.2); }
+.ring-3 { width: 480px; height: 480px; animation-delay: 1.4s;  border-color: rgba(167,139,250,.12); }
+.ring-4 { width: 660px; height: 660px; animation-delay: 2.1s;  border-color: rgba(167,139,250,.07); }
+
+@keyframes breathe {
+  0%,100% { transform: scale(.95); opacity: .5; }
+  50%      { transform: scale(1.05); opacity: .2; }
+}
+
+.auth-card {
+  position: relative; z-index: 1;
+  background: rgba(13,20,32,.9);
+  backdrop-filter: blur(24px);
+  border: 1px solid var(--border2);
+  border-radius: var(--r);
+  padding: 44px 40px;
+  width: 100%; max-width: 420px;
+  box-shadow: var(--sh), 0 0 80px rgba(91,156,246,.1);
+}
+
+.auth-brand     { text-align: center; margin-bottom: 28px; }
+.auth-logo      { height: 100px; width: auto; display: block; margin: 0 auto 8px; }
+.auth-title     { font-size: 1.9rem; font-weight: 800; letter-spacing: .08em;
+                  background: linear-gradient(135deg, var(--accent), var(--accent2));
+                  -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.auth-subtitle  { color: var(--muted); font-size: .85rem; margin-top: 4px; }
+
+.auth-tabs  { display: flex; background: var(--bg); border-radius: var(--r-sm); padding: 4px; margin-bottom: 24px; }
+.auth-tab   { flex: 1; padding: 9px; border: none; border-radius: 7px; background: transparent;
+              color: var(--muted); font-size: .9rem; font-weight: 500; transition: var(--t); }
+.auth-tab--active { background: var(--surface2); color: var(--text); box-shadow: var(--sh-sm); }
+
+.auth-form  { display: flex; flex-direction: column; gap: 14px; }
+
+/* ─────────────────���───────────────────────────────────────────
+   FORM ELEMENTS
+───────────────────────────────────────────────────────────── */
+.field       { display: flex; flex-direction: column; gap: 6px; }
+.field label { font-size: .78rem; font-weight: 600; color: var(--muted2);
+               text-transform: uppercase; letter-spacing: .05em; }
+.field label small { text-transform: none; font-weight: 400; color: var(--muted); }
+
+input[type=text], input[type=email], input[type=password], input[type=number],
+select, textarea {
+  width: 100%; padding: 11px 14px;
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: var(--r-sm); color: var(--text);
+  font-size: .92rem; font-family: inherit; outline: none;
+  transition: border-color var(--t), box-shadow var(--t);
+}
+input:focus, select:focus, textarea:focus {
+  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,156,246,.14);
+}
+input::placeholder { color: var(--muted); }
+select option { background: var(--surface2); }
+textarea      { resize: vertical; }
+
+.form-error {
+  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.35);
+  border-radius: var(--r-sm); color: var(--danger);
+  padding: 10px 14px; font-size: .88rem; margin-bottom: 4px;
+}
+
+/* ── Buttons ───────────────────────────────────────────────── */
+.btn-primary {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 11px 24px; border: none; border-radius: var(--r-sm);
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff; font-size: .95rem; font-weight: 600;
+  transition: opacity var(--t), transform var(--t), box-shadow var(--t);
+  box-shadow: 0 4px 18px rgba(91,156,246,.35);
+  letter-spacing: .01em;
+}
+.btn-primary:hover  { opacity: .88; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(91,156,246,.5); }
+.btn-primary:active { opacity: 1; transform: translateY(0); }
+.btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
+.btn--full { width: 100%; }
+.btn--lg   { padding: 13px 32px; font-size: 1rem; }
+
+.btn-secondary {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 10px 22px; border: 1px solid var(--accent);
+  border-radius: var(--r-sm); color: var(--accent);
+  font-size: .9rem; font-weight: 500; background: transparent;
+  transition: var(--t);
+}
+.btn-secondary:hover { background: rgba(91,156,246,.1); border-color: var(--accent2); }
+
+.btn-ghost {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  padding: 9px 18px; border: 1px solid var(--border2);
+  border-radius: var(--r-sm); color: var(--muted2);
+  font-size: .88rem; font-weight: 500; background: transparent;
+  transition: var(--t);
+}
+.btn-ghost:hover { color: var(--text); border-color: var(--accent); background: rgba(91,156,246,.05); }
+
+.btn-spinner {
+  display: inline-block; width: 16px; height: 16px;
+  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
+  border-radius: 50%; animation: spin .7s linear infinite;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   APP SHELL
+───────────────────────────────────────────────────────────── */
+.app-shell { display: flex; min-height: 100vh; }
+
+/* Mobile bar */
+.mobile-bar {
+  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 50;
+  height: 56px; background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  align-items: center; gap: 14px; padding: 0 16px;
+}
+.hamburger    { background: none; border: none; color: var(--text); font-size: 1.3rem; }
+.mobile-brand { font-weight: 700; font-size: 1rem; color: var(--accent); letter-spacing: .05em; }
+
+/* Sidebar */
+.sidebar {
+  width: 248px; flex-shrink: 0;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  position: sticky; top: 0; height: 100vh;
+}
+.sidebar-top    { flex: 1; padding: 20px 12px 0; overflow-y: auto; }
+.sidebar-bottom { padding: 12px; border-top: 1px solid var(--border); }
+
+.sidebar-brand  {
+  display: flex; align-items: center; gap: 10px;
+  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
+}
+.brand-logo        { height: 52px; width: auto; display: block; }
+.mobile-brand-logo { height: 32px; width: auto; display: block; }
+.mobile-theme-toggle {
+  background: none; border: none; font-size: 1.2rem;
+  cursor: pointer; padding: 4px 8px; border-radius: var(--r-xs);
+  transition: var(--t); line-height: 1;
+}
+.mobile-theme-toggle:hover { background: var(--surface2); }
+.brand-name     { font-size: .95rem; font-weight: 800; color: var(--accent); letter-spacing: .06em; }
+.brand-sub      { font-size: .68rem; color: var(--muted); margin-top: 1px; }
+
+.sidebar-nav    { display: flex; flex-direction: column; gap: 2px; }
+.nav-section-label {
+  font-size: .67rem; font-weight: 700; letter-spacing: .1em;
+  text-transform: uppercase; color: var(--muted); padding: 6px 12px 4px;
+  margin-top: 4px;
+}
+.nav-link {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 12px; border-radius: var(--r-sm);
+  color: var(--muted); font-size: .88rem; font-weight: 500;
+  transition: var(--t); position: relative;
+  border-left: 2px solid transparent;
+}
+.nav-link:hover         { background: var(--surface2); color: var(--text); border-left-color: var(--border2); }
+.nav-link--active       { background: rgba(91,156,246,.1); color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
+.nav-link--active .nav-icon { filter: drop-shadow(0 0 5px var(--accent)); }
+.nav-icon { font-size: 1rem; flex-shrink: 0; }
+
+.user-chip    { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.user-avatar  {
+  width: 34px; height: 34px; border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  display: flex; align-items: center; justify-content: center;
+  font-size: .78rem; font-weight: 700; color: #fff; flex-shrink: 0;
+  border: 2px solid rgba(91,156,246,.3);
+}
+.user-meta    { min-width: 0; }
+.user-name    { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.user-email   { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.logout-btn   {
+  width: 100%; padding: 8px 12px;
+  background: none; border: 1px solid var(--border);
+  border-radius: var(--r-sm); color: var(--muted);
+  font-size: .82rem; transition: var(--t);
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+}
+.logout-btn:hover { color: var(--danger); border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.05); }
+
+/* Theme toggle */
+.theme-toggle {
+  width: 100%; padding: 8px 12px; margin-bottom: 6px;
+  background: none; border: 1px solid var(--border);
+  border-radius: var(--r-sm); color: var(--muted);
+  font-size: .82rem; transition: var(--t);
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+}
+.theme-toggle:hover { color: var(--text); border-color: var(--accent); background: rgba(91,156,246,.06); }
+.theme-toggle-icon { font-size: 1rem; line-height: 1; }
+
+/* Main area */
+.main-area { flex: 1; overflow-y: auto; min-width: 0; }
+
+/* ─────────────────────────────────────────────────────────────
+   PAGE LAYOUT
+───────────────────────────────────────────────────────────── */
+.page         { max-width: 1080px; margin: 0 auto; padding: 36px 32px; animation: pageIn .25s ease; }
+.page-header  { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
+.page-title   { font-size: 1.7rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
+.page-sub     { color: var(--muted); font-size: .88rem; margin-top: 4px; }
+
+@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+
+/* ─────────────────────────────────────────────────────────────
+   CARDS
+───────────────────────────────────────────────────────────── */
+.card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r); padding: 24px; margin-bottom: 20px;
+  box-shadow: var(--sh-sm);
+  transition: border-color var(--t), box-shadow var(--t);
+}
+.card:hover { border-color: var(--border2); }
+.card-title {
+  font-size: .72rem; font-weight: 700; color: var(--muted);
+  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px;
+}
+.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+
+/* ─────────────────────────────────────────────────────────────
+   STAT CARDS
+───────────────────────────────────────────────────────────── */
+.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
+.stat-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r); padding: 20px 18px;
+  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
+  position: relative; overflow: hidden;
+}
+.stat-card::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  background: linear-gradient(90deg, var(--accent), var(--accent2));
+  opacity: 0; transition: opacity var(--t);
+}
+.stat-card:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
+.stat-card:hover::before { opacity: 1; }
+.stat-icon  { font-size: 1.5rem; margin-bottom: 12px; }
+.stat-value { font-size: 1.7rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 6px; letter-spacing: -.02em; }
+.stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
+
+.trend--up   { color: var(--danger) !important; }
+.trend--down { color: var(--success) !important; }
+.trend--flat { color: var(--muted) !important; }
+
+/* ─────────────────────────────────────────────────────────────
+   DASHBOARD — RECENT LIST
+───────────────────────────────────────────────────────────── */
+.recent-list    { display: flex; flex-direction: column; gap: 6px; }
+.recent-item    {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 11px 14px; background: var(--surface2); border-radius: var(--r-sm);
+  cursor: pointer; border: 1px solid transparent; transition: var(--t);
+}
+.recent-item:hover { border-color: var(--border2); background: var(--surface3); transform: translateX(3px); }
+.recent-left    { display: flex; align-items: center; gap: 12px; }
+.level-dot      { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
+.recent-label   { font-size: .88rem; font-weight: 600; }
+.recent-date    { font-size: .75rem; color: var(--muted); margin-top: 2px; }
+.recent-score   { font-size: .9rem; font-weight: 700; }
+.empty-text     { color: var(--muted); font-size: .9rem; text-align: center; padding: 24px 0; }
+
+/* ─────────────────────────────────────────────────────────────
+   EMPTY STATE
+───────────────────────────────────────────────────────────── */
+.empty-dashboard {
+  text-align: center; padding: 80px 24px;
+  background: var(--surface); border: 1px dashed var(--border2);
+  border-radius: var(--r);
+}
+.empty-icon { font-size: 3.5rem; margin-bottom: 16px; display: block; }
+.empty-dashboard h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
+.empty-dashboard p  { color: var(--muted); margin-bottom: 24px; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.6; }
+
+/* ─────────────────────────────────────────────────────────────
+   ASSESSMENT FORM
+───────────────────────────────────────────────────────────── */
+.section-card { margin-bottom: 20px; }
+.section-head {
+  display: flex; align-items: flex-start; gap: 14px;
+  margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border);
+}
+.section-head h3  { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
+.section-icon-lg  { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
+.section-desc     { font-size: .85rem; color: var(--muted); }
+.badge-optional   { margin-left: auto; padding: 3px 10px; border-radius: 20px; font-size: .73rem; font-weight: 600;
+                    background: rgba(100,116,139,.12); color: var(--muted); border: 1px solid rgba(100,116,139,.25); flex-shrink: 0; }
+
+/* Sliders */
+.slider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-bottom: 18px; }
+.slider-field { display: flex; flex-direction: column; gap: 6px; }
+.slider-header { display: flex; justify-content: space-between; align-items: center; }
+.slider-header label { font-size: .78rem; font-weight: 600; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; }
+.slider-value  { font-size: .85rem; font-weight: 700; color: var(--accent); min-width: 48px; text-align: right; }
+.slider-range  { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: 1px; }
+
+input[type=range] {
+  -webkit-appearance: none; width: 100%; height: 4px;
+  background: var(--border2); border-radius: 2px; outline: none; padding: 0;
+  border: none; box-shadow: none;
+}
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none; width: 16px; height: 16px;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  border-radius: 50%; cursor: pointer;
+  box-shadow: 0 0 0 3px rgba(91,156,246,.2);
+  transition: box-shadow var(--t);
+}
+input[type=range]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 5px rgba(91,156,246,.3); }
+input[type=range]:focus { box-shadow: none; }
+
+.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
+
+/* ─────────────────────────────────────────────────────────────
+   RESULT PAGE
+───────────────────────────────────────────────────────────── */
+.result-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
+.result-main   { text-align: center; }
+.result-side   { }
+.result-actions { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
+
+/* Gauge */
+.gauge-wrap    { position: relative; width: 200px; height: 200px; margin: 12px auto 8px; }
+.gauge-svg     { width: 100%; height: 100%; }
+.gauge-center  { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.gauge-pct     { font-size: 2.2rem; font-weight: 800; line-height: 1; }
+.gauge-lbl     { font-size: .85rem; font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }
+
+/* Breakdown */
+.breakdown-list { display: flex; flex-direction: column; gap: 8px; }
+.breakdown-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--surface2); border-radius: var(--r-sm); }
+.breakdown-item--main { border: 1px solid var(--border2); background: var(--surface3); }
+.breakdown-key   { font-size: .82rem; color: var(--muted); }
+.breakdown-right { display: flex; align-items: center; gap: 8px; }
+.breakdown-label { font-size: .88rem; font-weight: 600; }
+.breakdown-score { font-size: .82rem; color: var(--muted2); }
+.modality-badge  { padding: 3px 10px; border-radius: 20px; font-size: .76rem; font-weight: 600;
+                   background: var(--surface3); color: var(--muted2); border: 1px solid var(--border); text-transform: capitalize; }
+.muted { color: var(--muted); }
+
+/* Advice box */
+.advice-box {
+  padding: 16px 18px; border-radius: var(--r-sm);
+  border-left: 4px solid var(--accent);
+  background: rgba(91,156,246,.07);
+  font-size: .9rem; line-height: 1.7; color: var(--muted2);
+  position: relative;
+}
+
+/* Detail grid */
+.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
+.detail-item { background: var(--surface2); padding: 10px 14px; border-radius: var(--r-sm); }
+.detail-key  { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
+.detail-val  { font-size: .92rem; font-weight: 600; }
+.detail-note { margin-bottom: 12px; }
+.detail-note-label { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; font-weight: 600; }
+.detail-note p { background: var(--surface2); padding: 10px 14px; border-radius: var(--r-sm); font-size: .9rem; line-height: 1.6; }
+
+/* ─────────────────────────────────────────────────────────────
+   DASHBOARD LAYOUT (main + activity side panel)
+───────────────────────────────────────────────────────────── */
+.dash-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
+.dash-main   { min-width: 0; }
+.dash-side   { position: sticky; top: 24px; }
+
+/* ─────────────────────────────────────────────────────────────
+   ACTIVITY PANEL
+───────────────────────────────────────────────────────────── */
+.activity-panel { padding: 20px; }
+.activity-list  { display: flex; flex-direction: column; gap: 6px; }
+
+.activity-item  {
+  border-radius: var(--r-sm);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  transition: border-color var(--t);
+}
+.activity-item:hover { border-color: var(--ac, var(--accent)); }
+
+.activity-header {
+  display: flex; align-items: center; gap: 10px;
+  width: 100%; padding: 10px 12px;
+  background: none; border: none; cursor: pointer;
+  text-align: left; color: var(--text);
+}
+.activity-header:hover { background: var(--surface2); }
+
+.activity-icon  {
+  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1rem;
+}
+.activity-meta  { flex: 1; min-width: 0; }
+.activity-title { display: block; font-size: .88rem; font-weight: 600; color: var(--text); }
+.activity-dur   { display: block; font-size: .73rem; color: var(--muted); margin-top: 1px; }
+.activity-chevron {
+  font-size: 1.1rem; color: var(--muted); transition: transform var(--t); line-height: 1;
+}
+.activity-chevron--open { transform: rotate(90deg); color: var(--ac, var(--accent)); }
+
+.activity-steps {
+  list-style: none; padding: 0 12px 12px 12px;
+  background: var(--surface2); counter-reset: step;
+  display: flex; flex-direction: column; gap: 6px;
+}
+.activity-steps li {
+  counter-increment: step;
+  font-size: .8rem; color: var(--muted2); line-height: 1.5;
+  padding-left: 22px; position: relative;
+}
+.activity-steps li::before {
+  content: counter(step);
+  position: absolute; left: 0;
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--ac, var(--accent)); color: #fff;
+  font-size: .65rem; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+  top: 1px;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   HISTORY PAGE
+───────────────────────────────────────────────────────────── */
+.history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; margin-bottom: 20px; }
+.history-card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r); padding: 18px; cursor: pointer;
+  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
+  border-top: 3px solid var(--level-color, var(--border));
+  position: relative; overflow: hidden;
+}
+.history-card::after {
+  content: '';
+  position: absolute; inset: 0; border-radius: var(--r);
+  background: radial-gradient(ellipse at top left, rgba(91,156,246,.05) 0%, transparent 60%);
+  pointer-events: none; opacity: 0; transition: opacity var(--t);
+}
+.history-card:hover { border-color: var(--level-color, var(--border2)); transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.45); }
+.history-card:hover::after { opacity: 1; }
+
+.hc-top      { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+.hc-badge    { padding: 4px 12px; border-radius: 20px; font-size: .8rem; font-weight: 700; }
+.hc-score    { font-size: 1.3rem; font-weight: 800; color: var(--text); }
+
+.hc-bars     { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+.hc-bar-wrap { display: flex; flex-direction: column; gap: 3px; }
+.hc-bar-label{ font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
+.hc-bar-track{ height: 5px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
+.hc-bar-fill { height: 100%; border-radius: 3px; transition: width 1s cubic-bezier(.4,0,.2,1); }
+
+.hc-footer   { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
+.hc-modality { font-size: .73rem; color: var(--muted2); background: var(--surface2); padding: 2px 8px; border-radius: 10px; text-transform: capitalize; }
+.hc-date     { font-size: .74rem; color: var(--muted); }
+
+/* Pagination */
+.pagination     { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
+.page-btn       { padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface); color: var(--muted); font-size: .85rem; transition: var(--t); }
+.page-btn:hover, .page-btn--active { border-color: var(--accent); color: var(--accent); background: rgba(91,156,246,.08); }
+.page-btn:disabled { opacity: .4; cursor: not-allowed; }
+
+/* ─────────────────────────────────────────────────────────────
+   MODAL
+───────────────────────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed; inset: 0; z-index: 100;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0,0,0,.75); backdrop-filter: blur(10px);
+  animation: fadeIn .15s ease;
+}
+.modal-box {
+  position: relative; background: var(--surface);
+  border: 1px solid var(--border2); border-radius: var(--r);
+  padding: 28px 30px; width: 90%; max-width: 520px;
+  max-height: 85vh; overflow-y: auto; box-shadow: var(--sh), 0 0 60px rgba(0,0,0,.5);
+  animation: slideUp .2s ease;
+}
+.modal-close {
+  position: absolute; top: 14px; right: 16px; background: none; border: none;
+  color: var(--muted); font-size: 1.1rem;
+  width: 28px; height: 28px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  transition: background var(--t), color var(--t);
+}
+.modal-close:hover { color: var(--text); background: var(--surface2); }
+.modal-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; letter-spacing: -.01em; }
+
+@keyframes fadeIn   { from { opacity: 0; }                     to { opacity: 1; } }
+@keyframes slideUp  { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
+
+/* ─────────────────────────────────────────────────────────────
+   MOBILE
+───────────────────────────────────────────────────────────── */
+.sidebar-backdrop { display: none; }
+
+@media (max-width: 860px) {
+  .main-area          { padding-top: 56px; }
+  .mobile-bar         { display: flex; }
+  .sidebar            { position: fixed; left: -240px; top: 0; height: 100vh; z-index: 60; transition: left var(--t); }
+  .sidebar--open      { left: 0; box-shadow: var(--sh); }
+  .sidebar-backdrop   { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); }
+  .stat-grid          { grid-template-columns: repeat(2, 1fr); }
+  .two-col            { grid-template-columns: 1fr; }
+  .result-layout      { grid-template-columns: 1fr; }
+  .page               { padding: 20px 16px; }
+  .history-grid       { grid-template-columns: 1fr; }
+  .detail-grid        { grid-template-columns: 1fr; }
+  /* Dashboard: stack side panel below main on tablet */
+  .dash-layout        { grid-template-columns: 1fr; }
+  .dash-side          { position: static; }
+}
+
+@media (max-width: 480px) {
+  .stat-grid   { grid-template-columns: 1fr 1fr; }
+  .slider-grid { grid-template-columns: 1fr; }
+  .cat-grid    { grid-template-columns: 1fr; }
+}
+
+/* ═══════════════════════════════════════════════
+   PROFILE PAGE
+═══════════════════════════════════════════════ */
+.profile-page {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 32px 24px 60px;
+}
+
+.profile-header-bar {
+  margin-bottom: 32px;
+}
+.profile-header-bar .page-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 4px;
+}
+.profile-header-bar .page-sub {
+  color: var(--muted);
+  font-size: .9rem;
+}
+
+.profile-form { display: flex; flex-direction: column; gap: 28px; }
+
+.profile-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 24px;
+}
+.section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 18px;
+  letter-spacing: .03em;
+}
+
+/* Avatar upload */
+.avatar-upload-row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+.avatar-large {
+  position: relative;
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #1a2840, #1e3060);
+  border: 2px solid var(--border);
+  cursor: pointer;
+  overflow: hidden;
+  flex-shrink: 0;
+  transition: border-color .2s;
+}
+.avatar-large:hover { border-color: var(--accent); }
+.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.avatar-initials {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: .05em;
+}
+.avatar-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3rem;
+  opacity: 0;
+  transition: opacity .2s;
+}
+.avatar-large:hover .avatar-overlay { opacity: 1; }
+
+.avatar-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+.avatar-hint { font-size: .75rem; color: var(--muted); }
+
+.btn-ghost-danger {
+  background: transparent;
+  border: 1px solid #ef4444;
+  color: #ef4444;
+  padding: 6px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: .82rem;
+  transition: background .2s;
+}
+.btn-ghost-danger:hover { background: rgba(239,68,68,.1); }
+
+/* Profile grid (2-col) */
+.profile-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+@media (max-width: 540px) { .profile-grid { grid-template-columns: 1fr; } }
+
+.form-select {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: .88rem;
+  outline: none;
+  transition: border-color .2s;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 36px;
+}
+.form-select:focus { border-color: var(--accent); }
+.form-select option { background: #0d1420; }
+
+.form-textarea {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: .88rem;
+  font-family: inherit;
+  resize: vertical;
+  outline: none;
+  transition: border-color .2s;
+  box-sizing: border-box;
+}
+.form-textarea:focus { border-color: var(--accent); }
+.char-count { text-align: right; font-size: .75rem; color: var(--muted); margin-top: 4px; }
+
+.form-hint { color: var(--muted); font-size: .8rem; font-weight: 400; }
+
+/* Privacy card */
+.profile-privacy {}
+.privacy-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  background: rgba(91,156,246,.06);
+  border: 1px solid rgba(91,156,246,.18);
+  border-radius: 12px;
+  padding: 16px;
+}
+.privacy-icon { font-size: 1.5rem; flex-shrink: 0; padding-top: 2px; }
+.privacy-text { flex: 1; }
+.privacy-text strong { display: block; margin-bottom: 4px; color: var(--text); font-size: .92rem; }
+.privacy-text p { font-size: .82rem; color: var(--muted); line-height: 1.5; margin: 0; }
+
+.anon-notice {
+  margin-top: 12px;
+  padding: 10px 14px;
+  background: rgba(167,139,250,.08);
+  border: 1px solid rgba(167,139,250,.25);
+  border-radius: 10px;
+  font-size: .83rem;
+  color: var(--accent2);
+}
+
+/* Toggle switch */
+.toggle-switch { display: inline-flex; cursor: pointer; flex-shrink: 0; margin-top: 4px; }
+.toggle-switch input { display: none; }
+.toggle-track {
+  width: 44px;
+  height: 24px;
+  background: var(--border);
+  border-radius: 999px;
+  position: relative;
+  transition: background .25s;
+}
+.toggle-switch input:checked + .toggle-track { background: var(--accent); }
+.toggle-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  background: #fff;
+  border-radius: 50%;
+  transition: transform .25s;
+  box-shadow: 0 1px 4px rgba(0,0,0,.4);
+}
+.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
+
+/* Actions row */
+.profile-actions { display: flex; justify-content: flex-end; gap: 12px; }
+
+/* Sidebar avatar img support */
+.user-chip-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: inherit;
+  width: 100%;
+  border-radius: 10px;
+  padding: 8px;
+  transition: background .15s;
+}
+.user-chip-link:hover { background: rgba(255,255,255,.05); }
+.user-avatar--img {
+  object-fit: cover;
+  border-radius: 50%;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+}
+
+/* form-error / form-success (if not already defined) */
+.form-error   { color: #ef4444; font-size: .85rem; padding: 8px 12px; background: rgba(239,68,68,.08); border-radius: 8px; }
+.form-success { color: #22c55e; font-size: .85rem; padding: 8px 12px; background: rgba(34,197,94,.08); border-radius: 8px; }
+
+/* Sidebar brand link */
+.sidebar-brand-link {
+  display: flex; align-items: center; gap: 10px;
+  text-decoration: none; color: inherit;
+  border-radius: 10px; padding: 6px 8px; margin: -6px -8px;
+  transition: background .15s;
+}
+.sidebar-brand-link:hover { background: rgba(255,255,255,.05); }
+.mobile-brand-link { text-decoration: none; color: inherit; font-weight: 600; font-size: 1rem; }
+
+/* ═══════════════════════════════════════════════
+   BREATHE HUB PAGE
+═══════════════════════════════════════════════ */
+.breathe-hub { max-width: 960px; margin: 0 auto; padding: 32px 24px 60px; }
+.breathe-hub-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+.breathe-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted);
+  text-decoration: none;
+  font-size: .88rem;
+  font-weight: 500;
+  padding: 8px 20px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.breathe-back-btn:hover {
+  color: var(--text);
+  border-color: var(--accent);
+  background: rgba(91,156,246,.07);
+}
+
+.breathe-hub-header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+.breathe-hub-rings {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  margin: 0 auto 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hub-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid var(--accent);
+  opacity: .2;
+  animation: hubPulse 3s ease-in-out infinite;
+}
+.hub-ring-1 { width: 60px;  height: 60px;  animation-delay: 0s; }
+.hub-ring-2 { width: 80px;  height: 80px;  animation-delay: .6s; opacity: .15; }
+.hub-ring-3 { width: 100px; height: 100px; animation-delay: 1.2s; opacity: .08; }
+@keyframes hubPulse {
+  0%, 100% { transform: scale(1); opacity: .2; }
+  50%       { transform: scale(1.12); opacity: .35; }
+}
+.hub-glyph { width: 70px; height: 70px; object-fit: contain; position: relative; z-index: 1; }
+.breathe-hub-title {
+  font-size: 2.8rem;
+  font-weight: 900;
+  letter-spacing: .2em;
+  background: linear-gradient(135deg, var(--accent), var(--accent2), #f472b6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 10px;
+}
+.breathe-hub-sub { color: var(--muted2); font-size: 1rem; max-width: 400px; margin: 0 auto; line-height: 1.6; }
+
+/* ── Deep Breath Widget ────────────────────────────────────────────────── */
+.dbw {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin: 0 auto 52px;
+  max-width: 340px;
+}
+.dbw-orb-wrap {
+  position: relative;
+  width: 180px;
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dbw-orb {
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 38% 38%, rgba(255,74,38,.22), rgba(123,74,190,.18));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+  box-shadow: 0 0 32px rgba(123,74,190,.25), 0 0 64px rgba(255,74,38,.12);
+}
+.dbw-logo {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+}
+.dbw-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 1.5px solid;
+  z-index: 1;
+  transition: transform 4s cubic-bezier(.4,0,.2,1), opacity .5s;
+}
+.dbw-ring-1 {
+  width: 140px; height: 140px;
+  border-color: rgba(232,92,136,.35);
+  opacity: .4;
+}
+.dbw-ring-2 {
+  width: 175px; height: 175px;
+  border-color: rgba(123,74,190,.22);
+  opacity: .25;
+}
+/* ring expansion matches orb phase */
+.dbw-ring-1.dbw-ring--0 { transform: scale(1.18); opacity: .55; transition: transform 4s cubic-bezier(.4,0,.2,1); }
+.dbw-ring-2.dbw-ring--0 { transform: scale(1.12); opacity: .35; transition: transform 4s cubic-bezier(.4,0,.2,1); }
+.dbw-ring-1.dbw-ring--1 { transform: scale(1.18); opacity: .55; }
+.dbw-ring-2.dbw-ring--1 { transform: scale(1.12); opacity: .35; }
+.dbw-ring-1.dbw-ring--2 { transform: scale(1);    opacity: .4;  transition: transform 6s cubic-bezier(.4,0,.2,1); }
+.dbw-ring-2.dbw-ring--2 { transform: scale(1);    opacity: .25; transition: transform 6s cubic-bezier(.4,0,.2,1); }
+.dbw-ring-1.dbw-ring--3 { transform: scale(1);    opacity: .4;  }
+.dbw-ring-2.dbw-ring--3 { transform: scale(1);    opacity: .25; }
+
+.dbw-arc {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  z-index: 3;
+  pointer-events: none;
+  transition: stroke-dashoffset 1s linear;
+}
+.dbw-arc circle:nth-child(2) { transition: stroke-dashoffset 1s linear; }
+
+.dbw-info { text-align: center; }
+.dbw-phase {
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: .12em;
+  background: linear-gradient(135deg, #FF4A26, #7B4ABE);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  min-height: 1.5em;
+}
+.dbw-tick {
+  font-size: 2.8rem;
+  font-weight: 900;
+  line-height: 1.1;
+  color: var(--text);
+  min-height: 1.1em;
+}
+.dbw-counter {
+  font-size: .85rem;
+  color: var(--muted2);
+  margin-top: 4px;
+}
+.dbw-controls { display: flex; gap: 10px; }
+.dbw-btn {
+  padding: 10px 28px;
+  border-radius: 999px;
+  border: none;
+  font-size: .92rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity .15s, transform .1s;
+}
+.dbw-btn:active { transform: scale(.96); }
+.dbw-btn--start {
+  background: linear-gradient(135deg, #FF4A26, #7B4ABE);
+  color: #fff;
+}
+.dbw-btn--stop {
+  background: rgba(255,74,38,.15);
+  color: #FF4A26;
+  border: 1px solid rgba(255,74,38,.4);
+}
+.dbw-btn--reset {
+  background: var(--surface2);
+  color: var(--muted);
+  border: 1px solid var(--border);
+}
+
+/* ── Box Breathing Page ────────────────────────────────────────────────── */
+.box-breathing-page {
+  max-width: 540px;
+  margin: 0 auto;
+  padding: 40px 24px 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.box-breathing-header {
+  text-align: center;
+  margin-bottom: 36px;
+  width: 100%;
+}
+.box-breathing-title {
+  font-size: 2rem;
+  font-weight: 900;
+  letter-spacing: .18em;
+  background: linear-gradient(135deg, #FF4A26, #7B4ABE);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin: 12px 0 8px;
+}
+.box-breathing-sub {
+  color: var(--muted2);
+  font-size: .92rem;
+  line-height: 1.6;
+}
+.box-breathing-tips {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  width: 100%;
+  margin-top: 8px;
+}
+.bbt-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 14px 16px;
+}
+.bbt-icon { font-size: 1.5rem; flex-shrink: 0; }
+.bbt-label { font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
+.bbt-desc  { font-size: .78rem; color: var(--muted2); line-height: 1.4; }
+@media (max-width: 420px) {
+  .box-breathing-tips { grid-template-columns: 1fr; }
+}
+
+/* Cards grid */
+.breathe-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+  gap: 16px;
+}
+.breathe-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 22px 20px;
+  text-align: left;
+  cursor: pointer;
+  transition: transform .2s, border-color .2s, box-shadow .2s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+  overflow: hidden;
+}
+.breathe-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  background: var(--cc, var(--accent));
+  opacity: 0;
+  transition: opacity .2s;
+}
+.breathe-card::after {
+  content: '';
+  position: absolute;
+  inset: 0; border-radius: 18px;
+  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--cc, var(--accent)) 15%, transparent) 0%, transparent 65%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity .2s;
+}
+.breathe-card:hover {
+  transform: translateY(-4px);
+  border-color: var(--cc, var(--accent));
+  box-shadow: 0 10px 36px rgba(0,0,0,.4), 0 0 0 1px var(--cc, var(--accent))33;
+}
+.breathe-card:hover::before { opacity: 1; }
+.breathe-card:hover::after  { opacity: 1; }
+
+.bc-icon {
+  width: 52px; height: 52px;
+  border-radius: 14px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+  position: relative; z-index: 1;
+}
+.bc-body { flex: 1; position: relative; z-index: 1; }
+.bc-title   { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
+.bc-tagline { font-size: .8rem; color: var(--muted); margin-bottom: 8px; font-style: italic; }
+.bc-desc    { font-size: .84rem; color: var(--muted2); line-height: 1.6; margin: 0; }
+.bc-local-note {
+  display: block;
+  margin-top: 8px;
+  font-size: .76rem;
+  color: var(--success);
+  background: rgba(45,212,165,.08);
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(45,212,165,.2);
+}
+.bc-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: .72rem;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid;
+  width: fit-content;
+  position: relative; z-index: 1;
+  letter-spacing: .02em;
+}
+
+/* Guided modal */
+.guided-modal { max-width: 460px; padding: 40px 36px; }
+.guided-header { text-align: center; margin-bottom: 24px; }
+.guided-icon { font-size: 2.8rem; display: block; margin-bottom: 10px; }
+.guided-header h2 { font-size: 1.4rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
+.guided-progress {
+  display: flex; gap: 7px; justify-content: center; margin-bottom: 32px;
+}
+.progress-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--border2);
+  transition: background .2s, transform .2s, width .2s;
+}
+.progress-dot--active { transform: scale(1.4); width: 20px; border-radius: 4px; }
+.progress-dot--done   { opacity: .8; }
+.guided-step { text-align: center; min-height: 90px; margin-bottom: 32px; padding: 0 8px; }
+.guided-step-label { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }
+.guided-step-desc  { color: var(--muted2); font-size: .93rem; line-height: 1.65; }
+.guided-actions { display: flex; gap: 10px; justify-content: center; }
+.btn-outline {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 10px 22px; border: 1px solid var(--border2); border-radius: var(--r-sm);
+  background: transparent; color: var(--muted2); font-size: .9rem; font-weight: 500;
+  cursor: pointer; transition: var(--t);
+}
+.btn-outline:hover { color: var(--text); border-color: var(--border2); background: var(--surface2); }
+
+/* ═══════════════════════════════════════════════
+   GRATITUDE JOURNAL PAGE
+═══════════════════════════════════════════════ */
+.gratitude-page { max-width: 840px; margin: 0 auto; padding: 32px 24px 60px; }
+
+.tab-toggle {
+  display: flex;
+  gap: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 4px;
+  flex-shrink: 0;
+}
+.tab-btn {
+  padding: 8px 18px;
+  border-radius: 9px;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  font-size: .87rem;
+  cursor: pointer;
+  display: flex; align-items: center; gap: 6px;
+  transition: background .2s, color .2s;
+  white-space: nowrap;
+}
+.tab-btn--active {
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff; font-weight: 600;
+  box-shadow: 0 2px 10px rgba(91,156,246,.35);
+}
+.tab-count {
+  background: rgba(255,255,255,.18);
+  border-radius: 999px;
+  padding: 1px 7px;
+  font-size: .73rem;
+}
+
+.gratitude-write  { display: flex; flex-direction: column; gap: 18px; }
+.gratitude-card   {}
+.gratitude-items  { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
+.gratitude-item-row { display: flex; align-items: center; gap: 10px; }
+.gratitude-num    { font-size: 1.1rem; font-weight: 700; color: var(--accent); width: 20px; flex-shrink: 0; }
+.gratitude-input  { flex: 1; }
+
+.gratitude-mood-row { margin-top: 4px; }
+.mood-grid {
+  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
+}
+.mood-btn {
+  display: flex; flex-direction: column; align-items: center; gap: 3px;
+  padding: 10px 14px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: border-color .15s, background .15s, transform .15s;
+  min-width: 60px;
+}
+.mood-btn:hover { transform: translateY(-2px); border-color: var(--border2); }
+.mood-btn--active { border-color: var(--accent); background: rgba(91,156,246,.12); transform: translateY(-2px); }
+.mood-emoji { font-size: 1.4rem; }
+.mood-label { font-size: .7rem; color: var(--muted); }
+.mood-btn--active .mood-label { color: var(--accent); font-weight: 600; }
+
+.gratitude-actions { display: flex; gap: 10px; margin-top: 8px; }
+
+.gratitude-tips { background: rgba(251,191,36,.05); border-color: rgba(251,191,36,.2); }
+.tips-list { margin: 0; padding-left: 20px; color: var(--muted); font-size: .85rem; line-height: 1.9; }
+
+/* Entry grid */
+.gratitude-history {}
+.gentry-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+.gentry-card {
+  padding: 18px;
+  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
+  border-left: 3px solid var(--accent2) !important;
+}
+.gentry-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
+.gentry-header {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 12px; flex-wrap: wrap;
+}
+.gentry-date   { font-size: .77rem; color: var(--muted); flex: 1; }
+.gentry-mood   { font-size: .78rem; background: rgba(91,156,246,.1); color: var(--accent); padding: 3px 9px; border-radius: 999px; }
+.gentry-delete { background: none; border: none; cursor: pointer; font-size: .9rem; opacity: .5; transition: opacity .15s; }
+.gentry-delete:hover { opacity: 1; }
+.gentry-items  { margin: 0 0 10px; padding-left: 18px; color: var(--text); font-size: .85rem; line-height: 1.8; }
+.gentry-content { font-size: .85rem; color: var(--muted); line-height: 1.6; margin: 0 0 6px; white-space: pre-wrap; }
+.gentry-content--clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.gentry-expand { background: none; border: none; color: var(--accent); font-size: .78rem; cursor: pointer; padding: 0; }
+
+.pagination {
+  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px;
+}
+.page-info { font-size: .85rem; color: var(--muted); }
+
+.empty-state {
+  text-align: center; padding: 60px 20px;
+}
+.empty-state .empty-icon { font-size: 2.8rem; margin-bottom: 12px; }
+.empty-state h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 6px; }
+.empty-state p  { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }
+
+/* ═══════════════════════════════════════════════
+   TO-DO PAGE
+═══════════════════════════════════════════════ */
+.todo-page { max-width: 680px; margin: 0 auto; padding: 32px 24px 60px; }
+
+.local-storage-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background: rgba(45,212,165,.06);
+  border: 1px solid rgba(45,212,165,.25);
+  border-radius: 12px;
+  padding: 14px 16px;
+  margin-bottom: 20px;
+}
+.lsn-icon { font-size: 1.4rem; flex-shrink: 0; }
+.local-storage-notice strong { display: block; color: #2dd4a5; font-size: .88rem; margin-bottom: 2px; }
+.local-storage-notice p { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.5; }
+
+.todo-add-card { padding: 18px; }
+.todo-add-row  { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+.todo-input    { flex: 1; min-width: 200px; }
+.todo-add-btn  { flex-shrink: 0; }
+.todo-priority-select { display: flex; gap: 6px; flex-wrap: wrap; }
+.priority-pill {
+  padding: 5px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--muted);
+  font-size: .78rem;
+  cursor: pointer;
+  transition: all .15s;
+  white-space: nowrap;
+}
+
+.todo-meta-row {
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+  margin: 16px 0;
+}
+.todo-stats     { display: flex; gap: 8px; align-items: center; flex: 1; }
+.todo-stat      { font-size: .82rem; color: var(--muted); }
+.todo-stat-sep  { color: var(--border); }
+.todo-filters   { display: flex; gap: 4px; }
+.filter-pill {
+  padding: 4px 12px; border-radius: 999px;
+  border: 1px solid var(--border); background: transparent;
+  color: var(--muted); font-size: .78rem; cursor: pointer;
+  transition: all .15s;
+}
+.filter-pill--active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+.todo-list { display: flex; flex-direction: column; gap: 8px; }
+.todo-item {
+  display: flex; align-items: center; gap: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 14px;
+  transition: border-color var(--t), opacity var(--t), transform var(--t);
+}
+.todo-item:hover { border-color: var(--border2); transform: translateX(3px); }
+.todo-item--done { opacity: .5; }
+.todo-item--done:hover { transform: none; }
+.todo-check {
+  width: 22px; height: 22px; border-radius: 50%;
+  border: 2px solid var(--border2);
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  transition: background .15s, border-color .15s, transform .15s;
+}
+.todo-check:hover { border-color: var(--success); transform: scale(1.1); }
+.check-tick { color: #fff; font-size: .75rem; font-weight: 700; }
+.todo-text-col { flex: 1; min-width: 0; }
+.todo-text {
+  display: block; font-size: .88rem; color: var(--text);
+  word-break: break-word;
+}
+.todo-item--done .todo-text { text-decoration: line-through; }
+.todo-created { font-size: .72rem; color: var(--muted); }
+.todo-pri-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  flex-shrink: 0;
+}
+.todo-delete {
+  background: none; border: none; cursor: pointer;
+  font-size: .85rem; opacity: .4; flex-shrink: 0;
+  transition: opacity .15s;
+}
+.todo-delete:hover { opacity: 1; }
+
+@media (max-width: 600px) {
+  .breathe-cards { grid-template-columns: 1fr; }
+  .gentry-grid   { grid-template-columns: 1fr; }
+  .tab-toggle    { flex-wrap: wrap; }
+}

frontend/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+)

frontend/src/pages/AssessPage.jsx

@@ -0,0 +1,248 @@
+import { useState } from 'react'
+import { api } from '../api/client'
+import { levelColor, stressIcon, ADVICE, formatDate } from '../utils'
+
+// ── Slider field ─────────────────────────────────────────────────────────────
+function Slider({ name, label, min, max, step, defaultVal, unit = '' }) {
+  const [val, setVal] = useState(defaultVal)
+  return (
+    <div className="slider-field">
+      <div className="slider-header">
+        <label>{label}</label>
+        <span className="slider-value">{val}{unit}</span>
+      </div>
+      <input type="range" name={name} min={min} max={max} step={step}
+        value={val} onChange={e => setVal(step < 1 ? parseFloat(e.target.value) : parseInt(e.target.value))} />
+      <div className="slider-range"><span>{min}</span><span>{max}</span></div>
+    </div>
+  )
+}
+
+// ── Stress arc gauge ─────────────────────────────────────────────────────────
+function StressGauge({ score, label }) {
+  const CIRC     = 2 * Math.PI * 50          // 314.16
+  const MAX_ARC  = CIRC * 0.75               // 235.6  (270° sweep)
+  const filled   = (score || 0) * MAX_ARC
+  const color    = levelColor(label)
+
+  return (
+    <div className="gauge-wrap">
+      <svg viewBox="0 0 120 120" className="gauge-svg">
+        {/* Track */}
+        <circle cx="60" cy="60" r="50" fill="none" stroke="#1a2840" strokeWidth="10"
+          strokeDasharray={`${MAX_ARC} ${CIRC - MAX_ARC}`}
+          strokeLinecap="round"
+          style={{ transform: 'rotate(-225deg)', transformOrigin: '50% 50%' }} />
+        {/* Fill */}
+        <circle cx="60" cy="60" r="50" fill="none" stroke={color} strokeWidth="10"
+          strokeDasharray={`${filled} ${CIRC - filled}`}
+          strokeLinecap="round"
+          style={{
+            transform:       'rotate(-225deg)',
+            transformOrigin: '50% 50%',
+            transition:      'stroke-dasharray 1.2s cubic-bezier(.4,0,.2,1), stroke .5s ease',
+            filter:          `drop-shadow(0 0 6px ${color}80)`,
+          }} />
+      </svg>
+      <div className="gauge-center">
+        <div className="gauge-pct" style={{ color }}>{score != null ? (score*100).toFixed(0)+'%' : '—'}</div>
+        <div className="gauge-lbl" style={{ color }}>{label || '—'}</div>
+      </div>
+    </div>
+  )
+}
+
+// ── Main page ─────────────────────────────────────────────────────────────────
+const NUMERIC = [
+  { name: 'Sleep_Duration',     label: 'Sleep Duration',      min: 0,  max: 12, step: 0.5, def: 7,   unit: ' hrs' },
+  { name: 'Sleep_Quality',      label: 'Sleep Quality',       min: 1,  max: 5,  step: 1,   def: 3,   unit: '/5'   },
+  { name: 'Work_Hours',         label: 'Work Hours / Day',    min: 0,  max: 16, step: 0.5, def: 8,   unit: ' hrs' },
+  { name: 'Physical_Activity',  label: 'Physical Activity',   min: 0,  max: 6,  step: 0.5, def: 1,   unit: ' hrs' },
+  { name: 'Screen_Time',        label: 'Screen Time',         min: 0,  max: 16, step: 0.5, def: 4,   unit: ' hrs' },
+  { name: 'Travel_Time',        label: 'Travel Time',         min: 0,  max: 6,  step: 0.5, def: 1,   unit: ' hrs' },
+  { name: 'Social_Interactions',label: 'Social Interactions', min: 0,  max: 20, step: 1,   def: 5,   unit: '/day' },
+  { name: 'Caffeine_Intake',    label: 'Caffeine Intake',     min: 0,  max: 10, step: 1,   def: 2,   unit: ' cups'},
+  { name: 'Alcohol_Intake',     label: 'Alcohol Intake',      min: 0,  max: 20, step: 1,   def: 0,   unit: ' u/wk'},
+  { name: 'Blood_Pressure',     label: 'Blood Pressure',      min: 60, max: 200,step: 1,   def: 120, unit: ' mmHg'},
+  { name: 'Cholesterol_Level',  label: 'Cholesterol Level',   min: 100,max: 400,step: 1,   def: 190, unit: ' mg/dL'},
+  { name: 'Blood_Sugar_Level',  label: 'Blood Sugar',         min: 50, max: 300,step: 1,   def: 90,  unit: ' mg/dL'},
+]
+
+const CATEGORICAL = [
+  { name: 'Gender',         label: 'Gender',         opts: ['Male','Female','Other'] },
+  { name: 'Occupation',     label: 'Occupation',     opts: ['Student','Working Professional','Homemaker','Retired','Unemployed'] },
+  { name: 'Smoking_Status', label: 'Smoking Status', opts: ['Non-Smoker','Occasional','Regular'] },
+  { name: 'Diet_Quality',   label: 'Diet Quality',   opts: ['Poor','Average','Good','Excellent'] },
+]
+
+export default function AssessPage() {
+  const [step,    setStep]    = useState('form')   // 'form' | 'result'
+  const [result,  setResult]  = useState(null)
+  const [assess,  setAssess]  = useState(null)
+  const [error,   setError]   = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e) {
+    e.preventDefault()
+    setError(''); setLoading(true)
+
+    const fd   = new FormData(e.target)
+    const psycho = {}
+    let hasPsycho = false
+
+    NUMERIC.forEach(f => {
+      const v = fd.get(f.name)
+      if (v !== null && v !== '') { psycho[f.name] = parseFloat(v); hasPsycho = true }
+    })
+    CATEGORICAL.forEach(f => {
+      const v = fd.get(f.name)
+      if (v && v !== '') { psycho[f.name] = v; hasPsycho = true }
+    })
+
+    const textNote = (fd.get('text_note') || '').trim()
+    if (!hasPsycho && !textNote) {
+      setError('Please fill in at least one section.'); setLoading(false); return
+    }
+
+    try {
+      const data = await api.post('/api/assessments', {
+        psychometric: hasPsycho ? psycho : null,
+        text_note:    textNote || null,
+      })
+      setResult(data.prediction)
+      setAssess(data.assessment)
+      setStep('result')
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (step === 'result' && result) {
+    return (
+      <div className="page">
+        <div className="page-header">
+          <h2 className="page-title">Your Results</h2>
+          <p className="page-sub">Assessment completed {assess ? formatDate(assess.created_at) : ''}</p>
+        </div>
+
+        <div className="result-layout">
+          {/* Gauge card */}
+          <div className="card result-main">
+            <h3 className="card-title">Stress Level</h3>
+            <StressGauge score={result.fused_score} label={result.fused_label} />
+            <div className="advice-box" style={{ borderLeftColor: levelColor(result.fused_label), marginTop: 20 }}>
+              {ADVICE[result.fused_label]}
+            </div>
+          </div>
+
+          {/* Breakdown */}
+          <div className="result-side">
+            <div className="card">
+              <h3 className="card-title">Breakdown</h3>
+              <div className="breakdown-list">
+                {[
+                  { label: 'Psychometric',    val: result.psycho_label, score: result.psycho_score },
+                  { label: 'Text Sentiment',  val: result.text_label,   score: result.text_score   },
+                  { label: 'Fused Result',    val: result.fused_label,  score: result.fused_score, main: true },
+                ].map((r,i) => (
+                  <div key={i} className={`breakdown-item ${r.main ? 'breakdown-item--main' : ''}`}>
+                    <div className="breakdown-key">{r.label}</div>
+                    <div className="breakdown-right">
+                      {r.val
+                        ? <>
+                            <span className="breakdown-label" style={{ color: levelColor(r.val) }}>
+                              {stressIcon(r.val)} {r.val}
+                            </span>
+                            <span className="breakdown-score">{(r.score*100).toFixed(1)}%</span>
+                          </>
+                        : <span className="muted">—</span>
+                      }
+                    </div>
+                  </div>
+                ))}
+                <div className="breakdown-item">
+                  <div className="breakdown-key">Modality</div>
+                  <span className="modality-badge">{result.modality_used}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="result-actions">
+              <button className="btn-primary" onClick={() => { setStep('form'); setResult(null) }}>
+                + New Assessment
+              </button>
+              <a href="/app/history" className="btn-secondary">View History →</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <h2 className="page-title">New Assessment</h2>
+        <p className="page-sub">Fill in any section — both are optional individually</p>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+
+        {/* Psychometric section */}
+        <div className="card section-card">
+          <div className="section-head">
+            <span className="section-icon-lg">📋</span>
+            <div>
+              <h3>Psychometric Cues</h3>
+              <p className="section-desc">Rate your lifestyle habits over the past week using the sliders.</p>
+            </div>
+            <span className="badge-optional">Optional</span>
+          </div>
+          <div className="slider-grid">
+            {NUMERIC.map(f => (
+              <Slider key={f.name} name={f.name} label={f.label}
+                min={f.min} max={f.max} step={f.step} defaultVal={f.def} unit={f.unit} />
+            ))}
+          </div>
+          <div className="cat-grid">
+            {CATEGORICAL.map(f => (
+              <div key={f.name} className="field">
+                <label>{f.label}</label>
+                <select name={f.name} defaultValue="">
+                  <option value="">— select —</option>
+                  {f.opts.map(o => <option key={o} value={o}>{o}</option>)}
+                </select>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Text note section */}
+        <div className="card section-card">
+          <div className="section-head">
+            <span className="section-icon-lg">📝</span>
+            <div>
+              <h3>Text Note</h3>
+              <p className="section-desc">Write freely about how you're feeling. Our NLP model analyses the sentiment.</p>
+            </div>
+            <span className="badge-optional">Optional</span>
+          </div>
+          <textarea name="text_note" rows={5}
+            placeholder="Today I felt… I've been experiencing… My mind keeps going to…" />
+        </div>
+
+        {error && <div className="form-error">{error}</div>}
+
+        <button type="submit" className="btn-primary btn--lg" disabled={loading}>
+          {loading
+            ? <><span className="btn-spinner" /> Analysing…</>
+            : 'Analyse My Stress →'
+          }
+        </button>
+      </form>
+    </div>
+  )
+}

frontend/src/pages/AuthPage.jsx

@@ -0,0 +1,110 @@
+import { useState } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+
+export default function AuthPage() {
+  const [searchParams]             = useSearchParams()
+  const [tab,      setTab]         = useState(searchParams.get('tab') === 'signup' ? 'signup' : 'login')
+  const [error,    setError]       = useState('')
+  const [loading,  setLoading]     = useState(false)
+
+  // Login fields
+  const [identity, setIdentity] = useState('')
+  const [loginPw,  setLoginPw]  = useState('')
+
+  // Signup fields
+  const [uname,    setUname]    = useState('')
+  const [email,    setEmail]    = useState('')
+  const [signupPw, setSignupPw] = useState('')
+
+  const { login, signup } = useAuth()
+  const navigate           = useNavigate()
+
+  async function handleLogin(e) {
+    e.preventDefault()
+    setError(''); setLoading(true)
+    try {
+      await login(identity, loginPw)
+      navigate('/app/dashboard')
+    } catch (err) { setError(err.message) }
+    finally { setLoading(false) }
+  }
+
+  async function handleSignup(e) {
+    e.preventDefault()
+    setError(''); setLoading(true)
+    try {
+      await signup(uname, email, signupPw)
+      navigate('/app/dashboard')
+    } catch (err) { setError(err.message) }
+    finally { setLoading(false) }
+  }
+
+  return (
+    <div className="auth-screen">
+      {/* Breathing rings */}
+      <div className="breath-rings">
+        {[1,2,3,4].map(i => <div key={i} className={`ring ring-${i}`} />)}
+      </div>
+
+      <div className="auth-card">
+        {/* Brand */}
+        <div className="auth-brand">
+          <img src="/logo.svg" alt="BREATHE" className="auth-logo" />
+          <p className="auth-subtitle">Stress Intelligence Platform</p>
+        </div>
+
+        {/* Tabs */}
+        <div className="auth-tabs">
+          <button className={`auth-tab ${tab==='login'  ? 'auth-tab--active' : ''}`} onClick={() => { setTab('login');  setError('') }}>Log In</button>
+          <button className={`auth-tab ${tab==='signup' ? 'auth-tab--active' : ''}`} onClick={() => { setTab('signup'); setError('') }}>Sign Up</button>
+        </div>
+
+        {error && <div className="form-error">{error}</div>}
+
+        {/* Login form */}
+        {tab === 'login' && (
+          <form className="auth-form" onSubmit={handleLogin}>
+            <div className="field">
+              <label>Email or Username</label>
+              <input type="text" placeholder="you@example.com" value={identity}
+                onChange={e => setIdentity(e.target.value)} autoComplete="username" required />
+            </div>
+            <div className="field">
+              <label>Password</label>
+              <input type="password" placeholder="••••••••" value={loginPw}
+                onChange={e => setLoginPw(e.target.value)} autoComplete="current-password" required />
+            </div>
+            <button type="submit" className="btn-primary btn--full" disabled={loading}>
+              {loading ? <span className="btn-spinner" /> : 'Log In →'}
+            </button>
+          </form>
+        )}
+
+        {/* Signup form */}
+        {tab === 'signup' && (
+          <form className="auth-form" onSubmit={handleSignup}>
+            <div className="field">
+              <label>Username</label>
+              <input type="text" placeholder="breatheuser" value={uname}
+                onChange={e => setUname(e.target.value)} autoComplete="username" required />
+            </div>
+            <div className="field">
+              <label>Email</label>
+              <input type="email" placeholder="you@example.com" value={email}
+                onChange={e => setEmail(e.target.value)} autoComplete="email" required />
+            </div>
+            <div className="field">
+              <label>Password <small>(min 8 characters)</small></label>
+              <input type="password" placeholder="••••••••" value={signupPw}
+                onChange={e => setSignupPw(e.target.value)} autoComplete="new-password" required />
+            </div>
+            <button type="submit" className="btn-primary btn--full" disabled={loading}>
+              {loading ? <span className="btn-spinner" /> : 'Create Account →'}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/pages/BoxBreathingPage.jsx

@@ -0,0 +1,47 @@
+import { Link } from 'react-router-dom'
+import DeepBreathWidget from '../components/DeepBreathWidget'
+
+export default function BoxBreathingPage() {
+  return (
+    <div className="page box-breathing-page">
+      <div className="box-breathing-header">
+        <Link to="/app/breathe" className="breathe-back-btn">← Back</Link>
+        <h1 className="box-breathing-title">Box Breathing</h1>
+        <p className="box-breathing-sub">
+          Inhale 4 · Hold 4 · Exhale 6 · Hold 2 — repeat to reset your nervous system
+        </p>
+      </div>
+      <DeepBreathWidget />
+      <div className="box-breathing-tips">
+        <div className="bbt-card">
+          <span className="bbt-icon">👃</span>
+          <div>
+            <div className="bbt-label">Inhale</div>
+            <div className="bbt-desc">Breathe in slowly and deeply through your nose</div>
+          </div>
+        </div>
+        <div className="bbt-card">
+          <span className="bbt-icon">🤫</span>
+          <div>
+            <div className="bbt-label">Hold</div>
+            <div className="bbt-desc">Hold your breath gently — no tension</div>
+          </div>
+        </div>
+        <div className="bbt-card">
+          <span className="bbt-icon">💨</span>
+          <div>
+            <div className="bbt-label">Exhale</div>
+            <div className="bbt-desc">Release slowly through your mouth</div>
+          </div>
+        </div>
+        <div className="bbt-card">
+          <span className="bbt-icon">🌿</span>
+          <div>
+            <div className="bbt-label">Rest</div>
+            <div className="bbt-desc">Pause before the next breath</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/BreathePage.jsx

@@ -0,0 +1,211 @@
+import { useNavigate, Link } from 'react-router-dom'
+import { useTheme } from '../context/ThemeContext'
+
+const CARDS = [
+  {
+    icon: '✍️',
+    title: 'Gratitude Journal',
+    tagline: 'Write what you are thankful for',
+    desc: 'Record 3 things you are grateful for each day. Stored in your account — revisit any time.',
+    color: '#fbbf24',
+    to: '/app/gratitude',
+    badge: 'Saved to account',
+    badgeIcon: '☁️',
+  },
+  {
+    icon: '🌬️',
+    title: 'Box Breathing',
+    tagline: '4-4-4-4 calm technique',
+    desc: 'Inhale 4 counts → Hold 4 → Exhale 4 → Hold 4. Repeat to reset your nervous system.',
+    color: '#5b9cf6',
+    to: '/app/breathe/box',
+    badge: 'Guided exercise',
+    badgeIcon: '▶',
+  },
+  {
+    icon: '✅',
+    title: 'Daily To-Do',
+    tagline: 'Clear your mind, clear your tasks',
+    desc: 'Add tasks for today. Helps reduce mental load and stress. Saved locally in your browser.',
+    color: '#2dd4a5',
+    to: '/app/todo',
+    badge: 'Saved locally',
+    badgeIcon: '💾',
+    localNote: true,
+  },
+  {
+    icon: '🧘',
+    title: 'Body Scan',
+    tagline: 'Release physical tension',
+    desc: 'Lie down, close your eyes, and slowly scan from head to toe — releasing tension as you go.',
+    color: '#a78bfa',
+    to: '/app/breathe/body-scan',
+    badge: 'Guided exercise',
+    badgeIcon: '▶',
+  },
+  {
+    icon: '🎵',
+    title: 'Sound Bath',
+    tagline: 'Let calming sounds wash over you',
+    desc: 'Put on headphones, choose calming music or nature sounds, and let each note ease your mind.',
+    color: '#f472b6',
+    to: '/app/breathe/sound-bath',
+    badge: 'Guided exercise',
+    badgeIcon: '▶',
+  },
+  {
+    icon: '💪',
+    title: 'Progressive Relaxation',
+    tagline: 'Tense & release muscle groups',
+    desc: 'Tense each muscle group for 5 seconds, then release. Work from feet to face while breathing slowly.',
+    color: '#fb923c',
+    to: '/app/breathe/progressive',
+    badge: 'Guided exercise',
+    badgeIcon: '▶',
+  },
+]
+
+// Steps for guided exercises (not linked to own page)
+const GUIDED = {
+  '/app/breathe/body-scan': {
+    title: 'Body Scan',
+    icon: '🧘',
+    color: '#a78bfa',
+    steps: [
+      { label: 'Lie down',      duration: null, desc: 'Find a comfortable position, close your eyes' },
+      { label: 'Head & neck',   duration: null, desc: 'Notice any tension. Let it go on each exhale' },
+      { label: 'Shoulders',     duration: null, desc: 'Drop your shoulders away from your ears' },
+      { label: 'Chest & belly', duration: null, desc: 'Feel your breath rise and fall naturally' },
+      { label: 'Arms & hands',  duration: null, desc: 'Let your arms feel heavy and relaxed' },
+      { label: 'Legs & feet',   duration: null, desc: 'Release all tension from your lower body' },
+    ],
+  },
+  '/app/breathe/sound-bath': {
+    title: 'Sound Bath',
+    icon: '🎵',
+    color: '#f472b6',
+    steps: [
+      { label: 'Prepare',   duration: null, desc: 'Put on headphones and sit or lie comfortably' },
+      { label: 'Choose',    duration: null, desc: 'Play calming music, singing bowls, or nature sounds' },
+      { label: 'Receive',   duration: null, desc: 'Close your eyes, let each sound wash over you' },
+      { label: 'Breathe',   duration: null, desc: 'Match your breath to the rhythm of the music' },
+    ],
+  },
+  '/app/breathe/progressive': {
+    title: 'Progressive Relaxation',
+    icon: '💪',
+    color: '#fb923c',
+    steps: [
+      { label: 'Feet',       duration: 5, desc: 'Tense your feet tightly, then release' },
+      { label: 'Calves',     duration: 5, desc: 'Tense your calves, hold, then release' },
+      { label: 'Thighs',     duration: 5, desc: 'Squeeze your thigh muscles, then let go' },
+      { label: 'Abdomen',    duration: 5, desc: 'Tighten your core, hold, then release' },
+      { label: 'Hands',      duration: 5, desc: 'Make fists, hold tight, then open slowly' },
+      { label: 'Shoulders',  duration: 5, desc: 'Raise shoulders to ears, hold, then drop' },
+      { label: 'Face',       duration: 5, desc: 'Scrunch your face, hold, then relax completely' },
+    ],
+  },
+}
+
+import { useState } from 'react'
+
+function GuidedModal({ path, onClose }) {
+  const guide  = GUIDED[path]
+  const [step, setStep] = useState(0)
+  if (!guide) return null
+  const s = guide.steps[step]
+  const last = step === guide.steps.length - 1
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-box guided-modal" onClick={e => e.stopPropagation()}>
+        <button className="modal-close" onClick={onClose}>✕</button>
+        <div className="guided-header">
+          <span className="guided-icon" style={{ color: guide.color }}>{guide.icon}</span>
+          <h2 style={{ color: guide.color }}>{guide.title}</h2>
+        </div>
+        <div className="guided-progress">
+          {guide.steps.map((_, i) => (
+            <div key={i} className={`progress-dot ${i === step ? 'progress-dot--active' : i < step ? 'progress-dot--done' : ''}`} style={i <= step ? { background: guide.color } : {}} />
+          ))}
+        </div>
+        <div className="guided-step">
+          <div className="guided-step-label" style={{ color: guide.color }}>
+            {s.label} {s.duration ? `· ${s.duration}s` : ''}
+          </div>
+          <p className="guided-step-desc">{s.desc}</p>
+        </div>
+        <div className="guided-actions">
+          {step > 0 && (
+            <button className="btn-outline" onClick={() => setStep(s => s - 1)}>← Back</button>
+          )}
+          {!last
+            ? <button className="btn-primary" onClick={() => setStep(s => s + 1)}>Next →</button>
+            : <button className="btn-primary" onClick={onClose}>✓ Done</button>
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function BreathePage() {
+  const navigate = useNavigate()
+  const { theme, toggle } = useTheme()
+  const [guided, setGuided] = useState(null)
+
+  function handleCard(to) {
+    if (GUIDED[to]) {
+      setGuided(to)
+    } else {
+      navigate(to)
+    }
+  }
+
+  return (
+    <div className="page breathe-hub">
+      <div className="breathe-hub-header">
+        <div className="breathe-hub-rings">
+          <div className="hub-ring hub-ring-1" />
+          <div className="hub-ring hub-ring-2" />
+          <div className="hub-ring hub-ring-3" />
+          <img src="/logo.svg" alt="BREATHE" className="hub-glyph" />
+        </div>
+        <h1 className="breathe-hub-title">BREATHE</h1>
+        <p className="breathe-hub-sub">Choose an activity to calm your mind and reduce stress</p>
+        <div className="breathe-hub-actions">
+          <Link to="/app/dashboard" className="breathe-back-btn">
+            ◈ Dashboard
+          </Link>
+          <Link to="/app/profile" className="breathe-back-btn">
+            ◉ Profile
+          </Link>
+          <button className="breathe-back-btn" onClick={toggle}>
+            {theme === 'dark' ? '☀️ Light' : '🌙 Dark'}
+          </button>
+        </div>
+      </div>
+
+      <div className="breathe-cards">
+        {CARDS.map((c, i) => (
+          <button key={i} className="breathe-card" style={{ '--cc': c.color }} onClick={() => handleCard(c.to)}>
+            <div className="bc-icon" style={{ background: c.color + '22', color: c.color }}>{c.icon}</div>
+            <div className="bc-body">
+              <div className="bc-title">{c.title}</div>
+              <div className="bc-tagline">{c.tagline}</div>
+              <p className="bc-desc">{c.desc}</p>
+              {c.localNote && (
+                <span className="bc-local-note">💾 Only stored in your browser — never sent to our servers</span>
+              )}
+            </div>
+            <div className="bc-badge" style={{ color: c.color, borderColor: c.color + '44', background: c.color + '11' }}>
+              <span>{c.badgeIcon}</span> {c.badge}
+            </div>
+          </button>
+        ))}
+      </div>
+
+      {guided && <GuidedModal path={guided} onClose={() => setGuided(null)} />}
+    </div>
+  )
+}

frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,317 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
+  ResponsiveContainer, PieChart, Pie, Cell, Legend,
+} from 'recharts'
+import { api } from '../api/client'
+import { useAuth } from '../context/AuthContext'
+import { levelColor, levelBg, stressIcon, formatDate } from '../utils'
+
+const STAT_ICONS = ['📊', '🎯', '📈', '↕']
+
+const ACTIVITIES = [
+  {
+    icon: '🌬️',
+    title: 'Box Breathing',
+    duration: '5 min',
+    color: '#5b9cf6',
+    steps: ['Inhale for 4 counts', 'Hold for 4 counts', 'Exhale for 4 counts', 'Hold for 4 counts'],
+  },
+  {
+    icon: '🧘',
+    title: 'Body Scan',
+    duration: '10 min',
+    color: '#a78bfa',
+    steps: ['Lie down comfortably', 'Close your eyes', 'Slowly scan from head to toe', 'Release tension as you go'],
+  },
+  {
+    icon: '🚶',
+    title: 'Mindful Walk',
+    duration: '15 min',
+    color: '#2dd4a5',
+    steps: ['Step outside or find space', 'Walk at a natural pace', 'Notice 5 things you can see', 'Focus only on each step'],
+  },
+  {
+    icon: '✍️',
+    title: 'Gratitude Journal',
+    duration: '5 min',
+    color: '#fbbf24',
+    steps: ['Open a blank page', "Write 3 things you're grateful for", 'Add one small win today', 'Read it back slowly'],
+  },
+  {
+    icon: '🎵',
+    title: 'Sound Bath',
+    duration: '10 min',
+    color: '#f472b6',
+    steps: ['Put on headphones', 'Choose calming music or nature sounds', 'Sit or lie still', 'Let each sound wash over you'],
+  },
+  {
+    icon: '💪',
+    title: 'Progressive Relaxation',
+    duration: '8 min',
+    color: '#fb923c',
+    steps: ['Tense each muscle group for 5 s', 'Release and notice the relaxation', 'Work from feet to face', 'Breathe slowly throughout'],
+  },
+]
+
+function ActivityPanel() {
+  const [open, setOpen] = useState(null)
+  return (
+    <div className="card activity-panel">
+      <h3 className="card-title">🌿 Stress Relief Activities</h3>
+      <div className="activity-list">
+        {ACTIVITIES.map((a, i) => (
+          <div key={i} className="activity-item" style={{ '--ac': a.color }}>
+            <button className="activity-header" onClick={() => setOpen(open === i ? null : i)}>
+              <span className="activity-icon" style={{ background: a.color + '22', color: a.color }}>{a.icon}</span>
+              <div className="activity-meta">
+                <span className="activity-title">{a.title}</span>
+                <span className="activity-dur">{a.duration}</span>
+              </div>
+              <span className={`activity-chevron ${open === i ? 'activity-chevron--open' : ''}`}>›</span>
+            </button>
+            {open === i && (
+              <ol className="activity-steps">
+                {a.steps.map((s, j) => <li key={j}>{s}</li>)}
+              </ol>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default function DashboardPage() {
+  const { user }                        = useAuth()
+  const navigate                        = useNavigate()
+  const [summary,  setSummary]          = useState(null)
+  const [timeline, setTimeline]         = useState([])
+  const [loading,  setLoading]          = useState(true)
+  const [selected, setSelected]         = useState(null)   // modal
+
+  useEffect(() => {
+    api.get('/api/assessments/summary').then(d => {
+      setSummary(d.summary)
+      setTimeline(d.timeline.map(t => ({
+        ...t,
+        score: +(t.fused_score * 100).toFixed(1),
+      })))
+    }).catch(console.error).finally(() => setLoading(false))
+  }, [])
+
+  const greeting = (() => {
+    const h = new Date().getHours()
+    if (h < 12) return 'Good morning'
+    if (h < 18) return 'Good afternoon'
+    return 'Good evening'
+  })()
+
+  if (loading) return <div className="page-loader"><div className="spinner" /></div>
+
+  const empty = !summary || !summary.total_assessments
+
+  // Distribution data for PieChart
+  const distData = summary?.label_distribution
+    ? Object.entries(summary.label_distribution).map(([name, value]) => ({ name, value }))
+    : []
+
+  // Trend
+  let trend = null
+  if (timeline.length >= 2) {
+    const diff = timeline[timeline.length-1].fused_score - timeline[timeline.length-2].fused_score
+    trend = diff > 0.01 ? { label: '▲ Rising', cls: 'trend--up' }
+          : diff < -0.01 ? { label: '▼ Falling', cls: 'trend--down' }
+          : { label: '→ Stable', cls: 'trend--flat' }
+  }
+
+  const stats = [
+    { icon: '📋', label: 'Total Assessments', value: summary?.total_assessments ?? '—' },
+    { icon: '🎯', label: 'Latest Level',       value: summary?.latest_label ?? '—',       color: levelColor(summary?.latest_label) },
+    { icon: '📊', label: 'Average Score',      value: summary?.avg_score ? (summary.avg_score*100).toFixed(1)+'%' : '—' },
+    { icon: '↕',  label: 'Trend',              value: trend?.label ?? '—',                cls: trend?.cls },
+  ]
+
+  const recent = [...timeline].reverse().slice(0, 6)
+
+  return (
+    <div className="page">
+      {/* Header */}
+      <div className="page-header">
+        <div>
+          <h2 className="page-title">{greeting}, {user?.username} 👋</h2>
+          <p className="page-sub">Here's your stress overview</p>
+        </div>
+        <button className="btn-primary" onClick={() => navigate('/app/assess')}>
+          + New Assessment
+        </button>
+      </div>
+
+      {empty ? (
+        <div className="dash-layout">
+          <div className="dash-main">
+            <div className="empty-dashboard">
+              <div className="empty-icon">🫁</div>
+              <h3>No assessments yet</h3>
+              <p>Take your first stress assessment to see your dashboard.</p>
+              <button className="btn-primary" onClick={() => navigate('/app/assess')}>Start Assessment →</button>
+            </div>
+          </div>
+          <div className="dash-side"><ActivityPanel /></div>
+        </div>
+      ) : (
+        <div className="dash-layout">
+          <div className="dash-main">
+          {/* Stat cards */}
+          <div className="stat-grid">
+            {stats.map((s,i) => (
+              <div key={i} className="stat-card">
+                <div className="stat-icon">{s.icon}</div>
+                <div className="stat-value" style={s.color ? {color: s.color} : {}}>
+                  <span className={s.cls || ''}>{s.value}</span>
+                </div>
+                <div className="stat-label">{s.label}</div>
+              </div>
+            ))}
+          </div>
+
+          {/* Timeline chart */}
+          <div className="card">
+            <h3 className="card-title">Stress Score Timeline</h3>
+            <ResponsiveContainer width="100%" height={230}>
+              <AreaChart data={timeline} margin={{ top: 10, right: 10, left: -10, bottom: 0 }}>
+                <defs>
+                  <linearGradient id="scoreGrad" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%"  stopColor="#5b9cf6" stopOpacity={0.35} />
+                    <stop offset="95%" stopColor="#5b9cf6" stopOpacity={0}    />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" stroke="#1a2840" />
+                <XAxis dataKey="date" stroke="#445566" tick={{ fontSize: 10, fill: '#64748b' }} tickLine={false} />
+                <YAxis domain={[0,100]} stroke="#445566" tick={{ fontSize: 10, fill: '#64748b' }} tickLine={false}
+                  tickFormatter={v => v + '%'} />
+                <Tooltip
+                  contentStyle={{ background: '#0d1420', border: '1px solid #1a2840', borderRadius: 10, fontSize: 12 }}
+                  labelStyle={{ color: '#94a3b8' }}
+                  formatter={(v, n, p) => [`${v}% — ${p.payload.fused_label}`, 'Score']}
+                />
+                <Area type="monotone" dataKey="score" stroke="#5b9cf6" strokeWidth={2}
+                  fill="url(#scoreGrad)" dot={{ fill: '#5b9cf6', r: 3, strokeWidth: 0 }} activeDot={{ r: 5 }} />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+
+          <div className="two-col">
+            {/* Distribution donut */}
+            <div className="card">
+              <h3 className="card-title">Level Distribution</h3>
+              <ResponsiveContainer width="100%" height={220}>
+                <PieChart>
+                  <Pie data={distData} cx="50%" cy="45%" innerRadius={55} outerRadius={80}
+                    dataKey="value" paddingAngle={3}>
+                    {distData.map((d,i) => <Cell key={i} fill={levelColor(d.name)} />)}
+                  </Pie>
+                  <Tooltip contentStyle={{ background: '#0d1420', border: '1px solid #1a2840', borderRadius: 10, fontSize: 12 }} />
+                  <Legend iconType="circle" iconSize={8}
+                    formatter={(v) => <span style={{ color: '#94a3b8', fontSize: 12 }}>{v}</span>} />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+
+            {/* Recent */}
+            <div className="card">
+              <h3 className="card-title">Recent Assessments</h3>
+              <div className="recent-list">
+                {recent.map(r => (
+                  <div key={r.id} className="recent-item" onClick={() => setSelected(r.id)}>
+                    <div className="recent-left">
+                      <span className="level-dot" style={{ background: levelColor(r.fused_label) }} />
+                      <div>
+                        <div className="recent-label" style={{ color: levelColor(r.fused_label) }}>
+                          {stressIcon(r.fused_label)} {r.fused_label}
+                        </div>
+                        <div className="recent-date">{r.date}</div>
+                      </div>
+                    </div>
+                    <div className="recent-score">{(r.fused_score * 100).toFixed(0)}%</div>
+                  </div>
+                ))}
+                {!recent.length && <p className="empty-text">No assessments yet.</p>}
+              </div>
+            </div>
+          </div>
+          </div>
+          <div className="dash-side"><ActivityPanel /></div>
+        </div>
+      )}
+
+      {/* Detail modal */}
+      {selected && <DetailModal id={selected} onClose={() => setSelected(null)} />}
+    </div>
+  )
+}
+
+function DetailModal({ id, onClose }) {
+  const [data, setData] = useState(null)
+
+  useEffect(() => {
+    api.get(`/api/assessments/${id}`).then(d => setData(d.assessment)).catch(console.error)
+  }, [id])
+
+  if (!data) return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-box" onClick={e => e.stopPropagation()}>
+        <div className="spinner" style={{ margin: '40px auto' }} />
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-box" onClick={e => e.stopPropagation()}>
+        <button className="modal-close" onClick={onClose}>✕</button>
+        <h3 className="modal-title">Assessment Detail</h3>
+        <AssessmentDetail a={data} />
+      </div>
+    </div>
+  )
+}
+
+export function AssessmentDetail({ a }) {
+  const ADVICE = {
+    Minimal:  'Great job! Keep up your healthy routines.',
+    Mild:     'Mild stress detected. A short walk or 5-minute breathing exercise can help.',
+    Moderate: 'Moderate stress. Schedule a break and reduce screen time.',
+    Severe:   'High stress. Prioritise rest and reach out to someone you trust.',
+    Critical: 'Critical stress indicators. Please speak with a mental health professional — you are not alone.',
+  }
+  return (
+    <>
+      <div className="detail-grid">
+        {[
+          ['Date', formatDate(a.created_at)],
+          ['Fused Level', <span style={{color: levelColor(a.fused_label)}}>{stressIcon(a.fused_label)} {a.fused_label}</span>],
+          ['Fused Score', a.fused_score != null ? (a.fused_score*100).toFixed(1)+'%' : '—'],
+          ['Psychometric', a.psycho_label ? `${a.psycho_label} (${(a.psycho_score*100).toFixed(1)}%)` : '—'],
+          ['Text Sentiment', a.text_label ? `${a.text_label} (${(a.text_score*100).toFixed(1)}%)` : '—'],
+          ['Modality', a.modality_used],
+        ].map(([k,v],i) => (
+          <div key={i} className="detail-item">
+            <div className="detail-key">{k}</div>
+            <div className="detail-val">{v}</div>
+          </div>
+        ))}
+      </div>
+      {a.text_note && (
+        <div className="detail-note">
+          <div className="detail-note-label">📝 Note</div>
+          <p>{a.text_note}</p>
+        </div>
+      )}
+      <div className="advice-box" style={{ borderLeftColor: levelColor(a.fused_label) }}>
+        {ADVICE[a.fused_label] || ''}
+      </div>
+    </>
+  )
+}

frontend/src/pages/GratitudePage.jsx

@@ -0,0 +1,249 @@
+import { useState, useEffect } from 'react'
+import { api } from '../api/client'
+
+const MOODS = [
+  { emoji: '😊', label: 'Happy'     },
+  { emoji: '😌', label: 'Calm'      },
+  { emoji: '🙏', label: 'Grateful'  },
+  { emoji: '💪', label: 'Strong'    },
+  { emoji: '😔', label: 'Low'       },
+  { emoji: '😤', label: 'Stressed'  },
+]
+
+function formatDate(iso) {
+  return new Date(iso).toLocaleDateString('en-US', {
+    day: 'numeric', month: 'short', year: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
+
+export default function GratitudePage() {
+  const [tab,     setTab]     = useState('write')   // 'write' | 'history'
+  const [items,   setItems]   = useState(['', '', ''])
+  const [content, setContent] = useState('')
+  const [mood,    setMood]    = useState('')
+  const [saving,  setSaving]  = useState(false)
+  const [flash,   setFlash]   = useState('')
+  const [entries, setEntries] = useState([])
+  const [page,    setPage]    = useState(1)
+  const [meta,    setMeta]    = useState({ total: 0, pages: 1, has_next: false, has_prev: false })
+  const [loading, setLoading] = useState(false)
+  const [expanded, setExpanded] = useState(null)
+
+  // Load history when tab switches or page changes
+  useEffect(() => {
+    if (tab !== 'history') return
+    setLoading(true)
+    api.get(`/api/gratitude?page=${page}`)
+      .then(d => {
+        setEntries(d.entries)
+        setMeta({ total: d.total, pages: d.pages, has_next: d.has_next, has_prev: d.has_prev })
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false))
+  }, [tab, page])
+
+  function handleItemChange(i, val) {
+    setItems(prev => prev.map((v, idx) => idx === i ? val : v))
+  }
+
+  async function handleSave() {
+    const filledItems = items.filter(s => s.trim())
+    if (!filledItems.length && !content.trim()) {
+      setFlash('error:Please write at least one gratitude item or a note.')
+      return
+    }
+    setSaving(true)
+    setFlash('')
+    try {
+      await api.post('/api/gratitude', {
+        content: content.trim(),
+        mood:    mood,
+        items:   filledItems,
+      })
+      setItems(['', '', ''])
+      setContent('')
+      setMood('')
+      setFlash('ok:Entry saved! 🌟')
+      setTimeout(() => setFlash(''), 3000)
+    } catch (err) {
+      setFlash('error:' + (err.message || 'Failed to save'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleDelete(id) {
+    try {
+      await api.del(`/api/gratitude/${id}`)
+      setEntries(prev => prev.filter(e => e.id !== id))
+      setMeta(m => ({ ...m, total: m.total - 1 }))
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  const flashType = flash.startsWith('ok:') ? 'ok' : flash.startsWith('error:') ? 'error' : ''
+  const flashMsg  = flash.replace(/^(ok|error):/, '')
+
+  return (
+    <div className="page gratitude-page">
+      <div className="page-header">
+        <div>
+          <h2 className="page-title">✍️ Gratitude Journal</h2>
+          <p className="page-sub">Cultivate positivity — one entry at a time</p>
+        </div>
+        <div className="tab-toggle">
+          <button className={`tab-btn ${tab === 'write' ? 'tab-btn--active' : ''}`} onClick={() => setTab('write')}>
+            ✏️ Write
+          </button>
+          <button className={`tab-btn ${tab === 'history' ? 'tab-btn--active' : ''}`} onClick={() => { setTab('history'); setPage(1) }}>
+            📖 My Entries {meta.total > 0 && <span className="tab-count">{meta.total}</span>}
+          </button>
+        </div>
+      </div>
+
+      {/* ── Write tab ─────────────────────────────── */}
+      {tab === 'write' && (
+        <div className="gratitude-write">
+          <div className="card gratitude-card">
+            <h3 className="card-title">🌟 Today I am grateful for…</h3>
+            <div className="gratitude-items">
+              {items.map((val, i) => (
+                <div key={i} className="gratitude-item-row">
+                  <span className="gratitude-num">{i + 1}.</span>
+                  <input
+                    className="form-input gratitude-input"
+                    type="text"
+                    placeholder={[
+                      'Something that made you smile today',
+                      'A person who helped or inspired you',
+                      'A simple pleasure you enjoyed',
+                    ][i]}
+                    value={val}
+                    onChange={e => handleItemChange(i, e.target.value)}
+                    maxLength={300}
+                  />
+                </div>
+              ))}
+            </div>
+
+            <div className="gratitude-mood-row">
+              <label className="form-label">How are you feeling right now?</label>
+              <div className="mood-grid">
+                {MOODS.map(m => (
+                  <button
+                    key={m.label}
+                    type="button"
+                    className={`mood-btn ${mood === m.label ? 'mood-btn--active' : ''}`}
+                    onClick={() => setMood(prev => prev === m.label ? '' : m.label)}
+                  >
+                    <span className="mood-emoji">{m.emoji}</span>
+                    <span className="mood-label">{m.label}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="form-group" style={{ marginTop: 16 }}>
+              <label className="form-label">Additional thoughts <span className="form-hint">(optional)</span></label>
+              <textarea
+                className="form-textarea"
+                rows={4}
+                maxLength={2000}
+                placeholder="Any reflections, wins, or moments you want to remember from today…"
+                value={content}
+                onChange={e => setContent(e.target.value)}
+              />
+              <div className="char-count">{content.length} / 2000</div>
+            </div>
+
+            {flashMsg && (
+              <p className={flashType === 'ok' ? 'form-success' : 'form-error'}>{flashMsg}</p>
+            )}
+
+            <div className="gratitude-actions">
+              <button className="btn-primary" onClick={handleSave} disabled={saving}>
+                {saving ? 'Saving…' : '💾 Save Entry'}
+              </button>
+              <button className="btn-outline" onClick={() => { setItems(['','','']); setContent(''); setMood('') }}>
+                Clear
+              </button>
+            </div>
+          </div>
+
+          <div className="card gratitude-tips">
+            <h3 className="card-title">💡 Tips for gratitude journaling</h3>
+            <ul className="tips-list">
+              <li>Be specific — "my friend called to check in" beats "good friends"</li>
+              <li>Include small things — a warm drink, sunlight, a quiet moment</li>
+              <li>Write daily for at least 21 days to build the habit</li>
+              <li>Re-read old entries on tough days to remind yourself of the good</li>
+            </ul>
+          </div>
+        </div>
+      )}
+
+      {/* ── History tab ───────────────────────────── */}
+      {tab === 'history' && (
+        <div className="gratitude-history">
+          {loading && <div className="page-loader"><div className="spinner" /></div>}
+          {!loading && entries.length === 0 && (
+            <div className="empty-state">
+              <div className="empty-icon">📖</div>
+              <h3>No entries yet</h3>
+              <p>Your saved gratitude entries will appear here.</p>
+              <button className="btn-primary" onClick={() => setTab('write')}>Write your first entry →</button>
+            </div>
+          )}
+          {!loading && entries.length > 0 && (
+            <>
+              <div className="gentry-grid">
+                {entries.map(e => (
+                  <div key={e.id} className="gentry-card card">
+                    <div className="gentry-header">
+                      <div className="gentry-date">{formatDate(e.created_at)}</div>
+                      {e.mood && <span className="gentry-mood">{MOODS.find(m => m.label === e.mood)?.emoji} {e.mood}</span>}
+                      <button className="gentry-delete" onClick={() => handleDelete(e.id)} title="Delete entry">🗑</button>
+                    </div>
+
+                    {e.items && e.items.length > 0 && (
+                      <ol className="gentry-items">
+                        {e.items.map((item, i) => <li key={i}>{item}</li>)}
+                      </ol>
+                    )}
+
+                    {e.content && (
+                      <>
+                        <p className={`gentry-content ${expanded === e.id ? '' : 'gentry-content--clamp'}`}>
+                          {e.content}
+                        </p>
+                        {e.content.length > 120 && (
+                          <button className="gentry-expand" onClick={() => setExpanded(prev => prev === e.id ? null : e.id)}>
+                            {expanded === e.id ? 'Show less ↑' : 'Read more ↓'}
+                          </button>
+                        )}
+                      </>
+                    )}
+                  </div>
+                ))}
+              </div>
+
+              {(meta.has_prev || meta.has_next) && (
+                <div className="pagination">
+                  <button className="btn-outline" disabled={!meta.has_prev} onClick={() => setPage(p => p - 1)}>
+                    ← Prev
+                  </button>
+                  <span className="page-info">Page {page} of {meta.pages}</span>
+                  <button className="btn-outline" disabled={!meta.has_next} onClick={() => setPage(p => p + 1)}>
+                    Next →
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/pages/HistoryPage.jsx

@@ -0,0 +1,121 @@
+import { useEffect, useState } from 'react'
+import { api } from '../api/client'
+import { levelColor, levelBg, stressIcon, formatDate } from '../utils'
+import { AssessmentDetail } from './DashboardPage'
+
+export default function HistoryPage() {
+  const [items,    setItems]    = useState([])
+  const [page,     setPage]     = useState(1)
+  const [pages,    setPages]    = useState(1)
+  const [total,    setTotal]    = useState(0)
+  const [loading,  setLoading]  = useState(true)
+  const [selected, setSelected] = useState(null)
+
+  useEffect(() => { load(page) }, [page])
+
+  function load(p) {
+    setLoading(true)
+    api.get(`/api/assessments?page=${p}&per_page=12`)
+      .then(d => {
+        setItems(d.assessments)
+        setPages(d.pages)
+        setTotal(d.total)
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false))
+  }
+
+  return (
+    <div className="page">
+      <div className="page-header">
+        <div>
+          <h2 className="page-title">Assessment History</h2>
+          <p className="page-sub">{total} total assessments</p>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="page-loader"><div className="spinner" /></div>
+      ) : !items.length ? (
+        <div className="empty-dashboard">
+          <div className="empty-icon">📋</div>
+          <h3>No assessments yet</h3>
+          <p>Take your first assessment to build your history.</p>
+          <a href="/app/assess" className="btn-primary">Start Assessment →</a>
+        </div>
+      ) : (
+        <>
+          <div className="history-grid">
+            {items.map(a => (
+              <div key={a.id} className="history-card" onClick={() => setSelected(a)}
+                style={{ '--level-color': levelColor(a.fused_label), '--level-bg': levelBg(a.fused_label) }}>
+                <div className="hc-top">
+                  <span className="hc-badge" style={{
+                    color:      levelColor(a.fused_label),
+                    background: levelBg(a.fused_label),
+                  }}>
+                    {stressIcon(a.fused_label)} {a.fused_label}
+                  </span>
+                  <span className="hc-score">{a.fused_score != null ? (a.fused_score*100).toFixed(0)+'%' : '—'}</span>
+                </div>
+                <div className="hc-bars">
+                  <div className="hc-bar-wrap">
+                    <span className="hc-bar-label">Overall</span>
+                    <div className="hc-bar-track">
+                      <div className="hc-bar-fill"
+                        style={{ width: `${(a.fused_score||0)*100}%`, background: levelColor(a.fused_label) }} />
+                    </div>
+                  </div>
+                  {a.psycho_score != null && (
+                    <div className="hc-bar-wrap">
+                      <span className="hc-bar-label">Psychometric</span>
+                      <div className="hc-bar-track">
+                        <div className="hc-bar-fill"
+                          style={{ width: `${(a.psycho_score||0)*100}%`, background: '#5b9cf6' }} />
+                      </div>
+                    </div>
+                  )}
+                  {a.text_score != null && (
+                    <div className="hc-bar-wrap">
+                      <span className="hc-bar-label">Text</span>
+                      <div className="hc-bar-track">
+                        <div className="hc-bar-fill"
+                          style={{ width: `${(a.text_score||0)*100}%`, background: '#a78bfa' }} />
+                      </div>
+                    </div>
+                  )}
+                </div>
+                <div className="hc-footer">
+                  <span className="hc-modality">{a.modality_used}</span>
+                  <span className="hc-date">{formatDate(a.created_at)}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Pagination */}
+          {pages > 1 && (
+            <div className="pagination">
+              <button className="page-btn" onClick={() => setPage(p => Math.max(1, p-1))} disabled={page===1}>‹</button>
+              {Array.from({length: pages}, (_, i) => i+1).map(p => (
+                <button key={p} className={`page-btn ${p===page ? 'page-btn--active' : ''}`} onClick={() => setPage(p)}>{p}</button>
+              ))}
+              <button className="page-btn" onClick={() => setPage(p => Math.min(pages, p+1))} disabled={page===pages}>›</button>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Modal */}
+      {selected && (
+        <div className="modal-overlay" onClick={() => setSelected(null)}>
+          <div className="modal-box" onClick={e => e.stopPropagation()}>
+            <button className="modal-close" onClick={() => setSelected(null)}>✕</button>
+            <h3 className="modal-title">Assessment Detail</h3>
+            <AssessmentDetail a={selected} />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/pages/LandingPage.jsx

@@ -0,0 +1,216 @@
+import { useEffect, useRef } from 'react'
+import { Link } from 'react-router-dom'
+
+const FEATURES = [
+  {
+    icon: '📋',
+    title: 'Psychometric Analysis',
+    desc: 'Track 12 lifestyle cues — sleep, work hours, screen time, caffeine, and more — through intuitive sliders calibrated to your daily routine.',
+    color: '#5b9cf6',
+  },
+  {
+    icon: '🧠',
+    title: 'NLP Text Sentiment',
+    desc: 'Write freely in your journal. Our fine-tuned RoBERTa model reads between the lines to detect stress, anxiety, and emotional patterns.',
+    color: '#a78bfa',
+  },
+  {
+    icon: '⚡',
+    title: 'Fusion Intelligence',
+    desc: 'A stacking ensemble of LightGBM, CatBoost, and XGBoost fuses both signals into one precise stress score — updated every session.',
+    color: '#2dd4a5',
+  },
+  {
+    icon: '📊',
+    title: 'Live Dashboard',
+    desc: 'Area charts, pie distributions, and an animated SVG gauge surface your stress trends over time so you can act before burnout hits.',
+    color: '#fbbf24',
+  },
+]
+
+const STEPS = [
+  { n: '01', title: 'Create your account', desc: 'Sign up in seconds — no credit card, no noise.' },
+  { n: '02', title: 'Log your day',         desc: 'Adjust sliders and write a short note about how you feel.' },
+  { n: '03', title: 'Get your score',       desc: 'Receive an instant stress level with personalised advice and history charts.' },
+]
+
+const LEVELS = [
+  { label: 'Minimal',  color: '#2dd4a5', bg: 'rgba(45,212,165,.15)',  range: '0 – 20%',  desc: 'Feeling balanced and grounded.' },
+  { label: 'Mild',     color: '#86efac', bg: 'rgba(134,239,172,.15)', range: '20 – 40%', desc: 'Minor tension — easily managed.' },
+  { label: 'Moderate', color: '#fbbf24', bg: 'rgba(251,191,36,.15)',  range: '40 – 60%', desc: 'Noticeable stress — worth watching.' },
+  { label: 'Severe',   color: '#fb923c', bg: 'rgba(251,146,60,.15)',  range: '60 – 80%', desc: 'High pressure — take action today.' },
+  { label: 'Critical', color: '#f87171', bg: 'rgba(248,113,113,.15)', range: '80 – 100%', desc: 'Seek support. You matter.' },
+]
+
+// ── Animated counter ──────────────────────────────────────────────────────────
+function Counter({ to, suffix = '' }) {
+  const ref = useRef(null)
+  useEffect(() => {
+    let start = 0
+    const step = Math.ceil(to / 60)
+    const id   = setInterval(() => {
+      start += step
+      if (start >= to) { start = to; clearInterval(id) }
+      if (ref.current) ref.current.textContent = start.toLocaleString() + suffix
+    }, 20)
+    return () => clearInterval(id)
+  }, [to, suffix])
+  return <span ref={ref}>0{suffix}</span>
+}
+
+export default function LandingPage() {
+  return (
+    <div className="lp">
+
+      {/* ── Nav ─────────────────────────────────────────────────────────── */}
+      <nav className="lp-nav">
+        <div className="lp-nav-inner">
+          <div className="lp-logo">
+            <img src="/logo.svg" alt="BREATHE" className="lp-logo-img" />
+          </div>
+          <div className="lp-nav-links">
+            <a href="#features" className="lp-nav-link">Features</a>
+            <a href="#how"      className="lp-nav-link">How it works</a>
+            <a href="#levels"   className="lp-nav-link">Stress levels</a>
+            <Link to="/app/dashboard" className="lp-nav-link">Dashboard</Link>
+          </div>
+          <div className="lp-nav-cta">
+            <Link to="/auth"            className="lp-btn-ghost">Log in</Link>
+            <Link to="/auth?tab=signup" className="lp-btn-solid">Sign up free</Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* ── Hero ────────────────────────────────────────────────────────── */}
+      <section className="lp-hero">
+        {/* Breathing rings */}
+        <div className="lp-rings" aria-hidden>
+          <div className="lp-ring lp-ring-1" />
+          <div className="lp-ring lp-ring-2" />
+          <div className="lp-ring lp-ring-3" />
+          <div className="lp-ring lp-ring-4" />
+          <div className="lp-ring lp-ring-5" />
+        </div>
+
+        <div className="lp-hero-content">
+          <div className="lp-hero-badge">✦ Powered by RoBERTa + LightGBM ensemble</div>
+          <h1 className="lp-hero-h1">
+            Know your stress<br />
+            <span className="lp-gradient-text">before it knows you</span>
+          </h1>
+          <p className="lp-hero-sub">
+            BREATHE fuses psychometric lifestyle data and free-text journaling through a
+            state-of-the-art ML pipeline — giving you a precise, actionable stress score every day.
+          </p>
+          <div className="lp-hero-btns">
+            <Link to="/auth?tab=signup" className="lp-btn-hero-primary">
+              Get started free <span className="lp-btn-arrow">→</span>
+            </Link>
+            <a href="#how" className="lp-btn-hero-ghost">See how it works</a>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Stats bar ───────────────────────────────────────────────────── */}
+      <div className="lp-stats">
+        <div className="lp-stat">
+          <div className="lp-stat-num"><Counter to={5} suffix=" levels" /></div>
+          <div className="lp-stat-lbl">Stress classification</div>
+        </div>
+        <div className="lp-stat-div" />
+        <div className="lp-stat">
+          <div className="lp-stat-num"><Counter to={12} suffix="+" /></div>
+          <div className="lp-stat-lbl">Psychometric cues tracked</div>
+        </div>
+        <div className="lp-stat-div" />
+        <div className="lp-stat">
+          <div className="lp-stat-num"><Counter to={2} suffix=" models" /></div>
+          <div className="lp-stat-lbl">Fused ML signals</div>
+        </div>
+        <div className="lp-stat-div" />
+        <div className="lp-stat">
+          <div className="lp-stat-num"><Counter to={100} suffix="% private" /></div>
+          <div className="lp-stat-lbl">Your data, your device</div>
+        </div>
+      </div>
+
+      {/* ── Features ────────────────────────────────────────────────────── */}
+      <section className="lp-section" id="features">
+        <div className="lp-section-label">Features</div>
+        <h2 className="lp-section-h2">Everything you need to<br />understand your mental load</h2>
+        <div className="lp-features">
+          {FEATURES.map(f => (
+            <div key={f.title} className="lp-feat-card" style={{ '--fc': f.color }}>
+              <div className="lp-feat-icon" style={{ background: f.color + '20', color: f.color }}>{f.icon}</div>
+              <h3 className="lp-feat-title">{f.title}</h3>
+              <p  className="lp-feat-desc">{f.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── How it works ────────────────────────────────────────────────── */}
+      <section className="lp-section lp-section--alt" id="how">
+        <div className="lp-section-label">Process</div>
+        <h2 className="lp-section-h2">Three steps to clarity</h2>
+        <div className="lp-steps">
+          {STEPS.map((s, i) => (
+            <div key={s.n} className="lp-step">
+              <div className="lp-step-n">{s.n}</div>
+              {i < STEPS.length - 1 && <div className="lp-step-line" aria-hidden />}
+              <div className="lp-step-body">
+                <h3 className="lp-step-title">{s.title}</h3>
+                <p  className="lp-step-desc">{s.desc}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── Stress levels ───────────────────────────────────────────────── */}
+      <section className="lp-section" id="levels">
+        <div className="lp-section-label">Classification</div>
+        <h2 className="lp-section-h2">Five precise stress levels</h2>
+        <p className="lp-section-sub">Every assessment maps to one of five evidence-informed tiers — each with tailored advice.</p>
+        <div className="lp-levels">
+          {LEVELS.map(l => (
+            <div key={l.label} className="lp-level-card" style={{ '--lc': l.color, '--lb': l.bg }}>
+              <div className="lp-level-top">
+                <span className="lp-level-badge" style={{ color: l.color, background: l.bg }}>{l.label}</span>
+                <span className="lp-level-range">{l.range}</span>
+              </div>
+              <p className="lp-level-desc">{l.desc}</p>
+              <div className="lp-level-bar-track">
+                <div className="lp-level-bar-fill" style={{ background: l.color }} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── CTA ─────────────────────────────────────────────────────────── */}
+      <section className="lp-cta">
+        <div className="lp-cta-glow" aria-hidden />
+        <h2 className="lp-cta-h2">Start breathing easier today</h2>
+        <p className="lp-cta-sub">Free forever. No app to download. Runs in your browser.</p>
+        <Link to="/auth?tab=signup" className="lp-btn-hero-primary lp-btn--xl">
+          Create your account <span className="lp-btn-arrow">→</span>
+        </Link>
+      </section>
+
+      {/* ── Footer ────────────��─────────────────────────────────────────── */}
+      <footer className="lp-footer">
+        <div className="lp-footer-logo">
+          <img src="/logo.svg" alt="BREATHE" className="lp-footer-logo-img" />
+        </div>
+        <p className="lp-footer-copy">© {new Date().getFullYear()} BREATHE. MIT License.</p>
+        <div className="lp-footer-links">
+          <Link to="/auth"            className="lp-footer-link">Log in</Link>
+          <Link to="/auth?tab=signup" className="lp-footer-link">Sign up</Link>
+          <a href="#features"         className="lp-footer-link">Features</a>
+        </div>
+      </footer>
+
+    </div>
+  )
+}

frontend/src/pages/ProfilePage.jsx

@@ -0,0 +1,251 @@
+import { useState, useEffect, useRef } from 'react'
+import { useAuth } from '../context/AuthContext'
+import { api } from '../api/client'
+
+const GENDERS = [
+  'male', 'female', 'non-binary', 'prefer not to say', 'other',
+]
+
+const WORKING_STATUSES = [
+  'employed full-time',
+  'employed part-time',
+  'self-employed',
+  'student',
+  'unemployed',
+  'homemaker',
+  'retired',
+  'prefer not to say',
+]
+
+export default function ProfilePage() {
+  const { user, setUser } = useAuth()
+  const fileRef = useRef(null)
+
+  const [form, setForm] = useState({
+    avatar:         '',
+    gender:         '',
+    working_status: '',
+    dob:            '',
+    bio:            '',
+    is_anonymous:   false,
+  })
+
+  const [saving,  setSaving]  = useState(false)
+  const [success, setSuccess] = useState('')
+  const [error,   setError]   = useState('')
+  const [avatarPreview, setAvatarPreview] = useState('')
+
+  // Load current profile on mount
+  useEffect(() => {
+    api.get('/api/profile').then(d => {
+      const p = d.profile
+      setForm({
+        avatar:         p.avatar         || '',
+        gender:         p.gender         || '',
+        working_status: p.working_status || '',
+        dob:            p.dob            || '',
+        bio:            p.bio            || '',
+        is_anonymous:   p.is_anonymous   || false,
+      })
+      setAvatarPreview(p.avatar || '')
+    }).catch(() => {})
+  }, [])
+
+  function handleField(e) {
+    const { name, value, type, checked } = e.target
+    setForm(f => ({ ...f, [name]: type === 'checkbox' ? checked : value }))
+  }
+
+  function handleAvatarChange(e) {
+    const file = e.target.files[0]
+    if (!file) return
+    if (file.size > 2 * 1024 * 1024) {
+      setError('Image must be smaller than 2 MB')
+      return
+    }
+    const reader = new FileReader()
+    reader.onload = ev => {
+      setAvatarPreview(ev.target.result)
+      setForm(f => ({ ...f, avatar: ev.target.result }))
+    }
+    reader.readAsDataURL(file)
+  }
+
+  function removeAvatar() {
+    setAvatarPreview('')
+    setForm(f => ({ ...f, avatar: '' }))
+    if (fileRef.current) fileRef.current.value = ''
+  }
+
+  async function handleSave(e) {
+    e.preventDefault()
+    setError('')
+    setSuccess('')
+    setSaving(true)
+    try {
+      // Upload avatar separately if changed
+      await api.post('/api/profile/avatar', { avatar: form.avatar })
+
+      // Update other fields
+      const res = await api.put('/api/profile', {
+        bio:            form.bio,
+        gender:         form.gender,
+        working_status: form.working_status,
+        dob:            form.dob,
+        is_anonymous:   form.is_anonymous,
+      })
+      if (setUser) setUser(res.profile)
+      setSuccess('Profile saved!')
+      setTimeout(() => setSuccess(''), 3000)
+    } catch (err) {
+      setError(err.message || 'Failed to save profile')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const initials = (user?.display_name || user?.username || 'U').slice(0, 2).toUpperCase()
+
+  return (
+    <div className="profile-page">
+      <div className="profile-header-bar">
+        <h1 className="page-title">My Profile</h1>
+        <p className="page-sub">Manage your personal information and privacy settings.</p>
+      </div>
+
+      <form className="profile-form" onSubmit={handleSave}>
+
+        {/* ── Avatar ──────────────────────────────── */}
+        <section className="profile-section">
+          <h2 className="section-title">Profile Photo</h2>
+          <div className="avatar-upload-row">
+            <div className="avatar-large" onClick={() => fileRef.current?.click()}>
+              {avatarPreview
+                ? <img src={avatarPreview} alt="avatar" className="avatar-img" />
+                : <span className="avatar-initials">{initials}</span>
+              }
+              <div className="avatar-overlay">📷</div>
+            </div>
+            <div className="avatar-actions">
+              <button type="button" className="btn-outline" onClick={() => fileRef.current?.click()}>
+                Upload Photo
+              </button>
+              {avatarPreview && (
+                <button type="button" className="btn-ghost-danger" onClick={removeAvatar}>
+                  Remove
+                </button>
+              )}
+              <p className="avatar-hint">JPG, PNG, GIF or WebP · max 2 MB</p>
+            </div>
+            <input
+              ref={fileRef}
+              type="file"
+              accept="image/*"
+              style={{ display: 'none' }}
+              onChange={handleAvatarChange}
+            />
+          </div>
+        </section>
+
+        {/* ── About you ───────────────────────────── */}
+        <section className="profile-section">
+          <h2 className="section-title">About You</h2>
+
+          <div className="profile-grid">
+            <div className="form-group">
+              <label className="form-label">Gender</label>
+              <select name="gender" className="form-select" value={form.gender} onChange={handleField}>
+                <option value="">Prefer not to say / skip</option>
+                {GENDERS.map(g => (
+                  <option key={g} value={g}>{g.charAt(0).toUpperCase() + g.slice(1)}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">Working Status</label>
+              <select name="working_status" className="form-select" value={form.working_status} onChange={handleField}>
+                <option value="">Select status</option>
+                {WORKING_STATUSES.map(s => (
+                  <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">Date of Birth</label>
+              <input
+                type="date"
+                name="dob"
+                className="form-input"
+                value={form.dob}
+                max={new Date().toISOString().split('T')[0]}
+                onChange={handleField}
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* ── Bio ─────────────────────────────────── */}
+        <section className="profile-section">
+          <h2 className="section-title">Short Bio</h2>
+          <div className="form-group">
+            <label className="form-label">Tell us a little about yourself <span className="form-hint">(optional)</span></label>
+            <textarea
+              name="bio"
+              className="form-textarea"
+              rows={4}
+              maxLength={500}
+              placeholder="e.g. Software engineer, hobby runner, cat parent..."
+              value={form.bio}
+              onChange={handleField}
+            />
+            <div className="char-count">{form.bio.length} / 500</div>
+          </div>
+        </section>
+
+        {/* ── Privacy ─────────────────────────────── */}
+        <section className="profile-section profile-privacy">
+          <h2 className="section-title">Privacy</h2>
+          <div className="privacy-card">
+            <div className="privacy-icon">🕵️</div>
+            <div className="privacy-text">
+              <strong>Stay Anonymous</strong>
+              <p>
+                When enabled, your name is replaced with <em>"Anonymous"</em> in shared views and exports.
+                Your data is never deleted — only your identity is hidden.
+              </p>
+            </div>
+            <label className="toggle-switch">
+              <input
+                type="checkbox"
+                name="is_anonymous"
+                checked={form.is_anonymous}
+                onChange={handleField}
+              />
+              <span className="toggle-track">
+                <span className="toggle-thumb" />
+              </span>
+            </label>
+          </div>
+          {form.is_anonymous && (
+            <p className="anon-notice">
+              🔒 Anonymous mode is <strong>on</strong> — your display name will appear as "Anonymous" to others.
+            </p>
+          )}
+        </section>
+
+        {/* ── Actions ─────────────────────────────── */}
+        {error   && <p className="form-error">{error}</p>}
+        {success && <p className="form-success">{success}</p>}
+
+        <div className="profile-actions">
+          <button type="submit" className="btn-primary" disabled={saving}>
+            {saving ? 'Saving…' : 'Save Profile'}
+          </button>
+        </div>
+
+      </form>
+    </div>
+  )
+}

frontend/src/pages/TodoPage.jsx

@@ -0,0 +1,180 @@
+import { useState, useEffect } from 'react'
+
+const STORAGE_KEY = 'breathe_todos'
+
+function loadTodos() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []
+  } catch {
+    return []
+  }
+}
+
+function saveTodos(todos) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+}
+
+function genId() {
+  return Date.now().toString(36) + Math.random().toString(36).slice(2, 6)
+}
+
+const PRIORITIES = [
+  { value: 'high',   label: '🔴 High'   },
+  { value: 'medium', label: '🟡 Medium' },
+  { value: 'low',    label: '🟢 Low'    },
+]
+
+export default function TodoPage() {
+  const [todos,    setTodos]    = useState(loadTodos)
+  const [input,    setInput]    = useState('')
+  const [priority, setPriority] = useState('medium')
+  const [filter,   setFilter]   = useState('all')   // all | active | done
+
+  // Persist to localStorage whenever todos change
+  useEffect(() => {
+    saveTodos(todos)
+  }, [todos])
+
+  function addTodo() {
+    const text = input.trim()
+    if (!text) return
+    setTodos(prev => [
+      { id: genId(), text, priority, done: false, createdAt: new Date().toISOString() },
+      ...prev,
+    ])
+    setInput('')
+  }
+
+  function toggle(id) {
+    setTodos(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t))
+  }
+
+  function deleteTodo(id) {
+    setTodos(prev => prev.filter(t => t.id !== id))
+  }
+
+  function clearDone() {
+    setTodos(prev => prev.filter(t => !t.done))
+  }
+
+  const visible = todos.filter(t => {
+    if (filter === 'active') return !t.done
+    if (filter === 'done')   return t.done
+    return true
+  })
+
+  const doneCount   = todos.filter(t => t.done).length
+  const activeCount = todos.filter(t => !t.done).length
+
+  const priColor = { high: '#ef4444', medium: '#fbbf24', low: '#22c55e' }
+
+  return (
+    <div className="page todo-page">
+      <div className="page-header">
+        <div>
+          <h2 className="page-title">✅ Daily To-Do</h2>
+          <p className="page-sub">Clear your mental load, one task at a time</p>
+        </div>
+      </div>
+
+      {/* Local-storage notice */}
+      <div className="local-storage-notice">
+        <span className="lsn-icon">💾</span>
+        <div>
+          <strong>Saved in your browser only</strong>
+          <p>Tasks are stored locally on this device and are never sent to our servers. Clearing your browser data will remove them.</p>
+        </div>
+      </div>
+
+      {/* Add task */}
+      <div className="card todo-add-card">
+        <div className="todo-add-row">
+          <input
+            className="form-input todo-input"
+            type="text"
+            placeholder="Add a new task…"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && addTodo()}
+            maxLength={200}
+          />
+          <div className="todo-priority-select">
+            {PRIORITIES.map(p => (
+              <button
+                key={p.value}
+                type="button"
+                className={`priority-pill ${priority === p.value ? 'priority-pill--active' : ''}`}
+                style={priority === p.value ? { borderColor: priColor[p.value], background: priColor[p.value] + '22', color: priColor[p.value] } : {}}
+                onClick={() => setPriority(p.value)}
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+          <button className="btn-primary todo-add-btn" onClick={addTodo} disabled={!input.trim()}>
+            + Add
+          </button>
+        </div>
+      </div>
+
+      {/* Stats + filter */}
+      <div className="todo-meta-row">
+        <div className="todo-stats">
+          <span className="todo-stat">{activeCount} remaining</span>
+          <span className="todo-stat-sep">·</span>
+          <span className="todo-stat">{doneCount} done</span>
+        </div>
+        <div className="todo-filters">
+          {['all', 'active', 'done'].map(f => (
+            <button
+              key={f}
+              className={`filter-pill ${filter === f ? 'filter-pill--active' : ''}`}
+              onClick={() => setFilter(f)}
+            >
+              {f.charAt(0).toUpperCase() + f.slice(1)}
+            </button>
+          ))}
+        </div>
+        {doneCount > 0 && (
+          <button className="btn-ghost-danger" onClick={clearDone}>Clear done</button>
+        )}
+      </div>
+
+      {/* Task list */}
+      {visible.length === 0 && (
+        <div className="empty-state">
+          <div className="empty-icon">🎉</div>
+          <h3>{filter === 'done' ? 'No completed tasks' : 'Nothing here yet'}</h3>
+          <p>{filter === 'done' ? 'Complete a task to see it here.' : 'Add your first task above to get started.'}</p>
+        </div>
+      )}
+
+      <div className="todo-list">
+        {visible.map(t => (
+          <div key={t.id} className={`todo-item ${t.done ? 'todo-item--done' : ''}`}>
+            <button
+              className="todo-check"
+              style={t.done ? { borderColor: '#22c55e', background: '#22c55e' } : {}}
+              onClick={() => toggle(t.id)}
+              aria-label="Toggle complete"
+            >
+              {t.done && <span className="check-tick">✓</span>}
+            </button>
+            <div className="todo-text-col">
+              <span className="todo-text">{t.text}</span>
+              <span className="todo-created">
+                Added {new Date(t.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+              </span>
+            </div>
+            <span
+              className="todo-pri-dot"
+              style={{ background: priColor[t.priority] }}
+              title={t.priority + ' priority'}
+            />
+            <button className="todo-delete" onClick={() => deleteTodo(t.id)} aria-label="Delete">🗑</button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

frontend/src/utils.js

@@ -0,0 +1,43 @@
+export const LEVEL_COLORS = {
+  Minimal:  '#2dd4a5',
+  Mild:     '#86efac',
+  Moderate: '#fbbf24',
+  Severe:   '#fb923c',
+  Critical: '#f87171',
+}
+
+export const LEVEL_BG = {
+  Minimal:  'rgba(45,212,165,.15)',
+  Mild:     'rgba(134,239,172,.15)',
+  Moderate: 'rgba(251,191,36,.15)',
+  Severe:   'rgba(251,146,60,.15)',
+  Critical: 'rgba(248,113,113,.15)',
+}
+
+export const STRESS_ICONS = {
+  Minimal:  '🟢',
+  Mild:     '🟡',
+  Moderate: '🟠',
+  Severe:   '🔴',
+  Critical: '🚨',
+}
+
+export const ADVICE = {
+  Minimal:  'Great job! Your stress levels are minimal. Keep up your healthy routines and sleep schedule.',
+  Mild:     'Mild stress detected. Consider a short walk or 5-minute breathing exercise today.',
+  Moderate: 'Moderate stress detected. Try scheduling a proper break, reduce screen time and stay hydrated.',
+  Severe:   'High stress detected. Please prioritise rest, reach out to someone you trust, and consider reducing workload.',
+  Critical: 'Critical stress indicators found. We strongly recommend speaking with a mental health professional. You are not alone.',
+}
+
+export const levelColor = l => LEVEL_COLORS[l] || '#5b9cf6'
+export const levelBg    = l => LEVEL_BG[l]     || 'rgba(91,156,246,.15)'
+export const stressIcon = l => STRESS_ICONS[l] || '⚪'
+
+export function formatDate(iso) {
+  if (!iso) return '—'
+  return new Date(iso).toLocaleString(undefined, {
+    year: 'numeric', month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}

frontend/static/css/main.css

@@ -0,0 +1,565 @@
+/* ═══════════════════════════════════════════════
+   BREATHE — Main Stylesheet
+   ═══════════════════════════════════════════════ */
+
+:root {
+  --bg:         #0e1117;
+  --surface:    #161b27;
+  --surface2:   #1e2535;
+  --border:     #2a3348;
+  --accent:     #4f8ef7;
+  --accent2:    #7c5cfc;
+  --text:       #e2e8f0;
+  --text-muted: #7a8aa0;
+  --success:    #4ade80;
+  --warning:    #fbbf24;
+  --danger:     #f87171;
+
+  /* Stress level colours */
+  --minimal:   #4ade80;
+  --mild:      #86efac;
+  --moderate:  #fbbf24;
+  --severe:    #fb923c;
+  --critical:  #f87171;
+
+  --radius:     14px;
+  --radius-sm:  8px;
+  --shadow:     0 4px 24px rgba(0,0,0,.4);
+  --transition: 0.2s ease;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: 'Inter', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 15px;
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+/* ── Utilities ───────────────────────────────── */
+.hidden     { display: none !important; }
+.mt-sm      { margin-top: 12px; }
+.full-width { width: 100%; }
+
+/* ── Screens ─────────────────────────────────── */
+.screen { display: none; }
+.screen.active { display: block; }
+
+/* ══════════════════════════════════════════════
+   AUTH
+══════════════════════════════════════════════ */
+.auth-bg {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background:
+    radial-gradient(ellipse at 20% 30%, rgba(79,142,247,.15) 0%, transparent 60%),
+    radial-gradient(ellipse at 80% 70%, rgba(124,92,252,.15) 0%, transparent 60%),
+    var(--bg);
+}
+
+.auth-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 40px 36px;
+  width: 100%;
+  max-width: 420px;
+  box-shadow: var(--shadow);
+}
+
+.brand {
+  text-align: center;
+  margin-bottom: 28px;
+}
+.brand-icon    { font-size: 2.8rem; display: block; margin-bottom: 6px; }
+.brand-name    { font-size: 2rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
+.brand-tagline { color: var(--text-muted); font-size: .85rem; margin-top: 4px; }
+
+/* Tabs */
+.tab-bar {
+  display: flex;
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+  padding: 4px;
+  margin-bottom: 24px;
+}
+.tab {
+  flex: 1;
+  padding: 8px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: .9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+}
+.tab.active {
+  background: var(--surface2);
+  color: var(--text);
+  box-shadow: 0 2px 8px rgba(0,0,0,.3);
+}
+
+/* Auth forms */
+.auth-form { display: none; }
+.auth-form.active { display: block; }
+
+.field { margin-bottom: 16px; }
+.field label {
+  display: block;
+  font-size: .82rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+  letter-spacing: .03em;
+  text-transform: uppercase;
+}
+.field label small { text-transform: none; font-weight: 400; }
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+select,
+textarea {
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: .92rem;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--transition);
+}
+input:focus, select:focus, textarea:focus {
+  border-color: var(--accent);
+}
+select option { background: var(--surface); }
+textarea { resize: vertical; }
+
+.form-error {
+  background: rgba(248,113,113,.12);
+  border: 1px solid rgba(248,113,113,.4);
+  border-radius: var(--radius-sm);
+  color: var(--danger);
+  padding: 10px 14px;
+  font-size: .88rem;
+  margin-bottom: 14px;
+}
+
+/* Buttons */
+.btn-primary {
+  padding: 11px 22px;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  border: none;
+  border-radius: var(--radius-sm);
+  color: #fff;
+  font-size: .95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity var(--transition), transform var(--transition);
+}
+.btn-primary:hover  { opacity: .9; transform: translateY(-1px); }
+.btn-primary:active { opacity: 1;  transform: none; }
+
+.btn-secondary {
+  padding: 10px 20px;
+  background: transparent;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  color: var(--accent);
+  font-size: .9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  display: inline-block;
+}
+.btn-secondary:hover { background: rgba(79,142,247,.1); }
+
+.btn-ghost {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: var(--transition);
+}
+.btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }
+.btn-ghost.small { padding: 6px 12px; font-size: .82rem; }
+
+/* ══════════════════════════════════════════════
+   APP LAYOUT
+══════════════════════════════════════════════ */
+#app-screen { display: flex; min-height: 100vh; }
+
+/* Sidebar */
+.sidebar {
+  width: 230px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  flex-shrink: 0;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 20px 20px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 16px;
+}
+.brand-icon { font-size: 1.5rem; }
+.brand-name-sm { font-size: 1.1rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
+
+.sidebar-nav { flex: 1; padding: 0 12px; }
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  font-size: .9rem;
+  font-weight: 500;
+  cursor: pointer;
+  margin-bottom: 4px;
+  transition: var(--transition);
+  text-align: left;
+}
+.nav-item:hover  { background: var(--surface2); color: var(--text); }
+.nav-item.active { background: var(--surface2); color: var(--accent); }
+.nav-icon        { font-size: 1rem; }
+
+.sidebar-footer {
+  padding: 16px 20px 0;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.user-avatar { font-size: 1.2rem; }
+.user-name   { font-size: .88rem; font-weight: 500; color: var(--text); }
+
+/* Main content */
+.main-content {
+  flex: 1;
+  padding: 32px 36px;
+  overflow-y: auto;
+  max-width: 1100px;
+}
+
+.view { display: none; }
+.view.active { display: block; }
+
+/* Page header */
+.page-header  { margin-bottom: 28px; }
+.page-header h2 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  background: linear-gradient(90deg, var(--text), var(--text-muted));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.page-sub { color: var(--text-muted); margin-top: 4px; font-size: .9rem; }
+
+/* ══════════════════════════════════════════════
+   CARDS
+══════════════════════════════════════════════ */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  margin-bottom: 20px;
+  box-shadow: var(--shadow);
+}
+.card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  font-size: .8rem;
+}
+
+/* Stats row */
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+.stat-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px 22px;
+  transition: var(--transition);
+}
+.stat-card:hover { border-color: var(--accent); }
+.stat-value {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1;
+  margin-bottom: 6px;
+}
+.stat-label {
+  font-size: .78rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+}
+
+/* Charts */
+.chart-card { }
+.chart-wrap { position: relative; height: 250px; }
+.donut-wrap { max-width: 300px; height: 280px; margin: 0 auto; }
+
+/* ══════════════════════════════════════════════
+   ASSESSMENT FORM
+══════════════════════════════════════════════ */
+.section-card { margin-bottom: 20px; }
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+.section-title h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text);
+  text-transform: none;
+  letter-spacing: 0;
+  margin: 0;
+}
+.section-icon  { font-size: 1.2rem; }
+.section-badge {
+  font-size: .72rem;
+  padding: 2px 8px;
+  border-radius: 20px;
+  font-weight: 500;
+}
+.section-badge.optional {
+  background: rgba(122,138,160,.15);
+  color: var(--text-muted);
+  border: 1px solid rgba(122,138,160,.3);
+}
+.section-desc { color: var(--text-muted); font-size: .86rem; margin-bottom: 18px; }
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 14px;
+}
+
+/* ══════════════════════════════════════════════
+   RESULT CARD
+══════════════════════════════════════════════ */
+.result-card { }
+
+.result-gauge-wrap {
+  display: flex;
+  justify-content: center;
+  margin: 12px 0 20px;
+}
+.gauge-circle {
+  position: relative;
+  width: 160px;
+  height: 160px;
+}
+.gauge-circle svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.gauge-bg  { fill: none; stroke: var(--surface2); stroke-width: 12; }
+.gauge-arc {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 12;
+  stroke-linecap: round;
+  transition: stroke-dasharray 1s ease, stroke 0.5s ease;
+}
+.gauge-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.gauge-score { font-size: 1.8rem; font-weight: 700; color: var(--text); }
+.gauge-label { font-size: .78rem; color: var(--text-muted); }
+
+.result-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
+.result-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: var(--surface2);
+  border-radius: var(--radius-sm);
+}
+.result-key { font-size: .85rem; color: var(--text-muted); }
+.result-val { font-size: .9rem; font-weight: 600; }
+
+.result-advice {
+  padding: 14px 16px;
+  border-radius: var(--radius-sm);
+  font-size: .9rem;
+  line-height: 1.6;
+  margin-top: 8px;
+  border-left: 4px solid var(--accent);
+  background: rgba(79,142,247,.07);
+  color: var(--text);
+}
+
+/* Stress level colour helpers */
+.level-minimal  { color: var(--minimal); }
+.level-mild     { color: var(--mild); }
+.level-moderate { color: var(--warning); }
+.level-severe   { color: var(--severe); }
+.level-critical { color: var(--critical); }
+
+/* ══════════════════════════════════════════════
+   ASSESSMENT LIST / HISTORY
+══════════════════════════════════════════════ */
+.assessment-list.full { max-height: none; }
+.empty-state { color: var(--text-muted); text-align: center; padding: 32px 0; font-size: .92rem; }
+
+.assessment-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 16px;
+  background: var(--surface2);
+  border-radius: var(--radius-sm);
+  margin-bottom: 10px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: var(--transition);
+}
+.assessment-item:hover { border-color: var(--accent); }
+
+.assess-badge {
+  min-width: 90px;
+  text-align: center;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: .78rem;
+  font-weight: 600;
+}
+.assess-date { font-size: .82rem; color: var(--text-muted); flex: 1; }
+.assess-score {
+  font-size: .88rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+.assess-modality {
+  font-size: .75rem;
+  color: var(--text-muted);
+  background: var(--bg);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.level-bg-minimal  { background: rgba(74,222,128,.15); color: var(--minimal); }
+.level-bg-mild     { background: rgba(134,239,172,.15); color: var(--mild); }
+.level-bg-moderate { background: rgba(251,191,36,.15);  color: var(--warning); }
+.level-bg-severe   { background: rgba(251,146,60,.15);  color: var(--severe); }
+.level-bg-critical { background: rgba(248,113,113,.15); color: var(--critical); }
+
+/* ── Pagination ──────────────────────────────── */
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+.page-btn {
+  padding: 6px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: .85rem;
+  transition: var(--transition);
+}
+.page-btn:hover, .page-btn.active {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ══════════════════════════════════════════════
+   MODAL
+══════════════════════════════════════════════ */
+.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
+.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
+.modal-box {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px 32px;
+  width: 90%;
+  max-width: 540px;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow);
+  z-index: 1;
+}
+.modal-box h3 { font-size: 1.1rem; margin-bottom: 16px; }
+.modal-close {
+  position: absolute;
+  top: 14px;
+  right: 16px;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+
+.modal-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.modal-kv-item { background: var(--surface2); padding: 10px 14px; border-radius: var(--radius-sm); }
+.modal-kv-key  { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing:.04em; }
+.modal-kv-val  { font-size: .95rem; font-weight: 600; margin-top: 2px; }
+
+/* ══════════════════════════════════════════════
+   RESPONSIVE
+══════════════════════════════════════════════ */
+@media (max-width: 768px) {
+  .sidebar { display: none; }
+  .main-content { padding: 20px 16px; }
+  .stats-row { grid-template-columns: repeat(2, 1fr); }
+  .form-grid { grid-template-columns: 1fr; }
+}

frontend/static/js/app.js

@@ -0,0 +1,494 @@
+/* ═══════════════════════════════════════════════
+   BREATHE — Front-end Application
+   ═══════════════════════════════════════════════ */
+
+const API = "";   // same-origin; change to http://localhost:5000 if running separately
+
+const ADVICE = {
+  Minimal:  "Great job! Your stress levels are minimal. Keep up your healthy routines and sleep schedule.",
+  Mild:     "Your stress is mild. Consider a short walk or 5-minute breathing exercise today.",
+  Moderate: "Moderate stress detected. Try to schedule a proper break, reduce screen time and stay hydrated.",
+  Severe:   "High stress detected. Please prioritise rest, reach out to someone you trust, and consider reducing workload.",
+  Critical: "Critical stress indicators found. We strongly recommend speaking with a mental health professional. You are not alone.",
+};
+
+const LEVEL_COLOURS = {
+  Minimal:  "#4ade80",
+  Mild:     "#86efac",
+  Moderate: "#fbbf24",
+  Severe:   "#fb923c",
+  Critical: "#f87171",
+};
+
+/* ─── Helpers ─────────────────────────────────────────────── */
+const $  = (s, el = document) => el.querySelector(s);
+const $$ = (s, el = document) => el.querySelectorAll(s);
+
+function setClass(el, cls, on) {
+  el && (on ? el.classList.add(cls) : el.classList.remove(cls));
+}
+
+function formatDate(iso) {
+  const d = new Date(iso);
+  return d.toLocaleString(undefined, {
+    year: "numeric", month: "short", day: "numeric",
+    hour: "2-digit", minute: "2-digit",
+  });
+}
+
+async function apiFetch(path, options = {}) {
+  const res = await fetch(API + path, {
+    credentials: "include",
+    headers: { "Content-Type": "application/json", ...(options.headers || {}) },
+    ...options,
+  });
+  const json = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(json.error || `HTTP ${res.status}`);
+  return json;
+}
+
+/* ─── App State ───────────────────────────────────────────── */
+const state = {
+  user:          null,
+  timelineChart: null,
+  distChart:     null,
+  historyPage:   1,
+};
+
+/* ═══════════════════════════════════════════════
+   AUTH
+═══════════════════════════════════════════════ */
+
+function showAuth()    { setClass($("#auth-screen"), "active", true);  setClass($("#app-screen"), "active", false); }
+function showApp()     { setClass($("#auth-screen"), "active", false); setClass($("#app-screen"), "active", true);  }
+
+// Tab switching
+$$(".tab").forEach(btn => {
+  btn.addEventListener("click", () => {
+    $$(".tab").forEach(t => t.classList.remove("active"));
+    btn.classList.add("active");
+    $$(".auth-form").forEach(f => f.classList.remove("active"));
+    $(`#${btn.dataset.tab}-form`).classList.add("active");
+  });
+});
+
+// Login
+$("#login-form").addEventListener("submit", async e => {
+  e.preventDefault();
+  const errEl = $("#login-error");
+  errEl.classList.add("hidden");
+  try {
+    const data = await apiFetch("/api/auth/login", {
+      method: "POST",
+      body: JSON.stringify({
+        email:    $("#login-identity").value,
+        username: $("#login-identity").value,
+        password: $("#login-password").value,
+      }),
+    });
+    state.user = data.user;
+    onLogin();
+  } catch (err) {
+    errEl.textContent = err.message;
+    errEl.classList.remove("hidden");
+  }
+});
+
+// Signup
+$("#signup-form").addEventListener("submit", async e => {
+  e.preventDefault();
+  const errEl = $("#signup-error");
+  errEl.classList.add("hidden");
+  try {
+    const data = await apiFetch("/api/auth/signup", {
+      method: "POST",
+      body: JSON.stringify({
+        username: $("#signup-username").value,
+        email:    $("#signup-email").value,
+        password: $("#signup-password").value,
+      }),
+    });
+    state.user = data.user;
+    onLogin();
+  } catch (err) {
+    errEl.textContent = err.message;
+    errEl.classList.remove("hidden");
+  }
+});
+
+// Logout
+$("#logout-btn").addEventListener("click", async () => {
+  await apiFetch("/api/auth/logout", { method: "POST" }).catch(() => {});
+  state.user = null;
+  showAuth();
+});
+
+async function onLogin() {
+  showApp();
+  $("#sidebar-username").textContent = state.user.username;
+  $("#dash-greeting").textContent = `Welcome back, ${state.user.username}!`;
+  await loadDashboard();
+  goToView("dashboard");
+}
+
+/* ─── Check existing session on load ─────────────── */
+(async () => {
+  try {
+    const data = await apiFetch("/api/auth/me");
+    state.user = data.user;
+    onLogin();
+  } catch {
+    showAuth();
+  }
+})();
+
+/* ═══════════════════════════════════════════════
+   NAVIGATION
+═══════════════════════════════════════════════ */
+
+function goToView(name) {
+  $$(".view").forEach(v => v.classList.remove("active"));
+  $(`#view-${name}`).classList.add("active");
+  $$(".nav-item").forEach(b => {
+    b.classList.toggle("active", b.dataset.view === name);
+  });
+  if (name === "history") loadHistory(1);
+  if (name === "dashboard") loadDashboard();
+}
+
+$$(".nav-item").forEach(btn => {
+  btn.addEventListener("click", () => goToView(btn.dataset.view));
+});
+
+/* ═══════════════════════════════════════════════
+   DASHBOARD
+═══════════════════════════════════════════════ */
+
+async function loadDashboard() {
+  try {
+    const data  = await apiFetch("/api/assessments/summary");
+    const s     = data.summary;
+    const tl    = data.timeline;
+
+    if (!s || !Object.keys(s).length) {
+      // No data yet
+      return;
+    }
+
+    // Stats
+    $("#stat-total .stat-value").textContent  = s.total_assessments;
+    $("#stat-latest .stat-value").textContent = stressIcon(s.latest_label) + " " + (s.latest_label || "—");
+    $("#stat-latest .stat-value").style.fontSize = "1.2rem";
+    $("#stat-avg .stat-value").textContent    = s.avg_score ? (s.avg_score * 100).toFixed(1) + "%" : "—";
+
+    // Trend
+    if (tl.length >= 2) {
+      const diff = tl[tl.length-1].fused_score - tl[tl.length-2].fused_score;
+      const el   = $("#stat-trend .stat-value");
+      el.textContent = diff > 0.01 ? "▲ Up" : diff < -0.01 ? "▼ Down" : "→ Stable";
+      el.style.color = diff > 0.01 ? "var(--danger)" : diff < -0.01 ? "var(--success)" : "var(--text-muted)";
+      el.style.fontSize = "1rem";
+    }
+
+    // Timeline chart
+    buildTimelineChart(tl);
+
+    // Distribution chart
+    buildDistChart(s.label_distribution);
+
+    // Recent list (last 5)
+    const recent = [...tl].reverse().slice(0, 5);
+    const listEl = $("#recent-list");
+    listEl.innerHTML = recent.length
+      ? recent.map(r => assessmentItemHTML(r)).join("")
+      : `<p class="empty-state">No assessments yet.</p>`;
+    listEl.querySelectorAll(".assessment-item").forEach(el => {
+      el.addEventListener("click", () => openDetailModal(el.dataset.id));
+    });
+  } catch (err) {
+    console.error("Dashboard load error:", err);
+  }
+}
+
+function buildTimelineChart(tl) {
+  const ctx = $("#timeline-chart").getContext("2d");
+  if (state.timelineChart) state.timelineChart.destroy();
+
+  state.timelineChart = new Chart(ctx, {
+    type: "line",
+    data: {
+      labels:   tl.map(r => r.date),
+      datasets: [{
+        label: "Stress Score",
+        data:  tl.map(r => +(r.fused_score * 100).toFixed(1)),
+        borderColor: "#4f8ef7",
+        backgroundColor: "rgba(79,142,247,.08)",
+        fill: true,
+        tension: 0.4,
+        pointRadius: 4,
+        pointBackgroundColor: tl.map(r => LEVEL_COLOURS[r.fused_label] || "#4f8ef7"),
+      }],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: { legend: { display: false } },
+      scales: {
+        x: {
+          ticks: { color: "#7a8aa0", maxTicksLimit: 8 },
+          grid:  { color: "#2a3348" },
+        },
+        y: {
+          min: 0,
+          max: 100,
+          ticks: { color: "#7a8aa0", callback: v => v + "%" },
+          grid:  { color: "#2a3348" },
+        },
+      },
+    },
+  });
+}
+
+function buildDistChart(dist) {
+  const ctx = $("#distribution-chart").getContext("2d");
+  if (state.distChart) state.distChart.destroy();
+
+  const labels = Object.keys(dist);
+  const values = Object.values(dist);
+  const colours = labels.map(l => LEVEL_COLOURS[l] || "#4f8ef7");
+
+  state.distChart = new Chart(ctx, {
+    type: "doughnut",
+    data: {
+      labels,
+      datasets: [{ data: values, backgroundColor: colours, borderWidth: 2, borderColor: "#161b27" }],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { labels: { color: "#e2e8f0", font: { size: 12 } } },
+      },
+      cutout: "60%",
+    },
+  });
+}
+
+/* ═══════════════════════════════════════════════
+   NEW ASSESSMENT
+═══════════════════════════════════════════════ */
+
+$("#assess-form").addEventListener("submit", async e => {
+  e.preventDefault();
+  const btn    = $("#assess-submit");
+  const errEl  = $("#assess-error");
+  errEl.classList.add("hidden");
+  btn.disabled = true;
+  btn.textContent = "Analysing…";
+
+  try {
+    // Build psychometric payload
+    const psycho = {};
+    const numFields = [
+      "Sleep_Duration","Sleep_Quality","Work_Hours","Physical_Activity",
+      "Screen_Time","Travel_Time","Social_Interactions","Caffeine_Intake",
+      "Alcohol_Intake","Blood_Pressure","Cholesterol_Level","Blood_Sugar_Level",
+    ];
+    const catFields = ["Gender","Occupation","Smoking_Status","Diet_Quality"];
+
+    let hasPsycho = false;
+    numFields.forEach(f => {
+      const el = $(`[name="${f}"]`, $("#assess-form"));
+      if (el && el.value !== "") { psycho[f] = parseFloat(el.value); hasPsycho = true; }
+    });
+    catFields.forEach(f => {
+      const el = $(`[name="${f}"]`, $("#assess-form"));
+      if (el && el.value !== "") { psycho[f] = el.value; hasPsycho = true; }
+    });
+
+    const textNote = $("#text-note").value.trim();
+
+    if (!hasPsycho && !textNote) {
+      throw new Error("Please fill in at least one section.");
+    }
+
+    const body = {
+      psychometric: hasPsycho ? psycho : null,
+      text_note:    textNote || null,
+    };
+
+    const data = await apiFetch("/api/assessments", {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+
+    showResult(data.prediction, data.assessment);
+  } catch (err) {
+    errEl.textContent = err.message;
+    errEl.classList.remove("hidden");
+  } finally {
+    btn.disabled = false;
+    btn.textContent = "Analyse My Stress →";
+  }
+});
+
+function showResult(pred, assessment) {
+  const panel = $("#result-panel");
+  panel.classList.remove("hidden");
+  panel.scrollIntoView({ behavior: "smooth", block: "start" });
+
+  const score = pred.fused_score;
+  const label = pred.fused_label;
+  const colour = LEVEL_COLOURS[label] || "#4f8ef7";
+  const perc  = (score * 100).toFixed(1);
+
+  // Gauge
+  const circumference = 2 * Math.PI * 50; // r=50
+  const filled = (score * circumference).toFixed(1);
+  const arc = $("#gauge-arc");
+  arc.style.strokeDasharray  = `${filled} ${circumference}`;
+  arc.style.stroke           = colour;
+
+  $("#gauge-score").textContent = perc + "%";
+  $("#gauge-label").textContent = label;
+  $("#gauge-label").style.color = colour;
+
+  // Details
+  $("#res-psycho-val").textContent = pred.psycho_label
+    ? `${pred.psycho_label}  (${(pred.psycho_score * 100).toFixed(1)}%)`
+    : "—";
+  $("#res-text-val").textContent = pred.text_label
+    ? `${pred.text_label}  (${(pred.text_score * 100).toFixed(1)}%)`
+    : "—";
+  $("#res-modality").textContent = pred.modality_used || "—";
+  $("#res-time").textContent = assessment ? formatDate(assessment.created_at) : new Date().toLocaleString();
+
+  // Advice
+  $("#result-advice").textContent = ADVICE[label] || "";
+}
+
+/* ═══════════════════════════════════════════════
+   HISTORY
+═══════════════════════════════════════════════ */
+
+async function loadHistory(page = 1) {
+  state.historyPage = page;
+  const listEl = $("#history-list");
+  const pagEl  = $("#history-pagination");
+  listEl.innerHTML = `<p class="empty-state">Loading…</p>`;
+  pagEl.innerHTML  = "";
+
+  try {
+    const data = await apiFetch(`/api/assessments?page=${page}&per_page=15`);
+    if (!data.assessments.length) {
+      listEl.innerHTML = `<p class="empty-state">No assessments yet. Take your first one!</p>`;
+      return;
+    }
+
+    listEl.innerHTML = data.assessments.map(a => assessmentItemHTML({
+      id:          a.id,
+      date:        formatDate(a.created_at),
+      fused_score: a.fused_score,
+      fused_label: a.fused_label,
+      modality:    a.modality_used,
+    })).join("");
+
+    listEl.querySelectorAll(".assessment-item").forEach(el => {
+      el.addEventListener("click", () => openDetailModal(el.dataset.id));
+    });
+
+    // Pagination
+    if (data.pages > 1) {
+      for (let p = 1; p <= data.pages; p++) {
+        const btn = document.createElement("button");
+        btn.className = `page-btn${p === page ? " active" : ""}`;
+        btn.textContent = p;
+        btn.addEventListener("click", () => loadHistory(p));
+        pagEl.appendChild(btn);
+      }
+    }
+  } catch (err) {
+    listEl.innerHTML = `<p class="empty-state" style="color:var(--danger)">${err.message}</p>`;
+  }
+}
+
+function assessmentItemHTML({ id, date, fused_score, fused_label, modality }) {
+  const levelKey = (fused_label || "").toLowerCase();
+  const scoreStr = fused_score != null ? (fused_score * 100).toFixed(1) + "%" : "—";
+  return `
+    <div class="assessment-item" data-id="${id}">
+      <span class="assess-badge level-bg-${levelKey}">${stressIcon(fused_label)} ${fused_label || "—"}</span>
+      <span class="assess-date">${date || ""}</span>
+      <span class="assess-score">${scoreStr}</span>
+      ${modality ? `<span class="assess-modality">${modality}</span>` : ""}
+    </div>`;
+}
+
+function stressIcon(label) {
+  const icons = { Minimal: "🟢", Mild: "🟡", Moderate: "🟠", Severe: "🔴", Critical: "🚨" };
+  return icons[label] || "⚪";
+}
+
+/* ═══════════════════════════════════════════════
+   DETAIL MODAL
+═══════════════════════════════════════════════ */
+
+async function openDetailModal(id) {
+  const modal   = $("#detail-modal");
+  const bodyEl  = $("#modal-body");
+  bodyEl.innerHTML = "<p style='color:var(--text-muted)'>Loading…</p>";
+  modal.classList.remove("hidden");
+
+  try {
+    const data = await apiFetch(`/api/assessments/${id}`);
+    const a    = data.assessment;
+
+    const psycho = a.psychometric_data
+      ? Object.entries(a.psychometric_data)
+          .map(([k,v]) => `<div class="modal-kv-item"><div class="modal-kv-key">${k.replace(/_/g," ")}</div><div class="modal-kv-val">${v}</div></div>`)
+          .join("")
+      : "<p style='color:var(--text-muted);font-size:.85rem'>Not provided</p>";
+
+    bodyEl.innerHTML = `
+      <div class="result-item" style="margin-bottom:8px">
+        <span class="result-key">Fused Stress Level</span>
+        <span class="result-val level-${(a.fused_label||"").toLowerCase()}">${stressIcon(a.fused_label)} ${a.fused_label} (${a.fused_score != null ? (a.fused_score*100).toFixed(1)+"%" : "—"})</span>
+      </div>
+      <div class="result-item" style="margin-bottom:8px">
+        <span class="result-key">Psychometric</span>
+        <span class="result-val">${a.psycho_label || "—"}${a.psycho_score != null ? "  (" + (a.psycho_score*100).toFixed(1)+"%)" : ""}</span>
+      </div>
+      <div class="result-item" style="margin-bottom:8px">
+        <span class="result-key">Text Sentiment</span>
+        <span class="result-val">${a.text_label || "—"}${a.text_score != null ? "  (" + (a.text_score*100).toFixed(1)+"%)" : ""}</span>
+      </div>
+      <div class="result-item" style="margin-bottom:16px">
+        <span class="result-key">Date &amp; Time</span>
+        <span class="result-val">${formatDate(a.created_at)}</span>
+      </div>
+
+      ${a.text_note ? `
+      <h4 style="color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Text Note</h4>
+      <div style="background:var(--surface2);padding:12px 14px;border-radius:8px;font-size:.9rem;margin-bottom:16px;line-height:1.6">${escapeHtml(a.text_note)}</div>
+      ` : ""}
+
+      <h4 style="color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px">Psychometric Data</h4>
+      <div class="modal-kv">${psycho}</div>
+
+      <div style="margin-top:14px;padding:12px 14px;border-radius:8px;border-left:4px solid var(--accent);background:rgba(79,142,247,.07);font-size:.88rem;line-height:1.6">
+        ${ADVICE[a.fused_label] || ""}
+      </div>
+    `;
+  } catch (err) {
+    bodyEl.innerHTML = `<p style="color:var(--danger)">${err.message}</p>`;
+  }
+}
+
+function closeModal() { $("#detail-modal").classList.add("hidden"); }
+
+function escapeHtml(str) {
+  return str.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+}
+
+/* ── Expose globals used by inline onclick handlers ── */
+const app = { goToView, closeModal };

frontend/templates/index.html

@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>BREATHE — Stress Intelligence Platform</title>
+  <link rel="stylesheet" href="/static/css/main.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+</head>
+<body>
+
+<!-- ══════════════════════════  AUTH SCREENS  ══════════════════════════ -->
+<div id="auth-screen" class="screen active">
+  <div class="auth-bg">
+    <div class="auth-card">
+      <div class="brand">
+        <span class="brand-icon">🫁</span>
+        <h1 class="brand-name">BREATHE</h1>
+        <p class="brand-tagline">Stress Intelligence Platform</p>
+      </div>
+
+      <!-- Tab bar -->
+      <div class="tab-bar">
+        <button class="tab active" data-tab="login">Log In</button>
+        <button class="tab" data-tab="signup">Sign Up</button>
+      </div>
+
+      <!-- Login form -->
+      <form id="login-form" class="auth-form active">
+        <div class="field">
+          <label>Email or Username</label>
+          <input type="text" id="login-identity" autocomplete="username" placeholder="you@example.com" required />
+        </div>
+        <div class="field">
+          <label>Password</label>
+          <input type="password" id="login-password" autocomplete="current-password" placeholder="••••••••" required />
+        </div>
+        <div id="login-error" class="form-error hidden"></div>
+        <button type="submit" class="btn-primary full-width">Log In</button>
+      </form>
+
+      <!-- Signup form -->
+      <form id="signup-form" class="auth-form">
+        <div class="field">
+          <label>Username</label>
+          <input type="text" id="signup-username" autocomplete="username" placeholder="breatheuser" required />
+        </div>
+        <div class="field">
+          <label>Email</label>
+          <input type="email" id="signup-email" autocomplete="email" placeholder="you@example.com" required />
+        </div>
+        <div class="field">
+          <label>Password <small>(min 8 chars)</small></label>
+          <input type="password" id="signup-password" autocomplete="new-password" placeholder="••••••••" required />
+        </div>
+        <div id="signup-error" class="form-error hidden"></div>
+        <button type="submit" class="btn-primary full-width">Create Account</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- ══════════════════════════  MAIN APP  ══════════════════════════════ -->
+<div id="app-screen" class="screen">
+
+  <!-- Sidebar -->
+  <aside class="sidebar">
+    <div class="sidebar-brand">
+      <span class="brand-icon">🫁</span>
+      <span class="brand-name-sm">BREATHE</span>
+    </div>
+    <nav class="sidebar-nav">
+      <button class="nav-item active" data-view="dashboard">
+        <span class="nav-icon">📊</span> Dashboard
+      </button>
+      <button class="nav-item" data-view="assess">
+        <span class="nav-icon">🧠</span> New Assessment
+      </button>
+      <button class="nav-item" data-view="history">
+        <span class="nav-icon">📋</span> History
+      </button>
+    </nav>
+    <div class="sidebar-footer">
+      <div class="user-info">
+        <span class="user-avatar">👤</span>
+        <span id="sidebar-username" class="user-name">User</span>
+      </div>
+      <button id="logout-btn" class="btn-ghost small">Log out</button>
+    </div>
+  </aside>
+
+  <!-- Main content area -->
+  <main class="main-content">
+
+    <!-- ── DASHBOARD VIEW ───────────────────────────────────────────── -->
+    <div id="view-dashboard" class="view active">
+      <div class="page-header">
+        <h2>Your Stress Dashboard</h2>
+        <p class="page-sub" id="dash-greeting">Welcome back!</p>
+      </div>
+
+      <div class="stats-row">
+        <div class="stat-card" id="stat-total">
+          <div class="stat-value">—</div>
+          <div class="stat-label">Total Assessments</div>
+        </div>
+        <div class="stat-card" id="stat-latest">
+          <div class="stat-value">—</div>
+          <div class="stat-label">Latest Stress Level</div>
+        </div>
+        <div class="stat-card" id="stat-avg">
+          <div class="stat-value">—</div>
+          <div class="stat-label">Average Score</div>
+        </div>
+        <div class="stat-card" id="stat-trend">
+          <div class="stat-value">—</div>
+          <div class="stat-label">Trend</div>
+        </div>
+      </div>
+
+      <!-- Timeline chart -->
+      <div class="card chart-card">
+        <h3>Stress Score Timeline</h3>
+        <div class="chart-wrap">
+          <canvas id="timeline-chart"></canvas>
+        </div>
+      </div>
+
+      <!-- Distribution -->
+      <div class="card chart-card">
+        <h3>Stress Level Distribution</h3>
+        <div class="chart-wrap donut-wrap">
+          <canvas id="distribution-chart"></canvas>
+        </div>
+      </div>
+
+      <!-- Recent assessments -->
+      <div class="card">
+        <h3>Recent Assessments</h3>
+        <div id="recent-list" class="assessment-list">
+          <p class="empty-state">No assessments yet. Take your first one!</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── ASSESSMENT VIEW ──────────────────────────────────────────── -->
+    <div id="view-assess" class="view">
+      <div class="page-header">
+        <h2>New Assessment</h2>
+        <p class="page-sub">Fill in any combination of sections below</p>
+      </div>
+
+      <form id="assess-form">
+
+        <!-- Psychometric Section -->
+        <div class="card section-card">
+          <div class="section-title">
+            <span class="section-icon">📋</span>
+            <h3>Psychometric Cues</h3>
+            <span class="section-badge optional">Optional</span>
+          </div>
+          <p class="section-desc">Rate your lifestyle habits over the past week.</p>
+
+          <div class="form-grid">
+            <div class="field">
+              <label>Sleep Duration (hrs/day)</label>
+              <input type="number" name="Sleep_Duration" min="0" max="24" step="0.5" placeholder="7" />
+            </div>
+            <div class="field">
+              <label>Sleep Quality (1–5)</label>
+              <input type="number" name="Sleep_Quality" min="1" max="5" step="1" placeholder="3" />
+            </div>
+            <div class="field">
+              <label>Work Hours (hrs/day)</label>
+              <input type="number" name="Work_Hours" min="0" max="24" step="0.5" placeholder="8" />
+            </div>
+            <div class="field">
+              <label>Physical Activity (hrs/day)</label>
+              <input type="number" name="Physical_Activity" min="0" max="12" step="0.5" placeholder="1" />
+            </div>
+            <div class="field">
+              <label>Screen Time (hrs/day)</label>
+              <input type="number" name="Screen_Time" min="0" max="24" step="0.5" placeholder="4" />
+            </div>
+            <div class="field">
+              <label>Travel Time (hrs/day)</label>
+              <input type="number" name="Travel_Time" min="0" max="10" step="0.5" placeholder="1" />
+            </div>
+            <div class="field">
+              <label>Social Interactions (count/day)</label>
+              <input type="number" name="Social_Interactions" min="0" max="50" step="1" placeholder="5" />
+            </div>
+            <div class="field">
+              <label>Caffeine Intake (cups/day)</label>
+              <input type="number" name="Caffeine_Intake" min="0" max="20" step="1" placeholder="2" />
+            </div>
+            <div class="field">
+              <label>Alcohol Intake (units/week)</label>
+              <input type="number" name="Alcohol_Intake" min="0" max="50" step="1" placeholder="1" />
+            </div>
+            <div class="field">
+              <label>Blood Pressure (mmHg)</label>
+              <input type="number" name="Blood_Pressure" min="60" max="200" step="1" placeholder="120" />
+            </div>
+            <div class="field">
+              <label>Cholesterol Level (mg/dL)</label>
+              <input type="number" name="Cholesterol_Level" min="50" max="400" step="1" placeholder="190" />
+            </div>
+            <div class="field">
+              <label>Blood Sugar Level (mg/dL)</label>
+              <input type="number" name="Blood_Sugar_Level" min="50" max="400" step="1" placeholder="90" />
+            </div>
+          </div>
+
+          <!-- Categorical fields -->
+          <div class="form-grid mt-sm">
+            <div class="field">
+              <label>Gender</label>
+              <select name="Gender">
+                <option value="">-- select --</option>
+                <option value="Male">Male</option>
+                <option value="Female">Female</option>
+                <option value="Other">Other</option>
+              </select>
+            </div>
+            <div class="field">
+              <label>Occupation</label>
+              <select name="Occupation">
+                <option value="">-- select --</option>
+                <option value="Student">Student</option>
+                <option value="Working Professional">Working Professional</option>
+                <option value="Homemaker">Homemaker</option>
+                <option value="Retired">Retired</option>
+                <option value="Unemployed">Unemployed</option>
+              </select>
+            </div>
+            <div class="field">
+              <label>Smoking Status</label>
+              <select name="Smoking_Status">
+                <option value="">-- select --</option>
+                <option value="Non-Smoker">Non-Smoker</option>
+                <option value="Occasional">Occasional</option>
+                <option value="Regular">Regular</option>
+              </select>
+            </div>
+            <div class="field">
+              <label>Diet Quality</label>
+              <select name="Diet_Quality">
+                <option value="">-- select --</option>
+                <option value="Poor">Poor</option>
+                <option value="Average">Average</option>
+                <option value="Good">Good</option>
+                <option value="Excellent">Excellent</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <!-- Text Note Section -->
+        <div class="card section-card">
+          <div class="section-title">
+            <span class="section-icon">📝</span>
+            <h3>Text Note</h3>
+            <span class="section-badge optional">Optional</span>
+          </div>
+          <p class="section-desc">Write freely about how you're feeling. Our NLP model will analyse the sentiment.</p>
+          <textarea
+            id="text-note"
+            name="text_note"
+            rows="5"
+            placeholder="Today I felt... I've been experiencing... my mind keeps going to..."
+          ></textarea>
+        </div>
+
+        <div id="assess-error" class="form-error hidden"></div>
+        <button type="submit" class="btn-primary" id="assess-submit">Analyse My Stress →</button>
+      </form>
+
+      <!-- Result panel (shown after submit) -->
+      <div id="result-panel" class="card result-card hidden">
+        <h3>Your Stress Analysis</h3>
+        <div class="result-gauge-wrap">
+          <div id="result-gauge" class="result-gauge">
+            <div class="gauge-circle">
+              <svg viewBox="0 0 120 120">
+                <circle class="gauge-bg" cx="60" cy="60" r="50"/>
+                <circle id="gauge-arc" class="gauge-arc" cx="60" cy="60" r="50"
+                        stroke-dasharray="0 314"/>
+              </svg>
+              <div class="gauge-center">
+                <div id="gauge-score" class="gauge-score">—</div>
+                <div id="gauge-label" class="gauge-label">—</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="result-details">
+          <div class="result-item" id="res-psycho">
+            <span class="result-key">Psychometric</span>
+            <span class="result-val" id="res-psycho-val">—</span>
+          </div>
+          <div class="result-item" id="res-text">
+            <span class="result-key">Text Sentiment</span>
+            <span class="result-val" id="res-text-val">—</span>
+          </div>
+          <div class="result-item">
+            <span class="result-key">Modality Used</span>
+            <span class="result-val" id="res-modality">—</span>
+          </div>
+          <div class="result-item">
+            <span class="result-key">Assessed At</span>
+            <span class="result-val" id="res-time">—</span>
+          </div>
+        </div>
+        <div id="result-advice" class="result-advice"></div>
+        <button class="btn-secondary mt-sm" onclick="app.goToView('dashboard')">View Dashboard →</button>
+      </div>
+    </div>
+
+    <!-- ── HISTORY VIEW ─────────────────────────────────────────────── -->
+    <div id="view-history" class="view">
+      <div class="page-header">
+        <h2>Assessment History</h2>
+        <p class="page-sub">All your past stress analyses</p>
+      </div>
+      <div id="history-list" class="assessment-list full">
+        <p class="empty-state">Loading…</p>
+      </div>
+      <div id="history-pagination" class="pagination"></div>
+    </div>
+
+  </main>
+</div>
+
+<!-- Modal for detail view -->
+<div id="detail-modal" class="modal hidden">
+  <div class="modal-backdrop" onclick="app.closeModal()"></div>
+  <div class="modal-box">
+    <button class="modal-close" onclick="app.closeModal()">✕</button>
+    <h3>Assessment Detail</h3>
+    <div id="modal-body"></div>
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script src="/static/js/app.js"></script>
+</body>
+</html>

frontend/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target:      'http://localhost:5000',
+        changeOrigin: true,
+        secure:       false,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+})