chore: release v0.1.1.36

chore: ignore local Cursor rules directory.
Keep editor-specific .cursor/rules/ out of version control. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-10 17:19:07 +02:00 · 2026-07-10 16:52:39 +02:00 · 2026-07-10 16:51:30 +02:00 · 2026-06-12 21:33:43 +02:00 · 2026-06-12 15:29:53 +02:00 · 2026-06-12 13:58:38 +02:00
341 changed files with 63726 additions and 3538 deletions
@@ -0,0 +1,182 @@
+---
+name: merge
+description: >-
+  Merge Git branches safely — fetch latest, merge or rebase onto master, resolve
+  conflicts intelligently, and verify the result. Use when the user asks to merge
+  branches, sync with master, resolve merge conflicts, or bring a feature branch
+  up to date.
+---
+
+# Git Merge
+
+Führe Branch-Merges sicher und nachvollziehbar aus. Für PR-Review, CI und
+Comment-Triage siehe den **babysit**-Skill — dieser Skill deckt die Git-Merge-
+Operation selbst ab.
+
+## Projekt-Kontext
+
+- **Basis-Branch:** `master` (nicht `main`)
+- **Monorepo:** `client/` (React PWA) und `server/` (Express API) — Konflikte
+  können in beiden liegen
+
+## Sicherheitsregeln (immer einhalten)
+
+- **Niemals** `git config` ändern
+- **Niemals** `--no-verify`, `--no-gpg-sign` o.ä. ohne explizite Anfrage
+- **Niemals** `push --force` auf `master` — bei Bedarf warnen und abbrechen
+- **Niemals** destruktive Befehle (`reset --hard`, `clean -fd`) ohne explizite Anfrage
+- **Niemals** interaktive Git-Befehle (`-i`-Flags) — nicht unterstützt
+- **Kein Commit** ohne explizite Anfrage des Users
+- **Kein Push** ohne explizite Anfrage des Users
+
+## Workflow
+
+### 1. Ausgangslage klären
+
+Parallel ausführen:
+
+```bash
+git status
+git branch -vv
+git log --oneline -5
+```
+
+Ermittle:
+
+- Aktueller Branch
+- Ziel-Branch (Standard: `master`)
+- Ob uncommittete Änderungen vorliegen
+- Ob der Branch einen Remote-Tracking-Branch hat
+
+**Bei uncommitteten Änderungen:** Stashen (`git stash push -m "pre-merge"`) nur
+mit Zustimmung oder wenn der User es verlangt hat. Sonst stoppen und melden.
+
+### 2. Merge-Strategie wählen
+
+| Situation | Empfehlung |
+|-----------|------------|
+| Feature-Branch aktuell halten | `git merge origin/master` (Merge-Commit) |
+| Linearer Verlauf gewünscht | `git rebase origin/master` (nur wenn User Rebase verlangt) |
+| Zwei Feature-Branches zusammenführen | `git merge <branch>` auf Ziel-Branch |
+
+**Standard:** Merge (nicht Rebase), es sei denn der User verlangt Rebase.
+
+### 3. Remote aktualisieren
+
+```bash
+git fetch origin
+```
+
+Vor dem Merge prüfen, wie weit der Branch hinter `origin/master` liegt:
+
+```bash
+git log --oneline HEAD..origin/master
+git log --oneline origin/master..HEAD
+```
+
+### 4. Merge ausführen
+
+**Feature-Branch mit master synchronisieren** (häuigster Fall):
+
+```bash
+git checkout <feature-branch>
+git merge origin/master
+```
+
+**Branch in master mergen** (nur wenn User das ausdrücklich will — normalerweise
+passiert das via PR):
+
+```bash
+git checkout master
+git pull origin master
+git merge <feature-branch>
+```
+
+Merge-Commit-Nachricht kurz und sachlich halten, z.B.:
+`Merge branch 'master' into feature/push-notifications-owner`
+
+### 5. Konflikte lösen
+
+Konfliktdateien finden:
+
+```bash
+git diff --name-only --diff-filter=U
+```
+
+**Pro Konfliktdatei:**
+
+1. Datei lesen und beide Seiten verstehen (HEAD = eigener Branch, incoming = gemergter Branch)
+2. Intent beider Änderungen erhalten — nicht blind eine Seite wählen
+3. Konfliktmarker entfernen (`<<<<<<<`, `=======`, `>>>>>>>`)
+4. Bei widersprüchlicher Intent: Merge abbrechen und User fragen
+
+```bash
+git merge --abort   # oder: git rebase --abort
+```
+
+**Typische Konflikt-Muster in diesem Projekt:**
+
+| Bereich | Hinweis |
+|---------|---------|
+| `package-lock.json` | Nach manueller Lösung `npm install` im betroffenen Paket (`client/` oder `server/`) ausführen |
+| i18n (`client/src/i18n/`) | Beide Sprachkeys (DE + EN) behalten, keine Keys verlieren |
+| Prisma/Schema | Migrationen beider Seiten zusammenführen, nicht überschreiben |
+| Verschlüsselung/Auth | Vorsichtig — keine Sicherheitslogik stillschweigend vereinfachen |
+
+Nach jeder gelösten Datei:
+
+```bash
+git add <file>
+```
+
+Merge abschließen (nur wenn User Commit verlangt hat):
+
+```bash
+git commit -m "$(cat <<'EOF'
+Merge branch 'master' into <feature-branch>
+
+EOF
+)"
+```
+
+### 6. Verifizieren
+
+Nach erfolgreichem Merge:
+
+```bash
+git status
+git log --oneline -5
+```
+
+Relevante Checks je nach betroffenen Bereichen:
+
+```bash
+# Client
+cd client && npm run build
+
+# Server
+cd server && npm run build
+```
+
+Bei Lockfile-Konflikten oder Dependency-Änderungen: Build in beiden Paketen prüfen.
+
+### 7. Abschluss
+
+- Ergebnis dem User mitteilen: welche Branches, wie viele Konflikte, was gelöst wurde
+- Bei `git stash`: erinnern, Stash wieder anzuwenden (`git stash pop`)
+- Push nur auf explizite Anfrage: `git push origin <branch>`
+
+## Wann abbrechen und fragen
+
+- Widersprüchliche fachliche Intent (z.B. beide Seiten ändern dieselbe Logik unterschiedlich)
+- Konflikte in Krypto-, Auth- oder Sync-Kernlogik ohne klares „richtig“
+- Merge würde `.env`, Credentials oder Secrets einschließen
+- User wollte nur Status prüfen, nicht tatsächlich mergen
+
+## Abgrenzung zu anderen Skills
+
+| Skill | Wann |
+|-------|------|
+| **merge** (dieser) | Git merge/rebase, Konflikte, Branch sync |
+| **babysit** | PR merge-ready: Comments, CI, PR-Konflikte im PR-Kontext |
+| **creating-pull-requests** | PR erstellen und pushen |
@@ -1,7 +1,71 @@
 OpenWeatherMapAPIKey=<owm_api_key>

+# OpenRouter API (AI travel day summaries — server-side proxy)
+OpenRouterAPIKey=
+# Optional model override (default: anthropic/claude-3.5-haiku)
+# Valid examples: anthropic/claude-3.5-haiku, anthropic/claude-3-haiku, anthropic/claude-haiku-4.5
+# OpenRouterModel=anthropic/claude-3.5-haiku
+
+# DeepL API (for scripts/translate-locales.mjs and scripts/translate-flyer.mjs)
+# Free plan keys use api-free.deepl.com automatically (suffix :fx)
+DeepLAPIKey=
+
 # Passkey configuration (WebAuthn Relying Party ID and Origin)
-# For local dev: localhost and http://localhost
-# For production: e.g. kapteins-daagbok.eu and https://kapteins-daagbok.eu
+# For local dev: use localhost (NOT 127.0.0.1 — browsers reject IP addresses for Passkeys)
+# Production (kapteins-daagbok.eu):
+#   RP_ID=kapteins-daagbok.eu
+#   ORIGIN=https://kapteins-daagbok.eu
+# Staging (staging.kapteins-daagbok.eu):
+#   RP_ID=staging.kapteins-daagbok.eu
+#   ORIGIN=https://staging.kapteins-daagbok.eu
+#   POSTGRES_DB=daagbox_staging
+#   NTFY_TOPIC=kapteins-daagbok-staging-feedback
 RP_ID=localhost
-ORIGIN=http://localhost
+# Must match the frontend URL exactly (Vite dev: http://localhost:5173; Docker: http://localhost)
+ORIGIN=http://localhost:5173
+
+# Behind reverse proxy — see docs/deployment/npm-security.md
+# Docker Compose (NPM → frontend nginx → backend): TRUST_PROXY=1
+# TRUST_PROXY=1
+
+# Docker Compose database (required for production deploy)
+# Generate: openssl rand -hex 24
+# Rotate on running server: ./scripts/rotate-postgres-password.sh (see docs/deployment/postgres-password.md)
+# POSTGRES_USER=postgres
+# POSTGRES_PASSWORD=
+# POSTGRES_DB=daagbox
+# Optional: lock Docker Compose to a specific configuration file (e.g. staging or production) on the server:
+# COMPOSE_FILE=docker-compose.staging.yml
+# Optional: comma-separated CORS origins (defaults to ORIGIN; 127.0.0.1 may be allowed for CORS but not for login)
+# CORS_ORIGINS=http://localhost:5173
+
+# API session signing (min. 32 chars; required in production)
+# Generate: openssl rand -base64 48
+SESSION_SECRET=
+
+# Admin dashboard access — comma-separated list of User IDs (UUIDs)
+# Example: ADMIN_USER_IDS=11111111-2222-3333-4444-555555555555,22222222-3333-4444-5555-666666666666
+ADMIN_USER_IDS=
+
+# Web Push (VAPID) — generate with: npx web-push generate-vapid-keys
+# Public key may also be set on the client as VITE_VAPID_PUBLIC_KEY
+VAPID_PUBLIC_KEY=
+VAPID_PRIVATE_KEY=
+VAPID_SUBJECT=mailto:support@kapteins-daagbok.eu
+
+# Feedback via Ntfy (https://ntfy.sh or self-hosted)
+# NTFY_TOPIC: topic name only (not the full URL)
+NTFY_SERVER=https://ntfy.sh
+NTFY_TOPIC=kapteins-daagbok-feedback
+NTFY_TOKEN=tk_example_ntfy_access_token
+
+# Plausible Analytics (frontend container — see docs/plausible-events.md)
+# Production: PLAUSIBLE_ENABLED=true, data-domain = current hostname (kapteins-daagbok.eu)
+# Staging:    PLAUSIBLE_ENABLED=false (default in docker-compose.staging.yml)
+PLAUSIBLE_ENABLED=true
+PLAUSIBLE_HOST=https://plausible.elpatron.me
+
+# SEO (frontend container — robots.txt, X-Robots-Tag)
+# Production: ROBOTS_NOINDEX=false (default)
+# Staging:    ROBOTS_NOINDEX=true (default in docker-compose.staging.yml)
+# ROBOTS_NOINDEX=false
@@ -11,3 +11,8 @@ server/dist/
 .env.local
 .env.*.local
 *.log
+
+userfeedback/
+
+# Cursor IDE local rules
+.cursor/rules/
@@ -168,7 +168,7 @@ Beim Laden eines Eintrags: `computedHash !== sig.entryHash` → UI-Warnung.

 Neuer Router: `server/src/routes/sign.ts` → Mount unter `/api/sign`

-Auth wie bestehend: Header `X-User-Id` (siehe `sync.ts`).
+Auth wie bestehend: HttpOnly-Session-Cookie `daagbok_session` nach WebAuthn (`server/src/middleware/auth.ts`, Client `apiFetch` mit `credentials: 'include'`).

 ### 4.1 `POST /api/sign/options`

@@ -472,7 +472,7 @@ test('isSignatureValidForEntry')
 | WebAuthn Login | `client/src/services/auth.ts`, `server/src/routes/auth.ts` |
 | Collaborators | `server/src/routes/collaboration.ts`, `SettingsForm.tsx` |
 | E2E-Einträge | `EntryPayload` in `server/prisma/schema.prisma` |
-| Auth-Header | `X-User-Id` in `server/src/routes/sync.ts` |
+| API-Auth | Session-Cookie via `requireUser` in `server/src/middleware/auth.ts` |

 ---

@@ -0,0 +1,300 @@
+# Kapteins Daagbok
+
+Digitales Yacht-Logbuch als Progressive Web App (PWA) — **kostenlos**, **werbefrei**, offline-fähig, End-to-End-verschlüsselt und mit Passkey-Anmeldung.
+
+**Live:** [kapteins-daagbok.eu](https://kapteins-daagbok.eu) · **Demo:** [kapteins-daagbok.eu/demo](https://kapteins-daagbok.eu/demo)
+
+## Überblick
+
+Kapteins Daagbok richtet sich an private Skipper und Yachtbesitzer, die ihr Bordlogbuch digital führen möchten. Die App speichert Schiffsdaten, Crew-Profile und Reisetage (Törns) in einem Format, das an übliche nautische Logbuch-Vorlagen angelehnt ist.
+
+Alle sensiblen Inhalte werden **clientseitig verschlüsselt** (Web Crypto API). Der Server sieht nur ciphertext — eine Zero-Knowledge-Architektur. Daten liegen zusätzlich lokal in IndexedDB (Dexie.js) und synchronisieren im Hintergrund, sodass die App **auch offline** auf See nutzbar ist.
+
+## Funktionen
+
+- **Passkey-Authentifizierung** (WebAuthn) mit optionaler Recovery-Phrase und lokalem PIN-Fallback
+- **Mehrere Logbücher** pro Benutzerkonto — eigene Logbücher und per Einladung geteilte Logbücher (Crew-Zugang) klar getrennt
+- **Reisetage** mit Hafen, Wetter, Tankständen, Ereignissen und Tagesnummer
+- **Kompass-Dial** für MgK- und RwK-Kurse — Ring-Eingabe, Gradfeld, Schrittweite 1°/5°/10° (maritime Orientierung: 0° = Nord)
+- **GPS-Tracks** (GPX/KML/GeoJSON-Upload, Karte, Statistiken)
+- **Foto-Anhänge** pro Reisetag
+- **Passkey-Signaturen** für Skipper und Crew (hybride elektronische Signatur)
+- **Schiffsdaten** und **Crew-Profile** (Skipper + Mitglieder)
+- **Statistik-Dashboard** — Strecken, Verbrauch, Segel/Motor, Hafenkette (pro Logbuch oder accountweit)
+- **Benutzerprofil** — kontoweite Einstellungen: Darstellung (Theme, Hell/Dunkel), OpenWeatherMap-API-Key, Web Push, PWA-Installation, Onboarding-Tour, Passkey-Verwaltung, Account-Statistik
+- **Kollaboration** — Crew per Einladungslink einladen (Schreib- oder Lesezugriff)
+- **Push-Benachrichtigungen** (optional) — Logbuch-Eigner per Web Push informieren, wenn Crew Änderungen synchronisiert (ohne Klartext-Inhalte; Opt-in im Benutzerprofil)
+- **Read-only-Freigabe** — öffentlicher Lese-Link für Dritte
+- **Export** — PDF pro Reisetag, CSV-Download/-Teilen
+- **Backup & Wiederherstellung** — vollständiges verschlüsseltes Logbuch-Backup (Einträge, Fotos, GPS, Crew, Schiff) als `.daagbok.json`; Restore auf gleichem oder neuem Account
+- **Feedback** — Bug-, Feature- und allgemeine Rückmeldungen aus der App (serverseitig via [Ntfy](https://ntfy.sh) oder self-hosted)
+- **PWA** — installierbar auf iOS/Android, Offline-Modus, Update-Hinweise
+- **Mehrsprachig** — Deutsch und Englisch
+- **Demo-Logbuch & Onboarding-Tour** für neue Nutzer (auch unter `/demo` ohne Anmeldung)
+
+### Benutzerprofil vs. Logbuch-Einstellungen
+
+| Bereich | Inhalt |
+|---------|--------|
+| **Benutzerprofil** | Theme, Farbschema, Wetter-API-Key, Push, PWA, Tour, Passkeys, Account löschen |
+| **Logbuch-Einstellungen** | Crew-Einladungen, öffentliche Freigabe, Backup & Wiederherstellung (nur Eigner) |
+
+## Architektur
+
+```
+┌─────────────────┐     HTTPS/API        ┌─────────────────┐
+│  React PWA      │ ◄──────────────────► │  Express API    │
+│  Vite + Dexie   │   (nur ciphertext)   │  Prisma + PG    │
+│  IndexedDB      │                      │  PostgreSQL     │
+└─────────────────┘                      └─────────────────┘
+```
+
+| Schicht | Technologie |
+|---------|-------------|
+| Frontend | React 19, TypeScript, Vite, vite-plugin-pwa |
+| Lokaler Speicher | Dexie.js (IndexedDB), Hintergrund-Sync |
+| Backend | Node.js, Express, Prisma |
+| Datenbank | PostgreSQL 16 |
+| Auth | WebAuthn (Passkeys) + signiertes HttpOnly-Session-Cookie (`daagbok_session`) |
+| Krypto | Web Crypto API (AES-GCM), BIP39 Recovery |
+| Push (optional) | Web Push (VAPID), Custom Service Worker (`injectManifest`) |
+| Feedback (optional) | Ntfy (HTTP Publish) |
+
+### Rollen & Zugriff
+
+| Rolle | Bedeutung |
+|-------|-----------|
+| **Owner** | Logbuch angelegt; voller Zugriff, Einladungen, Backup, Löschen; optional Push bei Crew-Änderungen |
+| **Collaborator (WRITE)** | Per Einladung; Einträge bearbeiten und als Crew signieren |
+| **Collaborator (READ)** | Nur Lesen (z. B. öffentlicher Share-Link) |
+
+Skipper- und Crew-Profile im Logbuch sind **Inhaltsdaten** (verschlüsselt), nicht an den Account gebunden. Ein Account kann gleichzeitig Owner eines eigenen und Collaborator in fremden Logbüchern sein.
+
+### Authentifizierung & Session
+
+| Schicht | Verhalten |
+|---------|-----------|
+| **Login** | WebAuthn (`/api/auth/login-verify`) — danach HttpOnly-Cookie, 7 Tage gültig |
+| **API-Aufrufe** | Cookie `credentials: 'include'` (Client: `apiFetch`) — kein `X-User-Id` |
+| **Master-Key** | Nur im RAM; nach Reload Entsperren per Passkey oder lokalem PIN |
+| **Step-up** | Konto löschen, PRF-Enrollment: frische Passkey-Bestätigung (`/api/auth/reauth-*`) |
+| **Sync WRITE** | Server lehnt Schreib-Sync für Collaborator mit `READ` ab |
+
+Öffentliche Routen (ohne Session): Registrierung/Login-Optionen, Einladungsdetails, Read-only-Share (`share-pull`), Health-Check, VAPID-Public-Key.
+
+## Backup & Wiederherstellung
+
+Nur der **Logbuch-Eigner** kann unter **Logbuch-Einstellungen → Backup & Wiederherstellung** ein vollständiges Backup erstellen:
+
+1. Backup-Passphrase wählen (min. 8 Zeichen, getrennt von der Datei aufbewahren)
+2. Download als `.daagbok.json` — enthält alle verschlüsselten Payloads inkl. **Fotos** und GPS-Tracks
+3. **Wiederherstellen** in einem beliebigen Account (nach Registrierung/Login): Datei + Passphrase
+
+Vor dem Löschen eines Logbuchs weist die App auf diese Funktion hin. Crew-Einladungen und Passkey-Signaturen werden nicht mitübertragen — Inhalte bleiben lesbar, Signaturen auf neuem Account ggf. nicht mehr verifizierbar.
+
+## Push-Benachrichtigungen (optional)
+
+Logbuch-**Eigner** können im **Benutzerprofil** Web Push aktivieren. Sobald ein eingeladenes Crewmitglied mit Schreibrechten (`WRITE`) Änderungen synchronisiert, erhält der Owner eine **generische** Benachrichtigung — der Server kennt keine Logbuch-Inhalte (Zero-Knowledge).
+
+| Aspekt | Verhalten |
+|--------|-----------|
+| Auslöser | Erfolgreicher Sync-Push durch Collaborator (`create`/`update`) |
+| Aggregation | Mehrere Änderungen in einem Sync → eine Benachrichtigung pro Logbuch |
+| Drosselung | Max. eine Push-Nachricht pro Logbuch alle 3 Minuten |
+| Klick | Öffnet die App auf dem betroffenen Logbuch |
+
+**Voraussetzungen:**
+
+- HTTPS (Produktion)
+- VAPID-Schlüssel auf dem Server (`VAPID_PUBLIC_KEY`, `VAPID_PRIVATE_KEY`, `VAPID_SUBJECT`)
+- Browser-Berechtigung „Benachrichtigungen“; auf **iOS** installierte PWA ab iOS 16.4+
+
+Schlüssel erzeugen: `npx web-push generate-vapid-keys` (im `server/`-Verzeichnis oder global).
+
+Ausführlicher Implementierungs- und Testplan: [docs/push-notifications-plan.md](docs/push-notifications-plan.md).
+
+## Feedback (optional)
+
+Eingeloggte Nutzer können über das Feedback-Formular in der App Rückmeldungen senden. Der Server leitet sie an einen **Ntfy**-Topic weiter (kein Klartext-Logbuch auf dem Server).
+
+| Variable | Bedeutung |
+|----------|-----------|
+| `NTFY_SERVER` | Basis-URL (Standard: `https://ntfy.sh`) |
+| `NTFY_TOPIC` | Topic-Name (ohne URL) |
+| `NTFY_TOKEN` | Optional: Access-Token für geschützte Topics |
+
+Ohne `NTFY_TOPIC` antwortet die API mit „nicht konfiguriert“. Rate-Limiting und einfacher Spam-Schutz sind serverseitig aktiv.
+
+## Projektstruktur
+
+```
+kapteins-daagbok/
+├── client/              # React-PWA (Frontend)
+│   ├── src/
+│   │   ├── components/  # UI (u. a. CourseDialInput, UserProfilePage, FeedbackModal)
+│   │   ├── services/    # Auth, Sync, Krypto, Backup, Push, Analytics, …
+│   │   ├── sw.ts        # Service Worker (Precache + Web Push)
+│   │   └── i18n/        # DE/EN-Übersetzungen
+│   └── Dockerfile       # Nginx-Produktions-Image
+├── server/              # Express-API + Prisma
+│   ├── src/routes/      # auth, logbooks, sync, collaboration, sign, push, feedback, weather
+│   ├── src/services/    # z. B. pushNotify, ntfyNotify
+│   └── prisma/          # Datenbankschema
+├── docs/                # Projektdokumentation
+├── scripts/             # Dev- und Deploy-Skripte
+├── docker-compose.yml   # Produktions-Stack (DB + Backend + Frontend)
+└── VERSION              # App-Version (Build & Footer)
+```
+
+## Voraussetzungen
+
+- **Node.js** 20+
+- **npm**
+- **Docker** (für PostgreSQL in der Entwicklung oder den vollständigen Stack)
+- Optional: eigener OpenWeatherMap-API-Key im **Benutzerprofil** (sonst serverseitiger Key aus `.env`)
+- Optional: VAPID-Schlüssel für Web Push (siehe Abschnitt Push-Benachrichtigungen)
+- Optional: Ntfy-Topic für Feedback (siehe Abschnitt Feedback)
+
+## Lokale Entwicklung
+
+### 1. Abhängigkeiten installieren
+
+```bash
+cd server && npm ci && cd ..
+cd client && npm ci && cd ..
+```
+
+### 2. Umgebungsvariablen
+
+```bash
+cp .env.example .env
+```
+
+Kopiere `.env.example` nach `.env` und passe mindestens an:
+
+| Variable | Dev (Vite) | Produktion |
+|----------|------------|------------|
+| `RP_ID` | `localhost` | `kapteins-daagbok.eu` |
+| `ORIGIN` | `http://localhost:5173` | `https://kapteins-daagbok.eu` |
+| `SESSION_SECRET` | empfohlen (≥ 32 Zeichen) | **Pflicht** |
+
+`ORIGIN` muss **exakt** der Frontend-URL entsprechen (CORS + Session-Cookie). Das Backend lädt `.env` aus dem Projektroot und optional `server/.env`.
+
+```
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/daagbox?schema=public"
+OpenWeatherMapAPIKey=          # Fallback für Wetter-Abruf, wenn Nutzer keinen eigenen Key hat
+RP_ID=localhost
+ORIGIN=http://localhost:5173
+SESSION_SECRET=                 # openssl rand -base64 48 (in Prod Pflicht)
+# Optional — Web Push (npx web-push generate-vapid-keys)
+VAPID_PUBLIC_KEY=
+VAPID_PRIVATE_KEY=
+VAPID_SUBJECT=mailto:support@kapteins-daagbok.eu
+# Optional — Feedback via Ntfy
+NTFY_SERVER=https://ntfy.sh
+NTFY_TOPIC=
+NTFY_TOKEN=
+```
+
+`./scripts/start-dev.sh` prüft `ORIGIN` und `SESSION_SECRET` beim Start und gibt Hinweise aus.
+
+### 3. Datenbank & Schema
+
+Das Dev-Skript startet PostgreSQL in Docker (`postgres-daagbox`). Schema anwenden:
+
+```bash
+cd server && npx prisma db push && cd ..
+```
+
+### 4. Dev-Server starten
+
+```bash
+./scripts/start-dev.sh
+```
+
+| Dienst | URL |
+|--------|-----|
+| Frontend (Vite) | http://localhost:5173 |
+| Backend API | http://localhost:5000 |
+| Health Check | http://localhost:5000/api/health |
+| Public Demo | http://localhost:5173/demo |
+
+### 5. Qualität & Tests
+
+Vor jedem Deploy auf [kapteins-daagbok.eu](https://kapteins-daagbok.eu/) (kein externes CI):
+
+```bash
+npm run check
+# oder: ./scripts/predeploy-check.sh
+```
+
+Einzeln: `npm test` (Client + Server) · `npm run build` · optional `npm run lint` (Client, noch nicht in `check`)
+
+- **Client:** Vitest für Utils, i18n, Services
+- **Server:** Smoke-Tests (`/api/health`, Auth-Guards) mit Supertest — siehe `server/src/api.smoke.test.ts`
+
+## Docker (produktionsnah)
+
+Gesamten Stack lokal bauen und starten:
+
+```bash
+./scripts/start-dev-docker.sh
+```
+
+Frontend: http://localhost · API: http://localhost/api/health · Demo: http://localhost/demo
+
+Umgebungsvariablen in `.env` setzen — mindestens `RP_ID`, `ORIGIN` (z. B. `http://localhost`), `SESSION_SECRET` und für Docker Compose `POSTGRES_PASSWORD`. Für Push die VAPID-Variablen an den Backend-Container durchreichen (`docker-compose.yml` → `backend.environment`). Für Feedback `NTFY_*` setzen.
+
+## Deployment
+
+Produktions-Update auf den Server (konfigurierbar via Umgebungsvariablen). Führt vor dem SSH-Deploy automatisch [`predeploy-check.sh`](scripts/predeploy-check.sh) aus (`npm run check`):
+
+
+```bash
+./scripts/update-remotes.sh -dest prod
+```
+
+Standard-Ziel Prod: `root@10.0.0.25:/opt/kapteins-daagbok` — per `REMOTE_HOST`, `REMOTE_USER`, `REMOTE_DIR` überschreibbar.
+
+Auf dem Server müssen `.env` u. a. `POSTGRES_PASSWORD`, `RP_ID`, `ORIGIN` (`https://kapteins-daagbok.eu`), `SESSION_SECRET` (≥ 32 Zeichen), `TRUST_PROXY` (NPM, z. B. `172.16.10.10` oder `1`) und bei Push `VAPID_*` enthalten. Optional `NTFY_*` für Feedback. Nach Schema-Änderungen: `npx prisma db push` im Backend-Container.
+
+Prod-Deploy legt vor dem Update automatisch ein Server-Backup an (DB, `.env`, Compose, App-Code). Tägliches Cron-Backup und Restore: [docs/deployment/backup.md](docs/deployment/backup.md).
+
+Hinter **Nginx Proxy Manager**: [docs/deployment/npm-security.md](docs/deployment/npm-security.md).
+
+### Staging
+
+Testumgebung unter [staging.kapteins-daagbok.eu](https://staging.kapteins-daagbok.eu) — Deploy ohne Release-Tag:
+
+```bash
+./scripts/update-remotes.sh -dest stage
+```
+
+Standard-Ziel Staging: `root@10.0.0.27:/opt/kapteins-daagbok-staging` — per `REMOTE_HOST`, `REMOTE_DIR`, `DEPLOY_BRANCH` überschreibbar. Details: [docs/deployment/staging.md](docs/deployment/staging.md).
+
+## Dokumentation
+
+| Dokument | Inhalt |
+|----------|--------|
+| [docs/deployment/npm-security.md](docs/deployment/npm-security.md) | NPM, TLS, `trust proxy`, Security-Header |
+| [docs/deployment/predeploy.md](docs/deployment/predeploy.md) | Pre-Deploy-Checks ohne CI |
+| [docs/deployment/postgres-password.md](docs/deployment/postgres-password.md) | PostgreSQL-Passwort rotieren / App-Rolle |
+| [docs/deployment/backup.md](docs/deployment/backup.md) | Server-Backup, Crontab, Restore (Prod) |
+| [docs/deployment/staging.md](docs/deployment/staging.md) | Staging-VM, Deploy, `.env` |
+| [docs/plausible-events.md](docs/plausible-events.md) | Custom Events für Plausible Analytics |
+| [docs/push-notifications-plan.md](docs/push-notifications-plan.md) | Web Push: Architektur, API, Testplan |
+| [docs/plan-compass-course-dial.md](docs/plan-compass-course-dial.md) | Kompass-Dial: UX- und Implementierungsplan |
+| [docs/marketing/kapteins-daagbok-beta-flyer.pdf](docs/marketing/kapteins-daagbok-beta-flyer.pdf) | Beta-Flyer (DIN A4) zum Ausdrucken — Quelle: `docs/marketing/beta-flyer.html`, neu erzeugen: `cd client && npm run generate:flyer` |
+| [.planning/PROJECT.md](.planning/PROJECT.md) | Produktvision und Anforderungen (GSD) |
+
+## Analytics
+
+Die App nutzt [Plausible Analytics](https://plausible.io/) (self-hosted) für anonyme Nutzungsmetriken — ohne Cookies und ohne personenbezogene Daten in Event-Properties. Details und Goal-Namen: [docs/plausible-events.md](docs/plausible-events.md).
+
+## Version
+
+Aktuelle Version: siehe [VERSION](VERSION) (wird im App-Footer und beim Docker-Build eingebunden).
+
+---
+
+© 2026 KnorrLabs/Markus F.J. Busche · [kapteins-daagbok.eu](https://kapteins-daagbok.eu)
@@ -1 +1 @@
-0.1.0.3
+0.1.1.37
@@ -18,15 +18,18 @@ RUN npm run build
 FROM nginx:1.25-alpine
 WORKDIR /usr/share/nginx/html

-# Copy custom Nginx configuration
-COPY client/nginx.conf /etc/nginx/conf.d/default.conf
+RUN apk add --no-cache gettext
+
+COPY client/nginx.conf.template /etc/nginx/templates/default.conf.template
+COPY client/docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh

 # Copy built assets from builder
 COPY --from=builder /app/dist .

-# Expose HTTP port
 EXPOSE 80

-# Health check to verify Nginx is actively running
 HEALTHCHECK --interval=30s --timeout=5s --start-period=3s --retries=3 \
-  CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
+  CMD wget --no-verbose --tries=1 --spider http://127.0.0.1:80/ || exit 1
+
+ENTRYPOINT ["/docker-entrypoint.sh"]
@@ -0,0 +1,40 @@
+#!/bin/sh
+set -eu
+
+PLAUSIBLE_ENABLED="${PLAUSIBLE_ENABLED:-true}"
+PLAUSIBLE_HOST="${PLAUSIBLE_HOST:-https://plausible.elpatron.me}"
+PLAUSIBLE_HOST="${PLAUSIBLE_HOST%/}"
+
+case "$(printf '%s' "$PLAUSIBLE_ENABLED" | tr '[:upper:]' '[:lower:]')" in
+  true|1|yes)
+    PLAUSIBLE_ENABLED_JSON=true
+    PLAUSIBLE_CSP=" ${PLAUSIBLE_HOST}"
+    ;;
+  *)
+    PLAUSIBLE_ENABLED_JSON=false
+    PLAUSIBLE_CSP=""
+    ;;
+esac
+
+ROBOTS_NOINDEX="${ROBOTS_NOINDEX:-false}"
+case "$(printf '%s' "$ROBOTS_NOINDEX" | tr '[:upper:]' '[:lower:]')" in
+  true|1|yes)
+    export ROBOTS_NOINDEX_HEADER='    add_header X-Robots-Tag "noindex, nofollow" always;'
+    cat > /usr/share/nginx/html/robots.txt <<'EOF'
+User-agent: *
+Disallow: /
+EOF
+    ;;
+  *)
+    export ROBOTS_NOINDEX_HEADER=''
+    ;;
+esac
+
+export PLAUSIBLE_CSP
+envsubst '${PLAUSIBLE_CSP} ${ROBOTS_NOINDEX_HEADER}' < /etc/nginx/templates/default.conf.template > /etc/nginx/conf.d/default.conf
+
+cat > /usr/share/nginx/html/runtime-config.json <<EOF
+{"plausibleEnabled":${PLAUSIBLE_ENABLED_JSON},"plausibleHost":"${PLAUSIBLE_HOST}"}
+EOF
+
+exec nginx -g 'daemon off;'
@@ -1,16 +1,45 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Kostenloses, werbefreies digitales Yacht-Logbuch mit End-to-End-Verschlüsselung und Passkey-Anmeldung. Reisetage, GPS-Tracks, Crew und Schiffsdaten sicher dokumentieren – auch offline als PWA." />
+    <meta name="keywords" content="Yacht-Logbuch, Schiffstagebuch, Bordlogbuch, Segeln, Passkey, E2E-Verschlüsselung, GPS-Track, maritimes Logbuch, kostenlos, werbefrei, gratis, ohne Werbung, yacht logbook, sailing log, ad-free" />
+    <meta name="author" content="Markus F.J. Busche" />
+    <meta name="robots" content="index, follow" />
+    <meta name="application-name" content="Kapteins Daagbok" />
+    <link rel="canonical" href="https://kapteins-daagbok.eu/" />
+    <link rel="alternate" hreflang="de" href="https://kapteins-daagbok.eu/?lng=de" />
+    <link rel="alternate" hreflang="en" href="https://kapteins-daagbok.eu/?lng=en" />
+    <link rel="alternate" hreflang="da" href="https://kapteins-daagbok.eu/?lng=da" />
+    <link rel="alternate" hreflang="sv" href="https://kapteins-daagbok.eu/?lng=sv" />
+    <link rel="alternate" hreflang="nb" href="https://kapteins-daagbok.eu/?lng=nb" />
+    <link rel="alternate" hreflang="x-default" href="https://kapteins-daagbok.eu/" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Daagbok" />
-    <meta name="theme-color" content="#1e293b" />
+    <meta name="theme-color" content="#0b0c10" />
+    <script src="/appearance-bootstrap.js"></script>
+    <script src="/plausible-bootstrap.js"></script>
+    <script src="/bootstrap-watchdog.js"></script>
    <link rel="apple-touch-icon" href="/logo.png" />
-    <title>Kapteins Daagbok</title>
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Kapteins Daagbok" />
+    <meta property="og:title" content="Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch" />
+    <meta property="og:description" content="Kostenlos und werbefrei: sicheres, E2E-verschlüsseltes Logbuch für Skipper. Reisetage, GPS-Tracks, Crew- und Schiffsdaten – Passkey-Anmeldung und Offline-PWA." />
+    <meta property="og:url" content="https://kapteins-daagbok.eu/" />
+    <meta property="og:image" content="https://kapteins-daagbok.eu/logo.png" />
+    <meta property="og:image:alt" content="Kapteins Daagbok Logo" />
+    <meta property="og:locale" content="de_DE" />
+    <meta property="og:locale:alternate" content="en_US" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch" />
+    <meta name="twitter:description" content="Kostenlos und werbefrei: sicheres, E2E-verschlüsseltes Logbuch für Skipper. Reisetage, GPS-Tracks, Crew- und Schiffsdaten – Passkey-Anmeldung und Offline-PWA." />
+    <meta name="twitter:image" content="https://kapteins-daagbok.eu/logo.png" />
+    <meta name="twitter:image:alt" content="Kapteins Daagbok Logo" />
+    <title>Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch (werbefrei)</title>
  </head>
  <body>
    <div id="root"></div>
@@ -1,20 +1,2 @@
-server {
-    listen 80;
-    server_name localhost;
-    client_max_body_size 50M;
-
-    location / {
-        root /usr/share/nginx/html;
-        index index.html index.htm;
-        try_files $uri $uri/ /index.html;
-    }
-
-    location /api/ {
-        proxy_pass http://backend:5000/api/;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
-        proxy_set_header Host $host;
-        proxy_cache_bypass $http_upgrade;
-    }
-}
+# Generated at container start from PLAUSIBLE_* — see client/nginx.conf.template and docker-entrypoint.sh
+# Local Docker Compose uses the template via client/Dockerfile entrypoint.
@@ -0,0 +1,52 @@
+server {
+    listen 80;
+    server_name localhost;
+    client_max_body_size 50M;
+
+    # Security headers (TLS/HSTS at NPM — see docs/deployment/npm-security.md)
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=(self)" always;
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self'${PLAUSIBLE_CSP}; connect-src 'self'${PLAUSIBLE_CSP}; img-src 'self' data: blob: https://*.tile.openstreetmap.org; media-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
+${ROBOTS_NOINDEX_HEADER}
+
+    # Service worker and app shell must revalidate so PWA updates are detected
+    location ~* ^/(sw\.js|workbox-.*\.js|manifest\.webmanifest|version\.json)$ {
+        root /usr/share/nginx/html;
+        add_header Cache-Control "no-cache, no-store, must-revalidate" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=(self)" always;
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self'${PLAUSIBLE_CSP}; connect-src 'self'${PLAUSIBLE_CSP}; img-src 'self' data: blob: https://*.tile.openstreetmap.org; media-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
+    }
+
+    location = /index.html {
+        root /usr/share/nginx/html;
+        add_header Cache-Control "no-cache, must-revalidate" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=(self)" always;
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self'${PLAUSIBLE_CSP}; connect-src 'self'${PLAUSIBLE_CSP}; img-src 'self' data: blob: https://*.tile.openstreetmap.org; media-src 'self' blob: data:; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
+    }
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+        proxy_pass http://backend:5000/api/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
@@ -7,18 +7,29 @@
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
-    "preview": "vite preview"
+    "test": "vitest run",
+    "preview": "vite preview",
+    "generate:flyer": "node ../scripts/generate-beta-flyer.mjs",
+    "generate:flyer:png": "node ../scripts/generate-beta-flyer.mjs --png",
+    "generate:flyer:all": "node ../scripts/generate-beta-flyer.mjs --all",
+    "generate:flyer:setup": "playwright install chromium",
+    "generate:sharepic": "node ../scripts/generate-sharepic.mjs",
+    "translate:locales": "node ../scripts/translate-locales.mjs",
+    "translate:flyer": "node ../scripts/translate-flyer.mjs",
+    "validate:i18n": "node ../scripts/validate-i18n-keys.mjs"
  },
  "dependencies": {
    "@simplewebauthn/browser": "^13.3.0",
    "bip39": "^3.1.0",
    "dexie": "^4.4.2",
    "dexie-react-hooks": "^4.4.0",
+    "fflate": "^0.8.3",
    "i18next": "^26.3.0",
    "i18next-browser-languagedetector": "^8.2.1",
    "jspdf": "^4.2.1",
    "leaflet": "^1.9.4",
    "lucide-react": "^1.16.0",
+    "qrcode": "^1.5.4",
    "react": "^19.2.6",
    "react-dom": "^19.2.6",
    "react-i18next": "^17.0.8"
@@ -27,16 +38,23 @@
    "@eslint/js": "^10.0.1",
    "@types/leaflet": "^1.9.21",
    "@types/node": "^24.12.3",
+    "@types/qrcode": "^1.5.5",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^4.7.0",
    "eslint": "^10.3.0",
    "eslint-plugin-react-hooks": "^7.1.1",
    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^17.6.0",
+    "happy-dom": "^20.9.0",
+    "playwright": "^1.51.0",
    "typescript": "~6.0.2",
    "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.12",
-    "vite-plugin-pwa": "^1.3.0"
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^1.0.1",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=20.0.0"
  }
 }
@@ -0,0 +1,44 @@
+/**
+ * Applies saved appearance classes before CSS/JS bundle loads (prevents wrong flash on PWA).
+ * Logic mirrors client/src/services/appearance.ts + userPreferences.ts.
+ */
+(function () {
+  try {
+    var uid = localStorage.getItem('active_userid')
+    var theme = 'auto'
+    var scheme = 'auto'
+
+    if (uid) {
+      theme =
+        localStorage.getItem('user_pref_theme_' + uid) ||
+        localStorage.getItem('active_theme') ||
+        'auto'
+      scheme =
+        localStorage.getItem('user_pref_color_scheme_' + uid) ||
+        localStorage.getItem('active_color_scheme') ||
+        'auto'
+    } else {
+      theme = localStorage.getItem('active_theme') || 'auto'
+      scheme = localStorage.getItem('active_color_scheme') || 'auto'
+    }
+
+    var resolvedTheme = theme
+    if (resolvedTheme !== 'ocean' && resolvedTheme !== 'material' && resolvedTheme !== 'cupertino') {
+      var ua = navigator.userAgent || navigator.vendor || ''
+      if (/iPad|iPhone|iPod|Macintosh/.test(ua)) resolvedTheme = 'cupertino'
+      else if (/Android|Linux/.test(ua)) resolvedTheme = 'material'
+      else resolvedTheme = 'ocean'
+    }
+
+    var resolvedScheme = scheme
+    if (resolvedScheme !== 'light' && resolvedScheme !== 'dark') {
+      resolvedScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    var root = document.documentElement
+    root.classList.add('theme-' + resolvedTheme, 'scheme-' + resolvedScheme)
+    root.style.colorScheme = resolvedScheme
+  } catch (_) {
+    /* ignore storage / matchMedia errors */
+  }
+})()
@@ -0,0 +1,221 @@
+/**
+ * Boot watchdog for production PWAs.
+ * Recovers from white/black screens when stale HTML points to missing JS chunks.
+ * Does not clear caches automatically while offline to protect unsynced data.
+ */
+(function () {
+  if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
+    return
+  }
+
+  var BOOT_TIMEOUT_MS = 12000
+  var ATTEMPT_WINDOW_MS = 120000
+  var ATTEMPT_COUNT_KEY = 'pwa_boot_watchdog_attempt_count'
+  var ATTEMPT_LAST_KEY = 'pwa_boot_watchdog_attempt_last_ts'
+  var PENDING_EVENTS_KEY = 'pwa_boot_pending_events'
+  var MAX_PENDING_EVENTS = 12
+
+  function enqueueEvent(name, props) {
+    try {
+      var current = JSON.parse(sessionStorage.getItem(PENDING_EVENTS_KEY) || '[]')
+      if (!Array.isArray(current)) current = []
+      current.push({ name: name, props: props, ts: Date.now() })
+      if (current.length > MAX_PENDING_EVENTS) {
+        current = current.slice(current.length - MAX_PENDING_EVENTS)
+      }
+      sessionStorage.setItem(PENDING_EVENTS_KEY, JSON.stringify(current))
+    } catch (_) {
+      /* ignore analytics queue errors */
+    }
+  }
+
+  function emit(name, props) {
+    if (typeof window.plausible === 'function') {
+      if (props && Object.keys(props).length > 0) {
+        window.plausible(name, { props: props })
+      } else {
+        window.plausible(name)
+      }
+      return
+    }
+    enqueueEvent(name, props)
+  }
+
+  function hasBootstrapped() {
+    return window.__KDB_APP_BOOTSTRAPPED === true
+  }
+
+  function resetAttempts() {
+    try {
+      sessionStorage.removeItem(ATTEMPT_COUNT_KEY)
+      sessionStorage.removeItem(ATTEMPT_LAST_KEY)
+    } catch (_) {
+      /* ignore storage errors */
+    }
+  }
+
+  function nextAttempt() {
+    try {
+      var now = Date.now()
+      var last = Number(sessionStorage.getItem(ATTEMPT_LAST_KEY) || '0')
+      var count = Number(sessionStorage.getItem(ATTEMPT_COUNT_KEY) || '0')
+      if (now - last > ATTEMPT_WINDOW_MS) {
+        count = 0
+      }
+      count += 1
+      sessionStorage.setItem(ATTEMPT_COUNT_KEY, String(count))
+      sessionStorage.setItem(ATTEMPT_LAST_KEY, String(now))
+      return count
+    } catch (_) {
+      return 1
+    }
+  }
+
+  function createRecoveryUrl(reason) {
+    try {
+      var url = new URL(location.href)
+      url.searchParams.set('boot_recover', reason)
+      url.searchParams.set('_', String(Date.now()))
+      return url.toString()
+    } catch (_) {
+      return location.href
+    }
+  }
+
+  async function clearServiceWorkerCaches() {
+    if ('serviceWorker' in navigator) {
+      try {
+        var registrations = await navigator.serviceWorker.getRegistrations()
+        await Promise.all(
+          registrations.map(function (registration) {
+            return registration.unregister()
+          })
+        )
+      } catch (_) {
+        /* ignore SW cleanup errors */
+      }
+    }
+    if ('caches' in window) {
+      try {
+        var keys = await caches.keys()
+        await Promise.all(
+          keys.map(function (key) {
+            return caches.delete(key)
+          })
+        )
+      } catch (_) {
+        /* ignore cache cleanup errors */
+      }
+    }
+  }
+
+  function renderFallback(isOffline) {
+    var root = document.getElementById('root')
+    if (!root) return
+
+    root.innerHTML =
+      '<div class="auth-screen">' +
+      '<div class="auth-card glass" role="alert" style="max-width:460px">' +
+      '<h2 style="margin-top:0">Kapteins Daagbok</h2>' +
+      '<p style="color:var(--app-text-muted);line-height:1.5;margin-bottom:8px">' +
+      (isOffline
+        ? 'Die App konnte offline nicht sauber starten. Deine lokalen, nicht synchronisierten Daten bleiben erhalten.'
+        : 'Die App konnte nicht sauber starten. Deine lokalen, nicht synchronisierten Daten bleiben erhalten.') +
+      '</p>' +
+      '<p style="color:var(--app-text-muted);line-height:1.5;margin-top:0">' +
+      (isOffline
+        ? 'Bitte neu laden. Wenn wieder Netz verfügbar ist, kann die App-Engine automatisch repariert werden.'
+        : 'Du kannst jetzt eine App-Reparatur ausfuehren, ohne IndexedDB-Logbuchdaten zu loeschen.') +
+      '</p>' +
+      '<button type="button" class="btn primary" id="boot-reload-btn" style="width:100%">' +
+      'Neu laden' +
+      '</button>' +
+      (!isOffline
+        ? '<button type="button" class="btn secondary" id="boot-repair-btn" style="width:100%;margin-top:12px">' +
+          'App-Reparatur (Cache + Service Worker)' +
+          '</button>'
+        : '') +
+      '</div>' +
+      '</div>'
+
+    var reloadBtn = document.getElementById('boot-reload-btn')
+    if (reloadBtn) {
+      reloadBtn.addEventListener('click', function () {
+        location.replace(createRecoveryUrl('retry'))
+      })
+    }
+
+    var repairBtn = document.getElementById('boot-repair-btn')
+    if (repairBtn) {
+      repairBtn.addEventListener('click', function () {
+        emit('PWA Boot Watchdog Manual Repair', {
+          attempt: Number(sessionStorage.getItem(ATTEMPT_COUNT_KEY) || '0'),
+          online: navigator.onLine
+        })
+        Promise.resolve()
+          .then(clearServiceWorkerCaches)
+          .finally(function () {
+            resetAttempts()
+            location.replace(createRecoveryUrl('manual-hard-recovery'))
+          })
+      })
+    }
+  }
+
+  function runWatchdog() {
+    window.setTimeout(function () {
+      if (hasBootstrapped()) {
+        resetAttempts()
+        return
+      }
+
+      var attempt = nextAttempt()
+      var online = navigator.onLine
+
+      if (attempt === 1) {
+        emit('PWA Boot Watchdog Soft', {
+          attempt: attempt,
+          online: online,
+          reason: online ? 'soft-reload' : 'offline-retry'
+        })
+        Promise.resolve()
+          .then(function () {
+            if ('serviceWorker' in navigator && navigator.serviceWorker.getRegistration) {
+              return navigator.serviceWorker.getRegistration().then(function (registration) {
+                if (registration) {
+                  return registration.update().catch(function () {})
+                }
+              })
+            }
+          })
+          .finally(function () {
+            location.replace(createRecoveryUrl(online ? 'soft-reload' : 'offline-retry'))
+          })
+        return
+      }
+
+      if (attempt === 2 && online) {
+        emit('PWA Boot Watchdog Hard', {
+          attempt: attempt,
+          online: online,
+          reason: 'hard-recovery'
+        })
+        Promise.resolve()
+          .then(clearServiceWorkerCaches)
+          .finally(function () {
+            location.replace(createRecoveryUrl('hard-recovery'))
+          })
+        return
+      }
+
+      emit('PWA Boot Watchdog Fallback', {
+        attempt: attempt,
+        online: online,
+        reason: online ? 'retries-exhausted' : 'offline-retries-exhausted'
+      })
+      renderFallback(!online)
+    }, BOOT_TIMEOUT_MS)
+  }
+
+  runWatchdog()
+})()
@@ -0,0 +1,25 @@
+/**
+ * Loads Plausible when enabled via /runtime-config.json (from .env in Docker / Vite dev).
+ * data-domain is always the current hostname (prod vs staging).
+ */
+(function () {
+  function load(cfg) {
+    if (!cfg || !cfg.plausibleEnabled || !cfg.plausibleHost) return
+    var host = String(cfg.plausibleHost).replace(/\/$/, '')
+    if (!host) return
+    var s = document.createElement('script')
+    s.defer = true
+    s.dataset.domain = window.location.hostname
+    s.src = host + '/js/script.tagged-events.js'
+    document.head.appendChild(s)
+  }
+
+  fetch('/runtime-config.json', { cache: 'no-store' })
+    .then(function (r) {
+      return r.ok ? r.json() : null
+    })
+    .then(load)
+    .catch(function () {
+      /* analytics optional */
+    })
+})()
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://kapteins-daagbok.eu/sitemap.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://kapteins-daagbok.eu/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>
@@ -1,66 +1,163 @@
-import { useState, useEffect } from 'react'
-import './App.css'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { DialogProvider } from './components/ModalDialog.tsx'
 import AuthOnboarding from './components/AuthOnboarding.tsx'
+import UserProfilePage from './components/UserProfilePage.tsx'
 import LogbookDashboard from './components/LogbookDashboard.tsx'
-import VesselForm from './components/VesselForm.tsx'
-import CrewForm from './components/CrewForm.tsx'
-import DeviationForm from './components/DeviationForm.tsx'
+import LogbookVesselPicker from './components/LogbookVesselPicker.tsx'
+import LogbookCrewPicker from './components/LogbookCrewPicker.tsx'
+import { migrateLegacyCrewToPoolIfNeeded } from './services/crewMigration.js'
+import { migrateLegacyYachtsToPoolIfNeeded } from './services/vesselMigration.js'
+import { syncVesselPool } from './services/vesselPoolSync.js'
+import { syncPersonPool } from './services/personPoolSync.js'
+// Compass Deviation Table — für Freizeit-Skipper vorerst deaktiviert (Komponente bleibt erhalten)
+// import DeviationForm from './components/DeviationForm.tsx'
 import LogEntriesList from './components/LogEntriesList.tsx'
+import StatsDashboard from './components/StatsDashboard.tsx'
 import SettingsForm from './components/SettingsForm.tsx'
 import InvitationAcceptance from './components/InvitationAcceptance.tsx'
-import { getActiveMasterKey, logoutUser } from './services/auth.js'
+import AppTourOverlay from './components/AppTourOverlay.tsx'
+import { AppTourProvider, useAppTour, type AppTab } from './context/AppTourContext.tsx'
+import { UnsavedChangesProvider, useUnsavedChangesContext } from './context/UnsavedChangesContext.tsx'
+import {
+  logoutUser,
+  checkServerSession,
+  hasUnlockedLocalSession,
+  persistSessionUserId
+} from './services/auth.js'
+import AppErrorBoundary from './components/AppErrorBoundary.tsx'
+import { PlausibleEvents, trackPlausibleEvent } from './services/analytics.js'
+import {
+  applyAppearanceToDocument,
+  resolveAppTheme,
+  resolveColorScheme,
+  subscribeToSystemColorScheme
+} from './services/appearance.js'
+import { syncAppearancePrefs } from './services/appearancePrefs.js'
 import { startBackgroundSync, stopBackgroundSync, syncAllLogbooks, subscribeToSyncState } from './services/sync.js'
 import ReadOnlyViewer from './components/ReadOnlyViewer.tsx'
+import DemoViewer from './components/DemoViewer.tsx'
+import AdminDashboard from './admin/AdminDashboard.tsx'
 import PwaInstallPrompt from './components/PwaInstallPrompt.tsx'
+import PwaUpdatePrompt from './components/PwaUpdatePrompt.tsx'
 import AppFooter from './components/AppFooter.tsx'
+import LogbookRoleBadge from './components/LogbookRoleBadge.tsx'
+import BetaBadge from './components/BetaBadge.tsx'
 import { db } from './services/db.js'
+import { getLogbookAccess } from './services/logbookAccess.js'
+import type { LogbookAccessRole } from './services/logbook.js'
 import { useLiveQuery } from 'dexie-react-hooks'
-import { Ship, LogOut, ChevronLeft, Users, Compass, FileText, Settings, Wifi, WifiOff } from 'lucide-react'
+import { Ship, LogOut, ChevronLeft, Users, FileText, Settings, Wifi, WifiOff, BarChart2 } from 'lucide-react'
+import DisclaimerHeaderButton from './components/DisclaimerHeaderButton.tsx'
+import FeedbackHeaderButton from './components/FeedbackHeaderButton.tsx'
+import ProfileHeaderButton from './components/ProfileHeaderButton.tsx'
+import AdminHeaderButton from './components/AdminHeaderButton.tsx'
+import { checkAdminAccess } from './services/adminApi.js'
 import { useTranslation } from 'react-i18next'
+import LanguageDropdown from './components/LanguageDropdown.tsx'
+import {
+  resolveTourLogbookContext,
+  seedDemoLogbookIfNeeded
+} from './services/demoLogbook.js'
+import { fetchLogbooks, parseCollaborationRole } from './services/logbook.js'
+import { ensurePushSubscriptionIfEnabled } from './services/pushNotifications.js'
+import SyncConflictBanner from './components/SyncConflictBanner.tsx'
+import { requestPersistentStorage } from './utils/storagePersist.js'
+
+const PENDING_PUSH_LOGBOOK_KEY = 'pending_push_logbook_id'

 function App() {
  const { t } = useTranslation()
+  const { confirmLeave } = useUnsavedChangesContext()
+  const { registerNavigation, registerDemoTourContext, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [activeLogbookId, setActiveLogbookId] = useState<string | null>(null)
  const [activeLogbookTitle, setActiveLogbookTitle] = useState<string | null>(null)
-  const [activeTab, setActiveTab] = useState<'vessel' | 'crew' | 'deviation' | 'logs' | 'settings'>('logs')
+  const [activeTab, setActiveTab] = useState<AppTab>('logs')
+  const [tourSelectedEntryId, setTourSelectedEntryId] = useState<string | null>(null)
+  const [tourFeedbackOpen, setTourFeedbackOpen] = useState(false)
+  const [demoHighlightEntryId, setDemoHighlightEntryId] = useState<string | null>(null)
  const [online, setOnline] = useState(navigator.onLine)
  const [isSyncing, setIsSyncing] = useState(false)
-  const [appliedTheme, setAppliedTheme] = useState<'ocean' | 'material' | 'cupertino'>('ocean')
  const [isAcceptingInvite, setIsAcceptingInvite] = useState(false)
+  const [showUserProfile, setShowUserProfile] = useState(false)
+  const [storagePersistHint, setStoragePersistHint] = useState(false)
+  const tourLogbookRef = useRef<{ id: string; title: string } | null>(null)
+  const activeLogbookRef = useRef<{ id: string | null; title: string | null }>({
+    id: activeLogbookId,
+    title: activeLogbookTitle
+  })
+  activeLogbookRef.current = { id: activeLogbookId, title: activeLogbookTitle }

  // Viewer mode for read-only shared links
  const [isViewerMode, setIsViewerMode] = useState(false)
  const [shareToken, setShareToken] = useState('')
  const [shareKey, setShareKey] = useState('')

+  // Public demo mode (no account required)
+  const [isDemoMode, setIsDemoMode] = useState(() => window.location.pathname === '/demo')
+  const [isAdminRoute, setIsAdminRoute] = useState(() => window.location.pathname.startsWith('/admin'))
+  const [isAdminUser, setIsAdminUser] = useState(false)
+  const [sessionChecked, setSessionChecked] = useState(false)
+  const [serverSessionActive, setServerSessionActive] = useState(false)
+
  const syncQueueCount = useLiveQuery(
    () => activeLogbookId ? db.syncQueue.where({ logbookId: activeLogbookId }).count() : db.syncQueue.count(),
    [activeLogbookId]
  )

-  const updateAppliedTheme = () => {
-    const configTheme = localStorage.getItem('active_theme') || 'auto'
-    if (configTheme === 'auto') {
-      const userAgent = navigator.userAgent || navigator.vendor || (window as any).opera
-      if (/iPad|iPhone|iPod|Macintosh/.test(userAgent)) {
-        setAppliedTheme('cupertino')
-      } else if (/Android|Linux/.test(userAgent)) {
-        setAppliedTheme('material')
-      } else {
-        setAppliedTheme('ocean')
-      }
-    } else {
-      setAppliedTheme(configTheme as 'ocean' | 'material' | 'cupertino')
-    }
-  }
+  const activeLogbookRecord = useLiveQuery(
+    () => (activeLogbookId ? db.logbooks.get(activeLogbookId) : undefined),
+    [activeLogbookId]
+  )
+
+  const [activeAccessRole, setActiveAccessRole] = useState<LogbookAccessRole | null>(null)

  useEffect(() => {
-    updateAppliedTheme()
-    window.addEventListener('theme-changed', updateAppliedTheme)
+    if (!activeLogbookId) {
+      setActiveAccessRole('OWNER')
+      return
+    }
+
+    if (!activeLogbookRecord) {
+      setActiveAccessRole(null)
+      return
+    }
+
+    if (activeLogbookRecord.isShared !== 1) {
+      setActiveAccessRole('OWNER')
+      return
+    }
+
+    const cachedRole = activeLogbookRecord.collaborationRole
+    setActiveAccessRole(
+      cachedRole ? parseCollaborationRole(cachedRole, `logbook ${activeLogbookId}`) : null
+    )
+
+    let cancelled = false
+    getLogbookAccess(activeLogbookId)
+      .then((access) => {
+        if (cancelled || !access) return
+        setActiveAccessRole(access.role)
+      })
+      .catch((err) => {
+        console.warn('Failed to resolve logbook access role:', err)
+      })
+
    return () => {
-      window.removeEventListener('theme-changed', updateAppliedTheme)
+      cancelled = true
+    }
+  }, [activeLogbookId, activeLogbookRecord])
+
+  useEffect(() => {
+    const syncAppearance = () => {
+      applyAppearanceToDocument(resolveAppTheme(), resolveColorScheme())
+    }
+    syncAppearance()
+    window.addEventListener('appearance-changed', syncAppearance)
+    const unsubscribeSystem = subscribeToSystemColorScheme(syncAppearance)
+    return () => {
+      window.removeEventListener('appearance-changed', syncAppearance)
+      unsubscribeSystem()
    }
  }, [])

@@ -70,6 +167,24 @@ function App() {
    })
  }, [])

+  const refreshAdminAccess = useCallback(async () => {
+    const isAdmin = await checkAdminAccess()
+    setIsAdminUser(isAdmin)
+  }, [])
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setIsAdminUser(false)
+      return
+    }
+    const userId = localStorage.getItem('active_userid')
+    if (!userId) return
+    void syncAppearancePrefs(userId)
+    void migrateLegacyCrewToPoolIfNeeded().then(() => syncPersonPool())
+    void migrateLegacyYachtsToPoolIfNeeded().then(() => syncVesselPool())
+    void refreshAdminAccess()
+  }, [isAuthenticated, refreshAdminAccess])
+
  useEffect(() => {
    const handleOnline = () => {
      setOnline(true)
@@ -95,70 +210,389 @@ function App() {
    }
  }, [isAuthenticated])

-  useEffect(() => {
+  const syncRouteFromLocation = useCallback(() => {
    const params = new URLSearchParams(window.location.search)
    const hashParams = new URLSearchParams(window.location.hash.substring(1))
+    const path = window.location.pathname

-    if (window.location.pathname === '/share' && params.has('token') && hashParams.has('key')) {
-      setShareToken(params.get('token') || '')
-      setShareKey(hashParams.get('key') || '')
-      setIsViewerMode(true)
+    if (path.startsWith('/admin')) {
+      setIsAdminRoute(true)
      return
    }

-    if (params.has('token')) {
-      setIsAcceptingInvite(true)
+    setIsAdminRoute(false)
+
+    if (path === '/demo') {
+      setIsDemoMode(true)
+      setIsViewerMode(false)
+      setIsAcceptingInvite(false)
+      return
    }

-    const savedUser = localStorage.getItem('active_username')
-    const key = getActiveMasterKey()
-    if (savedUser && key) {
-      setIsAuthenticated(true)
-      const savedLogbookId = localStorage.getItem('active_logbook_id')
-      const savedLogbookTitle = localStorage.getItem('active_logbook_title')
-      if (savedLogbookId && savedLogbookTitle) {
+    setIsDemoMode(false)
+
+    if (path === '/share' && params.has('token') && hashParams.has('key')) {
+      setShareToken(params.get('token') || '')
+      setShareKey(hashParams.get('key') || '')
+      setIsViewerMode(true)
+      setIsAcceptingInvite(false)
+      return
+    }
+
+    setIsViewerMode(false)
+
+    if (params.has('token')) {
+      setIsAcceptingInvite(true)
+      return
+    }
+
+    setIsAcceptingInvite(false)
+
+    const openLogbookId = params.get('logbook')
+    if (openLogbookId) {
+      sessionStorage.setItem(PENDING_PUSH_LOGBOOK_KEY, openLogbookId)
+      const cleanUrl = new URL(window.location.href)
+      cleanUrl.searchParams.delete('logbook')
+      window.history.replaceState(
+        {},
+        document.title,
+        `${cleanUrl.pathname}${cleanUrl.search}${cleanUrl.hash}`
+      )
+    }
+  }, [])
+
+  const clearAuthenticatedAppState = useCallback(() => {
+    setIsAuthenticated(false)
+    setIsAdminUser(false)
+    setActiveLogbookId(null)
+    setActiveLogbookTitle(null)
+    setShowUserProfile(false)
+    setTourSelectedEntryId(null)
+    setDemoHighlightEntryId(null)
+  }, [])
+
+  /** After PWA/bfcache resume, React state may still say "logged in" while the master key is gone. */
+  const enforceUnlockedSession = useCallback(() => {
+    if (isViewerMode || isDemoMode || isAcceptingInvite || isAdminRoute) return
+    // Require full local session (incl. userId) so API calls are not left headless.
+    if (isAuthenticated && !hasUnlockedLocalSession()) {
+      clearAuthenticatedAppState()
+    }
+  }, [
+    isAuthenticated,
+    isViewerMode,
+    isDemoMode,
+    isAcceptingInvite,
+    isAdminRoute,
+    clearAuthenticatedAppState
+  ])
+
+  useEffect(() => {
+    enforceUnlockedSession()
+  }, [enforceUnlockedSession])
+
+  useEffect(() => {
+    const onPageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) {
+        enforceUnlockedSession()
+      }
+    }
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        enforceUnlockedSession()
+      }
+    }
+    window.addEventListener('pageshow', onPageShow)
+    document.addEventListener('visibilitychange', onVisibility)
+    return () => {
+      window.removeEventListener('pageshow', onPageShow)
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
+  }, [enforceUnlockedSession])
+
+  useEffect(() => {
+    let cancelled = false
+
+    ;(async () => {
+      try {
+        const session = await checkServerSession()
+        if (cancelled) return
+
+        setServerSessionActive(session.authenticated)
+
+        if (session.authenticated) {
+          persistSessionUserId(session.userId)
+        }
+
+        // Cookie alone is insufficient — need in-memory master key, username, and userId for API.
+        if (session.authenticated && hasUnlockedLocalSession()) {
+          setIsAuthenticated(true)
+          const savedLogbookId = localStorage.getItem('active_logbook_id')
+          const savedLogbookTitle = localStorage.getItem('active_logbook_title')
+          if (savedLogbookId && savedLogbookTitle) {
+            setActiveLogbookId(savedLogbookId)
+            setActiveLogbookTitle(savedLogbookTitle)
+          }
+        }
+        // authenticated + crypto but no userId: stay on login (enforceUnlockedSession guards active UI)
+      } catch (err) {
+        if (!cancelled) {
+          console.warn('Session restore failed:', err)
+        }
+      } finally {
+        if (!cancelled) {
+          setSessionChecked(true)
+        }
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [clearAuthenticatedAppState])
+
+  useEffect(() => {
+    syncRouteFromLocation()
+    window.addEventListener('popstate', syncRouteFromLocation)
+    return () => window.removeEventListener('popstate', syncRouteFromLocation)
+  }, [syncRouteFromLocation])
+
+  const openDemo = useCallback(() => {
+    window.history.pushState({}, document.title, '/demo')
+    setIsDemoMode(true)
+    setIsViewerMode(false)
+    setIsAcceptingInvite(false)
+  }, [])
+
+  const openAdmin = useCallback(() => {
+    window.history.pushState({}, document.title, '/admin')
+    setIsAdminRoute(true)
+    setIsDemoMode(false)
+    setIsViewerMode(false)
+    setIsAcceptingInvite(false)
+  }, [])
+
+  const selectLogbook = useCallback((id: string, title: string) => {
+    setActiveLogbookId(id)
+    setActiveLogbookTitle(title)
+    setActiveTab('logs')
+    setTourSelectedEntryId(null)
+    localStorage.setItem('active_logbook_id', id)
+    localStorage.setItem('active_logbook_title', title)
+  }, [])
+
+  const ensureTourLogbookOpen = useCallback(async () => {
+    const ctx = await resolveTourLogbookContext(tourLogbookRef.current?.id)
+    if (!ctx) return
+
+    if (activeLogbookRef.current.id !== ctx.logbookId) {
+      selectLogbook(ctx.logbookId, ctx.title)
+    }
+
+    if (ctx.firstEntryId) {
+      setDemoHighlightEntryId(ctx.firstEntryId)
+      registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
+    }
+  }, [registerDemoTourContext, selectLogbook])
+
+  useEffect(() => {
+    registerNavigation({
+      setActiveTab,
+      setSelectedEntryId: setTourSelectedEntryId,
+      setFeedbackOpen: setTourFeedbackOpen,
+      setProfileOpen: setShowUserProfile,
+      ensureLogbookForTour: ensureTourLogbookOpen,
+      setLogbookActive: (active) => {
+        if (active) {
+          void ensureTourLogbookOpen()
+          return
+        }
+
+        const { id, title } = activeLogbookRef.current
+        if (id && title) {
+          tourLogbookRef.current = { id, title }
+        }
+        setActiveLogbookId(null)
+        setActiveLogbookTitle(null)
+        setTourSelectedEntryId(null)
+        localStorage.removeItem('active_logbook_id')
+        localStorage.removeItem('active_logbook_title')
+      }
+    })
+  }, [ensureTourLogbookOpen, registerNavigation])
+
+  useEffect(() => {
+    if (!isAuthenticated || !activeLogbookId) return
+    void (async () => {
+      const ctx = await resolveTourLogbookContext()
+      if (!ctx || ctx.logbookId !== activeLogbookId) return
+      if (ctx.firstEntryId) {
+        setDemoHighlightEntryId(ctx.firstEntryId)
+        registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
+      }
+    })()
+  }, [isAuthenticated, activeLogbookId, registerDemoTourContext])
+
+  const openLogbookById = useCallback(
+    async (logbookId: string) => {
+      try {
+        const books = await fetchLogbooks()
+        const match = books.find((b) => b.id === logbookId)
+        if (match) {
+          selectLogbook(match.id, match.title)
+          return
+        }
+      } catch (err) {
+        console.error('Failed to resolve logbook from push:', err)
+      }
+      selectLogbook(logbookId, `${logbookId.slice(0, 8)}…`)
+    },
+    [selectLogbook]
+  )
+
+  const consumePendingPushLogbook = useCallback(() => {
+    const pending = sessionStorage.getItem(PENDING_PUSH_LOGBOOK_KEY)
+    if (!pending) return
+    sessionStorage.removeItem(PENDING_PUSH_LOGBOOK_KEY)
+    void openLogbookById(pending)
+  }, [openLogbookById])
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      consumePendingPushLogbook()
+    }
+  }, [isAuthenticated, consumePendingPushLogbook])
+
+  useEffect(() => {
+    if (!isAuthenticated || !('serviceWorker' in navigator)) return
+
+    const onSwMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'OPEN_LOGBOOK' && typeof event.data.logbookId === 'string') {
+        void openLogbookById(event.data.logbookId)
+      }
+    }
+
+    navigator.serviceWorker.addEventListener('message', onSwMessage)
+    return () => navigator.serviceWorker.removeEventListener('message', onSwMessage)
+  }, [isAuthenticated, openLogbookById])
+
+  useEffect(() => {
+    if (!isAuthenticated) return
+    if (sessionStorage.getItem('storage_persist_hint_dismissed')) return
+    void requestPersistentStorage().then(({ persisted, supported }) => {
+      if (supported && !persisted) setStoragePersistHint(true)
+    })
+  }, [isAuthenticated])
+
+  const handleAuthenticated = async () => {
+    setIsAuthenticated(true)
+    trackPlausibleEvent(PlausibleEvents.LOGGED_IN)
+    void ensurePushSubscriptionIfEnabled()
+    void requestPersistentStorage()
+
+    try {
+      const demo = await seedDemoLogbookIfNeeded()
+      if (demo) {
+        selectLogbook(demo.logbookId, demo.title)
+        if (demo.firstEntryId) {
+          setDemoHighlightEntryId(demo.firstEntryId)
+        }
+        requestStartAfterLogin()
+        consumePendingPushLogbook()
+        return
+      }
+    } catch (err) {
+      console.error('Failed to seed demo logbook:', err)
+    }
+
+    const savedLogbookId = localStorage.getItem('active_logbook_id')
+    const savedLogbookTitle = localStorage.getItem('active_logbook_title')
+    if (savedLogbookId && savedLogbookTitle) {
+      try {
+        const books = await fetchLogbooks()
+        const match = books.find((b) => b.id === savedLogbookId)
+        if (match) {
+          setActiveLogbookId(match.id)
+          setActiveLogbookTitle(match.title)
+        } else {
+          localStorage.removeItem('active_logbook_id')
+          localStorage.removeItem('active_logbook_title')
+        }
+      } catch {
        setActiveLogbookId(savedLogbookId)
        setActiveLogbookTitle(savedLogbookTitle)
      }
    }
-  }, [])
-
-  const handleAuthenticated = () => {
-    setIsAuthenticated(true)
-    const savedLogbookId = localStorage.getItem('active_logbook_id')
-    const savedLogbookTitle = localStorage.getItem('active_logbook_title')
-    if (savedLogbookId && savedLogbookTitle) {
-      setActiveLogbookId(savedLogbookId)
-      setActiveLogbookTitle(savedLogbookTitle)
-    }
+    consumePendingPushLogbook()
  }

-  const handleLogout = () => {
-    logoutUser()
+  const handleTabChange = async (tab: AppTab) => {
+    if (tab === activeTab) return
+    if (!(await confirmLeave())) return
+    setActiveTab(tab)
+  }
+
+  const handleLogout = async () => {
+    if (!(await confirmLeave())) return
+    void logoutUser()
    setIsAuthenticated(false)
+    setIsAdminUser(false)
    setActiveLogbookId(null)
    setActiveLogbookTitle(null)
+    setShowUserProfile(false)
+    setTourSelectedEntryId(null)
+    setDemoHighlightEntryId(null)
    localStorage.removeItem('active_logbook_id')
    localStorage.removeItem('active_logbook_title')
  }

-  const handleSelectLogbook = (id: string, title: string) => {
-    setActiveLogbookId(id)
-    setActiveLogbookTitle(title)
-    localStorage.setItem('active_logbook_id', id)
-    localStorage.setItem('active_logbook_title', title)
-  }
-
-  const handleBackToDashboard = () => {
+  const handleBackToDashboard = async () => {
+    if (!(await confirmLeave())) return
    setActiveLogbookId(null)
    setActiveLogbookTitle(null)
+    setTourSelectedEntryId(null)
    localStorage.removeItem('active_logbook_id')
    localStorage.removeItem('active_logbook_title')
  }

+  const handleExitDemo = () => {
+    window.history.replaceState({}, document.title, '/')
+    syncRouteFromLocation()
+  }
+
+  const handleBackFromAdmin = () => {
+    window.history.replaceState({}, document.title, '/')
+    setIsAdminRoute(false)
+    syncRouteFromLocation()
+  }
+
+  if (isAdminRoute) {
+    if (!isAuthenticated) {
+      return (
+        <div className="auth-screen">
+          <AuthOnboarding onAuthenticated={handleAuthenticated} onOpenDemo={openDemo} />
+        </div>
+      )
+    }
+
+    return (
+      <div style={{ display: 'contents' }}>
+        <AdminDashboard onBack={handleBackFromAdmin} />
+      </div>
+    )
+  }
+
+  if (isDemoMode) {
+    return (
+      <div style={{ display: 'contents' }}>
+        <DemoViewer onExit={handleExitDemo} />
+      </div>
+    )
+  }
+
  if (isViewerMode) {
    return (
-      <div className={`theme-${appliedTheme}`} style={{ display: 'contents' }}>
+      <div style={{ display: 'contents' }}>
        <ReadOnlyViewer token={shareToken} hexKey={shareKey} />
      </div>
    )
@@ -166,12 +600,13 @@ function App() {

  if (isAcceptingInvite) {
    return (
-      <div className={`theme-${appliedTheme} auth-screen`}>
+      <div className="auth-screen">
        <InvitationAcceptance
          onAccepted={(logbookId, title) => {
            setIsAuthenticated(true)
+            trackPlausibleEvent(PlausibleEvents.LOGGED_IN)
            setIsAcceptingInvite(false)
-            handleSelectLogbook(logbookId, title)
+            selectLogbook(logbookId, title)
            // Clean URL query parameters and hash anchor
            window.history.replaceState({}, document.title, window.location.pathname)
          }}
@@ -186,41 +621,81 @@ function App() {

  if (!isAuthenticated) {
    return (
-      <div className={`theme-${appliedTheme} auth-screen`}>
-        <AuthOnboarding onAuthenticated={handleAuthenticated} />
+      <div className="auth-screen">
+        {!sessionChecked ? (
+          <div className="auth-card glass">
+            <p className="dashboard-status-msg">{t('auth.restore_checking')}</p>
+          </div>
+        ) : (
+          <AuthOnboarding
+            restoreSession={serverSessionActive}
+            onAuthenticated={handleAuthenticated}
+            onOpenDemo={openDemo}
+          />
+        )}
      </div>
    )
  }

-  const pwaInstallBanner = <PwaInstallPrompt variant="banner" />
+  const pwaInstallBanner = !isActive ? <PwaInstallPrompt variant="banner" /> : null

-  if (!activeLogbookId) {
+  const logbookReadOnly =
+    activeLogbookRecord?.isShared === 1 && activeAccessRole === 'READ'
+  const isLogbookOwner =
+    activeAccessRole === 'OWNER' ||
+    (activeLogbookRecord != null && activeLogbookRecord.isShared !== 1)
+
+  if (showUserProfile) {
    return (
-      <div className={`theme-${appliedTheme}`} style={{ display: 'contents' }}>
+      <div style={{ display: 'contents' }}>
        {pwaInstallBanner}
-        <LogbookDashboard
-          onSelectLogbook={handleSelectLogbook}
+        <UserProfilePage
+          onBack={() => setShowUserProfile(false)}
          onLogout={handleLogout}
        />
      </div>
    )
  }

+  if (!activeLogbookId) {
+    return (
+      <div style={{ display: 'contents' }}>
+        {pwaInstallBanner}
+        <LogbookDashboard
+          onSelectLogbook={selectLogbook}
+          onLogout={handleLogout}
+          onOpenProfile={() => setShowUserProfile(true)}
+          onOpenAdmin={isAdminUser ? openAdmin : undefined}
+        />
+      </div>
+    )
+  }
+
  return (
-    <div className={`theme-${appliedTheme}`} style={{ display: 'contents' }}>
+    <div style={{ display: 'contents' }}>
      {pwaInstallBanner}
      {isSyncing && <div className="sync-progress-bar" />}
      <div className="app-layout">
        {/* Active Logbook Header */}
        <header className="app-header">
          <div className="app-header-left">
-            <button className="btn-back" onClick={handleBackToDashboard}>
+            <button className="btn-back" onClick={handleBackToDashboard} title={t('nav.dashboard')}>
              <ChevronLeft size={16} />
-              {t('nav.dashboard')}
+              <span className="hide-mobile">{t('nav.dashboard')}</span>
            </button>
            <div className="app-title-area">
-              <h2>{activeLogbookTitle}</h2>
-              <p className="app-subtitle">{t('app.name')} / {activeLogbookId.substring(0, 8)}...</p>
+              <div className="app-title-row">
+                <h2>{activeLogbookTitle}</h2>
+                <BetaBadge />
+                {activeAccessRole && activeAccessRole !== 'OWNER' && (
+                  <LogbookRoleBadge role={activeAccessRole} />
+                )}
+              </div>
+              <p className="app-subtitle">
+                {activeAccessRole && activeAccessRole !== 'OWNER'
+                  ? t('dashboard.section_shared_hint')
+                  : t('app.tagline')}
+              </p>
            </div>
          </div>

@@ -236,6 +711,21 @@ function App() {
              {online ? <Wifi size={18} /> : <WifiOff size={18} />}
              <span>{online ? 'Online' : t('sync.status_offline')}</span>
            </div>
+            <LanguageDropdown variant="icon" align="right" />
+
+            {isAdminUser && <AdminHeaderButton onClick={openAdmin} />}
+
+            <ProfileHeaderButton onClick={() => setShowUserProfile(true)} />
+
+            <DisclaimerHeaderButton />
+
+            <FeedbackHeaderButton
+              logbookId={activeLogbookId}
+              logbookTitle={activeLogbookTitle}
+              tourOpen={tourFeedbackOpen}
+              onTourOpenChange={setTourFeedbackOpen}
+              tourHighlight={isActive && currentStepId === 'nav_feedback'}
+            />

            <button className="btn-icon logout" onClick={handleLogout} title={t('dashboard.logout')}>
              <LogOut size={18} />
@@ -243,13 +733,32 @@ function App() {
          </div>
        </header>

+        <SyncConflictBanner logbookId={activeLogbookId} />
+
+        {storagePersistHint && (
+          <div className="storage-persist-hint glass" role="status">
+            <p>{t('pwa.storage_persist_hint')}</p>
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={() => {
+                sessionStorage.setItem('storage_persist_hint_dismissed', '1')
+                setStoragePersistHint(false)
+              }}
+            >
+              {t('pwa.later')}
+            </button>
+          </div>
+        )}
+
      {/* Active Workspace */}
      <div className="app-body">
        {/* Navigation Sidebar */}
-        <aside className="app-sidebar">
+        <aside className="app-sidebar" aria-label={t('nav.dashboard')}>
          <button
            className={`sidebar-btn ${activeTab === 'logs' ? 'active' : ''}`}
-            onClick={() => setActiveTab('logs')}
+            onClick={() => void handleTabChange('logs')}
+            data-tour="nav-logs"
          >
            <FileText size={18} />
            {t('nav.logs')}
@@ -257,7 +766,8 @@ function App() {
          
          <button
            className={`sidebar-btn ${activeTab === 'vessel' ? 'active' : ''}`}
-            onClick={() => setActiveTab('vessel')}
+            onClick={() => void handleTabChange('vessel')}
+            data-tour="nav-vessel"
          >
            <Ship size={18} />
            {t('nav.vessel')}
@@ -265,12 +775,14 @@ function App() {

          <button
            className={`sidebar-btn ${activeTab === 'crew' ? 'active' : ''}`}
-            onClick={() => setActiveTab('crew')}
+            onClick={() => void handleTabChange('crew')}
+            data-tour="nav-logbook-crew"
          >
            <Users size={18} />
            {t('nav.crew')}
          </button>

+          {/* Compass Deviation Table — für Freizeit-Skipper vorerst ausgeblendet
          <button
            className={`sidebar-btn ${activeTab === 'deviation' ? 'active' : ''}`}
            onClick={() => setActiveTab('deviation')}
@@ -278,10 +790,20 @@ function App() {
            <Compass size={18} />
            {t('nav.deviation')}
          </button>
+          */}
+
+          <button
+            className={`sidebar-btn ${activeTab === 'stats' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('stats')}
+            data-tour="nav-stats"
+          >
+            <BarChart2 size={18} />
+            {t('nav.stats')}
+          </button>

          <button
            className={`sidebar-btn ${activeTab === 'settings' ? 'active' : ''}`}
-            onClick={() => setActiveTab('settings')}
+            onClick={() => void handleTabChange('settings')}
          >
            <Settings size={18} />
            {t('nav.settings')}
@@ -291,25 +813,95 @@ function App() {
        {/* Tab Content Panels (Placeholder until Phase 3) */}
        <main className="app-content">
          {activeTab === 'logs' && (
-            <LogEntriesList logbookId={activeLogbookId} />
+            <LogEntriesList
+              logbookId={activeLogbookId}
+              readOnly={logbookReadOnly}
+              controlledSelectedEntryId={tourSelectedEntryId}
+              onSelectedEntryIdChange={setTourSelectedEntryId}
+              highlightEntryId={demoHighlightEntryId}
+            />
          )}

          {activeTab === 'vessel' && (
-            <VesselForm logbookId={activeLogbookId} />
+            <LogbookVesselPicker
+              logbookId={activeLogbookId}
+              readOnly={logbookReadOnly || !isLogbookOwner}
+              selectionOnly={!isLogbookOwner && activeLogbookRecord?.isShared === 1}
+              onOpenProfile={isLogbookOwner ? () => setShowUserProfile(true) : undefined}
+            />
          )}

          {activeTab === 'crew' && (
-            <CrewForm logbookId={activeLogbookId} />
+            <LogbookCrewPicker
+              logbookId={activeLogbookId}
+              readOnly={logbookReadOnly}
+              selectionOnly={!isLogbookOwner && activeLogbookRecord?.isShared === 1}
+            />
          )}

+          {activeTab === 'stats' && activeLogbookId && activeLogbookTitle && (
+            <StatsDashboard logbookId={activeLogbookId} logbookTitle={activeLogbookTitle} />
+          )}
+
+          {/* Compass Deviation Table — für Freizeit-Skipper vorerst deaktiviert
          {activeTab === 'deviation' && (
            <DeviationForm logbookId={activeLogbookId} />
          )}
+          */}

          {activeTab === 'settings' && (
-            <SettingsForm logbookId={activeLogbookId} />
+            <SettingsForm
+              logbookId={activeLogbookId}
+            />
          )}
        </main>
+
+        <nav className="app-bottom-nav" aria-label={t('nav.dashboard')}>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'logs' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('logs')}
+            data-tour="nav-logs"
+          >
+            <FileText size={20} />
+            <span>{t('nav.logs')}</span>
+          </button>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'vessel' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('vessel')}
+            data-tour="nav-vessel"
+          >
+            <Ship size={20} />
+            <span>{t('nav.vessel')}</span>
+          </button>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'crew' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('crew')}
+            data-tour="nav-logbook-crew"
+          >
+            <Users size={20} />
+            <span>{t('nav.crew')}</span>
+          </button>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'stats' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('stats')}
+            data-tour="nav-stats"
+          >
+            <BarChart2 size={20} />
+            <span>{t('nav.stats')}</span>
+          </button>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'settings' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('settings')}
+          >
+            <Settings size={20} />
+            <span>{t('nav.settings')}</span>
+          </button>
+        </nav>
      </div>
    </div>
  </div>
@@ -318,9 +910,17 @@ function App() {

 export default function AppWrapper() {
  return (
-    <DialogProvider>
-      <App />
-      <AppFooter />
-    </DialogProvider>
+    <AppErrorBoundary>
+      <DialogProvider>
+        <UnsavedChangesProvider>
+          <AppTourProvider>
+            <PwaUpdatePrompt />
+            <App />
+            <AppTourOverlay />
+          </AppTourProvider>
+          <AppFooter />
+        </UnsavedChangesProvider>
+      </DialogProvider>
+    </AppErrorBoundary>
  )
 }
@@ -0,0 +1,252 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import {
+  fetchAdminMe,
+  fetchAdminSummary,
+  fetchAdminTimeSeries,
+  type AdminSummary,
+  type AdminTimeSeriesResponse,
+  type AdminTimeBucket
+} from '../services/adminApi.js'
+import { BarChart2, Bookmark, ChevronLeft, Database, Image, MapPin, Mic, Users } from 'lucide-react'
+
+function formatNumber(value: number): string {
+  return value.toLocaleString()
+}
+
+function formatBytes(bytes: number | undefined): string {
+  if (bytes === undefined || bytes === null) return '—'
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  const num = bytes / Math.pow(k, i)
+  return `${num.toFixed(1)} ${sizes[i]}`
+}
+
+function KpiCard({
+  icon,
+  label,
+  value
+}: {
+  icon: ReactNode
+  label: string
+  value: number | string
+}) {
+  return (
+    <div className="stats-kpi-card glass">
+      <div className="stats-kpi-icon">{icon}</div>
+      <div className="stats-kpi-body">
+        <span className="stats-kpi-label">{label}</span>
+        <span className="stats-kpi-value">{typeof value === 'number' ? formatNumber(value) : value}</span>
+      </div>
+    </div>
+  )
+}
+
+function TimeSeriesChart({
+  title,
+  seriesKey,
+  data
+}: {
+  title: string
+  seriesKey: string
+  data: AdminTimeSeriesResponse | null
+}) {
+  if (!data) {
+    return null
+  }
+
+  const metric = data.series.find((s) => s.metric === seriesKey)
+  if (!metric || metric.points.length === 0) {
+    return (
+      <div className="form-card glass">
+        <div className="form-header">
+          <BarChart2 className="form-icon" />
+          <h2>{title}</h2>
+        </div>
+        <p className="dashboard-status-msg">Keine Daten im gewählten Zeitraum.</p>
+      </div>
+    )
+  }
+
+  const max = metric.points.reduce((acc, p) => (p.count > acc ? p.count : acc), 0) || 1
+
+  return (
+    <div className="form-card glass">
+      <div className="form-header">
+        <BarChart2 className="form-icon" />
+        <h2>{title}</h2>
+      </div>
+      <div className="stats-bar-chart" role="img" aria-label={title}>
+        {metric.points.map((point) => {
+          const heightPct = Math.max(2, (point.count / max) * 100)
+          return (
+            <div key={point.date} className="stats-bar-column" title={`${point.date}: ${point.count}`}>
+              <span className="stats-bar-value">{point.count > 0 ? String(point.count) : ''}</span>
+              <div className="stats-bar-track">
+                <div className="stats-bar stats-bar--distance" style={{ height: `${heightPct}%` }} />
+              </div>
+              <span className="stats-bar-label">{point.date.slice(5)}</span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+interface AdminDashboardProps {
+  onBack: () => void
+}
+
+export default function AdminDashboard({ onBack }: AdminDashboardProps) {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [summary, setSummary] = useState<AdminSummary | null>(null)
+  const [timeSeries, setTimeSeries] = useState<AdminTimeSeriesResponse | null>(null)
+  const [bucket, setBucket] = useState<AdminTimeBucket>('day')
+  const [windowDays, setWindowDays] = useState(90)
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function load() {
+      try {
+        setLoading(true)
+        setError(null)
+
+        await fetchAdminMe()
+        const [summaryRes, tsRes] = await Promise.all([
+          fetchAdminSummary(),
+          fetchAdminTimeSeries({ bucket, windowDays })
+        ])
+
+        if (!cancelled) {
+          setSummary(summaryRes)
+          setTimeSeries(tsRes)
+        }
+      } catch (err: unknown) {
+        if (!cancelled) {
+          const message =
+            err instanceof Error && err.message ? err.message : 'Fehler beim Laden des Admin-Dashboards'
+          setError(message)
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false)
+        }
+      }
+    }
+
+    void load()
+
+    return () => {
+      cancelled = true
+    }
+  }, [bucket, windowDays])
+
+  if (loading && !summary) {
+    return (
+      <div className="admin-page">
+        <p className="dashboard-status-msg">Admin-Dashboard wird geladen…</p>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="admin-page">
+        <header className="admin-header">
+          <button type="button" className="btn-back" onClick={onBack}>
+            <ChevronLeft size={16} />
+            Zur App
+          </button>
+        </header>
+        <p className="dashboard-status-msg">{error}</p>
+      </div>
+    )
+  }
+
+  if (!summary) {
+    return (
+      <div className="admin-page">
+        <p className="dashboard-status-msg">Keine Admin-Daten verfügbar.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="admin-page">
+      <header className="admin-header">
+        <div className="admin-header-left">
+          <button type="button" className="btn-back" onClick={onBack}>
+            <ChevronLeft size={16} />
+            Zur App
+          </button>
+          <div>
+            <h1 className="admin-title">Admin-Dashboard</h1>
+            <p className="admin-subtitle">
+              Übersicht über Nutzung und Wachstum von Kapteins Daagbok.
+            </p>
+          </div>
+        </div>
+      </header>
+
+      <main className="admin-main">
+        <section className="stats-kpi-grid admin-kpi-grid">
+          <KpiCard icon={<Users size={20} />} label="Registrierte Benutzer" value={summary.totalUsers} />
+          <KpiCard icon={<Bookmark size={20} />} label="Logbücher" value={summary.totalLogbooks} />
+          <KpiCard icon={<Image size={20} />} label="Fotos" value={summary.totalPhotos} />
+          <KpiCard icon={<Mic size={20} />} label="Sprachmemos" value={summary.totalVoiceMemos} />
+          <KpiCard icon={<MapPin size={20} />} label="GPS-Tracks" value={summary.totalGpsTracks} />
+          <KpiCard
+            icon={<BarChart2 size={20} />}
+            label="Einträge mit AI-Zusammenfassung"
+            value={summary.aiSummaryEntries}
+          />
+          <KpiCard icon={<Database size={20} />} label="Datenbankgröße" value={formatBytes(summary.dbSize)} />
+        </section>
+
+        <section className="admin-controls">
+          <div className="admin-control-group">
+            <span className="admin-control-label">Zeitraum</span>
+            <div className="admin-control-buttons">
+              {[30, 90, 365].map((days) => (
+                <button
+                  key={days}
+                  type="button"
+                  className={days === windowDays ? 'btn primary' : 'btn secondary'}
+                  onClick={() => setWindowDays(days)}
+                >
+                  {days} Tage
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="admin-control-group">
+            <span className="admin-control-label">Aggregation</span>
+            <div className="admin-control-buttons">
+              {(['day', 'week', 'month'] as AdminTimeBucket[]).map((b) => (
+                <button
+                  key={b}
+                  type="button"
+                  className={b === bucket ? 'btn primary' : 'btn secondary'}
+                  onClick={() => setBucket(b)}
+                >
+                  {b === 'day' ? 'Tag' : b === 'week' ? 'Woche' : 'Monat'}
+                </button>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        <section className="admin-charts-grid">
+          <TimeSeriesChart title="Neue Benutzer" seriesKey="users_created" data={timeSeries} />
+          <TimeSeriesChart title="Neue Logbücher" seriesKey="logbooks_created" data={timeSeries} />
+          <TimeSeriesChart title="Foto-Aktivität" seriesKey="photos_updated" data={timeSeries} />
+          <TimeSeriesChart title="Datenbankgröße (MB)" seriesKey="database_size" data={timeSeries} />
+        </section>
+      </main>
+    </div>
+  )
+}
@@ -46,6 +46,7 @@ export default function AccountDangerZone({ className = '' }: AccountDangerZoneP
      </div>

      <p className="account-danger-zone__desc">{t('settings.danger_zone_desc')}</p>
+      <p className="account-danger-zone__hint">{t('settings.delete_backup_hint')}</p>

      <div className="form-actions account-danger-zone__actions">
        <button
@@ -0,0 +1,23 @@
+import { useTranslation } from 'react-i18next'
+import { LayoutDashboard } from 'lucide-react'
+
+interface AdminHeaderButtonProps {
+  onClick: () => void
+}
+
+export default function AdminHeaderButton({ onClick }: AdminHeaderButtonProps) {
+  const { t } = useTranslation()
+
+  return (
+    <button
+      type="button"
+      className="btn-icon skipper-badge"
+      onClick={onClick}
+      title={t('nav.admin')}
+      aria-label={t('nav.admin')}
+    >
+      <LayoutDashboard size={18} aria-hidden="true" />
+      <span className="skipper-badge__name">{t('nav.admin')}</span>
+    </button>
+  )
+}
@@ -0,0 +1,42 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  error: Error | null
+}
+
+export default class AppErrorBoundary extends Component<Props, State> {
+  state: State = { error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('Unhandled app error:', error, info.componentStack)
+  }
+
+  render() {
+    if (!this.state.error) {
+      return this.props.children
+    }
+
+    return (
+      <div className="auth-screen">
+        <div className="auth-card glass" role="alert">
+          <h2 style={{ marginTop: 0 }}>Kapteins Daagbok</h2>
+          <p style={{ color: 'var(--app-text-muted)', lineHeight: 1.5 }}>
+            Die App ist nach dem Neustart in einen fehlerhaften Zustand geraten. Bitte neu laden
+            oder die App vollständig beenden und erneut öffnen.
+          </p>
+          <button type="button" className="btn primary" style={{ width: '100%', marginTop: 16 }} onClick={() => window.location.reload()}>
+            Neu laden
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
@@ -1,14 +1,60 @@
+import { Coffee, Mail, Compass } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
 const APP_VERSION = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'dev'
+const KOFI_URL = 'https://ko-fi.com/kapteinsdaagbok'

 export default function AppFooter() {
+  const { t } = useTranslation()
+
  return (
    <footer className="app-version-footer">
      <span className="app-version-footer__version">v{APP_VERSION}</span>
      <span className="app-version-footer__sep" aria-hidden="true">
        ·
      </span>
-      <a className="app-version-footer__copyright" href="mailto:elpatron+kd@mailbox.org">
-        © 2026 Markus F.J. Busche
+      <span className="app-version-footer__copyright">
+        © 2026
+      </span>
+      <span className="app-version-footer__sep" aria-hidden="true">
+        ·
+      </span>
+      <a
+        className="knorrlabs-footer-badge"
+        href="https://dashy.elpatron.me/"
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={() => trackPlausibleEvent(PlausibleEvents.FOOTER_LINK_CLICKED)}
+      >
+        <Compass size={14} aria-hidden="true" />
+        <span>KnorrLabs</span>
+      </a>
+      <span className="app-version-footer__sep" aria-hidden="true">
+        ·
+      </span>
+      <a
+        className="mail-footer-badge"
+        href="mailto:moin@kapteins-daagbok.eu"
+        onClick={() => trackPlausibleEvent(PlausibleEvents.FOOTER_LINK_CLICKED)}
+      >
+        <Mail size={14} aria-hidden="true" />
+        <span>moin@kapteins-daagbok.eu</span>
+      </a>
+      <span className="app-version-footer__sep" aria-hidden="true">
+        ·
+      </span>
+      <a
+        className="kofi-footer-badge"
+        href={KOFI_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        title={t('footer.kofi_title')}
+        aria-label={t('footer.kofi_title')}
+        onClick={() => trackPlausibleEvent(PlausibleEvents.KOFI_LINK_CLICKED)}
+      >
+        <Coffee size={14} aria-hidden="true" />
+        <span>{t('footer.kofi_label')}</span>
      </a>
    </footer>
  )
@@ -0,0 +1,255 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { X, ChevronLeft, ChevronRight } from 'lucide-react'
+import {
+  getTourStepCopy,
+  getTourTargetSelector,
+  getTourTargetRetryDelay,
+  isCenteredTourStep,
+  useAppTour
+} from '../context/AppTourContext.tsx'
+
+interface SpotlightRect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+const TOOLTIP_EDGE_MARGIN = 16
+const TOOLTIP_ESTIMATED_HEIGHT = 240
+const TOOLTIP_WIDTH = 420
+const TARGET_VIEWPORT_MARGIN = 24
+
+function clampTooltipTop(preferred: number): number {
+  const maxTop = window.innerHeight - TOOLTIP_EDGE_MARGIN - TOOLTIP_ESTIMATED_HEIGHT
+  return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(preferred, maxTop))
+}
+
+function computeTooltipLeft(spotlight: SpotlightRect): number {
+  const tooltipWidth = Math.min(TOOLTIP_WIDTH, window.innerWidth - TOOLTIP_EDGE_MARGIN * 2)
+  const ideal = spotlight.left + spotlight.width / 2 - tooltipWidth / 2
+  const maxLeft = window.innerWidth - TOOLTIP_EDGE_MARGIN - tooltipWidth
+  return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(ideal, maxLeft))
+}
+
+function buildCutoutClipPath(rect: SpotlightRect): string {
+  const right = rect.left + rect.width
+  const bottom = rect.top + rect.height
+  return `polygon(evenodd, 0 0, 100vw 0, 100vw 100vh, 0 100vh, 0 0, ${rect.left}px ${rect.top}px, ${right}px ${rect.top}px, ${right}px ${bottom}px, ${rect.left}px ${bottom}px, ${rect.left}px ${rect.top}px)`
+}
+
+function computeTooltipTop(spotlight: SpotlightRect): number {
+  const viewportBottom = window.innerHeight - TOOLTIP_EDGE_MARGIN
+  const below = spotlight.top + spotlight.height + 12
+  if (below + TOOLTIP_ESTIMATED_HEIGHT <= viewportBottom) {
+    return clampTooltipTop(below)
+  }
+
+  const above = spotlight.top - 12 - TOOLTIP_ESTIMATED_HEIGHT
+  if (above >= TOOLTIP_EDGE_MARGIN) {
+    return clampTooltipTop(above)
+  }
+
+  return clampTooltipTop(below)
+}
+
+function isTargetVisibleInViewport(rect: DOMRect): boolean {
+  return (
+    rect.top >= TARGET_VIEWPORT_MARGIN &&
+    rect.bottom <= window.innerHeight - TARGET_VIEWPORT_MARGIN
+  )
+}
+
+function measureSpotlight(el: Element): SpotlightRect | null {
+  const rect = el.getBoundingClientRect()
+  if (rect.width <= 0 || rect.height <= 0) return null
+  const padding = 8
+  return {
+    top: Math.max(8, rect.top - padding),
+    left: Math.max(8, rect.left - padding),
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2
+  }
+}
+
+export default function AppTourOverlay() {
+  const { t } = useTranslation()
+  const {
+    isActive,
+    isDemoTour,
+    currentStepId,
+    currentStepIndex,
+    totalSteps,
+    layoutTick,
+    nextStep,
+    prevStep,
+    skipTour
+  } = useAppTour()
+
+  const [spotlight, setSpotlight] = useState<SpotlightRect | null>(null)
+  const skipTourRef = useRef(skipTour)
+  skipTourRef.current = skipTour
+
+  useLayoutEffect(() => {
+    if (!isActive || !currentStepId || isCenteredTourStep(currentStepId)) {
+      setSpotlight(null)
+      return
+    }
+
+    let cancelled = false
+
+    const updateSpotlight = () => {
+      if (cancelled) return
+      const selector = getTourTargetSelector(currentStepId)
+      if (!selector) {
+        setSpotlight(null)
+        return
+      }
+      const el = document.querySelector(selector)
+      if (!el) {
+        setSpotlight(null)
+        return
+      }
+
+      const rect = el.getBoundingClientRect()
+      if (!isTargetVisibleInViewport(rect)) {
+        el.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
+        window.requestAnimationFrame(() => {
+          if (cancelled) return
+          const next = measureSpotlight(el)
+          setSpotlight(next)
+        })
+        return
+      }
+
+      setSpotlight(measureSpotlight(el))
+    }
+
+    updateSpotlight()
+    window.addEventListener('resize', updateSpotlight)
+    window.addEventListener('scroll', updateSpotlight, true)
+
+    const retryDelays =
+      currentStepId === 'entry_track'
+        ? [400, 700, 1100, 1600]
+        : [getTourTargetRetryDelay(currentStepId), 120, 280, 480]
+    const timers = retryDelays.map((delay) => window.setTimeout(updateSpotlight, delay))
+
+    return () => {
+      cancelled = true
+      for (const timer of timers) window.clearTimeout(timer)
+      window.removeEventListener('resize', updateSpotlight)
+      window.removeEventListener('scroll', updateSpotlight, true)
+    }
+  }, [currentStepId, isActive, layoutTick])
+
+  useEffect(() => {
+    if (!isActive) return
+    document.body.classList.add('app-tour-active')
+    return () => document.body.classList.remove('app-tour-active')
+  }, [isActive])
+
+  useEffect(() => {
+    if (!isActive || !currentStepId || isCenteredTourStep(currentStepId)) return
+
+    const selector = getTourTargetSelector(currentStepId)
+    if (!selector) return
+
+    const el = document.querySelector(selector)
+    el?.classList.add('app-tour-target-active')
+    return () => el?.classList.remove('app-tour-target-active')
+  }, [currentStepId, isActive])
+
+  useEffect(() => {
+    if (!isActive) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') skipTourRef.current()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [isActive])
+
+  if (!isActive || !currentStepId) return null
+
+  const { title, body } = getTourStepCopy(currentStepId, t, { demoMode: isDemoTour })
+  const centered = isCenteredTourStep(currentStepId)
+
+  const tooltipStyle = centered
+    ? undefined
+    : spotlight
+      ? { top: computeTooltipTop(spotlight), left: computeTooltipLeft(spotlight) }
+      : { top: '20%' }
+
+  const tooltipClassName = [
+    'app-tour-tooltip',
+    centered ? 'centered' : '',
+    !centered && spotlight ? 'app-tour-tooltip--anchored' : ''
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const backdropStyle = spotlight && !centered
+    ? { clipPath: buildCutoutClipPath(spotlight) }
+    : undefined
+
+  return (
+    <div className="app-tour-root" role="dialog" aria-modal="true" aria-label={title}>
+      <div
+        className={`app-tour-backdrop${spotlight && !centered ? ' app-tour-backdrop--cutout' : ''}`}
+        style={backdropStyle}
+        onClick={skipTour}
+      />
+
+      {!centered && spotlight && (
+        <div
+          className="app-tour-spotlight"
+          style={{
+            top: spotlight.top,
+            left: spotlight.left,
+            width: spotlight.width,
+            height: spotlight.height
+          }}
+        />
+      )}
+
+      <div className={tooltipClassName} style={tooltipStyle}>
+        <button type="button" className="app-tour-close" onClick={skipTour} aria-label={t('tour.skip')}>
+          <X size={18} />
+        </button>
+
+        <p className="app-tour-progress">
+          {t('tour.progress', { current: currentStepIndex + 1, total: totalSteps })}
+        </p>
+        <h3 className="app-tour-title">{title}</h3>
+        <p className="app-tour-body">{body}</p>
+
+        <div className="app-tour-actions">
+          <button
+            type="button"
+            className="app-tour-link"
+            onClick={skipTour}
+          >
+            {t('tour.skip')}
+          </button>
+
+          <div className="app-tour-nav">
+            <button
+              type="button"
+              className="btn secondary app-tour-nav-btn"
+              onClick={prevStep}
+              disabled={currentStepIndex === 0}
+            >
+              <ChevronLeft size={16} />
+              {t('tour.back')}
+            </button>
+            <button type="button" className="btn primary app-tour-nav-btn" onClick={nextStep}>
+              {currentStepIndex === totalSteps - 1 ? t('tour.finish') : t('tour.next')}
+              {currentStepIndex < totalSteps - 1 && <ChevronRight size={16} />}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -1,24 +1,43 @@
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { 
-  registerUser, 
-  loginUser, 
-  completeLoginWithRecovery, 
-  setLocalPin, 
-  hasLocalPin, 
-  decryptWithLocalPin, 
+import LanguageDropdown from './LanguageDropdown.tsx'
+import {
+  registerUser,
+  loginUser,
+  completeLoginWithRecovery,
+  setLocalPin,
+  hasLocalPin,
+  decryptWithLocalPin,
  getActiveMasterKey,
  getKnownUsernames,
-  forgetUsername
+  forgetUsername,
+  hasUnlockedLocalSession,
+  logoutUser,
+  resolveRestoreUsername
 } from '../services/auth.js'
-import { KeyRound, ShieldAlert, Languages, HelpCircle, UserRound, X } from 'lucide-react'
+import { KeyRound, ShieldAlert, HelpCircle, UserRound, X } from 'lucide-react'
+import RegistrationDisclaimer from './RegistrationDisclaimer.tsx'
+import DisclaimerModal from './DisclaimerModal.tsx'
+import BetaBadge from './BetaBadge.tsx'
+import {
+  isPasskeyCompatibleLocation,
+  localizeWebAuthnError,
+  toPasskeyCompatibleUrl
+} from '../utils/passkeyHost.ts'

 interface AuthOnboardingProps {
  onAuthenticated: () => void
+  onOpenDemo?: () => void
+  /** Server session cookie is valid but the in-memory master key was lost (e.g. after reload). */
+  restoreSession?: boolean
 }

-export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps) {
-  const { t, i18n } = useTranslation()
+export default function AuthOnboarding({
+  onAuthenticated,
+  onOpenDemo,
+  restoreSession = false
+}: AuthOnboardingProps) {
+  const { t } = useTranslation()
  const [username, setUsername] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
@@ -45,6 +64,37 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
  const [showPinLogin, setShowPinLogin] = useState(false)
  const [pinLoginInput, setPinLoginInput] = useState('')

+  const [isNewRegistration, setIsNewRegistration] = useState(false)
+  const [showDisclaimer, setShowDisclaimer] = useState(false)
+  const [showHelp, setShowHelp] = useState(false)
+  const [showStandardLogin, setShowStandardLogin] = useState(false)
+  const autoUnlockAttempted = useRef(false)
+
+  const isRestoreFlow = restoreSession && !showStandardLogin
+  const passkeyHostOk = isPasskeyCompatibleLocation()
+  const passkeyCompatibleUrl = passkeyHostOk ? null : toPasskeyCompatibleUrl(window.location.href)
+
+  const formatAuthError = (message: string) =>
+    localizeWebAuthnError(message, {
+      invalidHost: t('auth.error_invalid_host'),
+      cancelled: t('auth.error_passkey_cancelled'),
+      invalidRpId: t('auth.error_invalid_rp_id')
+    })
+
+  const finishAuth = () => {
+    if (isNewRegistration) {
+      setShowDisclaimer(true)
+      return
+    }
+    onAuthenticated()
+  }
+
+  const handleDisclaimerAccept = () => {
+    setIsNewRegistration(false)
+    setShowDisclaimer(false)
+    onAuthenticated()
+  }
+
  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!username.trim()) return
@@ -54,10 +104,11 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
    try {
      const result = await registerUser(username.trim())
      if (result.verified) {
+        setIsNewRegistration(true)
        setRecoveryPhrase(result.recoveryPhrase)
      }
    } catch (err: any) {
-      setError(err.message || 'Registration failed')
+      setError(formatAuthError(err.message || 'Registration failed'))
    } finally {
      setLoading(false)
    }
@@ -97,12 +148,29 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
        }
      }
    } catch (err: any) {
-      setError(err.message || 'Login failed')
+      setError(formatAuthError(err.message || 'Login failed'))
    } finally {
      setLoading(false)
    }
  }

+  useEffect(() => {
+    if (!isRestoreFlow || autoUnlockAttempted.current) return
+
+    const user = resolveRestoreUsername()
+    if (user && hasLocalPin(user)) {
+      autoUnlockAttempted.current = true
+      setUsername(user)
+      setShowPinLogin(true)
+      return
+    }
+
+    if (user && passkeyHostOk) {
+      autoUnlockAttempted.current = true
+      void handleLogin(user)
+    }
+  }, [isRestoreFlow, passkeyHostOk])
+
  const handleRecoverySubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!recoveryInput.trim() || !encryptedPayloads) return
@@ -148,7 +216,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
      const activeKey = getActiveMasterKey()
      if (activeKey) {
        await setLocalPin(pinInput.trim(), pinSetupUsername, activeKey)
-        onAuthenticated()
+        finishAuth()
      } else {
        setError('No active master key found')
      }
@@ -161,19 +229,33 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)

  const handlePinLoginSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
-    if (!pinLoginInput.trim()) return
+    if (!pinLoginInput.trim() || loading) return
+
+    const resolvedUser =
+      username.trim() ||
+      encryptedPayloads?.username ||
+      localStorage.getItem('active_username') ||
+      ''
+    if (!resolvedUser) {
+      setError(t('auth.error_session_incomplete'))
+      return
+    }

    setLoading(true)
    setError(null)
    try {
-      const resolvedUser = username.trim() || encryptedPayloads?.username
      const key = await decryptWithLocalPin(pinLoginInput.trim(), resolvedUser)
-      if (key) {
-        onAuthenticated()
-      } else {
+      if (!key) {
        setError(t('auth.error_incorrect_pin'))
+        return
      }
-    } catch (err: any) {
+      if (!hasUnlockedLocalSession()) {
+        setError(t('auth.error_session_incomplete'))
+        return
+      }
+      setShowPinLogin(false)
+      onAuthenticated()
+    } catch {
      setError(t('auth.error_incorrect_pin'))
    } finally {
      setLoading(false)
@@ -185,10 +267,6 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
    setKnownUsers(getKnownUsernames())
  }

-  const toggleLanguage = () => {
-    const nextLang = i18n.language.startsWith('de') ? 'en' : 'de'
-    i18n.changeLanguage(nextLang)
-  }

  const copyToClipboard = () => {
    if (recoveryPhrase) {
@@ -198,6 +276,11 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
    }
  }

+  // Render 0: Registration disclaimer (new accounts only, before app onboarding)
+  if (showDisclaimer) {
+    return <RegistrationDisclaimer variant="accept" onDismiss={handleDisclaimerAccept} />
+  }
+
  // Render 1: Display new registration recovery phrase
  if (recoveryPhrase) {
    return (
@@ -247,6 +330,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
            </label>
            <input
              type="password"
+              name="new-pin"
              inputMode="numeric"
              pattern="[0-9]*"
              maxLength={8}
@@ -256,6 +340,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
              onChange={(e) => setPinInput(e.target.value.replace(/\D/g, ''))}
              disabled={loading}
              required
+              autoComplete="new-password"
              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
            />
          </div>
@@ -266,7 +351,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
            <button
              type="button"
              className="btn secondary"
-              onClick={onAuthenticated}
+              onClick={finishAuth}
              disabled={loading}
            >
              {t('auth.skip_pin')}
@@ -286,16 +371,17 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
      <div className="auth-card glass">
        <div className="auth-header">
          <KeyRound className="auth-icon accent" size={48} />
-          <h2>{t('auth.enter_pin_title')}</h2>
+          <h2>{isRestoreFlow ? t('auth.restore_title') : t('auth.enter_pin_title')}</h2>
        </div>
        <p className="recovery-warning">
-          {t('auth.enter_pin_warning')}
+          {isRestoreFlow ? t('auth.restore_pin_warning') : t('auth.enter_pin_warning')}
        </p>

        <form onSubmit={handlePinLoginSubmit} className="auth-form">
          <div className="input-group">
            <input
              type="password"
+              name="pin"
              inputMode="numeric"
              pattern="[0-9]*"
              maxLength={8}
@@ -305,6 +391,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
              onChange={(e) => setPinLoginInput(e.target.value.replace(/\D/g, ''))}
              disabled={loading}
              required
+              autoComplete="current-password"
              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
            />
          </div>
@@ -329,6 +416,30 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
            >
              {t('auth.use_recovery_instead')}
            </button>
+
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={() => {
+                if (isRestoreFlow) {
+                  setShowPinLogin(false)
+                  setPinLoginInput('')
+                  setError(null)
+                  return
+                }
+                void (async () => {
+                  setShowPinLogin(false)
+                  setPinLoginInput('')
+                  setEncryptedPayloads(null)
+                  setError(null)
+                  await logoutUser()
+                })()
+              }}
+              disabled={loading}
+              style={{ width: '100%' }}
+            >
+              {t('auth.back')}
+            </button>
          </div>
        </form>
      </div>
@@ -347,16 +458,37 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
          {t('auth.recovery_fallback_warning')}
        </p>

-        <form onSubmit={handleRecoverySubmit} className="auth-form">
-          <textarea
-            className="input-textarea"
-            placeholder={t('auth.recovery_placeholder')}
-            value={recoveryInput}
-            onChange={(e) => setRecoveryInput(e.target.value)}
-            disabled={loading}
-            rows={3}
-            required
-          />
+        <form onSubmit={handleRecoverySubmit} className="auth-form" autoComplete="on">
+          {(username.trim() || encryptedPayloads?.username) && (
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username.trim() || encryptedPayloads?.username || ''}
+              readOnly
+              tabIndex={-1}
+              aria-hidden="true"
+              style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div className="input-group">
+            <label htmlFor="recovery-key" className="input-label" style={{ display: 'block', marginBottom: '8px', color: '#94a3b8' }}>
+              {t('auth.enter_recovery')}
+            </label>
+            <input
+              id="recovery-key"
+              name="recovery-key"
+              type="password"
+              className="input-text"
+              placeholder={t('auth.recovery_placeholder')}
+              value={recoveryInput}
+              onChange={(e) => setRecoveryInput(e.target.value)}
+              disabled={loading}
+              required
+              autoComplete="current-password"
+              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
+            />
+          </div>

          {error && <div className="auth-error">{error}</div>}

@@ -378,22 +510,130 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
    )
  }

+  // Render: Session restore (active server cookie, master key lost after reload)
+  if (isRestoreFlow) {
+    const restoreUser = resolveRestoreUsername()
+    const restoreKnownUsers = getKnownUsernames()
+
+    return (
+      <div className="auth-card glass">
+        <div className="auth-header">
+          <KeyRound className="auth-icon accent" size={48} />
+          <h2>{t('auth.restore_title')}</h2>
+        </div>
+        <p className="recovery-warning">{t('auth.restore_subtitle')}</p>
+
+        {loading && (
+          <p className="dashboard-status-msg" style={{ marginTop: '12px' }}>
+            {t('auth.restore_unlocking')}
+          </p>
+        )}
+
+        {error && <div className="auth-error">{error}</div>}
+
+        {!loading && (
+          <div className="auth-actions" style={{ flexDirection: 'column', gap: '10px', marginTop: '16px' }}>
+            {restoreUser && passkeyHostOk && (
+              <button
+                type="button"
+                className="btn primary"
+                onClick={() => handleLogin(restoreUser)}
+                style={{ width: '100%' }}
+              >
+                {t('auth.restore_with_passkey', { name: restoreUser })}
+              </button>
+            )}
+
+            {restoreUser && hasLocalPin(restoreUser) && (
+              <button
+                type="button"
+                className="btn secondary"
+                onClick={() => {
+                  setUsername(restoreUser)
+                  setShowPinLogin(true)
+                }}
+                style={{ width: '100%' }}
+              >
+                {t('auth.restore_with_pin')}
+              </button>
+            )}
+
+            {restoreKnownUsers.length > 1 && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' }}>
+                <span style={{ fontSize: '12px', color: '#64748b', textTransform: 'uppercase' }}>
+                  {t('auth.quick_login')}
+                </span>
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', width: '100%' }}>
+                  {restoreKnownUsers.map((name) => (
+                    <button
+                      key={name}
+                      type="button"
+                      onClick={() => {
+                        if (hasLocalPin(name)) {
+                          setUsername(name)
+                          setShowPinLogin(true)
+                        } else {
+                          void handleLogin(name)
+                        }
+                      }}
+                      disabled={loading}
+                      className="btn secondary"
+                      style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
+                    >
+                      <UserRound size={16} />
+                      {name}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={() => {
+                setShowStandardLogin(true)
+                setError(null)
+              }}
+              style={{ width: '100%' }}
+            >
+              {t('auth.restore_other_account')}
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  }
+
  // Render 3: Standard Login / Registration options form
  return (
+    <>
    <div className="auth-card glass">
      <div className="auth-brand">
        <img src="/logo.png" alt="Kapteins Daagbok" className="auth-logo-img" />
-        <h1>{t('app.name')}</h1>
+        <div className="auth-brand-title-row">
+          <h1>{t('app.name')}</h1>
+          <BetaBadge />
+        </div>
        <p className="tagline">{t('auth.tagline')}</p>
      </div>

      <div className="auth-form" style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        {!passkeyHostOk && passkeyCompatibleUrl && (
+          <div className="auth-error" role="alert">
+            <p style={{ margin: '0 0 8px' }}>{t('auth.error_invalid_host')}</p>
+            <a href={passkeyCompatibleUrl} className="btn secondary" style={{ display: 'inline-block', textDecoration: 'none' }}>
+              {t('auth.use_localhost_link')}
+            </a>
+          </div>
+        )}
+
        {/* Prominent Login button */}
        <button
          type="button"
          className="btn primary"
          onClick={() => handleLogin()}
-          disabled={loading}
+          disabled={loading || !passkeyHostOk}
          style={{ width: '100%', padding: '16px' }}
        >
          {loading
@@ -499,6 +739,16 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
          <div style={{ flex: 1, height: '1px', background: 'rgba(255,255,255,0.1)' }}></div>
        </div>

+        <button
+          type="button"
+          className="btn secondary"
+          onClick={() => onOpenDemo?.()}
+          disabled={loading}
+          style={{ width: '100%' }}
+        >
+          {t('auth.explore_demo')}
+        </button>
+
        {/* Registration form */}
        <form onSubmit={handleRegister} style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%' }}>
          <div className="input-group">
@@ -516,7 +766,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
          <button
            type="submit"
            className="btn secondary"
-            disabled={loading || !username.trim()}
+            disabled={loading || !username.trim() || !passkeyHostOk}
            style={{ width: '100%' }}
          >
            {t('auth.register')}
@@ -527,15 +777,20 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
      </div>

      <div className="auth-footer">
-        <button className="btn-icon-text" onClick={toggleLanguage}>
-          <Languages size={18} />
-          {i18n.language.startsWith('de') ? 'English' : 'Deutsch'}
-        </button>
-        <a href="#help" className="btn-icon-text link-sec">
+        <LanguageDropdown variant="text" align="left" />
+        <button
+          type="button"
+          className="btn-icon-text link-sec"
+          onClick={() => setShowHelp(true)}
+          title={t('disclaimer.button_title')}
+          aria-label={t('disclaimer.button_title')}
+        >
          <HelpCircle size={18} />
          {t('auth.help')}
-        </a>
+        </button>
      </div>
    </div>
+    <DisclaimerModal open={showHelp} onClose={() => setShowHelp(false)} />
+    </>
  )
 }
@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+
+interface BetaBadgeProps {
+  className?: string
+}
+
+export default function BetaBadge({ className = '' }: BetaBadgeProps) {
+  const { t } = useTranslation()
+
+  return (
+    <span
+      className={`beta-badge ${className}`.trim()}
+      title={t('app.beta_hint')}
+      aria-label={t('app.beta_hint')}
+    >
+      {t('app.beta')}
+    </span>
+  )
+}
@@ -0,0 +1,285 @@
+import { useCallback, useId, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  type CourseOutputMode,
+  type CourseStep,
+  dialDegreesToStorageValue,
+  formatCourseAngle,
+  formatCourseDisplay,
+  isCardinalDirection,
+  loadCourseDialStep,
+  parseCourseAngle,
+  pointerAngleToDegrees,
+  resolveCourseOutputMode,
+  saveCourseDialStep,
+  snapDegrees,
+  valueToDialDegrees
+} from '../utils/courseAngle.js'
+
+interface CourseDialInputProps {
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  step?: CourseStep
+  allowCardinal?: boolean
+  displayMode?: 'degrees' | 'cardinal' | 'auto'
+  size?: 'md' | 'sm'
+  'aria-label': string
+  id?: string
+}
+
+const TICK_DEGREES = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
+
+function polarPoint(degrees: number, radius: number): { x: number; y: number } {
+  const rad = (degrees * Math.PI) / 180
+  return {
+    x: 100 + Math.sin(rad) * radius,
+    y: 100 - Math.cos(rad) * radius
+  }
+}
+
+export default function CourseDialInput({
+  value,
+  onChange,
+  disabled = false,
+  step: stepProp,
+  allowCardinal = false,
+  displayMode = 'degrees',
+  size = 'md',
+  'aria-label': ariaLabel,
+  id: idProp
+}: CourseDialInputProps) {
+  const { t } = useTranslation()
+  const generatedId = useId()
+  const inputId = idProp ?? `${generatedId}-input`
+  const svgRef = useRef<SVGSVGElement>(null)
+  const [step, setStep] = useState<CourseStep>(() => stepProp ?? loadCourseDialStep())
+  const [inputDraft, setInputDraft] = useState<string | null>(null)
+  const [inputError, setInputError] = useState<string | null>(null)
+  const [outputModeOverride, setOutputModeOverride] = useState<CourseOutputMode | null>(null)
+
+  const effectiveStep = stepProp ?? step
+  const outputMode =
+    outputModeOverride ??
+    resolveCourseOutputMode(value, displayMode, allowCardinal)
+
+  const dialDegrees = useMemo(
+    () => snapDegrees(valueToDialDegrees(value, allowCardinal), effectiveStep),
+    [value, allowCardinal, effectiveStep]
+  )
+
+  const centerLabel = useMemo(
+    () => formatCourseDisplay(value, allowCardinal),
+    [value, allowCardinal]
+  )
+
+  const tickLabel = useCallback(
+    (degrees: number) => {
+      if (degrees === 0) return t('logs.compass_n')
+      if (degrees === 90) return t('logs.compass_e')
+      if (degrees === 180) return t('logs.compass_s')
+      if (degrees === 270) return t('logs.compass_w')
+      return String(degrees).padStart(3, '0')
+    },
+    [t]
+  )
+
+  const applyDegrees = useCallback(
+    (degrees: number) => {
+      onChange(dialDegreesToStorageValue(degrees, outputMode, effectiveStep))
+      setInputDraft(null)
+      setInputError(null)
+    },
+    [onChange, outputMode, effectiveStep]
+  )
+
+  const updateFromPointer = useCallback(
+    (clientX: number, clientY: number) => {
+      const svg = svgRef.current
+      if (!svg || disabled) return
+      const rect = svg.getBoundingClientRect()
+      const cx = rect.left + rect.width / 2
+      const cy = rect.top + rect.height / 2
+      const raw = pointerAngleToDegrees(clientX, clientY, cx, cy)
+      applyDegrees(raw)
+    },
+    [applyDegrees, disabled]
+  )
+
+  const handlePointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (disabled) return
+    e.preventDefault()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    updateFromPointer(e.clientX, e.clientY)
+  }
+
+  const handlePointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (disabled || !e.currentTarget.hasPointerCapture(e.pointerId)) return
+    updateFromPointer(e.clientX, e.clientY)
+  }
+
+  const handlePointerUp = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId)
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputDraft(e.target.value)
+  }
+
+  const commitInput = () => {
+    const draft = (inputDraft ?? value).trim()
+    setInputDraft(null)
+    if (!draft) {
+      onChange('')
+      setInputError(null)
+      return
+    }
+    if (allowCardinal && outputMode === 'cardinal' && isCardinalDirection(draft)) {
+      onChange(draft.toUpperCase())
+      setInputError(null)
+      return
+    }
+    const parsed = parseCourseAngle(draft)
+    if (parsed === null) {
+      setInputError(t('logs.course_invalid'))
+      return
+    }
+    onChange(formatCourseAngle(snapDegrees(parsed, effectiveStep)))
+    setInputError(null)
+  }
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      commitInput()
+      return
+    }
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const base = parseCourseAngle(value) ?? dialDegrees
+      const delta = e.key === 'ArrowUp' ? effectiveStep : -effectiveStep
+      applyDegrees(base + delta)
+    }
+  }
+
+  const handleStepChange = (next: CourseStep) => {
+    if (stepProp !== undefined) return
+    setStep(next)
+    saveCourseDialStep(next)
+    const parsed = parseCourseAngle(value)
+    if (parsed !== null) {
+      onChange(formatCourseAngle(snapDegrees(parsed, next)))
+    }
+  }
+
+  const toggleOutputMode = () => {
+    const next: CourseOutputMode = outputMode === 'cardinal' ? 'degrees' : 'cardinal'
+    setOutputModeOverride(next)
+    const deg = valueToDialDegrees(value, allowCardinal)
+    onChange(dialDegreesToStorageValue(deg, next, effectiveStep))
+  }
+
+  const inputValue = inputDraft ?? value
+  const sliderNow = dialDegrees
+
+  return (
+    <div
+      className={`course-dial course-dial--${size}${disabled ? ' course-dial--disabled' : ''}`}
+    >
+      {!stepProp && (
+        <div className="course-dial__step-toolbar" role="group" aria-label={t('logs.course_dial_step_label')}>
+          {([1, 5, 10] as const).map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={`course-dial__step-btn${effectiveStep === s ? ' is-active' : ''}`}
+              onClick={() => handleStepChange(s)}
+              disabled={disabled}
+              aria-pressed={effectiveStep === s}
+            >
+              {s === 1 ? t('logs.course_step_fine') : s === 5 ? t('logs.course_step_medium') : t('logs.course_step_coarse')}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div
+        className="course-dial__ring-wrap"
+        role="slider"
+        aria-label={ariaLabel}
+        aria-valuemin={0}
+        aria-valuemax={360}
+        aria-valuenow={sliderNow}
+        aria-disabled={disabled}
+      >
+        <svg
+          ref={svgRef}
+          className="course-dial__svg"
+          viewBox="0 0 200 200"
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        >
+          <circle className="course-dial__track" cx="100" cy="100" r="88" />
+          {TICK_DEGREES.map((deg) => {
+            const inner = polarPoint(deg, 76)
+            const outer = polarPoint(deg, 88)
+            const label = polarPoint(deg, 64)
+            return (
+              <g key={deg}>
+                <line className="course-dial__tick" x1={inner.x} y1={inner.y} x2={outer.x} y2={outer.y} />
+                <text className="course-dial__label" x={label.x} y={label.y} textAnchor="middle" dominantBaseline="middle">
+                  {tickLabel(deg)}
+                </text>
+              </g>
+            )
+          })}
+          <g className="course-dial__needle" transform={`rotate(${dialDegrees} 100 100)`}>
+            <line x1="100" y1="100" x2="100" y2="28" />
+            <circle cx="100" cy="100" r="6" />
+          </g>
+          <text className="course-dial__center" x="100" y="100" textAnchor="middle" dominantBaseline="middle">
+            {centerLabel}
+          </text>
+        </svg>
+      </div>
+
+      <p className="course-dial__hint">{t('logs.course_dial_hint')}</p>
+
+      <input
+        id={inputId}
+        type="text"
+        inputMode="numeric"
+        className="input-text course-dial__input"
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={commitInput}
+        onKeyDown={handleInputKeyDown}
+        disabled={disabled}
+        placeholder={
+          outputMode === 'cardinal'
+            ? t('logs.course_placeholder_cardinal')
+            : t('logs.course_placeholder_degrees')
+        }
+        aria-label={ariaLabel}
+        aria-invalid={inputError ? true : undefined}
+      />
+
+      {inputError && <p className="course-dial__error">{inputError}</p>}
+
+      {allowCardinal && displayMode === 'auto' && (
+        <button
+          type="button"
+          className="course-dial__mode-toggle"
+          onClick={toggleOutputMode}
+          disabled={disabled}
+        >
+          {outputMode === 'cardinal' ? t('logs.wind_mode_degrees') : t('logs.wind_mode_cardinal')}
+        </button>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,141 @@
+import React from 'react'
+
+interface PersonSnapshot {
+  name: string
+  photo?: string | null
+  role?: string
+}
+
+interface CreatorAvatarProps {
+  creatorId?: string
+  crewSnapshotsById?: Record<string, PersonSnapshot>
+  fallbackName?: string
+  size?: number
+}
+
+const colors = [
+  '#2563eb', // blue
+  '#059669', // emerald
+  '#d97706', // amber
+  '#dc2626', // red
+  '#7c3aed', // violet
+  '#db2777', // pink
+  '#0891b2', // cyan
+  '#4f46e5', // indigo
+  '#0f766e', // teal
+  '#9333ea', // purple
+]
+
+function getAvatarColor(name: string): string {
+  let hash = 0
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  const index = Math.abs(hash) % colors.length
+  return colors[index]
+}
+
+export default function CreatorAvatar({
+  creatorId,
+  crewSnapshotsById,
+  fallbackName,
+  size = 28
+}: CreatorAvatarProps) {
+  let name = ''
+  let photo: string | null = null
+  let role = ''
+
+  if (creatorId && crewSnapshotsById) {
+    let snap: PersonSnapshot | undefined = crewSnapshotsById[creatorId]
+
+    // Fallback: If not found directly by key, search by role or name or active user
+    if (!snap) {
+      if (creatorId === 'skipper') {
+        snap = Object.values(crewSnapshotsById).find((s) => s.role === 'skipper')
+      } else {
+        // Try to match name case-insensitively
+        snap = Object.values(crewSnapshotsById).find(
+          (s) => (s.name || '').trim().toLowerCase() === creatorId.trim().toLowerCase()
+        )
+
+        // Try to match active username/userid to the skipper snapshot
+        if (!snap) {
+          const activeUsername = localStorage.getItem('active_username')
+          const activeUserId = localStorage.getItem('active_userid')
+          if (
+            (activeUsername && creatorId.toLowerCase() === activeUsername.toLowerCase()) ||
+            (activeUserId && creatorId === activeUserId)
+          ) {
+            snap = Object.values(crewSnapshotsById).find((s) => s.role === 'skipper')
+          }
+        }
+      }
+    }
+
+    if (snap) {
+      name = snap.name || ''
+      photo = snap.photo || null
+      role = snap.role || ''
+    }
+  }
+
+  // Fallback to active username if owner or no crew pool matches
+  if (!name) {
+    if (creatorId === 'skipper') {
+      name = fallbackName || localStorage.getItem('active_username') || 'Skipper'
+      role = 'skipper'
+    } else if (fallbackName) {
+      name = fallbackName
+    } else if (creatorId) {
+      // If creatorId is a username itself (fallback from LiveLogView)
+      name = creatorId
+    } else {
+      name = '?'
+    }
+  }
+
+  const initial = name ? name.trim().split(/\s+/)[0]?.charAt(0).toUpperCase() || '?' : '?'
+  const bgColor = name === '?' ? '#64748b' : getAvatarColor(name)
+
+  const style: React.CSSProperties = {
+    width: `${size}px`,
+    height: `${size}px`,
+    borderRadius: '50%',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: `${Math.round(size * 0.45)}px`,
+    fontWeight: 'bold',
+    color: '#ffffff',
+    backgroundColor: bgColor,
+    flexShrink: 0,
+    verticalAlign: 'middle',
+    overflow: 'hidden',
+    border: '1px solid rgba(255, 255, 255, 0.15)',
+    boxSizing: 'border-box'
+  }
+
+  const roleText = role ? (role === 'skipper' ? 'Skipper' : 'Crew') : ''
+  const tooltip = name + (roleText ? ` (${roleText})` : '')
+
+  if (photo) {
+    return (
+      <img
+        src={photo}
+        alt={name}
+        title={tooltip}
+        style={{
+          ...style,
+          objectFit: 'cover',
+          backgroundColor: 'transparent'
+        }}
+      />
+    )
+  }
+
+  return (
+    <div style={style} title={tooltip} className="creator-avatar-fallback">
+      {initial}
+    </div>
+  )
+}
@@ -5,12 +5,15 @@ import { getActiveMasterKey } from '../services/auth.js'
 import { getLogbookKey } from '../services/logbookKeys.js'
 import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { MAX_POOL_CREW_MEMBERS } from '../types/person.js'
 import { useDialog } from './ModalDialog.tsx'
 import { Users, User, Plus, Trash2, Edit2, Save, X, Check, Camera } from 'lucide-react'

 interface CrewFormProps {
  logbookId: string
  readOnly?: boolean
+  skipperReadOnly?: boolean
  preloadedData?: any[]
 }

@@ -33,9 +36,15 @@ interface DecryptedCrew {
  data: CrewMemberData
 }

-export default function CrewForm({ logbookId, readOnly = false, preloadedData }: CrewFormProps) {
+export default function CrewForm({
+  logbookId,
+  readOnly = false,
+  skipperReadOnly = false,
+  preloadedData
+}: CrewFormProps) {
  const { t } = useTranslation()
  const { showConfirm } = useDialog()
+  const skipperFormReadOnly = readOnly || skipperReadOnly

  // Skipper profile state
  const [skipName, setSkipName] = useState('')
@@ -191,7 +200,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:

  const handleSaveSkipper = async (e: React.FormEvent) => {
    e.preventDefault()
-    if (readOnly) return
+    if (skipperFormReadOnly) return
    setSavingSkipper(true)
    setError(null)
    setSkipperSuccess(false)
@@ -236,6 +245,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
      })

      setSkipperSuccess(true)
+      trackPlausibleEvent(PlausibleEvents.CREW_SAVED, { role: 'skipper', action: 'update' })
      setTimeout(() => setSkipperSuccess(false), 3000)

      syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
@@ -337,6 +347,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
      }

      setShowMemberForm(false)
+      trackPlausibleEvent(PlausibleEvents.CREW_SAVED, { role: 'crew', action: isNew ? 'create' : 'update' })
      syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
    } catch (err: any) {
      console.error('Failed to save crew member:', err)
@@ -394,10 +405,14 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:

        {error && <div className="auth-error mb-4">{error}</div>}

+        {skipperReadOnly && !readOnly && (
+          <p className="help-text mb-4">{t('crew.skipper_read_only_hint')}</p>
+        )}
+
        <form onSubmit={handleSaveSkipper} className="vessel-form">
          <div className="form-grid">
            <div className="vessel-photo-wrapper">
-              <div className="vessel-photo-preview" onClick={readOnly ? undefined : () => skipFileInputRef.current?.click()} style={{ cursor: readOnly ? 'default' : 'pointer' }}>
+              <div className="vessel-photo-preview" onClick={skipperFormReadOnly ? undefined : () => skipFileInputRef.current?.click()} style={{ cursor: skipperFormReadOnly ? 'default' : 'pointer' }}>
                {skipPhoto ? (
                  <img src={skipPhoto} alt={skipName || 'Skipper'} className="vessel-photo" />
                ) : (
@@ -405,7 +420,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                    <User size={48} className="placeholder-icon" />
                  </div>
                )}
-                {!readOnly && (
+                {!skipperFormReadOnly && (
                  <div className="vessel-photo-overlay">
                    <Camera size={24} />
                    <span>{skipPhoto ? t('vessel.photo_change') : t('vessel.photo_add')}</span>
@@ -413,7 +428,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                )}
              </div>
              
-              {!readOnly && (
+              {!skipperFormReadOnly && (
                <div className="vessel-photo-actions">
                  <button
                    type="button"
@@ -452,6 +467,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                  try {
                    const resized = await resizeImageFile(file)
                    setSkipPhoto(resized)
+                    trackPlausibleEvent(PlausibleEvents.PHOTO_UPLOADED, { context: 'crew', role: 'skipper' })
                  } catch (err: any) {
                    setSkipPhotoError(err.message || 'Failed to process image')
                  }
@@ -469,7 +485,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipName}
                onChange={(e) => setSkipName(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
                required
              />
            </div>
@@ -481,7 +497,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipAddress}
                onChange={(e) => setSkipAddress(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
              />
            </div>

@@ -492,7 +508,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipBirthDate}
                onChange={(e) => setSkipBirthDate(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
              />
            </div>

@@ -503,7 +519,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipPhone}
                onChange={(e) => setSkipPhone(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
              />
            </div>

@@ -514,7 +530,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipNationality}
                onChange={(e) => setSkipNationality(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
              />
            </div>

@@ -525,7 +541,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipPassport}
                onChange={(e) => setSkipPassport(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
              />
            </div>

@@ -536,7 +552,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipBloodType}
                onChange={(e) => setSkipBloodType(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
              />
            </div>

@@ -547,7 +563,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipAllergies}
                onChange={(e) => setSkipAllergies(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
              />
            </div>

@@ -558,12 +574,12 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                className="input-text"
                value={skipDiseases}
                onChange={(e) => setSkipDiseases(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
              />
            </div>
          </div>

-          {!readOnly && (
+          {!skipperFormReadOnly && (
            <div className="form-actions">
              {skipperSuccess && (
                <div className="success-toast">
@@ -588,7 +604,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
            <Users size={24} className="form-icon" />
            <h2>{t('crew.crew_section')}</h2>
          </div>
-          {!readOnly && crewList.length < 5 && !showMemberForm && (
+          {!readOnly && crewList.length < MAX_POOL_CREW_MEMBERS && !showMemberForm && (
            <button className="btn primary" onClick={openAddMember} style={{ width: 'auto', padding: '8px 16px' }}>
              <Plus size={16} />
              {t('crew.add_crew')}
@@ -659,6 +675,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                    try {
                      const resized = await resizeImageFile(file)
                      setMemPhoto(resized)
+                      trackPlausibleEvent(PlausibleEvents.PHOTO_UPLOADED, { context: 'crew', role: 'crew' })
                    } catch (err: any) {
                      setMemPhotoError(err.message || 'Failed to process image')
                    }
@@ -801,7 +818,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                      <button className="btn-icon" onClick={() => openEditMember(m)} title="Edit">
                        <Edit2 size={14} />
                      </button>
-                      <button className="btn-icon logout" onClick={() => handleDeleteMember(m.payloadId)} title="Delete">
+                      <button className="btn-icon danger" onClick={() => handleDeleteMember(m.payloadId)} title="Delete">
                        <Trash2 size={14} />
                      </button>
                    </div>
@@ -0,0 +1,185 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import LanguageDropdown from './LanguageDropdown.tsx'
+import LogbookVesselPicker from './LogbookVesselPicker.tsx'
+import LogbookCrewPicker from './LogbookCrewPicker.tsx'
+import type { LogbookCrewSelectionData } from '../types/person.js'
+import { personToSnapshot } from '../utils/personSnapshots.js'
+import LogEntriesList from './LogEntriesList.tsx'
+import { Ship, Users, FileText, Lock, ChevronLeft, UserPlus } from 'lucide-react'
+import { buildPublicDemoFixture, type PublicDemoFixture } from '../services/demoLogbookData.js'
+import type { VesselData } from '../types/vessel.js'
+import type { LogbookVesselSelectionData } from '../types/vessel.js'
+import { useAppTour, type AppTab } from '../context/AppTourContext.tsx'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+interface DemoViewerProps {
+  onExit: () => void
+}
+
+export default function DemoViewer({ onExit }: DemoViewerProps) {
+  const { t, i18n } = useTranslation()
+  const { registerNavigation, registerDemoTourContext, startTour } = useAppTour()
+  const [activeTab, setActiveTab] = useState<AppTab>('logs')
+  const [tourSelectedEntryId, setTourSelectedEntryId] = useState<string | null>(null)
+  const [fixture, setFixture] = useState<PublicDemoFixture>(() => buildPublicDemoFixture())
+
+  useEffect(() => {
+    trackPlausibleEvent(PlausibleEvents.DEMO_OPENED)
+  }, [])
+
+  useEffect(() => {
+    setFixture(buildPublicDemoFixture())
+  }, [i18n.language])
+
+  useEffect(() => {
+    registerNavigation({
+      setActiveTab,
+      setSelectedEntryId: setTourSelectedEntryId,
+      setFeedbackOpen: () => {},
+      setLogbookActive: () => {},
+      setProfileOpen: () => {}
+    })
+    registerDemoTourContext({ firstEntryId: fixture.firstEntryId })
+
+    const timer = window.setTimeout(() => {
+      startTour({ force: true, demoMode: true })
+    }, 400)
+
+    return () => {
+      window.clearTimeout(timer)
+      registerDemoTourContext(null)
+    }
+  }, [registerNavigation, registerDemoTourContext, startTour, fixture.firstEntryId])
+
+
+  const {
+    title,
+    yacht,
+    vesselPool,
+    logbookVesselSelection,
+    personPool,
+    logbookCrewSelection,
+    entries,
+    gpsTracks,
+    photos,
+    firstEntryId
+  } = fixture
+
+  const demoSelection: LogbookCrewSelectionData = {
+    activeSkipperId: logbookCrewSelection.activeSkipperId,
+    activeCrewIds: logbookCrewSelection.activeCrewIds,
+    snapshotsById: Object.fromEntries(
+      Object.entries(logbookCrewSelection.snapshotsById).map(([id, snap]) => [
+        id,
+        personToSnapshot(id, snap)
+      ])
+    )
+  }
+
+  return (
+    <div className="app-layout">
+      <div className="sync-progress-bar" style={{ height: '4px', background: 'linear-gradient(90deg, #f59e0b, #3b82f6)' }} />
+
+      <header className="app-header" style={{ borderBottom: '1px solid rgba(245, 158, 11, 0.25)' }}>
+        <div className="app-header-left">
+          <button className="btn-back" onClick={onExit}>
+            <ChevronLeft size={16} />
+            {t('demo.back_to_login')}
+          </button>
+          <div className="app-title-area">
+            <div className="app-title-row">
+              <h2>{title}</h2>
+              <span className="demo-badge">{t('demo.badge')}</span>
+            </div>
+            <p className="app-subtitle" style={{ color: '#f59e0b', display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Lock size={12} />
+              <span>{t('demo.public_banner')}</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="header-actions">
+          <button
+            className="btn primary"
+            onClick={onExit}
+            style={{ width: 'auto', padding: '6px 14px', fontSize: '13px' }}
+          >
+            <UserPlus size={14} style={{ marginRight: '4px' }} />
+            {t('demo.cta_register')}
+          </button>
+          <LanguageDropdown variant="secondary-button" align="right" />
+        </div>
+      </header>
+
+      <div className="app-body">
+        <aside className="app-sidebar">
+          <button
+            className={`sidebar-btn ${activeTab === 'logs' ? 'active' : ''}`}
+            onClick={() => setActiveTab('logs')}
+            data-tour="nav-logs"
+          >
+            <FileText size={18} />
+            {t('nav.logs')}
+          </button>
+
+          <button
+            className={`sidebar-btn ${activeTab === 'vessel' ? 'active' : ''}`}
+            onClick={() => setActiveTab('vessel')}
+            data-tour="nav-vessel"
+          >
+            <Ship size={18} />
+            {t('nav.vessel')}
+          </button>
+
+          <button
+            className={`sidebar-btn ${activeTab === 'crew' ? 'active' : ''}`}
+            onClick={() => setActiveTab('crew')}
+            data-tour="nav-logbook-crew"
+          >
+            <Users size={18} />
+            {t('nav.crew')}
+          </button>
+        </aside>
+
+        <main className="app-content">
+          {activeTab === 'logs' && (
+            <LogEntriesList
+              logbookId="demo"
+              readOnly={true}
+              preloadedYacht={yacht}
+              preloadedEntries={entries}
+              preloadedPhotos={photos}
+              preloadedVoiceMemos={[]}
+              preloadedGpsTracks={gpsTracks}
+              controlledSelectedEntryId={tourSelectedEntryId}
+              onSelectedEntryIdChange={setTourSelectedEntryId}
+              highlightEntryId={firstEntryId}
+            />
+          )}
+
+          {activeTab === 'vessel' && (
+            <LogbookVesselPicker
+              logbookId="demo"
+              readOnly={true}
+              preloadedPool={vesselPool.map((v) => ({
+                payloadId: v.payloadId,
+                data: v.data as VesselData
+              }))}
+              preloadedSelection={logbookVesselSelection as unknown as LogbookVesselSelectionData}
+            />
+          )}
+
+          {activeTab === 'crew' && (
+            <LogbookCrewPicker
+              logbookId="demo"
+              readOnly={true}
+              preloadedPool={personPool}
+              preloadedSelection={demoSelection}
+            />
+          )}
+        </main>
+      </div>
+    </div>
+  )
+}
@@ -6,6 +6,7 @@ import { getLogbookKey } from '../services/logbookKeys.js'
 import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
 import { Compass, Save, Check } from 'lucide-react'
+import { parseAppDecimalOrZero } from '../utils/numberFormat.js'

 interface DeviationFormProps {
  logbookId: string
@@ -97,8 +98,8 @@ export default function DeviationForm({ logbookId, readOnly = false, preloadedDa
      const sanitizedDeviations: Record<number, number> = {}
      headings.forEach((h) => {
        const val = deviations[h] || ''
-        const parsed = parseFloat(val.replace('+', '').trim())
-        sanitizedDeviations[h] = isNaN(parsed) ? 0 : parsed
+        const parsed = parseAppDecimalOrZero(val.replace('+', '').trim())
+        sanitizedDeviations[h] = parsed
      })

      const dataToSave = {
@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ScrollText } from 'lucide-react'
+import DisclaimerModal from './DisclaimerModal.tsx'
+
+export default function DisclaimerHeaderButton() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <button
+        type="button"
+        className="btn-icon"
+        onClick={() => setOpen(true)}
+        title={t('disclaimer.button_title')}
+        aria-label={t('disclaimer.button_title')}
+      >
+        <ScrollText size={18} />
+      </button>
+      <DisclaimerModal open={open} onClose={() => setOpen(false)} />
+    </>
+  )
+}
@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import RegistrationDisclaimer from './RegistrationDisclaimer.tsx'
+
+interface DisclaimerModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export default function DisclaimerModal({ open, onClose }: DisclaimerModalProps) {
+  useEffect(() => {
+    if (!open) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      document.body.style.overflow = prevOverflow
+    }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div className="disclaimer-modal-overlay" onClick={onClose}>
+      <div className="disclaimer-modal-panel" onClick={(event) => event.stopPropagation()}>
+        <RegistrationDisclaimer variant="view" onDismiss={onClose} />
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,193 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Users, ChevronDown, ChevronUp } from 'lucide-react'
+import type { EntryCrewFields, PersonSnapshot } from '../types/person.js'
+import { loadPersonPool } from '../services/personPool.js'
+import { loadLogbookCrewSelection } from '../services/logbookCrewSelection.js'
+import { buildSnapshotsForSelection } from '../utils/personSnapshots.js'
+import type { PersonData } from '../types/person.js'
+
+export interface EntryCrewSectionProps {
+  logbookId: string
+  readOnly?: boolean
+  value: EntryCrewFields
+  onChange: (next: EntryCrewFields) => void
+  /** Demo: fixed pool */
+  preloadedPool?: Map<string, PersonData>
+}
+
+export default function EntryCrewSection({
+  logbookId,
+  readOnly = false,
+  value,
+  onChange,
+  preloadedPool
+}: EntryCrewSectionProps) {
+  const { t } = useTranslation()
+  const [collapsed, setCollapsed] = useState(true)
+  const [pool, setPool] = useState<Map<string, PersonData>>(preloadedPool ?? new Map())
+
+  useEffect(() => {
+    if (preloadedPool) {
+      setPool(preloadedPool)
+      return
+    }
+    let cancelled = false
+    void (async () => {
+      try {
+        const people = await loadPersonPool()
+        if (cancelled) return
+        setPool(new Map(people.map((p) => [p.payloadId, p.data])))
+      } catch {
+        /* use snapshots only */
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [preloadedPool])
+
+  const displayPool = useMemo(() => {
+    const merged = new Map(pool)
+    for (const snap of Object.values(value.crewSnapshotsById)) {
+      if (!merged.has(snap.id)) {
+        merged.set(snap.id, {
+          name: snap.name,
+          address: snap.address,
+          birthDate: snap.birthDate,
+          phone: snap.phone,
+          nationality: snap.nationality,
+          passportNumber: snap.passportNumber,
+          bloodType: snap.bloodType,
+          allergies: snap.allergies,
+          diseases: snap.diseases,
+          role: snap.role,
+          photo: snap.photo
+        })
+      }
+    }
+    return merged
+  }, [pool, value.crewSnapshotsById])
+
+  const skippers = [...displayPool.entries()].filter(([, d]) => d.role === 'skipper')
+  const crewEntries = [...displayPool.entries()].filter(([, d]) => d.role === 'crew')
+
+  const applyChange = (skipperId: string | null, crewIds: string[]) => {
+    const snapshots = buildSnapshotsForSelection(skipperId, crewIds, displayPool)
+    onChange({
+      selectedSkipperId: skipperId,
+      selectedCrewIds: crewIds,
+      crewSnapshotsById: snapshots
+    })
+  }
+
+  const toggleCrew = (id: string) => {
+    if (readOnly) return
+    const next = value.selectedCrewIds.includes(id)
+      ? value.selectedCrewIds.filter((x) => x !== id)
+      : [...value.selectedCrewIds, id]
+    applyChange(value.selectedSkipperId, next)
+  }
+
+  return (
+    <div className="form-card" data-tour="entry-crew">
+      <div
+        className="form-header accordion-header"
+        onClick={() => setCollapsed(!collapsed)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setCollapsed(!collapsed)
+          }
+        }}
+        role="button"
+        aria-expanded={!collapsed}
+        tabIndex={0}
+      >
+        <div className="accordion-header-title">
+          <Users size={22} className="form-icon" />
+          <h3>{t('entry_crew.title')}</h3>
+        </div>
+        {collapsed ? (
+          <ChevronDown size={20} className="accordion-chevron" />
+        ) : (
+          <ChevronUp size={20} className="accordion-chevron" />
+        )}
+      </div>
+
+      {!collapsed && (
+        <>
+          <p className="help-text mb-3" style={{ marginTop: '16px' }}>{t('entry_crew.subtitle')}</p>
+
+          <div className="input-group mb-3">
+            <label>{t('entry_crew.day_skipper')}</label>
+            {skippers.length === 0 ? (
+              <p className="help-text">{t('entry_crew.no_skipper')}</p>
+            ) : (
+              <div className="crew-selection-list">
+                {skippers.map(([id, data]) => (
+                  <label key={id} className="crew-selection-item">
+                    <input
+                      type="radio"
+                      name={`entry-skipper-${logbookId}`}
+                      checked={value.selectedSkipperId === id}
+                      onChange={() => !readOnly && applyChange(id, value.selectedCrewIds)}
+                      disabled={readOnly}
+                    />
+                    <span>{data.name || t('logbook_crew.unnamed')}</span>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="input-group">
+            <label>{t('entry_crew.day_crew')}</label>
+            {crewEntries.length === 0 ? (
+              <p className="help-text">{t('entry_crew.no_crew')}</p>
+            ) : (
+              <div className="crew-selection-list">
+                {crewEntries.map(([id, data]) => (
+                  <label key={id} className="crew-selection-item">
+                    <input
+                      type="checkbox"
+                      checked={value.selectedCrewIds.includes(id)}
+                      onChange={() => toggleCrew(id)}
+                      disabled={readOnly}
+                    />
+                    <span>{data.name || t('logbook_crew.unnamed')}</span>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export async function loadDefaultEntryCrewForNewDay(
+  logbookId: string,
+  previousEntry: Record<string, unknown> | null
+): Promise<EntryCrewFields> {
+  if (previousEntry) {
+    const selectedSkipperId =
+      typeof previousEntry.selectedSkipperId === 'string' ? previousEntry.selectedSkipperId : null
+    const selectedCrewIds = Array.isArray(previousEntry.selectedCrewIds)
+      ? previousEntry.selectedCrewIds.filter((id): id is string => typeof id === 'string')
+      : []
+    const crewSnapshotsById =
+      previousEntry.crewSnapshotsById && typeof previousEntry.crewSnapshotsById === 'object'
+        ? (previousEntry.crewSnapshotsById as Record<string, PersonSnapshot>)
+        : {}
+    return { selectedSkipperId, selectedCrewIds, crewSnapshotsById }
+  }
+
+  const selection = await loadLogbookCrewSelection(logbookId)
+  return {
+    selectedSkipperId: selection.activeSkipperId,
+    selectedCrewIds: [...selection.activeCrewIds],
+    crewSnapshotsById: { ...selection.snapshotsById }
+  }
+}
@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle } from 'lucide-react'
+import CaptainCap from './icons/CaptainCap.tsx'
+import type { SkipperSignStatus } from '../utils/signatures.js'
+
+interface EntrySkipperSignBadgeProps {
+  status: SkipperSignStatus
+}
+
+export default function EntrySkipperSignBadge({ status }: EntrySkipperSignBadgeProps) {
+  const { t } = useTranslation()
+
+  if (status === 'none') return null
+
+  const isValid = status === 'valid'
+  const label = isValid
+    ? t('logs.sign_badge_skipper_title_valid')
+    : t('logs.sign_badge_skipper_title_invalid')
+
+  return (
+    <span
+      className={`entry-sign-badge entry-sign-badge--skipper ${isValid ? 'valid' : 'invalid'}`}
+      title={label}
+    >
+      {isValid ? <CaptainCap size={14} aria-hidden /> : <AlertTriangle size={12} aria-hidden />}
+      <span className={isValid ? 'entry-sign-badge__sr-label' : undefined}>
+        {isValid ? t('logs.sign_badge_skipper') : t('logs.sign_badge_skipper_invalid')}
+      </span>
+    </span>
+  )
+}
@@ -0,0 +1,140 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Mic, Loader2 } from 'lucide-react'
+import type { LogEventPayload } from '../utils/logEntryPayload.js'
+import { parseLiveVoiceRemark } from '../utils/liveEventCodes.js'
+import { formatEventSummary } from '../utils/formatEventSummary.js'
+import VoiceMemoPlayer, { type PreloadedVoiceMemo } from './VoiceMemoPlayer.tsx'
+import { useDialog } from './ModalDialog.tsx'
+import { updateVoiceMemoTranscript } from '../services/voiceAttachments.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { getAiAuthorized } from '../services/userPreferences.js'
+
+interface EventRemarksCellProps {
+  event: LogEventPayload
+  logbookId: string
+  voiceMemoLookup?: Map<string, PreloadedVoiceMemo>
+  readOnly?: boolean
+}
+
+export default function EventRemarksCell({
+  event,
+  logbookId,
+  voiceMemoLookup,
+  readOnly = false
+}: EventRemarksCellProps) {
+  const { t } = useTranslation()
+  const { showAlert } = useDialog()
+  const voiceId = parseLiveVoiceRemark(event.remarks.trim())
+  const preloaded = voiceId ? voiceMemoLookup?.get(voiceId) : undefined
+
+  const [transcribing, setTranscribing] = useState(false)
+  const [isOnline, setIsOnline] = useState(navigator.onLine)
+
+  useEffect(() => {
+    const handleOnline = () => setIsOnline(true)
+    const handleOffline = () => setIsOnline(false)
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+
+  const handleTranscribe = async (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (transcribing || !preloaded?.audio || !voiceId) return
+    if (!getAiAuthorized()) {
+      void showAlert(
+        t('profile.ai_unauthorized_alert_desc'),
+        t('profile.ai_unauthorized_alert_title')
+      )
+      return
+    }
+    setTranscribing(true)
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 15000)
+    try {
+      const res = await fetch('/api/ai/transcribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ audioDataUrl: preloaded.audio }),
+        signal: controller.signal
+      })
+      clearTimeout(timeoutId)
+      if (!res.ok) {
+        throw new Error(`Server returned status ${res.status}`)
+      }
+      const data = await res.json()
+      const text = (data.text || '').trim()
+      if (!text) {
+        throw new Error('Transcription returned empty text')
+      }
+      await updateVoiceMemoTranscript(logbookId, voiceId, text)
+      trackPlausibleEvent(PlausibleEvents.VOICE_MEMO_TRANSCRIBED, {
+        status: 'success',
+        mode: 'manual'
+      })
+    } catch (err) {
+      clearTimeout(timeoutId)
+      console.error('[EventRemarksCell] Transcription failed:', err)
+      trackPlausibleEvent(PlausibleEvents.VOICE_MEMO_TRANSCRIBED, {
+        status: 'failed',
+        mode: 'manual'
+      })
+      void showAlert(t('logs.live_voice_transcribe_failed'), t('logs.live_voice_btn'))
+    } finally {
+      setTranscribing(false)
+    }
+  }
+
+  let summary = formatEventSummary(event, t)
+  if (voiceId && preloaded?.caption) {
+    summary = t('logs.live_voice_entry', { caption: preloaded.caption })
+  }
+
+  return (
+    <div className={`event-remarks-cell${voiceId ? ' event-remarks-cell--voice' : ''}`}>
+      <span>{summary}</span>
+      {voiceId && (
+        <div style={{ display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px', marginTop: '4px' }}>
+          <VoiceMemoPlayer
+            audioId={voiceId}
+            logbookId={logbookId}
+            preloaded={preloaded}
+            compact
+          />
+          {!readOnly && preloaded && preloaded.transcribed === false && isOnline && (
+            <button
+              type="button"
+              className="btn-icon-text link-sec"
+              style={{
+                fontSize: '0.8rem',
+                padding: '2px 6px',
+                height: 'auto',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+                margin: 0
+              }}
+              onClick={handleTranscribe}
+              disabled={transcribing}
+              title={t('logs.live_voice_transcribe_action')}
+            >
+              {transcribing ? (
+                <Loader2 size={12} className="spin" />
+              ) : (
+                <Mic size={12} />
+              )}
+              {transcribing ? t('logs.live_voice_transcribing') : t('logs.live_voice_transcribe_action')}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,86 @@
+import { useId, useMemo } from 'react'
+import { joinTimeHHMM, splitTimeHHMM } from '../utils/logEntryPayload.js'
+import { preferNativeCameraPicker } from '../utils/captureVideoFrame.js'
+
+const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'))
+const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'))
+
+interface EventTimeInput24hProps {
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  'aria-label'?: string
+  fallback?: string
+}
+
+export default function EventTimeInput24h({
+  value,
+  onChange,
+  disabled = false,
+  'aria-label': ariaLabel,
+  fallback
+}: EventTimeInput24hProps) {
+  const baseId = useId()
+  const useNativePicker = preferNativeCameraPicker()
+  const { hours, minutes } = useMemo(() => splitTimeHHMM(value, fallback), [value, fallback])
+  const timeValue = useMemo(() => {
+    if (!value.trim()) return ''
+    return joinTimeHHMM(hours, minutes)
+  }, [value, hours, minutes])
+
+  if (useNativePicker) {
+    return (
+      <div className="time-input-24h">
+        <input
+          id={baseId}
+          type="time"
+          step={60}
+          className="input-text time-input-24h__native"
+          value={timeValue}
+          onChange={(e) => {
+            const next = e.target.value
+            onChange(next ? next.slice(0, 5) : '')
+          }}
+          disabled={disabled}
+          aria-label={ariaLabel}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="time-input-24h">
+      <select
+        id={`${baseId}-hours`}
+        className="input-text time-input-24h__select"
+        value={hours}
+        onChange={(e) => onChange(joinTimeHHMM(e.target.value, minutes))}
+        disabled={disabled}
+        aria-label={ariaLabel ? `${ariaLabel} (h)` : undefined}
+      >
+        {HOURS.map((hour) => (
+          <option key={hour} value={hour}>
+            {hour}
+          </option>
+        ))}
+      </select>
+      <span className="time-input-24h__sep" aria-hidden="true">
+        :
+      </span>
+      <select
+        id={`${baseId}-minutes`}
+        className="input-text time-input-24h__select"
+        value={minutes}
+        onChange={(e) => onChange(joinTimeHHMM(hours, e.target.value))}
+        disabled={disabled}
+        aria-label={ariaLabel ? `${ariaLabel} (min)` : undefined}
+      >
+        {MINUTES.map((minute) => (
+          <option key={minute} value={minute}>
+            {minute}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { MessageSquarePlus } from 'lucide-react'
+import FeedbackModal from './FeedbackModal.tsx'
+
+interface FeedbackHeaderButtonProps {
+  logbookId?: string | null
+  logbookTitle?: string | null
+  tourOpen?: boolean
+  onTourOpenChange?: (open: boolean) => void
+  tourHighlight?: boolean
+}
+
+export default function FeedbackHeaderButton({
+  logbookId,
+  logbookTitle,
+  tourOpen = false,
+  onTourOpenChange,
+  tourHighlight = false
+}: FeedbackHeaderButtonProps) {
+  const { t } = useTranslation()
+  const [userOpen, setUserOpen] = useState(false)
+  const open = tourOpen || userOpen
+
+  const handleClose = () => {
+    setUserOpen(false)
+    onTourOpenChange?.(false)
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="btn-icon"
+        onClick={() => setUserOpen(true)}
+        title={t('feedback.button_title')}
+        aria-label={t('feedback.button_title')}
+        data-tour="feedback-button"
+      >
+        <MessageSquarePlus size={18} />
+      </button>
+      <FeedbackModal
+        open={open}
+        onClose={handleClose}
+        logbookId={logbookId}
+        logbookTitle={logbookTitle}
+        tourMode={tourHighlight}
+      />
+    </>
+  )
+}
@@ -0,0 +1,241 @@
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CheckCircle2, MessageSquarePlus, X } from 'lucide-react'
+import { FeedbackApiError, sendFeedback, type FeedbackCategory } from '../services/feedback.js'
+
+const SUCCESS_CLOSE_DELAY_MS = 1800
+
+interface FeedbackModalProps {
+  open: boolean
+  onClose: () => void
+  logbookId?: string | null
+  logbookTitle?: string | null
+  tourMode?: boolean
+}
+
+type SubmitState = 'idle' | 'submitting' | 'success' | 'error'
+
+export default function FeedbackModal({
+  open,
+  onClose,
+  logbookId,
+  logbookTitle,
+  tourMode = false
+}: FeedbackModalProps) {
+  const { t } = useTranslation()
+  const [category, setCategory] = useState<FeedbackCategory>('general')
+  const [contactEmail, setContactEmail] = useState('')
+  const [message, setMessage] = useState('')
+  const [website, setWebsite] = useState('')
+  const [submitState, setSubmitState] = useState<SubmitState>('idle')
+  const [statusMessage, setStatusMessage] = useState<string | null>(null)
+  const closeTimerRef = useRef<number | null>(null)
+  const openedAtRef = useRef<number>(Date.now())
+
+  const isBusy = submitState === 'submitting' || submitState === 'success'
+
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }
+
+  useEffect(() => {
+    return () => clearCloseTimer()
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !isBusy) onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [open, onClose, isBusy])
+
+  useEffect(() => {
+    if (!open) {
+      clearCloseTimer()
+      setCategory('general')
+      setContactEmail('')
+      setMessage('')
+      setWebsite('')
+      setSubmitState('idle')
+      setStatusMessage(null)
+      return
+    }
+    openedAtRef.current = Date.now()
+  }, [open])
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (!message.trim() || submitState === 'submitting' || submitState === 'success') return
+
+    setSubmitState('submitting')
+    setStatusMessage(null)
+
+    try {
+      await sendFeedback({
+        category,
+        message: message.trim(),
+        contactEmail: contactEmail.trim() || undefined,
+        logbookId,
+        logbookTitle,
+        openedAt: openedAtRef.current,
+        website
+      })
+      setSubmitState('success')
+      setStatusMessage(t('feedback.success'))
+      closeTimerRef.current = window.setTimeout(() => {
+        closeTimerRef.current = null
+        onClose()
+      }, SUCCESS_CLOSE_DELAY_MS)
+    } catch (error) {
+      setSubmitState('error')
+      setStatusMessage(
+        error instanceof FeedbackApiError && error.code === 'NOT_CONFIGURED'
+          ? t('feedback.error_not_configured')
+          : error instanceof FeedbackApiError && error.code === 'INVALID_EMAIL'
+            ? t('feedback.error_invalid_email')
+            : error instanceof FeedbackApiError && error.code === 'RATE_LIMITED'
+              ? t('feedback.error_rate_limited')
+              : error instanceof FeedbackApiError && error.code === 'SPAM_DETECTED'
+                ? t('feedback.error_spam')
+                : t('feedback.error_send')
+      )
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      className={`disclaimer-modal-overlay${tourMode ? ' feedback-modal-overlay--tour' : ''}`}
+      onClick={isBusy || tourMode ? undefined : onClose}
+    >
+      <div className="disclaimer-modal-panel" onClick={(event) => event.stopPropagation()}>
+        <div
+          className="auth-card glass registration-disclaimer registration-disclaimer--modal feedback-modal"
+          data-tour="feedback-form"
+        >
+          <button
+            type="button"
+            className="registration-disclaimer__close feedback-modal__close"
+            onClick={onClose}
+            disabled={isBusy || tourMode}
+            aria-label={t('feedback.cancel')}
+          >
+            <X size={18} />
+          </button>
+
+          <div className="auth-header">
+            <MessageSquarePlus className="auth-icon accent" size={48} />
+            <h2>{t('feedback.title')}</h2>
+          </div>
+
+          {submitState === 'success' ? (
+            <div className="feedback-status feedback-status--success" role="status" aria-live="polite">
+              <CheckCircle2 size={40} aria-hidden="true" />
+              <p>{statusMessage}</p>
+            </div>
+          ) : (
+            <>
+              <p className="registration-disclaimer__intro">{t('feedback.intro')}</p>
+
+              {statusMessage && submitState === 'error' && (
+                <div className="feedback-status feedback-status--error" role="alert">
+                  <p>{statusMessage}</p>
+                </div>
+              )}
+
+              <form className="feedback-form" onSubmit={handleSubmit}>
+                <label className="feedback-form__honeypot" aria-hidden="true">
+                  <span>Website</span>
+                  <input
+                    type="text"
+                    name="website"
+                    value={website}
+                    onChange={(event) => setWebsite(event.target.value)}
+                    tabIndex={-1}
+                    autoComplete="off"
+                  />
+                </label>
+
+                <label className="feedback-form__field">
+                  <span>{t('feedback.category_label')}</span>
+                  <select
+                    value={category}
+                    onChange={(event) => setCategory(event.target.value as FeedbackCategory)}
+                    disabled={submitState === 'submitting'}
+                  >
+                    <option value="general">{t('feedback.category_general')}</option>
+                    <option value="bug">{t('feedback.category_bug')}</option>
+                    <option value="feature">{t('feedback.category_feature')}</option>
+                    <option value="translation">{t('feedback.category_translation')}</option>
+                  </select>
+                </label>
+
+                <label className="feedback-form__field">
+                  <span>{t('feedback.contact_label')}</span>
+                  <input
+                    type="email"
+                    value={contactEmail}
+                    onChange={(event) => {
+                      setContactEmail(event.target.value)
+                      if (submitState === 'error') {
+                        setSubmitState('idle')
+                        setStatusMessage(null)
+                      }
+                    }}
+                    placeholder={t('feedback.contact_placeholder')}
+                    autoComplete="email"
+                    maxLength={254}
+                    disabled={submitState === 'submitting'}
+                  />
+                </label>
+
+                <label className="feedback-form__field">
+                  <span>{t('feedback.message_label')}</span>
+                  <textarea
+                    value={message}
+                    onChange={(event) => {
+                      setMessage(event.target.value)
+                      if (submitState === 'error') {
+                        setSubmitState('idle')
+                        setStatusMessage(null)
+                      }
+                    }}
+                    placeholder={t('feedback.message_placeholder')}
+                    rows={6}
+                    maxLength={2000}
+                    required
+                    disabled={submitState === 'submitting'}
+                  />
+                </label>
+
+                <div className="auth-actions feedback-form__actions">
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={onClose}
+                    disabled={submitState === 'submitting' || tourMode}
+                  >
+                    {t('feedback.cancel')}
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn primary"
+                    disabled={submitState === 'submitting' || !message.trim()}
+                  >
+                    {submitState === 'submitting' ? t('feedback.sending') : t('feedback.send')}
+                  </button>
+                </div>
+              </form>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,47 @@
+import { useTranslation } from 'react-i18next'
+import { Signal } from 'lucide-react'
+import {
+  formatGpsAccuracyMeters,
+  gpsQualityI18nKey,
+  type GpsSignalQuality
+} from '../utils/geolocation.js'
+
+const SIGNAL_BARS: Record<GpsSignalQuality, number> = {
+  excellent: 4,
+  good: 3,
+  fair: 2,
+  poor: 1,
+  unknown: 0
+}
+
+interface GpsSignalHintProps {
+  quality: GpsSignalQuality
+  accuracyM: number | null
+  className?: string
+}
+
+export default function GpsSignalHint({ quality, accuracyM, className = '' }: GpsSignalHintProps) {
+  const { t } = useTranslation()
+  const bars = SIGNAL_BARS[quality]
+  const i18nParams = accuracyM != null ? { accuracy: formatGpsAccuracyMeters(accuracyM) } : undefined
+
+  return (
+    <p
+      className={`gps-signal-hint gps-signal-${quality} ${className}`.trim()}
+      role="status"
+    >
+      <span className="gps-signal-hint-label">
+        <Signal size={14} aria-hidden className="gps-signal-icon" />
+        <span className="gps-signal-bars" aria-hidden>
+          {[1, 2, 3, 4].map((level) => (
+            <span
+              key={level}
+              className={`gps-signal-bar ${level <= bars ? 'is-active' : ''}`}
+            />
+          ))}
+        </span>
+        <span>{t(gpsQualityI18nKey(quality), i18nParams)}</span>
+      </span>
+    </p>
+  )
+}
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Ship, LogIn, UserPlus, AlertTriangle, ShieldCheck, Languages, ArrowRight, KeyRound } from 'lucide-react'
+import LanguageDropdown from './LanguageDropdown.tsx'
+import { Ship, LogIn, UserPlus, AlertTriangle, ShieldCheck, ArrowRight, KeyRound } from 'lucide-react'
 import {
  getActiveMasterKey,
  registerUser,
@@ -10,14 +11,36 @@ import {
 } from '../services/auth.js'
 import { decryptJson, encryptBuffer } from '../services/crypto.js'
 import { saveLogbookKey } from '../services/logbookKeys.js'
+import { parseCollaborationRole } from '../services/logbook.js'
 import { syncLogbook } from '../services/sync.js'
 import { db } from '../services/db.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { apiJson } from '../services/api.js'

 interface InvitationAcceptanceProps {
  onAccepted: (logbookId: string, title: string) => void
  onCancel: () => void
 }

+type LocalizedError =
+  | { source: 'i18n'; key: string }
+  | { source: 'raw'; text: string }
+
+const resolveLocalizedError = (
+  error: LocalizedError | null,
+  t: (key: string) => string
+): string | null => {
+  if (!error) return null
+  return error.source === 'i18n' ? t(error.key) : error.text
+}
+
+const localizedErrorFromMessage = (
+  message: string | undefined,
+  fallbackKey: string
+): LocalizedError => {
+  return message ? { source: 'raw', text: message } : { source: 'i18n', key: fallbackKey }
+}
+
 const hexToBuffer = (hex: string): ArrayBuffer => {
  const bytes = new Uint8Array(hex.length / 2)
  for (let i = 0; i < bytes.length; i++) {
@@ -27,11 +50,11 @@ const hexToBuffer = (hex: string): ArrayBuffer => {
 }

 export default function InvitationAcceptance({ onAccepted, onCancel }: InvitationAcceptanceProps) {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()

  const [loading, setLoading] = useState(true)
  const [accepting, setAccepting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<LocalizedError | null>(null)

  const [token, setToken] = useState('')
  const [logbookKey, setLogbookKey] = useState<ArrayBuffer | null>(null)
@@ -45,7 +68,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
  const [username, setUsername] = useState('')
  const [loginMode, setLoginMode] = useState<'options' | 'register'>('options')
  const [regUsername, setRegUsername] = useState('')
-  const [authError, setAuthError] = useState<string | null>(null)
+  const [authError, setAuthError] = useState<LocalizedError | null>(null)

  const [recoveryPhrase, setRecoveryPhrase] = useState<string | null>(null)
  const [showRecoveryFallback, setShowRecoveryFallback] = useState(false)
@@ -54,7 +77,8 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio

  const autoAcceptStarted = useRef(false)

-  const isDe = i18n.language.startsWith('de')
+  const errorText = resolveLocalizedError(error, t)
+  const authErrorText = resolveLocalizedError(authError, t)

  const sessionReady = (): boolean => {
    return !!(getActiveMasterKey() && localStorage.getItem('active_userid'))
@@ -80,19 +104,15 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
        setLogbookKey(hexToBuffer(hexKey))
      } catch (err) {
        console.error('Invalid key in URL fragment:', err)
-        setError(isDe
-          ? 'Der Einladungslink ist kryptografisch ungültig (Schlüssel fehlerhaft).'
-          : 'The invitation link is cryptographically invalid (corrupted key).')
+        setError({ source: 'i18n', key: 'invitation.error_invalid_key' })
      }
    } else {
-      setError(isDe
-        ? 'Der Einladungslink enthält keinen Entschlüsselungsschlüssel (#key=...). Bitte den vollständigen Link vom Eigner verwenden.'
-        : 'The invitation link is missing the decryption key (#key=...). Please use the complete link from the owner.')
+      setError({ source: 'i18n', key: 'invitation.error_missing_key' })
    }

    const rand = Math.floor(1000 + Math.random() * 9000)
    setRegUsername(`CrewSkipper_${rand}`)
-  }, [isDe])
+  }, [])

  useEffect(() => {
    if (token && logbookKey) {
@@ -107,14 +127,13 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
      const res = await fetch(`/api/collaboration/invite-details?token=${token}`)

      if (res.status === 410) {
-        setError(isDe
-          ? 'Diese Einladung ist abgelaufen (48 Stunden gültig).'
-          : 'This invitation link has expired (valid for 48 hours only).')
+        setError({ source: 'i18n', key: 'invitation.error_expired' })
        return
      }

      if (!res.ok) {
-        throw new Error(isDe ? 'Einladungstoken ungültig.' : 'Failed to verify invitation token.')
+        setError({ source: 'i18n', key: 'invitation.error_invalid_token' })
+        return
      }

      const details = await res.json()
@@ -127,7 +146,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
      setDecryptedTitle(title)
    } catch (err: any) {
      console.error('Failed to load invitation details:', err)
-      setError(err.message || (isDe ? 'Einladungsdetails konnten nicht geladen werden.' : 'Invitation details could not be retrieved.'))
+      setError(localizedErrorFromMessage(err.message, 'invitation.error_load_failed'))
    } finally {
      setLoading(false)
    }
@@ -137,13 +156,15 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
    const masterKey = getActiveMasterKey()
    const activeUserId = localStorage.getItem('active_userid')
    if (!masterKey || !activeUserId) {
-      setError(isDe
-        ? 'Sitzung unvollständig — bitte erneut anmelden (Benutzer-ID fehlt).'
-        : 'Incomplete session — please log in again (user ID missing).')
+      autoAcceptStarted.current = false
+      setError({ source: 'i18n', key: 'invitation.error_incomplete_session' })
      setIsLoggedIn(false)
      return
    }
-    if (!logbookKey || !logbookId) return
+    if (!logbookKey || !logbookId) {
+      autoAcceptStarted.current = false
+      return
+    }

    setAccepting(true)
    setError(null)
@@ -158,12 +179,8 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
      )
      const encrypted = await encryptBuffer(logbookKey, aesMasterKey)

-      const res = await fetch('/api/collaboration/accept', {
+      const acceptResult = await apiJson<{ role: string; logbookId: string }>('/api/collaboration/accept', {
        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': activeUserId
-        },
        body: JSON.stringify({
          token,
          encryptedLogbookKey: encrypted.ciphertext,
@@ -171,11 +188,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
          tag: encrypted.tag
        })
      })
-
-      if (!res.ok) {
-        const serverError = await res.json().catch(() => ({}))
-        throw new Error(serverError.error || (isDe ? 'Beitritt auf dem Server fehlgeschlagen.' : 'Failed to join logbook on the server.'))
-      }
+      const collaborationRole = parseCollaborationRole(acceptResult.role, 'invitation accept')

      await saveLogbookKey(logbookId, logbookKey)

@@ -184,25 +197,31 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
          id: logbookId,
          encryptedTitle: rawEncryptedTitle,
          updatedAt: new Date().toISOString(),
-          isSynced: 1
+          isSynced: 1,
+          isShared: 1,
+          collaborationRole
        })
      }

      await syncLogbook(logbookId)
+      trackPlausibleEvent(PlausibleEvents.INVITE_ACCEPTED)
      onAccepted(logbookId, decryptedTitle)
    } catch (err: any) {
      console.error('Accepting invitation failed:', err)
-      setError(err.message || (isDe ? 'Beitritt fehlgeschlagen.' : 'Acceptance failed.'))
+      setError(localizedErrorFromMessage(err.message, 'invitation.error_accept_failed'))
      autoAcceptStarted.current = false
    } finally {
      setAccepting(false)
    }
-  }, [logbookId, logbookKey, token, rawEncryptedTitle, decryptedTitle, onAccepted, isDe])
+  }, [logbookId, logbookKey, token, rawEncryptedTitle, decryptedTitle, onAccepted])

  useEffect(() => {
    if (loading || accepting || autoAcceptStarted.current) return
    if (!isLoggedIn || !logbookId || !logbookKey || !token) return
-    if (!sessionReady()) return
+    if (!sessionReady()) {
+      autoAcceptStarted.current = false
+      return
+    }

    autoAcceptStarted.current = true
    void handleAccept()
@@ -230,7 +249,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
      if (resolvedUser) setUsername(resolvedUser)
      setShowRecoveryFallback(true)
    } catch (err: any) {
-      setAuthError(err.message || (isDe ? 'Passkey-Anmeldung fehlgeschlagen.' : 'Passkey authentication failed.'))
+      setAuthError(localizedErrorFromMessage(err.message, 'invitation.error_login_failed'))
    } finally {
      setLoading(false)
    }
@@ -240,20 +259,25 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
    e.preventDefault()
    if (!recoveryInput.trim() || !encryptedPayloads) return

+    const resolvedUser = (username.trim() || encryptedPayloads.username || '').trim()
+    if (!resolvedUser) {
+      setAuthError({ source: 'i18n', key: 'invitation.error_username_missing' })
+      return
+    }
+
    setLoading(true)
    setAuthError(null)
    try {
-      const resolvedUser = username.trim() || encryptedPayloads.username
      const success = await completeLoginWithRecovery(resolvedUser, recoveryInput.trim(), encryptedPayloads)
      if (success) {
        setShowRecoveryFallback(false)
        setIsLoggedIn(true)
        setUsername(resolvedUser)
      } else {
-        setAuthError(t('auth.error_incorrect_recovery'))
+        setAuthError({ source: 'i18n', key: 'auth.error_incorrect_recovery' })
      }
    } catch (err: any) {
-      setAuthError(err.message || t('auth.error_decryption_failed'))
+      setAuthError(localizedErrorFromMessage(err.message, 'auth.error_decryption_failed'))
    } finally {
      setLoading(false)
    }
@@ -273,7 +297,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
        setRecoveryPhrase(result.recoveryPhrase)
      }
    } catch (err: any) {
-      setAuthError(err.message || (isDe ? 'Registrierung fehlgeschlagen.' : 'Registration failed.'))
+      setAuthError(localizedErrorFromMessage(err.message, 'invitation.error_register_failed'))
    } finally {
      setLoading(false)
    }
@@ -284,9 +308,6 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
    setIsLoggedIn(true)
  }

-  const toggleLanguage = () => {
-    i18n.changeLanguage(i18n.language.startsWith('de') ? 'en' : 'de')
-  }

  if (recoveryPhrase) {
    return (
@@ -321,25 +342,46 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
          <h2>{t('auth.enter_recovery')}</h2>
        </div>
        <p className="recovery-warning">{t('auth.recovery_fallback_warning')}</p>
-        <form onSubmit={handleRecoverySubmit}>
-          <textarea
-            className="input-text"
-            placeholder={t('auth.recovery_placeholder')}
-            value={recoveryInput}
-            onChange={(e) => setRecoveryInput(e.target.value)}
-            rows={3}
-            required
-          />
+        <form onSubmit={handleRecoverySubmit} autoComplete="on">
+          {(username.trim() || encryptedPayloads?.username) && (
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username.trim() || encryptedPayloads?.username || ''}
+              readOnly
+              tabIndex={-1}
+              aria-hidden="true"
+              style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div className="input-group">
+            <label htmlFor="invitation-recovery-key" className="input-label" style={{ display: 'block', marginBottom: '8px', color: '#94a3b8' }}>
+              {t('auth.enter_recovery')}
+            </label>
+            <input
+              id="invitation-recovery-key"
+              name="recovery-key"
+              type="password"
+              className="input-text"
+              placeholder={t('auth.recovery_placeholder')}
+              value={recoveryInput}
+              onChange={(e) => setRecoveryInput(e.target.value)}
+              required
+              autoComplete="current-password"
+              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
+            />
+          </div>
          <div className="auth-actions mt-4">
            <button type="button" className="btn secondary" onClick={() => setShowRecoveryFallback(false)}>
-              {isDe ? 'Zurück' : 'Back'}
+              {t('auth.back')}
            </button>
            <button type="submit" className="btn primary" disabled={loading}>
              {t('auth.decrypt_logbook')}
            </button>
          </div>
        </form>
-        {authError && <div className="auth-error mt-4">{authError}</div>}
+        {authErrorText && <div className="auth-error mt-4">{authErrorText}</div>}
      </div>
    )
  }
@@ -349,12 +391,10 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
      <div className="auth-card glass">
        <div className="auth-header">
          <Ship className="auth-icon accent spin" size={48} />
-          <h2>{accepting ? (isDe ? 'Beitritt...' : 'Joining...') : (isDe ? 'Einladung wird geprüft...' : 'Checking Invitation...')}</h2>
+          <h2>{accepting ? t('invitation.loading_joining') : t('invitation.loading_checking')}</h2>
        </div>
        <p className="recovery-warning">
-          {accepting
-            ? (isDe ? 'Logbuch wird freigeschaltet und synchronisiert...' : 'Unlocking logbook and syncing data...')
-            : (isDe ? 'Lade Verschlüsselungsschlüssel...' : 'Retrieving encryption key...')}
+          {accepting ? t('invitation.loading_unlocking') : t('invitation.loading_retrieving_key')}
        </p>
      </div>
    )
@@ -365,12 +405,12 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
      <div className="auth-card glass">
        <div className="auth-header">
          <AlertTriangle className="auth-icon warn" size={48} />
-          <h2>{isDe ? 'Einladungsfehler' : 'Invitation Error'}</h2>
+          <h2>{t('invitation.error_title')}</h2>
        </div>
-        <p className="recovery-warning" style={{ color: '#ef4444' }}>{error}</p>
+        <p className="recovery-warning" style={{ color: '#ef4444' }}>{errorText}</p>
        <div className="auth-actions mt-6">
          <button className="btn primary" onClick={onCancel} style={{ width: '100%' }}>
-            {isDe ? 'Zurück zum Start' : 'Back to Dashboard'}
+            {t('invitation.back_to_start')}
          </button>
        </div>
      </div>
@@ -381,18 +421,18 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
    <div className="auth-card glass">
      <div className="auth-header">
        <ShieldCheck className="auth-icon success" size={48} style={{ color: '#10b981' }} />
-        <h2>{isDe ? 'Logbuch-Einladung' : 'Logbook Invitation'}</h2>
+        <h2>{t('invitation.title')}</h2>
      </div>

      <div style={{ textAlign: 'center', margin: '20px 0', padding: '16px', background: 'rgba(255,255,255,0.03)', borderRadius: '12px' }}>
        <p style={{ margin: '0 0 8px 0', fontSize: '13px', color: '#64748b', textTransform: 'uppercase' }}>
-          {isDe ? 'Einladung von' : 'INVITED BY'}
+          {t('invitation.invited_by')}
        </p>
        <p style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: 600, color: '#f1f5f9' }}>
          Skipper {ownerUsername}
        </p>
        <p style={{ margin: '0 0 8px 0', fontSize: '13px', color: '#64748b', textTransform: 'uppercase' }}>
-          {isDe ? 'Schiff / Logbuch' : 'VESSEL / LOGBOOK'}
+          {t('invitation.vessel_logbook')}
        </p>
        <p style={{ margin: 0, fontSize: '20px', fontWeight: 700, color: '#fbbf24' }}>
          {decryptedTitle}
@@ -402,12 +442,10 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
      {isLoggedIn ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%' }}>
          <p style={{ fontSize: '14px', color: '#94a3b8', textAlign: 'center', lineHeight: '145%' }}>
-            {isDe
-              ? `Angemeldet als ${username}. Beitritt wird vorbereitet...`
-              : `Signed in as ${username}. Preparing to join...`}
+            {t('invitation.signed_in_preparing', { username })}
          </p>
          <button className="btn primary" onClick={handleAccept} disabled={accepting} style={{ width: '100%' }}>
-            {accepting ? (isDe ? 'Beitritt...' : 'Joining...') : (isDe ? 'Erneut beitreten' : 'Join again')}
+            {accepting ? t('invitation.loading_joining') : t('invitation.join_again')}
            <ArrowRight size={16} />
          </button>
        </div>
@@ -416,27 +454,25 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
          {loginMode === 'options' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <p style={{ fontSize: '13.5px', color: '#94a3b8', textAlign: 'center', lineHeight: '145%' }}>
-                {isDe
-                  ? 'Melden Sie sich an oder registrieren Sie ein Konto, um dem Logbuch beizutreten.'
-                  : 'Sign in or register an account to join this logbook.'}
+                {t('invitation.login_or_register_hint')}
              </p>

              <button className="btn primary" onClick={handleLogin} disabled={loading} style={{ width: '100%', padding: '14px' }}>
                <LogIn size={16} />
-                {isDe ? 'Mit Passkey anmelden' : 'Log In with Passkey'}
+                {t('auth.login')}
              </button>

              <div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
                <div style={{ flex: 1, height: '1px', background: 'rgba(255,255,255,0.08)' }} />
                <span style={{ padding: '0 10px', fontSize: '12px', color: '#64748b' }}>
-                  {isDe ? 'ODER NEU REGISTRIEREN' : 'OR SIGN UP'}
+                  {t('invitation.or_sign_up')}
                </span>
                <div style={{ flex: 1, height: '1px', background: 'rgba(255,255,255,0.08)' }} />
              </div>

              <button className="btn secondary" onClick={() => setLoginMode('register')} style={{ width: '100%' }}>
                <UserPlus size={16} />
-                {isDe ? 'Neues Crew-Konto erstellen' : 'Register New Crew Account'}
+                {t('invitation.register_crew_account')}
              </button>
            </div>
          )}
@@ -445,7 +481,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
            <form onSubmit={handleRegister} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <div className="input-group">
                <label style={{ display: 'block', fontSize: '13px', color: '#94a3b8', marginBottom: '6px' }}>
-                  {isDe ? 'Benutzername' : 'Username'}
+                  {t('invitation.username_label')}
                </label>
                <input
                  type="text"
@@ -457,24 +493,21 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
              </div>
              <div className="auth-actions">
                <button type="button" className="btn secondary" onClick={() => setLoginMode('options')}>
-                  {isDe ? 'Zurück' : 'Back'}
+                  {t('auth.back')}
                </button>
                <button type="submit" className="btn primary" disabled={!regUsername.trim() || loading}>
-                  {isDe ? 'Passkey erstellen' : 'Create Passkey'}
+                  {t('invitation.create_passkey')}
                </button>
              </div>
            </form>
          )}

-          {authError && <div className="auth-error mt-4" style={{ fontSize: '13px' }}>{authError}</div>}
+          {authErrorText && <div className="auth-error mt-4" style={{ fontSize: '13px' }}>{authErrorText}</div>}
        </div>
      )}

      <div className="auth-footer" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '16px', marginTop: '24px' }}>
-        <button className="btn-icon-text" onClick={toggleLanguage}>
-          <Languages size={18} />
-          {isDe ? 'English' : 'Deutsch'}
-        </button>
+        <LanguageDropdown variant="text" align="left" />
      </div>
    </div>
  )
@@ -0,0 +1,206 @@
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Languages, Globe, ChevronDown } from 'lucide-react'
+import {
+  SUPPORTED_LANGUAGES,
+  changeAppLanguage,
+  normalizeAppLanguage,
+  type AppLanguage
+} from '../utils/i18nLanguages.js'
+
+function FlagIcon({ lang, className, style }: { lang: string; className?: string; style?: React.CSSProperties }) {
+  const baseStyle = {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    borderRadius: '2px',
+    overflow: 'hidden',
+    border: '1px solid rgba(255, 255, 255, 0.15)',
+    boxSizing: 'border-box' as const,
+    ...style
+  }
+
+  switch (lang) {
+    case 'de':
+      return (
+        <svg viewBox="0 0 5 3" className={className} style={baseStyle}>
+          <rect width="5" height="3" fill="#FFCE00"/>
+          <rect width="5" height="2" fill="#DD0000"/>
+          <rect width="5" height="1" fill="#000000"/>
+        </svg>
+      )
+    case 'en':
+      return (
+        <svg viewBox="0 0 60 30" className={className} style={baseStyle}>
+          <clipPath id="union-jack-clip">
+            <path d="M0,0 L60,30 M60,0 L0,30"/>
+          </clipPath>
+          <rect width="60" height="30" fill="#012169"/>
+          <path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" strokeWidth="6"/>
+          <path d="M0,0 L60,30 M60,0 L0,30" stroke="#C8102E" strokeWidth="4" clipPath="url(#union-jack-clip)"/>
+          <path d="M30,0 v30 M0,15 h60" stroke="#fff" strokeWidth="10"/>
+          <path d="M30,0 v30 M0,15 h60" stroke="#C8102E" strokeWidth="6"/>
+        </svg>
+      )
+    case 'da':
+      return (
+        <svg viewBox="0 0 37 28" className={className} style={baseStyle}>
+          <rect width="37" height="28" fill="#C8102E"/>
+          <path d="M12,0 h4 v28 h-4 z M0,12 h37 v4 h-37 z" fill="#FFFFFF"/>
+        </svg>
+      )
+    case 'sv':
+      return (
+        <svg viewBox="0 0 16 10" className={className} style={baseStyle}>
+          <rect width="16" height="10" fill="#006AA7"/>
+          <path d="M5,0 h2 v10 h-2 z M0,4 h16 v2 h-16 z" fill="#FECC00"/>
+        </svg>
+      )
+    case 'nb':
+      return (
+        <svg viewBox="0 0 22 16" className={className} style={baseStyle}>
+          <rect width="22" height="16" fill="#BA0C2F"/>
+          <path d="M6,0 h4 v16 h-4 z M0,6 h22 v4 h-22 z" fill="#FFFFFF"/>
+          <path d="M7,0 h2 v16 h-2 z M0,7 h22 v2 h-22 z" fill="#00205B"/>
+        </svg>
+      )
+    case 'fr':
+      return (
+        <svg viewBox="0 0 3 2" className={className} style={baseStyle}>
+          <rect width="3" height="2" fill="#FFFFFF"/>
+          <rect width="1" height="2" fill="#002395"/>
+          <rect x="2" width="1" height="2" fill="#ED2939"/>
+        </svg>
+      )
+    case 'es':
+      return (
+        <svg viewBox="0 0 3 2" className={className} style={baseStyle}>
+          <rect width="3" height="2" fill="#C1272D"/>
+          <rect y="0.5" width="3" height="1" fill="#FEE100"/>
+        </svg>
+      )
+    default:
+      return null
+  }
+}
+
+interface LanguageDropdownProps {
+  variant?: 'icon' | 'text' | 'secondary-button'
+  align?: 'left' | 'right'
+}
+
+export default function LanguageDropdown({
+  variant = 'icon',
+  align = 'right'
+}: LanguageDropdownProps) {
+  const { t, i18n } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  const activeLang = normalizeAppLanguage(i18n.language)
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setIsOpen(false)
+    }
+
+    document.addEventListener('mousedown', closeOnOutsideClick)
+    document.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsideClick)
+      document.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [isOpen])
+
+  const selectLanguage = (lang: AppLanguage) => {
+    changeAppLanguage(i18n, lang)
+    setIsOpen(false)
+  }
+
+  // Trigger button content based on variant
+  const renderTriggerContent = () => {
+    const name = t(`languages.${activeLang}`)
+
+    if (variant === 'icon') {
+      return (
+        <span className="lang-dropdown-trigger-flag" aria-hidden="true">
+          <FlagIcon lang={activeLang} className="lang-flag-svg trigger-icon-only" />
+        </span>
+      )
+    }
+
+    if (variant === 'secondary-button') {
+      return (
+        <>
+          <Globe size={14} style={{ marginRight: '4px' }} />
+          <FlagIcon lang={activeLang} className="lang-flag-svg" style={{ marginRight: '4px' }} />
+          <span className="lang-trigger-name">{name}</span>
+          <ChevronDown size={12} className="lang-dropdown-chevron" />
+        </>
+      )
+    }
+
+    // Default or "text" variant (used in footer)
+    return (
+      <>
+        <Languages size={18} />
+        <FlagIcon lang={activeLang} className="lang-flag-svg" style={{ margin: '0 4px' }} />
+        <span>{name}</span>
+        <ChevronDown size={14} className="lang-dropdown-chevron" />
+      </>
+    )
+  }
+
+  const triggerClass =
+    variant === 'icon'
+      ? 'btn-icon'
+      : variant === 'secondary-button'
+      ? 'btn secondary compact'
+      : 'btn-icon-text'
+
+  return (
+    <div
+      className={`lang-dropdown ${isOpen ? 'is-open' : ''} align-${align}`}
+      ref={rootRef}
+    >
+      <button
+        type="button"
+        className={triggerClass}
+        onClick={() => setIsOpen((prev) => !prev)}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        title="Switch Language"
+        style={variant === 'secondary-button' ? { width: 'auto', padding: '6px 12px', fontSize: '13px' } : undefined}
+      >
+        {renderTriggerContent()}
+      </button>
+
+      {isOpen && (
+        <ul className="lang-dropdown-menu" role="listbox">
+          {SUPPORTED_LANGUAGES.map((lang) => {
+            const isSelected = lang === activeLang
+            return (
+              <li
+                key={lang}
+                role="option"
+                aria-selected={isSelected}
+                className={`lang-dropdown-option ${isSelected ? 'is-selected' : ''}`}
+                onClick={() => selectLanguage(lang)}
+              >
+                <FlagIcon lang={lang} className="lang-flag-svg" />
+                <span className="lang-option-name">{t(`languages.${lang}`)}</span>
+              </li>
+            )
+          })}
+        </ul>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import QRCode from 'qrcode'
+
+interface LinkQrCodeProps {
+  value: string
+  size?: number
+}
+
+export default function LinkQrCode({ value, size = 200 }: LinkQrCodeProps) {
+  const { t } = useTranslation()
+  const [dataUrl, setDataUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!value.trim()) {
+      setDataUrl(null)
+      return
+    }
+
+    let cancelled = false
+    void QRCode.toDataURL(value, {
+      width: size,
+      margin: 2,
+      errorCorrectionLevel: 'M',
+      color: { dark: '#0f172a', light: '#ffffff' }
+    })
+      .then((url) => {
+        if (!cancelled) setDataUrl(url)
+      })
+      .catch((err) => {
+        console.error('QR code generation failed:', err)
+        if (!cancelled) setDataUrl(null)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [value, size])
+
+  if (!value.trim() || !dataUrl) return null
+
+  return (
+    <div className="link-qr-block">
+      <p className="link-qr-label">{t('settings.link_qr_hint')}</p>
+      <img
+        src={dataUrl}
+        width={size}
+        height={size}
+        className="link-qr-image"
+        alt={t('settings.link_qr_alt')}
+      />
+    </div>
+  )
+}
@@ -0,0 +1,272 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Anchor,
+  Camera,
+  CloudSun,
+  Compass,
+  Droplets,
+  Fuel,
+  Gauge,
+  MapPin,
+  MessageSquare,
+  Mic,
+  MoreHorizontal,
+  Sailboat,
+  Waves,
+  X,
+  Zap
+} from 'lucide-react'
+
+export interface LiveActionToolbarProps {
+  motorRunning: boolean
+  hasLoggedPosition: boolean
+  lastSailsLabel?: string
+  busy: boolean
+  photoSaving: boolean
+  voiceSaving: boolean
+  tidesLoading: boolean
+  weatherOwmLoading: boolean
+  onMotorToggle: () => void
+  onCastOff: () => void
+  onMoor: () => void
+  onOpenSails: () => void
+  onOpenCourse: () => void
+  onOpenSog: () => void
+  onOpenStw: () => void
+  onOpenFuel: () => void
+  onOpenWater: () => void
+  onOpenPosition: () => void
+  onFetchTides: () => void
+  onOpenComment: () => void
+  onOpenPhoto: () => void
+  onOpenVoice: () => void
+  onFetchOwmWeather: () => void
+  onOpenWind: () => void
+  onOpenTemp: () => void
+  onOpenPressure: () => void
+  onOpenPrecip: () => void
+  onOpenSeaState: () => void
+  onOpenVisibility: () => void
+}
+
+export default function LiveActionToolbar({
+  motorRunning,
+  hasLoggedPosition,
+  lastSailsLabel,
+  busy,
+  photoSaving,
+  voiceSaving,
+  tidesLoading,
+  weatherOwmLoading,
+  onMotorToggle,
+  onCastOff,
+  onMoor,
+  onOpenSails,
+  onOpenCourse,
+  onOpenSog,
+  onOpenStw,
+  onOpenFuel,
+  onOpenWater,
+  onOpenPosition,
+  onFetchTides,
+  onOpenComment,
+  onOpenPhoto,
+  onOpenVoice,
+  onFetchOwmWeather,
+  onOpenWind,
+  onOpenTemp,
+  onOpenPressure,
+  onOpenPrecip,
+  onOpenSeaState,
+  onOpenVisibility
+}: LiveActionToolbarProps) {
+  const { t } = useTranslation()
+  const [weatherSheetOpen, setWeatherSheetOpen] = useState(false)
+  const [moreSheetOpen, setMoreSheetOpen] = useState(false)
+
+  const closeSheets = () => {
+    setWeatherSheetOpen(false)
+    setMoreSheetOpen(false)
+  }
+
+  const runWeather = (fn: () => void) => {
+    fn()
+    closeSheets()
+  }
+
+  const runMore = (fn: () => void) => {
+    fn()
+    closeSheets()
+  }
+
+  return (
+    <>
+      <div className="live-action-toolbar-sticky">
+        <div className="live-action-toolbar" aria-label={t('logs.live_actions_label')}>
+          <div className="live-action-grid live-action-grid-primary" data-tour="live-actions">
+            <button
+              type="button"
+              className={`live-log-action-btn live-log-action-btn-compact ${motorRunning ? 'is-active' : ''}`}
+              onClick={onMotorToggle}
+              disabled={busy}
+            >
+              <Zap size={20} />
+              <span>{motorRunning ? t('logs.live_motor_stop') : t('logs.live_motor_start')}</span>
+            </button>
+            <button type="button" className="live-log-action-btn live-log-action-btn-compact" onClick={onCastOff} disabled={busy}>
+              <Anchor size={20} />
+              <span>{t('logs.live_cast_off')}</span>
+            </button>
+            <button type="button" className="live-log-action-btn live-log-action-btn-compact" onClick={onMoor} disabled={busy}>
+              <Anchor size={20} style={{ transform: 'scaleX(-1)' }} />
+              <span>{t('logs.live_moor')}</span>
+            </button>
+            <button
+              type="button"
+              className={`live-log-action-btn live-log-action-btn-compact ${hasLoggedPosition ? 'has-gps' : ''}`}
+              onClick={onOpenPosition}
+              disabled={busy}
+            >
+              <MapPin size={20} />
+              <span>{t('logs.live_position')}</span>
+            </button>
+            <button type="button" className="live-log-action-btn live-log-action-btn-compact" onClick={onOpenPhoto} disabled={busy || photoSaving}>
+              <Camera size={20} />
+              <span>{t('logs.live_photo_btn')}</span>
+            </button>
+            <button type="button" className="live-log-action-btn live-log-action-btn-compact" onClick={onOpenVoice} disabled={busy || voiceSaving}>
+              <Mic size={20} />
+              <span>{t('logs.live_voice_btn')}</span>
+            </button>
+            <button type="button" className="live-log-action-btn live-log-action-btn-compact" onClick={onOpenComment} disabled={busy}>
+              <MessageSquare size={20} />
+              <span>{t('logs.live_comment_btn')}</span>
+            </button>
+          </div>
+
+          <div className="live-action-grid live-action-grid-secondary">
+            <button
+              type="button"
+              className={`live-log-action-btn live-log-action-btn-compact ${lastSailsLabel ? 'has-context' : ''}`}
+              onClick={onOpenSails}
+              disabled={busy}
+              title={lastSailsLabel}
+            >
+              <Sailboat size={18} />
+              <span>{t('logs.live_sails_btn')}</span>
+            </button>
+            <button type="button" className="live-log-action-btn live-log-action-btn-compact" onClick={onOpenCourse} disabled={busy}>
+              <Compass size={18} />
+              <span>{t('logs.live_course_btn')}</span>
+            </button>
+            <button type="button" className="live-log-action-btn live-log-action-btn-compact" onClick={onOpenSog} disabled={busy}>
+              <Gauge size={18} />
+              <span>{t('logs.live_sog_btn')}</span>
+            </button>
+            <button type="button" className="live-log-action-btn live-log-action-btn-compact" onClick={onOpenStw} disabled={busy}>
+              <Gauge size={18} style={{ transform: 'scaleX(-1)' }} />
+              <span>{t('logs.live_stw_btn')}</span>
+            </button>
+            <button
+              type="button"
+              className="live-log-action-btn live-log-action-btn-compact"
+              onClick={() => { setMoreSheetOpen(false); setWeatherSheetOpen(true) }}
+              disabled={busy}
+            >
+              <CloudSun size={18} />
+              <span>{t('logs.live_weather_btn')}</span>
+            </button>
+            <button
+              type="button"
+              className="live-log-action-btn live-log-action-btn-compact"
+              onClick={() => { setWeatherSheetOpen(false); setMoreSheetOpen(true) }}
+              disabled={busy}
+            >
+              <MoreHorizontal size={18} />
+              <span>{t('logs.live_more_btn')}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {weatherSheetOpen && (
+        <div
+          className="live-bottom-sheet-backdrop"
+          onClick={(e) => { if (e.target === e.currentTarget) closeSheets() }}
+          role="presentation"
+        >
+          <div className="live-bottom-sheet" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
+            <div className="live-bottom-sheet-handle" aria-hidden />
+            <div className="live-bottom-sheet-header">
+              <h3>{t('logs.live_weather_btn')}</h3>
+              <button type="button" className="btn-icon" onClick={closeSheets} aria-label={t('logs.live_cancel')}>
+                <X size={18} />
+              </button>
+            </div>
+            <div className="live-overflow-menu-list">
+              <button
+                type="button"
+                className="live-overflow-menu-item live-log-subaction-btn-owm"
+                onClick={() => runWeather(onFetchOwmWeather)}
+                disabled={busy || weatherOwmLoading}
+              >
+                {weatherOwmLoading ? t('logs.live_weather_owm_loading') : t('logs.live_weather_owm_btn')}
+              </button>
+              <button type="button" className="live-overflow-menu-item" onClick={() => runWeather(onOpenWind)} disabled={busy}>
+                {t('logs.live_wind_btn')}
+              </button>
+              <button type="button" className="live-overflow-menu-item" onClick={() => runWeather(onOpenTemp)} disabled={busy}>
+                {t('logs.live_temp_btn')}
+              </button>
+              <button type="button" className="live-overflow-menu-item" onClick={() => runWeather(onOpenPressure)} disabled={busy}>
+                {t('logs.live_pressure_btn')}
+              </button>
+              <button type="button" className="live-overflow-menu-item" onClick={() => runWeather(onOpenPrecip)} disabled={busy}>
+                {t('logs.live_precip_btn')}
+              </button>
+              <button type="button" className="live-overflow-menu-item" onClick={() => runWeather(onOpenSeaState)} disabled={busy}>
+                {t('logs.live_sea_state_btn')}
+              </button>
+              <button type="button" className="live-overflow-menu-item" onClick={() => runWeather(onOpenVisibility)} disabled={busy}>
+                {t('logs.live_visibility_btn')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {moreSheetOpen && (
+        <div
+          className="live-bottom-sheet-backdrop"
+          onClick={(e) => { if (e.target === e.currentTarget) closeSheets() }}
+          role="presentation"
+        >
+          <div className="live-bottom-sheet" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
+            <div className="live-bottom-sheet-handle" aria-hidden />
+            <div className="live-bottom-sheet-header">
+              <h3>{t('logs.live_more_btn')}</h3>
+              <button type="button" className="btn-icon" onClick={closeSheets} aria-label={t('logs.live_cancel')}>
+                <X size={18} />
+              </button>
+            </div>
+            <div className="live-overflow-menu-list">
+              <button type="button" className="live-overflow-menu-item" onClick={() => runMore(onOpenFuel)} disabled={busy}>
+                <Fuel size={18} />
+                {t('logs.live_fuel_btn')}
+              </button>
+              <button type="button" className="live-overflow-menu-item" onClick={() => runMore(onOpenWater)} disabled={busy}>
+                <Droplets size={18} />
+                {t('logs.live_water_btn')}
+              </button>
+              <button type="button" className="live-overflow-menu-item" onClick={() => runMore(onFetchTides)} disabled={busy || tidesLoading}>
+                <Waves size={18} />
+                {tidesLoading ? t('logs.tide_fetch_loading') : t('logs.tides')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
@@ -0,0 +1,353 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Camera, X } from 'lucide-react'
+import {
+  cameraErrorKeyFromDomException,
+  probeCameraAvailability
+} from '../utils/cameraAvailability.js'
+import {
+  captureVideoFrame,
+  preferNativeCameraPicker
+} from '../utils/captureVideoFrame.js'
+
+interface LiveCameraCaptureProps {
+  open: boolean
+  busy?: boolean
+  caption?: string
+  onCaptionChange?: (value: string) => void
+  onClose: () => void
+  onCapture: (blob: Blob) => void
+}
+
+type Phase = 'checking' | 'live' | 'preview' | 'native'
+
+export default function LiveCameraCapture({
+  open,
+  busy = false,
+  caption = '',
+  onCaptionChange,
+  onClose,
+  onCapture
+}: LiveCameraCaptureProps) {
+  const { t } = useTranslation()
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const streamRef = useRef<MediaStream | null>(null)
+  const previewUrlRef = useRef<string | null>(null)
+
+  const [cameraError, setCameraError] = useState<string | null>(null)
+  const [ready, setReady] = useState(false)
+  const [capturing, setCapturing] = useState(false)
+  const [phase, setPhase] = useState<Phase>('checking')
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [previewBlob, setPreviewBlob] = useState<Blob | null>(null)
+  const [streamGeneration, setStreamGeneration] = useState(0)
+
+  const clearPreview = useCallback(() => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current)
+      previewUrlRef.current = null
+    }
+    setPreviewUrl(null)
+    setPreviewBlob(null)
+  }, [])
+
+  const stopStream = useCallback(() => {
+    for (const track of streamRef.current?.getTracks() ?? []) {
+      track.stop()
+    }
+    streamRef.current = null
+    if (videoRef.current) {
+      videoRef.current.srcObject = null
+    }
+    setReady(false)
+  }, [])
+
+  const enterPreview = useCallback((blob: Blob) => {
+    stopStream()
+    clearPreview()
+    const url = URL.createObjectURL(blob)
+    previewUrlRef.current = url
+    setPreviewBlob(blob)
+    setPreviewUrl(url)
+    setPhase('preview')
+  }, [stopStream, clearPreview])
+
+  const resetToLive = useCallback(() => {
+    clearPreview()
+    setCameraError(null)
+    setCapturing(false)
+    if (preferNativeCameraPicker()) {
+      setPhase('native')
+    } else {
+      setPhase('live')
+      setStreamGeneration((n) => n + 1)
+    }
+  }, [clearPreview])
+
+  useEffect(() => {
+    if (!open) {
+      stopStream()
+      clearPreview()
+      setCameraError(null)
+      setCapturing(false)
+      setPhase('checking')
+      return
+    }
+
+    let cancelled = false
+    clearPreview()
+    setCameraError(null)
+    setCapturing(false)
+    setPhase('checking')
+
+    const probe = async () => {
+      const availability = await probeCameraAvailability()
+      if (cancelled) return
+
+      if (availability === 'unsupported') {
+        setCameraError(t('logs.live_photo_camera_unavailable'))
+        return
+      }
+      if (availability === 'none') {
+        setCameraError(t('logs.live_photo_no_camera'))
+        return
+      }
+
+      setPhase(preferNativeCameraPicker() ? 'native' : 'live')
+    }
+
+    void probe()
+    return () => {
+      cancelled = true
+    }
+  }, [open, clearPreview, stopStream, t])
+
+  useEffect(() => {
+    if (!open || phase !== 'live') {
+      stopStream()
+      return
+    }
+
+    let cancelled = false
+
+    const start = async () => {
+      setCameraError(null)
+      setReady(false)
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: { ideal: 'environment' },
+            width: { ideal: 1280 },
+            height: { ideal: 720 }
+          },
+          audio: false
+        })
+        if (cancelled) {
+          for (const track of stream.getTracks()) track.stop()
+          return
+        }
+        streamRef.current = stream
+        const video = videoRef.current
+        if (!video) return
+
+        const markReady = () => {
+          if (cancelled) return
+          if (video.videoWidth > 0 && video.videoHeight > 0) {
+            setReady(true)
+          }
+        }
+
+        video.onloadedmetadata = markReady
+        video.srcObject = stream
+        await video.play()
+        markReady()
+      } catch (err) {
+        console.error('Camera access failed:', err)
+        if (!cancelled) {
+          setCameraError(t(cameraErrorKeyFromDomException(err)))
+        }
+      }
+    }
+
+    void start()
+    return () => {
+      cancelled = true
+      stopStream()
+    }
+  }, [open, phase, streamGeneration, stopStream, t])
+
+  const handleCapture = async () => {
+    const video = videoRef.current
+    if (!video || !ready || busy || capturing) return
+
+    setCapturing(true)
+    setCameraError(null)
+    try {
+      const blob = await captureVideoFrame(video)
+      enterPreview(blob)
+    } catch (err) {
+      console.error('Live camera capture failed:', err)
+      setCameraError(t('logs.live_photo_capture_failed'))
+    } finally {
+      setCapturing(false)
+    }
+  }
+
+  const handleNativeFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    e.target.value = ''
+    if (!file || busy) return
+
+    setCameraError(null)
+    try {
+      enterPreview(file)
+    } catch (err) {
+      console.error('Live camera file pick failed:', err)
+      setCameraError(t('logs.live_photo_capture_failed'))
+    }
+  }
+
+  const handleSave = () => {
+    if (!previewBlob || busy) return
+    onCapture(previewBlob)
+  }
+
+  const handleRetake = () => {
+    if (busy) return
+    resetToLive()
+  }
+
+  const openNativePicker = () => {
+    if (busy) return
+    fileInputRef.current?.click()
+  }
+
+  if (!open) return null
+
+  const showPreview = phase === 'preview' && previewUrl
+
+  return (
+    <div
+      className="live-log-modal-backdrop live-camera-backdrop"
+      onClick={(e) => { if (e.target === e.currentTarget && !busy) onClose() }}
+    >
+      <div className="live-log-modal live-camera-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="live-camera-header">
+          <h3>{t('logs.live_photo_btn')}</h3>
+          <button
+            type="button"
+            className="btn secondary live-camera-close"
+            onClick={onClose}
+            disabled={busy}
+            aria-label={t('logs.live_cancel')}
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          capture="environment"
+          className="live-camera-file-input"
+          onChange={(e) => void handleNativeFile(e)}
+        />
+
+        {cameraError && (
+          <p className="live-log-modal-hint auth-error">{cameraError}</p>
+        )}
+
+        {showPreview ? (
+          <div className="live-camera-preview-wrap">
+            <img
+              src={previewUrl}
+              alt=""
+              className="live-camera-preview live-camera-preview-still"
+            />
+          </div>
+        ) : cameraError ? (
+          <div className="live-camera-preview-wrap">
+            <p className="live-camera-loading">{cameraError}</p>
+          </div>
+        ) : phase === 'checking' ? (
+          <p className="live-camera-loading">{t('logs.live_photo_camera_starting')}</p>
+        ) : phase === 'native' ? (
+          <div className="live-camera-native-prompt">
+            <p className="live-log-modal-hint">{t('logs.live_photo_native_hint')}</p>
+            <button
+              type="button"
+              className="btn primary live-camera-open-native"
+              onClick={openNativePicker}
+              disabled={busy}
+            >
+              <Camera size={18} />
+              {t('logs.live_photo_open_camera_btn')}
+            </button>
+          </div>
+        ) : phase === 'live' ? (
+          <div className="live-camera-preview-wrap">
+            <video
+              ref={videoRef}
+              className="live-camera-preview"
+              playsInline
+              muted
+              autoPlay
+            />
+            {!ready && (
+              <p className="live-camera-loading">{t('logs.live_photo_camera_starting')}</p>
+            )}
+          </div>
+        ) : null}
+
+        {onCaptionChange && (
+          <div className="input-group live-camera-caption">
+            <label>{t('logs.photo_caption_label')}</label>
+            <input
+              type="text"
+              className="input-text"
+              placeholder={t('logs.photo_caption_placeholder')}
+              value={caption}
+              onChange={(e) => onCaptionChange(e.target.value)}
+              disabled={busy}
+            />
+          </div>
+        )}
+
+        <div className="live-log-modal-actions live-camera-actions">
+          <button type="button" className="btn secondary" onClick={onClose} disabled={busy}>
+            {t('logs.live_cancel')}
+          </button>
+
+          {showPreview ? (
+            <>
+              <button type="button" className="btn secondary" onClick={handleRetake} disabled={busy}>
+                {t('logs.live_photo_retake_btn')}
+              </button>
+              <button
+                type="button"
+                className="btn primary live-camera-shutter"
+                onClick={handleSave}
+                disabled={busy || !previewBlob}
+              >
+                <Camera size={18} />
+                {busy ? t('logs.photo_processing') : t('logs.live_photo_save_btn')}
+              </button>
+            </>
+          ) : phase === 'native' ? null : (
+            <button
+              type="button"
+              className="btn primary live-camera-shutter"
+              onClick={() => void handleCapture()}
+              disabled={busy || capturing || !ready || !!cameraError}
+            >
+              <Camera size={18} />
+              {capturing ? t('logs.photo_processing') : t('logs.live_photo_capture_btn')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,124 @@
+import { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Pencil, Trash2, X } from 'lucide-react'
+import type { LogEventPayload } from '../utils/logEntryPayload.js'
+import { isValidTimeHHMM } from '../utils/logEntryPayload.js'
+
+interface LiveEventSheetProps {
+  open: boolean
+  event: LogEventPayload | null
+  eventIndex: number | null
+  onClose: () => void
+  onSave: (index: number, patch: Partial<LogEventPayload>) => Promise<void>
+  onDelete: (index: number) => Promise<void>
+  onOpenEditor?: () => void
+  busy?: boolean
+}
+
+export default function LiveEventSheet({
+  open,
+  event,
+  eventIndex,
+  onClose,
+  onSave,
+  onDelete,
+  onOpenEditor,
+  busy = false
+}: LiveEventSheetProps) {
+  const { t } = useTranslation()
+  const timeRef = useRef<HTMLInputElement>(null)
+  const remarksRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    if (!open || !event) return
+    if (timeRef.current) timeRef.current.value = event.time || ''
+    if (remarksRef.current) remarksRef.current.value = event.remarks || ''
+  }, [open, event])
+
+  if (!open || !event || eventIndex === null) return null
+
+  const handleSave = async () => {
+    const time = timeRef.current?.value.trim() ?? ''
+    const remarks = remarksRef.current?.value ?? ''
+    if (!isValidTimeHHMM(time)) return
+    await onSave(eventIndex, { time, remarks })
+    onClose()
+  }
+
+  const handleDelete = async () => {
+    await onDelete(eventIndex)
+    onClose()
+  }
+
+  return (
+    <div
+      className="live-bottom-sheet-backdrop"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
+      role="presentation"
+    >
+      <div
+        className="live-bottom-sheet"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="live-event-sheet-title"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="live-bottom-sheet-handle" aria-hidden />
+        <div className="live-bottom-sheet-header">
+          <h3 id="live-event-sheet-title">{t('logs.live_edit_event')}</h3>
+          <button type="button" className="btn-icon" onClick={onClose} aria-label={t('logs.live_cancel')}>
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="live-event-sheet-form">
+          <label className="live-event-sheet-field">
+            <span>{t('logs.event_time')}</span>
+            <input
+              ref={timeRef}
+              type="text"
+              className="input-text"
+              inputMode="numeric"
+              placeholder="HH:MM"
+              maxLength={5}
+            />
+          </label>
+          <label className="live-event-sheet-field">
+            <span>{t('logs.event_remarks')}</span>
+            <textarea
+              ref={remarksRef}
+              className="input-text"
+              rows={3}
+            />
+          </label>
+        </div>
+
+        <div className="live-bottom-sheet-actions">
+          <button
+            type="button"
+            className="btn primary"
+            onClick={() => void handleSave()}
+            disabled={busy}
+          >
+            <Pencil size={16} />
+            {t('logs.save')}
+          </button>
+          <button
+            type="button"
+            className="btn secondary danger-text"
+            onClick={() => void handleDelete()}
+            disabled={busy}
+          >
+            <Trash2 size={16} />
+            {t('logs.live_delete_event')}
+          </button>
+          {onOpenEditor && (
+            <button type="button" className="btn secondary" onClick={onOpenEditor} disabled={busy}>
+              {t('logs.live_open_editor')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,162 @@
+import { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  Calendar,
+  Download,
+  FileText,
+  List,
+  Share2,
+  Trash2,
+  X
+} from 'lucide-react'
+
+interface LiveOverflowMenuProps {
+  open: boolean
+  onClose: () => void
+  onOpenAllDays: () => void
+  onOpenEditor: () => void
+  onDownloadCsv: () => void
+  onShareCsv: () => void
+  onDownloadPhotosZip?: () => void
+  onDownloadPdf: () => void
+  onDeleteEntry?: () => void
+  exporting?: boolean
+  canExportPhotosZip?: boolean
+  hasEntries?: boolean
+  entryId?: string | null
+}
+
+export default function LiveOverflowMenu({
+  open,
+  onClose,
+  onOpenAllDays,
+  onOpenEditor,
+  onDownloadCsv,
+  onShareCsv,
+  onDownloadPhotosZip,
+  onDownloadPdf,
+  onDeleteEntry,
+  exporting = false,
+  canExportPhotosZip = false,
+  hasEntries = true,
+  entryId
+}: LiveOverflowMenuProps) {
+  const { t } = useTranslation()
+  const firstBtnRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (open) firstBtnRef.current?.focus()
+  }, [open])
+
+  if (!open) return null
+
+  const disabled = exporting || !hasEntries
+
+  const run = (fn: () => void) => {
+    fn()
+    onClose()
+  }
+
+  return (
+    <div
+      className="live-bottom-sheet-backdrop"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
+      role="presentation"
+    >
+      <div
+        className="live-bottom-sheet live-overflow-sheet"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="live-overflow-title"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="live-bottom-sheet-handle" aria-hidden />
+        <div className="live-bottom-sheet-header">
+          <h3 id="live-overflow-title">{t('logs.more_actions')}</h3>
+          <button type="button" className="btn-icon" onClick={onClose} aria-label={t('logs.live_cancel')}>
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="live-overflow-menu-list">
+          <button
+            ref={firstBtnRef}
+            type="button"
+            className="live-overflow-menu-item"
+            onClick={() => run(onOpenAllDays)}
+          >
+            <List size={18} />
+            {t('logs.all_days')}
+          </button>
+
+          {entryId && (
+            <button
+              type="button"
+              className="live-overflow-menu-item"
+              onClick={() => run(onOpenEditor)}
+            >
+              <FileText size={18} />
+              {t('logs.live_open_editor')}
+            </button>
+          )}
+
+          <button
+            type="button"
+            className="live-overflow-menu-item"
+            onClick={() => run(onDownloadCsv)}
+            disabled={disabled}
+          >
+            <Download size={18} />
+            {exporting ? t('logs.exporting') : t('logs.export_csv')}
+          </button>
+
+          <button
+            type="button"
+            className="live-overflow-menu-item"
+            onClick={() => run(onShareCsv)}
+            disabled={disabled}
+          >
+            <Share2 size={18} />
+            {t('logs.share_csv')}
+          </button>
+
+          {canExportPhotosZip && onDownloadPhotosZip && (
+            <button
+              type="button"
+              className="live-overflow-menu-item"
+              onClick={() => run(onDownloadPhotosZip)}
+              disabled={disabled}
+            >
+              <Download size={18} />
+              {exporting ? t('logs.exporting_photos_zip') : t('logs.export_photos_zip')}
+            </button>
+          )}
+
+          {entryId && (
+            <button
+              type="button"
+              className="live-overflow-menu-item"
+              onClick={() => run(onDownloadPdf)}
+              disabled={exporting}
+            >
+              <Calendar size={18} />
+              {t('logs.export_pdf')}
+            </button>
+          )}
+
+          {onDeleteEntry && entryId && (
+            <button
+              type="button"
+              className="live-overflow-menu-item live-overflow-menu-item-danger"
+              onClick={() => run(onDeleteEntry)}
+              disabled={exporting}
+            >
+              <Trash2 size={18} />
+              {t('logs.delete_entry')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,379 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Mic, Square, X } from 'lucide-react'
+import {
+  assertVoiceMemoBlobSize,
+  formatVoiceDuration,
+  pickMediaRecorderMimeType,
+  VOICE_MEMO_MAX_DURATION_SEC
+} from '../utils/audioBlob.js'
+
+interface LiveVoiceCaptureProps {
+  open: boolean
+  busy?: boolean
+  caption?: string
+  onCaptionChange?: (value: string) => void
+  onClose: () => void
+  onSave: (blob: Blob, mimeType: string, durationSec: number) => void
+}
+
+type Phase = 'idle' | 'recording' | 'preview'
+
+export default function LiveVoiceCapture({
+  open,
+  busy = false,
+  caption = '',
+  onCaptionChange,
+  onClose,
+  onSave
+}: LiveVoiceCaptureProps) {
+  const { t } = useTranslation()
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+  const streamRef = useRef<MediaStream | null>(null)
+  const chunksRef = useRef<Blob[]>([])
+  const previewUrlRef = useRef<string | null>(null)
+  const startedAtRef = useRef<number>(0)
+  const timerRef = useRef<number | null>(null)
+
+  const [phase, setPhase] = useState<Phase>('idle')
+  const [micError, setMicError] = useState<string | null>(null)
+  const [elapsedSec, setElapsedSec] = useState(0)
+  const [previewBlob, setPreviewBlob] = useState<Blob | null>(null)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [previewMime, setPreviewMime] = useState('audio/webm')
+  const [previewDurationSec, setPreviewDurationSec] = useState(0)
+  const [saving, setSaving] = useState(false)
+  const log = useCallback((msg: string) => {
+    console.log(`[VoiceDebug] ${msg}`)
+  }, [])
+
+  const previewAudioRef = useRef<HTMLAudioElement | null>(null)
+
+  useEffect(() => {
+    const el = previewAudioRef.current
+    if (!el) {
+      log('previewAudioRef is null')
+      return
+    }
+
+    log('Preview audio player loaded. readyState=' + el.readyState + ', duration=' + el.duration + ', src=' + el.src)
+
+    const handleLoadedMetadata = () => {
+      log('loadedmetadata event fired. readyState=' + el.readyState + ', duration=' + el.duration)
+      if (el.duration === Infinity || isNaN(el.duration) || el.duration === 0) {
+        log('Duration correction hack triggered (duration=' + el.duration + '). Seeking to 1e10...')
+        el.currentTime = 1e10
+        const onTimeUpdate = () => {
+          log('timeupdate event. currentTime=' + el.currentTime + ', duration=' + el.duration)
+          el.currentTime = 0
+          el.removeEventListener('timeupdate', onTimeUpdate)
+          log('currentTime reset to 0. Final duration=' + el.duration)
+        }
+        el.addEventListener('timeupdate', onTimeUpdate)
+      } else {
+        log('Duration correction skipped (duration is valid)')
+      }
+    }
+
+    if (el.readyState >= 1) {
+      log('readyState >= 1. Executing hack immediately...')
+      handleLoadedMetadata()
+    } else {
+      log('readyState = 0. Adding loadedmetadata event listener...')
+      el.addEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+
+    log('Calling el.load() to force loading of the media resource...')
+    el.load()
+
+    return () => {
+      el.removeEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+  }, [previewUrl, log])
+
+  const stopStream = useCallback(() => {
+    for (const track of streamRef.current?.getTracks() ?? []) {
+      track.stop()
+    }
+    streamRef.current = null
+  }, [])
+
+  const clearPreview = useCallback(() => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current)
+      previewUrlRef.current = null
+    }
+    setPreviewUrl(null)
+    setPreviewBlob(null)
+  }, [])
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current != null) {
+      window.clearInterval(timerRef.current)
+      timerRef.current = null
+    }
+  }, [])
+
+  const resetAll = useCallback(() => {
+    if (mediaRecorderRef.current?.state === 'recording') {
+      mediaRecorderRef.current.stop()
+    }
+    mediaRecorderRef.current = null
+    chunksRef.current = []
+    clearTimer()
+    stopStream()
+    clearPreview()
+    setPhase('idle')
+    setMicError(null)
+    setElapsedSec(0)
+    setSaving(false)
+  }, [stopStream, clearPreview, clearTimer])
+
+  useEffect(() => {
+    if (!open) {
+      resetAll()
+    }
+  }, [open, resetAll])
+
+  useEffect(() => {
+    return () => {
+      resetAll()
+    }
+  }, [resetAll])
+
+  const finishRecording = useCallback((blob: Blob, mimeType: string, durationSec: number) => {
+    clearPreview()
+    const url = URL.createObjectURL(blob)
+    previewUrlRef.current = url
+    setPreviewBlob(blob)
+    setPreviewUrl(url)
+    setPreviewMime(mimeType)
+    setPreviewDurationSec(durationSec)
+    setPhase('preview')
+  }, [clearPreview])
+
+  const stopRecording = useCallback(() => {
+    const recorder = mediaRecorderRef.current
+    if (!recorder || recorder.state !== 'recording') return
+    recorder.stop()
+    clearTimer()
+  }, [clearTimer])
+
+  const startRecording = async () => {
+    setMicError(null)
+    chunksRef.current = []
+    log('startRecording flow triggered')
+    if (!navigator.mediaDevices?.getUserMedia) {
+      log('navigator.mediaDevices.getUserMedia is unavailable')
+      setMicError(t('logs.live_voice_mic_denied'))
+      return
+    }
+    try {
+      log('Requesting getUserMedia audio stream...')
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      streamRef.current = stream
+      log('Stream obtained successfully. active=' + stream.active)
+      stream.getTracks().forEach((track, i) => {
+        log(`Track ${i}: label="${track.label}" enabled=${track.enabled} readyState=${track.readyState} muted=${track.muted}`)
+      })
+
+      const mimeType = pickMediaRecorderMimeType()
+      log('MIME type candidates support check:')
+      const MIME_CANDIDATES = [
+        'audio/webm;codecs=opus',
+        'audio/webm',
+        'audio/mp4',
+        'audio/ogg;codecs=opus'
+      ]
+      MIME_CANDIDATES.forEach(mime => {
+        log(` - ${mime}: ${MediaRecorder.isTypeSupported(mime) ? 'SUPPORTED' : 'UNSUPPORTED'}`)
+      })
+      log('Selected MIME from picker: ' + mimeType)
+
+      const recorder = mimeType
+        ? new MediaRecorder(stream, { mimeType })
+        : new MediaRecorder(stream)
+      mediaRecorderRef.current = recorder
+      const resolvedMime = recorder.mimeType || mimeType || 'audio/webm'
+      log('MediaRecorder created. Resolved mime=' + resolvedMime)
+
+      recorder.ondataavailable = (ev) => {
+        log(`ondataavailable event: data size=${ev.data?.size} bytes`)
+        if (ev.data && ev.data.size > 0) {
+          chunksRef.current.push(ev.data)
+        }
+      }
+
+      recorder.onstop = () => {
+        const durationSec = Math.min(
+          VOICE_MEMO_MAX_DURATION_SEC,
+          Math.max(1, Math.round((Date.now() - startedAtRef.current) / 1000))
+        )
+        log(`onstop triggered. durationSec=${durationSec}. Wrapping in 50ms timeout...`)
+        setTimeout(() => {
+          log(`Creating Blob from ${chunksRef.current.length} chunks. Resolved mime=${resolvedMime}`)
+          const totalChunksSize = chunksRef.current.reduce((acc, chunk) => acc + chunk.size, 0)
+          log(`Total raw chunks size: ${totalChunksSize} bytes`)
+          const blob = new Blob(chunksRef.current, { type: resolvedMime })
+          chunksRef.current = []
+          stopStream()
+          log(`Blob finalized: size=${blob.size} bytes, type=${blob.type}`)
+          try {
+            assertVoiceMemoBlobSize(blob)
+            log('Blob size assertion passed. Calling finishRecording...')
+            finishRecording(blob, resolvedMime, durationSec)
+          } catch (err) {
+            log('Blob size assertion failed (too large)')
+            setMicError(t('logs.live_voice_too_large'))
+            setPhase('idle')
+          }
+        }, 50)
+      }
+
+      recorder.onerror = (ev) => {
+        log('MediaRecorder onerror triggered: ' + JSON.stringify(ev))
+        setMicError(t('logs.live_voice_record_failed'))
+        resetAll()
+      }
+
+      startedAtRef.current = Date.now()
+      log('Calling recorder.start()...')
+      recorder.start()
+      log('recorder.start() called. State=' + recorder.state)
+      setPhase('recording')
+      setElapsedSec(0)
+      timerRef.current = window.setInterval(() => {
+        const sec = Math.floor((Date.now() - startedAtRef.current) / 1000)
+        setElapsedSec(sec)
+        if (sec >= VOICE_MEMO_MAX_DURATION_SEC) {
+          log('Max duration reached. Stopping recording...')
+          stopRecording()
+        }
+      }, 250)
+    } catch (err: any) {
+      log('Error in startRecording try-catch block: ' + (err instanceof Error ? err.stack || err.message : String(err)))
+      setMicError(t('logs.live_voice_mic_denied'))
+      stopStream()
+    }
+  }
+
+  const handleSave = async () => {
+    if (!previewBlob || saving || busy) {
+      log('handleSave ignored. previewBlob=' + (previewBlob ? 'PRESENT' : 'NULL') + ' saving=' + saving + ' busy=' + busy)
+      return
+    }
+    log('handleSave triggered. Saving blob size=' + previewBlob.size + ' mime=' + previewMime + ' duration=' + previewDurationSec)
+    setSaving(true)
+    try {
+      log('Invoking onSave callback...')
+      await onSave(previewBlob, previewMime, previewDurationSec)
+      log('onSave callback successfully finished!')
+    } catch (err: any) {
+      log('Error during onSave execution: ' + (err instanceof Error ? err.stack || err.message : String(err)))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      className="live-log-modal-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget && !busy && !saving && phase !== 'recording') onClose()
+      }}
+    >
+      <div className="live-log-modal live-voice-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="live-voice-modal-header">
+          <h3>{t('logs.live_voice_btn')}</h3>
+          <button
+            type="button"
+            className="btn-icon"
+            onClick={onClose}
+            disabled={busy || saving || phase === 'recording'}
+            aria-label={t('logs.live_cancel')}
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {micError && <p className="live-log-modal-hint auth-error">{micError}</p>}
+
+        {phase === 'idle' && (
+          <>
+            <p className="live-log-modal-hint">{t('logs.live_voice_hint')}</p>
+            <button
+              type="button"
+              className="btn primary live-voice-record-btn"
+              onClick={() => void startRecording()}
+              disabled={busy || saving}
+            >
+              <Mic size={18} />
+              {t('logs.live_voice_record')}
+            </button>
+          </>
+        )}
+
+        {phase === 'recording' && (
+          <>
+            <p className="live-voice-recording-indicator" role="status" aria-live="polite">
+              <span className="live-voice-recording-dot" aria-hidden />
+              {t('logs.live_voice_recording', { time: formatVoiceDuration(elapsedSec) })}
+            </p>
+            <button
+              type="button"
+              className="btn primary live-voice-stop-btn"
+              onClick={stopRecording}
+            >
+              <Square size={16} fill="currentColor" />
+              {t('logs.live_voice_stop')}
+            </button>
+          </>
+        )}
+
+        {phase === 'preview' && previewUrl && (
+          <>
+            <audio ref={previewAudioRef} className="voice-memo-player" controls src={previewUrl} preload="auto" />
+            {onCaptionChange && (
+              <label className="live-voice-caption-field">
+                <span>{t('logs.live_voice_caption_label')}</span>
+                <input
+                  type="text"
+                  className="input-text"
+                  value={caption}
+                  onChange={(e) => onCaptionChange(e.target.value)}
+                  placeholder={t('logs.live_voice_caption_placeholder')}
+                  disabled={busy || saving}
+                />
+              </label>
+            )}
+            <div className="live-log-modal-actions">
+              <button
+                type="button"
+                className="btn secondary"
+                onClick={() => {
+                  clearPreview()
+                  setPhase('idle')
+                }}
+                disabled={busy || saving}
+              >
+                {t('logs.live_voice_retake')}
+              </button>
+              <button
+                type="button"
+                className="btn primary"
+                onClick={() => void handleSave()}
+                disabled={busy || saving}
+              >
+                {saving ? t('logs.live_voice_saving') : t('logs.live_voice_save')}
+              </button>
+            </div>
+          </>
+        )}
+
+
+      </div>
+    </div>
+  )
+}
@@ -1,21 +1,39 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { db } from '../services/db.js'
 import { getActiveMasterKey } from '../services/auth.js'
 import { getLogbookKey } from '../services/logbookKeys.js'
-import { decryptJson, encryptJson } from '../services/crypto.js'
+import { encryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
-import { downloadCsv, shareCsv } from '../services/csvExport.js'
-import { downloadLogbookPagePdf } from '../services/pdfExport.js'
-import LogEntryEditor from './LogEntryEditor.tsx'
-import { useDialog } from './ModalDialog.tsx'
-import { FileText, Plus, Trash2, ChevronRight, Calendar, Download, Share2 } from 'lucide-react'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { getErrorMessage } from '../utils/errors.js'
+import { findTodayEntryId, pruneEmptyTodayDuplicates, tryDecryptEntryPayload } from '../services/quickEventLog.js'
+import { localDateString } from '../utils/logEntryPayload.js'
 import {
-  carryOverTankLevelsFromPreviousDay,
+  getLogsViewModePreference,
+  setLogsViewModePreference,
+  getActiveUserId
+} from '../services/userPreferences.js'
+import { useLogExport } from '../hooks/useLogExport.js'
+import LogEntryEditor from './LogEntryEditor.tsx'
+import LiveLogView, { type LiveEntrySummary } from './LiveLogView.tsx'
+import EntrySkipperSignBadge from './EntrySkipperSignBadge.tsx'
+import { useDialog } from './ModalDialog.tsx'
+import { getSkipperSignStatus, type SkipperSignStatus } from '../utils/signatures.js'
+import {
+  buildEntryListCache,
+  entryListItemFromLocal,
+  putEntryRecord
+} from '../utils/entryListCache.js'
+import { forEachInBatches } from '../utils/yieldToMain.js'
+import { FileText, Plus, Trash2, ChevronRight, Calendar, Download, Share2, Radio, ChevronLeft } from 'lucide-react'
+import {
+  carryOverFromPreviousDay,
  compareTravelDaysChronological,
  emptyTankLevels,
  formatTankLiters,
  getNextTravelDayNumber,
+  hasCarryOverFromPreviousDay,
  type LogEntryTankSource,
  type TravelDaySortable
 } from '../utils/logEntryTankLevels.js'
@@ -26,9 +44,15 @@ interface LogEntriesListProps {
  preloadedYacht?: any
  preloadedEntries?: any[]
  preloadedPhotos?: any[]
+  preloadedVoiceMemos?: import('./VoiceMemoPlayer.tsx').PreloadedVoiceMemo[]
  preloadedGpsTracks?: any[]
+  controlledSelectedEntryId?: string | null
+  onSelectedEntryIdChange?: (id: string | null) => void
+  highlightEntryId?: string | null
 }

+type LogsViewMode = 'list' | 'live'
+
 interface DecryptedEntryItem {
  id: string
  date: string
@@ -36,6 +60,7 @@ interface DecryptedEntryItem {
  departure: string
  destination: string
  updatedAt: string
+  skipperSignStatus: SkipperSignStatus
 }

 export default function LogEntriesList({
@@ -44,35 +69,78 @@ export default function LogEntriesList({
  preloadedYacht,
  preloadedEntries,
  preloadedPhotos,
-  preloadedGpsTracks
+  preloadedVoiceMemos,
+  preloadedGpsTracks,
+  controlledSelectedEntryId,
+  onSelectedEntryIdChange,
+  highlightEntryId
 }: LogEntriesListProps) {
  const { t } = useTranslation()
  const { showConfirm } = useDialog()
  const [entries, setEntries] = useState<DecryptedEntryItem[]>([])
-  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [exporting, setExporting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!selectedEntryId) {
-      loadEntries()
+  const [internalSelectedEntryId, setInternalSelectedEntryId] = useState<string | null>(null)
+  const isEntrySelectionControlled = onSelectedEntryIdChange !== undefined
+  const selectedEntryId = isEntrySelectionControlled
+    ? (controlledSelectedEntryId ?? null)
+    : internalSelectedEntryId
+  const setSelectedEntryId = (entryId: string | null) => {
+    if (isEntrySelectionControlled) {
+      onSelectedEntryIdChange?.(entryId)
+    } else {
+      setInternalSelectedEntryId(entryId)
    }
-  }, [logbookId, selectedEntryId])
+  }
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [viewMode, setViewModeState] = useState<LogsViewMode>(() =>
+    readOnly ? 'list' : getLogsViewModePreference(getActiveUserId())
+  )
+  const [liveSelectedEntryId, setLiveSelectedEntryId] = useState<string | null>(null)
+  const [todayEntryId, setTodayEntryId] = useState<string | null>(null)
+  const [returnToLiveAfterEditor, setReturnToLiveAfterEditor] = useState(false)
+  const prevSelectedEntryIdRef = useRef<string | null | undefined>(undefined)

-  const loadEntries = async () => {
+  const setViewMode = useCallback((mode: LogsViewMode) => {
+    setViewModeState(mode)
+    if (!readOnly) {
+      const userId = getActiveUserId()
+      if (userId) setLogsViewModePreference(userId, mode)
+    }
+  }, [readOnly])
+
+  const {
+    exporting: exportBusy,
+    error: exportError,
+    handleDownloadCsv,
+    handleShareCsv,
+    handleDownloadPdf,
+    handleDownloadPhotosZip,
+    canExportPhotosZip
+  } = useLogExport({
+    logbookId,
+    entries,
+    readOnly,
+    preloadedYacht,
+    preloadedEntries
+  })
+
+  const loadEntries = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      if (readOnly && preloadedEntries) {
-        const list = preloadedEntries.map((entry: any) => ({
-          id: entry.payloadId || entry.id,
-          date: entry.date || '',
-          dayOfTravel: entry.dayOfTravel || '',
-          departure: entry.departure || '',
-          destination: entry.destination || '',
-          updatedAt: entry.updatedAt || new Date().toISOString()
-        }))
+        const list: DecryptedEntryItem[] = []
+        for (const entry of preloadedEntries) {
+          list.push({
+            id: entry.payloadId || entry.id,
+            date: entry.date || '',
+            dayOfTravel: entry.dayOfTravel || '',
+            departure: entry.departure || '',
+            destination: entry.destination || '',
+            updatedAt: entry.updatedAt || new Date().toISOString(),
+            skipperSignStatus: await getSkipperSignStatus(entry)
+          })
+        }

        list.sort((a, b) => {
          const dateCompare = new Date(b.date).getTime() - new Date(a.date).getTime()
@@ -87,24 +155,41 @@ export default function LogEntriesList({
      const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
      if (!masterKey) throw new Error('Encryption key not found. Please log in.')

+      const todayId = await findTodayEntryId(logbookId)
+      setTodayEntryId(todayId)
+      if (todayId) {
+        await pruneEmptyTodayDuplicates(logbookId, todayId)
+      }
+
      const local = await db.entries.where({ logbookId }).toArray()
-      
+
      const list: DecryptedEntryItem[] = []
-      
+      const needsDecrypt: typeof local = []
+
      for (const entry of local) {
-        const decrypted = await decryptJson(entry.encryptedData, entry.iv, entry.tag, masterKey)
-        if (decrypted) {
-          list.push({
-            id: entry.payloadId,
-            date: decrypted.date || '',
-            dayOfTravel: decrypted.dayOfTravel || '',
-            departure: decrypted.departure || '',
-            destination: decrypted.destination || '',
-            updatedAt: entry.updatedAt
-          })
+        const cached = entryListItemFromLocal(entry)
+        if (cached) {
+          list.push(cached)
+        } else {
+          needsDecrypt.push(entry)
        }
      }

+      await forEachInBatches(needsDecrypt, 8, async (entry) => {
+        const decrypted = await tryDecryptEntryPayload(entry, masterKey)
+        if (!decrypted) return
+
+        const listCache = await buildEntryListCache(decrypted as Record<string, unknown>)
+        list.push({
+          id: entry.payloadId,
+          ...listCache,
+          updatedAt: entry.updatedAt
+        })
+        void db.entries.update(entry.payloadId, { listCache }).catch((err) => {
+          console.warn('Failed to persist entry list cache:', err)
+        })
+      })
+
      // Sort chronological descending (by date, or dayOfTravel numerical)
      list.sort((a, b) => {
        const dateCompare = new Date(b.date).getTime() - new Date(a.date).getTime()
@@ -115,76 +200,25 @@ export default function LogEntriesList({
      setEntries(list)
    } catch (err: any) {
      console.error('Failed to load log entries:', err)
-      setError(err.message || 'Decryption failed. Could not load journal list.')
+      setError(getErrorMessage(err, t('errors.load_failed')))
    } finally {
      setLoading(false)
    }
-  }
+  }, [logbookId, readOnly, preloadedEntries])

-  const handleDownloadCsv = async () => {
-    setExporting(true)
-    setError(null)
-    try {
-      const title = preloadedYacht?.name || localStorage.getItem('active_logbook_title') || 'Logbook'
-      if (readOnly && preloadedEntries && preloadedYacht) {
-        await downloadCsv(logbookId, title, { yacht: preloadedYacht, entries: preloadedEntries })
-      } else {
-        await downloadCsv(logbookId, title)
-      }
-    } catch (err: any) {
-      console.error('Failed to download CSV:', err)
-      setError(err.message || 'Failed to generate CSV export.')
-    } finally {
-      setExporting(false)
-    }
-  }
+  useEffect(() => {
+    loadEntries()
+  }, [loadEntries])

-  const handleShareCsv = async () => {
-    setExporting(true)
-    setError(null)
-    try {
-      const title = preloadedYacht?.name || localStorage.getItem('active_logbook_title') || 'Logbook'
-      if (readOnly && preloadedEntries && preloadedYacht) {
-        await shareCsv(logbookId, title, { yacht: preloadedYacht, entries: preloadedEntries })
-      } else {
-        await shareCsv(logbookId, title)
-      }
-    } catch (err: any) {
-      if (err.message === 'share_unsupported') {
-        const title = preloadedYacht?.name || localStorage.getItem('active_logbook_title') || 'Logbook'
-        if (readOnly && preloadedEntries && preloadedYacht) {
-          await downloadCsv(logbookId, title, { yacht: preloadedYacht, entries: preloadedEntries })
-        } else {
-          await downloadCsv(logbookId, title)
-        }
-        setError(t('logs.share_unsupported'))
-      } else {
-        console.error('Failed to share CSV:', err)
-        setError(err.message || 'Failed to share CSV export.')
-      }
-    } finally {
-      setExporting(false)
-    }
-  }
+  useEffect(() => {
+    if (viewMode === 'live') return
+    const prevSelectedEntryId = prevSelectedEntryIdRef.current
+    prevSelectedEntryIdRef.current = selectedEntryId

-  const handleDownloadPdf = async (entryId: string, date: string, e: React.MouseEvent) => {
-    e.stopPropagation()
-    setExporting(true)
-    setError(null)
-    try {
-      if (readOnly && preloadedEntries && preloadedYacht) {
-        const fullEntry = preloadedEntries.find(entry => (entry.payloadId || entry.id) === entryId)
-        await downloadLogbookPagePdf(logbookId, entryId, date, { yacht: preloadedYacht, entry: fullEntry })
-      } else {
-        await downloadLogbookPagePdf(logbookId, entryId, date)
-      }
-    } catch (err: any) {
-      console.error('Failed to download PDF:', err)
-      setError(err.message || 'Failed to generate PDF export.')
-    } finally {
-      setExporting(false)
+    if (prevSelectedEntryId !== undefined && prevSelectedEntryId !== null && selectedEntryId === null) {
+      loadEntries()
    }
-  }
+  }, [selectedEntryId, loadEntries, viewMode])

  const handleCreate = async () => {
    if (readOnly) return
@@ -193,23 +227,31 @@ export default function LogEntriesList({
      const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
      if (!masterKey) throw new Error('Encryption key not found. Please log in.')

+      const existingTodayId = await findTodayEntryId(logbookId)
+      if (existingTodayId) {
+        setSelectedEntryId(existingTodayId)
+        return
+      }
+
      const localEntries = await db.entries.where({ logbookId }).toArray()
      const decryptedEntries: Array<LogEntryTankSource & TravelDaySortable> = []

      for (const entry of localEntries) {
-        const decrypted = await decryptJson(entry.encryptedData, entry.iv, entry.tag, masterKey)
+        const decrypted = await tryDecryptEntryPayload(entry, masterKey)
        if (decrypted) decryptedEntries.push(decrypted as LogEntryTankSource & TravelDaySortable)
      }

      decryptedEntries.sort(compareTravelDaysChronological)
      const previousEntry = decryptedEntries.at(-1) ?? null
-      let { freshwater, fuel } = carryOverTankLevelsFromPreviousDay(previousEntry)
+      let { freshwater, fuel, greywaterLevel, departure } = carryOverFromPreviousDay(previousEntry)

-      if (previousEntry && (freshwater.morning > 0 || fuel.morning > 0)) {
+      if (previousEntry && hasCarryOverFromPreviousDay({ freshwater, fuel, greywaterLevel, departure })) {
        const confirmed = await showConfirm(
          t('logs.carry_over_tanks_confirm', {
+            departure: departure || '—',
            fw: formatTankLiters(freshwater.morning),
-            fuel: formatTankLiters(fuel.morning)
+            fuel: formatTankLiters(fuel.morning),
+            greywater: formatTankLiters(greywaterLevel)
          }),
          t('logs.carry_over_tanks_title'),
          t('logs.carry_over_tanks_yes'),
@@ -218,6 +260,8 @@ export default function LogEntriesList({
        if (!confirmed) {
          freshwater = emptyTankLevels()
          fuel = emptyTankLevels()
+          greywaterLevel = 0
+          departure = ''
        }
      }

@@ -225,15 +269,25 @@ export default function LogEntriesList({

      const localId = window.crypto.randomUUID()
      const nowStr = new Date().toISOString()
-      const todayStr = nowStr.substring(0, 10)
+      const todayStr = localDateString()
+
+      const { loadDefaultEntryCrewForNewDay } = await import('./EntryCrewSection.js')
+      const entryCrew = await loadDefaultEntryCrewForNewDay(
+        logbookId,
+        previousEntry as Record<string, unknown> | null
+      )

      const initialPayload = {
        date: todayStr,
        dayOfTravel: getNextTravelDayNumber(decryptedEntries),
-        departure: '',
+        departure,
        destination: '',
        freshwater,
        fuel,
+        ...(greywaterLevel > 0 ? { greywater: { level: greywaterLevel } } : {}),
+        selectedSkipperId: entryCrew.selectedSkipperId,
+        selectedCrewIds: entryCrew.selectedCrewIds,
+        crewSnapshotsById: entryCrew.crewSnapshotsById,
        signSkipper: '',
        signCrew: '',
        events: []
@@ -242,14 +296,17 @@ export default function LogEntriesList({
      const encrypted = await encryptJson(initialPayload, masterKey)

      // Save locally
-      await db.entries.put({
-        payloadId: localId,
-        logbookId,
-        encryptedData: encrypted.ciphertext,
-        iv: encrypted.iv,
-        tag: encrypted.tag,
-        updatedAt: nowStr
-      })
+      await putEntryRecord(
+        {
+          payloadId: localId,
+          logbookId,
+          encryptedData: encrypted.ciphertext,
+          iv: encrypted.iv,
+          tag: encrypted.tag,
+          updatedAt: nowStr
+        },
+        initialPayload
+      )

      // Queue for background sync
      await db.syncQueue.put({
@@ -263,26 +320,23 @@ export default function LogEntriesList({

      // Open immediately in details editor
      setSelectedEntryId(localId)
+      trackPlausibleEvent(PlausibleEvents.TRAVEL_DAY_CREATED)
      syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
    } catch (err: any) {
      console.error('Failed to create entry:', err)
-      setError(err.message || 'Failed to create new log entry.')
+      setError(getErrorMessage(err, t('errors.save_failed')))
    } finally {
      setLoading(false)
    }
  }

-  const handleDelete = async (entryId: string, e: React.MouseEvent) => {
-    e.stopPropagation()
+  const handleDeleteEntry = async (entryId: string) => {
    if (readOnly) return
-    
    if (await showConfirm(t('logs.delete_confirm'), t('logs.delete_entry'), t('logs.confirm_yes'), t('logs.confirm_no'))) {
      setError(null)
      try {
        const now = new Date().toISOString()
-        
        await db.entries.delete(entryId)
-        
        await db.syncQueue.put({
          action: 'delete',
          type: 'entry',
@@ -291,30 +345,85 @@ export default function LogEntriesList({
          data: '',
          updatedAt: now
        })
-
        setEntries((prev) => prev.filter((item) => item.id !== entryId))
+        if (liveSelectedEntryId === entryId) {
+          setLiveSelectedEntryId(null)
+        }
        syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
-      } catch (err: any) {
+      } catch (err: unknown) {
        console.error('Failed to delete log entry:', err)
-        setError(err.message || 'Failed to delete log entry.')
+        setError(getErrorMessage(err, t('errors.delete_failed')))
      }
    }
  }

+  const handleDelete = async (entryId: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    await handleDeleteEntry(entryId)
+  }
+
+  const entrySummaries: LiveEntrySummary[] = entries.map((e) => ({
+    id: e.id,
+    date: e.date,
+    dayOfTravel: e.dayOfTravel,
+    departure: e.departure,
+    destination: e.destination
+  }))
+
+  const combinedError = error || exportError
+
  if (selectedEntryId) {
    return (
      <LogEntryEditor
        entryId={selectedEntryId}
        logbookId={logbookId}
-        onBack={() => setSelectedEntryId(null)}
+        onBack={() => {
+          setSelectedEntryId(null)
+          if (returnToLiveAfterEditor) {
+            setViewMode('live')
+            setReturnToLiveAfterEditor(false)
+          }
+        }}
        readOnly={readOnly}
        preloadedEntry={preloadedEntries?.find(entry => (entry.payloadId || entry.id) === selectedEntryId)}
        preloadedPhotos={preloadedPhotos}
+        preloadedVoiceMemos={preloadedVoiceMemos}
        preloadedTrack={preloadedGpsTracks?.find(track => track.entryId === selectedEntryId)}
      />
    )
  }

+  if (viewMode === 'live' && !readOnly) {
+    return (
+      <>
+        {combinedError && <div className="auth-error mb-4" style={{ margin: '0 0 12px' }}>{combinedError}</div>}
+        <LiveLogView
+          logbookId={logbookId}
+          selectedEntryId={liveSelectedEntryId}
+          entrySummaries={entrySummaries}
+          todayEntryId={todayEntryId}
+          onEntryChange={setLiveSelectedEntryId}
+          onOpenEditor={(entryId) => {
+            setReturnToLiveAfterEditor(true)
+            setSelectedEntryId(entryId)
+          }}
+          onOpenAllDays={() => {
+            setViewMode('list')
+            void loadEntries()
+          }}
+          onDeleteEntry={handleDeleteEntry}
+          onDownloadCsv={() => void handleDownloadCsv()}
+          onShareCsv={() => void handleShareCsv()}
+          onDownloadPhotosZip={() => void handleDownloadPhotosZip()}
+          onDownloadPdf={(entryId, date) => void handleDownloadPdf(entryId, date)}
+          exporting={exportBusy}
+          canExportPhotosZip={canExportPhotosZip}
+          hasLogbookEntries={entries.length > 0}
+        />
+      </>
+    )
+  }
+
  if (loading) {
    return (
      <div className="tab-placeholder">
@@ -324,42 +433,98 @@ export default function LogEntriesList({
    )
  }

+  const tourFirstEntryId =
+    highlightEntryId && entries.some((e) => e.id === highlightEntryId)
+      ? highlightEntryId
+      : entries[0]?.id ?? null
+
  return (
-    <div className="form-card">
+    <div className="logs-journal">
      <div className="section-title-bar mb-6">
        <div className="form-header" style={{ margin: 0 }}>
          <Calendar size={24} className="form-icon" />
          <h2>{t('logs.title')}</h2>
        </div>
-        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-          <button className="btn secondary" onClick={handleDownloadCsv} disabled={loading || exporting || entries.length === 0} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.export_csv')}>
+        <div className="section-toolbar">
+          {!readOnly && (
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={() => setViewMode('live')}
+              style={{ width: 'auto', padding: '8px 16px' }}
+              title={t('logs.live_mode')}
+            >
+              <ChevronLeft size={16} />
+              <Radio size={16} />
+              <span className="hide-mobile">{t('logs.back_to_live')}</span>
+            </button>
+          )}
+
+          <button className="btn secondary" onClick={() => void handleDownloadCsv()} disabled={loading || exportBusy || entries.length === 0} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.export_csv')}>
            <Download size={16} />
-            <span className="hide-mobile">{exporting ? t('logs.exporting') : t('logs.export_csv')}</span>
+            <span className="hide-mobile">{exportBusy ? t('logs.exporting') : t('logs.export_csv')}</span>
          </button>
          
-          <button className="btn secondary" onClick={handleShareCsv} disabled={loading || exporting || entries.length === 0} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.share_csv')}>
+          <button className="btn secondary" onClick={() => void handleShareCsv()} disabled={loading || exportBusy || entries.length === 0} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.share_csv')}>
            <Share2 size={16} />
            <span className="hide-mobile">{t('logs.share_csv')}</span>
          </button>

+          {canExportPhotosZip && (
+            <button
+              className="btn secondary"
+              onClick={() => void handleDownloadPhotosZip()}
+              disabled={loading || exportBusy || entries.length === 0}
+              style={{ width: 'auto', padding: '8px 16px' }}
+              title={t('logs.export_photos_zip')}
+            >
+              <Download size={16} />
+              <span className="hide-mobile">
+                {exportBusy ? t('logs.exporting_photos_zip') : t('logs.export_photos_zip')}
+              </span>
+            </button>
+          )}
+
          {!readOnly && (
-            <button className="btn primary" onClick={handleCreate} disabled={loading || exporting} style={{ width: 'auto', padding: '8px 16px' }}>
+            <button className="btn primary" onClick={handleCreate} disabled={loading || exportBusy} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.new_entry')}>
              <Plus size={16} />
-              {t('logs.new_entry')}
+              <span className="hide-mobile">{t('logs.new_entry')}</span>
            </button>
          )}
        </div>
      </div>

-      {error && <div className="auth-error mb-4">{error}</div>}
+      {combinedError && <div className="auth-error mb-4">{combinedError}</div>}

      {entries.length === 0 ? (
        <div className="dashboard-status-msg">{t('logs.no_entries')}</div>
      ) : (
-        <div className="logbooks-grid">
+        <div className="logbooks-grid" data-tour="entry-list">
          {entries.map((item) => (
-            <div key={item.id} className="logbook-card glass" onClick={() => setSelectedEntryId(item.id)}>
-              <div className="card-icon">
+            <div
+              key={item.id}
+              className="logbook-card glass"
+              data-tour={tourFirstEntryId === item.id ? 'entry-first' : undefined}
+            >
+              <button
+                type="button"
+                className="logbook-card-select"
+                onClick={() => {
+                  if (readOnly) {
+                    setSelectedEntryId(item.id)
+                  } else {
+                    setLiveSelectedEntryId(item.id)
+                    setViewMode('live')
+                  }
+                }}
+                aria-label={
+                  item.departure && item.destination
+                    ? `${item.departure} → ${item.destination}, ${t('logs.travel_day_number', { number: item.dayOfTravel })}`
+                    : `${t('logs.new_entry')}, ${t('logs.travel_day_number', { number: item.dayOfTravel })}`
+                }
+              />
+
+              <div className="card-icon" aria-hidden>
                <FileText size={24} />
              </div>

@@ -371,25 +536,26 @@ export default function LogEntriesList({
                </h3>
                <div className="card-meta">
                  <span className="sync-badge synced">
-                    {t('logs.day_of_travel')} {item.dayOfTravel}
+                    {t('logs.travel_day_number', { number: item.dayOfTravel })}
                  </span>
+                  <EntrySkipperSignBadge status={item.skipperSignStatus} />
                  <span className="date-badge">
                    {new Date(item.date).toLocaleDateString()}
                  </span>
                </div>
              </div>

-              <button className="btn-pdf" onClick={(e) => handleDownloadPdf(item.id, item.date, e)} title={t('logs.export_pdf')} disabled={exporting}>
-                <Download size={18} />
-              </button>
-
-              {!readOnly && (
-                <button className="btn-delete" onClick={(e) => handleDelete(item.id, e)} title={t('logs.delete_entry')}>
-                  <Trash2 size={18} />
+              <div className="logbook-card-right-group">
+                <button className="btn-pdf" onClick={(e) => { e.stopPropagation(); void handleDownloadPdf(item.id, item.date) }} title={t('logs.export_pdf')} disabled={exportBusy}>
+                  <Download size={18} />
                </button>
-              )}
-              
-              <ChevronRight size={18} style={{ color: '#475569', marginLeft: 'auto' }} />
+                {!readOnly && (
+                  <button className="btn-delete" onClick={(e) => handleDelete(item.id, e)} title={t('logs.delete_entry')}>
+                    <Trash2 size={18} />
+                  </button>
+                )}
+                <ChevronRight size={18} className="logbook-card-chevron" aria-hidden />
+              </div>
            </div>
          ))}
        </div>
@@ -0,0 +1,188 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Archive, Download, Check, AlertTriangle } from 'lucide-react'
+import {
+  downloadBackupBlob,
+  exportLogbookBackup
+} from '../services/logbookBackup.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+interface LogbookBackupPanelProps {
+  logbookId: string
+}
+
+function mapBackupError(code: string, t: (key: string) => string): string {
+  switch (code) {
+    case 'BACKUP_PASSPHRASE_TOO_SHORT':
+      return t('settings.backup_passphrase_short')
+    case 'BACKUP_NOT_OWNER':
+      return t('settings.backup_not_owner')
+    case 'BACKUP_INVALID_JSON':
+      return t('settings.backup_invalid_json')
+    case 'BACKUP_INVALID_ARCHIVE':
+      return t('settings.backup_invalid_archive')
+    case 'BACKUP_VERSION_UNSUPPORTED':
+      return t('settings.backup_version_unsupported')
+    case 'BACKUP_WRONG_PASSPHRASE':
+      return t('settings.backup_wrong_passphrase')
+    case 'BACKUP_INVALID_FORMAT':
+      return t('settings.backup_invalid_format')
+    case 'BACKUP_NOT_AUTHENTICATED':
+      return t('settings.backup_not_authenticated')
+    case 'BACKUP_ID_CONFLICT':
+      return t('settings.backup_id_conflict')
+    default:
+      if (code.includes('decrypt') || code.includes('operation')) {
+        return t('settings.backup_wrong_passphrase')
+      }
+      return code
+  }
+}
+
+export default function LogbookBackupPanel({ logbookId }: LogbookBackupPanelProps) {
+  const { t } = useTranslation()
+
+  const [exportPassphrase, setExportPassphrase] = useState('')
+  const [exportConfirm, setExportConfirm] = useState('')
+  const [exporting, setExporting] = useState(false)
+  const [exportProgress, setExportProgress] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+
+  const exportPassphrasesMatch =
+    exportPassphrase.length >= 8 && exportPassphrase === exportConfirm
+
+  const handleExportSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await handleExport()
+  }
+
+  const handleExport = async () => {
+    setError(null)
+    setSuccess(null)
+
+    if (exportPassphrase.length < 8) {
+      setError(t('settings.backup_passphrase_short'))
+      return
+    }
+    if (exportPassphrase !== exportConfirm) {
+      setError(t('settings.backup_passphrase_mismatch'))
+      return
+    }
+
+    setExporting(true)
+    setExportProgress(null)
+    try {
+      const { blob, filename, manifest } = await exportLogbookBackup(logbookId, exportPassphrase, {
+        onProgress: (p) => {
+          if (p.phase === 'pack') {
+            setExportProgress(
+              t('settings.backup_export_progress', {
+                current: p.current,
+                total: p.total
+              })
+            )
+          }
+        }
+      })
+      downloadBackupBlob(blob, filename)
+      setSuccess(t('settings.backup_export_success', { count: manifest.counts.entries }))
+      setExportPassphrase('')
+      setExportConfirm('')
+      trackPlausibleEvent(PlausibleEvents.BACKUP_EXPORTED, {
+        entries: manifest.counts.entries,
+        photos: manifest.counts.photos,
+        voiceMemos: manifest.counts.voiceMemos,
+        bytes: manifest.totalUncompressedBytes
+      })
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(mapBackupError(message, t))
+    } finally {
+      setExporting(false)
+      setExportProgress(null)
+    }
+  }
+
+  return (
+    <div className="member-editor-card glass mt-6 backup-panel" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '24px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+        <Archive size={20} style={{ color: '#38bdf8' }} />
+        <h3 style={{ margin: 0, color: '#38bdf8', fontSize: '16px' }}>
+          {t('settings.backup_title')}
+        </h3>
+      </div>
+
+      <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 20px 0' }}>
+        {t('settings.backup_desc')}
+      </p>
+
+      {error && (
+        <div className="auth-error mb-4" role="alert">
+          <AlertTriangle size={16} style={{ display: 'inline', marginRight: 6, verticalAlign: 'text-bottom' }} />
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="success-toast mb-4">
+          <Check size={16} />
+          <span>{success}</span>
+        </div>
+      )}
+
+      <section className="backup-section" aria-labelledby="backup-export-heading">
+        <h4 id="backup-export-heading" className="backup-section-title">
+          <Download size={16} aria-hidden="true" />
+          {t('settings.backup_export_title')}
+        </h4>
+        <p className="text-muted backup-section-desc">{t('settings.backup_export_desc')}</p>
+
+        <form onSubmit={handleExportSubmit} className="backup-export-form">
+          <div className="input-group">
+            <label htmlFor="backup-export-passphrase">{t('settings.backup_passphrase')}</label>
+            <input
+              id="backup-export-passphrase"
+              name="backup-export-passphrase"
+              type="password"
+              className="input-text"
+              value={exportPassphrase}
+              onChange={(e) => setExportPassphrase(e.target.value)}
+              placeholder={t('settings.backup_passphrase_placeholder')}
+              autoComplete="new-password"
+              disabled={exporting}
+              required
+            />
+          </div>
+          <div className="input-group">
+            <label htmlFor="backup-export-confirm">{t('settings.backup_passphrase_confirm')}</label>
+            <input
+              id="backup-export-confirm"
+              name="backup-export-confirm"
+              type="password"
+              className="input-text"
+              value={exportConfirm}
+              onChange={(e) => setExportConfirm(e.target.value)}
+              autoComplete="new-password"
+              disabled={exporting}
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            className="btn primary"
+            disabled={exporting || !exportPassphrasesMatch}
+          >
+            <Download size={16} />
+            {exporting ? t('settings.backup_exporting') : t('settings.backup_export_btn')}
+          </button>
+          {exportProgress && (
+            <p className="text-muted backup-export-progress" role="status">
+              {exportProgress}
+            </p>
+          )}
+        </form>
+      </section>
+    </div>
+  )
+}
@@ -0,0 +1,224 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Users, User, Save, Check } from 'lucide-react'
+import type { LogbookCrewSelectionData, PersonSnapshot } from '../types/person.js'
+import type { DecryptedPerson } from '../services/personPool.js'
+import { loadPersonPool, filterSkippers, filterCrew } from '../services/personPool.js'
+import { loadLogbookCrewSelection, saveLogbookCrewSelectionFromIds } from '../services/logbookCrewSelection.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+export interface LogbookCrewPickerProps {
+  logbookId: string
+  readOnly?: boolean
+  /** Demo / share: in-memory pool */
+  preloadedPool?: Array<{ payloadId: string; data: DecryptedPerson['data'] }>
+  preloadedSelection?: LogbookCrewSelectionData
+  /** Shared logbook: only people from selection snapshots */
+  selectionOnly?: boolean
+}
+
+function snapshotsToPoolList(
+  selection: LogbookCrewSelectionData
+): Array<{ payloadId: string; data: DecryptedPerson['data'] }> {
+  return Object.values(selection.snapshotsById).map((snap) => ({
+    payloadId: snap.id,
+    data: {
+      name: snap.name,
+      address: snap.address,
+      birthDate: snap.birthDate,
+      phone: snap.phone,
+      nationality: snap.nationality,
+      passportNumber: snap.passportNumber,
+      bloodType: snap.bloodType,
+      allergies: snap.allergies,
+      diseases: snap.diseases,
+      role: snap.role,
+      photo: snap.photo
+    }
+  }))
+}
+
+export default function LogbookCrewPicker({
+  logbookId,
+  readOnly = false,
+  preloadedPool,
+  preloadedSelection,
+  selectionOnly = false
+}: LogbookCrewPickerProps) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(!preloadedSelection)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [pool, setPool] = useState<DecryptedPerson[]>([])
+  const [activeSkipperId, setActiveSkipperId] = useState<string | null>(null)
+  const [activeCrewIds, setActiveCrewIds] = useState<string[]>([])
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const selection =
+        preloadedSelection ??
+        (logbookId === 'demo' ? null : await loadLogbookCrewSelection(logbookId))
+
+      if (selection) {
+        setActiveSkipperId(selection.activeSkipperId)
+        setActiveCrewIds([...selection.activeCrewIds])
+      }
+
+      if (preloadedPool) {
+        setPool(
+          preloadedPool.map((p) => ({
+            payloadId: p.payloadId,
+            data: p.data
+          }))
+        )
+      } else if (selectionOnly && selection) {
+        setPool(snapshotsToPoolList(selection))
+      } else {
+        setPool(await loadPersonPool())
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load crew selection')
+    } finally {
+      setLoading(false)
+    }
+  }, [logbookId, preloadedPool, preloadedSelection, selectionOnly])
+
+  useEffect(() => {
+    void loadData()
+  }, [loadData])
+
+  const skippers = useMemo(() => filterSkippers(pool), [pool])
+  const crewMembers = useMemo(() => filterCrew(pool), [pool])
+
+  const toggleCrew = (id: string) => {
+    if (readOnly) return
+    setActiveCrewIds((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    )
+  }
+
+  const handleSave = async () => {
+    if (readOnly || logbookId === 'demo') return
+    setSaving(true)
+    setError(null)
+    setSaved(false)
+    try {
+      await saveLogbookCrewSelectionFromIds(logbookId, activeSkipperId, activeCrewIds)
+      setSaved(true)
+      trackPlausibleEvent(PlausibleEvents.CREW_SAVED, { context: 'logbook_selection' })
+      setTimeout(() => setSaved(false), 3000)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="tab-placeholder">
+        <Users className="header-logo spin" size={48} />
+        <p>{t('person_pool.loading')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="crew-dashboard-layout" data-tour="logbook-crew-picker">
+      <div className="form-card">
+        <div className="form-header">
+          <Users size={24} className="form-icon" />
+          <h2>{t('logbook_crew.title')}</h2>
+        </div>
+        <p className="help-text mb-4">{t('logbook_crew.subtitle')}</p>
+        {selectionOnly && <p className="help-text mb-4">{t('logbook_crew.selection_only_hint')}</p>}
+        {error && <div className="auth-error mb-4">{error}</div>}
+
+        <div className="input-group mb-4">
+          <label>{t('logbook_crew.active_skipper')}</label>
+          {skippers.length === 0 ? (
+            <p className="help-text">{t('logbook_crew.no_skippers_in_pool')}</p>
+          ) : (
+            <div className="crew-selection-list">
+              {skippers.map((s) => (
+                <label key={s.payloadId} className="crew-selection-item">
+                  <input
+                    type="radio"
+                    name={`skipper-${logbookId}`}
+                    checked={activeSkipperId === s.payloadId}
+                    onChange={() => !readOnly && setActiveSkipperId(s.payloadId)}
+                    disabled={readOnly}
+                  />
+                  <User size={16} aria-hidden="true" />
+                  <span>{s.data.name || t('logbook_crew.unnamed')}</span>
+                </label>
+              ))}
+              {!readOnly && (
+                <label className="crew-selection-item">
+                  <input
+                    type="radio"
+                    name={`skipper-${logbookId}`}
+                    checked={activeSkipperId === null}
+                    onChange={() => setActiveSkipperId(null)}
+                  />
+                  <span>{t('logbook_crew.no_skipper')}</span>
+                </label>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="input-group mb-4">
+          <label>{t('logbook_crew.active_crew')}</label>
+          {crewMembers.length === 0 ? (
+            <p className="help-text">{t('logbook_crew.no_crew_in_pool')}</p>
+          ) : (
+            <div className="crew-selection-list">
+              {crewMembers.map((c) => (
+                <label key={c.payloadId} className="crew-selection-item">
+                  <input
+                    type="checkbox"
+                    checked={activeCrewIds.includes(c.payloadId)}
+                    onChange={() => toggleCrew(c.payloadId)}
+                    disabled={readOnly}
+                  />
+                  <span>{c.data.name || t('logbook_crew.unnamed')}</span>
+                </label>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {!readOnly && logbookId !== 'demo' && (
+          <div className="form-actions">
+            {saved && (
+              <div className="success-toast">
+                <Check size={16} />
+                <span>{t('logbook_crew.saved')}</span>
+              </div>
+            )}
+            <button type="button" className="btn primary" onClick={() => void handleSave()} disabled={saving}>
+              <Save size={18} />
+              {t('logbook_crew.save')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function selectionFromSnapshots(
+  snapshotsById: Record<string, PersonSnapshot>
+): LogbookCrewSelectionData {
+  const snapshots = Object.values(snapshotsById)
+  const skipper = snapshots.find((s) => s.role === 'skipper')
+  return {
+    activeSkipperId: skipper?.id ?? null,
+    activeCrewIds: snapshots.filter((s) => s.role === 'crew').map((s) => s.id),
+    snapshotsById
+  }
+}
@@ -1,31 +1,76 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLiveQuery } from 'dexie-react-hooks'
-import { db } from '../services/db.js'
-import { fetchLogbooks, createLogbook, deleteLogbook, type DecryptedLogbook } from '../services/logbook.js'
+import LanguageDropdown from './LanguageDropdown.tsx'
+import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
+import { fetchLogbooks, createLogbook, deleteLogbook, updateLogbookTitle, type DecryptedLogbook } from '../services/logbook.js'
+import { loadLogbookSearchFieldsBatch } from '../services/logbookSearchIndex.js'
+import { logbookMatchesFilter, type LogbookSearchFields } from '../utils/logbookFilter.js'
+import LogbookRoleBadge from './LogbookRoleBadge.tsx'
+import BetaBadge from './BetaBadge.tsx'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { getErrorMessage } from '../utils/errors.js'
 import { logoutUser } from '../services/auth.js'
 import { useDialog } from './ModalDialog.tsx'
-import AccountDangerZone from './AccountDangerZone.tsx'
-import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
+import { BookOpen, Plus, Trash2, LogOut, RefreshCw, Ship, Wifi, WifiOff, Search, X, CalendarDays, CaseSensitive, ArrowUp, ArrowDown, Upload } from 'lucide-react'
+import DisclaimerHeaderButton from './DisclaimerHeaderButton.tsx'
+import FeedbackHeaderButton from './FeedbackHeaderButton.tsx'
+import ProfileHeaderButton from './ProfileHeaderButton.tsx'
+import AdminHeaderButton from './AdminHeaderButton.tsx'
+import LogbookRestorePanel from './LogbookRestorePanel.tsx'

 interface LogbookDashboardProps {
  onSelectLogbook: (id: string, title: string) => void
  onLogout: () => void
+  onOpenProfile: () => void
+  onOpenAdmin?: () => void
 }

-export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookDashboardProps) {
+type LogbookSortKey = 'name' | 'date'
+type LogbookSortDirection = 'asc' | 'desc'
+
+function sortLogbooks(
+  items: DecryptedLogbook[],
+  sortBy: LogbookSortKey,
+  direction: LogbookSortDirection,
+  locale: string
+): DecryptedLogbook[] {
+  const sorted = [...items]
+  sorted.sort((a, b) => {
+    let cmp = 0
+    if (sortBy === 'name') {
+      cmp = a.title.localeCompare(b.title, locale, { sensitivity: 'base' })
+    } else {
+      const timeA = a.lastTravelDate ? new Date(a.lastTravelDate).getTime() : new Date(a.updatedAt).getTime()
+      const timeB = b.lastTravelDate ? new Date(b.lastTravelDate).getTime() : new Date(b.updatedAt).getTime()
+      cmp = timeA - timeB
+    }
+    return direction === 'asc' ? cmp : -cmp
+  })
+  return sorted
+}
+
+export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProfile, onOpenAdmin }: LogbookDashboardProps) {
  const { t, i18n } = useTranslation()
  const { showConfirm } = useDialog()
  const [logbooks, setLogbooks] = useState<DecryptedLogbook[]>([])
  const [newTitle, setNewTitle] = useState('')
+  const [editingLogbookId, setEditingLogbookId] = useState<string | null>(null)
+  const [editingTitleDraft, setEditingTitleDraft] = useState('')
+  const titleInputRef = useRef<HTMLInputElement>(null)
  const [loading, setLoading] = useState(false)
  const [refreshing, setRefreshing] = useState(false)
  const [error, setError] = useState<string | null>(null)
+  const [filterQuery, setFilterQuery] = useState('')
+  const [searchFieldsByLogbookId, setSearchFieldsByLogbookId] = useState<Map<string, LogbookSearchFields>>(
+    () => new Map()
+  )
+  const [sortBy, setSortBy] = useState<LogbookSortKey>('date')
+  const [sortDirection, setSortDirection] = useState<LogbookSortDirection>('desc')
+  const filterInputRef = useRef<HTMLInputElement>(null)
  const [online, setOnline] = useState(navigator.onLine)
-  const [username] = useState(localStorage.getItem('active_username') || 'Skipper')
+  const [showRestore, setShowRestore] = useState(false)

-  // Reactive sync queue count
-  const pendingCount = useLiveQuery(() => db.syncQueue.count()) || 0
+  const { pendingCount, showSpinner, showPendingWarning, connStatusClassName } = useSyncIndicator()

  // Listen to connectivity changes
  useEffect(() => {
@@ -44,6 +89,23 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
    loadLogbooks()
  }, [])

+  useEffect(() => {
+    const ids = logbooks.map((lb) => lb.id)
+    if (ids.length === 0) {
+      setSearchFieldsByLogbookId(new Map())
+      return
+    }
+
+    let cancelled = false
+    void loadLogbookSearchFieldsBatch(ids).then((index) => {
+      if (!cancelled) setSearchFieldsByLogbookId(index)
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [logbooks])
+
  const loadLogbooks = async (isRefresh = false) => {
    if (isRefresh) setRefreshing(true)
    else setLoading(true)
@@ -51,8 +113,8 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
    try {
      const data = await fetchLogbooks()
      setLogbooks(data)
-    } catch (err: any) {
-      setError(err.message || 'Failed to load logbooks')
+    } catch (err: unknown) {
+      setError(getErrorMessage(err, t('errors.load_failed')))
    } finally {
      setLoading(false)
      setRefreshing(false)
@@ -69,8 +131,9 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
      const created = await createLogbook(newTitle.trim())
      setLogbooks((prev) => [created, ...prev])
      setNewTitle('')
-    } catch (err: any) {
-      setError(err.message || 'Failed to create logbook')
+      trackPlausibleEvent(PlausibleEvents.LOGBOOK_CREATED)
+    } catch (err: unknown) {
+      setError(getErrorMessage(err, t('errors.save_failed')))
    } finally {
      setLoading(false)
    }
@@ -79,30 +142,205 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
  const handleDelete = async (id: string, e: React.MouseEvent) => {
    e.stopPropagation() // Prevent selecting the logbook when clicking delete
    
-    if (await showConfirm(t('dashboard.delete_confirm'), t('dashboard.title'), t('logs.confirm_yes'), t('logs.confirm_no'))) {
+    if (await showConfirm(t('dashboard.delete_confirm'), t('dashboard.delete_btn'), t('logs.confirm_yes'), t('logs.confirm_no'))) {
      setLoading(true)
      setError(null)
      try {
        await deleteLogbook(id)
        setLogbooks((prev) => prev.filter((lb) => lb.id !== id))
      } catch (err: any) {
-        setError(err.message || 'Failed to delete logbook')
+        setError(getErrorMessage(err, t('errors.delete_failed')))
      } finally {
        setLoading(false)
      }
    }
  }

+  useEffect(() => {
+    if (editingLogbookId) {
+      titleInputRef.current?.focus()
+      titleInputRef.current?.select()
+    }
+  }, [editingLogbookId])
+
+  const startTitleEdit = (lb: DecryptedLogbook, e: React.MouseEvent) => {
+    e.stopPropagation()
+    setEditingLogbookId(lb.id)
+    setEditingTitleDraft(lb.title)
+  }
+
+  const cancelTitleEdit = () => {
+    setEditingLogbookId(null)
+    setEditingTitleDraft('')
+  }
+
+  const commitTitleEdit = async (id: string) => {
+    if (editingLogbookId !== id) return
+
+    const lb = logbooks.find((item) => item.id === id)
+    const trimmedTitle = editingTitleDraft.trim()
+    cancelTitleEdit()
+
+    if (!lb || !trimmedTitle || trimmedTitle === lb.title.trim()) return
+
+    setLoading(true)
+    setError(null)
+    try {
+      await updateLogbookTitle(id, trimmedTitle)
+      setLogbooks((prev) =>
+        prev.map((item) =>
+          item.id === id ? { ...item, title: trimmedTitle, updatedAt: new Date().toISOString() } : item
+        )
+      )
+    } catch (err: any) {
+      setError(getErrorMessage(err, t('errors.save_failed')))
+    } finally {
+      setLoading(false)
+    }
+  }
+
  const handleLogout = () => {
-    logoutUser()
+    void logoutUser()
    onLogout()
  }

-  const toggleLanguage = () => {
-    const nextLang = i18n.language.startsWith('de') ? 'en' : 'de'
-    i18n.changeLanguage(nextLang)
+
+  const ownedLogbooks = logbooks.filter((lb) => !lb.isShared)
+  const sharedLogbooks = logbooks.filter((lb) => lb.isShared)
+
+  const filterActive = filterQuery.trim().length > 0
+  const filteredOwnedLogbooks = useMemo(
+    () =>
+      ownedLogbooks.filter((lb) =>
+        logbookMatchesFilter(lb, filterQuery, i18n.language, searchFieldsByLogbookId.get(lb.id))
+      ),
+    [ownedLogbooks, filterQuery, i18n.language, searchFieldsByLogbookId]
+  )
+  const filteredSharedLogbooks = useMemo(
+    () =>
+      sharedLogbooks.filter((lb) =>
+        logbookMatchesFilter(lb, filterQuery, i18n.language, searchFieldsByLogbookId.get(lb.id))
+      ),
+    [sharedLogbooks, filterQuery, i18n.language, searchFieldsByLogbookId]
+  )
+  const sortedOwnedLogbooks = useMemo(
+    () => sortLogbooks(filteredOwnedLogbooks, sortBy, sortDirection, i18n.language),
+    [filteredOwnedLogbooks, sortBy, sortDirection, i18n.language]
+  )
+  const sortedSharedLogbooks = useMemo(
+    () => sortLogbooks(filteredSharedLogbooks, sortBy, sortDirection, i18n.language),
+    [filteredSharedLogbooks, sortBy, sortDirection, i18n.language]
+  )
+  const filteredLogbookCount = sortedOwnedLogbooks.length + sortedSharedLogbooks.length
+
+  const renderLogbookCard = (lb: DecryptedLogbook) => {
+    const isEditingTitle = editingLogbookId === lb.id
+
+    return (
+    <div
+      key={lb.id}
+      className={`logbook-card glass${lb.isShared ? ' logbook-card--shared' : ''}${isEditingTitle ? ' logbook-card--editing-title' : ''}`}
+    >
+      {!isEditingTitle && (
+        <button
+          type="button"
+          className="logbook-card-select"
+          onClick={() => onSelectLogbook(lb.id, lb.title)}
+          aria-label={t('dashboard.open_logbook', { title: lb.title })}
+        />
+      )}
+
+      <div className="card-icon" aria-hidden>
+        <BookOpen size={24} />
+      </div>
+
+      <div className="card-info">
+        <div className="card-title-row">
+          {isEditingTitle ? (
+            <input
+              ref={titleInputRef}
+              type="text"
+              className="logbook-title-inline-edit input-text"
+              value={editingTitleDraft}
+              onChange={(e) => setEditingTitleDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  void commitTitleEdit(lb.id)
+                } else if (e.key === 'Escape') {
+                  e.preventDefault()
+                  cancelTitleEdit()
+                }
+              }}
+              onBlur={() => void commitTitleEdit(lb.id)}
+              disabled={loading}
+              aria-label={t('dashboard.edit_title')}
+            />
+          ) : (
+            <h3
+              className={lb.isShared ? undefined : 'logbook-title-editable'}
+              onClick={lb.isShared ? undefined : (e) => startTitleEdit(lb, e)}
+              title={lb.isShared ? undefined : t('dashboard.edit_title')}
+            >
+              {lb.title}
+            </h3>
+          )}
+          <LogbookRoleBadge role={lb.accessRole} />
+        </div>
+        <div className="card-meta">
+          <span className={`sync-badge ${lb.isSynced ? 'synced' : 'local'}`}>
+            {lb.isSynced ? t('dashboard.status_synced') : t('dashboard.status_local')}
+          </span>
+          {lb.isDemo && (
+            <span className="demo-badge">{t('demo.badge')}</span>
+          )}
+          <span className="entry-count-badge" title={t('dashboard.travel_days_count', { count: lb.entryCount ?? 0 })}>
+            <CalendarDays size={12} style={{ marginRight: '4px' }} />
+            {lb.entryCount ?? 0}
+          </span>
+          <span className="date-badge">
+            {new Date(lb.lastTravelDate || lb.updatedAt).toLocaleDateString(i18n.language, {
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric'
+            })}
+          </span>
+        </div>
+      </div>
+
+      {!lb.isShared && (
+        <div className="logbook-card-actions">
+          <button
+            type="button"
+            className="btn-delete"
+            onClick={(e) => handleDelete(lb.id, e)}
+            title={t('dashboard.delete_btn')}
+            aria-label={t('dashboard.delete_btn')}
+          >
+            <Trash2 size={18} />
+          </button>
+        </div>
+      )}
+    </div>
+    )
  }

+  const renderLogbookSection = (
+    title: string,
+    items: DecryptedLogbook[],
+    hint?: string
+  ) => (
+    <div className="logbook-section">
+      <div className="logbook-section-header">
+        <h3>{title}</h3>
+        {hint && <p className="logbook-section-hint">{hint}</p>}
+      </div>
+      <div className="logbooks-grid">
+        {items.map(renderLogbookCard)}
+      </div>
+    </div>
+  )
+
  return (
    <div className="dashboard-container">
      {/* Premium Dashboard Header */}
@@ -110,18 +348,37 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
        <div className="header-brand">
          <Ship className="header-logo" size={32} />
          <div>
-            <h1>{t('app.name')}</h1>
+            <div className="header-brand-title-row">
+              <h1>{t('app.name')}</h1>
+              <BetaBadge />
+            </div>
            <p className="subtitle">{t('app.tagline')}</p>
          </div>
        </div>

        <div className="header-actions">
          {/* Connection Indicator */}
-          <div className={`conn-status ${online ? (pendingCount > 0 ? 'unsynced' : 'online') : 'offline'}`} title={online ? (pendingCount > 0 ? 'Pending Sync' : 'Synced') : 'Offline'}>
+          <div
+            className={connStatusClassName(online)}
+            title={
+              online
+                ? showSpinner
+                  ? 'Syncing'
+                  : pendingCount > 0
+                    ? 'Pending Sync'
+                    : 'Synced'
+                : 'Offline'
+            }
+          >
            {online ? (
-              pendingCount > 0 ? (
+              showSpinner ? (
                <>
                  <RefreshCw size={18} className="spin" />
+                  <span>{t('sync.status_syncing')}</span>
+                </>
+              ) : showPendingWarning ? (
+                <>
+                  <RefreshCw size={18} />
                  <span>{t('sync.status_unsynced')} ({pendingCount})</span>
                </>
              ) : (
@@ -138,16 +395,15 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
            )}
          </div>

-          {/* Skipper profile */}
-          <div className="skipper-badge">
-            <User size={16} />
-            <span>{username}</span>
-          </div>
+          <ProfileHeaderButton onClick={onOpenProfile} />

-          {/* Lang toggle */}
-          <button className="btn-icon" onClick={toggleLanguage} title="Switch Language">
-            <Languages size={18} />
-          </button>
+          {onOpenAdmin && <AdminHeaderButton onClick={onOpenAdmin} />}
+
+          <LanguageDropdown variant="icon" align="right" />
+
+          <DisclaimerHeaderButton />
+
+          <FeedbackHeaderButton />

          {/* Logout */}
          <button className="btn-icon logout" onClick={handleLogout} title={t('dashboard.logout')}>
@@ -180,6 +436,24 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
          </form>

          {error && <div className="auth-error mt-4">{error}</div>}
+
+          <div style={{ marginTop: '20px', borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: '16px', textAlign: 'center' }}>
+            <button
+              type="button"
+              className="btn-link"
+              style={{ fontSize: '13.5px', color: 'var(--app-text-muted)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '6px' }}
+              onClick={() => setShowRestore(!showRestore)}
+            >
+              <Upload size={14} />
+              {t('settings.backup_restore_title')}
+            </button>
+          </div>
+
+          {showRestore && (
+            <div style={{ marginTop: '16px', textAlign: 'left' }}>
+              <LogbookRestorePanel onRestored={onSelectLogbook} />
+            </div>
+          )}
        </section>

        {/* Right Side: Logbooks list */}
@@ -196,47 +470,118 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
          ) : logbooks.length === 0 ? (
            <div className="dashboard-status-msg glass">{t('dashboard.no_logbooks')}</div>
          ) : (
-            <div className="logbooks-grid">
-              {logbooks.map((lb) => (
-                <div key={lb.id} className="logbook-card glass" onClick={() => onSelectLogbook(lb.id, lb.title)}>
-                  <div className="card-icon">
-                    <BookOpen size={24} />
+            <>
+              <div className="dashboard-list-controls">
+                <div className="dashboard-filter-bar">
+                  <label className="dashboard-filter-label" htmlFor="logbook-list-filter">
+                    {t('dashboard.filter_label')}
+                  </label>
+                  <div className="dashboard-filter-input-wrap">
+                    <Search size={18} className="dashboard-filter-icon" aria-hidden="true" />
+                    <input
+                      ref={filterInputRef}
+                      id="logbook-list-filter"
+                      type="search"
+                      className="input-text dashboard-filter-input"
+                      placeholder={t('dashboard.filter_placeholder')}
+                      value={filterQuery}
+                      onChange={(e) => setFilterQuery(e.target.value)}
+                      autoComplete="off"
+                      spellCheck={false}
+                      aria-describedby={filterActive ? 'logbook-filter-status' : undefined}
+                    />
+                    {filterActive && (
+                      <button
+                        type="button"
+                        className="dashboard-filter-clear"
+                        onClick={() => {
+                          setFilterQuery('')
+                          filterInputRef.current?.focus()
+                        }}
+                        title={t('dashboard.filter_clear')}
+                        aria-label={t('dashboard.filter_clear')}
+                      >
+                        <X size={16} aria-hidden="true" />
+                      </button>
+                    )}
                  </div>
-                  
-                  <div className="card-info">
-                    <h3>{lb.title}</h3>
-                    <div className="card-meta">
-                      <span className={`sync-badge ${lb.isSynced ? 'synced' : 'local'}`}>
-                        {lb.isSynced ? t('dashboard.status_synced') : t('dashboard.status_local')}
-                      </span>
-                      <span className="date-badge">
-                        {new Date(lb.updatedAt).toLocaleDateString(i18n.language, {
-                          year: 'numeric',
-                          month: 'short',
-                          day: 'numeric'
-                        })}
-                      </span>
+                  {filterActive && (
+                    <p id="logbook-filter-status" className="dashboard-filter-meta" role="status">
+                      {t('dashboard.filter_results', { count: filteredLogbookCount })}
+                    </p>
+                  )}
+                </div>
+
+                <div className="dashboard-sort-bar">
+                  <span className="dashboard-sort-label">{t('dashboard.sort_label')}</span>
+                  <div className="dashboard-sort-row">
+                    <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_by_label')}>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortBy === 'name' ? ' is-active' : ''}`}
+                        onClick={() => setSortBy('name')}
+                        aria-pressed={sortBy === 'name'}
+                        aria-label={t('dashboard.sort_by_name')}
+                        title={t('dashboard.sort_by_name')}
+                      >
+                        <CaseSensitive size={16} aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortBy === 'date' ? ' is-active' : ''}`}
+                        onClick={() => setSortBy('date')}
+                        aria-pressed={sortBy === 'date'}
+                        aria-label={t('dashboard.sort_by_date')}
+                        title={t('dashboard.sort_by_date')}
+                      >
+                        <CalendarDays size={16} aria-hidden="true" />
+                      </button>
+                    </div>
+                    <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_dir_label')}>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortDirection === 'asc' ? ' is-active' : ''}`}
+                        onClick={() => setSortDirection('asc')}
+                        aria-pressed={sortDirection === 'asc'}
+                        aria-label={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
+                        title={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
+                      >
+                        <ArrowUp size={16} aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortDirection === 'desc' ? ' is-active' : ''}`}
+                        onClick={() => setSortDirection('desc')}
+                        aria-pressed={sortDirection === 'desc'}
+                        aria-label={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
+                        title={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
+                      >
+                        <ArrowDown size={16} aria-hidden="true" />
+                      </button>
                    </div>
                  </div>
-
-                  <button
-                    className="btn-delete"
-                    onClick={(e) => handleDelete(lb.id, e)}
-                    title={t('dashboard.delete_btn')}
-                    style={{ visibility: lb.isShared ? 'hidden' : 'visible' }}
-                  >
-                    <Trash2 size={18} />
-                  </button>
                </div>
-              ))}
-            </div>
+              </div>
+
+              {filterActive && filteredLogbookCount === 0 ? (
+                <div className="dashboard-status-msg glass">{t('dashboard.filter_no_results')}</div>
+              ) : (
+                <div className="logbook-sections">
+                  {sortedOwnedLogbooks.length > 0 && renderLogbookSection(
+                    sortedSharedLogbooks.length > 0 ? t('dashboard.section_owned') : t('dashboard.title'),
+                    sortedOwnedLogbooks
+                  )}
+                  {sortedSharedLogbooks.length > 0 && renderLogbookSection(
+                    t('dashboard.section_shared'),
+                    sortedSharedLogbooks,
+                    t('dashboard.section_shared_hint')
+                  )}
+                </div>
+              )}
+            </>
          )}
        </section>
      </main>
-
-      <section className="dashboard-account-section" aria-label={t('settings.danger_zone_title')}>
-        <AccountDangerZone />
-      </section>
    </div>
  )
 }
@@ -0,0 +1,275 @@
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Upload, Check, AlertTriangle } from 'lucide-react'
+import { useDialog } from './ModalDialog.tsx'
+import {
+  parseLogbookBackupFile,
+  previewLogbookBackup,
+  restoreLogbookBackup,
+  formatBackupBytes,
+  BACKUP_SIZE_CONFIRM_BYTES,
+  type ParsedLogbookBackup,
+  type LogbookBackupPreview
+} from '../services/logbookBackup.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
+
+interface LogbookRestorePanelProps {
+  onRestored?: (logbookId: string, title: string) => void
+}
+
+function mapBackupError(code: string, t: (key: string) => string): string {
+  switch (code) {
+    case 'BACKUP_PASSPHRASE_TOO_SHORT':
+      return t('settings.backup_passphrase_short')
+    case 'BACKUP_NOT_OWNER':
+      return t('settings.backup_not_owner')
+    case 'BACKUP_INVALID_JSON':
+      return t('settings.backup_invalid_json')
+    case 'BACKUP_INVALID_ARCHIVE':
+      return t('settings.backup_invalid_archive')
+    case 'BACKUP_VERSION_UNSUPPORTED':
+      return t('settings.backup_version_unsupported')
+    case 'BACKUP_WRONG_PASSPHRASE':
+      return t('settings.backup_wrong_passphrase')
+    case 'BACKUP_INVALID_FORMAT':
+      return t('settings.backup_invalid_format')
+    case 'BACKUP_NOT_AUTHENTICATED':
+      return t('settings.backup_not_authenticated')
+    case 'BACKUP_ID_CONFLICT':
+      return t('settings.backup_id_conflict')
+    default:
+      if (code.includes('decrypt') || code.includes('operation')) {
+        return t('settings.backup_wrong_passphrase')
+      }
+      return code
+  }
+}
+
+export default function LogbookRestorePanel({ onRestored }: LogbookRestorePanelProps) {
+  const { t, i18n } = useTranslation()
+  const { showConfirm } = useDialog()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const [importPassphrase, setImportPassphrase] = useState('')
+  const [importFile, setImportFile] = useState<File | null>(null)
+  const [importPreview, setImportPreview] = useState<LogbookBackupPreview | null>(null)
+  const [parsedBackup, setParsedBackup] = useState<ParsedLogbookBackup | null>(null)
+  const [importing, setImporting] = useState(false)
+  const [previewing, setPreviewing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+
+  const handleImportSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await handleRestore()
+  }
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setError(null)
+    setSuccess(null)
+    setImportPreview(null)
+    setParsedBackup(null)
+    const file = e.target.files?.[0]
+    setImportFile(file ?? null)
+    if (!file) return
+
+    try {
+      const backup = await parseLogbookBackupFile(file)
+      setParsedBackup(backup)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(mapBackupError(message, t))
+      setImportFile(null)
+    }
+  }
+
+  const handlePreviewImport = async () => {
+    if (!parsedBackup || !importPassphrase) return
+    setPreviewing(true)
+    setError(null)
+    try {
+      const preview = await previewLogbookBackup(parsedBackup, importPassphrase)
+      setImportPreview(preview)
+    } catch (err: unknown) {
+      setImportPreview(null)
+      setError(t('settings.backup_wrong_passphrase'))
+    } finally {
+      setPreviewing(false)
+    }
+  }
+
+  const handleRestore = async (options: { overwrite?: boolean; assignNewId?: boolean } = {}) => {
+    if (!parsedBackup || !importPassphrase) return
+
+    if (parsedBackup.manifest.totalUncompressedBytes > BACKUP_SIZE_CONFIRM_BYTES) {
+      const ok = await showConfirm(
+        t('settings.backup_import_size_confirm', {
+          size: formatBackupBytes(parsedBackup.manifest.totalUncompressedBytes)
+        }),
+        t('settings.backup_restore_title'),
+        t('logs.confirm_yes'),
+        t('logs.confirm_no')
+      )
+      if (!ok) return
+    }
+
+    setImporting(true)
+    setError(null)
+    try {
+      const result = await restoreLogbookBackup(parsedBackup, importPassphrase, options)
+      setSuccess(t('settings.backup_restore_success', { title: result.title }))
+      setImportFile(null)
+      setImportPassphrase('')
+      setImportPreview(null)
+      setParsedBackup(null)
+      if (fileInputRef.current) fileInputRef.current.value = ''
+      trackPlausibleEvent(PlausibleEvents.BACKUP_RESTORED, {
+        entries: parsedBackup.manifest.counts.entries,
+        photos: parsedBackup.manifest.counts.photos,
+        voiceMemos: parsedBackup.manifest.counts.voiceMemos,
+        bytes: parsedBackup.manifest.totalUncompressedBytes,
+        mode: options.overwrite ? 'overwrite' : options.assignNewId ? 'new_id' : 'same_id'
+      })
+      onRestored?.(result.logbookId, result.title)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      if (message === 'BACKUP_ID_CONFLICT') {
+        const overwrite = await showConfirm(
+          t('settings.backup_overwrite_confirm'),
+          t('settings.backup_restore_title'),
+          t('logs.confirm_yes'),
+          t('logs.confirm_no')
+        )
+        if (overwrite) {
+          setImporting(false)
+          return handleRestore({ overwrite: true })
+        }
+        const asNew = await showConfirm(
+          t('settings.backup_new_id_confirm'),
+          t('settings.backup_restore_title'),
+          t('logs.confirm_yes'),
+          t('logs.confirm_no')
+        )
+        if (asNew) {
+          setImporting(false)
+          return handleRestore({ assignNewId: true })
+        }
+        setError(t('settings.backup_restore_cancelled'))
+      } else {
+        setError(mapBackupError(message, t))
+      }
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <div className="backup-section backup-section--import" aria-labelledby="backup-import-heading" style={{ marginTop: '8px' }}>
+      <p className="text-muted backup-section-desc" style={{ fontSize: '13px', margin: '0 0 16px 0', textAlign: 'left', lineHeight: '1.4' }}>
+        {t('settings.backup_restore_desc')}
+      </p>
+
+      {error && (
+        <div className="auth-error mb-4" role="alert" style={{ textAlign: 'left' }}>
+          <AlertTriangle size={16} style={{ display: 'inline', marginRight: 6, verticalAlign: 'text-bottom' }} />
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="success-toast mb-4" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <Check size={16} />
+          <span>{success}</span>
+        </div>
+      )}
+
+      <form onSubmit={handleImportSubmit} className="backup-import-form" style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <div className="input-group" style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          <label htmlFor="backup-import-file" style={{ fontSize: '12px', fontWeight: 600, color: 'var(--app-text-muted)', textAlign: 'left' }}>
+            {t('settings.backup_file_label')}
+          </label>
+          <input
+            id="backup-import-file"
+            ref={fileInputRef}
+            type="file"
+            accept=".daagbok,application/zip"
+            className="input-text"
+            onChange={handleFileChange}
+            disabled={importing}
+            style={{ width: '100%', boxSizing: 'border-box' }}
+          />
+        </div>
+
+        {importFile && (
+          <>
+            <div className="input-group" style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <label htmlFor="backup-import-passphrase" style={{ fontSize: '12px', fontWeight: 600, color: 'var(--app-text-muted)', textAlign: 'left' }}>
+                {t('settings.backup_passphrase')}
+              </label>
+              <input
+                id="backup-import-passphrase"
+                name="backup-import-passphrase"
+                type="password"
+                className="input-text"
+                value={importPassphrase}
+                onChange={(e) => {
+                  setImportPassphrase(e.target.value)
+                  setImportPreview(null)
+                }}
+                autoComplete="current-password"
+                disabled={importing}
+                required
+                style={{ width: '100%', boxSizing: 'border-box' }}
+              />
+            </div>
+
+            <div className="backup-actions-row" style={{ display: 'flex', gap: '10px' }}>
+              <button
+                type="button"
+                className="btn secondary"
+                onClick={handlePreviewImport}
+                disabled={previewing || importing || !importPassphrase}
+                style={{ flex: 1, padding: '10px' }}
+              >
+                {previewing ? t('settings.backup_previewing') : t('settings.backup_preview_btn')}
+              </button>
+              <button
+                type="submit"
+                className="btn primary"
+                disabled={importing || !importPassphrase}
+                style={{ flex: 1, padding: '10px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '6px' }}
+              >
+                <Upload size={16} />
+                {importing ? t('settings.backup_restoring') : t('settings.backup_restore_btn')}
+              </button>
+            </div>
+          </>
+        )}
+      </form>
+
+      {importPreview && (
+        <div className="backup-preview glass" style={{ marginTop: '16px', padding: '16px', borderRadius: '12px', border: '1px solid var(--app-border-subtle)', background: 'var(--app-surface-inset, rgba(0, 0, 0, 0.2))', textAlign: 'left' }}>
+          <p className="backup-preview-title" style={{ fontWeight: 600, margin: '0 0 10px 0', fontSize: '14px', color: 'var(--app-text-heading)' }}>{importPreview.title}</p>
+          <ul className="backup-preview-stats" style={{ listStyle: 'none', padding: 0, margin: '0 0 10px 0', display: 'flex', flexDirection: 'column', gap: '6px', fontSize: '13px', color: 'var(--app-text)' }}>
+            <li>{t('settings.backup_stat_entries', { count: importPreview.counts.entries })}</li>
+            <li>{t('settings.backup_stat_photos', { count: importPreview.counts.photos })}</li>
+            <li>{t('settings.backup_stat_voice', { count: importPreview.counts.voiceMemos })}</li>
+            <li>{t('settings.backup_stat_crew', { count: importPreview.counts.crews })}</li>
+            <li>{t('settings.backup_stat_tracks', { count: importPreview.counts.gpsTracks })}</li>
+            <li style={{ color: 'var(--app-text-muted)' }}>
+              {t('settings.backup_stat_size', {
+                size: formatBackupBytes(importPreview.totalUncompressedBytes)
+              })}
+            </li>
+          </ul>
+          <p className="text-muted backup-preview-date" style={{ fontSize: '11px', margin: 0, color: 'var(--app-text-muted)' }}>
+            {t('settings.backup_exported_at', {
+              date: formatAppDateTime(importPreview.exportedAt, i18n.language)
+            })}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import { Anchor, Eye, Users } from 'lucide-react'
+import type { LogbookAccessRole } from '../services/logbook.js'
+
+interface LogbookRoleBadgeProps {
+  role: LogbookAccessRole
+  className?: string
+}
+
+export default function LogbookRoleBadge({ role, className = '' }: LogbookRoleBadgeProps) {
+  const { t } = useTranslation()
+
+  if (role === 'OWNER') {
+    return (
+      <span className={`role-badge role-badge--owner ${className}`.trim()} title={t('dashboard.role_owner_hint')}>
+        <Anchor size={12} aria-hidden="true" />
+        {t('dashboard.role_owner')}
+      </span>
+    )
+  }
+
+  if (role === 'READ') {
+    return (
+      <span className={`role-badge role-badge--read ${className}`.trim()} title={t('dashboard.role_read_hint')}>
+        <Eye size={12} aria-hidden="true" />
+        {t('dashboard.role_read')}
+      </span>
+    )
+  }
+
+  return (
+    <span className={`role-badge role-badge--crew ${className}`.trim()} title={t('dashboard.role_crew_hint')}>
+      <Users size={12} aria-hidden="true" />
+      {t('dashboard.role_crew')}
+    </span>
+  )
+}
@@ -0,0 +1,199 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Ship, Save, Check } from 'lucide-react'
+import type { LogbookVesselSelectionData, VesselData } from '../types/vessel.js'
+import type { DecryptedVessel } from '../services/vesselPool.js'
+import { loadVesselPool } from '../services/vesselPool.js'
+import { loadLogbookVesselSelection, saveLogbookVesselSelectionFromId } from '../services/logbookVesselSelection.js'
+import { resolveVesselForLogbook } from '../services/resolveVessel.js'
+import { vesselDataFromSnapshot } from '../utils/vesselSnapshot.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+export interface LogbookVesselPickerProps {
+  logbookId: string
+  readOnly?: boolean
+  preloadedPool?: Array<{ payloadId: string; data: VesselData }>
+  preloadedSelection?: LogbookVesselSelectionData
+  selectionOnly?: boolean
+  onOpenProfile?: () => void
+}
+
+export default function LogbookVesselPicker({
+  logbookId,
+  readOnly = false,
+  preloadedPool,
+  preloadedSelection,
+  selectionOnly = false,
+  onOpenProfile
+}: LogbookVesselPickerProps) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(!preloadedSelection)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [pool, setPool] = useState<DecryptedVessel[]>([])
+  const [activeVesselId, setActiveVesselId] = useState<string | null>(null)
+  const [resolvedVessel, setResolvedVessel] = useState<VesselData | null>(null)
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const selection =
+        preloadedSelection ??
+        (logbookId === 'demo' ? null : await loadLogbookVesselSelection(logbookId))
+
+      if (selection) {
+        setActiveVesselId(selection.activeVesselId)
+      }
+
+      if (preloadedPool) {
+        setPool(preloadedPool.map((p) => ({ payloadId: p.payloadId, data: p.data })))
+      } else if (selectionOnly && selection?.vesselSnapshot) {
+        const data = vesselDataFromSnapshot(selection.vesselSnapshot)
+        if (data) {
+          setPool([{ payloadId: selection.vesselSnapshot.id, data }])
+        }
+      } else {
+        setPool(await loadVesselPool())
+      }
+
+      const vessel = await resolveVesselForLogbook(logbookId, {
+        preloadedSelection: selection ?? undefined
+      })
+      setResolvedVessel(vessel)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load vessel selection')
+    } finally {
+      setLoading(false)
+    }
+  }, [logbookId, preloadedPool, preloadedSelection, selectionOnly])
+
+  useEffect(() => {
+    void loadData()
+  }, [loadData])
+
+  const handleSave = async () => {
+    if (readOnly || logbookId === 'demo') return
+    setSaving(true)
+    setError(null)
+    setSaved(false)
+    try {
+      const selection = await saveLogbookVesselSelectionFromId(logbookId, activeVesselId)
+      const vessel = vesselDataFromSnapshot(selection.vesselSnapshot)
+      setResolvedVessel(vessel)
+      setSaved(true)
+      trackPlausibleEvent(PlausibleEvents.VESSEL_SAVED, { context: 'logbook_selection' })
+      setTimeout(() => setSaved(false), 3000)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="tab-placeholder">
+        <Ship className="header-logo spin" size={48} />
+        <p>{t('vessel_pool.loading')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="crew-dashboard-layout" data-tour="logbook-vessel-picker">
+      <div className="form-card">
+        <div className="form-header">
+          <Ship size={24} className="form-icon" />
+          <h2>{t('logbook_vessel.title')}</h2>
+        </div>
+        <p className="help-text mb-4">{t('logbook_vessel.subtitle')}</p>
+        {selectionOnly && <p className="help-text mb-4">{t('logbook_vessel.selection_only_hint')}</p>}
+        {!selectionOnly && !readOnly && onOpenProfile && (
+          <p className="help-text mb-4">
+            <button type="button" className="btn-link" onClick={onOpenProfile}>
+              {t('logbook_vessel.manage_in_profile')}
+            </button>
+          </p>
+        )}
+        {error && <div className="auth-error mb-4">{error}</div>}
+
+        <div className="input-group mb-4">
+          <label>{t('logbook_vessel.active_vessel')}</label>
+          {pool.length === 0 ? (
+            <p className="help-text">{t('logbook_vessel.no_vessels_in_pool')}</p>
+          ) : (
+            <div className="crew-selection-list">
+              {pool.map((v) => (
+                <label key={v.payloadId} className="crew-selection-item">
+                  <input
+                    type="radio"
+                    name={`vessel-${logbookId}`}
+                    checked={activeVesselId === v.payloadId}
+                    onChange={() => !readOnly && setActiveVesselId(v.payloadId)}
+                    disabled={readOnly}
+                  />
+                  <Ship size={16} aria-hidden="true" />
+                  <span>{v.data.name || t('logbook_vessel.unnamed')}</span>
+                </label>
+              ))}
+              {!readOnly && (
+                <label className="crew-selection-item">
+                  <input
+                    type="radio"
+                    name={`vessel-${logbookId}`}
+                    checked={activeVesselId === null}
+                    onChange={() => setActiveVesselId(null)}
+                  />
+                  <span>{t('logbook_vessel.no_vessel')}</span>
+                </label>
+              )}
+            </div>
+          )}
+        </div>
+
+        {resolvedVessel && (
+          <div className="member-editor-card glass mb-4 logbook-vessel-summary">
+            <h3 className="mb-2">{resolvedVessel.name}</h3>
+            <dl className="profile-dl">
+              {resolvedVessel.homePort && (
+                <div className="profile-dl-row">
+                  <dt>{t('vessel.port')}</dt>
+                  <dd>{resolvedVessel.homePort}</dd>
+                </div>
+              )}
+              {resolvedVessel.registrationNumber && (
+                <div className="profile-dl-row">
+                  <dt>{t('vessel.registration')}</dt>
+                  <dd>{resolvedVessel.registrationNumber}</dd>
+                </div>
+              )}
+              {resolvedVessel.mmsi && (
+                <div className="profile-dl-row">
+                  <dt>{t('vessel.mmsi')}</dt>
+                  <dd>{resolvedVessel.mmsi}</dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        )}
+
+        {!readOnly && logbookId !== 'demo' && (
+          <div className="form-actions">
+            {saved && (
+              <div className="success-toast">
+                <Check size={16} />
+                <span>{t('logbook_vessel.saved')}</span>
+              </div>
+            )}
+            <button type="button" className="btn primary" onClick={() => void handleSave()} disabled={saving}>
+              <Save size={18} />
+              {t('logbook_vessel.save')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,196 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface MetricRangeInputProps {
+  id?: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  min?: number
+  max?: number
+  step?: number
+  discreteValues?: readonly number[]
+  parse: (value: string) => number | null
+  format: (numeric: number) => string
+  defaultNumeric: number
+  /** Shown next to the label (current value). */
+  formatDisplay: (numeric: number, unset: boolean) => string
+  numberMin?: number
+  numberMax?: number
+  numberStep?: number | 'any'
+  numberPlaceholder?: string
+  allowLegacyText?: boolean
+  hideNumberInput?: boolean
+}
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n))
+}
+
+export default function MetricRangeInput({
+  id,
+  label,
+  value,
+  onChange,
+  disabled = false,
+  min,
+  max,
+  discreteValues,
+  parse,
+  format,
+  defaultNumeric,
+  formatDisplay,
+  numberMin,
+  numberMax,
+  numberStep = 'any',
+  numberPlaceholder,
+  allowLegacyText = false,
+  hideNumberInput = false
+}: MetricRangeInputProps) {
+  const { t } = useTranslation()
+  const unsetLabel = t('logs.weather_slider_unset', { defaultValue: '—' })
+
+  const isLegacyText =
+    allowLegacyText && value.trim() !== '' && parse(value) === null
+
+  const emitNumeric = useCallback(
+    (numeric: number) => {
+      onChange(format(numeric))
+    },
+    [onChange, format]
+  )
+
+  const parsed = parse(value)
+  const unset = parsed === null
+  const sliderNumeric = unset ? defaultNumeric : parsed
+
+  const useDiscrete = discreteValues != null && discreteValues.length > 1
+
+  let sliderMin = 0
+  let sliderMax = 0
+  let sliderValue = 0
+
+  if (useDiscrete) {
+    sliderMin = 0
+    sliderMax = discreteValues.length - 1
+    if (unset) {
+      sliderValue = 0
+    } else {
+      let bestIdx = 0
+      let bestDiff = Math.abs(discreteValues[0] - sliderNumeric)
+      for (let i = 1; i < discreteValues.length; i++) {
+        const diff = Math.abs(discreteValues[i] - sliderNumeric)
+        if (diff < bestDiff) {
+          bestDiff = diff
+          bestIdx = i
+        }
+      }
+      sliderValue = bestIdx
+    }
+  } else if (min != null && max != null) {
+    sliderMin = min
+    sliderMax = max
+    sliderValue = clamp(sliderNumeric, min, max)
+  }
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const idx = Number(e.target.value)
+    if (useDiscrete && discreteValues) {
+      emitNumeric(discreteValues[clamp(idx, 0, discreteValues.length - 1)])
+      return
+    }
+    if (min != null && max != null) {
+      emitNumeric(Number(e.target.value))
+    }
+  }
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value)
+  }
+
+  const handleNumberBlur = () => {
+    const next = parse(value)
+    if (next == null) {
+      if (!value.trim()) onChange('')
+      return
+    }
+    onChange(format(next))
+  }
+
+  const hintNumeric = useDiscrete && discreteValues
+    ? discreteValues[sliderValue]
+    : sliderValue
+
+  const displayLabel = unset ? unsetLabel : formatDisplay(hintNumeric, false)
+
+  if (isLegacyText) {
+    return (
+      <div className="input-group metric-range-input metric-range-input--compact">
+        <div className="metric-range-header">
+          <label htmlFor={id}>{label}</label>
+        </div>
+        <input
+          id={id}
+          type="text"
+          className="input-text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          placeholder={numberPlaceholder}
+        />
+      </div>
+    )
+  }
+
+  const hasSlider = useDiscrete || (min != null && max != null)
+
+  return (
+    <div className="input-group metric-range-input metric-range-input--compact">
+      <div className="metric-range-header">
+        <label htmlFor={hideNumberInput ? undefined : id}>{label}</label>
+        {hasSlider && (
+          <span className="metric-range-value" aria-live="polite">
+            {displayLabel}
+          </span>
+        )}
+      </div>
+      {hasSlider && (
+        <div className="metric-range-control-row">
+          <input
+            type="range"
+            className="tank-liter-slider metric-range-slider"
+            min={sliderMin}
+            max={sliderMax}
+            step={1}
+            value={sliderValue}
+            onChange={handleSliderChange}
+            disabled={disabled}
+            aria-valuemin={sliderMin}
+            aria-valuemax={sliderMax}
+            aria-valuenow={sliderValue}
+            aria-label={label}
+            aria-valuetext={displayLabel}
+          />
+          {!hideNumberInput && (
+            <input
+              id={id}
+              type="number"
+              className="input-text metric-range-number"
+              value={unset ? '' : value.replace(/\s*hPa\s*$/i, '').replace(/°\s*$/, '')}
+              onChange={handleNumberChange}
+              onBlur={handleNumberBlur}
+              disabled={disabled}
+              min={numberMin}
+              max={numberMax}
+              step={numberStep}
+              placeholder={numberPlaceholder}
+              inputMode="decimal"
+              aria-label={label}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -1,8 +1,28 @@
-import React, { createContext, useContext, useState, useRef } from 'react'
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+  useEffect,
+  useId
+} from 'react'
+import { useTranslation } from 'react-i18next'
+
+export type ConfirmLeaveChoice = 'stay' | 'save' | 'discard'

 interface DialogContextType {
  showAlert: (message: string, title?: string, confirmText?: string) => Promise<void>
  showConfirm: (message: string, title?: string, confirmText?: string, cancelText?: string) => Promise<boolean>
+  showConfirmLeave: (
+    message: string,
+    title?: string,
+    stayLabel?: string,
+    saveLabel?: string,
+    discardLabel?: string,
+    options?: { showSave?: boolean }
+  ) => Promise<ConfirmLeaveChoice>
 }

 const DialogContext = createContext<DialogContextType | undefined>(undefined)
@@ -16,73 +36,204 @@ export function useDialog() {
 }

 export function DialogProvider({ children }: { children: React.ReactNode }) {
+  const { t } = useTranslation()
+  const titleId = useId()
+  const messageId = useId()
+  const confirmRef = useRef<HTMLButtonElement>(null)
+
  const [isOpen, setIsOpen] = useState(false)
  const [title, setTitle] = useState('')
  const [message, setMessage] = useState('')
-  const [type, setType] = useState<'alert' | 'confirm'>('alert')
+  const [type, setType] = useState<'alert' | 'confirm' | 'confirm-leave'>('alert')
  const [confirmLabel, setConfirmLabel] = useState('OK')
  const [cancelLabel, setCancelLabel] = useState('Cancel')
+  const [saveLabel, setSaveLabel] = useState('')
+  const [discardLabel, setDiscardLabel] = useState('')
+  const [showSaveOption, setShowSaveOption] = useState(false)

-  const resolveRef = useRef<((val: any) => void) | null>(null)
+  const alertResolveRef = useRef<(() => void) | null>(null)
+  const confirmResolveRef = useRef<((val: boolean) => void) | null>(null)
+  const confirmLeaveResolveRef = useRef<((val: ConfirmLeaveChoice) => void) | null>(null)

-  const showAlert = (msg: string, headerTitle?: string, btnText?: string): Promise<void> => {
+  const showAlert = useCallback((msg: string, headerTitle?: string, btnText?: string): Promise<void> => {
    setMessage(msg)
    setTitle(headerTitle || '')
    setType('alert')
-    setConfirmLabel(btnText || 'OK')
+    setConfirmLabel(btnText || t('dialog.ok'))
    setIsOpen(true)

    return new Promise<void>((resolve) => {
-      resolveRef.current = resolve
+      alertResolveRef.current = resolve
    })
-  }
+  }, [t])

-  const showConfirm = (msg: string, headerTitle?: string, btnConfirm?: string, btnCancel?: string): Promise<boolean> => {
+  const showConfirm = useCallback((
+    msg: string,
+    headerTitle?: string,
+    btnConfirm?: string,
+    btnCancel?: string
+  ): Promise<boolean> => {
    setMessage(msg)
    setTitle(headerTitle || '')
    setType('confirm')
-    setConfirmLabel(btnConfirm || 'Yes')
-    setCancelLabel(btnCancel || 'No')
+    setConfirmLabel(btnConfirm || t('dialog.yes'))
+    setCancelLabel(btnCancel || t('dialog.no'))
    setIsOpen(true)

    return new Promise<boolean>((resolve) => {
-      resolveRef.current = resolve
+      confirmResolveRef.current = resolve
    })
-  }
+  }, [t])

-  const handleConfirm = () => {
-    setIsOpen(false)
-    if (resolveRef.current) {
-      resolveRef.current(type === 'confirm' ? true : undefined)
-      resolveRef.current = null
-    }
-  }
+  const showConfirmLeave = useCallback((
+    msg: string,
+    headerTitle?: string,
+    btnStay?: string,
+    btnSave?: string,
+    btnDiscard?: string,
+    options?: { showSave?: boolean }
+  ): Promise<ConfirmLeaveChoice> => {
+    setMessage(msg)
+    setTitle(headerTitle || '')
+    setType('confirm-leave')
+    setCancelLabel(btnStay || t('common.unsaved_changes_stay'))
+    setSaveLabel(btnSave || t('common.unsaved_changes_save_leave'))
+    setDiscardLabel(btnDiscard || t('common.unsaved_changes_discard'))
+    setShowSaveOption(options?.showSave !== false)
+    setIsOpen(true)

-  const handleCancel = () => {
+    return new Promise<ConfirmLeaveChoice>((resolve) => {
+      confirmLeaveResolveRef.current = resolve
+    })
+  }, [t])
+
+  const closeConfirmLeave = useCallback((choice: ConfirmLeaveChoice) => {
    setIsOpen(false)
-    if (resolveRef.current) {
-      resolveRef.current(false)
-      resolveRef.current = null
+    if (confirmLeaveResolveRef.current) {
+      confirmLeaveResolveRef.current(choice)
+      confirmLeaveResolveRef.current = null
    }
-  }
+  }, [])
+
+  const handleConfirm = useCallback(() => {
+    setIsOpen(false)
+    if (type === 'confirm' && confirmResolveRef.current) {
+      confirmResolveRef.current(true)
+      confirmResolveRef.current = null
+    } else if (alertResolveRef.current) {
+      alertResolveRef.current()
+      alertResolveRef.current = null
+    }
+  }, [type])
+
+  const handleCancel = useCallback(() => {
+    if (type === 'confirm-leave') {
+      closeConfirmLeave('stay')
+      return
+    }
+    setIsOpen(false)
+    if (confirmResolveRef.current) {
+      confirmResolveRef.current(false)
+      confirmResolveRef.current = null
+    }
+  }, [type, closeConfirmLeave])
+
+  useEffect(() => {
+    if (!isOpen) return
+    confirmRef.current?.focus()
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (type === 'confirm' || type === 'confirm-leave') handleCancel()
+        else handleConfirm()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [isOpen, type, handleCancel, handleConfirm])
+
+  const contextValue = useMemo(
+    () => ({ showAlert, showConfirm, showConfirmLeave }),
+    [showAlert, showConfirm, showConfirmLeave]
+  )

  return (
-    <DialogContext.Provider value={{ showAlert, showConfirm }}>
+    <DialogContext.Provider value={contextValue}>
      {children}
      {isOpen && (
-        <div className="custom-dialog-overlay" onClick={type === 'alert' ? handleConfirm : undefined}>
-          <div className="custom-dialog-card glass scale-in" onClick={(e) => e.stopPropagation()}>
-            {title && <h3 className="custom-dialog-title">{title}</h3>}
-            <p className="custom-dialog-message">{message}</p>
+        <div
+          className="custom-dialog-overlay"
+          onClick={type === 'confirm' || type === 'confirm-leave' ? handleCancel : handleConfirm}
+        >
+          <div
+            className="custom-dialog-card glass scale-in"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? titleId : undefined}
+            aria-describedby={messageId}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {title && (
+              <h3 id={titleId} className="custom-dialog-title">
+                {title}
+              </h3>
+            )}
+            <p id={messageId} className="custom-dialog-message">
+              {message}
+            </p>
            <div className="custom-dialog-actions">
-              {type === 'confirm' && (
-                <button type="button" className="btn secondary" onClick={handleCancel} style={{ width: 'auto', padding: '8px 20px', margin: 0 }}>
-                  {cancelLabel}
-                </button>
+              {type === 'confirm-leave' ? (
+                <>
+                  <button
+                    ref={confirmRef}
+                    type="button"
+                    className="btn secondary"
+                    onClick={handleCancel}
+                    style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+                  >
+                    {cancelLabel}
+                  </button>
+                  {showSaveOption && (
+                    <button
+                      type="button"
+                      className="btn primary"
+                      onClick={() => closeConfirmLeave('save')}
+                      style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+                    >
+                      {saveLabel}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="btn danger"
+                    onClick={() => closeConfirmLeave('discard')}
+                    style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+                  >
+                    {discardLabel}
+                  </button>
+                </>
+              ) : (
+                <>
+                  {type === 'confirm' && (
+                    <button
+                      type="button"
+                      className="btn secondary"
+                      onClick={handleCancel}
+                      style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+                    >
+                      {cancelLabel}
+                    </button>
+                  )}
+                  <button
+                    ref={confirmRef}
+                    type="button"
+                    className="btn primary"
+                    onClick={handleConfirm}
+                    style={{ width: 'auto', minWidth: '80px', padding: '8px 20px', margin: 0 }}
+                  >
+                    {confirmLabel}
+                  </button>
+                </>
              )}
-              <button type="button" className="btn primary" onClick={handleConfirm} style={{ width: 'auto', minWidth: '80px', padding: '8px 20px', margin: 0 }}>
-                {confirmLabel}
-              </button>
            </div>
          </div>
        </div>
@@ -0,0 +1,179 @@
+import { Component, useEffect, useMemo, useRef } from 'react'
+import type { ErrorInfo, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import L from 'leaflet'
+import type { TrackSegment } from '../services/statsAggregation.js'
+import { getTrackColor } from '../services/statsAggregation.js'
+import type { TrackWaypoint } from '../services/trackUpload.js'
+
+interface MultiTrackMapProps {
+  segments: TrackSegment[]
+}
+
+const LINE_WEIGHT = 4
+const LINE_OPACITY = 0.88
+
+function isValidWaypoint(wp: TrackWaypoint): boolean {
+  return Number.isFinite(Number(wp.lat)) && Number.isFinite(Number(wp.lng))
+}
+
+function toLatLngs(waypoints: TrackWaypoint[]): [number, number][] {
+  return waypoints
+    .filter(isValidWaypoint)
+    .map((wp) => [Number(wp.lat), Number(wp.lng)] as [number, number])
+}
+
+function MultiTrackMapInner({ segments }: MultiTrackMapProps) {
+  const { t } = useTranslation()
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  const segmentsKey = useMemo(
+    () =>
+      segments
+        .map((seg) =>
+          seg.waypoints
+            .filter(isValidWaypoint)
+            .map((wp) => `${seg.entryId}:${wp.lat},${wp.lng}`)
+            .join('|')
+        )
+        .join('||'),
+    [segments]
+  )
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container || segments.length === 0) return
+
+    let cancelled = false
+    const pendingFrames: number[] = []
+
+    const map = L.map(container, {
+      zoomControl: true,
+      attributionControl: true
+    })
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
+    }).addTo(map)
+
+    L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+      maxZoom: 18,
+      attribution: 'Map data &copy; <a href="http://openseamap.org">OpenSeaMap</a> contributors'
+    }).addTo(map)
+
+    const trackGroup = L.layerGroup().addTo(map)
+    const allLatLngs: [number, number][] = []
+
+    for (const segment of segments) {
+      const latLngs = toLatLngs(segment.waypoints)
+      if (latLngs.length < 2) continue
+
+      allLatLngs.push(...latLngs)
+      const color = getTrackColor(segment.colorIndex)
+
+      L.polyline(latLngs, {
+        color,
+        weight: LINE_WEIGHT,
+        opacity: LINE_OPACITY,
+        lineCap: 'round',
+        lineJoin: 'round'
+      })
+        .addTo(trackGroup)
+        .bindPopup(t('stats.day_label', { day: segment.dayOfTravel }))
+
+      L.circleMarker(latLngs[0], {
+        radius: 7,
+        fillColor: color,
+        fillOpacity: 0.95,
+        color: '#ffffff',
+        weight: 2
+      })
+        .addTo(trackGroup)
+        .bindPopup(`${t('stats.day_label', { day: segment.dayOfTravel })} – ${t('logs.track_map_start')}`)
+    }
+
+    if (allLatLngs.length > 0) {
+      pendingFrames.push(
+        requestAnimationFrame(() => {
+          if (cancelled) return
+          map.invalidateSize({ animate: false })
+          pendingFrames.push(
+            requestAnimationFrame(() => {
+              if (cancelled) return
+              try {
+                const bounds = L.latLngBounds(allLatLngs.map(([lat, lng]) => L.latLng(lat, lng)))
+                if (bounds.isValid()) {
+                  map.fitBounds(bounds, { padding: [24, 24], maxZoom: 12, animate: false })
+                }
+              } catch {
+                map.setView(allLatLngs[0], 11, { animate: false })
+              }
+            })
+          )
+        })
+      )
+    }
+
+    return () => {
+      cancelled = true
+      pendingFrames.forEach((id) => cancelAnimationFrame(id))
+      map.remove()
+    }
+  }, [segmentsKey, segments, t])
+
+  if (segments.length === 0) return null
+
+  return (
+    <div className="track-map-wrapper">
+      <div
+        className="track-map-container stats-multi-track-map"
+        ref={containerRef}
+        aria-label={t('stats.route_map_title')}
+      />
+      <div className="stats-track-legend" aria-hidden="true">
+        {segments.map((seg) => (
+          <span key={seg.entryId} className="stats-track-legend-item">
+            <span
+              className="stats-track-legend-swatch"
+              style={{ backgroundColor: getTrackColor(seg.colorIndex) }}
+            />
+            {t('stats.day_label', { day: seg.dayOfTravel })}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+class MultiTrackMapErrorBoundary extends Component<
+  { children: ReactNode; fallback: ReactNode },
+  { hasError: boolean }
+> {
+  state = { hasError: false }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('MultiTrackMap render failed:', error, info)
+  }
+
+  render() {
+    if (this.state.hasError) return this.props.fallback
+    return this.props.children
+  }
+}
+
+export default function MultiTrackMap(props: MultiTrackMapProps) {
+  const { t } = useTranslation()
+
+  return (
+    <MultiTrackMapErrorBoundary
+      fallback={<div className="track-error-msg">{t('logs.track_map_error')}</div>}
+    >
+      <MultiTrackMapInner {...props} />
+    </MultiTrackMapErrorBoundary>
+  )
+}
@@ -0,0 +1,333 @@
+import { useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import { FileText, X } from 'lucide-react'
+import type { LogEventPayload } from '../utils/logEntryPayload.js'
+import { sortLogEventsByTime } from '../utils/logEntryPayload.js'
+import { parseNmeaFile, nmeaPointsToWaypoints } from '../services/nmea/nmeaParse.js'
+import { filterPointsForDate } from '../services/nmea/nmeaTimeSeries.js'
+import { generateNmeaJournalCandidates } from '../services/nmea/nmeaJournalGenerator.js'
+import type { NmeaImportMode, NmeaParseResult } from '../services/nmea/nmeaTypes.js'
+import { saveNmeaArchive, recordNmeaFileImport, type NmeaArchiveRecord } from '../services/nmeaArchive.js'
+import { nmeaFileCrc32 } from '../utils/crc32.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import type { TrackWaypoint } from '../services/trackUpload.js'
+
+interface NmeaImportWizardProps {
+  open: boolean
+  onClose: () => void
+  logbookId: string
+  entryId: string
+  entryDate: string
+  nmeaArchive: NmeaArchiveRecord | null
+  onImport: (events: LogEventPayload[], waypoints?: TrackWaypoint[]) => void
+}
+
+type WizardStep = 'config' | 'preview' | 'archive'
+
+export default function NmeaImportWizard({
+  open,
+  onClose,
+  logbookId,
+  entryId,
+  entryDate,
+  nmeaArchive,
+  onImport
+}: NmeaImportWizardProps) {
+  const { t } = useTranslation()
+  const [step, setStep] = useState<WizardStep>('config')
+  const [parseResult, setParseResult] = useState<NmeaParseResult | null>(null)
+  const [mode, setMode] = useState<NmeaImportMode>('both')
+  const [intervalMinutes, setIntervalMinutes] = useState(60)
+  const [importTrack, setImportTrack] = useState(true)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+  const [error, setError] = useState<string | null>(null)
+  const [pendingRaw, setPendingRaw] = useState<{ filename: string; text: string } | null>(null)
+  const [duplicateFile, setDuplicateFile] = useState(false)
+
+  const filteredPoints = useMemo(() => {
+    if (!parseResult) return []
+    return filterPointsForDate(parseResult.points, entryDate)
+  }, [parseResult, entryDate])
+
+  const candidates = useMemo(() => {
+    if (!parseResult || filteredPoints.length === 0) return []
+    return generateNmeaJournalCandidates({
+      points: filteredPoints,
+      mode,
+      intervalMinutes,
+      t
+    }).candidates
+  }, [parseResult, filteredPoints, mode, intervalMinutes, t])
+
+  const reset = () => {
+    setStep('config')
+    setParseResult(null)
+    setMode('both')
+    setIntervalMinutes(60)
+    setImportTrack(true)
+    setSelectedIds(new Set())
+    setError(null)
+    setDuplicateFile(false)
+    setPendingRaw(null)
+  }
+
+  const handleClose = () => {
+    reset()
+    onClose()
+  }
+
+  const handleFile = (file: File) => {
+    setError(null)
+    setDuplicateFile(false)
+    const reader = new FileReader()
+    reader.onload = () => {
+      try {
+        const text = String(reader.result ?? '')
+        const crc32 = nmeaFileCrc32(text)
+        const alreadyImported = nmeaArchive?.importedFiles.some((item) => item.crc32 === crc32) ?? false
+        setDuplicateFile(alreadyImported)
+        const result = parseNmeaFile(text, file.name)
+        if (result.points.length === 0) {
+          setError(t('logs.nmea_error_no_samples'))
+          return
+        }
+        setParseResult(result)
+        setPendingRaw({ filename: file.name, text })
+        const generated = generateNmeaJournalCandidates({
+          points: filterPointsForDate(result.points, entryDate),
+          mode,
+          intervalMinutes,
+          t
+        }).candidates
+        setSelectedIds(new Set(generated.map((c) => c.id)))
+        trackPlausibleEvent(PlausibleEvents.NMEA_UPLOADED, {
+          duplicate: alreadyImported,
+          lines: result.stats.parsedLines,
+          candidates: generated.length,
+          has_position: !result.warnings.includes('no_position')
+        })
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('logs.nmea_error_parse'))
+      }
+    }
+    reader.onerror = () => setError(t('logs.nmea_error_read'))
+    reader.readAsText(file)
+  }
+
+  const toggleAll = (checked: boolean) => {
+    setSelectedIds(checked ? new Set(candidates.map((c) => c.id)) : new Set())
+  }
+
+  const toggleOne = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const goPreview = () => {
+    if (!parseResult) {
+      setError(t('logs.nmea_error_no_file'))
+      return
+    }
+    const generated = generateNmeaJournalCandidates({
+      points: filteredPoints,
+      mode,
+      intervalMinutes,
+      t
+    }).candidates
+    setSelectedIds(new Set(generated.map((c) => c.id)))
+    setStep('preview')
+  }
+
+  const applyImport = async () => {
+    const picked = candidates.filter((c) => selectedIds.has(c.id)).map((c) => c.event)
+    if (picked.length === 0) {
+      setError(t('logs.nmea_error_no_selection'))
+      return
+    }
+    const waypoints = importTrack ? nmeaPointsToWaypoints(filteredPoints) : undefined
+    onImport(sortLogEventsByTime(picked), waypoints)
+    if (pendingRaw) {
+      try {
+        await recordNmeaFileImport(logbookId, entryId, pendingRaw.filename, pendingRaw.text)
+      } catch (err) {
+        console.warn('NMEA import CRC record failed:', err)
+      }
+    }
+    trackPlausibleEvent(PlausibleEvents.NMEA_IMPORTED, {
+      mode,
+      events: picked.length,
+      track: importTrack && (waypoints?.length ?? 0) > 0
+    })
+    setStep('archive')
+  }
+
+  const finishArchive = async (archive: boolean) => {
+    try {
+      if (archive && pendingRaw) {
+        await saveNmeaArchive(logbookId, entryId, pendingRaw.filename, pendingRaw.text)
+      }
+    } catch (err) {
+      console.warn('NMEA archive save failed:', err)
+    }
+    handleClose()
+  }
+
+  useEffect(() => {
+    if (!open) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') handleClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      document.body.style.overflow = prevOverflow
+    }
+  }, [open])
+
+  if (!open) return null
+
+  return createPortal(
+    <div className="disclaimer-modal-overlay" onClick={handleClose}>
+      <div className="disclaimer-modal-panel" onClick={(e) => e.stopPropagation()}>
+        <div className="auth-card glass registration-disclaimer registration-disclaimer--modal feedback-modal">
+          <button
+            type="button"
+            className="registration-disclaimer__close feedback-modal__close"
+            onClick={handleClose}
+            aria-label={t('logs.nmea_cancel')}
+          >
+            <X size={18} />
+          </button>
+
+          <div className="auth-header">
+            <FileText className="auth-icon accent" size={40} />
+            <h2>{t('logs.nmea_import_title')}</h2>
+          </div>
+
+          {error && <div className="track-error-msg">{error}</div>}
+
+          {duplicateFile && (
+            <div className="nmea-import-warning" role="status">
+              {t('logs.nmea_warn_duplicate_file')}
+            </div>
+          )}
+
+          {step === 'config' && (
+            <>
+              <p className="registration-disclaimer__intro">{t('logs.nmea_import_intro')}</p>
+              <label className="feedback-form__field">
+                <span>{t('logs.nmea_file_label')}</span>
+                <input
+                  type="file"
+                  accept=".nmea,.log,.txt"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0]
+                    if (file) handleFile(file)
+                  }}
+                />
+              </label>
+
+              {parseResult && (
+                <div className="nmea-import-summary">
+                  <p>{t('logs.nmea_stats', {
+                    lines: parseResult.stats.parsedLines,
+                    types: parseResult.stats.sentenceTypes.join(', ')
+                  })}</p>
+                  {parseResult.warnings.includes('no_position') && (
+                    <p>{t('logs.nmea_warn_no_position')}</p>
+                  )}
+                </div>
+              )}
+
+              <fieldset className="nmea-import-mode">
+                <legend>{t('logs.nmea_mode_label')}</legend>
+                <label><input type="radio" name="nmea-mode" checked={mode === 'interval'} onChange={() => setMode('interval')} /> {t('logs.nmea_mode_interval')}</label>
+                <label><input type="radio" name="nmea-mode" checked={mode === 'change'} onChange={() => setMode('change')} /> {t('logs.nmea_mode_change')}</label>
+                <label><input type="radio" name="nmea-mode" checked={mode === 'both'} onChange={() => setMode('both')} /> {t('logs.nmea_mode_both')}</label>
+              </fieldset>
+
+              {(mode === 'interval' || mode === 'both') && (
+                <label className="feedback-form__field">
+                  <span>{t('logs.nmea_interval_label')}</span>
+                  <select value={intervalMinutes} onChange={(e) => setIntervalMinutes(Number(e.target.value))}>
+                    <option value={30}>30 min</option>
+                    <option value={60}>60 min</option>
+                    <option value={90}>90 min</option>
+                    <option value={120}>120 min</option>
+                  </select>
+                </label>
+              )}
+
+              <label className="nmea-import-checkbox">
+                <input type="checkbox" checked={importTrack} onChange={(e) => setImportTrack(e.target.checked)} />
+                {t('logs.nmea_import_track')}
+              </label>
+
+              <div className="auth-actions feedback-form__actions">
+                <button type="button" className="btn secondary" onClick={handleClose}>{t('logs.nmea_cancel')}</button>
+                <button type="button" className="btn primary" onClick={goPreview} disabled={!parseResult}>
+                  {t('logs.nmea_preview')}
+                </button>
+              </div>
+            </>
+          )}
+
+          {step === 'preview' && (
+            <>
+              <p>{t('logs.nmea_preview_hint', { count: candidates.length })}</p>
+              <div className="nmea-preview-actions">
+                <button type="button" className="btn secondary" onClick={() => toggleAll(true)}>{t('logs.nmea_select_all')}</button>
+                <button type="button" className="btn secondary" onClick={() => toggleAll(false)}>{t('logs.nmea_select_none')}</button>
+              </div>
+              <div className="nmea-preview-list">
+                {candidates.map((c) => (
+                  <label key={c.id} className="nmea-preview-row">
+                    <input
+                      type="checkbox"
+                      className="nmea-preview-row__check"
+                      checked={selectedIds.has(c.id)}
+                      onChange={() => toggleOne(c.id)}
+                    />
+                    <div className="nmea-preview-row__body">
+                      <div className="nmea-preview-row__meta">
+                        <span className="nmea-preview-time">{c.event.time}</span>
+                        <span className="nmea-preview-source">{t(`logs.nmea_source_${c.source}`)}</span>
+                      </div>
+                      <span className="nmea-preview-remarks">{c.event.remarks || c.event.mgk || '—'}</span>
+                    </div>
+                  </label>
+                ))}
+              </div>
+              <div className="auth-actions feedback-form__actions">
+                <button type="button" className="btn secondary" onClick={() => setStep('config')}>{t('logs.nmea_back')}</button>
+                <button type="button" className="btn primary" onClick={applyImport}>{t('logs.nmea_apply')}</button>
+              </div>
+            </>
+          )}
+
+          {step === 'archive' && (
+            <>
+              <p>{t('logs.nmea_archive_question')}</p>
+              <div className="auth-actions feedback-form__actions">
+                <button type="button" className="btn secondary" onClick={() => finishArchive(false)}>
+                  {t('logs.nmea_archive_discard')}
+                </button>
+                <button type="button" className="btn primary" onClick={() => finishArchive(true)}>
+                  {t('logs.nmea_archive_keep')}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Fingerprint, Loader2, AlertTriangle } from 'lucide-react'
 import type { PasskeySignature } from '../types/signatures.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'

 interface PasskeySignButtonProps {
  label: string
@@ -42,9 +43,7 @@ export default function PasskeySignButton({
    }
  }

-  const formattedDate = signature
-    ? new Date(signature.signedAt).toLocaleString(i18n.language === 'de' ? 'de-DE' : 'en-GB')
-    : ''
+  const formattedDate = signature ? formatAppDateTime(signature.signedAt, i18n.language) : ''

  return (
    <div className="passkey-sign-block">
@@ -0,0 +1,313 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Users, User, Plus, Trash2, Edit2, X, Camera, Save } from 'lucide-react'
+import { useDialog } from './ModalDialog.tsx'
+import { resizeImageFile } from '../utils/resizeImageFile.js'
+import type { PersonData, PersonRole } from '../types/person.js'
+import { MAX_POOL_CREW_MEMBERS } from '../types/person.js'
+import {
+  loadPersonPool,
+  savePerson,
+  deletePerson,
+  filterSkippers,
+  filterCrew,
+  type DecryptedPerson
+} from '../services/personPool.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+const emptyPerson = (role: PersonRole): PersonData => ({
+  name: '',
+  address: '',
+  birthDate: '',
+  phone: '',
+  nationality: '',
+  passportNumber: '',
+  bloodType: '',
+  allergies: '',
+  diseases: '',
+  role,
+  photo: null
+})
+
+export default function PersonPoolForm() {
+  const { t } = useTranslation()
+  const { showConfirm } = useDialog()
+  const [people, setPeople] = useState<DecryptedPerson[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showForm, setShowForm] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [formRole, setFormRole] = useState<PersonRole>('crew')
+  const [form, setForm] = useState<PersonData>(emptyPerson('crew'))
+  const [saving, setSaving] = useState(false)
+  const [photoError, setPhotoError] = useState<string | null>(null)
+  const fileRef = React.useRef<HTMLInputElement>(null)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      setPeople(await loadPersonPool())
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void reload()
+  }, [reload])
+
+  const openAdd = (role: PersonRole) => {
+    setEditingId(null)
+    setFormRole(role)
+    setForm(emptyPerson(role))
+    setPhotoError(null)
+    setShowForm(true)
+  }
+
+  const openEdit = (person: DecryptedPerson) => {
+    setEditingId(person.payloadId)
+    setFormRole(person.data.role)
+    setForm({ ...person.data })
+    setPhotoError(null)
+    setShowForm(true)
+  }
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.name.trim()) return
+    setSaving(true)
+    setError(null)
+    try {
+      const id = editingId ?? window.crypto.randomUUID()
+      await savePerson(id, { ...form, role: formRole }, !editingId)
+      setShowForm(false)
+      trackPlausibleEvent(PlausibleEvents.CREW_SAVED, { role: formRole, context: 'person_pool' })
+      await reload()
+    } catch (err: unknown) {
+      if (err instanceof Error && err.message === 'MAX_CREW') {
+        setError(t('crew.max_crew'))
+      } else {
+        setError(err instanceof Error ? err.message : 'Failed to save')
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    if (
+      !(await showConfirm(
+        t('person_pool.delete_confirm'),
+        t('person_pool.title'),
+        t('logs.confirm_yes'),
+        t('logs.confirm_no')
+      ))
+    ) {
+      return
+    }
+    try {
+      await deletePerson(id)
+      await reload()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to delete')
+    }
+  }
+
+  const skippers = filterSkippers(people)
+  const crewList = filterCrew(people)
+
+  if (loading) {
+    return (
+      <div className="tab-placeholder">
+        <Users className="header-logo spin" size={48} />
+        <p>{t('person_pool.loading')}</p>
+      </div>
+    )
+  }
+
+  const renderCard = (person: DecryptedPerson) => (
+    <div key={person.payloadId} className="crew-member-card glass">
+      <div className="crew-card-header">
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          {person.data.photo ? (
+            <img src={person.data.photo} alt="" className="crew-card-avatar" />
+          ) : (
+            <div className="crew-card-avatar-placeholder">
+              <User size={18} />
+            </div>
+          )}
+          <h4>{person.data.name}</h4>
+        </div>
+        <div className="card-actions">
+          <button type="button" className="btn-icon" onClick={() => openEdit(person)} title="Edit">
+            <Edit2 size={14} />
+          </button>
+          <button
+            type="button"
+            className="btn-icon danger"
+            onClick={() => void handleDelete(person.payloadId)}
+            title="Delete"
+          >
+            <Trash2 size={14} />
+          </button>
+        </div>
+      </div>
+      {person.data.phone && (
+        <p className="help-text">
+          <strong>{t('crew.phone')}:</strong> {person.data.phone}
+        </p>
+      )}
+    </div>
+  )
+
+  return (
+    <section className="form-card" data-tour="profile-crew-pool">
+      <div className="form-header">
+        <Users size={24} className="form-icon" />
+        <h2>{t('person_pool.title')}</h2>
+      </div>
+      <p className="help-text mb-4">{t('person_pool.subtitle')}</p>
+      {error && <div className="auth-error mb-4">{error}</div>}
+
+      <div className="section-title-bar mb-4">
+        <h3>{t('person_pool.skippers_section')}</h3>
+        {!showForm && (
+          <button type="button" className="btn primary" style={{ width: 'auto', padding: '8px 16px' }} onClick={() => openAdd('skipper')}>
+            <Plus size={16} />
+            {t('person_pool.add_skipper')}
+          </button>
+        )}
+      </div>
+      {skippers.length === 0 ? (
+        <p className="help-text mb-4">{t('person_pool.no_skippers')}</p>
+      ) : (
+        <div className="crew-grid mb-6">{skippers.map(renderCard)}</div>
+      )}
+
+      <div className="section-title-bar mb-4">
+        <h3>{t('person_pool.crew_section')}</h3>
+        {!showForm && crewList.length < MAX_POOL_CREW_MEMBERS && (
+          <button type="button" className="btn primary" style={{ width: 'auto', padding: '8px 16px' }} onClick={() => openAdd('crew')}>
+            <Plus size={16} />
+            {t('person_pool.add_crew')}
+          </button>
+        )}
+      </div>
+      {crewList.length === 0 ? (
+        <p className="help-text">{t('person_pool.no_crew')}</p>
+      ) : (
+        <div className="crew-grid">{crewList.map(renderCard)}</div>
+      )}
+
+      {showForm && (
+        <form onSubmit={(e) => void handleSave(e)} className="member-editor-card glass mt-6">
+          <div className="editor-header mb-4">
+            <h3>
+              {editingId
+                ? formRole === 'skipper'
+                  ? t('person_pool.edit_skipper')
+                  : t('crew.edit_crew')
+                : formRole === 'skipper'
+                  ? t('person_pool.add_skipper')
+                  : t('crew.add_crew')}
+            </h3>
+            <button type="button" className="btn-icon" onClick={() => setShowForm(false)}>
+              <X size={16} />
+            </button>
+          </div>
+          <div className="form-grid">
+            <div className="vessel-photo-wrapper">
+              <div className="vessel-photo-preview" onClick={() => fileRef.current?.click()}>
+                {form.photo ? (
+                  <img src={form.photo} alt="" className="vessel-photo" />
+                ) : (
+                  <div className="vessel-photo-placeholder">
+                    <User size={48} />
+                  </div>
+                )}
+                <div className="vessel-photo-overlay">
+                  <Camera size={24} />
+                </div>
+              </div>
+              <input
+                ref={fileRef}
+                type="file"
+                accept="image/*"
+                style={{ display: 'none' }}
+                onChange={(e) => {
+                  const file = e.target.files?.[0]
+                  if (!file) return
+                  void resizeImageFile(file)
+                    .then((photo) => setForm((f) => ({ ...f, photo })))
+                    .catch((err: unknown) => {
+                      setPhotoError(err instanceof Error ? err.message : 'Image error')
+                    })
+                }}
+              />
+              {photoError && <div className="auth-error mt-2">{photoError}</div>}
+            </div>
+            <div className="input-group">
+              <label>{t('crew.name')} *</label>
+              <input
+                className="input-text"
+                value={form.name}
+                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+                required
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.address')}</label>
+              <input
+                className="input-text"
+                value={form.address}
+                onChange={(e) => setForm((f) => ({ ...f, address: e.target.value }))}
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.birthdate')}</label>
+              <input
+                type="date"
+                className="input-text"
+                value={form.birthDate}
+                onChange={(e) => setForm((f) => ({ ...f, birthDate: e.target.value }))}
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.phone')}</label>
+              <input
+                className="input-text"
+                value={form.phone}
+                onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.nationality')}</label>
+              <input
+                className="input-text"
+                value={form.nationality}
+                onChange={(e) => setForm((f) => ({ ...f, nationality: e.target.value }))}
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.passport')}</label>
+              <input
+                className="input-text"
+                value={form.passportNumber}
+                onChange={(e) => setForm((f) => ({ ...f, passportNumber: e.target.value }))}
+              />
+            </div>
+          </div>
+          <div className="editor-actions mt-4">
+            <button type="submit" className="btn primary" disabled={saving || !form.name.trim()}>
+              <Save size={18} />
+              {t('crew.save_member')}
+            </button>
+          </div>
+        </form>
+      )}
+    </section>
+  )
+}
@@ -1,13 +1,16 @@
 import React, { useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { db } from '../services/db.js'
 import { getActiveMasterKey } from '../services/auth.js'
 import { getLogbookKey } from '../services/logbookKeys.js'
-import { encryptJson, decryptJson } from '../services/crypto.js'
-import { syncLogbook } from '../services/sync.js'
+import { decryptJson } from '../services/crypto.js'
+import { saveEntryPhoto, deleteEntryPhoto } from '../services/photoAttachments.js'
+import { fileToCompressedJpegDataUrl } from '../utils/imageCompress.js'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { useDialog } from './ModalDialog.tsx'
-import { Camera, Trash2 } from 'lucide-react'
+import { Camera, Image, Trash2, X, ChevronDown, ChevronUp, ChevronLeft, ChevronRight } from 'lucide-react'
+import { probeCameraAvailability } from '../utils/cameraAvailability.js'

 interface PhotoCaptureProps {
  entryId: string
@@ -26,12 +29,87 @@ interface DecryptedPhoto {
 export default function PhotoCapture({ entryId, logbookId, readOnly = false, preloadedPhotos }: PhotoCaptureProps) {
  const { t } = useTranslation()
  const { showConfirm } = useDialog()
+  const [collapsed, setCollapsed] = useState(true)
  const [caption, setCaption] = useState('')
  const [uploading, setUploading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [decryptedPhotos, setDecryptedPhotos] = useState<DecryptedPhoto[]>([])
+  const [hasCamera, setHasCamera] = useState(false)
+  const [maximizedPhoto, setMaximizedPhoto] = useState<DecryptedPhoto | null>(null)
  
  const fileInputRef = useRef<HTMLInputElement>(null)
+  const cameraInputRef = useRef<HTMLInputElement>(null)
+  const touchStartX = useRef<number>(0)
+  const touchEndX = useRef<number>(0)
+
+  const goToNext = () => {
+    if (!maximizedPhoto || decryptedPhotos.length <= 1) return
+    const currentIndex = decryptedPhotos.findIndex(p => p.payloadId === maximizedPhoto.payloadId)
+    if (currentIndex === -1) return
+    const nextIndex = (currentIndex + 1) % decryptedPhotos.length
+    setMaximizedPhoto(decryptedPhotos[nextIndex])
+  }
+
+  const goToPrev = () => {
+    if (!maximizedPhoto || decryptedPhotos.length <= 1) return
+    const currentIndex = decryptedPhotos.findIndex(p => p.payloadId === maximizedPhoto.payloadId)
+    if (currentIndex === -1) return
+    const prevIndex = (currentIndex - 1 + decryptedPhotos.length) % decryptedPhotos.length
+    setMaximizedPhoto(decryptedPhotos[prevIndex])
+  }
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    touchStartX.current = e.targetTouches[0].clientX
+    touchEndX.current = e.targetTouches[0].clientX
+  }
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    touchEndX.current = e.targetTouches[0].clientX
+  }
+
+  const handleTouchEnd = () => {
+    if (!touchStartX.current || !touchEndX.current) return
+    const diffX = touchStartX.current - touchEndX.current
+    const threshold = 50
+    if (diffX > threshold) {
+      goToNext()
+    } else if (diffX < -threshold) {
+      goToPrev()
+    }
+    touchStartX.current = 0
+    touchEndX.current = 0
+  }
+
+  useEffect(() => {
+    if (!maximizedPhoto) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setMaximizedPhoto(null)
+      } else if (e.key === 'ArrowLeft' || e.key === 'Left') {
+        goToPrev()
+      } else if (e.key === 'ArrowRight' || e.key === 'Right') {
+        goToNext()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [maximizedPhoto, decryptedPhotos])
+
+  useEffect(() => {
+    let cancelled = false
+    probeCameraAvailability().then((avail) => {
+      if (!cancelled) {
+        setHasCamera(avail === 'available')
+      }
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])

  // Reactively query local photos database
  const localPhotos = useLiveQuery(
@@ -89,201 +167,260 @@ export default function PhotoCapture({ entryId, logbookId, readOnly = false, pre
    setUploading(true)
    setError(null)

-    const reader = new FileReader()
-    reader.onload = (event) => {
-      const img = new Image()
-      img.onload = async () => {
-        try {
-          const canvas = document.createElement('canvas')
-          const ctx = canvas.getContext('2d')
-          if (!ctx) throw new Error('Could not get canvas context')
-
-          let width = img.width
-          let height = img.height
-          const MAX_WIDTH = 1280
-          const MAX_HEIGHT = 720
-
-          // Calculate resizing conserving aspect ratio
-          if (width > MAX_WIDTH || height > MAX_HEIGHT) {
-            const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height)
-            width = Math.round(width * ratio)
-            height = Math.round(height * ratio)
-          }
-
-          canvas.width = width
-          canvas.height = height
-          ctx.drawImage(img, 0, 0, width, height)
-
-          // Compress to JPEG, 70% quality
-          const compressedBase64 = canvas.toDataURL('image/jpeg', 0.7)
-
-          // Encrypt
-          const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
-          if (!masterKey) throw new Error('Encryption key not found. Please log in.')
-
-          const photoId = window.crypto.randomUUID()
-          const photoPayload = {
-            image: compressedBase64,
-            caption: caption.trim()
-          }
-
-          const encrypted = await encryptJson(photoPayload, masterKey)
-          const now = new Date().toISOString()
-
-          // Store locally
-          await db.photos.put({
-            payloadId: photoId,
-            entryId,
-            logbookId,
-            encryptedData: encrypted.ciphertext,
-            iv: encrypted.iv,
-            tag: encrypted.tag,
-            caption: '', // stored encrypted inside payload
-            updatedAt: now
-          })
-
-          // Queue for background sync
-          await db.syncQueue.put({
-            action: 'create',
-            type: 'photo',
-            payloadId: photoId,
-            logbookId,
-            data: JSON.stringify({
-              encryptedData: encrypted.ciphertext,
-              iv: encrypted.iv,
-              tag: encrypted.tag,
-              entryId
-            }),
-            updatedAt: now
-          })
-
-          setCaption('')
-          if (fileInputRef.current) fileInputRef.current.value = ''
-          
-          syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
-        } catch (err: any) {
-          console.error('Failed to process image:', err)
-          setError(err.message || 'Failed to process image')
-        } finally {
-          setUploading(false)
-        }
-      }
-      img.src = event.target?.result as string
+    try {
+      const compressedBase64 = await fileToCompressedJpegDataUrl(file)
+      await saveEntryPhoto({
+        logbookId,
+        entryId,
+        imageDataUrl: compressedBase64,
+        caption: caption.trim(),
+        analyticsContext: 'logbook'
+      })
+      setCaption('')
+      if (fileInputRef.current) fileInputRef.current.value = ''
+    } catch (err: unknown) {
+      console.error('Failed to process image:', err)
+      setError(err instanceof Error ? err.message : 'Failed to process image')
+    } finally {
+      setUploading(false)
    }
-    reader.readAsDataURL(file)
  }

  const handleDelete = async (photoId: string) => {
    if (await showConfirm(t('logs.photo_delete_confirm'), t('logs.photos_title'), t('logs.confirm_yes'), t('logs.confirm_no'))) {
      try {
-        const now = new Date().toISOString()
-        
-        await db.photos.delete(photoId)
-        
-        await db.syncQueue.put({
-          action: 'delete',
-          type: 'photo',
-          payloadId: photoId,
-          logbookId,
-          data: '',
-          updatedAt: now
-        })
-
-        syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
-      } catch (err: any) {
+        await deleteEntryPhoto(logbookId, photoId)
+      } catch (err: unknown) {
        console.error('Failed to delete photo:', err)
      }
    }
  }

-  const triggerSelect = () => {
+  const triggerGallerySelect = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click()
    }
  }

+  const triggerCameraSelect = () => {
+    if (cameraInputRef.current) {
+      cameraInputRef.current.click()
+    }
+  }
+
  return (
    <div className="form-card mt-6">
-      <div className="form-header mb-4">
-        <Camera size={20} className="form-icon" />
-        <h3>{t('logs.photos_title')}</h3>
+      <div
+        className="form-header accordion-header"
+        onClick={() => setCollapsed(!collapsed)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setCollapsed(!collapsed)
+          }
+        }}
+        role="button"
+        aria-expanded={!collapsed}
+        tabIndex={0}
+      >
+        <div className="accordion-header-title">
+          <Camera size={20} className="form-icon" />
+          <h3>{t('logs.photos_title')}</h3>
+        </div>
+        {collapsed ? (
+          <ChevronDown size={20} className="accordion-chevron" />
+        ) : (
+          <ChevronUp size={20} className="accordion-chevron" />
+        )}
      </div>

-      {error && <div className="auth-error mb-4">{error}</div>}
+      {!collapsed && (
+        <div style={{ marginTop: '16px' }}>
+          {error && <div className="auth-error mb-4">{error}</div>}

-      {/* Upload area */}
-      {/* Upload Form */}
-      {!readOnly && (
-        <div className="member-editor-card glass mb-6" style={{ padding: '16px' }}>
-          <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-end', flexWrap: 'wrap' }}>
-            <div className="input-group" style={{ flex: '1', minWidth: '200px', margin: 0 }}>
-              <label>{t('logs.photo_caption_label')}</label>
-              <input
-                type="text"
-                placeholder={t('logs.photo_caption_placeholder')}
-                className="input-text"
-                value={caption}
-                onChange={(e) => setCaption(e.target.value)}
-                disabled={uploading}
-              />
-            </div>
+          {/* Upload area */}
+          {/* Upload Form */}
+          {!readOnly && (
+            <div className="member-editor-card glass mb-6" style={{ padding: '16px' }}>
+              <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-end', flexWrap: 'wrap' }}>
+                <div className="input-group" style={{ flex: '1', minWidth: '200px', margin: 0 }}>
+                  <label>{t('logs.photo_caption_label')}</label>
+                  <input
+                    type="text"
+                    placeholder={t('logs.photo_caption_placeholder')}
+                    className="input-text"
+                    value={caption}
+                    onChange={(e) => setCaption(e.target.value)}
+                    disabled={uploading}
+                  />
+                </div>

-            <input
-              type="file"
-              accept="image/*"
-              capture="environment"
-              ref={fileInputRef}
-              onChange={handleFileChange}
-              style={{ display: 'none' }}
-            />
+                <input
+                  type="file"
+                  accept="image/*"
+                  ref={fileInputRef}
+                  onChange={handleFileChange}
+                  style={{ display: 'none' }}
+                />

-            <button
-              type="button"
-              className="btn primary"
-              onClick={triggerSelect}
-              disabled={uploading}
-              style={{ width: 'auto', padding: '12px 24px', display: 'flex', gap: '8px', alignItems: 'center' }}
-            >
-              {uploading ? (
-                <span className="spin">⏳</span>
-              ) : (
-                <Camera size={16} />
-              )}
-              {uploading ? t('logs.photo_processing') : t('logs.photo_btn')}
-            </button>
-          </div>
-        </div>
-      )}
+                <input
+                  type="file"
+                  accept="image/*"
+                  capture="environment"
+                  ref={cameraInputRef}
+                  onChange={handleFileChange}
+                  style={{ display: 'none' }}
+                />

-      {/* Photo Grid */}
-      {decryptedPhotos.length === 0 ? (
-        <div className="dashboard-status-msg">{t('logs.no_photos')}</div>
-      ) : (
-        <div className="photo-attachments-grid">
-          {decryptedPhotos.map((photo) => (
-            <div key={photo.payloadId} className="photo-card glass">
-              <div className="photo-container">
-                <img src={photo.image} alt={photo.caption || 'Attachment'} loading="lazy" />
-                {!readOnly && (
+                {hasCamera ? (
+                  <>
+                    <button
+                      type="button"
+                      className="btn primary"
+                      onClick={triggerCameraSelect}
+                      disabled={uploading}
+                      style={{ width: 'auto', padding: '12px 20px', display: 'flex', gap: '8px', alignItems: 'center' }}
+                    >
+                      {uploading ? (
+                        <span className="spin">⏳</span>
+                      ) : (
+                        <Camera size={16} />
+                      )}
+                      {uploading ? t('logs.photo_processing') : t('logs.photo_camera_btn')}
+                    </button>
+                    <button
+                      type="button"
+                      className="btn secondary"
+                      onClick={triggerGallerySelect}
+                      disabled={uploading}
+                      style={{ width: 'auto', padding: '12px 20px', display: 'flex', gap: '8px', alignItems: 'center' }}
+                    >
+                      {uploading ? (
+                        <span className="spin">⏳</span>
+                      ) : (
+                        <Image size={16} />
+                      )}
+                      {uploading ? t('logs.photo_processing') : t('logs.photo_gallery_btn')}
+                    </button>
+                  </>
+                ) : (
                  <button
                    type="button"
-                    className="photo-btn-delete"
-                    onClick={() => handleDelete(photo.payloadId)}
-                    title="Remove photo"
+                    className="btn primary"
+                    onClick={triggerGallerySelect}
+                    disabled={uploading}
+                    style={{ width: 'auto', padding: '12px 24px', display: 'flex', gap: '8px', alignItems: 'center' }}
                  >
-                    <Trash2 size={16} />
+                    {uploading ? (
+                      <span className="spin">⏳</span>
+                    ) : (
+                      <Camera size={16} />
+                    )}
+                    {uploading ? t('logs.photo_processing') : t('logs.photo_btn')}
                  </button>
                )}
              </div>
-              {photo.caption && (
-                <div className="photo-caption-bar">
-                  <span>{photo.caption}</span>
-                </div>
-              )}
            </div>
-          ))}
+          )}
+
+          {/* Photo Grid */}
+          {decryptedPhotos.length === 0 ? (
+            <div className="dashboard-status-msg">{t('logs.no_photos')}</div>
+          ) : (
+            <div className="photo-attachments-grid">
+              {decryptedPhotos.map((photo) => (
+                <div
+                  key={photo.payloadId}
+                  className="photo-card glass"
+                  onClick={() => setMaximizedPhoto(photo)}
+                  style={{ cursor: 'pointer' }}
+                >
+                  <div className="photo-container">
+                    <img src={photo.image} alt={photo.caption || 'Attachment'} loading="lazy" />
+                    {!readOnly && (
+                      <button
+                        type="button"
+                        className="photo-btn-delete"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDelete(photo.payloadId)
+                        }}
+                        title="Remove photo"
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                    )}
+                  </div>
+                  {photo.caption && (
+                    <div className="photo-caption-bar">
+                      <span>{photo.caption}</span>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
        </div>
      )}
+
+      {maximizedPhoto && createPortal(
+        <div
+          className="photo-maximized-overlay"
+          onClick={() => setMaximizedPhoto(null)}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+        >
+          {decryptedPhotos.length > 1 && (
+            <>
+              <button
+                type="button"
+                className="photo-maximized-nav photo-maximized-prev"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  goToPrev()
+                }}
+                aria-label={t('common.previous') || 'Previous'}
+              >
+                <ChevronLeft size={32} />
+              </button>
+              <button
+                type="button"
+                className="photo-maximized-nav photo-maximized-next"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  goToNext()
+                }}
+                aria-label={t('common.next') || 'Next'}
+              >
+                <ChevronRight size={32} />
+              </button>
+            </>
+          )}
+
+          <div className="photo-maximized-container" onClick={(e) => e.stopPropagation()}>
+            <button
+              type="button"
+              className="photo-maximized-close"
+              onClick={() => setMaximizedPhoto(null)}
+              aria-label={t('common.close') || 'Close'}
+            >
+              <X size={24} />
+            </button>
+            <img
+              src={maximizedPhoto.image}
+              alt={maximizedPhoto.caption || 'Maximized Attachment'}
+              className="photo-maximized-img"
+            />
+            {maximizedPhoto.caption && (
+              <div className="photo-maximized-caption">
+                {maximizedPhoto.caption}
+              </div>
+            )}
+          </div>
+        </div>,
+        document.body
+      )}
    </div>
  )
 }
@@ -0,0 +1,36 @@
+import { ChevronDown } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+interface ProfileAccordionSectionProps {
+  id: string
+  title: string
+  icon?: ReactNode
+  defaultOpen?: boolean
+  /** When set, forces the section open (e.g. during onboarding tour). */
+  forceOpen?: boolean
+  children: ReactNode
+}
+
+export default function ProfileAccordionSection({
+  id,
+  title,
+  icon,
+  defaultOpen = false,
+  forceOpen,
+  children
+}: ProfileAccordionSectionProps) {
+  const isOpen = forceOpen !== undefined ? forceOpen : defaultOpen
+
+  return (
+    <details className="profile-accordion" open={isOpen || undefined} data-section={id}>
+      <summary className="profile-accordion__summary">
+        <span className="profile-accordion__title">
+          {icon}
+          <span>{title}</span>
+        </span>
+        <ChevronDown size={20} className="profile-accordion__chevron" aria-hidden="true" />
+      </summary>
+      <div className="profile-accordion__body">{children}</div>
+    </details>
+  )
+}
@@ -0,0 +1,25 @@
+import { useTranslation } from 'react-i18next'
+import { User } from 'lucide-react'
+
+interface ProfileHeaderButtonProps {
+  onClick: () => void
+}
+
+export default function ProfileHeaderButton({ onClick }: ProfileHeaderButtonProps) {
+  const { t } = useTranslation()
+  const username = localStorage.getItem('active_username') || 'Skipper'
+
+  return (
+    <button
+      type="button"
+      className="btn-icon skipper-badge"
+      onClick={onClick}
+      title={t('dashboard.open_profile', { name: username })}
+      aria-label={t('dashboard.open_profile', { name: username })}
+      data-tour="nav-profile"
+    >
+      <User size={18} aria-hidden="true" />
+      <span className="skipper-badge__name">{username}</span>
+    </button>
+  )
+}
@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Bell, BellOff } from 'lucide-react'
+import {
+  disableCollaboratorChangePush,
+  enableCollaboratorChangePush,
+  fetchPushPrefs,
+  getNotificationPermission,
+  isPushSupported,
+  preloadPushService
+} from '../services/pushNotifications.js'
+import { isIosDevice, isRunningStandalone } from '../hooks/usePwaInstall.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { useDialog } from './ModalDialog.tsx'
+
+export default function PushNotificationSettings() {
+  const { t } = useTranslation()
+  const { showAlert } = useDialog()
+  const [enabled, setEnabled] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [toggling, setToggling] = useState(false)
+
+  const supported = isPushSupported()
+  const permission = getNotificationPermission()
+  const iosNeedsInstall = isIosDevice() && !isRunningStandalone()
+
+  const loadPrefs = useCallback(async () => {
+    if (!supported) {
+      setLoading(false)
+      return
+    }
+    void preloadPushService()
+    try {
+      const prefs = await fetchPushPrefs()
+      setEnabled(prefs.collaboratorChangesEnabled)
+    } catch (err) {
+      console.error('Failed to load push prefs:', err)
+    } finally {
+      setLoading(false)
+    }
+  }, [supported])
+
+  useEffect(() => {
+    void loadPrefs()
+  }, [loadPrefs])
+
+  const handleToggle = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const next = e.target.checked
+    setToggling(true)
+    try {
+      if (next) {
+        await enableCollaboratorChangePush()
+        setEnabled(true)
+        trackPlausibleEvent(PlausibleEvents.PUSH_ENABLED)
+      } else {
+        await disableCollaboratorChangePush()
+        setEnabled(false)
+        trackPlausibleEvent(PlausibleEvents.PUSH_DISABLED)
+      }
+    } catch (err: unknown) {
+      console.error('Failed to toggle push notifications:', err)
+      const message = err instanceof Error ? `${err.name}: ${err.message}` : String(err)
+      showAlert(message)
+      void loadPrefs()
+    } finally {
+      setToggling(false)
+    }
+  }
+
+  if (!supported) {
+    return (
+      <div className="member-editor-card glass mt-4">
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+          <BellOff size={20} style={{ color: '#94a3b8' }} />
+          <h3 style={{ margin: 0, color: '#94a3b8', fontSize: '16px' }}>{t('profile.push_title')}</h3>
+        </div>
+        <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: 0 }}>
+          {t('profile.push_unsupported')}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="member-editor-card glass mt-4">
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+        <Bell size={20} style={{ color: 'var(--app-accent-light)' }} />
+        <h3 style={{ margin: 0, color: 'var(--app-accent-light)', fontSize: '16px' }}>
+          {t('profile.push_title')}
+        </h3>
+      </div>
+
+      <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 16px 0' }}>
+        {t('profile.push_desc')}
+      </p>
+
+      {iosNeedsInstall && (
+        <p className="text-muted" style={{ fontSize: '13px', margin: '0 0 12px 0' }}>
+          {t('profile.push_ios_install_hint')}
+        </p>
+      )}
+
+      {permission === 'denied' && (
+        <p style={{ fontSize: '13px', color: '#f87171', margin: '0 0 12px 0' }}>
+          {t('profile.push_denied_hint')}
+        </p>
+      )}
+
+      <label
+        className="switch-label"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          cursor: loading || toggling || iosNeedsInstall ? 'not-allowed' : 'pointer',
+          fontSize: '14px',
+          color: '#f1f5f9',
+          opacity: loading || iosNeedsInstall ? 0.6 : 1
+        }}
+      >
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={handleToggle}
+          disabled={loading || toggling || iosNeedsInstall}
+          style={{ width: '18px', height: '18px', cursor: 'inherit' }}
+        />
+        <span>{t('profile.push_enable')}</span>
+      </label>
+
+      {enabled && permission === 'granted' && (
+        <p className="text-muted" style={{ fontSize: '12px', margin: '12px 0 0 0' }}>
+          {t('profile.push_active')}
+        </p>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,61 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RefreshCw, X } from 'lucide-react'
+import { usePwaUpdate } from '../hooks/usePwaUpdate.js'
+
+export default function PwaUpdatePrompt() {
+  const { t } = useTranslation()
+  const { needRefresh, updateApp, dismissUpdate } = usePwaUpdate()
+  const [updating, setUpdating] = useState(false)
+
+  if (!needRefresh) return null
+
+  const handleUpdate = async () => {
+    setUpdating(true)
+    try {
+      await updateApp()
+    } finally {
+      setUpdating(false)
+    }
+  }
+
+  return (
+    <div className="pwa-update-banner" role="alert" aria-live="polite">
+      <div className="pwa-update-icon" aria-hidden="true">
+        <RefreshCw size={22} />
+      </div>
+
+      <div className="pwa-update-body">
+        <p className="pwa-update-title">{t('pwa.update_title')}</p>
+        <p className="pwa-update-text">{t('pwa.update_desc')}</p>
+      </div>
+
+      <div className="pwa-update-actions">
+        <button
+          type="button"
+          className="btn primary pwa-update-btn"
+          onClick={handleUpdate}
+          disabled={updating}
+        >
+          {updating ? t('pwa.update_reloading') : t('pwa.update_now')}
+        </button>
+        <button
+          type="button"
+          className="pwa-update-link"
+          onClick={dismissUpdate}
+        >
+          {t('pwa.later')}
+        </button>
+      </div>
+
+      <button
+        type="button"
+        className="pwa-update-close"
+        onClick={dismissUpdate}
+        aria-label={t('pwa.later')}
+      >
+        <X size={18} />
+      </button>
+    </div>
+  )
+}
@@ -1,10 +1,19 @@
 import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { isGermanLocale } from '../utils/i18nLanguages.js'
+import LanguageDropdown from './LanguageDropdown.tsx'
 import { decryptJson } from '../services/crypto.js'
-import VesselForm from './VesselForm.tsx'
-import CrewForm from './CrewForm.tsx'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import LogbookVesselPicker from './LogbookVesselPicker.tsx'
+import LogbookCrewPicker from './LogbookCrewPicker.tsx'
+import type { LogbookVesselSelectionData } from '../types/vessel.js'
+import { emptyLogbookVesselSelection } from '../types/vessel.js'
+import type { LogbookCrewSelectionData } from '../types/person.js'
+import { emptyLogbookCrewSelection } from '../types/person.js'
+import { legacyCrewRecordsToLogbookSelection } from '../utils/personSnapshots.js'
+import type { PersonData } from '../types/person.js'
 import LogEntriesList from './LogEntriesList.tsx'
-import { Ship, Users, FileText, Lock, AlertCircle, Globe } from 'lucide-react'
+import { Ship, Users, FileText, Lock, AlertCircle } from 'lucide-react'

 interface ReadOnlyViewerProps {
  token: string
@@ -29,9 +38,16 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
  // Logbook data states
  const [logbookTitle, setLogbookTitle] = useState('Logbook')
  const [yacht, setYacht] = useState<any>(null)
-  const [crews, setCrews] = useState<any[]>([])
+  const [logbookCrewSelection, setLogbookCrewSelection] = useState<LogbookCrewSelectionData>(
+    emptyLogbookCrewSelection()
+  )
+  const [logbookVesselSelection, setLogbookVesselSelection] = useState<LogbookVesselSelectionData>(
+    emptyLogbookVesselSelection()
+  )
+  const [legacyCrews, setLegacyCrews] = useState<any[]>([])
  const [entries, setEntries] = useState<any[]>([])
  const [photos, setPhotos] = useState<any[]>([])
+  const [voiceMemos, setVoiceMemos] = useState<any[]>([])
  const [gpsTracks, setGpsTracks] = useState<any[]>([])

  useEffect(() => {
@@ -47,9 +63,9 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
      const res = await fetch(`/api/collaboration/share-pull?token=${token}`)
      if (!res.ok) {
        if (res.status === 410) {
-          throw new Error(i18n.language.startsWith('de') ? 'Dieser Freigabelink ist abgelaufen.' : 'This share link has expired.')
+          throw new Error(isGermanLocale(i18n.language) ? 'Dieser Freigabelink ist abgelaufen.' : 'This share link has expired.')
        }
-        throw new Error(i18n.language.startsWith('de') ? 'Fehler beim Laden des freigegebenen Logbuchs.' : 'Failed to fetch shared logbook data.')
+        throw new Error(isGermanLocale(i18n.language) ? 'Fehler beim Laden des freigegebenen Logbuchs.' : 'Failed to fetch shared logbook data.')
      }

      const data = await res.json()
@@ -69,18 +85,67 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
      }
      setYacht(decYacht)

-      // Decrypt Crews
-      const decCrews = []
-      if (data.crews) {
-        for (const c of data.crews) {
-          const dec = await decryptJson(c.encryptedData, c.iv, c.tag, keyBuffer)
-          decCrews.push({
-            payloadId: c.payloadId,
-            data: dec
+      if (data.logbookCrewSelection) {
+        const decSel = await decryptJson(
+          data.logbookCrewSelection.encryptedData,
+          data.logbookCrewSelection.iv,
+          data.logbookCrewSelection.tag,
+          keyBuffer
+        )
+        if (decSel) {
+          setLogbookCrewSelection({
+            activeSkipperId: decSel.activeSkipperId ?? null,
+            activeCrewIds: Array.isArray(decSel.activeCrewIds) ? decSel.activeCrewIds : [],
+            snapshotsById:
+              decSel.snapshotsById && typeof decSel.snapshotsById === 'object'
+                ? decSel.snapshotsById
+                : {}
          })
        }
      }
-      setCrews(decCrews)
+
+      if (data.logbookVesselSelection) {
+        const decVessel = await decryptJson(
+          data.logbookVesselSelection.encryptedData,
+          data.logbookVesselSelection.iv,
+          data.logbookVesselSelection.tag,
+          keyBuffer
+        )
+        if (decVessel) {
+          setLogbookVesselSelection({
+            activeVesselId: decVessel.activeVesselId ?? null,
+            vesselSnapshot: decVessel.vesselSnapshot ?? null
+          })
+        }
+      } else if (decYacht) {
+        const legacy = decYacht as Record<string, unknown>
+        setLogbookVesselSelection({
+          activeVesselId: 'legacy-yacht',
+          vesselSnapshot: {
+            id: 'legacy-yacht',
+            name: typeof legacy.name === 'string' ? legacy.name : '',
+            ...legacy
+          } as import('../types/vessel.js').VesselSnapshot
+        })
+      }
+
+      const decCrews: Array<{ payloadId: string; data: PersonData }> = []
+      if (data.crews) {
+        for (const c of data.crews) {
+          const dec = await decryptJson(c.encryptedData, c.iv, c.tag, keyBuffer)
+          if (dec) {
+            decCrews.push({
+              payloadId: c.payloadId,
+              data: dec as PersonData
+            })
+          }
+        }
+      }
+      setLegacyCrews(decCrews)
+
+      if (!data.logbookCrewSelection && decCrews.length > 0) {
+        setLogbookCrewSelection(legacyCrewRecordsToLogbookSelection(decCrews))
+      }

      // Decrypt Entries
      const decEntries = []
@@ -111,6 +176,23 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
      }
      setPhotos(decPhotos)

+      const decVoiceMemos = []
+      if (data.voiceMemos) {
+        for (const v of data.voiceMemos) {
+          const dec = await decryptJson(v.encryptedData, v.iv, v.tag, keyBuffer)
+          if (dec) {
+            decVoiceMemos.push({
+              payloadId: v.payloadId,
+              audio: dec.audio,
+              mimeType: dec.mimeType,
+              durationSec: dec.durationSec,
+              caption: dec.caption || ''
+            })
+          }
+        }
+      }
+      setVoiceMemos(decVoiceMemos)
+
      // Decrypt GPS Tracks
      const decGpsTracks = []
      if (data.gpsTracks) {
@@ -124,6 +206,7 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
        }
      }
      setGpsTracks(decGpsTracks)
+      trackPlausibleEvent(PlausibleEvents.PUBLIC_LINK_OPENED)

    } catch (err: any) {
      console.error(err)
@@ -133,16 +216,12 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
    }
  }

-  const toggleLanguage = () => {
-    const nextLang = i18n.language.startsWith('de') ? 'en' : 'de'
-    i18n.changeLanguage(nextLang)
-  }

  if (loading) {
    return (
      <div className="tab-placeholder" style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
        <Ship className="header-logo spin" size={48} />
-        <p>{i18n.language.startsWith('de') ? 'Lade freigegebenes Logbuch...' : 'Loading shared logbook...'}</p>
+        <p>{isGermanLocale(i18n.language) ? 'Lade freigegebenes Logbuch...' : 'Loading shared logbook...'}</p>
      </div>
    )
  }
@@ -151,10 +230,10 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
    return (
      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '20px', textAlign: 'center' }}>
        <AlertCircle size={48} style={{ color: '#ef4444', marginBottom: '16px' }} />
-        <h2 style={{ color: '#f1f5f9', marginBottom: '8px' }}>{i18n.language.startsWith('de') ? 'Verbindungsfehler' : 'Access Error'}</h2>
+        <h2 style={{ color: '#f1f5f9', marginBottom: '8px' }}>{isGermanLocale(i18n.language) ? 'Verbindungsfehler' : 'Access Error'}</h2>
        <p style={{ color: '#94a3b8', maxWidth: '400px', marginBottom: '24px' }}>{error}</p>
        <button className="btn primary" onClick={loadData} style={{ width: 'auto' }}>
-          {i18n.language.startsWith('de') ? 'Erneut versuchen' : 'Retry'}
+          {isGermanLocale(i18n.language) ? 'Erneut versuchen' : 'Retry'}
        </button>
      </div>
    )
@@ -171,16 +250,13 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
            <h2>{logbookTitle}</h2>
            <p className="app-subtitle" style={{ color: '#10b981', display: 'flex', alignItems: 'center', gap: '4px' }}>
              <Lock size={12} />
-              <span>{i18n.language.startsWith('de') ? 'Schreibgeschützte Ansicht (Ende-zu-Ende verschlüsselt)' : 'Read-Only View (End-to-End Encrypted)'}</span>
+              <span>{isGermanLocale(i18n.language) ? 'Schreibgeschützte Ansicht (Ende-zu-Ende verschlüsselt)' : 'Read-Only View (End-to-End Encrypted)'}</span>
            </p>
          </div>
        </div>

        <div className="header-actions">
-          <button className="btn secondary" onClick={toggleLanguage} style={{ width: 'auto', padding: '6px 12px', fontSize: '13px' }}>
-            <Globe size={14} style={{ marginRight: '4px' }} />
-            {i18n.language.startsWith('de') ? 'English' : 'Deutsch'}
-          </button>
+          <LanguageDropdown variant="secondary-button" align="right" />
        </div>
      </header>

@@ -219,23 +295,27 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
              preloadedYacht={yacht}
              preloadedEntries={entries}
              preloadedPhotos={photos}
+              preloadedVoiceMemos={voiceMemos}
              preloadedGpsTracks={gpsTracks}
            />
          )}

          {activeTab === 'vessel' && (
-            <VesselForm
+            <LogbookVesselPicker
              logbookId="shared"
              readOnly={true}
-              preloadedData={yacht}
+              selectionOnly={true}
+              preloadedSelection={logbookVesselSelection}
            />
          )}

          {activeTab === 'crew' && (
-            <CrewForm
+            <LogbookCrewPicker
              logbookId="shared"
              readOnly={true}
-              preloadedData={crews}
+              selectionOnly={true}
+              preloadedPool={legacyCrews.length > 0 ? legacyCrews : undefined}
+              preloadedSelection={logbookCrewSelection}
            />
          )}
        </main>
@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next'
+import { ScrollText, X } from 'lucide-react'
+
+export type DisclaimerVariant = 'accept' | 'view'
+
+interface RegistrationDisclaimerProps {
+  onDismiss: () => void
+  variant?: DisclaimerVariant
+}
+
+export default function RegistrationDisclaimer({
+  onDismiss,
+  variant = 'accept'
+}: RegistrationDisclaimerProps) {
+  const { t } = useTranslation()
+
+  const sections = [
+    { title: t('disclaimer.e2e_title'), body: t('disclaimer.e2e_body') },
+    { title: t('disclaimer.pwa_title'), body: t('disclaimer.pwa_body') },
+    { title: t('disclaimer.storage_title'), body: t('disclaimer.storage_body') },
+    { title: t('disclaimer.free_title'), body: t('disclaimer.free_body') },
+    { title: t('disclaimer.liability_title'), body: t('disclaimer.liability_body') },
+    { title: t('disclaimer.warranty_title'), body: t('disclaimer.warranty_body') }
+  ]
+
+  return (
+    <div
+      className={`auth-card glass registration-disclaimer${variant === 'view' ? ' registration-disclaimer--modal' : ''}`}
+      role="document"
+    >
+      {variant === 'view' && (
+        <button
+          type="button"
+          className="registration-disclaimer__close"
+          onClick={onDismiss}
+          aria-label={t('disclaimer.close')}
+        >
+          <X size={18} />
+        </button>
+      )}
+      <div className="auth-header">
+        <ScrollText className="auth-icon accent" size={48} />
+        <h2>{t('disclaimer.title')}</h2>
+      </div>
+
+      <p className="registration-disclaimer__intro">{t('disclaimer.intro')}</p>
+
+      <div className="registration-disclaimer__sections">
+        {sections.map((section) => (
+          <section key={section.title} className="registration-disclaimer__section">
+            <h3>{section.title}</h3>
+            <p>{section.body}</p>
+          </section>
+        ))}
+      </div>
+
+      <p className="registration-disclaimer__copyright">{t('disclaimer.copyright')}</p>
+
+      <div className="auth-actions">
+        <button type="button" className="btn primary" onClick={onDismiss}>
+          {variant === 'accept' ? t('disclaimer.accept') : t('disclaimer.close')}
+        </button>
+      </div>
+    </div>
+  )
+}
@@ -1,10 +1,19 @@
 import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Settings as SettingsIcon, Save, Check, Users, Trash2, Copy, Link as LinkIcon } from 'lucide-react'
+import { Settings as SettingsIcon, Check, Users, Trash2, Copy, Link as LinkIcon, Share2 } from 'lucide-react'
 import { ensureLogbookKey } from '../services/logbookKeys.js'
-import AccountDangerZone from './AccountDangerZone.tsx'
-import PwaInstallPrompt from './PwaInstallPrompt.tsx'
+import LogbookBackupPanel from './LogbookBackupPanel.tsx'
+import LinkQrCode from './LinkQrCode.tsx'
 import { useDialog } from './ModalDialog.tsx'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { apiFetch } from '../services/api.js'
+import {
+  enableCollaboratorChangePush,
+  isCollaboratorPushActive,
+  isPushSupported,
+  preloadPushService
+} from '../services/pushNotifications.js'
+import { isIosDevice, isRunningStandalone } from '../hooks/usePwaInstall.js'

 interface SettingsFormProps {
  logbookId?: string | null
@@ -18,7 +27,6 @@ interface Collaborator {
  createdAt: string
 }

-// Convert ArrayBuffer to Hex String for URL fragment
 const bufferToHex = (buffer: ArrayBuffer): string => {
  return Array.from(new Uint8Array(buffer))
    .map(b => b.toString(16).padStart(2, '0'))
@@ -28,12 +36,7 @@ const bufferToHex = (buffer: ArrayBuffer): string => {
 export default function SettingsForm({ logbookId }: SettingsFormProps) {
  const { t } = useTranslation()
  const { showConfirm, showAlert } = useDialog()
-  const [apiKey, setApiKey] = useState(localStorage.getItem('owm_api_key') || '')
-  const [theme, setTheme] = useState(localStorage.getItem('active_theme') || 'auto')
-  const [saving, setSaving] = useState(false)
-  const [success, setSuccess] = useState(false)

-  // Collaboration States
  const [collaborators, setCollaborators] = useState<Collaborator[]>([])
  const [isOwner, setIsOwner] = useState(true)
  const [inviteLink, setInviteLink] = useState('')
@@ -42,7 +45,6 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
  const [collabError, setCollabError] = useState<string | null>(null)
  const [loadingCollabs, setLoadingCollabs] = useState(false)

-  // Public Share Link States
  const [shareEnabled, setShareEnabled] = useState(false)
  const [shareLink, setShareLink] = useState('')
  const [shareCopied, setShareCopied] = useState(false)
@@ -53,20 +55,16 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
      loadCollaborators()
      loadShareLink()
    }
+    void preloadPushService()
  }, [logbookId])

  const loadShareLink = async () => {
    if (!logbookId) return
    setLoadingShareLink(true)
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return

    try {
-      const res = await fetch(`/api/collaboration/share-link?logbookId=${logbookId}`, {
-        headers: {
-          'X-User-Id': userId
-        }
-      })
+      const res = await apiFetch(`/api/collaboration/share-link?logbookId=${logbookId}`)

      if (res.ok) {
        const data = await res.json()
@@ -90,17 +88,12 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
  const handleToggleShare = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!logbookId) return
    const checked = e.target.checked
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return

    setLoadingShareLink(true)
    try {
-      const res = await fetch('/api/collaboration/share-link', {
+      const res = await apiFetch('/api/collaboration/share-link', {
        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': userId
-        },
        body: JSON.stringify({ logbookId, enabled: checked })
      })

@@ -111,6 +104,7 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
          const logbookKey = await ensureLogbookKey(logbookId)
          const hexKey = bufferToHex(logbookKey)
          setShareLink(`${window.location.origin}/share?token=${data.token}#key=${hexKey}`)
+          trackPlausibleEvent(PlausibleEvents.LOGBOOK_SHARED)
          showAlert('Public share link enabled!')
        } else {
          setShareEnabled(false)
@@ -120,9 +114,9 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
      } else {
        throw new Error('Failed to toggle public share link.')
      }
-    } catch (err: any) {
+    } catch (err: unknown) {
      console.error('Toggle share link failed:', err)
-      showAlert(err.message || 'Failed to update public share link.')
+      showAlert(err instanceof Error ? err.message : 'Failed to update public share link.')
    } finally {
      setLoadingShareLink(false)
    }
@@ -136,19 +130,31 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
    }
  }

+  const isShareSupported = typeof navigator !== 'undefined' && !!navigator.share
+
+  const handleShareLink = async () => {
+    if (shareLink) {
+      try {
+        await navigator.share({
+          title: t('seo.title') || 'Kapteins Daagbok',
+          text: t('settings.share_desc'),
+          url: shareLink
+        })
+      } catch (err: unknown) {
+        if (err instanceof Error && err.name !== 'AbortError') {
+          console.error('Sharing link failed:', err)
+        }
+      }
+    }
+  }

  const loadCollaborators = async () => {
    setLoadingCollabs(true)
    setCollabError(null)
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return

    try {
-      const res = await fetch(`/api/collaboration/collaborators?logbookId=${logbookId}`, {
-        headers: {
-          'X-User-Id': userId
-        }
-      })
+      const res = await apiFetch(`/api/collaboration/collaborators?logbookId=${logbookId}`)

      if (res.status === 403) {
        setIsOwner(false)
@@ -171,24 +177,55 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
    }
  }

+  const promptPushAfterInviteCreated = async () => {
+    if (!isPushSupported()) return
+    if (await isCollaboratorPushActive()) return
+
+    const iosNeedsInstall = isIosDevice() && !isRunningStandalone()
+
+    if (iosNeedsInstall) {
+      await showAlert(
+        t('settings.invite_push_prompt_ios_message'),
+        t('settings.invite_push_prompt_title'),
+        t('settings.invite_push_prompt_later')
+      )
+      return
+    }
+
+    const enable = await showConfirm(
+      t('settings.invite_push_prompt_message'),
+      t('settings.invite_push_prompt_title'),
+      t('settings.invite_push_prompt_enable'),
+      t('settings.invite_push_prompt_later')
+    )
+
+    if (!enable) return
+
+    try {
+      await enableCollaboratorChangePush()
+      await showAlert(
+        t('settings.invite_push_prompt_success'),
+        t('settings.invite_push_prompt_title')
+      )
+      trackPlausibleEvent(PlausibleEvents.PUSH_ENABLED)
+    } catch (err: unknown) {
+      console.error('Failed to enable push after invite:', err)
+      const message = err instanceof Error ? `${err.name}: ${err.message}` : String(err)
+      await showAlert(message)
+    }
+  }
+
  const handleGenerateInvite = async () => {
    if (!logbookId) return
    setGeneratingInvite(true)
    setInviteLink('')
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return

    try {
-      // 1. Ensure logbook has an E2E key (upgrades legacy logbooks if needed)
      const logbookKey = await ensureLogbookKey(logbookId)

-      // 2. Create invite token on server
-      const res = await fetch('/api/collaboration/invite', {
+      const res = await apiFetch('/api/collaboration/invite', {
        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': userId
-        },
        body: JSON.stringify({ logbookId, role: 'WRITE' })
      })

@@ -197,15 +234,15 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
      }

      const invite = await res.json()
-      
-      // 3. Format link containing token (URL params) and key (URL hash anchor)
      const hexKey = bufferToHex(logbookKey)
      const link = `${window.location.origin}/invite?token=${invite.token}#key=${hexKey}`
-      
+
      setInviteLink(link)
-    } catch (err: any) {
+      trackPlausibleEvent(PlausibleEvents.INVITE_GENERATED)
+      await promptPushAfterInviteCreated()
+    } catch (err: unknown) {
      console.error('Failed to generate invite:', err)
-      showAlert(err.message || 'Failed to generate invite link.')
+      showAlert(err instanceof Error ? err.message : 'Failed to generate invite link.')
    } finally {
      setGeneratingInvite(false)
    }
@@ -220,16 +257,12 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
  }

  const handleRevoke = async (collabId: string, collName: string) => {
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return

    if (await showConfirm(t('logs.revoke_confirm'), collName, t('logs.confirm_yes'), t('logs.confirm_no'))) {
      try {
-        const res = await fetch(`/api/collaboration/collaborators/${collabId}`, {
-          method: 'DELETE',
-          headers: {
-            'X-User-Id': userId
-          }
+        const res = await apiFetch(`/api/collaboration/collaborators/${collabId}`, {
+          method: 'DELETE'
        })

        if (res.ok) {
@@ -238,28 +271,26 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
        } else {
          throw new Error('Failed to revoke collaborator access.')
        }
-      } catch (err: any) {
+      } catch (err: unknown) {
        console.error('Revocation failed:', err)
-        showAlert(err.message || 'Failed to revoke access.')
+        showAlert(err instanceof Error ? err.message : 'Failed to revoke access.')
      }
    }
  }

-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setSaving(true)
-    setSuccess(false)
-    
-    // Save to localStorage
-    localStorage.setItem('owm_api_key', apiKey.trim())
-    localStorage.setItem('active_theme', theme)
-    
-    // Notify App of theme change
-    window.dispatchEvent(new Event('theme-changed'))
-    
-    setSaving(false)
-    setSuccess(true)
-    setTimeout(() => setSuccess(false), 3000)
+  if (!logbookId) {
+    return (
+      <div className="form-card">
+        <div className="form-header">
+          <SettingsIcon size={24} className="form-icon" />
+          <div>
+            <h2>{t('settings.title')}</h2>
+            <p className="form-subtitle">{t('settings.subtitle')}</p>
+          </div>
+        </div>
+        <p className="text-muted mt-4">{t('settings.select_logbook_hint')}</p>
+      </div>
+    )
  }

  return (
@@ -268,84 +299,12 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
        <SettingsIcon size={24} className="form-icon" />
        <div>
          <h2>{t('settings.title')}</h2>
-          <p className="form-subtitle" style={{ margin: '4px 0 0 0', fontSize: '13px', color: '#94a3b8' }}>
-            {t('settings.subtitle')}
-          </p>
+          <p className="form-subtitle">{t('settings.subtitle')}</p>
        </div>
      </div>

-      <form onSubmit={handleSubmit} className="vessel-form mt-6">
-        <PwaInstallPrompt variant="inline" />
-
-        {/* Weather Integration card */}
-        <div className="member-editor-card glass">
-          <h3 style={{ marginTop: 0, marginBottom: '12px', color: '#fbbf24', fontSize: '16px' }}>
-            {t('settings.owm_title')}
-          </h3>
-          <p style={{ fontSize: '13.5px', color: '#94a3b8', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.key_help')}
-          </p>
-
-          <div className="input-group">
-            <label htmlFor="owm-api-key" style={{ display: 'block', fontSize: '13.5px', color: '#94a3b8', marginBottom: '6px', fontWeight: 500 }}>
-              {t('settings.owm_key')}
-            </label>
-            <input
-              id="owm-api-key"
-              type="password"
-              className="input-text"
-              placeholder="e.g. 8b6a7f...d8"
-              value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
-              disabled={saving}
-            />
-          </div>
-        </div>
-
-        {/* Theme customization card */}
-        <div className="member-editor-card glass mt-4">
-          <h3 style={{ marginTop: 0, marginBottom: '12px', color: '#fbbf24', fontSize: '16px' }}>
-            {t('settings.theme_title')}
-          </h3>
-          <p style={{ fontSize: '13.5px', color: '#94a3b8', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.theme_label')}
-          </p>
-
-          <div className="input-group">
-            <select
-              id="app-theme"
-              className="input-text"
-              value={theme}
-              onChange={(e) => setTheme(e.target.value)}
-              disabled={saving}
-              style={{ background: 'rgba(11, 12, 16, 0.85)', color: '#f1f5f9' }}
-            >
-              <option value="auto">{t('settings.theme_auto')}</option>
-              <option value="ocean">{t('settings.theme_ocean')}</option>
-              <option value="material">{t('settings.theme_material')}</option>
-              <option value="cupertino">{t('settings.theme_cupertino')}</option>
-            </select>
-          </div>
-        </div>
-
-        <div className="form-actions mt-4 mb-6">
-          {success && (
-            <div className="success-toast">
-              <Check size={16} />
-              <span>{t('settings.saved')}</span>
-            </div>
-          )}
-          
-          <button type="submit" className="btn primary" disabled={saving}>
-            <Save size={18} />
-            {saving ? t('settings.saving') : t('settings.save')}
-          </button>
-        </div>
-      </form>
-
-      {/* Public Share Link Card (Only visible to Logbook Owner) */}
      {logbookId && isOwner && (
-        <div className="member-editor-card glass mt-6" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '24px' }}>
+        <div className="member-editor-card glass mt-6">
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
            <LinkIcon size={20} style={{ color: '#fbbf24' }} />
            <h3 style={{ margin: 0, color: '#fbbf24', fontSize: '16px' }}>
@@ -357,6 +316,10 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
            {t('settings.share_desc')}
          </p>

+          <p className="signature-lock-notice" style={{ marginBottom: '16px' }}>
+            {t('settings.share_privacy_warning')}
+          </p>
+
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
            <label className="switch-label" style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', fontSize: '14px', color: '#f1f5f9' }}>
              <input
@@ -372,29 +335,47 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
          </div>

          {shareEnabled && shareLink && (
-            <div className="input-group mb-4" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-              <input
-                type="text"
-                readOnly
-                value={shareLink}
-                className="input-text font-mono text-xs"
-                style={{ flex: 1, padding: '10px' }}
-                onClick={(e) => (e.target as HTMLInputElement).select()}
-              />
-              <button
-                type="button"
-                className="btn secondary"
-                onClick={handleCopyShareLink}
-                style={{ width: 'auto', padding: '10px' }}
-              >
-                {shareCopied ? <Check size={16} /> : <Copy size={16} />}
-              </button>
+            <div className="link-with-qr mb-4">
+              <div className="input-group copy-link-row">
+                <input
+                  type="text"
+                  readOnly
+                  value={shareLink}
+                  className="input-text font-mono text-xs"
+                  style={{ flex: 1, padding: '10px' }}
+                  onClick={(e) => (e.target as HTMLInputElement).select()}
+                />
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={handleCopyShareLink}
+                  style={{ width: 'auto', padding: '10px' }}
+                  title={t('settings.share_copy_btn')}
+                >
+                  {shareCopied ? <Check size={16} /> : <Copy size={16} />}
+                </button>
+                {isShareSupported && (
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={() => void handleShareLink()}
+                    style={{ width: 'auto', padding: '10px' }}
+                    title={t('settings.share_btn')}
+                  >
+                    <Share2 size={16} />
+                  </button>
+                )}
+              </div>
+              <LinkQrCode value={shareLink} />
            </div>
          )}
        </div>
      )}

-      {/* Crew Collaboration Card (Only visible to Logbook Owner) */}
+      {logbookId && isOwner && (
+        <LogbookBackupPanel logbookId={logbookId} />
+      )}
+
      {logbookId && isOwner && (
        <div className="member-editor-card glass mt-6" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
@@ -408,7 +389,7 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
            {t('logs.invite_link_desc')}
          </p>

-          <div className="form-actions" style={{ justifyContent: 'flex-start', gap: '12px', marginBottom: '20px' }}>
+          <div className="form-actions form-actions--start" style={{ gap: '12px', marginBottom: '20px' }}>
            <button
              type="button"
              className="btn primary"
@@ -422,27 +403,30 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
          </div>

          {inviteLink && (
-            <div className="input-group mb-6" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-              <input
-                type="text"
-                readOnly
-                value={inviteLink}
-                className="input-text font-mono text-xs"
-                style={{ flex: 1, padding: '10px' }}
-                onClick={(e) => (e.target as HTMLInputElement).select()}
-              />
-              <button
-                type="button"
-                className="btn secondary"
-                onClick={handleCopyInvite}
-                style={{ width: 'auto', padding: '10px' }}
-              >
-                {inviteCopied ? <Check size={16} /> : <Copy size={16} />}
-              </button>
+            <div className="link-with-qr mb-6">
+              <div className="input-group copy-link-row">
+                <input
+                  type="text"
+                  readOnly
+                  value={inviteLink}
+                  className="input-text font-mono text-xs"
+                  style={{ flex: 1, padding: '10px' }}
+                  onClick={(e) => (e.target as HTMLInputElement).select()}
+                />
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={handleCopyInvite}
+                  style={{ width: 'auto', padding: '10px' }}
+                  title={t('settings.share_copy_btn')}
+                >
+                  {inviteCopied ? <Check size={16} /> : <Copy size={16} />}
+                </button>
+              </div>
+              <LinkQrCode value={inviteLink} />
            </div>
          )}

-          {/* Collaborator List */}
          <h4 style={{ color: '#fbbf24', fontSize: '14px', marginBottom: '12px' }}>
            {t('logs.collaborators_list')}
          </h4>
@@ -473,7 +457,7 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
                      <td>
                        <button
                          type="button"
-                          className="btn-icon logout"
+                          className="btn-icon danger"
                          onClick={() => handleRevoke(c.id, c.username)}
                          title="Revoke access"
                        >
@@ -488,8 +472,6 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
          )}
        </div>
      )}
-      {/* Danger Zone / Account Deletion */}
-      <AccountDangerZone className="mt-6" />
    </div>
  )
 }
@@ -4,7 +4,8 @@ import { Check } from 'lucide-react'
 import SignaturePad from './SignaturePad.tsx'
 import PasskeySignButton from './PasskeySignButton.tsx'
 import type { PasskeySignature, SignatureValue } from '../types/signatures.js'
-import { isPasskeySignature } from '../utils/signatures.js'
+import { isPasskeySignature, getSignaturePayload, getSignatureAttribution } from '../utils/signatures.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'

 type SignatureMode = 'passkey' | 'classic'

@@ -13,7 +14,7 @@ interface SignatureSectionProps {
  disabled?: boolean
  isOnline: boolean
  canSignSkipper: boolean
-  hasWriteCollaborators: boolean
+  canSignCrew: boolean
  signSkipper: SignatureValue | ''
  signCrew: SignatureValue | ''
  skipperSignatureValid: boolean
@@ -25,14 +26,28 @@ interface SignatureSectionProps {
  onBeforeSign?: () => Promise<boolean>
 }

+function SignerAttributionBadge({ value }: { value: SignatureValue | '' }) {
+  const { t, i18n } = useTranslation()
+  const attribution = getSignatureAttribution(value)
+  if (!attribution) return null
+
+  const formattedDate = formatAppDateTime(attribution.signedAt, i18n.language)
+
+  return (
+    <div className="passkey-sign-badge valid signature-attribution-badge">
+      <span>{t('logs.sign_passkey_signed', { username: attribution.username })}</span>
+      <span className="passkey-sign-date">{formattedDate}</span>
+    </div>
+  )
+}
+
 function padValue(value: SignatureValue | ''): string {
-  if (!value || isPasskeySignature(value)) return ''
-  return value
+  return getSignaturePayload(value)
 }

 function modeFromValue(value: SignatureValue | '', passkeyAvailable: boolean): SignatureMode {
  if (isPasskeySignature(value)) return 'passkey'
-  if (value) return 'classic'
+  if (getSignaturePayload(value)) return 'classic'
  return passkeyAvailable ? 'passkey' : 'classic'
 }

@@ -108,6 +123,7 @@ function RoleSignatureBlock({
    }
    return (
      <div className="signature-role-block">
+        <SignerAttributionBadge value={value} />
        <SignaturePad
          id={padId}
          label={roleLabel}
@@ -162,6 +178,7 @@ function RoleSignatureBlock({

      {showClassicPanel && (
        <>
+          <SignerAttributionBadge value={value} />
          <SignaturePad
            id={padId}
            label={roleLabel}
@@ -189,7 +206,7 @@ export default function SignatureSection({
  disabled = false,
  isOnline,
  canSignSkipper,
-  hasWriteCollaborators,
+  canSignCrew,
  signSkipper,
  signCrew,
  skipperSignatureValid,
@@ -203,7 +220,7 @@ export default function SignatureSection({
  const { t } = useTranslation()

  const showSkipperPasskey = canSignSkipper && isOnline
-  const showCrewPasskey = hasWriteCollaborators && isOnline
+  const showCrewPasskey = canSignCrew && isOnline
  const hasSignature = !!(signSkipper || signCrew)

  return (
@@ -228,7 +245,7 @@ export default function SignatureSection({
          passkeySignature={isPasskeySignature(signSkipper) ? signSkipper : undefined}
          signatureValid={skipperSignatureValid}
          showPasskey={showSkipperPasskey}
-          readOnly={readOnly}
+          readOnly={readOnly || !canSignSkipper}
          disabled={disabled}
          classicHint={showSkipperPasskey ? t('logs.sign_classic_or_passkey') : undefined}
          offlineHint={!isOnline && canSignSkipper ? t('logs.sign_offline_hint') : undefined}
@@ -245,7 +262,7 @@ export default function SignatureSection({
          passkeySignature={isPasskeySignature(signCrew) ? signCrew : undefined}
          signatureValid={crewSignatureValid}
          showPasskey={showCrewPasskey}
-          readOnly={readOnly}
+          readOnly={readOnly || !canSignCrew}
          disabled={disabled}
          classicHint={showCrewPasskey ? t('logs.sign_crew_passkey_hint') : undefined}
          onChange={onSignCrewChange}
@@ -0,0 +1,565 @@
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BarChart2, Anchor, Droplets, Fuel, Sailboat, Gauge, Timer } from 'lucide-react'
+import MultiTrackMap from './MultiTrackMap.tsx'
+import {
+  formatLiters,
+  formatHours,
+  formatNm,
+  loadAccountStats,
+  loadLogbookStats,
+  type LogbookStatsSummary,
+  type StatsTotals,
+  type TravelDayStats
+} from '../services/statsAggregation.js'
+import { compareTravelDaysChronological } from '../utils/logEntryTankLevels.js'
+import { formatFuelPerMotorHour } from '../utils/fuelStats.js'
+import { formatAppDecimal } from '../utils/numberFormat.js'
+import {
+  loadLogbookEventSeries,
+  type EventSeriesPoint,
+  type EventSeriesSummary
+} from '../services/eventSeriesAggregation.js'
+
+interface StatsDashboardProps {
+  logbookId: string
+  logbookTitle: string
+}
+
+type StatsScope = 'logbook' | 'account'
+
+function maxBarValue(days: TravelDayStats[], pick: (d: TravelDayStats) => number): number {
+  if (days.length === 0) return 1
+  return Math.max(1, ...days.map(pick))
+}
+
+function KpiCard({
+  icon,
+  label,
+  value,
+  unit
+}: {
+  icon: ReactNode
+  label: string
+  value: string
+  unit?: string
+}) {
+  return (
+    <div className="stats-kpi-card glass">
+      <div className="stats-kpi-icon">{icon}</div>
+      <div className="stats-kpi-body">
+        <span className="stats-kpi-label">{label}</span>
+        <span className="stats-kpi-value">
+          {value}
+          {unit ? <span className="stats-kpi-unit">{unit}</span> : null}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function TotalsGrid({ totals }: { totals: StatsTotals }) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="stats-kpi-grid">
+      <KpiCard
+        icon={<Gauge size={20} />}
+        label={t('stats.total_distance')}
+        value={formatNm(totals.totalDistanceNm)}
+        unit={t('stats.unit_nm')}
+      />
+      <KpiCard
+        icon={<Anchor size={20} />}
+        label={t('stats.travel_days')}
+        value={String(totals.travelDayCount)}
+      />
+      <KpiCard
+        icon={<Sailboat size={20} />}
+        label={t('stats.sail_distance')}
+        value={formatNm(totals.sailDistanceNm)}
+        unit={t('stats.unit_nm')}
+      />
+      <KpiCard
+        icon={<Gauge size={20} />}
+        label={t('stats.motor_distance')}
+        value={formatNm(totals.motorDistanceNm)}
+        unit={t('stats.unit_nm')}
+      />
+      <KpiCard
+        icon={<Timer size={20} />}
+        label={t('stats.motor_hours_total')}
+        value={formatHours(totals.totalMotorHours)}
+        unit={t('stats.unit_h')}
+      />
+      <KpiCard
+        icon={<Fuel size={20} />}
+        label={t('stats.fuel_total')}
+        value={formatLiters(totals.totalFuelL)}
+        unit={t('stats.unit_l')}
+      />
+      {totals.fuelPerMotorHourL != null && (
+        <KpiCard
+          icon={<Timer size={20} />}
+          label={t('stats.fuel_per_motor_hour')}
+          value={formatFuelPerMotorHour(totals.fuelPerMotorHourL)}
+          unit={`${t('stats.unit_l')}/${t('stats.unit_h')}`}
+        />
+      )}
+      <KpiCard
+        icon={<Droplets size={20} />}
+        label={t('stats.water_total')}
+        value={formatLiters(totals.totalFreshwaterL)}
+        unit={t('stats.unit_l')}
+      />
+    </div>
+  )
+}
+
+function DailyBarChart({
+  days,
+  valueFn,
+  barClass,
+  formatValue
+}: {
+  days: TravelDayStats[]
+  valueFn: (d: TravelDayStats) => number
+  barClass: string
+  formatValue: (v: number) => string
+}) {
+  const { t } = useTranslation()
+  const max = maxBarValue(days, valueFn)
+
+  return (
+    <div className="stats-bar-chart" role="img" aria-label={t('stats.daily_etmal')}>
+      {days.map((day) => {
+        const value = valueFn(day)
+        const heightPct = max > 0 ? Math.max(2, (value / max) * 100) : 0
+        const label = day.date
+          ? new Date(day.date).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit' })
+          : t('stats.day_label', { day: day.dayOfTravel })
+
+        return (
+          <div key={day.entryId} className="stats-bar-column" title={`${label}: ${formatValue(value)}`}>
+            <span className="stats-bar-value">{value > 0 ? formatValue(value) : ''}</span>
+            <div className="stats-bar-track">
+              <div className={`stats-bar ${barClass}`} style={{ height: `${heightPct}%` }} />
+            </div>
+            <span className="stats-bar-label">{label}</span>
+            <span className="stats-bar-sublabel">{t('stats.day_label', { day: day.dayOfTravel })}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function ConsumptionChart({ days }: { days: TravelDayStats[] }) {
+  const { t } = useTranslation()
+  const max = maxBarValue(days, (d) => Math.max(d.fuelConsumptionL, d.freshwaterConsumptionL))
+
+  return (
+    <div className="stats-bar-chart stats-consumption-chart" role="img" aria-label={t('stats.daily_consumption')}>
+      {days.map((day) => {
+        const fuelH = max > 0 ? Math.max(2, (day.fuelConsumptionL / max) * 100) : 0
+        const waterH = max > 0 ? Math.max(2, (day.freshwaterConsumptionL / max) * 100) : 0
+        const label = day.date
+          ? new Date(day.date).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit' })
+          : t('stats.day_label', { day: day.dayOfTravel })
+
+        return (
+          <div key={day.entryId} className="stats-bar-column stats-bar-column--grouped">
+            <div className="stats-bar-group">
+              <div className="stats-bar-track stats-bar-track--short">
+                <div className="stats-bar stats-bar--fuel" style={{ height: `${fuelH}%` }} />
+              </div>
+              <div className="stats-bar-track stats-bar-track--short">
+                <div className="stats-bar stats-bar--water" style={{ height: `${waterH}%` }} />
+              </div>
+            </div>
+            <span className="stats-bar-label">{label}</span>
+          </div>
+        )
+      })}
+      <div className="stats-consumption-legend">
+        <span><span className="stats-legend-swatch stats-bar--fuel" /> {t('stats.fuel_legend')}</span>
+        <span><span className="stats-legend-swatch stats-bar--water" /> {t('stats.water_legend')}</span>
+      </div>
+    </div>
+  )
+}
+
+function PropulsionBreakdown({ totals }: { totals: StatsTotals }) {
+  const { t } = useTranslation()
+  const total = totals.sailDistanceNm + totals.motorDistanceNm + totals.unknownPropulsionNm
+  if (total <= 0) return null
+
+  const sailPct = (totals.sailDistanceNm / total) * 100
+  const motorPct = (totals.motorDistanceNm / total) * 100
+  const unknownPct = (totals.unknownPropulsionNm / total) * 100
+
+  return (
+    <div className="stats-propulsion">
+      <div className="stats-propulsion-bar" role="img" aria-label={t('stats.propulsion_title')}>
+        {totals.sailDistanceNm > 0 && (
+          <div className="stats-propulsion-segment stats-propulsion-segment--sail" style={{ width: `${sailPct}%` }} />
+        )}
+        {totals.motorDistanceNm > 0 && (
+          <div className="stats-propulsion-segment stats-propulsion-segment--motor" style={{ width: `${motorPct}%` }} />
+        )}
+        {totals.unknownPropulsionNm > 0 && (
+          <div className="stats-propulsion-segment stats-propulsion-segment--unknown" style={{ width: `${unknownPct}%` }} />
+        )}
+      </div>
+      <div className="stats-propulsion-labels">
+        <span>{t('stats.sail_distance')}: {formatNm(totals.sailDistanceNm)} {t('stats.unit_nm')} ({formatAppDecimal(sailPct, { maximumFractionDigits: 0 })}%)</span>
+        <span>{t('stats.motor_distance')}: {formatNm(totals.motorDistanceNm)} {t('stats.unit_nm')} ({formatAppDecimal(motorPct, { maximumFractionDigits: 0 })}%)</span>
+        {totals.unknownPropulsionNm > 0 && (
+          <span>{t('stats.unknown_propulsion')}: {formatNm(totals.unknownPropulsionNm)} {t('stats.unit_nm')}</span>
+        )}
+      </div>
+      <p className="stats-hint">{t('stats.propulsion_hint')}</p>
+    </div>
+  )
+}
+
+function EventSeriesList({ title, points, emptyLabel }: { title: string; points: EventSeriesPoint[]; emptyLabel: string }) {
+  if (points.length === 0) {
+    return (
+      <div className="stats-event-series-block">
+        <h4 className="stats-section-subtitle">{title}</h4>
+        <p className="stats-section-sub">{emptyLabel}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="stats-event-series-block">
+      <h4 className="stats-section-subtitle">{title}</h4>
+      <ul className="stats-event-series-list">
+        {points.map((point, idx) => (
+          <li key={`${point.entryId}-${point.time}-${idx}`} className="stats-event-series-item">
+            <span className="stats-event-series-when">
+              {new Date(point.date).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit' })}
+              {' · '}
+              {point.time}
+            </span>
+            <span className="stats-event-series-value">{point.summary}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function EventSeriesPanel({ series }: { series: EventSeriesSummary }) {
+  const { t } = useTranslation()
+  const motorPoints = series.motor.map((point) => ({
+    ...point,
+    summary: point.summary === 'start'
+      ? t('logs.live_motor_start')
+      : t('logs.live_motor_stop')
+  }))
+
+  return (
+    <div className="member-editor-card glass mt-6">
+      <h3 className="stats-section-title">{t('stats.event_series_title')}</h3>
+      <p className="stats-section-sub">{t('stats.event_series_hint')}</p>
+      <EventSeriesList title={t('stats.event_series_pressure')} points={series.pressure} emptyLabel={t('stats.event_series_empty')} />
+      <EventSeriesList title={t('stats.event_series_wind')} points={series.wind} emptyLabel={t('stats.event_series_empty')} />
+      <EventSeriesList title={t('stats.event_series_motor')} points={motorPoints} emptyLabel={t('stats.event_series_empty')} />
+    </div>
+  )
+}
+
+function LogbookScopeView({
+  summary,
+  eventSeries
+}: {
+  summary: LogbookStatsSummary
+  eventSeries: EventSeriesSummary | null
+}) {
+  const { t } = useTranslation()
+  const { travelDays, routePorts, trackSegments, totals } = summary
+
+  if (travelDays.length === 0) {
+    return <div className="dashboard-status-msg">{t('stats.no_data')}</div>
+  }
+
+  return (
+    <>
+      <TotalsGrid totals={totals} />
+
+      {routePorts.length > 0 && (
+        <div className="member-editor-card glass mt-6">
+          <h3 className="stats-section-title">{t('stats.route_overview')}</h3>
+          <p className="stats-route-chain">
+            {routePorts.map((port, idx) => (
+              <span key={`${port}-${idx}`}>
+                {idx > 0 && <span className="stats-route-arrow"> → </span>}
+                {port}
+              </span>
+            ))}
+          </p>
+        </div>
+      )}
+
+      {trackSegments.length > 0 && (
+        <div className="member-editor-card glass mt-6">
+          <h3 className="stats-section-title">{t('stats.route_map_title')}</h3>
+          <MultiTrackMap segments={trackSegments} />
+        </div>
+      )}
+
+      <div className="member-editor-card glass mt-6">
+        <h3 className="stats-section-title">{t('stats.daily_etmal')}</h3>
+        <p className="stats-section-sub">
+          {t('stats.avg_distance')}: {formatNm(totals.avgDistancePerDayNm)} {t('stats.unit_nm')}
+        </p>
+        <DailyBarChart
+          days={travelDays}
+          valueFn={(d) => d.distanceNm}
+          barClass="stats-bar--distance"
+          formatValue={formatNm}
+        />
+      </div>
+
+      <div className="member-editor-card glass mt-6">
+        <h3 className="stats-section-title">{t('stats.daily_motor_hours')}</h3>
+        <p className="stats-section-sub">
+          {t('stats.avg_motor_hours')}: {formatHours(totals.avgMotorHoursPerDay)} {t('stats.unit_h')}
+          {totals.fuelPerMotorHourL != null && (
+            <>
+              {' · '}
+              {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+            </>
+          )}
+        </p>
+        <DailyBarChart
+          days={travelDays}
+          valueFn={(d) => d.motorHours}
+          barClass="stats-bar--motor-hours"
+          formatValue={formatHours}
+        />
+        {travelDays.some((d) => d.fuelPerMotorHourL != null) && (
+          <>
+            <h4 className="stats-section-subtitle mt-4">{t('stats.daily_fuel_per_motor_hour')}</h4>
+            <DailyBarChart
+              days={travelDays}
+              valueFn={(d) => d.fuelPerMotorHourL ?? 0}
+              barClass="stats-bar--fuel-per-hour"
+              formatValue={(v) => formatFuelPerMotorHour(v > 0 ? v : null)}
+            />
+          </>
+        )}
+      </div>
+
+      <div className="member-editor-card glass mt-6">
+        <h3 className="stats-section-title">{t('stats.daily_consumption')}</h3>
+        <p className="stats-section-sub">
+          {t('stats.avg_fuel')}: {formatLiters(totals.avgFuelPerDayL)} {t('stats.unit_l')}
+          {' · '}
+          {t('stats.avg_water')}: {formatLiters(totals.avgFreshwaterPerDayL)} {t('stats.unit_l')}
+          {totals.fuelPerNmL != null && (
+            <> · {t('stats.fuel_per_nm')}: {totals.fuelPerNmL} {t('stats.unit_l')}/{t('stats.unit_nm')}</>
+          )}
+          {totals.fuelPerMotorHourL != null && (
+            <> · {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}</>
+          )}
+        </p>
+        <ConsumptionChart days={travelDays} />
+      </div>
+
+      <div className="member-editor-card glass mt-6">
+        <h3 className="stats-section-title">{t('stats.propulsion_title')}</h3>
+        <PropulsionBreakdown totals={totals} />
+      </div>
+
+      {eventSeries && <EventSeriesPanel series={eventSeries} />}
+    </>
+  )
+}
+
+export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboardProps) {
+  const { t } = useTranslation()
+  const [scope, setScope] = useState<StatsScope>('logbook')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [logbookStats, setLogbookStats] = useState<LogbookStatsSummary | null>(null)
+  const [eventSeries, setEventSeries] = useState<EventSeriesSummary | null>(null)
+  const [accountStats, setAccountStats] = useState<Awaited<ReturnType<typeof loadAccountStats>> | null>(null)
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const [lb, acc, series] = await Promise.all([
+        loadLogbookStats(logbookId, logbookTitle, true),
+        loadAccountStats(false),
+        loadLogbookEventSeries(logbookId)
+      ])
+      setLogbookStats(lb)
+      setAccountStats(acc)
+      setEventSeries(series)
+    } catch (err: unknown) {
+      console.error('Failed to load statistics:', err)
+      setError(err instanceof Error ? err.message : 'Failed to load statistics.')
+    } finally {
+      setLoading(false)
+    }
+  }, [logbookId, logbookTitle])
+
+  useEffect(() => {
+    void loadData()
+  }, [loadData])
+
+  const accountLogbooksWithDays = useMemo(
+    () => accountStats?.logbooks.filter((lb) => lb.travelDays.length > 0) ?? [],
+    [accountStats]
+  )
+
+  const allAccountDays = useMemo(() => {
+    if (!accountStats) return []
+    const days = accountStats.logbooks.flatMap((lb) => lb.travelDays)
+    return [...days].sort(compareTravelDaysChronological)
+  }, [accountStats])
+
+  return (
+    <div className="form-card" data-tour="stats-dashboard">
+      <div className="form-header">
+        <BarChart2 size={24} className="form-icon" />
+        <div>
+          <h2>{t('stats.title')}</h2>
+          <p className="stats-subtitle">{t('stats.subtitle')}</p>
+        </div>
+      </div>
+
+      <div className="stats-scope-toggle" role="tablist" aria-label={t('stats.scope_label')}>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={scope === 'logbook'}
+          className={`btn ${scope === 'logbook' ? 'primary' : 'secondary'}`}
+          onClick={() => setScope('logbook')}
+        >
+          {t('stats.scope_logbook')}
+        </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={scope === 'account'}
+          className={`btn ${scope === 'account' ? 'primary' : 'secondary'}`}
+          onClick={() => setScope('account')}
+        >
+          {t('stats.scope_account')}
+        </button>
+      </div>
+
+      {error && <div className="auth-error mt-4">{error}</div>}
+
+      {loading ? (
+        <div className="tab-placeholder mt-6">
+          <BarChart2 className="header-logo spin" size={48} />
+          <p>{t('stats.loading')}</p>
+        </div>
+      ) : scope === 'logbook' && logbookStats ? (
+        <LogbookScopeView summary={logbookStats} eventSeries={eventSeries} />
+      ) : scope === 'account' && accountStats ? (
+        <>
+          <TotalsGrid totals={accountStats.totals} />
+
+          {accountLogbooksWithDays.length === 0 ? (
+            <div className="dashboard-status-msg mt-6">{t('stats.no_data')}</div>
+          ) : (
+            <>
+              <div className="member-editor-card glass mt-6">
+                <h3 className="stats-section-title">{t('stats.account_logbooks')}</h3>
+                <div className="stats-account-table-wrap">
+                  <table className="stats-account-table">
+                    <thead>
+                      <tr>
+                        <th>{t('stats.col_logbook')}</th>
+                        <th>{t('stats.travel_days')}</th>
+                        <th>{t('stats.total_distance')}</th>
+                        <th>{t('stats.fuel_total')}</th>
+                        <th>{t('stats.motor_hours_total')}</th>
+                        <th>{t('stats.water_total')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {accountLogbooksWithDays.map((lb) => (
+                        <tr key={lb.logbookId}>
+                          <td>{lb.title}</td>
+                          <td>{lb.totals.travelDayCount}</td>
+                          <td>{formatNm(lb.totals.totalDistanceNm)} {t('stats.unit_nm')}</td>
+                          <td>{formatLiters(lb.totals.totalFuelL)} {t('stats.unit_l')}</td>
+                          <td>{formatHours(lb.totals.totalMotorHours)} {t('stats.unit_h')}</td>
+                          <td>{formatLiters(lb.totals.totalFreshwaterL)} {t('stats.unit_l')}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              {accountStats.totals.travelDayCount > 0 && (
+                <>
+                  <div className="member-editor-card glass mt-6">
+                    <h3 className="stats-section-title">{t('stats.daily_etmal')}</h3>
+                    <DailyBarChart
+                      days={allAccountDays}
+                      valueFn={(d) => d.distanceNm}
+                      barClass="stats-bar--distance"
+                      formatValue={formatNm}
+                    />
+                  </div>
+
+                  <div className="member-editor-card glass mt-6">
+                    <h3 className="stats-section-title">{t('stats.daily_motor_hours')}</h3>
+                    {accountStats.totals.fuelPerMotorHourL != null && (
+                      <p className="stats-section-sub">
+                        {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(accountStats.totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+                      </p>
+                    )}
+                    <DailyBarChart
+                      days={allAccountDays}
+                      valueFn={(d) => d.motorHours}
+                      barClass="stats-bar--motor-hours"
+                      formatValue={formatHours}
+                    />
+                    {allAccountDays.some((d) => d.fuelPerMotorHourL != null) && (
+                      <>
+                        <h4 className="stats-section-subtitle mt-4">{t('stats.daily_fuel_per_motor_hour')}</h4>
+                        <DailyBarChart
+                          days={allAccountDays}
+                          valueFn={(d) => d.fuelPerMotorHourL ?? 0}
+                          barClass="stats-bar--fuel-per-hour"
+                          formatValue={(v) => formatFuelPerMotorHour(v > 0 ? v : null)}
+                        />
+                      </>
+                    )}
+                  </div>
+
+                  <div className="member-editor-card glass mt-6">
+                    <h3 className="stats-section-title">{t('stats.daily_consumption')}</h3>
+                    {accountStats.totals.fuelPerMotorHourL != null && (
+                      <p className="stats-section-sub">
+                        {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(accountStats.totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+                      </p>
+                    )}
+                    <ConsumptionChart days={allAccountDays} />
+                  </div>
+
+                  <div className="member-editor-card glass mt-6">
+                    <h3 className="stats-section-title">{t('stats.propulsion_title')}</h3>
+                    <PropulsionBreakdown totals={accountStats.totals} />
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </>
+      ) : null}
+    </div>
+  )
+}
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle } from 'lucide-react'
+import {
+  getSyncConflicts,
+  subscribeSyncConflicts,
+  type SyncConflict
+} from '../services/syncConflicts.js'
+import {
+  resolveSyncConflictKeepLocal,
+  resolveSyncConflictUseServer
+} from '../services/sync.js'
+
+interface SyncConflictBannerProps {
+  logbookId: string | null
+}
+
+export default function SyncConflictBanner({ logbookId }: SyncConflictBannerProps) {
+  const { t } = useTranslation()
+  const [items, setItems] = useState<SyncConflict[]>([])
+
+  useEffect(() => {
+    const refresh = () => {
+      setItems(logbookId ? getSyncConflicts(logbookId) : getSyncConflicts())
+    }
+    refresh()
+    return subscribeSyncConflicts(refresh)
+  }, [logbookId])
+
+  if (items.length === 0) return null
+
+  const first = items[0]
+
+  return (
+    <div className="sync-conflict-banner" role="alert">
+      <AlertTriangle size={20} aria-hidden />
+      <div className="sync-conflict-banner__body">
+        <strong>{t('sync.conflict_title')}</strong>
+        <p>
+          {t('sync.conflict_message', {
+            count: items.length,
+            id: first.payloadId.slice(0, 8)
+          })}
+        </p>
+        <div className="sync-conflict-banner__actions">
+          <button
+            type="button"
+            className="btn secondary"
+            onClick={() => void resolveSyncConflictUseServer(first)}
+          >
+            {t('sync.conflict_use_server')}
+          </button>
+          <button
+            type="button"
+            className="btn primary"
+            onClick={() => void resolveSyncConflictKeepLocal(first)}
+          >
+            {t('sync.conflict_keep_local')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,101 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { clampTankLiters } from '../utils/tankCapacity.js'
+import { formatTankLiters, parseAppDecimalOrZero } from '../utils/numberFormat.js'
+
+interface TankLiterInputProps {
+  id?: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  maxLiters?: number
+  disabled?: boolean
+  titleTooltip?: string
+}
+
+function parseInputLiters(value: string): number {
+  if (!value.trim()) return 0
+  return parseAppDecimalOrZero(value)
+}
+
+export default function TankLiterInput({
+  id,
+  label,
+  value,
+  onChange,
+  maxLiters,
+  disabled = false,
+  titleTooltip
+}: TankLiterInputProps) {
+  const { t } = useTranslation()
+  const useSlider = maxLiters != null && maxLiters > 0
+
+  const emitValue = useCallback(
+    (liters: number) => {
+      const clamped = clampTankLiters(liters, useSlider ? maxLiters : undefined)
+      const str = formatTankLiters(clamped)
+      onChange(str)
+    },
+    [onChange, maxLiters, useSlider]
+  )
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value)
+  }
+
+  const handleNumberBlur = () => {
+    if (!useSlider) return
+    emitValue(parseInputLiters(value))
+  }
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    emitValue(Number(e.target.value))
+  }
+
+  const numericValue = parseInputLiters(value)
+  const sliderValue = useSlider ? clampTankLiters(numericValue, maxLiters) : 0
+
+  return (
+    <div className="input-group tank-liter-input">
+      <label htmlFor={id} title={titleTooltip}>{label}</label>
+      {useSlider && (
+        <>
+          <input
+            type="range"
+            className="tank-liter-slider"
+            min={0}
+            max={maxLiters}
+            step={1}
+            value={sliderValue}
+            onChange={handleSliderChange}
+            disabled={disabled}
+            title={titleTooltip}
+            aria-valuemin={0}
+            aria-valuemax={maxLiters}
+            aria-valuenow={sliderValue}
+            aria-label={label}
+          />
+          <div className="tank-liter-slider-hint" aria-hidden="true">
+            {t('logs.tank_slider_of_max', {
+              current: sliderValue,
+              max: maxLiters
+            })}
+          </div>
+        </>
+      )}
+      <input
+        id={id}
+        type="number"
+        className="input-text"
+        value={value}
+        onChange={handleNumberChange}
+        onBlur={handleNumberBlur}
+        disabled={disabled}
+        min={0}
+        max={useSlider ? maxLiters : undefined}
+        step="any"
+        title={titleTooltip}
+      />
+    </div>
+  )
+}
@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+
+export interface ThemedSelectOption {
+  value: string
+  label: string
+}
+
+interface ThemedSelectProps {
+  id?: string
+  value: string
+  options: ThemedSelectOption[]
+  onChange: (value: string) => void
+  disabled?: boolean
+}
+
+export default function ThemedSelect({
+  id,
+  value,
+  options,
+  onChange,
+  disabled = false
+}: ThemedSelectProps) {
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const selected = options.find((option) => option.value === value)
+
+  useEffect(() => {
+    if (!open) return
+
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+
+    document.addEventListener('mousedown', closeOnOutsideClick)
+    document.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsideClick)
+      document.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [open])
+
+  const selectOption = (nextValue: string) => {
+    onChange(nextValue)
+    setOpen(false)
+  }
+
+  return (
+    <div className={`themed-select${open ? ' is-open' : ''}`} ref={rootRef}>
+      <button
+        type="button"
+        id={id}
+        className="themed-select-trigger input-text"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => !disabled && setOpen((current) => !current)}
+      >
+        <span>{selected?.label ?? value}</span>
+        <ChevronDown size={16} className="themed-select-chevron" aria-hidden="true" />
+      </button>
+
+      {open && (
+        <ul className="themed-select-menu" role="listbox" aria-labelledby={id}>
+          {options.map((option) => (
+            <li
+              key={option.value}
+              role="option"
+              aria-selected={option.value === value}
+              className={`themed-select-option${option.value === value ? ' is-selected' : ''}`}
+              onClick={() => selectOption(option.value)}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next'
+import type { TideLocationOption } from '../utils/tideLocation.js'
+
+type TideLocationPickerModalProps = {
+  title: string
+  hint: string
+  cancelLabel: string
+  options: TideLocationOption[]
+  onSelect: (option: TideLocationOption) => void
+  onCancel: () => void
+}
+
+export function TideLocationPickerModal({
+  title,
+  hint,
+  cancelLabel,
+  options,
+  onSelect,
+  onCancel
+}: TideLocationPickerModalProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      className="live-log-modal-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel()
+      }}
+    >
+      <div className="live-log-modal tide-station-picker" onClick={(e) => e.stopPropagation()}>
+        <h3>{title}</h3>
+        <p className="live-log-modal-hint" role="note">
+          {hint}
+        </p>
+        <ul className="tide-station-picker__list">
+          {options.map((option) => (
+            <li key={option.role}>
+              <button
+                type="button"
+                className="tide-station-picker__option"
+                onClick={() => onSelect(option)}
+              >
+                <span className="tide-station-picker__name">{option.displayLabel}</span>
+                <span className="tide-station-picker__meta">
+                  {t(option.labelKey)}
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="live-log-modal-actions">
+          <button type="button" className="btn secondary" onClick={onCancel}>
+            {cancelLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,57 @@
+import type { TideStation } from '../services/tides.js'
+
+type TideStationPickerModalProps = {
+  title: string
+  hint: string
+  cancelLabel: string
+  stations: TideStation[]
+  onSelect: (station: TideStation) => void
+  onCancel: () => void
+}
+
+export function TideStationPickerModal({
+  title,
+  hint,
+  cancelLabel,
+  stations,
+  onSelect,
+  onCancel
+}: TideStationPickerModalProps) {
+  return (
+    <div
+      className="live-log-modal-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel()
+      }}
+    >
+      <div className="live-log-modal tide-station-picker" onClick={(e) => e.stopPropagation()}>
+        <h3>{title}</h3>
+        <p className="live-log-modal-hint" role="note">
+          {hint}
+        </p>
+        <ul className="tide-station-picker__list">
+          {stations.map((station) => (
+            <li key={station.id}>
+              <button
+                type="button"
+                className="tide-station-picker__option"
+                onClick={() => onSelect(station)}
+              >
+                <span className="tide-station-picker__name">{station.name}</span>
+                <span className="tide-station-picker__meta">
+                  {station.distanceKm} km
+                  {station.area ? ` · ${station.area}` : ''}
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="live-log-modal-actions">
+          <button type="button" className="btn secondary" onClick={onCancel}>
+            {cancelLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,844 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
+import {
+  User,
+  ChevronLeft,
+  LogOut,
+  KeyRound,
+  Copy,
+  Check,
+  Plus,
+  Trash2,
+  BookOpen,
+  Anchor,
+  Gauge,
+  Sailboat,
+  Ship,
+  Timer,
+  Share2,
+  Calendar,
+  Lock,
+  BarChart2,
+  Shield,
+  Smartphone,
+  RefreshCw,
+  Wifi,
+  WifiOff,
+  CircleCheck,
+  CircleAlert
+} from 'lucide-react'
+import AccountDangerZone from './AccountDangerZone.tsx'
+import UserProfilePreferences from './UserProfilePreferences.tsx'
+import PersonPoolForm from './PersonPoolForm.tsx'
+import VesselPoolForm from './VesselPoolForm.tsx'
+import ProfileAccordionSection from './ProfileAccordionSection.tsx'
+import { useAppTour } from '../context/AppTourContext.tsx'
+import BetaBadge from './BetaBadge.tsx'
+import { useDialog } from './ModalDialog.tsx'
+import {
+  addPasskey,
+  fetchUserProfile,
+  forgetUsername,
+  getActiveMasterKey,
+  getKnownUsernames,
+  hasLocalPin,
+  removeLocalPin,
+  removePasskey,
+  renamePasskey,
+  rotateRecoveryPhrase,
+  setLocalPin,
+  type UserProfile
+} from '../services/auth.js'
+import {
+  formatHours,
+  formatNm,
+  loadAccountStats,
+  type AccountStatsSummary
+} from '../services/statsAggregation.js'
+import { db } from '../services/db.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+interface UserProfilePageProps {
+  onBack: () => void
+  onLogout: () => void
+}
+
+function formatAccountAge(createdAt: string, locale: string): string {
+  const created = new Date(createdAt)
+  if (Number.isNaN(created.getTime())) return createdAt
+  return created.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+function KpiCard({
+  icon,
+  label,
+  value,
+  unit
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+  unit?: string
+}) {
+  return (
+    <div className="stats-kpi-card glass">
+      <div className="stats-kpi-icon">{icon}</div>
+      <div className="stats-kpi-body">
+        <span className="stats-kpi-label">{label}</span>
+        <span className="stats-kpi-value">
+          {value}
+          {unit ? <span className="stats-kpi-unit">{unit}</span> : null}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function SecurityCheckItem({ ok, label }: { ok: boolean; label: string }) {
+  return (
+    <li className={`profile-security-item ${ok ? 'profile-security-item--ok' : 'profile-security-item--warn'}`}>
+      {ok ? <CircleCheck size={18} aria-hidden="true" /> : <CircleAlert size={18} aria-hidden="true" />}
+      <span>{label}</span>
+    </li>
+  )
+}
+
+export default function UserProfilePage({ onBack, onLogout }: UserProfilePageProps) {
+  const { t, i18n } = useTranslation()
+  const { showConfirm, showAlert } = useDialog()
+  const username = localStorage.getItem('active_username') || 'Skipper'
+
+  const [profile, setProfile] = useState<UserProfile | null>(null)
+  const [accountStats, setAccountStats] = useState<AccountStatsSummary | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [copiedUserId, setCopiedUserId] = useState(false)
+  const [passkeyBusy, setPasskeyBusy] = useState(false)
+  const [pinBusy, setPinBusy] = useState(false)
+  const [pinInput, setPinInput] = useState('')
+  const [pinConfirm, setPinConfirm] = useState('')
+  const [pinActive, setPinActive] = useState(() => hasLocalPin(username))
+  const [newPasskeyLabel, setNewPasskeyLabel] = useState('')
+  const [passkeyLabels, setPasskeyLabels] = useState<Record<string, string>>({})
+  const [online, setOnline] = useState(navigator.onLine)
+  const [isKnownDevice, setIsKnownDevice] = useState(() =>
+    getKnownUsernames().some((u) => u.toLowerCase() === username.toLowerCase())
+  )
+  const [recoveryBusy, setRecoveryBusy] = useState(false)
+  const [pendingRecoveryPhrase, setPendingRecoveryPhrase] = useState<string | null>(null)
+  const [recoveryCopied, setRecoveryCopied] = useState(false)
+
+  const {
+    pendingCount: pendingSyncCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName
+  } = useSyncIndicator()
+
+  const { isActive: tourActive, currentStepId: tourStepId } = useAppTour()
+  const fleetSectionTourOpen =
+    tourActive &&
+    (tourStepId === 'profile_vessel_pool' || tourStepId === 'profile_crew_pool')
+
+  const sharedLogbookCount = useLiveQuery(
+    () => db.logbooks.filter((lb) => lb.isShared === 1).count(),
+    []
+  ) ?? 0
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const profileData = await fetchUserProfile()
+      setProfile(profileData)
+
+      try {
+        const stats = await loadAccountStats(false)
+        setAccountStats(stats)
+      } catch (statsErr) {
+        console.error('Failed to load account stats for profile:', statsErr)
+        setAccountStats(null)
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.load_error'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    void loadData()
+  }, [loadData])
+
+  useEffect(() => {
+    trackPlausibleEvent(PlausibleEvents.PROFILE_OPENED)
+  }, [])
+
+  useEffect(() => {
+    const handleOnline = () => setOnline(true)
+    const handleOffline = () => setOnline(false)
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!profile) return
+    const labels: Record<string, string> = {}
+    for (const cred of profile.credentials) {
+      labels[cred.id] = cred.label ?? ''
+    }
+    setPasskeyLabels(labels)
+  }, [profile])
+
+  const statsTotals = accountStats?.totals
+  const logbookCount =
+    accountStats?.logbooks.length ?? profile?.serverMeta.ownedLogbookCount ?? 0
+
+  const accountAgeLabel = useMemo(() => {
+    if (!profile?.createdAt) return '—'
+    return formatAccountAge(profile.createdAt, i18n.language)
+  }, [profile?.createdAt, i18n.language])
+
+  const handleCopyUserId = async () => {
+    if (!profile?.userId) return
+    try {
+      await navigator.clipboard.writeText(profile.userId)
+      setCopiedUserId(true)
+      window.setTimeout(() => setCopiedUserId(false), 2000)
+    } catch {
+      showAlert(t('profile.copy_failed'))
+    }
+  }
+
+  const handleAddPasskey = async () => {
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      const hadLabel = Boolean(newPasskeyLabel.trim())
+      await addPasskey(newPasskeyLabel)
+      setNewPasskeyLabel('')
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_ADDED, { labeled: hadLabel })
+      showAlert(t('profile.add_passkey_success'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.add_passkey_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleRenamePasskey = async (credentialId: string) => {
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      await renamePasskey(credentialId, passkeyLabels[credentialId] ?? '')
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_RENAMED)
+      showAlert(t('profile.passkey_rename_success'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.passkey_rename_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleForgetDevice = async () => {
+    const confirmed = await showConfirm(
+      t('profile.device_forget_confirm_desc'),
+      t('profile.device_forget_confirm_title'),
+      t('profile.device_forget_confirm_yes'),
+      t('profile.device_forget_confirm_no')
+    )
+    if (!confirmed) return
+
+    forgetUsername(username)
+    setIsKnownDevice(false)
+    trackPlausibleEvent(PlausibleEvents.DEVICE_FORGOTTEN)
+  }
+
+  const handleRemovePasskey = async (credentialId: string) => {
+    if (profile && profile.credentials.length <= 1) {
+      trackPlausibleEvent(PlausibleEvents.LAST_PASSKEY_REMOVE_HINTED)
+      await showAlert(
+        t('profile.remove_passkey_last_desc'),
+        t('profile.remove_passkey_last_title')
+      )
+      return
+    }
+
+    const confirmed = await showConfirm(
+      t('profile.remove_passkey_confirm_desc'),
+      t('profile.remove_passkey_confirm_title'),
+      t('profile.remove_passkey_confirm_yes'),
+      t('profile.remove_passkey_confirm_no')
+    )
+    if (!confirmed) return
+
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      await removePasskey(credentialId)
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_REMOVED)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.remove_passkey_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleSavePin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (pinInput.length < 4) {
+      setError(t('profile.pin_length_error'))
+      return
+    }
+    if (pinInput !== pinConfirm) {
+      setError(t('profile.pin_mismatch'))
+      return
+    }
+
+    const masterKey = getActiveMasterKey()
+    if (!masterKey) {
+      setError(t('profile.pin_no_session'))
+      return
+    }
+
+    const pinAction = pinActive ? 'change' : 'set'
+
+    setPinBusy(true)
+    setError(null)
+    try {
+      await setLocalPin(pinInput.trim(), username, masterKey)
+      setPinActive(true)
+      setPinInput('')
+      setPinConfirm('')
+      trackPlausibleEvent(PlausibleEvents.LOCAL_PIN_SET, { action: pinAction })
+      showAlert(t('profile.pin_saved'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.pin_save_failed'))
+    } finally {
+      setPinBusy(false)
+    }
+  }
+
+  const handleRemovePin = async () => {
+    const confirmed = await showConfirm(
+      t('profile.remove_pin_confirm_desc'),
+      t('profile.remove_pin_confirm_title'),
+      t('profile.remove_pin_confirm_yes'),
+      t('profile.remove_pin_confirm_no')
+    )
+    if (!confirmed) return
+
+    removeLocalPin(username)
+    setPinActive(false)
+    setPinInput('')
+    setPinConfirm('')
+    trackPlausibleEvent(PlausibleEvents.LOCAL_PIN_REMOVED)
+  }
+
+  const handleRotateRecovery = async () => {
+    const confirmed = await showConfirm(
+      t('profile.recovery_rotate_confirm_desc'),
+      t('profile.recovery_rotate_confirm_title'),
+      t('profile.recovery_rotate_confirm_yes'),
+      t('profile.recovery_rotate_confirm_no')
+    )
+    if (!confirmed) return
+
+    if (!getActiveMasterKey()) {
+      setError(t('profile.recovery_rotate_no_session'))
+      return
+    }
+
+    setRecoveryBusy(true)
+    setError(null)
+    try {
+      const phrase = await rotateRecoveryPhrase()
+      setPendingRecoveryPhrase(phrase)
+      trackPlausibleEvent(PlausibleEvents.RECOVERY_ROTATED)
+    } catch (err: unknown) {
+      if (err instanceof Error && err.message === 'NO_ACTIVE_MASTER_KEY') {
+        setError(t('profile.recovery_rotate_no_session'))
+      } else {
+        setError(err instanceof Error ? err.message : t('profile.recovery_rotate_failed'))
+      }
+    } finally {
+      setRecoveryBusy(false)
+    }
+  }
+
+  const handleCopyRecoveryPhrase = async () => {
+    if (!pendingRecoveryPhrase) return
+    try {
+      await navigator.clipboard.writeText(pendingRecoveryPhrase)
+      setRecoveryCopied(true)
+      window.setTimeout(() => setRecoveryCopied(false), 2000)
+    } catch {
+      showAlert(t('profile.copy_failed'))
+    }
+  }
+
+  const handleConfirmRecoverySaved = () => {
+    setPendingRecoveryPhrase(null)
+    setRecoveryCopied(false)
+  }
+
+  return (
+    <div className="dashboard-container">
+      <header className="dashboard-header dashboard-header--profile">
+        <div className="header-brand profile-header-brand">
+          <button className="btn-back profile-back-btn" onClick={onBack} title={t('profile.back')}>
+            <ChevronLeft size={16} />
+            <span>{t('profile.back')}</span>
+          </button>
+          <div>
+            <div className="header-brand-title-row">
+              <h1>{t('profile.title')}</h1>
+              <BetaBadge />
+            </div>
+            <p className="subtitle">{t('profile.subtitle', { name: username })}</p>
+          </div>
+        </div>
+
+        <div className="header-actions">
+          <button className="btn-icon logout" onClick={onLogout} title={t('dashboard.logout')}>
+            <LogOut size={18} />
+          </button>
+        </div>
+      </header>
+
+      <main className="profile-main">
+        {error && <div className="auth-error mb-4">{error}</div>}
+
+        {loading ? (
+          <div className="tab-placeholder">
+            <User className="header-logo spin" size={48} />
+            <p>{t('profile.loading')}</p>
+          </div>
+        ) : pendingRecoveryPhrase ? (
+          <section className="form-card profile-recovery-card">
+            <div className="form-header">
+              <KeyRound size={24} className="form-icon" />
+              <h2>{t('auth.recovery_title')}</h2>
+            </div>
+            <p className="profile-recovery-warning">{t('profile.recovery_rotate_new_warning')}</p>
+            <div className="phrase-grid">
+              {pendingRecoveryPhrase.split(' ').map((word, idx) => (
+                <div key={idx} className="phrase-word">
+                  <span className="word-num">{idx + 1}</span>
+                  {word}
+                </div>
+              ))}
+            </div>
+            <div className="form-actions profile-recovery-actions">
+              <button type="button" className="btn secondary" onClick={() => void handleCopyRecoveryPhrase()}>
+                {recoveryCopied ? t('auth.copied') : t('auth.copy_phrase')}
+              </button>
+              <button type="button" className="btn primary" onClick={handleConfirmRecoverySaved}>
+                {t('auth.confirm_recovery')}
+              </button>
+            </div>
+          </section>
+        ) : profile ? (
+          <>
+            <ProfileAccordionSection
+              id="account"
+              title={t('profile.sections.account')}
+              icon={<User size={20} aria-hidden="true" />}
+              defaultOpen
+            >
+            <div data-tour="profile-preferences">
+            <section className="form-card profile-accordion-inner-card">
+              <div className="form-header">
+                <User size={24} className="form-icon" />
+                <h2>{t('profile.identity_title')}</h2>
+              </div>
+
+              <dl className="profile-dl">
+                <div className="profile-dl-row">
+                  <dt>{t('profile.username')}</dt>
+                  <dd>{profile.username}</dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.user_id')}</dt>
+                  <dd className="profile-user-id">
+                    <code>{profile.userId}</code>
+                    <button
+                      type="button"
+                      className="btn-icon profile-copy-btn"
+                      onClick={() => void handleCopyUserId()}
+                      title={t('profile.copy_user_id')}
+                    >
+                      {copiedUserId ? <Check size={16} /> : <Copy size={16} />}
+                    </button>
+                  </dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.account_since')}</dt>
+                  <dd>{accountAgeLabel}</dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.prf_status')}</dt>
+                  <dd>
+                    {profile.hasPrfEncryption
+                      ? t('profile.prf_active')
+                      : t('profile.prf_inactive')}
+                  </dd>
+                </div>
+              </dl>
+            </section>
+
+            <UserProfilePreferences userId={profile.userId} />
+            </div>
+            </ProfileAccordionSection>
+
+            <ProfileAccordionSection
+              id="fleet"
+              title={t('profile.sections.fleet')}
+              icon={<Ship size={20} aria-hidden="true" />}
+              defaultOpen
+              forceOpen={fleetSectionTourOpen ? true : undefined}
+            >
+            <VesselPoolForm />
+            <PersonPoolForm />
+            </ProfileAccordionSection>
+
+            <ProfileAccordionSection
+              id="security"
+              title={t('profile.sections.security')}
+              icon={<Shield size={20} aria-hidden="true" />}
+            >
+            <section className="member-editor-card glass profile-accordion-inner-card">
+              <div className="profile-section-header">
+                <Shield size={20} />
+                <h3>{t('profile.security_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.security_desc')}</p>
+              <ul className="profile-security-list">
+                <SecurityCheckItem
+                  ok={profile.credentials.length > 0}
+                  label={
+                    profile.credentials.length > 0
+                      ? t('profile.security_passkeys_ok')
+                      : t('profile.security_passkeys_missing')
+                  }
+                />
+                <SecurityCheckItem
+                  ok={profile.hasPrfEncryption}
+                  label={
+                    profile.hasPrfEncryption
+                      ? t('profile.security_prf_ok')
+                      : t('profile.security_prf_missing')
+                  }
+                />
+                <SecurityCheckItem
+                  ok={pinActive}
+                  label={pinActive ? t('profile.security_pin_ok') : t('profile.security_pin_missing')}
+                />
+                <SecurityCheckItem ok label={t('profile.security_recovery_ok')} />
+              </ul>
+              <p className="profile-section-desc profile-recovery-hint">{t('profile.security_recovery_hint')}</p>
+              <div className="form-actions profile-recovery-actions">
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={() => void handleRotateRecovery()}
+                  disabled={recoveryBusy || passkeyBusy || pinBusy}
+                >
+                  {recoveryBusy ? t('profile.processing') : t('profile.recovery_rotate_btn')}
+                </button>
+              </div>
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <Smartphone size={20} />
+                <h3>{t('profile.device_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.device_desc')}</p>
+              <div className={`profile-device-status ${connStatusClassName(online)}`}>
+                {online ? (
+                  showSpinner ? (
+                    <>
+                      <RefreshCw size={16} className="spin" aria-hidden="true" />
+                      <span>{t('sync.status_syncing')}</span>
+                    </>
+                  ) : showPendingWarning ? (
+                    <>
+                      <RefreshCw size={16} aria-hidden="true" />
+                      <span>{t('profile.device_sync_pending', { count: pendingSyncCount })}</span>
+                    </>
+                  ) : (
+                    <>
+                      <Wifi size={16} aria-hidden="true" />
+                      <span>{t('profile.device_sync_ok')}</span>
+                    </>
+                  )
+                ) : (
+                  <>
+                    <WifiOff size={16} aria-hidden="true" />
+                    <span>{t('sync.status_offline')}</span>
+                  </>
+                )}
+              </div>
+              <p className="profile-pin-status">
+                {isKnownDevice ? t('profile.device_remembered') : t('profile.device_not_remembered')}
+              </p>
+              {isKnownDevice && (
+                <div className="form-actions">
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={() => void handleForgetDevice()}
+                  >
+                    {t('profile.device_forget_btn')}
+                  </button>
+                </div>
+              )}
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <Lock size={20} />
+                <h3>{t('profile.pin_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('auth.setup_pin_warning')}</p>
+              <p className="profile-pin-status">
+                {t('profile.pin_status')}:{' '}
+                <strong>{pinActive ? t('profile.pin_active') : t('profile.pin_inactive')}</strong>
+              </p>
+
+              <form onSubmit={(e) => void handleSavePin(e)} className="profile-pin-form">
+                <div className="input-group">
+                  <label htmlFor="profile-pin">{t('auth.pin_label')}</label>
+                  <input
+                    id="profile-pin"
+                    type="password"
+                    inputMode="numeric"
+                    autoComplete="new-password"
+                    className="input-text"
+                    placeholder={t('auth.pin_placeholder')}
+                    value={pinInput}
+                    onChange={(e) => setPinInput(e.target.value)}
+                    disabled={pinBusy}
+                  />
+                </div>
+                <div className="input-group">
+                  <label htmlFor="profile-pin-confirm">{t('profile.pin_confirm_label')}</label>
+                  <input
+                    id="profile-pin-confirm"
+                    type="password"
+                    inputMode="numeric"
+                    autoComplete="new-password"
+                    className="input-text"
+                    placeholder={t('profile.pin_confirm_placeholder')}
+                    value={pinConfirm}
+                    onChange={(e) => setPinConfirm(e.target.value)}
+                    disabled={pinBusy}
+                  />
+                </div>
+                <div className="form-actions">
+                  <button
+                    type="submit"
+                    className="btn primary"
+                    disabled={pinBusy || pinInput.length < 4 || pinConfirm.length < 4}
+                  >
+                    {pinActive ? t('profile.pin_change_btn') : t('profile.pin_set_btn')}
+                  </button>
+                  {pinActive && (
+                    <button
+                      type="button"
+                      className="btn secondary"
+                      onClick={() => void handleRemovePin()}
+                      disabled={pinBusy}
+                    >
+                      {t('profile.pin_remove_btn')}
+                    </button>
+                  )}
+                </div>
+              </form>
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <KeyRound size={20} />
+                <h3>{t('profile.passkeys_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.passkeys_desc')}</p>
+
+              {profile.credentials.length === 0 ? (
+                <p className="profile-empty">{t('profile.passkeys_empty')}</p>
+              ) : (
+                <ul className="profile-passkey-list">
+                  {profile.credentials.map((cred) => (
+                    <li key={cred.id} className="profile-passkey-item">
+                      <div className="profile-passkey-main">
+                        <span className="profile-passkey-label">
+                          {cred.label || t('profile.passkey_unnamed')}
+                        </span>
+                        <span className="profile-passkey-id">{cred.credentialIdPreview}</span>
+                        {cred.transports.length > 0 && (
+                          <span className="profile-passkey-transports">
+                            {cred.transports.join(', ')}
+                          </span>
+                        )}
+                        <div className="profile-passkey-rename">
+                          <input
+                            type="text"
+                            className="input-text"
+                            value={passkeyLabels[cred.id] ?? ''}
+                            onChange={(e) =>
+                              setPasskeyLabels((prev) => ({ ...prev, [cred.id]: e.target.value }))
+                            }
+                            placeholder={t('profile.passkey_label_placeholder')}
+                            disabled={passkeyBusy}
+                            maxLength={64}
+                          />
+                          <button
+                            type="button"
+                            className="btn secondary"
+                            onClick={() => void handleRenamePasskey(cred.id)}
+                            disabled={passkeyBusy}
+                          >
+                            {t('profile.passkey_rename_btn')}
+                          </button>
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        className="btn-icon danger"
+                        onClick={() => void handleRemovePasskey(cred.id)}
+                        disabled={passkeyBusy}
+                        title={t('profile.remove_passkey_btn')}
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              <div className="profile-add-passkey">
+                <div className="input-group">
+                  <label htmlFor="profile-new-passkey-label">{t('profile.passkey_label')}</label>
+                  <input
+                    id="profile-new-passkey-label"
+                    type="text"
+                    className="input-text"
+                    value={newPasskeyLabel}
+                    onChange={(e) => setNewPasskeyLabel(e.target.value)}
+                    placeholder={t('profile.passkey_label_placeholder')}
+                    disabled={passkeyBusy}
+                    maxLength={64}
+                  />
+                </div>
+              </div>
+
+              <div className="form-actions mt-4">
+                <button
+                  type="button"
+                  className="btn primary"
+                  onClick={() => void handleAddPasskey()}
+                  disabled={passkeyBusy}
+                >
+                  <Plus size={16} />
+                  {passkeyBusy ? t('profile.processing') : t('profile.add_passkey_btn')}
+                </button>
+              </div>
+            </section>
+
+            </ProfileAccordionSection>
+
+            <ProfileAccordionSection
+              id="stats"
+              title={t('profile.sections.stats')}
+              icon={<BarChart2 size={20} aria-hidden="true" />}
+            >
+            <section className="form-card profile-stats-section profile-accordion-inner-card">
+              <div className="form-header">
+                <BarChart2 size={24} className="form-icon" />
+                <div>
+                  <h2>{t('profile.stats_title')}</h2>
+                  <p className="stats-subtitle">{t('profile.stats_subtitle')}</p>
+                </div>
+              </div>
+
+              {(statsTotals || profile) && (
+                <div className="stats-kpi-grid profile-stats-kpi-grid">
+                  <KpiCard
+                    icon={<BookOpen size={20} />}
+                    label={t('profile.stats_logbooks')}
+                    value={String(logbookCount)}
+                  />
+                  {statsTotals && (
+                    <>
+                      <KpiCard
+                        icon={<Anchor size={20} />}
+                        label={t('stats.travel_days')}
+                        value={String(statsTotals.travelDayCount)}
+                      />
+                      <KpiCard
+                        icon={<Gauge size={20} />}
+                        label={t('stats.total_distance')}
+                        value={formatNm(statsTotals.totalDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Sailboat size={20} />}
+                        label={t('stats.sail_distance')}
+                        value={formatNm(statsTotals.sailDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Gauge size={20} />}
+                        label={t('stats.motor_distance')}
+                        value={formatNm(statsTotals.motorDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Timer size={20} />}
+                        label={t('stats.motor_hours_total')}
+                        value={formatHours(statsTotals.totalMotorHours)}
+                        unit={t('stats.unit_h')}
+                      />
+                      <KpiCard
+                        icon={<Share2 size={20} />}
+                        label={t('profile.stats_shared_logbooks')}
+                        value={String(sharedLogbookCount)}
+                      />
+                    </>
+                  )}
+                  <KpiCard
+                    icon={<Calendar size={20} />}
+                    label={t('profile.stats_account_since')}
+                    value={accountAgeLabel}
+                  />
+                </div>
+              )}
+            </section>
+            </ProfileAccordionSection>
+
+            <ProfileAccordionSection
+              id="danger"
+              title={t('profile.sections.danger')}
+            >
+            <AccountDangerZone className="profile-accordion-inner-card" />
+            </ProfileAccordionSection>
+          </>
+        ) : null}
+      </main>
+    </div>
+  )
+}
@@ -0,0 +1,219 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Compass, Palette, Save, Check, Cloud, Brain } from 'lucide-react'
+import ThemedSelect from './ThemedSelect.tsx'
+import PushNotificationSettings from './PushNotificationSettings.tsx'
+import PwaInstallPrompt from './PwaInstallPrompt.tsx'
+import { notifyAppearanceChanged } from '../services/appearance.js'
+import { saveAppearancePrefsToServer } from '../services/appearancePrefs.js'
+import { useAppTour } from '../context/AppTourContext.tsx'
+import {
+  getColorSchemePreference,
+  getOwmApiKey,
+  getThemePreference,
+  setColorSchemePreference,
+  setOwmApiKey,
+  setThemePreference,
+  getAiAuthorized,
+  setAiAuthorized
+} from '../services/userPreferences.js'
+
+interface UserProfilePreferencesProps {
+  userId: string
+}
+
+export default function UserProfilePreferences({ userId }: UserProfilePreferencesProps) {
+  const { t } = useTranslation()
+  const { restartTour } = useAppTour()
+  const [apiKey, setApiKey] = useState(() => getOwmApiKey(userId))
+  const [theme, setTheme] = useState(() => getThemePreference(userId))
+  const [colorScheme, setColorScheme] = useState(() => getColorSchemePreference(userId))
+  const [savingOwm, setSavingOwm] = useState(false)
+  const [owmSaved, setOwmSaved] = useState(false)
+  const [aiAuthorized, setAiAuthorizedState] = useState(() => getAiAuthorized(userId))
+
+  useEffect(() => {
+    const handleChanged = () => {
+      setTheme(getThemePreference(userId))
+      setColorScheme(getColorSchemePreference(userId))
+      setAiAuthorizedState(getAiAuthorized(userId))
+    }
+    window.addEventListener('appearance-changed', handleChanged)
+    return () => {
+      window.removeEventListener('appearance-changed', handleChanged)
+    }
+  }, [userId])
+
+  const persistAppearance = (nextTheme: string, nextColorScheme: string) => {
+    setThemePreference(userId, nextTheme)
+    setColorSchemePreference(userId, nextColorScheme)
+    notifyAppearanceChanged()
+    void saveAppearancePrefsToServer(nextTheme, nextColorScheme, aiAuthorized, userId).catch((err) => {
+      console.warn('Failed to save appearance prefs to server:', err)
+    })
+  }
+
+  const handleThemeChange = (nextTheme: string) => {
+    setTheme(nextTheme)
+    persistAppearance(nextTheme, colorScheme)
+  }
+
+  const handleColorSchemeChange = (nextColorScheme: string) => {
+    setColorScheme(nextColorScheme)
+    persistAppearance(theme, nextColorScheme)
+  }
+
+  const handleSaveOwm = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSavingOwm(true)
+    setOwmSaved(false)
+    setOwmApiKey(userId, apiKey)
+    setSavingOwm(false)
+    setOwmSaved(true)
+    window.setTimeout(() => setOwmSaved(false), 3000)
+  }
+
+  const handleAiToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const nextVal = e.target.checked
+    setAiAuthorizedState(nextVal)
+    setAiAuthorized(userId, nextVal)
+    void saveAppearancePrefsToServer(theme, colorScheme, nextVal, userId).catch((err) => {
+      console.warn('Failed to save ai preference to server:', err)
+    })
+  }
+
+  return (
+    <>
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Palette size={20} />
+          <h3>{t('profile.appearance_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.appearance_desc')}</p>
+
+        <div className="input-group">
+          <label htmlFor="profile-app-theme" className="profile-field-label">
+            {t('profile.theme_label')}
+          </label>
+          <ThemedSelect
+            id="profile-app-theme"
+            value={theme}
+            onChange={handleThemeChange}
+            options={[
+              { value: 'auto', label: t('profile.theme_auto') },
+              { value: 'ocean', label: t('profile.theme_ocean') },
+              { value: 'material', label: t('profile.theme_material') },
+              { value: 'cupertino', label: t('profile.theme_cupertino') }
+            ]}
+          />
+        </div>
+
+        <div className="input-group mt-4">
+          <label htmlFor="profile-color-scheme" className="profile-field-label">
+            {t('profile.color_scheme_label')}
+          </label>
+          <ThemedSelect
+            id="profile-color-scheme"
+            value={colorScheme}
+            onChange={handleColorSchemeChange}
+            options={[
+              { value: 'auto', label: t('profile.color_scheme_auto') },
+              { value: 'light', label: t('profile.color_scheme_light') },
+              { value: 'dark', label: t('profile.color_scheme_dark') }
+            ]}
+          />
+        </div>
+      </section>
+
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Compass size={20} />
+          <h3>{t('profile.tour_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.tour_desc')}</p>
+        <div className="form-actions">
+          <button type="button" className="btn secondary" onClick={() => restartTour()}>
+            {t('profile.tour_restart')}
+          </button>
+        </div>
+      </section>
+
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Cloud size={20} />
+          <h3>{t('profile.integrations_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.owm_help')}</p>
+        <form onSubmit={handleSaveOwm}>
+          <div className="input-group">
+            <label htmlFor="profile-owm-api-key" className="profile-field-label">
+              {t('profile.owm_key')}
+            </label>
+            <input
+              id="profile-owm-api-key"
+              name="owm-api-key"
+              type="password"
+              className="input-text"
+              placeholder="e.g. 8b6a7f...d8"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              disabled={savingOwm}
+              autoComplete="off"
+            />
+          </div>
+          <div className="form-actions mt-4">
+            {owmSaved && (
+              <div className="success-toast">
+                <Check size={16} />
+                <span>{t('profile.prefs_saved')}</span>
+              </div>
+            )}
+            <button type="submit" className="btn primary" disabled={savingOwm}>
+              <Save size={18} />
+              {savingOwm ? t('profile.prefs_saving') : t('profile.prefs_save')}
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Brain size={20} style={{ color: 'var(--app-accent-light)' }} />
+          <h3 style={{ margin: 0, color: 'var(--app-accent-light)', fontSize: '16px' }}>
+            {t('profile.ai_title')}
+          </h3>
+        </div>
+        <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 12px 0' }}>
+          {t('profile.ai_desc')}
+        </p>
+        <p className="text-muted" style={{ fontSize: '13px', lineHeight: '145%', margin: '0 0 16px 0', whiteSpace: 'pre-line' }}>
+          {t('profile.ai_help')}
+        </p>
+
+        <label
+          className="switch-label"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            cursor: 'pointer',
+            fontSize: '14px',
+            color: '#f1f5f9'
+          }}
+        >
+          <input
+            id="profile-ai-authorize"
+            type="checkbox"
+            checked={aiAuthorized}
+            onChange={handleAiToggle}
+            style={{ width: '18px', height: '18px', cursor: 'pointer' }}
+          />
+          <span>{t('profile.ai_enable_label')}</span>
+        </label>
+      </section>
+
+      <PushNotificationSettings />
+      <PwaInstallPrompt variant="inline" />
+    </>
+  )
+}
@@ -0,0 +1,328 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Ship, Camera, Trash2, Plus, X } from 'lucide-react'
+import type { VesselFormInputs } from '../utils/vesselFormUtils.js'
+
+export interface VesselDataFieldsProps {
+  inputs: VesselFormInputs
+  onChange: (next: VesselFormInputs) => void
+  readOnly?: boolean
+  saving?: boolean
+  newSailName: string
+  onNewSailNameChange: (value: string) => void
+  onAddSail: () => void
+  onRemoveSail: (index: number) => void
+  photoError?: string | null
+  onPhotoChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onRemovePhoto: () => void
+  fileInputRef: React.RefObject<HTMLInputElement | null>
+}
+
+export default function VesselDataFields({
+  inputs,
+  onChange,
+  readOnly = false,
+  saving = false,
+  newSailName,
+  onNewSailNameChange,
+  onAddSail,
+  onRemoveSail,
+  photoError,
+  onPhotoChange,
+  onRemovePhoto,
+  fileInputRef
+}: VesselDataFieldsProps) {
+  const { t } = useTranslation()
+  const set = (patch: Partial<VesselFormInputs>) => onChange({ ...inputs, ...patch })
+
+  const triggerFileInput = () => {
+    if (!readOnly) fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="form-grid">
+      <div className="vessel-photo-wrapper">
+        <div
+          className="vessel-photo-preview"
+          onClick={triggerFileInput}
+          style={{ cursor: readOnly ? 'default' : 'pointer' }}
+        >
+          {inputs.photo ? (
+            <img src={inputs.photo} alt={inputs.name || 'Vessel'} className="vessel-photo" />
+          ) : (
+            <div className="vessel-photo-placeholder">
+              <Ship size={48} className="placeholder-icon" />
+            </div>
+          )}
+          {!readOnly && (
+            <div className="vessel-photo-overlay">
+              <Camera size={24} />
+              <span>{inputs.photo ? t('vessel.photo_change') : t('vessel.photo_add')}</span>
+            </div>
+          )}
+        </div>
+        {!readOnly && (
+          <div className="vessel-photo-actions">
+            <button type="button" className="btn secondary btn-sm" onClick={triggerFileInput} disabled={saving}>
+              <Camera size={16} />
+              {inputs.photo ? t('vessel.photo_change') : t('vessel.photo_add')}
+            </button>
+            {inputs.photo && (
+              <button type="button" className="btn danger btn-sm" onClick={onRemovePhoto} disabled={saving}>
+                <Trash2 size={16} />
+                {t('vessel.photo_delete')}
+              </button>
+            )}
+          </div>
+        )}
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={onPhotoChange}
+          accept="image/*"
+          style={{ display: 'none' }}
+        />
+        {photoError && <div className="auth-error mt-2">{photoError}</div>}
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.name')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.name}
+          onChange={(e) => set({ name: e.target.value })}
+          disabled={saving || readOnly}
+          required
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.type')}</label>
+        <select
+          className="input-text"
+          value={inputs.vesselType}
+          onChange={(e) => set({ vesselType: e.target.value })}
+          disabled={saving || readOnly}
+        >
+          <option value="">{t('vessel.type_unset')}</option>
+          <option value="sailing">{t('vessel.type_sailing')}</option>
+          <option value="motor">{t('vessel.type_motor')}</option>
+        </select>
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.length_m')}</label>
+        <input
+          type="text"
+          inputMode="decimal"
+          className="input-text"
+          value={inputs.lengthM}
+          onChange={(e) => set({ lengthM: e.target.value })}
+          disabled={saving || readOnly}
+          placeholder="0.00"
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.draft_m')}</label>
+        <input
+          type="text"
+          inputMode="decimal"
+          className="input-text"
+          value={inputs.draftM}
+          onChange={(e) => set({ draftM: e.target.value })}
+          disabled={saving || readOnly}
+          placeholder="0.00"
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.air_draft_m')}</label>
+        <input
+          type="text"
+          inputMode="decimal"
+          className="input-text"
+          value={inputs.airDraftM}
+          onChange={(e) => set({ airDraftM: e.target.value })}
+          disabled={saving || readOnly}
+          placeholder="0.00"
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.port')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.homePort}
+          onChange={(e) => set({ homePort: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.owner')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.owner}
+          onChange={(e) => set({ owner: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.charter')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.charterCompany}
+          onChange={(e) => set({ charterCompany: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.registration')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.registrationNumber}
+          onChange={(e) => set({ registrationNumber: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.callsign')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.callSign}
+          onChange={(e) => set({ callSign: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.atis')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.atis}
+          onChange={(e) => set({ atis: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.mmsi')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.mmsi}
+          onChange={(e) => set({ mmsi: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="vessel-tanks-section">
+        <h3>{t('vessel.tanks_section')}</h3>
+        <p className="vessel-tanks-help">{t('vessel.tanks_help')}</p>
+        <div className="vessel-tanks-grid">
+          <div className="input-group">
+            <label>{t('vessel.freshwater_capacity_l')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={inputs.freshwaterCapacityL}
+              onChange={(e) => set({ freshwaterCapacityL: e.target.value })}
+              disabled={saving || readOnly}
+              placeholder="0"
+            />
+          </div>
+          <div className="input-group">
+            <label>{t('vessel.fuel_capacity_l')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={inputs.fuelCapacityL}
+              onChange={(e) => set({ fuelCapacityL: e.target.value })}
+              disabled={saving || readOnly}
+              placeholder="0"
+            />
+          </div>
+          <div className="input-group">
+            <label>{t('vessel.greywater_capacity_l')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={inputs.greywaterCapacityL}
+              onChange={(e) => set({ greywaterCapacityL: e.target.value })}
+              disabled={saving || readOnly}
+              placeholder="0"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="sails-section">
+        <h3>{t('vessel.sails_list')}</h3>
+        <p className="help-text">{t('vessel.sails_help')}</p>
+        <div className="sails-badges-grid">
+          {inputs.sails.length === 0 ? (
+            <span className="no-sails-msg">{t('vessel.no_sails')}</span>
+          ) : (
+            inputs.sails.map((sail, idx) => (
+              <span key={idx} className="sail-badge">
+                {sail}
+                {!readOnly && (
+                  <button
+                    type="button"
+                    className="remove-btn"
+                    onClick={() => onRemoveSail(idx)}
+                    disabled={saving}
+                  >
+                    <X size={14} />
+                  </button>
+                )}
+              </span>
+            ))
+          )}
+        </div>
+        {!readOnly && (
+          <div className="add-sail-form">
+            <input
+              type="text"
+              className="input-text"
+              placeholder={t('vessel.sail_name_placeholder')}
+              value={newSailName}
+              onChange={(e) => onNewSailNameChange(e.target.value)}
+              disabled={saving}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  onAddSail()
+                }
+              }}
+            />
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={onAddSail}
+              disabled={saving || !newSailName.trim()}
+              style={{ width: 'auto' }}
+            >
+              <Plus size={16} />
+              {t('vessel.add_sail')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
@@ -5,7 +5,9 @@ import { getActiveMasterKey } from '../services/auth.js'
 import { getLogbookKey } from '../services/logbookKeys.js'
 import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { Ship, Save, Check, Plus, X, Camera, Trash2 } from 'lucide-react'
+import { parseOptionalTankLiters, tankCapacityInputFromStored } from '../utils/tankCapacity.js'

 interface VesselFormProps {
  logbookId: string
@@ -13,9 +15,30 @@ interface VesselFormProps {
  preloadedData?: any
 }

+function metricInputFromStored(value: unknown): string {
+  if (value == null || value === '') return ''
+  if (typeof value === 'number' && Number.isFinite(value)) return String(value)
+  if (typeof value === 'string') return value.trim()
+  return ''
+}
+
+function parseOptionalMetricMeters(input: string): number | undefined {
+  const trimmed = input.trim().replace(',', '.')
+  if (!trimmed) return undefined
+  const parsed = Number(trimmed)
+  if (!Number.isFinite(parsed) || parsed < 0) {
+    throw new Error('invalid_metric')
+  }
+  return parsed
+}
+
 export default function VesselForm({ logbookId, readOnly = false, preloadedData }: VesselFormProps) {
  const { t } = useTranslation()
  const [name, setName] = useState('')
+  const [vesselType, setVesselType] = useState<'sailing' | 'motor' | ''>('')
+  const [lengthM, setLengthM] = useState('')
+  const [draftM, setDraftM] = useState('')
+  const [airDraftM, setAirDraftM] = useState('')
  const [homePort, setHomePort] = useState('')
  const [charterCompany, setCharterCompany] = useState('')
  const [owner, setOwner] = useState('')
@@ -25,6 +48,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
  const [mmsi, setMmsi] = useState('')
  const [sails, setSails] = useState<string[]>([])
  const [newSailName, setNewSailName] = useState('')
+  const [freshwaterCapacityL, setFreshwaterCapacityL] = useState('')
+  const [fuelCapacityL, setFuelCapacityL] = useState('')
+  const [greywaterCapacityL, setGreywaterCapacityL] = useState('')

  const fileInputRef = React.useRef<HTMLInputElement>(null)
  const [photo, setPhoto] = useState<string | null>(null)
@@ -43,6 +69,10 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
      try {
        if (readOnly && preloadedData) {
          setName(preloadedData.name || '')
+          setVesselType(preloadedData.vesselType || '')
+          setLengthM(metricInputFromStored(preloadedData.lengthM))
+          setDraftM(metricInputFromStored(preloadedData.draftM))
+          setAirDraftM(metricInputFromStored(preloadedData.airDraftM))
          setHomePort(preloadedData.homePort || '')
          setCharterCompany(preloadedData.charterCompany || '')
          setOwner(preloadedData.owner || '')
@@ -52,6 +82,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
          setMmsi(preloadedData.mmsi || '')
          setSails(preloadedData.sails || [])
          setPhoto(preloadedData.photo || null)
+          setFreshwaterCapacityL(tankCapacityInputFromStored(preloadedData.freshwaterCapacityL))
+          setFuelCapacityL(tankCapacityInputFromStored(preloadedData.fuelCapacityL))
+          setGreywaterCapacityL(tankCapacityInputFromStored(preloadedData.greywaterCapacityL))
          return
        }

@@ -64,6 +97,10 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
          const decrypted = await decryptJson(local.encryptedData, local.iv, local.tag, masterKey)
          if (decrypted) {
            setName(decrypted.name || '')
+            setVesselType(decrypted.vesselType || '')
+            setLengthM(metricInputFromStored(decrypted.lengthM))
+            setDraftM(metricInputFromStored(decrypted.draftM))
+            setAirDraftM(metricInputFromStored(decrypted.airDraftM))
            setHomePort(decrypted.homePort || '')
            setCharterCompany(decrypted.charterCompany || '')
            setOwner(decrypted.owner || '')
@@ -73,6 +110,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
            setMmsi(decrypted.mmsi || '')
            setSails(decrypted.sails || [])
            setPhoto(decrypted.photo || null)
+            setFreshwaterCapacityL(tankCapacityInputFromStored(decrypted.freshwaterCapacityL))
+            setFuelCapacityL(tankCapacityInputFromStored(decrypted.fuelCapacityL))
+            setGreywaterCapacityL(tankCapacityInputFromStored(decrypted.greywaterCapacityL))
          }
        }
      } catch (err: any) {
@@ -168,8 +208,35 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
      const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
      if (!masterKey) throw new Error('Encryption key not found. Please log in.')

+      let parsedLengthM: number | undefined
+      let parsedDraftM: number | undefined
+      let parsedAirDraftM: number | undefined
+      let parsedFreshwaterCapacityL: number | undefined
+      let parsedFuelCapacityL: number | undefined
+      let parsedGreywaterCapacityL: number | undefined
+      try {
+        parsedLengthM = parseOptionalMetricMeters(lengthM)
+        parsedDraftM = parseOptionalMetricMeters(draftM)
+        parsedAirDraftM = parseOptionalMetricMeters(airDraftM)
+        parsedFreshwaterCapacityL = parseOptionalTankLiters(freshwaterCapacityL)
+        parsedFuelCapacityL = parseOptionalTankLiters(fuelCapacityL)
+        parsedGreywaterCapacityL = parseOptionalTankLiters(greywaterCapacityL)
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : ''
+        setError(msg === 'invalid_tank_liters' ? t('vessel.invalid_tank_liters') : t('vessel.invalid_metric'))
+        setSaving(false)
+        return
+      }
+
      const yachtData = {
        name: name.trim(),
+        vesselType: vesselType || undefined,
+        lengthM: parsedLengthM,
+        draftM: parsedDraftM,
+        airDraftM: parsedAirDraftM,
+        freshwaterCapacityL: parsedFreshwaterCapacityL,
+        fuelCapacityL: parsedFuelCapacityL,
+        greywaterCapacityL: parsedGreywaterCapacityL,
        homePort: homePort.trim(),
        charterCompany: charterCompany.trim(),
        owner: owner.trim(),
@@ -205,6 +272,7 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
      })

      setSuccess(true)
+      trackPlausibleEvent(PlausibleEvents.VESSEL_SAVED)
      setTimeout(() => setSuccess(false), 3000)

      // Trigger background sync task
@@ -302,6 +370,59 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
            />
          </div>

+          <div className="input-group">
+            <label>{t('vessel.type')}</label>
+            <select
+              className="input-text"
+              value={vesselType}
+              onChange={(e) => setVesselType(e.target.value as 'sailing' | 'motor' | '')}
+              disabled={saving || readOnly}
+            >
+              <option value="">{t('vessel.type_unset')}</option>
+              <option value="sailing">{t('vessel.type_sailing')}</option>
+              <option value="motor">{t('vessel.type_motor')}</option>
+            </select>
+          </div>
+
+          <div className="input-group">
+            <label>{t('vessel.length_m')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={lengthM}
+              onChange={(e) => setLengthM(e.target.value)}
+              disabled={saving || readOnly}
+              placeholder="0.00"
+            />
+          </div>
+
+          <div className="input-group">
+            <label>{t('vessel.draft_m')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={draftM}
+              onChange={(e) => setDraftM(e.target.value)}
+              disabled={saving || readOnly}
+              placeholder="0.00"
+            />
+          </div>
+
+          <div className="input-group">
+            <label>{t('vessel.air_draft_m')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={airDraftM}
+              onChange={(e) => setAirDraftM(e.target.value)}
+              disabled={saving || readOnly}
+              placeholder="0.00"
+            />
+          </div>
+
          <div className="input-group">
            <label>{t('vessel.port')}</label>
            <input
@@ -379,6 +500,49 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
            />
          </div>

+          <div className="vessel-tanks-section">
+            <h3>{t('vessel.tanks_section')}</h3>
+            <p className="vessel-tanks-help">{t('vessel.tanks_help')}</p>
+            <div className="vessel-tanks-grid">
+              <div className="input-group">
+                <label>{t('vessel.freshwater_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={freshwaterCapacityL}
+                  onChange={(e) => setFreshwaterCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+              <div className="input-group">
+                <label>{t('vessel.fuel_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={fuelCapacityL}
+                  onChange={(e) => setFuelCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+              <div className="input-group">
+                <label>{t('vessel.greywater_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={greywaterCapacityL}
+                  onChange={(e) => setGreywaterCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+            </div>
+          </div>
+
          <div className="sails-section">
            <h3>{t('vessel.sails_list')}</h3>
            <p className="help-text">{t('vessel.sails_help')}</p>
@@ -0,0 +1,244 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Ship, Plus, Trash2, Edit2, X, Save } from 'lucide-react'
+import { useDialog } from './ModalDialog.tsx'
+import VesselDataFields from './VesselDataFields.tsx'
+import type { VesselFormInputs } from '../utils/vesselFormUtils.js'
+import { parseVesselFormInputs, vesselDataToFormInputs } from '../utils/vesselFormUtils.js'
+import { emptyVesselData } from '../types/vessel.js'
+import { loadVesselPool, saveVessel, deleteVessel, type DecryptedVessel } from '../services/vesselPool.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+export default function VesselPoolForm() {
+  const { t } = useTranslation()
+  const { showConfirm } = useDialog()
+  const [vessels, setVessels] = useState<DecryptedVessel[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showForm, setShowForm] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [inputs, setInputs] = useState<VesselFormInputs>(vesselDataToFormInputs(emptyVesselData()))
+  const [newSailName, setNewSailName] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [photoError, setPhotoError] = useState<string | null>(null)
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      setVessels(await loadVesselPool())
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void reload()
+  }, [reload])
+
+  const openAdd = () => {
+    setEditingId(null)
+    setInputs(vesselDataToFormInputs(emptyVesselData()))
+    setNewSailName('')
+    setPhotoError(null)
+    setShowForm(true)
+  }
+
+  const openEdit = (vessel: DecryptedVessel) => {
+    setEditingId(vessel.payloadId)
+    setInputs(vesselDataToFormInputs(vessel.data))
+    setNewSailName('')
+    setPhotoError(null)
+    setShowForm(true)
+  }
+
+  const handleAddSail = () => {
+    const trimmed = newSailName.trim()
+    if (trimmed && !inputs.sails.includes(trimmed)) {
+      setInputs((prev) => ({ ...prev, sails: [...prev.sails, trimmed] }))
+    }
+    setNewSailName('')
+  }
+
+  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setPhotoError(null)
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const img = new Image()
+      img.onload = () => {
+        try {
+          const canvas = document.createElement('canvas')
+          const ctx = canvas.getContext('2d')
+          if (!ctx) throw new Error('Could not get canvas context')
+          let width = img.width
+          let height = img.height
+          const MAX_WIDTH = 800
+          const MAX_HEIGHT = 600
+          if (width > MAX_WIDTH || height > MAX_HEIGHT) {
+            const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height)
+            width = Math.round(width * ratio)
+            height = Math.round(height * ratio)
+          }
+          canvas.width = width
+          canvas.height = height
+          ctx.drawImage(img, 0, 0, width, height)
+          setInputs((prev) => ({ ...prev, photo: canvas.toDataURL('image/jpeg', 0.7) }))
+        } catch (err: unknown) {
+          setPhotoError(err instanceof Error ? err.message : 'Failed to process image')
+        }
+      }
+      img.onerror = () => setPhotoError('Invalid image file')
+      img.src = event.target?.result as string
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!inputs.name.trim()) return
+    setSaving(true)
+    setError(null)
+    try {
+      const data = parseVesselFormInputs(inputs)
+      const id = editingId ?? window.crypto.randomUUID()
+      await saveVessel(id, data, !editingId)
+      setShowForm(false)
+      trackPlausibleEvent(PlausibleEvents.VESSEL_SAVED, { context: 'vessel_pool' })
+      await reload()
+    } catch (err: unknown) {
+      if (err instanceof Error && err.message === 'MAX_VESSELS') {
+        setError(t('vessel_pool.max_vessels'))
+      } else if (err instanceof Error && err.message === 'invalid_metric') {
+        setError(t('vessel.invalid_metric'))
+      } else if (err instanceof Error && err.message === 'invalid_tank_liters') {
+        setError(t('vessel.invalid_tank_liters'))
+      } else {
+        setError(err instanceof Error ? err.message : 'Failed to save')
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    if (
+      !(await showConfirm(
+        t('vessel_pool.delete_confirm'),
+        t('vessel_pool.title'),
+        t('logs.confirm_yes'),
+        t('logs.confirm_no')
+      ))
+    ) {
+      return
+    }
+    try {
+      await deleteVessel(id)
+      await reload()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to delete')
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="tab-placeholder">
+        <Ship className="header-logo spin" size={48} />
+        <p>{t('vessel_pool.loading')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div data-tour="profile-vessel-pool">
+      <div className="section-title-bar mb-4">
+        <h3>{t('vessel_pool.section_title')}</h3>
+        {!showForm && (
+          <button type="button" className="btn primary" style={{ width: 'auto', padding: '8px 16px' }} onClick={openAdd}>
+            <Plus size={16} />
+            {t('vessel_pool.add_vessel')}
+          </button>
+        )}
+      </div>
+      <p className="help-text mb-4">{t('vessel_pool.subtitle')}</p>
+      {error && <div className="auth-error mb-4">{error}</div>}
+
+      {vessels.length === 0 ? (
+        <p className="help-text mb-4">{t('vessel_pool.no_vessels')}</p>
+      ) : (
+        <div className="crew-grid mb-6">
+          {vessels.map((v) => (
+            <div key={v.payloadId} className="crew-member-card glass">
+              <div className="crew-card-header">
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                  {v.data.photo ? (
+                    <img src={v.data.photo} alt="" className="crew-card-avatar" />
+                  ) : (
+                    <div className="crew-card-avatar-placeholder">
+                      <Ship size={18} />
+                    </div>
+                  )}
+                  <div>
+                    <h4>{v.data.name}</h4>
+                    {v.data.homePort && <p className="help-text">{v.data.homePort}</p>}
+                  </div>
+                </div>
+                <div className="card-actions">
+                  <button type="button" className="btn-icon" onClick={() => openEdit(v)}>
+                    <Edit2 size={14} />
+                  </button>
+                  <button
+                    type="button"
+                    className="btn-icon danger"
+                    onClick={() => void handleDelete(v.payloadId)}
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showForm && (
+        <form onSubmit={(e) => void handleSave(e)} className="member-editor-card glass">
+          <div className="editor-header mb-4">
+            <h3>{editingId ? t('vessel_pool.edit_vessel') : t('vessel_pool.add_vessel')}</h3>
+            <button type="button" className="btn-icon" onClick={() => setShowForm(false)}>
+              <X size={16} />
+            </button>
+          </div>
+          <VesselDataFields
+            inputs={inputs}
+            onChange={setInputs}
+            saving={saving}
+            newSailName={newSailName}
+            onNewSailNameChange={setNewSailName}
+            onAddSail={handleAddSail}
+            onRemoveSail={(idx) =>
+              setInputs((prev) => ({ ...prev, sails: prev.sails.filter((_, i) => i !== idx) }))
+            }
+            photoError={photoError}
+            onPhotoChange={handlePhotoChange}
+            onRemovePhoto={() => {
+              setInputs((prev) => ({ ...prev, photo: null }))
+              if (fileRef.current) fileRef.current.value = ''
+            }}
+            fileInputRef={fileRef}
+          />
+          <div className="form-actions mt-4">
+            <button type="submit" className="btn primary" disabled={saving || !inputs.name.trim()}>
+              <Save size={18} />
+              {saving ? t('vessel.saving') : t('vessel.save')}
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,114 @@
+import { useEffect, useState, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { db } from '../services/db.js'
+import { getActiveMasterKey } from '../services/auth.js'
+import { getLogbookKey } from '../services/logbookKeys.js'
+import { decryptJson } from '../services/crypto.js'
+
+export interface PreloadedVoiceMemo {
+  payloadId: string
+  audio: string
+  mimeType?: string
+  durationSec?: number
+  caption?: string
+  transcribed?: boolean
+}
+
+interface VoiceMemoPlayerProps {
+  audioId: string
+  logbookId: string
+  preloaded?: PreloadedVoiceMemo | null
+  compact?: boolean
+}
+
+export default function VoiceMemoPlayer({
+  audioId,
+  logbookId,
+  preloaded,
+  compact = false
+}: VoiceMemoPlayerProps) {
+  const { t } = useTranslation()
+  const [src, setSrc] = useState<string | null>(preloaded?.audio ?? null)
+  const [error, setError] = useState(false)
+
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+
+  useEffect(() => {
+    const el = audioRef.current
+    if (!el) return
+
+    const handleLoadedMetadata = () => {
+      if (el.duration === Infinity || isNaN(el.duration) || el.duration === 0) {
+        el.currentTime = 1e10
+        const onTimeUpdate = () => {
+          el.currentTime = 0
+          el.removeEventListener('timeupdate', onTimeUpdate)
+        }
+        el.addEventListener('timeupdate', onTimeUpdate)
+      }
+    }
+
+    if (el.readyState >= 1) {
+      handleLoadedMetadata()
+    } else {
+      el.addEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+
+    if (src) {
+      el.load()
+    }
+
+    return () => {
+      el.removeEventListener('loadedmetadata', handleLoadedMetadata)
+    }
+  }, [src])
+
+  useEffect(() => {
+    if (preloaded?.audio) {
+      setSrc(preloaded.audio)
+      setError(false)
+      return
+    }
+
+    let cancelled = false
+    void (async () => {
+      try {
+        const record = await db.voiceMemos.get(audioId)
+        if (!record || cancelled) return
+        const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
+        if (!masterKey || cancelled) return
+        const decrypted = await decryptJson(record.encryptedData, record.iv, record.tag, masterKey)
+        if (!decrypted?.audio || cancelled) {
+          setError(true)
+          return
+        }
+        setSrc(String(decrypted.audio))
+        setError(false)
+      } catch {
+        if (!cancelled) setError(true)
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [audioId, logbookId, preloaded?.audio])
+
+  if (error || !src) {
+    return (
+      <span className="voice-memo-player-unavailable">
+        {t('logs.live_voice_unavailable')}
+      </span>
+    )
+  }
+
+  const playerClass = compact
+    ? 'voice-memo-player voice-memo-player--compact'
+    : 'voice-memo-player'
+
+  return (
+    <div className="voice-memo-player-shell">
+      <audio ref={audioRef} className={playerClass} controls preload="metadata" src={src} />
+    </div>
+  )
+}
@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+interface CaptainCapProps extends SVGProps<SVGSVGElement> {
+  size?: number | string
+}
+
+/** Skipper-/Kapitänsmütze im Lucide-Strichstil (nicht in lucide-react enthalten). */
+export default function CaptainCap({ size = 24, ...props }: CaptainCapProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...props}
+    >
+      <path d="M5 11c0-3.5 3-6 7-6s7 2.5 7 6" />
+      <path d="M4 11h16" />
+      <path d="M4 11c0 2.5 3.2 4.5 8 4.5S20 13.5 20 11" />
+      <path d="M8 11h8" />
+    </svg>
+  )
+}
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import {
+  DEMO_EXCLUDED_STEPS,
+  DEMO_STEP_ORDER,
+  FULL_STEP_ORDER,
+  getTourScrollRetryDelays,
+  getTourTargetRetryDelay,
+  tourStepOpensEntry
+} from './AppTourContext.tsx'
+
+describe('AppTourContext step order', () => {
+  it('includes profile steps before finish in full tour', () => {
+    const profileIndex = FULL_STEP_ORDER.indexOf('nav_profile')
+    const prefsIndex = FULL_STEP_ORDER.indexOf('profile_preferences')
+    const finishIndex = FULL_STEP_ORDER.indexOf('finish')
+
+    expect(profileIndex).toBeGreaterThan(FULL_STEP_ORDER.indexOf('nav_feedback'))
+    expect(prefsIndex).toBe(profileIndex + 1)
+    expect(finishIndex).toBe(prefsIndex + 1)
+    expect(FULL_STEP_ORDER).toContain('profile_vessel_pool')
+    expect(FULL_STEP_ORDER).toContain('profile_crew_pool')
+    expect(FULL_STEP_ORDER).toContain('nav_logbook_crew')
+    expect(FULL_STEP_ORDER.indexOf('profile_vessel_pool')).toBeLessThan(
+      FULL_STEP_ORDER.indexOf('profile_crew_pool')
+    )
+    expect(FULL_STEP_ORDER).toHaveLength(14)
+  })
+
+  it('excludes profile, stats and feedback from demo tour', () => {
+    for (const step of DEMO_EXCLUDED_STEPS) {
+      expect(DEMO_STEP_ORDER).not.toContain(step)
+    }
+    expect(DEMO_STEP_ORDER).toContain('finish')
+    expect(DEMO_STEP_ORDER).toHaveLength(FULL_STEP_ORDER.length - DEMO_EXCLUDED_STEPS.length)
+  })
+
+  it('only opens entry editor on entry_track step', () => {
+    expect(tourStepOpensEntry('entry_open')).toBe(false)
+    expect(tourStepOpensEntry('entry_list')).toBe(false)
+    expect(tourStepOpensEntry('entry_track')).toBe(true)
+  })
+
+  it('retries scroll for entry_track while editor mounts', () => {
+    expect(getTourTargetRetryDelay('entry_track')).toBeGreaterThanOrEqual(400)
+    expect(getTourScrollRetryDelays('entry_track').length).toBeGreaterThan(1)
+  })
+})
@@ -0,0 +1,448 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode
+} from 'react'
+import {
+  clearTourCompleted,
+  isTourCompleted,
+  markTourCompleted,
+  resolveTourUserId
+} from '../services/appTourStorage.js'
+import { getStoredDemoFirstEntryId } from '../services/demoLogbook.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+export type AppTab = 'vessel' | 'crew' | 'logs' | 'stats' | 'settings'
+
+export type TourStepId =
+  | 'welcome'
+  | 'nav_logs'
+  | 'entry_list'
+  | 'entry_open'
+  | 'entry_track'
+  | 'nav_vessel'
+  | 'profile_vessel_pool'
+  | 'profile_crew_pool'
+  | 'nav_logbook_crew'
+  | 'nav_stats'
+  | 'nav_feedback'
+  | 'nav_profile'
+  | 'profile_preferences'
+  | 'finish'
+
+interface TourNavigation {
+  setActiveTab: (tab: AppTab) => void
+  setSelectedEntryId: (entryId: string | null) => void
+  setFeedbackOpen: (open: boolean) => void
+  setLogbookActive: (active: boolean) => void
+  setProfileOpen: (open: boolean) => void
+  ensureLogbookForTour?: () => Promise<void>
+}
+
+interface DemoTourContext {
+  firstEntryId: string
+}
+
+interface AppTourContextValue {
+  isActive: boolean
+  isDemoTour: boolean
+  currentStepId: TourStepId | null
+  currentStepIndex: number
+  totalSteps: number
+  layoutTick: number
+  startTour: (options?: { force?: boolean; demoMode?: boolean }) => void
+  stopTour: () => void
+  restartTour: () => void
+  nextStep: () => void
+  prevStep: () => void
+  skipTour: () => void
+  registerNavigation: (navigation: TourNavigation) => void
+  registerDemoTourContext: (context: DemoTourContext | null) => void
+  requestStartAfterLogin: () => void
+}
+
+export const FULL_STEP_ORDER: TourStepId[] = [
+  'welcome',
+  'nav_logs',
+  'entry_list',
+  'entry_open',
+  'entry_track',
+  'nav_vessel',
+  'profile_vessel_pool',
+  'profile_crew_pool',
+  'nav_logbook_crew',
+  'nav_stats',
+  'nav_feedback',
+  'nav_profile',
+  'profile_preferences',
+  'finish'
+]
+
+/** Public demo has no stats/feedback/profile UI — skip those steps. */
+export const DEMO_EXCLUDED_STEPS: TourStepId[] = [
+  'profile_crew_pool',
+  'nav_stats',
+  'nav_feedback',
+  'nav_profile',
+  'profile_preferences'
+]
+
+export const DEMO_STEP_ORDER: TourStepId[] = FULL_STEP_ORDER.filter(
+  (id) => !DEMO_EXCLUDED_STEPS.includes(id)
+)
+
+const LOGBOOK_TOUR_STEPS = new Set<TourStepId>([
+  'nav_logs',
+  'entry_list',
+  'entry_open',
+  'entry_track',
+  'nav_vessel',
+  'nav_logbook_crew',
+  'nav_stats',
+  'nav_feedback'
+])
+
+function getStepOrder(demoMode: boolean): TourStepId[] {
+  return demoMode ? DEMO_STEP_ORDER : FULL_STEP_ORDER
+}
+
+const TARGET_BY_STEP: Partial<Record<TourStepId, string>> = {
+  nav_logs: '[data-tour="nav-logs"]',
+  entry_list: '[data-tour="entry-list"]',
+  entry_open: '[data-tour="entry-first"]',
+  entry_track: '[data-tour="entry-track"]',
+  nav_vessel: '[data-tour="nav-vessel"]',
+  profile_vessel_pool: '[data-tour="profile-vessel-pool"]',
+  profile_crew_pool: '[data-tour="profile-crew-pool"]',
+  nav_logbook_crew: '[data-tour="nav-logbook-crew"]',
+  nav_stats: '[data-tour="stats-dashboard"]',
+  nav_feedback: '[data-tour="feedback-form"]',
+  nav_profile: '[data-tour="nav-profile"]',
+  profile_preferences: '[data-tour="profile-preferences"]'
+}
+
+/** Whether a tour step opens the first log entry editor (not the list card). */
+export function tourStepOpensEntry(stepId: TourStepId): boolean {
+  return stepId === 'entry_track'
+}
+
+export function getTourTargetDelay(stepId: TourStepId): number {
+  if (stepId === 'entry_track') return 400
+  if (stepId === 'nav_feedback') return 180
+  if (
+    stepId === 'nav_profile' ||
+    stepId === 'profile_preferences' ||
+    stepId === 'profile_vessel_pool' ||
+    stepId === 'profile_crew_pool'
+  ) {
+    return 250
+  }
+  return 0
+}
+
+/** Extra scroll attempts while async UI (e.g. entry editor) mounts. */
+export function getTourScrollRetryDelays(stepId: TourStepId): number[] {
+  if (stepId === 'entry_track') return [400, 700, 1100, 1600]
+  const initial = getTourTargetDelay(stepId)
+  return initial > 0 ? [initial] : [0]
+}
+
+const AppTourContext = createContext<AppTourContextValue | null>(null)
+
+export function AppTourProvider({ children }: { children: ReactNode }) {
+  const [isActive, setIsActive] = useState(false)
+  const [stepIndex, setStepIndex] = useState(0)
+  const [pendingAfterLogin, setPendingAfterLogin] = useState(false)
+  const [isDemoTour, setIsDemoTour] = useState(false)
+  const [layoutTick, setLayoutTick] = useState(0)
+  const navigationRef = useRef<TourNavigation | null>(null)
+  const demoContextRef = useRef<DemoTourContext | null>(null)
+  const tourModeRef = useRef<{ demoMode: boolean }>({ demoMode: false })
+
+  const stepOrder = getStepOrder(isDemoTour)
+  const currentStepId = isActive ? stepOrder[stepIndex] ?? null : null
+
+  const resolveFirstEntryId = useCallback((): string | null => {
+    return demoContextRef.current?.firstEntryId ?? getStoredDemoFirstEntryId()
+  }, [])
+
+  const applyStepSideEffects = useCallback((stepId: TourStepId) => {
+    const nav = navigationRef.current
+    if (!nav) return
+
+    if (LOGBOOK_TOUR_STEPS.has(stepId)) {
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(true)
+    }
+
+    if (stepId === 'nav_logs' || stepId === 'entry_list' || stepId === 'entry_open' || stepId === 'entry_track') {
+      nav.setActiveTab('logs')
+    }
+
+    if (stepId === 'entry_list' || stepId === 'entry_open') {
+      nav.setSelectedEntryId(null)
+    } else if (tourStepOpensEntry(stepId)) {
+      const firstEntryId = resolveFirstEntryId()
+      if (firstEntryId) nav.setSelectedEntryId(firstEntryId)
+    } else if (LOGBOOK_TOUR_STEPS.has(stepId)) {
+      nav.setSelectedEntryId(null)
+    }
+
+    if (stepId === 'nav_vessel') {
+      nav.setSelectedEntryId(null)
+      nav.setActiveTab('vessel')
+    }
+    if (stepId === 'profile_vessel_pool' || stepId === 'profile_crew_pool') {
+      nav.setSelectedEntryId(null)
+      nav.setLogbookActive(false)
+      nav.setProfileOpen(true)
+    }
+    if (stepId === 'nav_logbook_crew') {
+      nav.setSelectedEntryId(null)
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(true)
+      nav.setActiveTab('crew')
+    }
+    if (stepId === 'nav_stats') {
+      nav.setSelectedEntryId(null)
+      nav.setActiveTab('stats')
+    }
+    if (stepId === 'nav_feedback') {
+      nav.setSelectedEntryId(null)
+      nav.setFeedbackOpen(true)
+    } else {
+      nav.setFeedbackOpen(false)
+    }
+
+    if (stepId === 'nav_profile') {
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(false)
+    }
+    if (stepId === 'profile_preferences') {
+      nav.setLogbookActive(false)
+      nav.setProfileOpen(true)
+    }
+  }, [resolveFirstEntryId])
+
+  const scrollToCurrentTarget = useCallback((stepId: TourStepId | null) => {
+    if (!stepId) return
+    const selector = TARGET_BY_STEP[stepId]
+    if (!selector) return
+
+    for (const delayMs of getTourScrollRetryDelays(stepId)) {
+      window.setTimeout(() => {
+        window.requestAnimationFrame(() => {
+          const el = document.querySelector(selector)
+          el?.scrollIntoView({
+            behavior: stepId === 'entry_track' ? 'instant' : 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          })
+        })
+      }, delayMs)
+    }
+  }, [])
+
+  const startTour = useCallback((options?: { force?: boolean; demoMode?: boolean }) => {
+    const demoMode = options?.demoMode === true
+    const userId = resolveTourUserId({ demoMode })
+    if (!userId) return
+    if (!options?.force && isTourCompleted(userId)) return
+
+    tourModeRef.current = { demoMode }
+    setIsDemoTour(demoMode)
+    setStepIndex(0)
+    setIsActive(true)
+  }, [])
+
+  const dismissTour = useCallback((outcome: 'completed' | 'skipped', stepIndexAtDismiss: number) => {
+    const userId = resolveTourUserId({ demoMode: tourModeRef.current.demoMode })
+    if (userId) markTourCompleted(userId)
+
+    const tourProps = tourModeRef.current.demoMode ? { mode: 'demo' } : undefined
+    if (outcome === 'completed') {
+      trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_COMPLETED, tourProps)
+      const nav = navigationRef.current
+      if (nav && !tourModeRef.current.demoMode) {
+        nav.setProfileOpen(false)
+        nav.setLogbookActive(true)
+        nav.setSelectedEntryId(null)
+        nav.setActiveTab('stats')
+      }
+    } else {
+      const step = getStepOrder(tourModeRef.current.demoMode)[stepIndexAtDismiss] ?? 'welcome'
+      trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_SKIPPED, { step, ...tourProps })
+    }
+
+    tourModeRef.current = { demoMode: false }
+    navigationRef.current?.setFeedbackOpen(false)
+    navigationRef.current?.setProfileOpen(false)
+    setIsDemoTour(false)
+    setIsActive(false)
+    setStepIndex(0)
+  }, [])
+
+  const stopTour = useCallback(() => {
+    dismissTour('skipped', stepIndex)
+  }, [dismissTour, stepIndex])
+
+  const skipTour = useCallback(() => {
+    dismissTour('skipped', stepIndex)
+  }, [dismissTour, stepIndex])
+
+  const nextStep = useCallback(() => {
+    const order = getStepOrder(isDemoTour)
+    if (stepIndex + 1 >= order.length) {
+      dismissTour('completed', stepIndex)
+      return
+    }
+    setStepIndex(stepIndex + 1)
+  }, [dismissTour, isDemoTour, stepIndex])
+
+  const prevStep = useCallback(() => {
+    setStepIndex((current) => Math.max(0, current - 1))
+  }, [])
+
+  useEffect(() => {
+    if (!isActive) return
+    const stepId = getStepOrder(isDemoTour)[stepIndex]
+    if (!stepId) return
+
+    let cancelled = false
+    const run = async () => {
+      if (LOGBOOK_TOUR_STEPS.has(stepId) && !isDemoTour) {
+        await navigationRef.current?.ensureLogbookForTour?.()
+      }
+      if (cancelled) return
+      applyStepSideEffects(stepId)
+      scrollToCurrentTarget(stepId)
+      setLayoutTick((tick) => tick + 1)
+      window.setTimeout(() => {
+        if (!cancelled) setLayoutTick((tick) => tick + 1)
+      }, 150)
+    }
+    void run()
+
+    return () => {
+      cancelled = true
+    }
+  }, [isActive, isDemoTour, stepIndex, applyStepSideEffects, scrollToCurrentTarget])
+
+  const restartTour = useCallback(() => {
+    const userId = localStorage.getItem('active_userid')
+    if (!userId) return
+    clearTourCompleted(userId)
+    startTour({ force: true })
+  }, [startTour])
+
+  const registerNavigation = useCallback((navigation: TourNavigation) => {
+    navigationRef.current = navigation
+  }, [])
+
+  const registerDemoTourContext = useCallback((context: DemoTourContext | null) => {
+    demoContextRef.current = context
+  }, [])
+
+  const requestStartAfterLogin = useCallback(() => {
+    setPendingAfterLogin(true)
+  }, [])
+
+  useEffect(() => {
+    if (!pendingAfterLogin) return
+    const userId = localStorage.getItem('active_userid')
+    if (!userId || isTourCompleted(userId)) {
+      setPendingAfterLogin(false)
+      return
+    }
+    const timer = window.setTimeout(() => {
+      startTour({ force: true })
+      setPendingAfterLogin(false)
+    }, 400)
+    return () => window.clearTimeout(timer)
+  }, [pendingAfterLogin, startTour])
+
+  const value = useMemo<AppTourContextValue>(
+    () => ({
+      isActive,
+      isDemoTour,
+      currentStepId,
+      currentStepIndex: stepIndex,
+      totalSteps: stepOrder.length,
+      layoutTick,
+      startTour,
+      stopTour,
+      restartTour,
+      nextStep,
+      prevStep,
+      skipTour,
+      registerNavigation,
+      registerDemoTourContext,
+      requestStartAfterLogin
+    }),
+    [
+      currentStepId,
+      isActive,
+      isDemoTour,
+      nextStep,
+      prevStep,
+      registerDemoTourContext,
+      registerNavigation,
+      requestStartAfterLogin,
+      restartTour,
+      skipTour,
+      startTour,
+      stepIndex,
+      stepOrder.length,
+      layoutTick,
+      stopTour
+    ]
+  )
+
+  return <AppTourContext.Provider value={value}>{children}</AppTourContext.Provider>
+}
+
+export function useAppTour(): AppTourContextValue {
+  const ctx = useContext(AppTourContext)
+  if (!ctx) {
+    throw new Error('useAppTour must be used within AppTourProvider')
+  }
+  return ctx
+}
+
+export function getTourStepCopy(
+  stepId: TourStepId,
+  t: (key: string) => string,
+  options?: { demoMode?: boolean }
+): { title: string; body: string } {
+  if (stepId === 'welcome' && options?.demoMode) {
+    return {
+      title: t('tour.steps.welcome_public.title'),
+      body: t('tour.steps.welcome_public.body')
+    }
+  }
+  return {
+    title: t(`tour.steps.${stepId}.title`),
+    body: t(`tour.steps.${stepId}.body`)
+  }
+}
+
+export function getTourTargetSelector(stepId: TourStepId | null): string | null {
+  if (!stepId) return null
+  return TARGET_BY_STEP[stepId] ?? null
+}
+
+export function isCenteredTourStep(stepId: TourStepId | null): boolean {
+  return stepId === 'welcome' || stepId === 'finish'
+}
+
+export function getTourTargetRetryDelay(stepId: TourStepId | null): number {
+  if (stepId === 'entry_track') return 400
+  if (stepId === 'profile_preferences') return 300
+  if (stepId === 'nav_profile') return 200
+  return 120
+}
@@ -0,0 +1,122 @@
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useMemo,
+  type ReactNode
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDialog } from '../components/ModalDialog.tsx'
+
+interface UnsavedChangesContextValue {
+  setDirty: (source: string, dirty: boolean) => void
+  registerSaveHandler: (source: string, handler: (() => Promise<void>) | null) => void
+  confirmLeave: () => Promise<boolean>
+}
+
+const UnsavedChangesContext = createContext<UnsavedChangesContextValue | null>(null)
+
+export function UnsavedChangesProvider({ children }: { children: ReactNode }) {
+  const { t } = useTranslation()
+  const { showConfirmLeave, showAlert } = useDialog()
+  const dirtySources = useRef(new Set<string>())
+  const saveHandlers = useRef(new Map<string, () => Promise<void>>())
+
+  const setDirty = useCallback((source: string, dirty: boolean) => {
+    if (dirty) dirtySources.current.add(source)
+    else dirtySources.current.delete(source)
+  }, [])
+
+  const registerSaveHandler = useCallback((source: string, handler: (() => Promise<void>) | null) => {
+    if (handler) saveHandlers.current.set(source, handler)
+    else saveHandlers.current.delete(source)
+  }, [])
+
+  const confirmLeave = useCallback(async (): Promise<boolean> => {
+    if (dirtySources.current.size === 0) return true
+
+    const canSave = [...dirtySources.current].some((source) => saveHandlers.current.has(source))
+    const choice = await showConfirmLeave(
+      t('common.unsaved_changes_message'),
+      t('common.unsaved_changes_title'),
+      t('common.unsaved_changes_stay'),
+      t('common.unsaved_changes_save_leave'),
+      t('common.unsaved_changes_discard'),
+      { showSave: canSave }
+    )
+
+    if (choice === 'stay') return false
+    if (choice === 'discard') return true
+
+    const handlers = [...dirtySources.current]
+      .map((source) => saveHandlers.current.get(source))
+      .filter((handler): handler is () => Promise<void> => handler != null)
+
+    try {
+      for (const handler of handlers) {
+        await handler()
+      }
+      return true
+    } catch (err) {
+      console.error('Failed to save before leaving:', err)
+      await showAlert(t('errors.save_failed'))
+      return false
+    }
+  }, [showConfirmLeave, showAlert, t])
+
+  useEffect(() => {
+    const handler = (e: BeforeUnloadEvent) => {
+      if (dirtySources.current.size === 0) return
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', handler)
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [])
+
+  const value = useMemo(
+    () => ({ setDirty, registerSaveHandler, confirmLeave }),
+    [setDirty, registerSaveHandler, confirmLeave]
+  )
+
+  return (
+    <UnsavedChangesContext.Provider value={value}>
+      {children}
+    </UnsavedChangesContext.Provider>
+  )
+}
+
+export function useUnsavedChangesContext(): UnsavedChangesContextValue {
+  const ctx = useContext(UnsavedChangesContext)
+  if (!ctx) {
+    throw new Error('useUnsavedChangesContext must be used within UnsavedChangesProvider')
+  }
+  return ctx
+}
+
+/** Register a form/view as having unsaved changes (cleared automatically on unmount). */
+export function useRegisterUnsavedChanges(
+  source: string,
+  isDirty: boolean,
+  onSave?: () => Promise<void>
+) {
+  const { setDirty, registerSaveHandler, confirmLeave } = useUnsavedChangesContext()
+
+  useEffect(() => {
+    setDirty(source, isDirty)
+    return () => setDirty(source, false)
+  }, [source, isDirty, setDirty])
+
+  useEffect(() => {
+    if (!onSave) {
+      registerSaveHandler(source, null)
+      return
+    }
+    registerSaveHandler(source, onSave)
+    return () => registerSaveHandler(source, null)
+  }, [source, onSave, registerSaveHandler])
+
+  return { confirmLeave }
+}
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { db } from '../services/db.js'
+import { getActiveMasterKey } from '../services/auth.js'
+import { getLogbookKey } from '../services/logbookKeys.js'
+import { decryptJson } from '../services/crypto.js'
+import type { PreloadedVoiceMemo } from '../components/VoiceMemoPlayer.tsx'
+
+export function useEntryVoiceMemos(
+  logbookId: string,
+  entryId: string | null,
+  preloaded?: PreloadedVoiceMemo[]
+): Map<string, PreloadedVoiceMemo> {
+  const localMemos = useLiveQuery(
+    () => (entryId ? db.voiceMemos.where({ entryId }).toArray() : []),
+    [entryId]
+  )
+
+  const [lookup, setLookup] = useState<Map<string, PreloadedVoiceMemo>>(new Map())
+
+  useEffect(() => {
+    if (preloaded && preloaded.length > 0) {
+      const map = new Map<string, PreloadedVoiceMemo>()
+      for (const m of preloaded) {
+        map.set(m.payloadId, m)
+      }
+      setLookup(map)
+      return
+    }
+
+    if (!entryId || !localMemos) {
+      setLookup(new Map())
+      return
+    }
+
+    let cancelled = false
+    void (async () => {
+      const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
+      if (!masterKey || cancelled) return
+
+      const map = new Map<string, PreloadedVoiceMemo>()
+      for (const row of localMemos) {
+        try {
+          const decrypted = await decryptJson(row.encryptedData, row.iv, row.tag, masterKey)
+          if (!decrypted?.audio) continue
+          map.set(row.payloadId, {
+            payloadId: row.payloadId,
+            audio: String(decrypted.audio),
+            mimeType: decrypted.mimeType ? String(decrypted.mimeType) : undefined,
+            durationSec: typeof decrypted.durationSec === 'number' ? decrypted.durationSec : undefined,
+            caption: decrypted.caption ? String(decrypted.caption) : '',
+            transcribed: decrypted.transcribed !== false
+          })
+        } catch {
+          // skip corrupt memo
+        }
+      }
+      if (!cancelled) setLookup(map)
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [localMemos, entryId, logbookId, preloaded])
+
+  return lookup
+}
@@ -0,0 +1,67 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { patchEntryEvents } from '../services/quickEventLog.js'
+import { deleteEntryVoiceMemo } from '../services/voiceAttachments.js'
+import { parseLiveVoiceRemark } from '../utils/liveEventCodes.js'
+import { normalizeLogEvent, type LogEventPayload } from '../utils/logEntryPayload.js'
+import { useDialog } from '../components/ModalDialog.tsx'
+
+interface UseEventEditorOptions {
+  logbookId: string
+  entryId: string | null
+  events: LogEventPayload[]
+  onEventsChange: (events: LogEventPayload[]) => void
+  hasSkipperSignature?: boolean
+}
+
+export function useEventEditor({
+  logbookId,
+  entryId,
+  events,
+  onEventsChange,
+  hasSkipperSignature = false
+}: UseEventEditorOptions) {
+  const { t } = useTranslation()
+  const { showAlert, showConfirm } = useDialog()
+
+  const persistEvents = useCallback(async (nextEvents: LogEventPayload[]) => {
+    if (!entryId) throw new Error('No entry selected')
+    const { hadSignature } = await patchEntryEvents(logbookId, entryId, nextEvents)
+    onEventsChange(nextEvents)
+    if (hadSignature || hasSkipperSignature) {
+      void showAlert(
+        t('logs.sign_cleared_skipper_re_sign'),
+        t('logs.sign_cleared_skipper_re_sign_title')
+      )
+    }
+  }, [entryId, hasSkipperSignature, logbookId, onEventsChange, showAlert, t])
+
+  const updateEvent = useCallback(async (index: number, patch: Partial<LogEventPayload>) => {
+    if (!entryId) return
+    const current = events[index]
+    if (!current) return
+    const updated = normalizeLogEvent({ ...current, ...patch })
+    const nextEvents = events.map((ev, idx) => (idx === index ? updated : ev))
+    await persistEvents(nextEvents)
+  }, [entryId, events, persistEvents])
+
+  const deleteEvent = useCallback(async (index: number) => {
+    if (!entryId) return
+    const confirmed = await showConfirm(
+      t('logs.delete_event_confirm'),
+      t('logs.delete_event'),
+      t('logs.confirm_yes'),
+      t('logs.confirm_no')
+    )
+    if (!confirmed) return
+
+    const voiceId = parseLiveVoiceRemark(events[index]?.remarks?.trim() ?? '')
+    const nextEvents = events.filter((_, idx) => idx !== index)
+    if (voiceId) {
+      await deleteEntryVoiceMemo(logbookId, voiceId)
+    }
+    await persistEvents(nextEvents)
+  }, [entryId, events, logbookId, persistEvents, showConfirm, t])
+
+  return { updateEvent, deleteEvent }
+}
@@ -0,0 +1,212 @@
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { db } from '../services/db.js'
+import { getActiveMasterKey, hasUnlockedLocalCrypto } from '../services/auth.js'
+import { getLogbookKey } from '../services/logbookKeys.js'
+import { decryptJson } from '../services/crypto.js'
+import { downloadCsv, shareCsv } from '../services/csvExport.js'
+import { downloadLogbookPagePdf } from '../services/pdfExport.js'
+import { buildZipArchive } from '../services/logbookBackup/zipArchive.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { getErrorMessage } from '../utils/errors.js'
+
+export interface LogExportEntryItem {
+  id: string
+  date: string
+  dayOfTravel: string
+  departure: string
+  destination: string
+}
+
+interface UseLogExportOptions {
+  logbookId: string
+  entries: LogExportEntryItem[]
+  readOnly?: boolean
+  preloadedYacht?: { name?: string } | null
+  preloadedEntries?: any[]
+}
+
+function dataUrlToUint8Array(dataUrl: string): { data: Uint8Array; ext: string } {
+  const parts = dataUrl.split(',')
+  if (parts.length < 2) throw new Error('Invalid data URL')
+  const meta = parts[0]
+  const base64Data = parts[1]
+  let ext = 'jpg'
+  const mimeMatch = meta.match(/data:([^;]+)/)
+  if (mimeMatch) {
+    const mime = mimeMatch[1]
+    if (mime === 'image/png') ext = 'png'
+    else if (mime === 'image/gif') ext = 'gif'
+    else if (mime === 'image/webp') ext = 'webp'
+    else if (mime === 'image/heic') ext = 'heic'
+    else if (mime === 'image/heif') ext = 'heif'
+  }
+  const binaryString = atob(base64Data)
+  const bytes = new Uint8Array(binaryString.length)
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i)
+  }
+  return { data: bytes, ext }
+}
+
+function sanitizeFilename(str: string): string {
+  return str.replace(/[^\w\s-]/gi, '').trim().replace(/\s+/g, '_').slice(0, 30)
+}
+
+export function useLogExport({
+  logbookId,
+  entries,
+  readOnly = false,
+  preloadedYacht,
+  preloadedEntries
+}: UseLogExportOptions) {
+  const { t } = useTranslation()
+  const [exporting, setExporting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const logbookTitle =
+    preloadedYacht?.name || localStorage.getItem('active_logbook_title') || 'Logbook'
+
+  const handleDownloadCsv = useCallback(async () => {
+    setExporting(true)
+    setError(null)
+    try {
+      if (readOnly && preloadedEntries && preloadedYacht) {
+        await downloadCsv(logbookId, logbookTitle, { yacht: preloadedYacht, entries: preloadedEntries })
+      } else {
+        await downloadCsv(logbookId, logbookTitle)
+      }
+      trackPlausibleEvent(PlausibleEvents.CSV_EXPORTED)
+    } catch (err: unknown) {
+      console.error('Failed to download CSV:', err)
+      setError(getErrorMessage(err, t('errors.export_failed')))
+    } finally {
+      setExporting(false)
+    }
+  }, [logbookId, logbookTitle, preloadedEntries, preloadedYacht, readOnly, t])
+
+  const handleShareCsv = useCallback(async () => {
+    setExporting(true)
+    setError(null)
+    try {
+      if (readOnly && preloadedEntries && preloadedYacht) {
+        await shareCsv(logbookId, logbookTitle, { yacht: preloadedYacht, entries: preloadedEntries })
+      } else {
+        await shareCsv(logbookId, logbookTitle)
+      }
+      trackPlausibleEvent(PlausibleEvents.CSV_SHARED)
+    } catch (err: unknown) {
+      if (err instanceof Error && err.message === 'share_unsupported') {
+        if (readOnly && preloadedEntries && preloadedYacht) {
+          await downloadCsv(logbookId, logbookTitle, { yacht: preloadedYacht, entries: preloadedEntries })
+        } else {
+          await downloadCsv(logbookId, logbookTitle)
+        }
+        setError(t('logs.share_unsupported'))
+      } else {
+        console.error('Failed to share CSV:', err)
+        setError(getErrorMessage(err, t('errors.export_failed')))
+      }
+    } finally {
+      setExporting(false)
+    }
+  }, [logbookId, logbookTitle, preloadedEntries, preloadedYacht, readOnly, t])
+
+  const handleDownloadPdf = useCallback(async (entryId: string, date: string) => {
+    setExporting(true)
+    setError(null)
+    try {
+      if (readOnly && preloadedEntries && preloadedYacht) {
+        const fullEntry = preloadedEntries.find((entry) => (entry.payloadId || entry.id) === entryId)
+        await downloadLogbookPagePdf(logbookId, entryId, date, { yacht: preloadedYacht, entry: fullEntry })
+      } else {
+        await downloadLogbookPagePdf(logbookId, entryId, date)
+      }
+      trackPlausibleEvent(PlausibleEvents.PDF_EXPORTED, { scope: 'entry' })
+    } catch (err: unknown) {
+      console.error('Failed to download PDF:', err)
+      setError(getErrorMessage(err, t('errors.export_failed')))
+    } finally {
+      setExporting(false)
+    }
+  }, [logbookId, preloadedEntries, preloadedYacht, readOnly, t])
+
+  const handleDownloadPhotosZip = useCallback(async () => {
+    if (!hasUnlockedLocalCrypto()) return
+    setExporting(true)
+    setError(null)
+    try {
+      const masterKey = (await getLogbookKey(logbookId)) || getActiveMasterKey()
+      if (!masterKey) throw new Error('Encryption key not found. Please log in.')
+
+      const localPhotos = await db.photos.where({ logbookId }).toArray()
+      if (localPhotos.length === 0) {
+        setError(t('logs.no_photos_to_download'))
+        return
+      }
+
+      const entryMap = new Map(entries.map((e) => [e.id, e]))
+      const files: Record<string, Uint8Array> = {}
+      const usedNames = new Set<string>()
+
+      for (const photo of localPhotos) {
+        const decrypted = await decryptJson(photo.encryptedData, photo.iv, photo.tag, masterKey)
+        if (!decrypted || !decrypted.image) continue
+
+        const { data, ext } = dataUrlToUint8Array(decrypted.image)
+        let fileBase = `photo_${photo.payloadId}`
+        const entry = entryMap.get(photo.entryId)
+        if (entry) {
+          const parts = [entry.date || 'unknown-date']
+          if (entry.dayOfTravel) parts.push(`day-${entry.dayOfTravel}`)
+          const sanitizedCaption = decrypted.caption ? sanitizeFilename(decrypted.caption) : ''
+          if (sanitizedCaption) parts.push(sanitizedCaption)
+          fileBase = parts.join('_')
+        } else if (decrypted.caption) {
+          fileBase = `photo_${sanitizeFilename(decrypted.caption)}`
+        }
+
+        let candidate = `${fileBase}.${ext}`
+        let counter = 1
+        while (usedNames.has(candidate.toLowerCase())) {
+          candidate = `${fileBase}_${counter}.${ext}`
+          counter++
+        }
+        usedNames.add(candidate.toLowerCase())
+        files[candidate] = data
+      }
+
+      if (Object.keys(files).length === 0) {
+        setError(t('logs.no_photos_to_download'))
+        return
+      }
+
+      const zipBytes = buildZipArchive(files)
+      const blob = new Blob([zipBytes as BlobPart], { type: 'application/zip' })
+      const url = URL.createObjectURL(blob)
+      const safeTitle = logbookTitle.replace(/[^\w\s-]/g, '').trim().replace(/\s+/g, '-').slice(0, 40) || 'logbook'
+      const filename = `${safeTitle}-photos-${new Date().toISOString().slice(0, 10)}.zip`
+      const anchor = document.createElement('a')
+      anchor.href = url
+      anchor.download = filename
+      anchor.click()
+      URL.revokeObjectURL(url)
+    } catch (err: unknown) {
+      console.error('Failed to download photos ZIP:', err)
+      setError(getErrorMessage(err, t('errors.export_failed')))
+    } finally {
+      setExporting(false)
+    }
+  }, [entries, logbookId, logbookTitle, t])
+
+  return {
+    exporting,
+    error,
+    setError,
+    handleDownloadCsv,
+    handleShareCsv,
+    handleDownloadPdf,
+    handleDownloadPhotosZip,
+    canExportPhotosZip: hasUnlockedLocalCrypto()
+  }
+}
@@ -0,0 +1,180 @@
+import { useEffect, useRef } from 'react'
+import { useRegisterSW } from 'virtual:pwa-register/react'
+import {
+  forcePwaRecovery,
+  markReloadAttempt,
+  recentlyAttemptedReload,
+  triggerServiceWorkerUpdate
+} from '../services/pwaStartup.js'
+import { isDeployedVersionNewer } from '../services/pwaVersion.js'
+
+const UPDATE_CHECK_INTERVAL_MS = 15 * 60 * 1000
+const UPDATE_SUPPRESS_KEY = 'pwa_update_suppress_until'
+const UPDATE_SUPPRESS_MS = 30_000
+const UPDATE_DISMISS_SUPPRESS_MS = 15 * 60 * 1000
+const UPDATE_RELOAD_FALLBACK_MS = 2_000
+const UPDATE_HARD_RECOVERY_MS = 5_000
+
+function isUpdateSuppressed(): boolean {
+  const suppressUntil = Number(sessionStorage.getItem(UPDATE_SUPPRESS_KEY) || '0')
+  return Date.now() < suppressUntil
+}
+
+function suppressUpdatePrompt(durationMs = UPDATE_SUPPRESS_MS): void {
+  sessionStorage.setItem(UPDATE_SUPPRESS_KEY, String(Date.now() + durationMs))
+}
+
+function clearUpdateSuppression(): void {
+  sessionStorage.removeItem(UPDATE_SUPPRESS_KEY)
+}
+
+function scheduleUpdateChecks(
+  registration: ServiceWorkerRegistration,
+  onOutdated: () => void
+): () => void {
+  const checkForUpdate = () => {
+    if (isUpdateSuppressed()) return
+    registration.update().catch(() => {})
+    void isDeployedVersionNewer().then((outdated) => {
+      if (outdated) onOutdated()
+    })
+  }
+
+  const onVisibilityChange = () => {
+    if (document.visibilityState === 'visible') {
+      // Delay check on wake-up to allow the mobile network stack to stabilize
+      setTimeout(checkForUpdate, 2000)
+    }
+  }
+
+  const onOnline = () => {
+    // Small delay to ensure connection is fully established
+    setTimeout(checkForUpdate, 500)
+  }
+
+  document.addEventListener('visibilitychange', onVisibilityChange)
+  window.addEventListener('online', onOnline)
+  const updateIntervalId = window.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS)
+
+  checkForUpdate()
+
+  return () => {
+    document.removeEventListener('visibilitychange', onVisibilityChange)
+    window.removeEventListener('online', onOnline)
+    window.clearInterval(updateIntervalId)
+  }
+}
+
+function reloadForServiceWorkerTakeover(): void {
+  if (recentlyAttemptedReload()) return
+  markReloadAttempt()
+  clearUpdateSuppression()
+  window.location.reload()
+}
+
+export function usePwaUpdate() {
+  const cleanupRef = useRef<(() => void) | null>(null)
+  const reloadFallbackTimerRef = useRef<number | null>(null)
+  const forceRecoveryTimerRef = useRef<number | null>(null)
+  const setNeedRefreshRef = useRef<((value: boolean) => void) | null>(null)
+  const pendingNeedRefreshRef = useRef<boolean | null>(null)
+
+  const applyNeedRefresh = (value: boolean) => {
+    if (setNeedRefreshRef.current) {
+      setNeedRefreshRef.current(value)
+      return
+    }
+    pendingNeedRefreshRef.current = value
+  }
+
+  const {
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker
+  } = useRegisterSW({
+    immediate: !import.meta.env.DEV,
+    onNeedReload() {
+      if (isUpdateSuppressed()) return
+      applyNeedRefresh(true)
+    },
+    onNeedRefresh() {
+      if (isUpdateSuppressed()) return
+      applyNeedRefresh(true)
+    },
+    onRegisteredSW(_swUrl: string, registration: ServiceWorkerRegistration | undefined) {
+      if (!registration) return
+
+      if (isUpdateSuppressed() || !registration.waiting) {
+        applyNeedRefresh(false)
+      }
+
+      cleanupRef.current?.()
+      cleanupRef.current = scheduleUpdateChecks(registration, () => {
+        if (isUpdateSuppressed()) return
+        applyNeedRefresh(true)
+      })
+    }
+  })
+
+  setNeedRefreshRef.current = setNeedRefresh
+
+  useEffect(() => {
+    if (isUpdateSuppressed()) {
+      setNeedRefresh(false)
+    } else if (pendingNeedRefreshRef.current !== null) {
+      const pending = pendingNeedRefreshRef.current
+      pendingNeedRefreshRef.current = null
+      setNeedRefresh(pending)
+    }
+
+    void isDeployedVersionNewer().then((outdated) => {
+      if (outdated) {
+        setNeedRefresh(true)
+      }
+    })
+
+    return () => {
+      cleanupRef.current?.()
+      cleanupRef.current = null
+      if (reloadFallbackTimerRef.current !== null) {
+        window.clearTimeout(reloadFallbackTimerRef.current)
+        reloadFallbackTimerRef.current = null
+      }
+      if (forceRecoveryTimerRef.current !== null) {
+        window.clearTimeout(forceRecoveryTimerRef.current)
+        forceRecoveryTimerRef.current = null
+      }
+    }
+  }, [setNeedRefresh])
+
+  const updateApp = async () => {
+    setNeedRefresh(false)
+    suppressUpdatePrompt()
+
+    await updateServiceWorker(true)
+    await triggerServiceWorkerUpdate()
+
+    if (reloadFallbackTimerRef.current !== null) {
+      window.clearTimeout(reloadFallbackTimerRef.current)
+    }
+    if (forceRecoveryTimerRef.current !== null) {
+      window.clearTimeout(forceRecoveryTimerRef.current)
+    }
+
+    reloadFallbackTimerRef.current = window.setTimeout(() => {
+      reloadFallbackTimerRef.current = null
+      reloadForServiceWorkerTakeover()
+    }, UPDATE_RELOAD_FALLBACK_MS)
+
+    forceRecoveryTimerRef.current = window.setTimeout(() => {
+      forceRecoveryTimerRef.current = null
+      void forcePwaRecovery()
+    }, UPDATE_HARD_RECOVERY_MS)
+  }
+
+  const dismissUpdate = () => {
+    setNeedRefresh(false)
+    suppressUpdatePrompt(UPDATE_DISMISS_SUPPRESS_MS)
+  }
+
+  return { needRefresh, updateApp, dismissUpdate }
+}
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { db } from '../services/db.js'
+import { subscribeToSyncState } from '../services/sync.js'
+
+export type SyncConnStatusVariant = 'offline' | 'syncing' | 'pending' | 'online'
+
+/** Maps sync/online state to conn-status CSS modifier classes. */
+export function syncConnStatusClassName(
+  online: boolean,
+  showSpinner: boolean,
+  pendingCount: number
+): string {
+  if (!online) return 'conn-status offline'
+  if (showSpinner) return 'conn-status syncing'
+  if (pendingCount > 0) return 'conn-status warning'
+  return 'conn-status online'
+}
+
+/** Sync queue depth and whether a sync pass is running (for header indicators). */
+export function useSyncIndicator(logbookId?: string | null) {
+  const [isSyncing, setIsSyncing] = useState(false)
+
+  const pendingCount =
+    useLiveQuery(
+      () =>
+        logbookId
+          ? db.syncQueue.where({ logbookId }).count()
+          : db.syncQueue.count(),
+      [logbookId]
+    ) ?? 0
+
+  useEffect(() => {
+    return subscribeToSyncState(setIsSyncing)
+  }, [])
+
+  const showSpinner = isSyncing
+  const showPendingWarning = pendingCount > 0 && !isSyncing
+
+  return {
+    isSyncing,
+    pendingCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName: (online: boolean) =>
+      syncConnStatusClassName(online, showSpinner, pendingCount)
+  }
+}
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import deJson from './locales/de.json'
+import enJson from './locales/en.json'
+
+const resources = {
+  de: { translation: deJson.translation },
+  en: { translation: enJson.translation }
+}
+
+describe('course dial i18n keys', () => {
+  it.each([
+    'logs.event_course_section',
+    'logs.course_tab_mgk',
+    'logs.course_tab_rwk',
+    'logs.course_dial_hint',
+    'logs.course_step_fine',
+    'logs.wind_mode_cardinal'
+  ])('resolves %s in de and en bundles', async (key) => {
+    const { default: i18n } = await import('i18next')
+    await i18n.init({ lng: 'de', resources, defaultNS: 'translation' })
+    expect(i18n.t(key)).not.toBe(key)
+    await i18n.changeLanguage('en')
+    expect(i18n.t(key)).not.toBe(key)
+  })
+})
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .1.0.3
 .1.1.37