feat(translation): machine translation pipeline + admin bulk enqueue UI

- LibreTranslate client (chunks on blank lines, ≤4500 chars, 3-goroutine semaphore)
- Runner translation task loop (OTel, heartbeat, MinIO storage)
- PocketBase translation_jobs collection support (create/claim/finish/list)
- Per-chapter language switcher on chapter reader (EN/RU/ID/PT/FR, polls until done)
- Admin /admin/translation page: bulk enqueue form + live-polling jobs table
- New backend routes: POST /api/translation/{slug}/{n}, GET /api/translation/status,
  GET /api/translation/{slug}/{n}, GET /api/admin/translation/jobs,
  POST /api/admin/translation/bulk
- ListTranslationTasks added to taskqueue.Reader interface + store impl
- All builds and tests pass; svelte-check: 0 errors

.gitea/workflows/release.yaml

@@ -190,6 +190,17 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Fetch releases from Gitea API
+        run: |
+          set -euo pipefail
+          RESPONSE=$(curl -sfL \
+            -H "Accept: application/json" \
+            "http://gitea.kalekber.cc/api/v1/repos/kamil/libnovel/releases?limit=50&page=1")
+          # Validate JSON before writing — fails hard if response is not a JSON array
+          COUNT=$(echo "$RESPONSE" | jq 'if type == "array" then length else error("expected array, got \(type)") end')
+          echo "$RESPONSE" > ui/static/releases.json
+          echo "Fetched $COUNT releases"
+
       - uses: docker/setup-buildx-action@v3
 
       - name: Log in to Docker Hub

Caddyfile

@@ -56,6 +56,22 @@
 		ticker_interval 15s
 	}
 
+	# ── Redis TCP proxy via layer4 ────────────────────────────────────────────
+	# Exposes homelab Redis over TLS for Asynq job enqueueing from the backend.
+	# Listens on :6380 (all interfaces). TLS is terminated here using the cert
+	# for redis.libnovel.cc; traffic is proxied to the homelab Redis instance.
+	# Requires the caddy-l4 module in the custom Caddy build.
+	layer4 {
+		:6380 {
+			route {
+				tls
+				proxy {
+					upstream {$HOMELAB_REDIS_ADDR:192.168.0.109:6379}
+				}
+			}
+		}
+	}
+}
 
 (security_headers) {
 	header {
@@ -170,12 +186,31 @@
 	# ── SvelteKit UI (catch-all — includes all remaining /api/* routes) ───────
 	handle {
 		reverse_proxy ui:3000 {
-	}
+			# Active health check: Caddy polls /health every 5 s and marks the
+			# upstream down immediately when it fails. Combined with
+			# lb_try_duration this means Watchtower container replacements
+			# show the maintenance page within a few seconds instead of
+			# hanging or returning a raw connection error to the browser.
+			health_uri      /health
+			health_interval 5s
+			health_timeout  2s
+			health_status   200
+
+			# If the upstream is down, fail fast (don't retry for longer than
+			# 3 s) and let Caddy's handle_errors 502/503 take over.
+			lb_try_duration 3s
+		}
+	}
 
 	# ── Caddy-level error pages ───────────────────────────────────────────────
 	# These fire when the upstream (backend or ui) is completely unreachable.
 	# SvelteKit's own +error.svelte handles application-level errors (404, 500).
 	handle_errors 404 {
+		root * /srv/errors
+		rewrite * /404.html
+		file_server
+	}
+	handle_errors 502 {
 		root * /srv/errors
 		rewrite * /502.html
 		file_server
@@ -234,27 +269,3 @@ search.libnovel.cc {
 	reverse_proxy meilisearch:7700
 }
 }
-# ── Redis TCP proxy: exposes homelab Redis over TLS for Asynq ─────────────────
-# The backend (prod) connects to rediss://redis.libnovel.cc:6380 to enqueue
-# Asynq jobs. Caddy terminates TLS (Let's Encrypt cert for redis.libnovel.cc)
-# and proxies the raw TCP stream to the homelab Redis via this reverse proxy.
-#
-# NOTE: Redis is NOT running on the prod server — it runs on the homelab
-# (192.168.0.109:6379) and is exposed to the internet via this Caddy proxy.
-# The homelab Redis is protected by REDIS_PASSWORD (requirepass).
-#
-# Caddy layer4 app handles this; requires the caddy-l4 module in the build.
-{
-	layer4 {
-		redis.libnovel.cc:6380 {
-			route {
-				tls
-				proxy {
-					# Homelab Redis — replace with actual homelab IP or FQDN
-					upstream {$HOMELAB_REDIS_ADDR:192.168.0.109:6379}
-				}
-			}
-		}
-	}
-}
-}

backend/cmd/backend/main.go

@@ -150,18 +150,19 @@ func run() error {
 			Commit:       commit,
 		},
 		backend.Dependencies{
-			BookReader:    store,
-			RankingStore:  store,
-			AudioStore:    store,
-			PresignStore:  store,
-			ProgressStore: store,
-			CoverStore:    store,
-			Producer:      producer,
-			TaskReader:    store,
-			SearchIndex:   searchIndex,
-			Kokoro:        kokoroClient,
-			PocketTTS:     pocketTTSClient,
-			Log:           log,
+			BookReader:       store,
+			RankingStore:     store,
+			AudioStore:       store,
+			TranslationStore: store,
+			PresignStore:     store,
+			ProgressStore:    store,
+			CoverStore:       store,
+			Producer:         producer,
+			TaskReader:       store,
+			SearchIndex:      searchIndex,
+			Kokoro:           kokoroClient,
+			PocketTTS:        pocketTTSClient,
+			Log:              log,
 		},
 	)
 

backend/cmd/runner/main.go

@@ -24,6 +24,7 @@ import (
 	"github.com/libnovel/backend/internal/browser"
 	"github.com/libnovel/backend/internal/config"
 	"github.com/libnovel/backend/internal/kokoro"
+	"github.com/libnovel/backend/internal/libretranslate"
 	"github.com/libnovel/backend/internal/meili"
 	"github.com/libnovel/backend/internal/novelfire"
 	"github.com/libnovel/backend/internal/otelsetup"
@@ -128,6 +129,14 @@ func run() error {
 		log.Warn("POCKET_TTS_URL not set — pocket-tts voice tasks will fail")
 	}
 
+	// ── LibreTranslate ──────────────────────────────────────────────────────
+	ltClient := libretranslate.New(cfg.LibreTranslate.URL, cfg.LibreTranslate.APIKey)
+	if ltClient != nil {
+		log.Info("libretranslate enabled", "url", cfg.LibreTranslate.URL)
+	} else {
+		log.Info("LIBRETRANSLATE_URL not set — machine translation disabled")
+	}
+
 	// ── Meilisearch ─────────────────────────────────────────────────────────
 	var searchIndex meili.Client
 	if cfg.Meilisearch.URL != "" {
@@ -149,6 +158,7 @@ func run() error {
 		PollInterval:                cfg.Runner.PollInterval,
 		MaxConcurrentScrape:         cfg.Runner.MaxConcurrentScrape,
 		MaxConcurrentAudio:          cfg.Runner.MaxConcurrentAudio,
+		MaxConcurrentTranslation:    cfg.Runner.MaxConcurrentTranslation,
 		OrchestratorWorkers:         workers,
 		MetricsAddr:                 cfg.Runner.MetricsAddr,
 		CatalogueRefreshInterval:    cfg.Runner.CatalogueRefreshInterval,
@@ -170,16 +180,18 @@ func run() error {
 	}
 
 	deps := runner.Dependencies{
-		Consumer:    consumer,
-		BookWriter:  store,
-		BookReader:  store,
-		AudioStore:  store,
-		CoverStore:  store,
-		SearchIndex: searchIndex,
-		Novel:       novel,
-		Kokoro:      kokoroClient,
-		PocketTTS:   pocketTTSClient,
-		Log:         log,
+		Consumer:         consumer,
+		BookWriter:       store,
+		BookReader:       store,
+		AudioStore:       store,
+		CoverStore:       store,
+		TranslationStore: store,
+		SearchIndex:      searchIndex,
+		Novel:            novel,
+		Kokoro:           kokoroClient,
+		PocketTTS:        pocketTTSClient,
+		LibreTranslate:   ltClient,
+		Log:              log,
 	}
 	r := runner.New(rCfg, deps)
 

backend/go.mod

@@ -43,6 +43,7 @@ require (
 	github.com/rs/xid v1.6.0 // indirect
 	github.com/spf13/cast v1.10.0 // indirect
 	github.com/tinylib/msgp v1.6.1 // indirect
+	github.com/yuin/goldmark v1.8.2 // indirect
 	go.opentelemetry.io/auto/sdk v1.2.1 // indirect
 	go.opentelemetry.io/contrib/bridges/otelslog v0.17.0 // indirect
 	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.67.0 // indirect

backend/go.sum

@@ -84,6 +84,8 @@ github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu
 github.com/tinylib/msgp v1.6.1 h1:ESRv8eL3u+DNHUoSAAQRE50Hm162zqAnBoGv9PzScPY=
 github.com/tinylib/msgp v1.6.1/go.mod h1:RSp0LW9oSxFut3KzESt5Voq4GVWyS+PSulT77roAqEA=
 github.com/xyproto/randomstring v1.0.5/go.mod h1:rgmS5DeNXLivK7YprL0pY+lTuhNQW3iGxZ18UQApw/E=
+github.com/yuin/goldmark v1.8.2 h1:kEGpgqJXdgbkhcOgBxkC0X0PmoPG1ZyoZ117rDVp4zE=
+github.com/yuin/goldmark v1.8.2/go.mod h1:ip/1k0VRfGynBgxOz0yCqHrbZXhcjxyuS66Brc7iBKg=
 go.opentelemetry.io/auto/sdk v1.2.1 h1:jXsnJ4Lmnqd11kwkBV2LgLoFMZKizbCi5fNZ/ipaZ64=
 go.opentelemetry.io/auto/sdk v1.2.1/go.mod h1:KRTj+aOaElaLi+wW1kO/DZRXwkF4C5xPbEe3ZiIhN7Y=
 go.opentelemetry.io/contrib/bridges/otelslog v0.17.0 h1:NFIS6x7wyObQ7cR84x7bt1sr8nYBx89s3x3GwRjw40k=

backend/internal/asynqqueue/consumer.go

@@ -37,6 +37,10 @@ func (c *Consumer) FinishAudioTask(ctx context.Context, id string, result domain
 	return c.pb.FinishAudioTask(ctx, id, result)
 }
 
+func (c *Consumer) FinishTranslationTask(ctx context.Context, id string, result domain.TranslationResult) error {
+	return c.pb.FinishTranslationTask(ctx, id, result)
+}
+
 func (c *Consumer) FailTask(ctx context.Context, id, errMsg string) error {
 	return c.pb.FailTask(ctx, id, errMsg)
 }
@@ -51,6 +55,10 @@ func (c *Consumer) ClaimNextAudioTask(_ context.Context, _ string) (domain.Audio
 	return domain.AudioTask{}, false, nil
 }
 
+func (c *Consumer) ClaimNextTranslationTask(_ context.Context, _ string) (domain.TranslationTask, bool, error) {
+	return domain.TranslationTask{}, false, nil
+}
+
 func (c *Consumer) HeartbeatTask(_ context.Context, _ string) error { return nil }
 
 func (c *Consumer) ReapStaleTasks(_ context.Context, _ time.Duration) (int, error) { return 0, nil }

backend/internal/asynqqueue/producer.go

@@ -73,6 +73,12 @@ func (p *Producer) CreateAudioTask(ctx context.Context, slug string, chapter int
 	return id, nil
 }
 
+// CreateTranslationTask creates a PocketBase record. Translation tasks are
+// not currently dispatched via Asynq — the runner picks them up via polling.
+func (p *Producer) CreateTranslationTask(ctx context.Context, slug string, chapter int, lang string) (string, error) {
+	return p.pb.CreateTranslationTask(ctx, slug, chapter, lang)
+}
+
 // CancelTask delegates to PocketBase; Asynq jobs may already be running and
 // cannot be reliably cancelled, so we only update the audit record.
 func (p *Producer) CancelTask(ctx context.Context, id string) error {

backend/internal/backend/handlers.go

@@ -32,6 +32,7 @@ package backend
 //     directly (no runner task, no store writes). Used for unscraped books.
 
 import (
+	"bytes"
 	"context"
 	"encoding/json"
 	"fmt"
@@ -49,6 +50,7 @@ import (
 	"github.com/libnovel/backend/internal/novelfire/htmlutil"
 	"github.com/libnovel/backend/internal/pockettts"
 	"github.com/libnovel/backend/internal/scraper"
+	"github.com/yuin/goldmark"
 )
 
 const (
@@ -701,9 +703,252 @@ func (s *Server) handleAudioProxy(w http.ResponseWriter, r *http.Request) {
 	http.Redirect(w, r, presignURL, http.StatusFound)
 }
 
-// ── Voices ─────────────────────────────────────────────────────────────────────
+// ── Translation ────────────────────────────────────────────────────────────────
 
-// handleVoices handles GET /api/voices.
+// supportedTranslationLangs is the set of target locales the backend accepts.
+// Source is always "en".
+var supportedTranslationLangs = map[string]bool{
+	"ru": true, "id": true, "pt": true, "fr": true,
+}
+
+// handleTranslationGenerate handles POST /api/translation/{slug}/{n}.
+// Query params: lang (required, one of ru|id|pt|fr)
+//
+// Returns 200 immediately if translation already exists in MinIO.
+// Returns 202 with task_id if a new task was created.
+// Returns 503 if TranslationStore is nil (feature disabled).
+func (s *Server) handleTranslationGenerate(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TranslationStore == nil {
+		jsonError(w, http.StatusServiceUnavailable, "machine translation not configured")
+		return
+	}
+
+	slug := r.PathValue("slug")
+	n, err := strconv.Atoi(r.PathValue("n"))
+	if err != nil || n < 1 {
+		jsonError(w, http.StatusBadRequest, "invalid chapter")
+		return
+	}
+
+	lang := r.URL.Query().Get("lang")
+	if !supportedTranslationLangs[lang] {
+		jsonError(w, http.StatusBadRequest, "unsupported lang; use ru, id, pt, or fr")
+		return
+	}
+
+	cacheKey := fmt.Sprintf("%s/%d/%s", slug, n, lang)
+
+	// Fast path: translation already in MinIO
+	key := s.deps.TranslationStore.TranslationObjectKey(lang, slug, n)
+	if s.deps.TranslationStore.TranslationExists(r.Context(), key) {
+		writeJSON(w, 0, map[string]string{"status": "done", "lang": lang})
+		return
+	}
+
+	// Check if a task is already pending/running
+	task, found, _ := s.deps.TaskReader.GetTranslationTask(r.Context(), cacheKey)
+	if found && (task.Status == domain.TaskStatusPending || task.Status == domain.TaskStatusRunning) {
+		writeJSON(w, http.StatusAccepted, map[string]string{
+			"task_id": task.ID,
+			"status":  string(task.Status),
+			"lang":    lang,
+		})
+		return
+	}
+
+	// Create a new translation task
+	taskID, err := s.deps.Producer.CreateTranslationTask(r.Context(), slug, n, lang)
+	if err != nil {
+		s.deps.Log.Error("handleTranslationGenerate: CreateTranslationTask failed", "err", err)
+		jsonError(w, http.StatusInternalServerError, "failed to create translation task")
+		return
+	}
+
+	writeJSON(w, http.StatusAccepted, map[string]string{
+		"task_id": taskID,
+		"status":  "pending",
+		"lang":    lang,
+	})
+}
+
+// handleTranslationStatus handles GET /api/translation/status/{slug}/{n}.
+// Query params: lang (required)
+func (s *Server) handleTranslationStatus(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TranslationStore == nil {
+		writeJSON(w, 0, map[string]string{"status": "unavailable"})
+		return
+	}
+
+	slug := r.PathValue("slug")
+	n, err := strconv.Atoi(r.PathValue("n"))
+	if err != nil || n < 1 || slug == "" {
+		jsonError(w, http.StatusBadRequest, "invalid params")
+		return
+	}
+
+	lang := r.URL.Query().Get("lang")
+	if !supportedTranslationLangs[lang] {
+		jsonError(w, http.StatusBadRequest, "unsupported lang")
+		return
+	}
+
+	// Fast path: translation exists in MinIO
+	key := s.deps.TranslationStore.TranslationObjectKey(lang, slug, n)
+	if s.deps.TranslationStore.TranslationExists(r.Context(), key) {
+		writeJSON(w, 0, map[string]string{"status": "done", "lang": lang})
+		return
+	}
+
+	cacheKey := fmt.Sprintf("%s/%d/%s", slug, n, lang)
+	task, found, _ := s.deps.TaskReader.GetTranslationTask(r.Context(), cacheKey)
+	if !found {
+		writeJSON(w, 0, map[string]string{"status": "idle", "lang": lang})
+		return
+	}
+
+	resp := map[string]string{
+		"status":  string(task.Status),
+		"task_id": task.ID,
+		"lang":    lang,
+	}
+	if task.Status == domain.TaskStatusFailed && task.ErrorMessage != "" {
+		resp["error"] = task.ErrorMessage
+	}
+	writeJSON(w, 0, resp)
+}
+
+// handleTranslationRead handles GET /api/translation/{slug}/{n}.
+// Query params: lang (required)
+//
+// Returns {"html": "<p>...</p>", "lang": "ru"} from the MinIO-cached translation.
+// Returns 404 when the translation has not been generated yet.
+func (s *Server) handleTranslationRead(w http.ResponseWriter, r *http.Request) {
+	if s.deps.TranslationStore == nil {
+		http.Error(w, `{"error":"machine translation not configured"}`, http.StatusServiceUnavailable)
+		return
+	}
+
+	slug := r.PathValue("slug")
+	n, err := strconv.Atoi(r.PathValue("n"))
+	if err != nil || n < 1 || slug == "" {
+		jsonError(w, http.StatusBadRequest, "invalid params")
+		return
+	}
+
+	lang := r.URL.Query().Get("lang")
+	if !supportedTranslationLangs[lang] {
+		jsonError(w, http.StatusBadRequest, "unsupported lang")
+		return
+	}
+
+	key := s.deps.TranslationStore.TranslationObjectKey(lang, slug, n)
+	md, err := s.deps.TranslationStore.GetTranslation(r.Context(), key)
+	if err != nil {
+		s.deps.Log.Warn("handleTranslationRead: translation not found", "slug", slug, "n", n, "lang", lang, "err", err)
+		jsonError(w, http.StatusNotFound, "translation not available")
+		return
+	}
+
+	var buf bytes.Buffer
+	if err := goldmark.Convert([]byte(md), &buf); err != nil {
+		s.deps.Log.Error("handleTranslationRead: markdown conversion failed", "err", err)
+		jsonError(w, http.StatusInternalServerError, "failed to render translation")
+		return
+	}
+
+	writeJSON(w, 0, map[string]string{"html": buf.String(), "lang": lang})
+}
+
+// handleAdminTranslationJobs handles GET /api/admin/translation/jobs.
+// Returns the full list of translation jobs sorted by started descending.
+func (s *Server) handleAdminTranslationJobs(w http.ResponseWriter, r *http.Request) {
+	tasks, err := s.deps.TaskReader.ListTranslationTasks(r.Context())
+	if err != nil {
+		s.deps.Log.Error("handleAdminTranslationJobs: ListTranslationTasks failed", "err", err)
+		jsonError(w, http.StatusInternalServerError, "failed to list translation jobs")
+		return
+	}
+	type jobRow struct {
+		ID           string `json:"id"`
+		CacheKey     string `json:"cache_key"`
+		Slug         string `json:"slug"`
+		Chapter      int    `json:"chapter"`
+		Lang         string `json:"lang"`
+		Status       string `json:"status"`
+		WorkerID     string `json:"worker_id"`
+		ErrorMessage string `json:"error_message"`
+		Started      string `json:"started"`
+		Finished     string `json:"finished"`
+	}
+	rows := make([]jobRow, 0, len(tasks))
+	for _, t := range tasks {
+		rows = append(rows, jobRow{
+			ID:           t.ID,
+			CacheKey:     t.CacheKey,
+			Slug:         t.Slug,
+			Chapter:      t.Chapter,
+			Lang:         t.Lang,
+			Status:       string(t.Status),
+			WorkerID:     t.WorkerID,
+			ErrorMessage: t.ErrorMessage,
+			Started:      t.Started.Format(time.RFC3339),
+			Finished:     t.Finished.Format(time.RFC3339),
+		})
+	}
+	writeJSON(w, 0, map[string]any{"jobs": rows})
+}
+
+// handleAdminTranslationBulk handles POST /api/admin/translation/bulk.
+// Body: {"slug": "...", "lang": "ru", "from": 1, "to": 50}
+// Enqueues one translation task per chapter in the range [from, to] inclusive.
+func (s *Server) handleAdminTranslationBulk(w http.ResponseWriter, r *http.Request) {
+	var body struct {
+		Slug string `json:"slug"`
+		Lang string `json:"lang"`
+		From int    `json:"from"`
+		To   int    `json:"to"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		jsonError(w, http.StatusBadRequest, "invalid JSON body")
+		return
+	}
+	if body.Slug == "" {
+		jsonError(w, http.StatusBadRequest, "slug is required")
+		return
+	}
+	if !supportedTranslationLangs[body.Lang] {
+		jsonError(w, http.StatusBadRequest, "unsupported lang; use ru, id, pt, or fr")
+		return
+	}
+	if body.From < 1 || body.To < body.From {
+		jsonError(w, http.StatusBadRequest, "from must be >= 1 and to must be >= from")
+		return
+	}
+	if body.To-body.From > 999 {
+		jsonError(w, http.StatusBadRequest, "range too large; max 1000 chapters per request")
+		return
+	}
+
+	var taskIDs []string
+	for n := body.From; n <= body.To; n++ {
+		id, err := s.deps.Producer.CreateTranslationTask(r.Context(), body.Slug, n, body.Lang)
+		if err != nil {
+			s.deps.Log.Error("handleAdminTranslationBulk: CreateTranslationTask failed",
+				"slug", body.Slug, "chapter", n, "lang", body.Lang, "err", err)
+			jsonError(w, http.StatusInternalServerError,
+				fmt.Sprintf("failed to create task for chapter %d: %s", n, err))
+			return
+		}
+		taskIDs = append(taskIDs, id)
+	}
+
+	writeJSON(w, http.StatusAccepted, map[string]any{
+		"enqueued": len(taskIDs),
+		"task_ids": taskIDs,
+	})
+}
+
+// ── Voices ─────────────────────────────────────────────────────────────────────
 // Returns {"voices": [...]} — merged list from Kokoro and pocket-tts.
 func (s *Server) handleVoices(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, 0, map[string]any{"voices": s.voices(r.Context())})

backend/internal/backend/server.go

@@ -47,6 +47,8 @@ type Dependencies struct {
 	RankingStore bookstore.RankingStore
 	// AudioStore checks audio object existence and computes MinIO keys.
 	AudioStore bookstore.AudioStore
+	// TranslationStore checks translation existence and reads/writes translated markdown.
+	TranslationStore bookstore.TranslationStore
 	// PresignStore generates short-lived MinIO URLs.
 	PresignStore bookstore.PresignStore
 	// ProgressStore reads/writes per-session reading progress.
@@ -160,6 +162,15 @@ func (s *Server) ListenAndServe(ctx context.Context) error {
 	mux.HandleFunc("GET /api/audio/status/{slug}/{n}", s.handleAudioStatus)
 	mux.HandleFunc("GET /api/audio-proxy/{slug}/{n}", s.handleAudioProxy)
 
+	// Translation task creation (backend creates task; runner executes via LibreTranslate)
+	mux.HandleFunc("POST /api/translation/{slug}/{n}", s.handleTranslationGenerate)
+	mux.HandleFunc("GET /api/translation/status/{slug}/{n}", s.handleTranslationStatus)
+	mux.HandleFunc("GET /api/translation/{slug}/{n}", s.handleTranslationRead)
+
+	// Admin translation endpoints
+	mux.HandleFunc("GET /api/admin/translation/jobs", s.handleAdminTranslationJobs)
+	mux.HandleFunc("POST /api/admin/translation/bulk", s.handleAdminTranslationBulk)
+
 	// Voices list
 	mux.HandleFunc("GET /api/voices", s.handleVoices)
 

backend/internal/bookstore/bookstore.go

@@ -141,3 +141,19 @@ type CoverStore interface {
 	// CoverExists returns true when a cover image is stored for slug.
 	CoverExists(ctx context.Context, slug string) bool
 }
+
+// TranslationStore covers machine-translated chapter storage in MinIO.
+// The runner writes translations; the backend reads them.
+type TranslationStore interface {
+	// TranslationObjectKey returns the MinIO object key for a cached translation.
+	TranslationObjectKey(lang, slug string, n int) string
+
+	// TranslationExists returns true when the translation object is present in MinIO.
+	TranslationExists(ctx context.Context, key string) bool
+
+	// PutTranslation stores raw translated markdown under the given MinIO object key.
+	PutTranslation(ctx context.Context, key string, data []byte) error
+
+	// GetTranslation retrieves translated markdown from MinIO.
+	GetTranslation(ctx context.Context, key string) (string, error)
+}

backend/internal/config/config.go

@@ -46,6 +46,8 @@ type MinIO struct {
 	BucketAvatars string
 	// BucketBrowse is the bucket that holds cached browse page snapshots (JSON).
 	BucketBrowse string
+	// BucketTranslations is the bucket that holds machine-translated chapter markdown.
+	BucketTranslations string
 }
 
 // Kokoro holds connection settings for the Kokoro-FastAPI TTS service.
@@ -64,6 +66,16 @@ type PocketTTS struct {
 	URL string
 }
 
+// LibreTranslate holds connection settings for a self-hosted LibreTranslate instance.
+type LibreTranslate struct {
+	// URL is the base URL of the LibreTranslate instance, e.g. https://translate.libnovel.cc
+	// An empty string disables machine translation entirely.
+	URL string
+	// APIKey is the optional API key for the LibreTranslate instance.
+	// Leave empty if the instance runs without authentication.
+	APIKey string
+}
+
 // HTTP holds settings for the HTTP server (backend only).
 type HTTP struct {
 	// Addr is the listen address, e.g. ":8080"
@@ -107,6 +119,8 @@ type Runner struct {
 	MaxConcurrentScrape int
 	// MaxConcurrentAudio limits simultaneous audio-generation goroutines.
 	MaxConcurrentAudio int
+	// MaxConcurrentTranslation limits simultaneous translation goroutines.
+	MaxConcurrentTranslation int
 	// WorkerID is a unique identifier for this runner instance.
 	// Defaults to the system hostname.
 	WorkerID string
@@ -135,15 +149,16 @@ type Runner struct {
 
 // Config is the top-level configuration struct consumed by both binaries.
 type Config struct {
-	PocketBase  PocketBase
-	MinIO       MinIO
-	Kokoro      Kokoro
-	PocketTTS   PocketTTS
-	HTTP        HTTP
-	Runner      Runner
-	Meilisearch Meilisearch
-	Valkey      Valkey
-	Redis       Redis
+	PocketBase     PocketBase
+	MinIO          MinIO
+	Kokoro         Kokoro
+	PocketTTS      PocketTTS
+	LibreTranslate LibreTranslate
+	HTTP           HTTP
+	Runner         Runner
+	Meilisearch    Meilisearch
+	Valkey         Valkey
+	Redis          Redis
 	// LogLevel is one of "debug", "info", "warn", "error".
 	LogLevel string
 }
@@ -166,16 +181,17 @@ func Load() Config {
 		},
 
 		MinIO: MinIO{
-			Endpoint:       envOr("MINIO_ENDPOINT", "localhost:9000"),
-			PublicEndpoint: envOr("MINIO_PUBLIC_ENDPOINT", ""),
-			AccessKey:      envOr("MINIO_ACCESS_KEY", "admin"),
-			SecretKey:      envOr("MINIO_SECRET_KEY", "changeme123"),
-			UseSSL:         envBool("MINIO_USE_SSL", false),
-			PublicUseSSL:   envBool("MINIO_PUBLIC_USE_SSL", true),
-			BucketChapters: envOr("MINIO_BUCKET_CHAPTERS", "chapters"),
-			BucketAudio:    envOr("MINIO_BUCKET_AUDIO", "audio"),
-			BucketAvatars:  envOr("MINIO_BUCKET_AVATARS", "avatars"),
-			BucketBrowse:   envOr("MINIO_BUCKET_BROWSE", "catalogue"),
+			Endpoint:           envOr("MINIO_ENDPOINT", "localhost:9000"),
+			PublicEndpoint:     envOr("MINIO_PUBLIC_ENDPOINT", ""),
+			AccessKey:          envOr("MINIO_ACCESS_KEY", "admin"),
+			SecretKey:          envOr("MINIO_SECRET_KEY", "changeme123"),
+			UseSSL:             envBool("MINIO_USE_SSL", false),
+			PublicUseSSL:       envBool("MINIO_PUBLIC_USE_SSL", true),
+			BucketChapters:     envOr("MINIO_BUCKET_CHAPTERS", "chapters"),
+			BucketAudio:        envOr("MINIO_BUCKET_AUDIO", "audio"),
+			BucketAvatars:      envOr("MINIO_BUCKET_AVATARS", "avatars"),
+			BucketBrowse:       envOr("MINIO_BUCKET_BROWSE", "catalogue"),
+			BucketTranslations: envOr("MINIO_BUCKET_TRANSLATIONS", "translations"),
 		},
 
 		Kokoro: Kokoro{
@@ -195,6 +211,7 @@ func Load() Config {
 			PollInterval:                envDuration("RUNNER_POLL_INTERVAL", 30*time.Second),
 			MaxConcurrentScrape:         envInt("RUNNER_MAX_CONCURRENT_SCRAPE", 1),
 			MaxConcurrentAudio:          envInt("RUNNER_MAX_CONCURRENT_AUDIO", 1),
+			MaxConcurrentTranslation:    envInt("RUNNER_MAX_CONCURRENT_TRANSLATION", 1),
 			WorkerID:                    envOr("RUNNER_WORKER_ID", workerID),
 			Workers:                     envInt("RUNNER_WORKERS", 0), // 0 → runtime.NumCPU()
 			Timeout:                     envDuration("RUNNER_TIMEOUT", 90*time.Second),

backend/internal/domain/domain.go

@@ -149,3 +149,23 @@ type AudioResult struct {
 	ObjectKey    string `json:"object_key,omitempty"`
 	ErrorMessage string `json:"error_message,omitempty"`
 }
+
+// TranslationTask represents a machine-translation job stored in PocketBase.
+type TranslationTask struct {
+	ID           string     `json:"id"`
+	CacheKey     string     `json:"cache_key"` // "{slug}/{chapter}/{lang}"
+	Slug         string     `json:"slug"`
+	Chapter      int        `json:"chapter"`
+	Lang         string     `json:"lang"`
+	WorkerID     string     `json:"worker_id,omitempty"`
+	Status       TaskStatus `json:"status"`
+	ErrorMessage string     `json:"error_message,omitempty"`
+	Started      time.Time  `json:"started"`
+	Finished     time.Time  `json:"finished,omitempty"`
+}
+
+// TranslationResult is the outcome reported by the runner after finishing a TranslationTask.
+type TranslationResult struct {
+	ObjectKey    string `json:"object_key,omitempty"`
+	ErrorMessage string `json:"error_message,omitempty"`
+}

backend/internal/libretranslate/client.go

@@ -0,0 +1,181 @@
+// Package libretranslate provides an HTTP client for a self-hosted
+// LibreTranslate instance. It handles text chunking, concurrent translation,
+// and reassembly so callers can pass arbitrarily long markdown strings.
+package libretranslate
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"strings"
+	"sync"
+	"time"
+)
+
+const (
+	// maxChunkBytes is the target maximum size of each chunk sent to
+	// LibreTranslate. LibreTranslate's default limit is 5000 characters;
+	// we stay comfortably below that.
+	maxChunkBytes = 4500
+	// concurrency is the number of simultaneous translation requests per chapter.
+	concurrency = 3
+)
+
+// Client translates text via LibreTranslate.
+// A nil Client is valid — all calls return the original text unchanged.
+type Client interface {
+	// Translate translates text from sourceLang to targetLang.
+	// text is a raw markdown string. The returned string is the translated
+	// markdown, reassembled in original paragraph order.
+	Translate(ctx context.Context, text, sourceLang, targetLang string) (string, error)
+}
+
+// New returns a Client for the given LibreTranslate URL.
+// Returns nil when url is empty, which disables translation.
+func New(url, apiKey string) Client {
+	if url == "" {
+		return nil
+	}
+	return &httpClient{
+		url:    strings.TrimRight(url, "/"),
+		apiKey: apiKey,
+		http:   &http.Client{Timeout: 60 * time.Second},
+	}
+}
+
+type httpClient struct {
+	url    string
+	apiKey string
+	http   *http.Client
+}
+
+// Translate splits text into paragraph chunks, translates them concurrently
+// (up to concurrency goroutines), and reassembles in order.
+func (c *httpClient) Translate(ctx context.Context, text, sourceLang, targetLang string) (string, error) {
+	paragraphs := splitParagraphs(text)
+	if len(paragraphs) == 0 {
+		return text, nil
+	}
+	chunks := binChunks(paragraphs, maxChunkBytes)
+
+	translated := make([]string, len(chunks))
+	errs := make([]error, len(chunks))
+
+	sem := make(chan struct{}, concurrency)
+	var wg sync.WaitGroup
+
+	for i, chunk := range chunks {
+		wg.Add(1)
+		sem <- struct{}{}
+		go func(idx int, chunkText string) {
+			defer wg.Done()
+			defer func() { <-sem }()
+			result, err := c.translateChunk(ctx, chunkText, sourceLang, targetLang)
+			translated[idx] = result
+			errs[idx] = err
+		}(i, chunk)
+	}
+	wg.Wait()
+
+	for _, err := range errs {
+		if err != nil {
+			return "", err
+		}
+	}
+
+	return strings.Join(translated, "\n\n"), nil
+}
+
+// translateChunk sends a single POST /translate request.
+func (c *httpClient) translateChunk(ctx context.Context, text, sourceLang, targetLang string) (string, error) {
+	reqBody := map[string]string{
+		"q":      text,
+		"source": sourceLang,
+		"target": targetLang,
+		"format": "html",
+	}
+	if c.apiKey != "" {
+		reqBody["api_key"] = c.apiKey
+	}
+
+	b, err := json.Marshal(reqBody)
+	if err != nil {
+		return "", fmt.Errorf("libretranslate: marshal request: %w", err)
+	}
+
+	req, err := http.NewRequestWithContext(ctx, http.MethodPost, c.url+"/translate", bytes.NewReader(b))
+	if err != nil {
+		return "", fmt.Errorf("libretranslate: build request: %w", err)
+	}
+	req.Header.Set("Content-Type", "application/json")
+
+	resp, err := c.http.Do(req)
+	if err != nil {
+		return "", fmt.Errorf("libretranslate: request: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		var errBody struct {
+			Error string `json:"error"`
+		}
+		_ = json.NewDecoder(resp.Body).Decode(&errBody)
+		return "", fmt.Errorf("libretranslate: status %d: %s", resp.StatusCode, errBody.Error)
+	}
+
+	var result struct {
+		TranslatedText string `json:"translatedText"`
+	}
+	if err := json.NewDecoder(resp.Body).Decode(&result); err != nil {
+		return "", fmt.Errorf("libretranslate: decode response: %w", err)
+	}
+	return result.TranslatedText, nil
+}
+
+// splitParagraphs splits markdown text on blank lines, preserving non-empty paragraphs.
+func splitParagraphs(text string) []string {
+	// Normalise line endings.
+	text = strings.ReplaceAll(text, "\r\n", "\n")
+	// Split on double newlines (blank lines between paragraphs).
+	parts := strings.Split(text, "\n\n")
+	var paragraphs []string
+	for _, p := range parts {
+		p = strings.TrimSpace(p)
+		if p != "" {
+			paragraphs = append(paragraphs, p)
+		}
+	}
+	return paragraphs
+}
+
+// binChunks groups paragraphs into chunks each at most maxBytes in length.
+// Each chunk is a single string with paragraphs joined by "\n\n".
+func binChunks(paragraphs []string, maxBytes int) []string {
+	var chunks []string
+	var current strings.Builder
+
+	for _, p := range paragraphs {
+		needed := len(p)
+		if current.Len() > 0 {
+			needed += 2 // for the "\n\n" separator
+		}
+
+		if current.Len()+needed > maxBytes && current.Len() > 0 {
+			// Flush current chunk.
+			chunks = append(chunks, current.String())
+			current.Reset()
+		}
+
+		if current.Len() > 0 {
+			current.WriteString("\n\n")
+		}
+		current.WriteString(p)
+	}
+
+	if current.Len() > 0 {
+		chunks = append(chunks, current.String())
+	}
+	return chunks
+}

backend/internal/novelfire/scraper.go

@@ -178,12 +178,26 @@ func (s *Scraper) ScrapeMetadata(ctx context.Context, bookURL string) (domain.Bo
 		}
 	}
 
-	status := htmlutil.ExtractFirst(root, scraper.Selector{Tag: "span", Class: "status"})
+	// Status: novelfire renders <strong class="ongoing">Ongoing</strong> (or
+	// "completed", "hiatus") inside the .header-stats block. We take the text
+	// content and lowercase it so the index value is always canonical lowercase.
+	var status string
+	for _, cls := range []string{"ongoing", "completed", "hiatus"} {
+		if v := htmlutil.ExtractFirst(root, scraper.Selector{Tag: "strong", Class: cls}); v != "" {
+			status = strings.ToLower(strings.TrimSpace(v))
+			break
+		}
+	}
 
-	genresNode := htmlutil.FindFirst(root, scraper.Selector{Tag: "div", Class: "genres"})
+	// Genres: novelfire renders <div class="categories"><ul><li><a class="property-item">Genre</a>
+	// Each <a class="property-item"> is one genre tag. Lowercase for index consistency.
 	var genres []string
-	if genresNode != nil {
-		genres = htmlutil.ExtractAll(genresNode, scraper.Selector{Tag: "a", Multiple: true})
+	if categoriesNode := htmlutil.FindFirst(root, scraper.Selector{Tag: "div", Class: "categories"}); categoriesNode != nil {
+		for _, v := range htmlutil.ExtractAll(categoriesNode, scraper.Selector{Tag: "a", Class: "property-item", Multiple: true}) {
+			if v != "" {
+				genres = append(genres, strings.ToLower(strings.TrimSpace(v)))
+			}
+		}
 	}
 
 	summary := htmlutil.ExtractFirst(root, scraper.Selector{Tag: "div", Class: "summary"})

backend/internal/novelfire/scraper_test.go

@@ -2,6 +2,7 @@ package novelfire
 
 import (
 	"context"
+	"log/slog"
 	"testing"
 )
 
@@ -100,6 +101,56 @@ func TestRetryGet_EventualSuccess(t *testing.T) {
 	}
 }
 
+// TestParseMetadataSelectors verifies that the status and genres selectors
+// match the current novelfire.net HTML structure.
+func TestParseMetadataSelectors(t *testing.T) {
+	// Minimal HTML reproducing the relevant novelfire.net book page structure.
+	const html = `<!DOCTYPE html>
+<html><body>
+<h1 class="novel-title">Shadow Slave</h1>
+<span class="author">Guiltythree</span>
+<figure class="cover"><img src="https://cdn.example.com/cover.jpg"></figure>
+<div class="header-stats">
+  <span><strong>123</strong><small>Chapters</small></span>
+  <span> <strong class="ongoing">Ongoing</strong> <small>Status</small></span>
+</div>
+<div class="categories">
+  <h4>Genres</h4>
+  <ul>
+    <li><a href="/genre-fantasy/..." class="property-item">Fantasy</a></li>
+    <li><a href="/genre-action/..." class="property-item">Action</a></li>
+    <li><a href="/genre-adventure/..." class="property-item">Adventure</a></li>
+  </ul>
+</div>
+<span class="chapter-count">123 Chapters</span>
+</body></html>`
+
+	stub := newStubClient()
+	stub.setFn("https://novelfire.net/book/shadow-slave", func() (string, error) {
+		return html, nil
+	})
+
+	s := &Scraper{client: stub, log: slog.Default()}
+	meta, err := s.ScrapeMetadata(t.Context(), "https://novelfire.net/book/shadow-slave")
+	if err != nil {
+		t.Fatalf("ScrapeMetadata: %v", err)
+	}
+
+	if meta.Status != "ongoing" {
+		t.Errorf("status = %q, want %q", meta.Status, "ongoing")
+	}
+
+	wantGenres := []string{"fantasy", "action", "adventure"}
+	if len(meta.Genres) != len(wantGenres) {
+		t.Fatalf("genres = %v, want %v", meta.Genres, wantGenres)
+	}
+	for i, g := range meta.Genres {
+		if g != wantGenres[i] {
+			t.Errorf("genres[%d] = %q, want %q", i, g, wantGenres[i])
+		}
+	}
+}
+
 // ── minimal stub client for tests ─────────────────────────────────────────────
 
 type stubClient struct {

backend/internal/runner/runner.go

@@ -29,6 +29,7 @@ import (
 	"github.com/libnovel/backend/internal/bookstore"
 	"github.com/libnovel/backend/internal/domain"
 	"github.com/libnovel/backend/internal/kokoro"
+	"github.com/libnovel/backend/internal/libretranslate"
 	"github.com/libnovel/backend/internal/meili"
 	"github.com/libnovel/backend/internal/orchestrator"
 	"github.com/libnovel/backend/internal/pockettts"
@@ -48,6 +49,8 @@ type Config struct {
 	MaxConcurrentScrape int
 	// MaxConcurrentAudio limits simultaneous audio-generation goroutines.
 	MaxConcurrentAudio int
+	// MaxConcurrentTranslation limits simultaneous translation goroutines.
+	MaxConcurrentTranslation int
 	// OrchestratorWorkers is the chapter-scraping parallelism inside each book run.
 	OrchestratorWorkers int
 	// HeartbeatInterval is how often active tasks PATCH their heartbeat_at
@@ -95,6 +98,8 @@ type Dependencies struct {
 	BookReader bookstore.BookReader
 	// AudioStore persists generated audio and checks key existence.
 	AudioStore bookstore.AudioStore
+	// TranslationStore persists translated markdown and checks key existence.
+	TranslationStore bookstore.TranslationStore
 	// CoverStore stores book cover images in MinIO.
 	CoverStore bookstore.CoverStore
 	// SearchIndex indexes books in Meilisearch after scraping.
@@ -107,6 +112,9 @@ type Dependencies struct {
 	// PocketTTS is the pocket-tts client (CPU, kyutai voices: alba, marius, etc.).
 	// If nil, pocket-tts voice tasks will fail with a clear error.
 	PocketTTS pockettts.Client
+	// LibreTranslate is the machine translation client.
+	// If nil, translation tasks will fail with a clear error.
+	LibreTranslate libretranslate.Client
 	// Log is the structured logger.
 	Log *slog.Logger
 }
@@ -137,6 +145,9 @@ func New(cfg Config, deps Dependencies) *Runner {
 	if cfg.MaxConcurrentAudio <= 0 {
 		cfg.MaxConcurrentAudio = 1
 	}
+	if cfg.MaxConcurrentTranslation <= 0 {
+		cfg.MaxConcurrentTranslation = 1
+	}
 	if cfg.WorkerID == "" {
 		cfg.WorkerID = "runner"
 	}
@@ -175,6 +186,7 @@ func (r *Runner) Run(ctx context.Context) error {
 		"mode", r.mode(),
 		"max_scrape", r.cfg.MaxConcurrentScrape,
 		"max_audio", r.cfg.MaxConcurrentAudio,
+		"max_translation", r.cfg.MaxConcurrentTranslation,
 		"catalogue_refresh_interval", r.cfg.CatalogueRefreshInterval,
 		"metrics_addr", r.cfg.MetricsAddr,
 	)
@@ -208,6 +220,7 @@ func (r *Runner) mode() string {
 func (r *Runner) runPoll(ctx context.Context) error {
 	scrapeSem := make(chan struct{}, r.cfg.MaxConcurrentScrape)
 	audioSem := make(chan struct{}, r.cfg.MaxConcurrentAudio)
+	translationSem := make(chan struct{}, r.cfg.MaxConcurrentTranslation)
 	var wg sync.WaitGroup
 
 	tick := time.NewTicker(r.cfg.PollInterval)
@@ -227,7 +240,7 @@ func (r *Runner) runPoll(ctx context.Context) error {
 
 	// Run one poll immediately on startup, then on each tick.
 	for {
-		r.poll(ctx, scrapeSem, audioSem, &wg)
+		r.poll(ctx, scrapeSem, audioSem, translationSem, &wg)
 
 		select {
 		case <-ctx.Done():
@@ -252,7 +265,7 @@ func (r *Runner) runPoll(ctx context.Context) error {
 }
 
 // poll claims all available pending tasks and dispatches them to goroutines.
-func (r *Runner) poll(ctx context.Context, scrapeSem, audioSem chan struct{}, wg *sync.WaitGroup) {
+func (r *Runner) poll(ctx context.Context, scrapeSem, audioSem, translationSem chan struct{}, wg *sync.WaitGroup) {
 	// ── Heartbeat file ────────────────────────────────────────────────────
 	// Touch /tmp/runner.alive so the Docker health check can confirm the
 	// runner is actively polling. Failure is non-fatal — just log it.
@@ -335,6 +348,39 @@ audioLoop:
 			r.runAudioTask(ctx, t)
 		}(task)
 	}
+
+	// ── Translation tasks ─────────────────────────────────────────────────
+translationLoop:
+	for {
+		if ctx.Err() != nil {
+			return
+		}
+		select {
+		case translationSem <- struct{}{}:
+			// Slot acquired — proceed to claim a task.
+		default:
+			// All slots busy; leave remaining pending tasks for next tick.
+			break translationLoop
+		}
+		task, ok, err := r.deps.Consumer.ClaimNextTranslationTask(ctx, r.cfg.WorkerID)
+		if err != nil {
+			<-translationSem
+			r.deps.Log.Error("runner: ClaimNextTranslationTask failed", "err", err)
+			break
+		}
+		if !ok {
+			<-translationSem
+			break
+		}
+		r.tasksRunning.Add(1)
+		wg.Add(1)
+		go func(t domain.TranslationTask) {
+			defer wg.Done()
+			defer func() { <-translationSem }()
+			defer r.tasksRunning.Add(-1)
+			r.runTranslationTask(ctx, t)
+		}(task)
+	}
 }
 
 // newOrchestrator builds an orchestrator with the Meilisearch post-hook wired in.

backend/internal/runner/runner_test.go

@@ -48,6 +48,10 @@ func (s *stubConsumer) ClaimNextAudioTask(_ context.Context, _ string) (domain.A
 	return t, true, nil
 }
 
+func (s *stubConsumer) ClaimNextTranslationTask(_ context.Context, _ string) (domain.TranslationTask, bool, error) {
+	return domain.TranslationTask{}, false, nil
+}
+
 func (s *stubConsumer) FinishScrapeTask(_ context.Context, id string, _ domain.ScrapeResult) error {
 	s.finished = append(s.finished, id)
 	return nil
@@ -58,6 +62,11 @@ func (s *stubConsumer) FinishAudioTask(_ context.Context, id string, _ domain.Au
 	return nil
 }
 
+func (s *stubConsumer) FinishTranslationTask(_ context.Context, id string, _ domain.TranslationResult) error {
+	s.finished = append(s.finished, id)
+	return nil
+}
+
 func (s *stubConsumer) FailTask(_ context.Context, id, _ string) error {
 	s.failCalled = append(s.failCalled, id)
 	return nil

backend/internal/runner/translation.go

@@ -0,0 +1,97 @@
+package runner
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	"go.opentelemetry.io/otel"
+	"go.opentelemetry.io/otel/attribute"
+	"go.opentelemetry.io/otel/codes"
+
+	"github.com/libnovel/backend/internal/domain"
+)
+
+// runTranslationTask executes one machine-translation task end-to-end and
+// reports the result back to PocketBase.
+func (r *Runner) runTranslationTask(ctx context.Context, task domain.TranslationTask) {
+	ctx, span := otel.Tracer("runner").Start(ctx, "runner.translation_task")
+	defer span.End()
+	span.SetAttributes(
+		attribute.String("task.id", task.ID),
+		attribute.String("book.slug", task.Slug),
+		attribute.Int("chapter.number", task.Chapter),
+		attribute.String("translation.lang", task.Lang),
+	)
+
+	log := r.deps.Log.With("task_id", task.ID, "slug", task.Slug, "chapter", task.Chapter, "lang", task.Lang)
+	log.Info("runner: translation task starting")
+
+	// Heartbeat goroutine — keeps the task alive while translation runs.
+	hbCtx, hbCancel := context.WithCancel(ctx)
+	defer hbCancel()
+	go func() {
+		tick := time.NewTicker(r.cfg.HeartbeatInterval)
+		defer tick.Stop()
+		for {
+			select {
+			case <-hbCtx.Done():
+				return
+			case <-tick.C:
+				if err := r.deps.Consumer.HeartbeatTask(ctx, task.ID); err != nil {
+					log.Warn("runner: heartbeat failed", "err", err)
+				}
+			}
+		}
+	}()
+
+	fail := func(msg string) {
+		log.Error("runner: translation task failed", "reason", msg)
+		r.tasksFailed.Add(1)
+		span.SetStatus(codes.Error, msg)
+		result := domain.TranslationResult{ErrorMessage: msg}
+		if err := r.deps.Consumer.FinishTranslationTask(ctx, task.ID, result); err != nil {
+			log.Error("runner: FinishTranslationTask failed", "err", err)
+		}
+	}
+
+	// Guard: LibreTranslate must be configured.
+	if r.deps.LibreTranslate == nil {
+		fail("libretranslate client not configured (LIBRETRANSLATE_URL is empty)")
+		return
+	}
+
+	// 1. Read raw markdown chapter.
+	raw, err := r.deps.BookReader.ReadChapter(ctx, task.Slug, task.Chapter)
+	if err != nil {
+		fail(fmt.Sprintf("read chapter: %v", err))
+		return
+	}
+	if raw == "" {
+		fail("chapter text is empty")
+		return
+	}
+
+	// 2. Translate (chunked, concurrent).
+	translated, err := r.deps.LibreTranslate.Translate(ctx, raw, "en", task.Lang)
+	if err != nil {
+		fail(fmt.Sprintf("translate: %v", err))
+		return
+	}
+
+	// 3. Store translated markdown in MinIO.
+	key := r.deps.TranslationStore.TranslationObjectKey(task.Lang, task.Slug, task.Chapter)
+	if err := r.deps.TranslationStore.PutTranslation(ctx, key, []byte(translated)); err != nil {
+		fail(fmt.Sprintf("put translation: %v", err))
+		return
+	}
+
+	// 4. Report success.
+	r.tasksCompleted.Add(1)
+	span.SetStatus(codes.Ok, "")
+	result := domain.TranslationResult{ObjectKey: key}
+	if err := r.deps.Consumer.FinishTranslationTask(ctx, task.ID, result); err != nil {
+		log.Error("runner: FinishTranslationTask failed", "err", err)
+	}
+	log.Info("runner: translation task finished", "key", key)
+}

backend/internal/storage/minio.go

@@ -17,12 +17,13 @@ import (
 
 // minioClient wraps the official minio-go client with bucket names.
 type minioClient struct {
-	client         *minio.Client // internal — all read/write operations
-	pubClient      *minio.Client // presign-only — initialised against the public endpoint
-	bucketChapters string
-	bucketAudio    string
-	bucketAvatars  string
-	bucketBrowse   string
+	client             *minio.Client // internal — all read/write operations
+	pubClient          *minio.Client // presign-only — initialised against the public endpoint
+	bucketChapters     string
+	bucketAudio        string
+	bucketAvatars      string
+	bucketBrowse       string
+	bucketTranslations string
 }
 
 func newMinioClient(cfg config.MinIO) (*minioClient, error) {
@@ -74,18 +75,19 @@ func newMinioClient(cfg config.MinIO) (*minioClient, error) {
 	}
 
 	return &minioClient{
-		client:         internal,
-		pubClient:      pub,
-		bucketChapters: cfg.BucketChapters,
-		bucketAudio:    cfg.BucketAudio,
-		bucketAvatars:  cfg.BucketAvatars,
-		bucketBrowse:   cfg.BucketBrowse,
+		client:             internal,
+		pubClient:          pub,
+		bucketChapters:     cfg.BucketChapters,
+		bucketAudio:        cfg.BucketAudio,
+		bucketAvatars:      cfg.BucketAvatars,
+		bucketBrowse:       cfg.BucketBrowse,
+		bucketTranslations: cfg.BucketTranslations,
 	}, nil
 }
 
 // ensureBuckets creates all required buckets if they don't already exist.
 func (m *minioClient) ensureBuckets(ctx context.Context) error {
-	for _, bucket := range []string{m.bucketChapters, m.bucketAudio, m.bucketAvatars, m.bucketBrowse} {
+	for _, bucket := range []string{m.bucketChapters, m.bucketAudio, m.bucketAvatars, m.bucketBrowse, m.bucketTranslations} {
 		exists, err := m.client.BucketExists(ctx, bucket)
 		if err != nil {
 			return fmt.Errorf("minio: check bucket %q: %w", bucket, err)
@@ -125,6 +127,12 @@ func CoverObjectKey(slug string) string {
 	return fmt.Sprintf("covers/%s.jpg", slug)
 }
 
+// TranslationObjectKey returns the MinIO object key for a translated chapter.
+// Format: {lang}/{slug}/{n:06d}.md
+func TranslationObjectKey(lang, slug string, n int) string {
+	return fmt.Sprintf("%s/%s/%06d.md", lang, slug, n)
+}
+
 // chapterNumberFromKey extracts the chapter number from a MinIO object key.
 // e.g. "my-book/chapter-000042.md" → 42
 func chapterNumberFromKey(key string) int {

backend/internal/storage/store.go

@@ -51,6 +51,7 @@ var _ bookstore.AudioStore = (*Store)(nil)
 var _ bookstore.PresignStore = (*Store)(nil)
 var _ bookstore.ProgressStore = (*Store)(nil)
 var _ bookstore.CoverStore = (*Store)(nil)
+var _ bookstore.TranslationStore = (*Store)(nil)
 var _ taskqueue.Producer = (*Store)(nil)
 var _ taskqueue.Consumer = (*Store)(nil)
 var _ taskqueue.Reader = (*Store)(nil)
@@ -535,13 +536,36 @@ func (s *Store) CreateAudioTask(ctx context.Context, slug string, chapter int, v
 	return rec.ID, nil
 }
 
+func (s *Store) CreateTranslationTask(ctx context.Context, slug string, chapter int, lang string) (string, error) {
+	cacheKey := fmt.Sprintf("%s/%d/%s", slug, chapter, lang)
+	payload := map[string]any{
+		"cache_key": cacheKey,
+		"slug":      slug,
+		"chapter":   chapter,
+		"lang":      lang,
+		"status":    string(domain.TaskStatusPending),
+		"started":   time.Now().UTC().Format(time.RFC3339),
+	}
+	var rec struct {
+		ID string `json:"id"`
+	}
+	if err := s.pb.post(ctx, "/api/collections/translation_jobs/records", payload, &rec); err != nil {
+		return "", err
+	}
+	return rec.ID, nil
+}
+
 func (s *Store) CancelTask(ctx context.Context, id string) error {
-	// Try scraping_tasks first, then audio_jobs.
+	// Try scraping_tasks first, then audio_jobs, then translation_jobs.
 	if err := s.pb.patch(ctx, fmt.Sprintf("/api/collections/scraping_tasks/records/%s", id),
 		map[string]string{"status": string(domain.TaskStatusCancelled)}); err == nil {
 		return nil
 	}
-	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/audio_jobs/records/%s", id),
+	if err := s.pb.patch(ctx, fmt.Sprintf("/api/collections/audio_jobs/records/%s", id),
+		map[string]string{"status": string(domain.TaskStatusCancelled)}); err == nil {
+		return nil
+	}
+	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/translation_jobs/records/%s", id),
 		map[string]string{"status": string(domain.TaskStatusCancelled)})
 }
 
@@ -571,6 +595,18 @@ func (s *Store) ClaimNextAudioTask(ctx context.Context, workerID string) (domain
 	return task, err == nil, err
 }
 
+func (s *Store) ClaimNextTranslationTask(ctx context.Context, workerID string) (domain.TranslationTask, bool, error) {
+	raw, err := s.pb.claimRecord(ctx, "translation_jobs", workerID, nil)
+	if err != nil {
+		return domain.TranslationTask{}, false, err
+	}
+	if raw == nil {
+		return domain.TranslationTask{}, false, nil
+	}
+	task, err := parseTranslationTask(raw)
+	return task, err == nil, err
+}
+
 func (s *Store) FinishScrapeTask(ctx context.Context, id string, result domain.ScrapeResult) error {
 	status := string(domain.TaskStatusDone)
 	if result.ErrorMessage != "" {
@@ -599,6 +635,18 @@ func (s *Store) FinishAudioTask(ctx context.Context, id string, result domain.Au
 	})
 }
 
+func (s *Store) FinishTranslationTask(ctx context.Context, id string, result domain.TranslationResult) error {
+	status := string(domain.TaskStatusDone)
+	if result.ErrorMessage != "" {
+		status = string(domain.TaskStatusFailed)
+	}
+	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/translation_jobs/records/%s", id), map[string]any{
+		"status":        status,
+		"error_message": result.ErrorMessage,
+		"finished":      time.Now().UTC().Format(time.RFC3339),
+	})
+}
+
 func (s *Store) FailTask(ctx context.Context, id, errMsg string) error {
 	payload := map[string]any{
 		"status":        string(domain.TaskStatusFailed),
@@ -608,11 +656,14 @@ func (s *Store) FailTask(ctx context.Context, id, errMsg string) error {
 	if err := s.pb.patch(ctx, fmt.Sprintf("/api/collections/scraping_tasks/records/%s", id), payload); err == nil {
 		return nil
 	}
-	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/audio_jobs/records/%s", id), payload)
+	if err := s.pb.patch(ctx, fmt.Sprintf("/api/collections/audio_jobs/records/%s", id), payload); err == nil {
+		return nil
+	}
+	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/translation_jobs/records/%s", id), payload)
 }
 
 // HeartbeatTask updates the heartbeat_at field on a running task.
-// Tries scraping_tasks first, then audio_jobs (same pattern as FailTask).
+// Tries scraping_tasks first, then audio_jobs, then translation_jobs.
 func (s *Store) HeartbeatTask(ctx context.Context, id string) error {
 	payload := map[string]any{
 		"heartbeat_at": time.Now().UTC().Format(time.RFC3339),
@@ -620,7 +671,10 @@ func (s *Store) HeartbeatTask(ctx context.Context, id string) error {
 	if err := s.pb.patch(ctx, fmt.Sprintf("/api/collections/scraping_tasks/records/%s", id), payload); err == nil {
 		return nil
 	}
-	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/audio_jobs/records/%s", id), payload)
+	if err := s.pb.patch(ctx, fmt.Sprintf("/api/collections/audio_jobs/records/%s", id), payload); err == nil {
+		return nil
+	}
+	return s.pb.patch(ctx, fmt.Sprintf("/api/collections/translation_jobs/records/%s", id), payload)
 }
 
 // ReapStaleTasks finds all running tasks whose heartbeat_at is either missing
@@ -638,7 +692,7 @@ func (s *Store) ReapStaleTasks(ctx context.Context, staleAfter time.Duration) (i
 	}
 
 	total := 0
-	for _, collection := range []string{"scraping_tasks", "audio_jobs"} {
+	for _, collection := range []string{"scraping_tasks", "audio_jobs", "translation_jobs"} {
 		items, err := s.pb.listAll(ctx, collection, filter, "")
 		if err != nil {
 			return total, fmt.Errorf("ReapStaleTasks list %s: %w", collection, err)
@@ -715,6 +769,31 @@ func (s *Store) GetAudioTask(ctx context.Context, cacheKey string) (domain.Audio
 	return t, err == nil, err
 }
 
+func (s *Store) ListTranslationTasks(ctx context.Context) ([]domain.TranslationTask, error) {
+	items, err := s.pb.listAll(ctx, "translation_jobs", "", "-started")
+	if err != nil {
+		return nil, err
+	}
+	tasks := make([]domain.TranslationTask, 0, len(items))
+	for _, raw := range items {
+		t, err := parseTranslationTask(raw)
+		if err == nil {
+			tasks = append(tasks, t)
+		}
+	}
+	return tasks, nil
+}
+
+func (s *Store) GetTranslationTask(ctx context.Context, cacheKey string) (domain.TranslationTask, bool, error) {
+	filter := fmt.Sprintf(`cache_key='%s'`, cacheKey)
+	items, err := s.pb.listAll(ctx, "translation_jobs", filter, "-started")
+	if err != nil || len(items) == 0 {
+		return domain.TranslationTask{}, false, err
+	}
+	t, err := parseTranslationTask(items[0])
+	return t, err == nil, err
+}
+
 // ── Parsers ───────────────────────────────────────────────────────────────────
 
 func parseScrapeTask(raw json.RawMessage) (domain.ScrapeTask, error) {
@@ -789,6 +868,38 @@ func parseAudioTask(raw json.RawMessage) (domain.AudioTask, error) {
 	}, nil
 }
 
+func parseTranslationTask(raw json.RawMessage) (domain.TranslationTask, error) {
+	var rec struct {
+		ID           string `json:"id"`
+		CacheKey     string `json:"cache_key"`
+		Slug         string `json:"slug"`
+		Chapter      int    `json:"chapter"`
+		Lang         string `json:"lang"`
+		WorkerID     string `json:"worker_id"`
+		Status       string `json:"status"`
+		ErrorMessage string `json:"error_message"`
+		Started      string `json:"started"`
+		Finished     string `json:"finished"`
+	}
+	if err := json.Unmarshal(raw, &rec); err != nil {
+		return domain.TranslationTask{}, err
+	}
+	started, _ := time.Parse(time.RFC3339, rec.Started)
+	finished, _ := time.Parse(time.RFC3339, rec.Finished)
+	return domain.TranslationTask{
+		ID:           rec.ID,
+		CacheKey:     rec.CacheKey,
+		Slug:         rec.Slug,
+		Chapter:      rec.Chapter,
+		Lang:         rec.Lang,
+		WorkerID:     rec.WorkerID,
+		Status:       domain.TaskStatus(rec.Status),
+		ErrorMessage: rec.ErrorMessage,
+		Started:      started,
+		Finished:     finished,
+	}, nil
+}
+
 // ── CoverStore ─────────────────────────────────────────────────────────────────
 
 func (s *Store) PutCover(ctx context.Context, slug string, data []byte, contentType string) error {
@@ -818,3 +929,25 @@ func (s *Store) GetCover(ctx context.Context, slug string) ([]byte, string, bool
 func (s *Store) CoverExists(ctx context.Context, slug string) bool {
 	return s.mc.coverExists(ctx, CoverObjectKey(slug))
 }
+
+// ── TranslationStore ───────────────────────────────────────────────────────────
+
+func (s *Store) TranslationObjectKey(lang, slug string, n int) string {
+	return TranslationObjectKey(lang, slug, n)
+}
+
+func (s *Store) TranslationExists(ctx context.Context, key string) bool {
+	return s.mc.objectExists(ctx, s.mc.bucketTranslations, key)
+}
+
+func (s *Store) PutTranslation(ctx context.Context, key string, data []byte) error {
+	return s.mc.putObject(ctx, s.mc.bucketTranslations, key, "text/markdown; charset=utf-8", data)
+}
+
+func (s *Store) GetTranslation(ctx context.Context, key string) (string, error) {
+	data, err := s.mc.getObject(ctx, s.mc.bucketTranslations, key)
+	if err != nil {
+		return "", fmt.Errorf("GetTranslation: %w", err)
+	}
+	return string(data), nil
+}

backend/internal/taskqueue/taskqueue.go

@@ -29,6 +29,10 @@ type Producer interface {
 	// returns the assigned PocketBase record ID.
 	CreateAudioTask(ctx context.Context, slug string, chapter int, voice string) (string, error)
 
+	// CreateTranslationTask inserts a new translation task with status=pending and
+	// returns the assigned PocketBase record ID.
+	CreateTranslationTask(ctx context.Context, slug string, chapter int, lang string) (string, error)
+
 	// CancelTask transitions a pending task to status=cancelled.
 	// Returns ErrNotFound if the task does not exist.
 	CancelTask(ctx context.Context, id string) error
@@ -46,13 +50,21 @@ type Consumer interface {
 	// Returns (zero, false, nil) when the queue is empty.
 	ClaimNextAudioTask(ctx context.Context, workerID string) (domain.AudioTask, bool, error)
 
+	// ClaimNextTranslationTask atomically finds the oldest pending translation task,
+	// sets its status=running and worker_id=workerID, and returns it.
+	// Returns (zero, false, nil) when the queue is empty.
+	ClaimNextTranslationTask(ctx context.Context, workerID string) (domain.TranslationTask, bool, error)
+
 	// FinishScrapeTask marks a running scrape task as done and records the result.
 	FinishScrapeTask(ctx context.Context, id string, result domain.ScrapeResult) error
 
 	// FinishAudioTask marks a running audio task as done and records the result.
 	FinishAudioTask(ctx context.Context, id string, result domain.AudioResult) error
 
-	// FailTask marks a task (scrape or audio) as failed with an error message.
+	// FinishTranslationTask marks a running translation task as done and records the result.
+	FinishTranslationTask(ctx context.Context, id string, result domain.TranslationResult) error
+
+	// FailTask marks a task (scrape, audio, or translation) as failed with an error message.
 	FailTask(ctx context.Context, id, errMsg string) error
 
 	// HeartbeatTask updates the heartbeat_at timestamp on a running task.
@@ -81,4 +93,11 @@ type Reader interface {
 	// GetAudioTask returns the most recent audio task for cacheKey.
 	// Returns (zero, false, nil) if not found.
 	GetAudioTask(ctx context.Context, cacheKey string) (domain.AudioTask, bool, error)
+
+	// ListTranslationTasks returns all translation tasks sorted by started descending.
+	ListTranslationTasks(ctx context.Context) ([]domain.TranslationTask, error)
+
+	// GetTranslationTask returns the most recent translation task for cacheKey.
+	// Returns (zero, false, nil) if not found.
+	GetTranslationTask(ctx context.Context, cacheKey string) (domain.TranslationTask, bool, error)
 }

backend/internal/taskqueue/taskqueue_test.go

@@ -23,6 +23,9 @@ func (s *stubStore) CreateScrapeTask(_ context.Context, _, _ string, _, _ int) (
 func (s *stubStore) CreateAudioTask(_ context.Context, _ string, _ int, _ string) (string, error) {
 	return "audio-1", nil
 }
+func (s *stubStore) CreateTranslationTask(_ context.Context, _ string, _ int, _ string) (string, error) {
+	return "translation-1", nil
+}
 func (s *stubStore) CancelTask(_ context.Context, _ string) error { return nil }
 
 func (s *stubStore) ClaimNextScrapeTask(_ context.Context, _ string) (domain.ScrapeTask, bool, error) {
@@ -31,12 +34,18 @@ func (s *stubStore) ClaimNextScrapeTask(_ context.Context, _ string) (domain.Scr
 func (s *stubStore) ClaimNextAudioTask(_ context.Context, _ string) (domain.AudioTask, bool, error) {
 	return domain.AudioTask{ID: "audio-1", Status: domain.TaskStatusRunning}, true, nil
 }
+func (s *stubStore) ClaimNextTranslationTask(_ context.Context, _ string) (domain.TranslationTask, bool, error) {
+	return domain.TranslationTask{ID: "translation-1", Status: domain.TaskStatusRunning}, true, nil
+}
 func (s *stubStore) FinishScrapeTask(_ context.Context, _ string, _ domain.ScrapeResult) error {
 	return nil
 }
 func (s *stubStore) FinishAudioTask(_ context.Context, _ string, _ domain.AudioResult) error {
 	return nil
 }
+func (s *stubStore) FinishTranslationTask(_ context.Context, _ string, _ domain.TranslationResult) error {
+	return nil
+}
 func (s *stubStore) FailTask(_ context.Context, _, _ string) error { return nil }
 
 func (s *stubStore) HeartbeatTask(_ context.Context, _ string) error { return nil }
@@ -53,6 +62,12 @@ func (s *stubStore) ListAudioTasks(_ context.Context) ([]domain.AudioTask, error
 func (s *stubStore) GetAudioTask(_ context.Context, _ string) (domain.AudioTask, bool, error) {
 	return domain.AudioTask{}, false, nil
 }
+func (s *stubStore) ListTranslationTasks(_ context.Context) ([]domain.TranslationTask, error) {
+	return nil, nil
+}
+func (s *stubStore) GetTranslationTask(_ context.Context, _ string) (domain.TranslationTask, bool, error) {
+	return domain.TranslationTask{}, false, nil
+}
 
 // Verify the stub satisfies all three interfaces at compile time.
 var _ taskqueue.Producer = (*stubStore)(nil)

caddy/errors/404.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>404 — Page Not Found</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      min-height: 100svh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      background: #09090b;
+      color: #a1a1aa;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      padding: 2rem;
+      text-align: center;
+    }
+    .code {
+      font-size: clamp(4rem, 20vw, 8rem);
+      font-weight: 800;
+      color: #27272a;
+      line-height: 1;
+      letter-spacing: -0.04em;
+    }
+    h1 { font-size: 1.25rem; font-weight: 600; color: #e4e4e7; }
+    p  { font-size: 0.9rem; max-width: 36ch; line-height: 1.6; }
+    a  {
+      margin-top: 0.5rem;
+      display: inline-block;
+      padding: 0.6rem 1.4rem;
+      border-radius: 0.5rem;
+      background: #f59e0b;
+      color: #000;
+      font-weight: 600;
+      font-size: 0.875rem;
+      text-decoration: none;
+    }
+    a:hover { background: #d97706; }
+  </style>
+</head>
+<body>
+  <div class="code">404</div>
+  <h1>Page Not Found</h1>
+  <p>The page you're looking for doesn't exist or has been moved.</p>
+  <a href="/">Go home</a>
+</body>
+</html>

docs/d2/api-routing.d2

@@ -35,11 +35,11 @@ client: Browser / iOS App {
 caddy: Caddy :443 {
   shape: rectangle
   style.fill: "#f1f5f9"
-  label: "Caddy :443\ncustom build · caddy-ratelimit\nsecurity headers · rate limiting\nstatic error pages"
+  label: "Caddy :443\ncustom build · caddy-l4 · caddy-ratelimit\nCrowdSec bouncer · security headers\nrate limiting · static error pages\nRedis TCP proxy :6380"
 }
 
 # ─── SvelteKit UI ─────────────────────────────────────────────────────────────
-# Handles: auth enforcement, session, all /api/* routes that have SK counterparts
+# All routes here pass through SvelteKit — auth is enforced server-side.
 
 sk: SvelteKit UI :3000 {
   style.fill: "#fef3c7"
@@ -53,7 +53,7 @@ sk: SvelteKit UI :3000 {
   catalogue_sk: Catalogue {
     style.fill: "#f0fdf4"
     style.stroke: "#86efac"
-    label: "GET /api/catalogue-page\nGET /api/search"
+    label: "GET /api/catalogue-page  (infinite scroll)\nGET /api/search"
   }
 
   book_sk: Book {
@@ -65,7 +65,7 @@ sk: SvelteKit UI :3000 {
   scrape_sk: Scrape (admin) {
     style.fill: "#fff7ed"
     style.stroke: "#fdba74"
-    label: "GET  /api/scrape/status\nGET  /api/scrape/tasks\nPOST /api/scrape\nPOST /api/scrape/range\nPOST /api/scrape/cancel/{id}"
+    label: "GET  /api/scrape/status\nGET  /api/scrape/tasks\nPOST /api/scrape\nPOST /api/scrape/book\nPOST /api/scrape/book/range\nPOST /api/scrape/cancel/{id}"
   }
 
   audio_sk: Audio {
@@ -74,7 +74,7 @@ sk: SvelteKit UI :3000 {
     label: "POST /api/audio/{slug}/{n}\nGET  /api/audio/status/{slug}/{n}\nGET  /api/voices"
   }
 
-  presign_sk: Presigned URLs {
+  presign_sk: Presigned URLs (public) {
     style.fill: "#f0fdf4"
     style.stroke: "#86efac"
     label: "GET /api/presign/chapter/{slug}/{n}\nGET /api/presign/audio/{slug}/{n}\nGET /api/presign/voice-sample/{voice}"
@@ -106,12 +106,12 @@ sk: SvelteKit UI :3000 {
 }
 
 # ─── Go Backend ───────────────────────────────────────────────────────────────
-# Caddy proxies these paths directly — no SvelteKit auth layer
+# Caddy proxies these paths directly — bypasses SvelteKit entirely.
 
 be: Backend API :8080 {
   style.fill: "#eef3ff"
 
-  health_be: Health {
+  health_be: Health / Version {
     style.fill: "#f0fdf4"
     style.stroke: "#86efac"
     label: "GET /health\nGET /api/version"
@@ -126,7 +126,7 @@ be: Backend API :8080 {
   catalogue_be: Catalogue {
     style.fill: "#f0fdf4"
     style.stroke: "#86efac"
-    label: "GET /api/browse\nGET /api/catalogue\nGET /api/ranking\nGET /api/cover/{domain}/{slug}"
+    label: "GET /api/catalogue  (Meilisearch)\nGET /api/browse  (legacy MinIO cache)\nGET /api/ranking\nGET /api/cover/{domain}/{slug}"
   }
 
   book_be: Book / Chapter {
@@ -138,7 +138,13 @@ be: Backend API :8080 {
   audio_be: Audio {
     style.fill: "#f0fdf4"
     style.stroke: "#86efac"
-    label: "GET /api/audio-proxy/{slug}/{n}\nGET /api/voices"
+    label: "POST /api/audio/{slug}/{n}\nGET  /api/audio/status/{slug}/{n}\nGET  /api/audio-proxy/{slug}/{n}\nGET  /api/voices"
+  }
+
+  presign_be: Presigned URLs {
+    style.fill: "#f0fdf4"
+    style.stroke: "#86efac"
+    label: "GET /api/presign/chapter/{slug}/{n}\nGET /api/presign/audio/{slug}/{n}\nGET /api/presign/voice-sample/{voice}\nGET /api/presign/avatar-upload/{userId}\nGET /api/presign/avatar/{userId}"
   }
 }
 
@@ -149,19 +155,19 @@ storage: Storage {
 
   pb: PocketBase :8090 {
     shape: cylinder
-    label: "auth · books · progress\ncomments · library\nscrape_jobs · audio_cache"
+    label: "auth · books · progress\ncomments · library\nscrape_jobs · audio_cache\nranking"
   }
   mn: MinIO :9000 {
     shape: cylinder
-    label: "chapters · audio\navatars · browse"
+    label: "chapters · audio\navatars · catalogue (browse)"
   }
   ms: Meilisearch :7700 {
     shape: cylinder
-    label: "index: books"
+    label: "index: books\nfilterable: status · genres\nsortable: rank · rating\n  total_chapters · meta_updated"
   }
   vk: Valkey :6379 {
     shape: cylinder
-    label: "presign URL cache"
+    label: "presign URL cache (TTL ~55 min)\nAsynq job queue (runner)"
   }
 }
 
@@ -169,18 +175,17 @@ storage: Storage {
 
 client -> caddy: HTTPS :443
 
-caddy -> sk: "/* (catch-all)\n→ SvelteKit handles auth"
-caddy -> be: "/health  /scrape*\n/api/browse  /api/book-preview/*\n/api/chapter-text/*  /api/chapter-markdown/*\n/api/reindex/*  /api/cover/*\n/api/audio-proxy/*  /api/catalogue  /api/ranking"
-caddy -> storage.mn: "/avatars/*\n/audio/*\n/chapters/*\n(presigned MinIO GETs)"
+caddy -> sk: "/* (catch-all)\n→ SvelteKit enforces auth"
+caddy -> be: "/health  /scrape*\n/api/browse  /api/catalogue  /api/ranking\n/api/version  /api/book-preview/*\n/api/chapter-text/*  /api/chapter-markdown/*\n/api/reindex/*  /api/cover/*\n/api/audio*  /api/voices  /api/presign/*"
+caddy -> storage.mn: "/avatars/*  /audio/*  /chapters/*\n(presigned MinIO GETs)"
 
 # ─── SvelteKit → Backend (server-side proxy) ──────────────────────────────────
 
 sk.catalogue_sk -> be.catalogue_be: internal proxy
 sk.book_sk -> be.book_be: internal proxy
 sk.audio_sk -> be.audio_be: internal proxy
-sk.presign_sk -> storage.vk: check cache
-sk.presign_sk -> storage.mn: generate presign
-sk.presign_user -> storage.mn: generate presign
+sk.presign_sk -> be.presign_be: internal proxy
+sk.presign_user -> be.presign_be: internal proxy
 
 # ─── SvelteKit → Storage (direct) ────────────────────────────────────────────
 
@@ -192,10 +197,12 @@ sk.comments_sk -> storage.pb
 
 # ─── Backend → Storage ────────────────────────────────────────────────────────
 
-be.catalogue_be -> storage.ms: full-text search
+be.catalogue_be -> storage.ms: full-text search + facets
 be.catalogue_be -> storage.pb: ranking records
 be.catalogue_be -> storage.mn: cover presign
 be.book_be -> storage.mn: chapter objects
 be.book_be -> storage.pb: book metadata
 be.audio_be -> storage.mn: audio presign
 be.audio_be -> storage.vk: presign cache
+be.presign_be -> storage.vk: check / set presign cache
+be.presign_be -> storage.mn: generate presigned URL

docs/d2/architecture.d2

@@ -5,16 +5,25 @@ direction: right
 novelfire: novelfire.net {
   shape: cloud
   style.fill: "#f0f4ff"
+  label: "novelfire.net\n(scrape source)"
 }
 
 kokoro: Kokoro-FastAPI TTS {
   shape: cloud
   style.fill: "#f0f4ff"
+  label: "Kokoro-FastAPI TTS\n(self-hosted · homelab)\nchapter audio"
+}
+
+pockettts: pocket-tts {
+  shape: cloud
+  style.fill: "#f0f4ff"
+  label: "pocket-tts\n(self-hosted · homelab)\nvoice sample MP3s"
 }
 
 letsencrypt: Let's Encrypt {
   shape: cloud
   style.fill: "#f0f4ff"
+  label: "Let's Encrypt\n(ACME TLS-ALPN-01)"
 }
 
 browser: Browser / iOS App {
@@ -30,12 +39,12 @@ init: Init containers {
 
   minio-init: minio-init {
     shape: rectangle
-    label: "minio-init\n(mc: create buckets)"
+    label: "minio-init\n(mc: create buckets\n  chapters · audio\n  avatars · catalogue)"
   }
 
   pb-init: pb-init {
     shape: rectangle
-    label: "pb-init\n(bootstrap collections)"
+    label: "pb-init\n(bootstrap PocketBase\n  collections + schema)"
   }
 }
 
@@ -46,109 +55,126 @@ storage: Storage {
 
   minio: MinIO {
     shape: cylinder
-    label: "MinIO :9000\n\nbuckets:\n  chapters\n  audio\n  avatars\n  catalogue"
+    label: "MinIO :9000\nbuckets:\n  chapters · audio\n  avatars · catalogue"
   }
 
   pocketbase: PocketBase {
     shape: cylinder
-    label: "PocketBase :8090\n\ncollections:\n  books  chapters_idx\n  audio_cache  progress\n  scrape_jobs  app_users\n  ranking"
+    label: "PocketBase :8090\ncollections:\n  books · chapters_idx\n  audio_cache · progress\n  scrape_jobs · app_users\n  ranking · library\n  comments"
   }
 
   valkey: Valkey {
     shape: cylinder
-    label: "Valkey :6379\n\n(presign URL cache\nTTL-based, shared)"
+    label: "Valkey :6379\npresign URL cache (TTL ~55 min)\nAsynq job queue (runner tasks)"
   }
 
   meilisearch: Meilisearch {
     shape: cylinder
-    label: "Meilisearch :7700\n\nindices:\n  books"
+    label: "Meilisearch :7700\nindex: books\n(filterable: status · genres\n sortable: rank · rating\n  total_chapters · meta_updated)"
   }
 }
 
-# ─── Application ──────────────────────────────────────────────────────────────
+# ─── Application — prod VPS (165.22.70.138) ───────────────────────────────────
 
-app: Application {
+app: Application — prod (165.22.70.138) {
   style.fill: "#eef3ff"
 
   caddy: caddy {
     shape: rectangle
-    label: "Caddy :443 / :80\ncustom build + caddy-ratelimit\n\nfeatures:\n  auto-HTTPS (Let's Encrypt)\n  security headers\n  rate limiting (per-IP)\n  static error pages (502/503/504)"
+    label: "Caddy :443 / :80 / :6380\ncustom build\n+ caddy-l4 (Redis TCP proxy)\n+ caddy-ratelimit\nauto-HTTPS · security headers\nrate limiting (per-IP)\nstatic error pages (404/502/503/504)\nCrowdSec bouncer"
   }
 
   backend: backend {
     shape: rectangle
-    label: "Backend API :8080\n(Go — HTTP API server)"
-  }
-
-  runner: runner {
-    shape: rectangle
-    label: "Runner :9091\n(Go — background worker\nscraping + TTS jobs\n/metrics endpoint)"
+    label: "Backend API :8080\n(Go)\nHTTP API server\nffmpeg (audio sample conv.)\nOpenTelemetry tracing\nSentry / GlitchTip errors"
   }
 
   ui: ui {
     shape: rectangle
-    label: "SvelteKit UI :3000\n(adapter-node)"
+    label: "SvelteKit UI :3000\n(adapter-node)\nSSR · session auth\nserver-side API proxy"
+  }
+
+  crowdsec: CrowdSec {
+    shape: rectangle
+    label: "CrowdSec :8080\nsecurity engine\nreads Caddy JSON logs\nbouncer integrated in Caddy"
+  }
+
+  dozzle: Dozzle agent {
+    shape: rectangle
+    label: "Dozzle agent\n127.0.0.1:7007\nlog relay → homelab dashboard"
+  }
+}
+
+# ─── Runner — homelab (192.168.0.109) ────────────────────────────────────────
+
+homelab: Runner — homelab (192.168.0.109) {
+  style.fill: "#fef9ec"
+
+  runner: runner {
+    shape: rectangle
+    label: "Runner :9091\n(Go background worker)\nscrape pipeline\nTTS audio job queue\nPrometheus /metrics\ncron: catalogue refresh\nAsynq worker → Valkey"
   }
 }
 
 # ─── Ops ──────────────────────────────────────────────────────────────────────
 
 ops: Ops {
-  style.fill: "#fef9ec"
+  style.fill: "#f5f5f5"
 
   watchtower: Watchtower {
     shape: rectangle
-    label: "Watchtower\n(containrrr/watchtower)\n\npolls every 5 min\nautopulls + redeploys:\n  backend · runner · ui"
+    label: "Watchtower\n(containrrr/watchtower)\npolls Docker Hub every 5 min\nautopulls + redeploys:\n  backend · ui\n(runner: label-disabled on prod)"
   }
 }
 
-# ─── Init → Storage deps ──────────────────────────────────────────────────────
+# ─── CI / CD ──────────────────────────────────────────────────────────────────
+
+cicd: CI / CD {
+  style.fill: "#f0f9ff"
+
+  gitea: Gitea Actions {
+    shape: rectangle
+    label: "Gitea Actions\n(homelab runner)\ntag v* trigger:\n  test-backend\n  check-ui (type-check + build)\n  docker-backend\n  docker-runner\n  docker-ui (bakes releases.json)\n  docker-caddy\n  → push Docker Hub\n  → Gitea Release"
+  }
+}
+
+# ─── Init → Storage ───────────────────────────────────────────────────────────
 
 init.minio-init -> storage.minio: create buckets {style.stroke-dash: 4}
 init.pb-init -> storage.pocketbase: bootstrap schema {style.stroke-dash: 4}
 
-# ─── App → Storage ────────────────────────────────────────────────────────────
-
-app.backend -> storage.minio: blobs (chapters, audio,\navatars, browse)
-app.backend -> storage.pocketbase: structured records\n(books, progress, jobs…)
-app.backend -> storage.valkey: cache presigned URLs\n(SET/GET with TTL)
-
-app.runner -> storage.minio: write chapter markdown\n& audio MP3s
-app.runner -> storage.pocketbase: read/update scrape jobs\nwrite book records
-app.runner -> storage.meilisearch: index books on\nscrape completion
-
-app.ui -> storage.valkey: read presigned URL cache
-app.ui -> storage.pocketbase: auth, progress,\ncomments, settings
-
 # ─── App internal ─────────────────────────────────────────────────────────────
 
-app.ui -> app.backend: REST API calls (server-side)\n/api/catalogue /api/book-preview\n/api/chapter-text /api/audio etc.
+app.caddy -> app.ui: "/* (catch-all)\nSvelteKit — auth enforced"
+app.caddy -> app.backend: "/health  /scrape*\n/api/browse  /api/catalogue\n/api/ranking  /api/version\n/api/book-preview/*\n/api/chapter-text/*\n/api/chapter-markdown/*\n/api/reindex/*  /api/cover/*\n/api/audio-proxy/*  /api/voices\n/api/audio*  /api/presign/*"
+app.caddy -> storage.minio: "/avatars/*  /audio/*\n/chapters/*\n(presigned GETs)"
+app.caddy -> app.crowdsec: bouncer check (15 s poll)
+app.caddy -> letsencrypt: ACME cert (TLS-ALPN-01)
 
-# ─── Caddy routing ────────────────────────────────────────────────────────────
-# Routes sent directly to backend (no SvelteKit counterpart):
-#   /health  /scrape*
-#   /api/browse  /api/book-preview/*  /api/chapter-text/*
-#   /api/reindex/*  /api/cover/*  /api/audio-proxy/*
-# Routes sent to MinIO:
-#   /avatars/*
-# Everything else → SvelteKit UI (including /api/scrape/*, /api/chapter-text-preview/*)
+app.ui -> app.backend: "internal REST proxy\n(server-side only)"
+app.ui -> storage.pocketbase: "auth · sessions\nprogress · library\ncomments"
 
-app.caddy -> app.ui: "/* (catch-all)\n/api/scrape/*\n/api/chapter-text-preview/*\n→ SvelteKit (auth enforced)"
-app.caddy -> app.backend: "/health  /scrape*\n/api/browse  /api/book-preview/*\n/api/chapter-text/*\n/api/reindex/*  /api/cover/*\n/api/audio-proxy/*"
-app.caddy -> storage.minio: "/avatars/*\n/audio/*\n/chapters/*\n(presigned MinIO GETs)"
+app.backend -> storage.minio: "chapter objs · audio MP3s\navatars · browse cache"
+app.backend -> storage.pocketbase: "books · scrape_jobs\naudio_cache · ranking"
+app.backend -> storage.valkey: "presign URL cache\n(SET/GET TTL ~55 min)"
+app.backend -> storage.meilisearch: "catalogue search\nfacets: genres · status"
+app.backend -> pockettts: "voice sample gen.\n(on-demand · ffmpeg conv.)"
 
-# ─── External → App ───────────────────────────────────────────────────────────
+# ─── Runner → deps ────────────────────────────────────────────────────────────
 
-app.runner -> novelfire: scrape\n(HTTP GET)
-app.runner -> kokoro: TTS generation\n(HTTP POST)
-app.caddy -> letsencrypt: ACME certificate\n(TLS-ALPN-01)
+homelab.runner -> novelfire: "HTTP scrape\nHTML → Markdown"
+homelab.runner -> kokoro: "TTS generation\ntext → MP3"
+homelab.runner -> storage.minio: "write chapters\n& audio MP3s"
+homelab.runner -> storage.pocketbase: "read/update scrape_jobs\nwrite book records"
+homelab.runner -> storage.meilisearch: "index books\n(on scrape completion)"
+homelab.runner -> storage.valkey: "Asynq job queue\n(task consume)"
 
-# ─── Ops → Docker socket ──────────────────────────────────────────────────────
-
-ops.watchtower -> app.backend: watch (label-enabled)
-ops.watchtower -> app.runner: watch (label-enabled)
-ops.watchtower -> app.ui: watch (label-enabled)
-
-# ─── Browser ──────────────────────────────────────────────────────────────────
+# ─── Client ───────────────────────────────────────────────────────────────────
 
 browser -> app.caddy: HTTPS :443\n(single entry point)
+
+# ─── Ops / CI ─────────────────────────────────────────────────────────────────
+
+ops.watchtower -> app.backend: watch (label-enabled)
+ops.watchtower -> app.ui: watch (label-enabled)
+cicd.gitea -> ops.watchtower: push to Docker Hub\n→ Watchtower detects new tag

ui/.gitignore

@@ -21,3 +21,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Generated by CI at build time — do not commit
+/static/releases.json

ui/messages/en.json

@@ -0,0 +1,384 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+
+  "nav_library": "Library",
+  "nav_catalogue": "Catalogue",
+  "nav_feedback": "Feedback",
+  "nav_admin": "Admin",
+  "nav_profile": "Profile",
+  "nav_sign_in": "Sign in",
+  "nav_sign_out": "Sign out",
+  "nav_toggle_menu": "Toggle menu",
+  "nav_admin_panel": "Admin panel",
+
+  "footer_library": "Library",
+  "footer_catalogue": "Catalogue",
+  "footer_feedback": "Feedback",
+  "footer_disclaimer": "Disclaimer",
+  "footer_privacy": "Privacy",
+  "footer_dmca": "DMCA",
+  "footer_copyright": "© {year} libnovel",
+  "footer_dev": "dev",
+
+  "home_title": "libnovel",
+  "home_stat_books": "Books",
+  "home_stat_chapters": "Chapters",
+  "home_stat_in_progress": "In progress",
+  "home_continue_reading": "Continue Reading",
+  "home_view_all": "View all",
+  "home_recently_updated": "Recently Updated",
+  "home_from_following": "From People You Follow",
+  "home_empty_title": "Your library is empty",
+  "home_empty_body": "Discover novels and scrape them into your library.",
+  "home_discover_novels": "Discover Novels",
+  "home_via_reader": "via {username}",
+  "home_chapter_badge": "ch.{n}",
+
+  "player_generating": "Generating… {percent}%",
+  "player_loading": "Loading…",
+  "player_chapters": "Chapters",
+  "player_chapter_n": "Chapter {n}",
+  "player_toggle_chapter_list": "Toggle chapter list",
+  "player_chapter_list_label": "Chapter list",
+  "player_close_chapter_list": "Close chapter list",
+  "player_rewind_15": "Rewind 15 seconds",
+  "player_skip_30": "Skip 30 seconds",
+  "player_back_15": "Back 15s",
+  "player_forward_30": "Forward 30s",
+  "player_play": "Play",
+  "player_pause": "Pause",
+  "player_speed_label": "Playback speed {speed}x",
+  "player_change_speed": "Change playback speed",
+  "player_auto_next_on": "Auto-next on",
+  "player_auto_next_off": "Auto-next off",
+  "player_auto_next_ready": "Auto-next on — Ch.{n} ready",
+  "player_auto_next_preparing": "Auto-next on — preparing Ch.{n}…",
+  "player_auto_next_aria": "Auto-next {state}",
+  "player_go_to_chapter": "Go to chapter",
+  "player_close": "Close player",
+
+  "login_page_title": "Sign in — libnovel",
+  "login_heading": "Sign in to libnovel",
+  "login_subheading": "Choose a provider to continue",
+  "login_continue_google": "Continue with Google",
+  "login_continue_github": "Continue with GitHub",
+  "login_terms_notice": "By signing in you agree to our terms of service.",
+  "login_error_oauth_state": "Sign-in was cancelled or expired. Please try again.",
+  "login_error_oauth_failed": "Could not connect to the provider. Please try again.",
+  "login_error_oauth_no_email": "Your account has no verified email address. Please add one and retry.",
+
+  "books_page_title": "Library — libnovel",
+  "books_heading": "Your Library",
+  "books_empty_title": "No books yet",
+  "books_empty_body": "Add books to your library by visiting a book page.",
+  "books_browse_catalogue": "Browse Catalogue",
+  "books_chapter_count": "{n} chapters",
+  "books_last_read": "Last read: Ch.{n}",
+  "books_reading_progress": "Ch.{current} / {total}",
+  "books_remove": "Remove",
+
+  "catalogue_page_title": "Catalogue — libnovel",
+  "catalogue_heading": "Catalogue",
+  "catalogue_search_placeholder": "Search novels…",
+  "catalogue_filter_genre": "Genre",
+  "catalogue_filter_status": "Status",
+  "catalogue_filter_sort": "Sort",
+  "catalogue_sort_popular": "Popular",
+  "catalogue_sort_new": "New",
+  "catalogue_sort_top_rated": "Top Rated",
+  "catalogue_sort_rank": "Rank",
+  "catalogue_status_all": "All",
+  "catalogue_status_ongoing": "Ongoing",
+  "catalogue_status_completed": "Completed",
+  "catalogue_genre_all": "All genres",
+  "catalogue_clear_filters": "Clear",
+  "catalogue_reset": "Reset",
+  "catalogue_no_results": "No novels found.",
+  "catalogue_loading": "Loading…",
+  "catalogue_load_more": "Load more",
+  "catalogue_results_count": "{n} results",
+
+  "book_detail_page_title": "{title} — libnovel",
+  "book_detail_add_to_library": "Add to Library",
+  "book_detail_remove_from_library": "Remove from Library",
+  "book_detail_read_now": "Read Now",
+  "book_detail_continue_reading": "Continue Reading",
+  "book_detail_start_reading": "Start Reading",
+  "book_detail_chapters": "{n} Chapters",
+  "book_detail_status": "Status",
+  "book_detail_author": "Author",
+  "book_detail_genres": "Genres",
+  "book_detail_description": "Description",
+  "book_detail_source": "Source",
+  "book_detail_rescrape": "Re-scrape",
+  "book_detail_scraping": "Scraping…",
+  "book_detail_in_library": "In Library",
+
+  "chapters_page_title": "Chapters — {title}",
+  "chapters_heading": "Chapters",
+  "chapters_back_to_book": "Back to book",
+  "chapters_reading_now": "Reading",
+  "chapters_empty": "No chapters scraped yet.",
+
+  "reader_page_title": "{title} — Ch.{n} — libnovel",
+  "reader_play_narration": "Play narration",
+  "reader_generating_audio": "Generating audio…",
+  "reader_audio_error": "Audio generation failed.",
+  "reader_prev_chapter": "Previous chapter",
+  "reader_next_chapter": "Next chapter",
+  "reader_back_to_chapters": "Back to chapters",
+  "reader_chapter_n": "Chapter {n}",
+  "reader_change_voice": "Change voice",
+  "reader_voice_panel_title": "Select voice",
+  "reader_voice_kokoro": "Kokoro voices",
+  "reader_voice_pocket": "Pocket-TTS voices",
+  "reader_voice_play_sample": "Play sample",
+  "reader_voice_stop_sample": "Stop sample",
+  "reader_voice_selected": "Selected",
+  "reader_close_voice_panel": "Close voice panel",
+  "reader_auto_next": "Auto-next",
+  "reader_speed": "Speed",
+  "reader_preview_notice": "Preview — this chapter has not been fully scraped.",
+
+  "profile_page_title": "Profile — libnovel",
+  "profile_heading": "Profile",
+  "profile_avatar_label": "Avatar",
+  "profile_change_avatar": "Change avatar",
+  "profile_username": "Username",
+  "profile_email": "Email",
+  "profile_change_password": "Change password",
+  "profile_current_password": "Current password",
+  "profile_new_password": "New password",
+  "profile_confirm_password": "Confirm password",
+  "profile_save_password": "Save password",
+  "profile_appearance_heading": "Appearance",
+  "profile_theme_label": "Theme",
+  "profile_theme_amber": "Amber",
+  "profile_theme_slate": "Slate",
+  "profile_theme_rose": "Rose",
+  "profile_reading_heading": "Reading settings",
+  "profile_voice_label": "Default voice",
+  "profile_speed_label": "Playback speed",
+  "profile_auto_next_label": "Auto-next chapter",
+  "profile_save_settings": "Save settings",
+  "profile_settings_saved": "Settings saved.",
+  "profile_settings_error": "Failed to save settings.",
+  "profile_password_saved": "Password changed.",
+  "profile_password_error": "Failed to change password.",
+  "profile_sessions_heading": "Active sessions",
+  "profile_sign_out_all": "Sign out all other devices",
+  "profile_joined": "Joined {date}",
+
+  "user_page_title": "{username} — libnovel",
+  "user_library_heading": "{username}'s Library",
+  "user_follow": "Follow",
+  "user_unfollow": "Unfollow",
+  "user_followers": "{n} followers",
+  "user_following": "{n} following",
+  "user_library_empty": "No books in library.",
+
+  "error_not_found_title": "Page not found",
+  "error_not_found_body": "The page you're looking for doesn't exist.",
+  "error_generic_title": "Something went wrong",
+  "error_go_home": "Go home",
+  "error_status": "Error {status}",
+
+  "admin_scrape_page_title": "Scrape — Admin",
+  "admin_scrape_heading": "Scrape",
+  "admin_scrape_catalogue": "Scrape Catalogue",
+  "admin_scrape_book": "Scrape Book",
+  "admin_scrape_url_placeholder": "novelfire.net book URL",
+  "admin_scrape_range": "Chapter range",
+  "admin_scrape_from": "From",
+  "admin_scrape_to": "To",
+  "admin_scrape_submit": "Scrape",
+  "admin_scrape_cancel": "Cancel",
+  "admin_scrape_status_pending": "Pending",
+  "admin_scrape_status_running": "Running",
+  "admin_scrape_status_done": "Done",
+  "admin_scrape_status_failed": "Failed",
+  "admin_scrape_status_cancelled": "Cancelled",
+  "admin_tasks_heading": "Recent tasks",
+  "admin_tasks_empty": "No tasks yet.",
+
+  "admin_audio_page_title": "Audio — Admin",
+  "admin_audio_heading": "Audio Jobs",
+  "admin_audio_empty": "No audio jobs.",
+
+  "admin_changelog_page_title": "Changelog — Admin",
+  "admin_changelog_heading": "Changelog",
+
+  "comments_heading": "Comments",
+  "comments_empty": "No comments yet. Be the first!",
+  "comments_placeholder": "Write a comment…",
+  "comments_submit": "Post",
+  "comments_login_prompt": "Sign in to comment.",
+  "comments_vote_up": "Upvote",
+  "comments_vote_down": "Downvote",
+  "comments_delete": "Delete",
+  "comments_reply": "Reply",
+  "comments_show_replies": "Show {n} replies",
+  "comments_hide_replies": "Hide replies",
+  "comments_edited": "edited",
+  "comments_deleted": "[deleted]",
+
+  "disclaimer_page_title": "Disclaimer — libnovel",
+  "privacy_page_title": "Privacy Policy — libnovel",
+  "dmca_page_title": "DMCA — libnovel",
+  "terms_page_title": "Terms of Service — libnovel",
+
+  "common_loading": "Loading…",
+  "common_error": "Error",
+  "common_save": "Save",
+  "common_cancel": "Cancel",
+  "common_close": "Close",
+  "common_search": "Search",
+  "common_back": "Back",
+  "common_next": "Next",
+  "common_previous": "Previous",
+  "common_yes": "Yes",
+  "common_no": "No",
+  "common_on": "on",
+  "common_off": "off",
+
+  "locale_switcher_label": "Language",
+
+  "books_empty_library": "Your library is empty.",
+  "books_empty_discover": "Books you start reading or save from",
+  "books_empty_discover_link": "Discover",
+  "books_empty_discover_suffix": "will appear here.",
+  "books_count": "{n} book{s}",
+
+  "catalogue_sort_updated": "Updated",
+  "catalogue_search_button": "Search",
+  "catalogue_refresh": "Refresh",
+  "catalogue_refreshing": "Queuing\u2026",
+  "catalogue_refresh_mobile": "Refresh catalogue",
+  "catalogue_all_loaded": "All novels loaded",
+  "catalogue_scroll_top": "Back to top",
+  "catalogue_view_grid": "Grid view",
+  "catalogue_view_list": "List view",
+  "catalogue_browse_source": "Browse novels from novelfire.net",
+  "catalogue_search_results": "{n} result{s} for \"{q}\"",
+  "catalogue_search_local_count": "({local} local, {remote} from novelfire)",
+  "catalogue_rank_ranked": "{n} novels ranked from last catalogue scrape",
+  "catalogue_rank_no_data": "No ranking data.",
+  "catalogue_rank_no_data_body": "No ranking data \u2014 run a full catalogue scrape to populate",
+  "catalogue_rank_run_scrape_admin": "Click Refresh catalogue above to trigger a full catalogue scrape.",
+  "catalogue_rank_run_scrape_user": "Ask an admin to run a catalogue scrape.",
+  "catalogue_scrape_queued_flash": "Full catalogue scrape queued. Library and ranking will update as books are processed.",
+  "catalogue_scrape_busy_flash": "A scrape job is already running. Check back once it finishes.",
+  "catalogue_scrape_error_flash": "Failed to queue scrape. Check that the scraper service is reachable.",
+  "catalogue_filters_label": "Filters",
+  "catalogue_apply": "Apply",
+  "catalogue_filter_rank_note": "Genre & status filters apply to Browse only",
+  "catalogue_no_results_search": "No results found.",
+  "catalogue_no_results_try": "Try a different search term.",
+  "catalogue_no_results_filters": "Try different filters or check back later.",
+  "catalogue_scrape_queued_badge": "Queued",
+  "catalogue_scrape_busy_badge": "Scraper busy",
+  "catalogue_scrape_busy_list": "Busy",
+  "catalogue_scrape_forbidden_badge": "Forbidden",
+  "catalogue_scrape_novel_button": "Scrape",
+  "catalogue_scraping_novel": "Scraping\u2026",
+
+  "book_detail_not_in_library": "not in library",
+  "book_detail_continue_ch": "Continue ch.{n}",
+  "book_detail_start_ch1": "Start from ch.1",
+  "book_detail_preview_ch1": "Preview ch.1",
+  "book_detail_reading_ch": "Reading ch.{n} of {total}",
+  "book_detail_n_chapters": "{n} chapters",
+  "book_detail_rescraping": "Queuing\u2026",
+  "book_detail_from_chapter": "From chapter",
+  "book_detail_to_chapter": "To chapter (optional)",
+  "book_detail_range_queuing": "Queuing\u2026",
+  "book_detail_scrape_range": "Scrape range",
+  "book_detail_admin": "Admin",
+  "book_detail_scraping_progress": "Fetching the first 20 chapters. This page will refresh automatically.",
+  "book_detail_scraping_home": "\u2190 Home",
+  "book_detail_rescrape_book": "Rescrape book",
+  "book_detail_less": "Less",
+  "book_detail_more": "More",
+
+  "chapters_search_placeholder": "Search chapters\u2026",
+  "chapters_jump_to": "Jump to Ch.{n}",
+  "chapters_no_match": "No chapters match \"{q}\"",
+  "chapters_none_available": "No chapters available yet.",
+  "chapters_reading_indicator": "reading",
+  "chapters_result_count": "{n} results",
+
+  "reader_fetching_chapter": "Fetching chapter\u2026",
+  "reader_words": "{n} words",
+  "reader_preview_audio_notice": "Preview chapter \u2014 audio not available for books outside the library.",
+
+  "profile_click_to_change": "Click avatar to change photo",
+  "profile_tts_voice": "TTS voice",
+  "profile_auto_advance": "Auto-advance to next chapter",
+  "profile_saving": "Saving\u2026",
+  "profile_saved": "Saved!",
+  "profile_session_this": "This session",
+  "profile_session_signed_in": "Signed in {date}",
+  "profile_session_last_seen": "\u00b7 Last seen {date}",
+  "profile_session_sign_out": "Sign out",
+  "profile_session_end": "End",
+  "profile_session_unrecognised": "These are all devices currently signed into your account. End any session you don\u2019t recognise.",
+  "profile_no_sessions": "No session records found. Sessions are tracked from the next login.",
+  "profile_change_password_heading": "Change password",
+  "profile_update_password": "Update password",
+  "profile_updating": "Updating\u2026",
+  "profile_password_changed_ok": "Password changed successfully.",
+  "profile_playback_speed": "Playback speed \u2014 {speed}x",
+
+  "user_currently_reading": "Currently Reading",
+  "user_library_count": "Library ({n})",
+  "user_joined": "Joined {date}",
+  "user_followers_label": "followers",
+  "user_following_label": "following",
+  "user_no_books": "No books in library yet.",
+
+  "admin_pages_label": "Pages",
+  "admin_tools_label": "Tools",
+
+  "admin_scrape_status_idle": "Idle",
+  "admin_scrape_status_running": "Running",
+  "admin_scrape_full_catalogue": "Full catalogue",
+  "admin_scrape_single_book": "Single book",
+  "admin_scrape_quick_genres": "Quick genres",
+  "admin_scrape_task_history": "Task history",
+  "admin_scrape_filter_placeholder": "Filter by kind, status or URL\u2026",
+  "admin_scrape_no_matching": "No matching tasks.",
+  "admin_scrape_start": "Start scrape",
+  "admin_scrape_queuing": "Queuing\u2026",
+  "admin_scrape_running": "Running\u2026",
+
+  "admin_audio_filter_jobs": "Filter by slug, voice or status\u2026",
+  "admin_audio_filter_cache": "Filter by slug, chapter or voice\u2026",
+  "admin_audio_no_matching_jobs": "No matching jobs.",
+  "admin_audio_no_jobs": "No audio jobs yet.",
+  "admin_audio_cache_empty": "Audio cache is empty.",
+  "admin_audio_no_cache_results": "No results.",
+
+  "admin_changelog_gitea": "Gitea releases",
+  "admin_changelog_no_releases": "No releases found.",
+  "admin_changelog_load_error": "Could not load releases: {error}",
+
+  "comments_top": "Top",
+  "comments_new": "New",
+  "comments_posting": "Posting\u2026",
+  "comments_login_link": "Log in",
+  "comments_login_suffix": "to leave a comment.",
+  "comments_anonymous": "Anonymous",
+
+  "reader_audio_narration": "Audio Narration",
+  "reader_playing": "Playing \u2014 controls below",
+  "reader_paused": "Paused \u2014 controls below",
+  "reader_ch_ready": "Ch.{n} ready",
+  "reader_ch_preparing": "Preparing Ch.{n}\u2026 {percent}%",
+  "reader_ch_generate_on_nav": "Ch.{n} will generate on navigate",
+  "reader_now_playing": "Now playing: {title}",
+  "reader_load_this_chapter": "Load this chapter",
+  "reader_generate_samples": "Generate missing samples",
+  "reader_voice_applies_next": "New voice applies on next \u201cPlay narration\u201d.",
+  "reader_choose_voice": "Choose Voice",
+  "reader_generating_narration": "Generating narration\u2026"
+}

ui/messages/fr.json

@@ -0,0 +1,383 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+
+  "nav_library": "Bibliothèque",
+  "nav_catalogue": "Catalogue",
+  "nav_feedback": "Retour",
+  "nav_admin": "Admin",
+  "nav_profile": "Profil",
+  "nav_sign_in": "Connexion",
+  "nav_sign_out": "Déconnexion",
+  "nav_toggle_menu": "Menu",
+  "nav_admin_panel": "Panneau admin",
+
+  "footer_library": "Bibliothèque",
+  "footer_catalogue": "Catalogue",
+  "footer_feedback": "Retour",
+  "footer_disclaimer": "Avertissement",
+  "footer_privacy": "Confidentialité",
+  "footer_dmca": "DMCA",
+  "footer_copyright": "© {year} libnovel",
+  "footer_dev": "dev",
+
+  "home_title": "libnovel",
+  "home_stat_books": "Livres",
+  "home_stat_chapters": "Chapitres",
+  "home_stat_in_progress": "En cours",
+  "home_continue_reading": "Continuer la lecture",
+  "home_view_all": "Voir tout",
+  "home_recently_updated": "Récemment mis à jour",
+  "home_from_following": "Des personnes que vous suivez",
+  "home_empty_title": "Votre bibliothèque est vide",
+  "home_empty_body": "Découvrez des romans et ajoutez-les à votre bibliothèque.",
+  "home_discover_novels": "Découvrir des romans",
+  "home_via_reader": "via {username}",
+  "home_chapter_badge": "ch.{n}",
+
+  "player_generating": "Génération… {percent}%",
+  "player_loading": "Chargement…",
+  "player_chapters": "Chapitres",
+  "player_chapter_n": "Chapitre {n}",
+  "player_toggle_chapter_list": "Liste des chapitres",
+  "player_chapter_list_label": "Liste des chapitres",
+  "player_close_chapter_list": "Fermer la liste des chapitres",
+  "player_rewind_15": "Reculer de 15 secondes",
+  "player_skip_30": "Avancer de 30 secondes",
+  "player_back_15": "−15 s",
+  "player_forward_30": "+30 s",
+  "player_play": "Lecture",
+  "player_pause": "Pause",
+  "player_speed_label": "Vitesse {speed}x",
+  "player_change_speed": "Changer la vitesse",
+  "player_auto_next_on": "Suivant auto activé",
+  "player_auto_next_off": "Suivant auto désactivé",
+  "player_auto_next_ready": "Suivant auto — Ch.{n} prêt",
+  "player_auto_next_preparing": "Suivant auto — préparation Ch.{n}…",
+  "player_auto_next_aria": "Suivant auto {state}",
+  "player_go_to_chapter": "Aller au chapitre",
+  "player_close": "Fermer le lecteur",
+
+  "login_page_title": "Connexion — libnovel",
+  "login_heading": "Se connecter à libnovel",
+  "login_subheading": "Choisissez un fournisseur pour continuer",
+  "login_continue_google": "Continuer avec Google",
+  "login_continue_github": "Continuer avec GitHub",
+  "login_terms_notice": "En vous connectant, vous acceptez nos conditions d'utilisation.",
+  "login_error_oauth_state": "Connexion annulée ou expirée. Veuillez réessayer.",
+  "login_error_oauth_failed": "Impossible de se connecter au fournisseur. Veuillez réessayer.",
+  "login_error_oauth_no_email": "Votre compte n'a pas d'adresse e-mail vérifiée. Ajoutez-en une et réessayez.",
+
+  "books_page_title": "Bibliothèque — libnovel",
+  "books_heading": "Votre bibliothèque",
+  "books_empty_title": "Aucun livre pour l'instant",
+  "books_empty_body": "Ajoutez des livres à votre bibliothèque en visitant une page de livre.",
+  "books_browse_catalogue": "Parcourir le catalogue",
+  "books_chapter_count": "{n} chapitres",
+  "books_last_read": "Dernier lu : Ch.{n}",
+  "books_reading_progress": "Ch.{current} / {total}",
+  "books_remove": "Supprimer",
+
+  "catalogue_page_title": "Catalogue — libnovel",
+  "catalogue_heading": "Catalogue",
+  "catalogue_search_placeholder": "Rechercher des romans…",
+  "catalogue_filter_genre": "Genre",
+  "catalogue_filter_status": "Statut",
+  "catalogue_filter_sort": "Trier",
+  "catalogue_sort_popular": "Populaire",
+  "catalogue_sort_new": "Nouveau",
+  "catalogue_sort_top_rated": "Mieux notés",
+  "catalogue_sort_rank": "Rang",
+  "catalogue_status_all": "Tous",
+  "catalogue_status_ongoing": "En cours",
+  "catalogue_status_completed": "Terminé",
+  "catalogue_genre_all": "Tous les genres",
+  "catalogue_clear_filters": "Effacer",
+  "catalogue_reset": "Réinitialiser",
+  "catalogue_no_results": "Aucun roman trouvé.",
+  "catalogue_loading": "Chargement…",
+  "catalogue_load_more": "Charger plus",
+  "catalogue_results_count": "{n} résultats",
+
+  "book_detail_page_title": "{title} — libnovel",
+  "book_detail_add_to_library": "Ajouter à la bibliothèque",
+  "book_detail_remove_from_library": "Retirer de la bibliothèque",
+  "book_detail_read_now": "Lire maintenant",
+  "book_detail_continue_reading": "Continuer la lecture",
+  "book_detail_start_reading": "Commencer la lecture",
+  "book_detail_chapters": "{n} chapitres",
+  "book_detail_status": "Statut",
+  "book_detail_author": "Auteur",
+  "book_detail_genres": "Genres",
+  "book_detail_description": "Description",
+  "book_detail_source": "Source",
+  "book_detail_rescrape": "Réextraire",
+  "book_detail_scraping": "Extraction en cours…",
+  "book_detail_in_library": "Dans la bibliothèque",
+
+  "chapters_page_title": "Chapitres — {title}",
+  "chapters_heading": "Chapitres",
+  "chapters_back_to_book": "Retour au livre",
+  "chapters_reading_now": "En cours de lecture",
+  "chapters_empty": "Aucun chapitre extrait pour l'instant.",
+
+  "reader_page_title": "{title} — Ch.{n} — libnovel",
+  "reader_play_narration": "Lire la narration",
+  "reader_generating_audio": "Génération audio…",
+  "reader_audio_error": "Échec de la génération audio.",
+  "reader_prev_chapter": "Chapitre précédent",
+  "reader_next_chapter": "Chapitre suivant",
+  "reader_back_to_chapters": "Retour aux chapitres",
+  "reader_chapter_n": "Chapitre {n}",
+  "reader_change_voice": "Changer de voix",
+  "reader_voice_panel_title": "Sélectionner une voix",
+  "reader_voice_kokoro": "Voix Kokoro",
+  "reader_voice_pocket": "Voix Pocket-TTS",
+  "reader_voice_play_sample": "Écouter un extrait",
+  "reader_voice_stop_sample": "Arrêter l'extrait",
+  "reader_voice_selected": "Sélectionné",
+  "reader_close_voice_panel": "Fermer le panneau vocal",
+  "reader_auto_next": "Suivant auto",
+  "reader_speed": "Vitesse",
+  "reader_preview_notice": "Aperçu — ce chapitre n'a pas été entièrement extrait.",
+
+  "profile_page_title": "Profil — libnovel",
+  "profile_heading": "Profil",
+  "profile_avatar_label": "Avatar",
+  "profile_change_avatar": "Changer l'avatar",
+  "profile_username": "Nom d'utilisateur",
+  "profile_email": "E-mail",
+  "profile_change_password": "Changer le mot de passe",
+  "profile_current_password": "Mot de passe actuel",
+  "profile_new_password": "Nouveau mot de passe",
+  "profile_confirm_password": "Confirmer le mot de passe",
+  "profile_save_password": "Enregistrer le mot de passe",
+  "profile_appearance_heading": "Apparence",
+  "profile_theme_label": "Thème",
+  "profile_theme_amber": "Ambre",
+  "profile_theme_slate": "Ardoise",
+  "profile_theme_rose": "Rose",
+  "profile_reading_heading": "Paramètres de lecture",
+  "profile_voice_label": "Voix par défaut",
+  "profile_speed_label": "Vitesse de lecture",
+  "profile_auto_next_label": "Chapitre suivant automatique",
+  "profile_save_settings": "Enregistrer les paramètres",
+  "profile_settings_saved": "Paramètres enregistrés.",
+  "profile_settings_error": "Impossible d'enregistrer les paramètres.",
+  "profile_password_saved": "Mot de passe modifié.",
+  "profile_password_error": "Impossible de modifier le mot de passe.",
+  "profile_sessions_heading": "Sessions actives",
+  "profile_sign_out_all": "Se déconnecter de tous les autres appareils",
+  "profile_joined": "Inscrit le {date}",
+
+  "user_page_title": "{username} — libnovel",
+  "user_library_heading": "Bibliothèque de {username}",
+  "user_follow": "Suivre",
+  "user_unfollow": "Ne plus suivre",
+  "user_followers": "{n} abonnés",
+  "user_following": "{n} abonnements",
+  "user_library_empty": "Aucun livre dans la bibliothèque.",
+
+  "error_not_found_title": "Page introuvable",
+  "error_not_found_body": "La page que vous cherchez n'existe pas.",
+  "error_generic_title": "Une erreur s'est produite",
+  "error_go_home": "Accueil",
+  "error_status": "Erreur {status}",
+
+  "admin_scrape_page_title": "Extraction — Admin",
+  "admin_scrape_heading": "Extraction",
+  "admin_scrape_catalogue": "Extraire le catalogue",
+  "admin_scrape_book": "Extraire un livre",
+  "admin_scrape_url_placeholder": "URL du livre sur novelfire.net",
+  "admin_scrape_range": "Plage de chapitres",
+  "admin_scrape_from": "De",
+  "admin_scrape_to": "À",
+  "admin_scrape_submit": "Extraire",
+  "admin_scrape_cancel": "Annuler",
+  "admin_scrape_status_pending": "En attente",
+  "admin_scrape_status_running": "En cours",
+  "admin_scrape_status_done": "Terminé",
+  "admin_scrape_status_failed": "Échoué",
+  "admin_scrape_status_cancelled": "Annulé",
+  "admin_tasks_heading": "Tâches récentes",
+  "admin_tasks_empty": "Aucune tâche pour l'instant.",
+
+  "admin_audio_page_title": "Audio — Admin",
+  "admin_audio_heading": "Tâches audio",
+  "admin_audio_empty": "Aucune tâche audio.",
+
+  "admin_changelog_page_title": "Changelog — Admin",
+  "admin_changelog_heading": "Changelog",
+
+  "comments_heading": "Commentaires",
+  "comments_empty": "Aucun commentaire pour l'instant. Soyez le premier !",
+  "comments_placeholder": "Écrire un commentaire…",
+  "comments_submit": "Publier",
+  "comments_login_prompt": "Connectez-vous pour commenter.",
+  "comments_vote_up": "Vote positif",
+  "comments_vote_down": "Vote négatif",
+  "comments_delete": "Supprimer",
+  "comments_reply": "Répondre",
+  "comments_show_replies": "Afficher {n} réponses",
+  "comments_hide_replies": "Masquer les réponses",
+  "comments_edited": "modifié",
+  "comments_deleted": "[supprimé]",
+
+  "disclaimer_page_title": "Avertissement — libnovel",
+  "privacy_page_title": "Politique de confidentialité — libnovel",
+  "dmca_page_title": "DMCA — libnovel",
+  "terms_page_title": "Conditions d'utilisation — libnovel",
+
+  "common_loading": "Chargement…",
+  "common_error": "Erreur",
+  "common_save": "Enregistrer",
+  "common_cancel": "Annuler",
+  "common_close": "Fermer",
+  "common_search": "Rechercher",
+  "common_back": "Retour",
+  "common_next": "Suivant",
+  "common_previous": "Précédent",
+  "common_yes": "Oui",
+  "common_no": "Non",
+  "common_on": "activé",
+  "common_off": "désactivé",
+
+  "locale_switcher_label": "Langue",
+
+  "books_empty_library": "Votre bibliothèque est vide.",
+  "books_empty_discover": "Les livres que vous commencez à lire ou enregistrez depuis",
+  "books_empty_discover_link": "Découvrir",
+  "books_empty_discover_suffix": "apparaîtront ici.",
+  "books_count": "{n} livre{s}",
+
+  "catalogue_sort_updated": "Mis à jour",
+  "catalogue_search_button": "Rechercher",
+  "catalogue_refresh": "Actualiser",
+  "catalogue_refreshing": "En file d'attente…",
+  "catalogue_refresh_mobile": "Actualiser le catalogue",
+  "catalogue_all_loaded": "Tous les romans chargés",
+  "catalogue_scroll_top": "Retour en haut",
+  "catalogue_view_grid": "Vue grille",
+  "catalogue_view_list": "Vue liste",
+  "catalogue_browse_source": "Parcourir les romans de novelfire.net",
+  "catalogue_search_results": "{n} résultat{s} pour « {q} »",
+  "catalogue_search_local_count": "({local} local, {remote} depuis novelfire)",
+  "catalogue_rank_ranked": "{n} romans classés depuis le dernier scrape du catalogue",
+  "catalogue_rank_no_data": "Aucune donnée de classement.",
+  "catalogue_rank_no_data_body": "Aucune donnée de classement — lancez un scrape complet du catalogue pour remplir",
+  "catalogue_rank_run_scrape_admin": "Cliquez sur Actualiser le catalogue ci-dessus pour déclencher un scrape complet.",
+  "catalogue_rank_run_scrape_user": "Demandez à un administrateur d'effectuer un scrape du catalogue.",
+  "catalogue_scrape_queued_flash": "Scrape complet du catalogue en file d'attente. La bibliothèque et le classement seront mis à jour au fur et à mesure du traitement des livres.",
+  "catalogue_scrape_busy_flash": "Un job de scrape est déjà en cours. Revenez une fois terminé.",
+  "catalogue_scrape_error_flash": "Échec de la mise en file d'attente du scrape. Vérifiez que le service de scraper est accessible.",
+  "catalogue_filters_label": "Filtres",
+  "catalogue_apply": "Appliquer",
+  "catalogue_filter_rank_note": "Les filtres genre et statut s'appliquent uniquement à Parcourir",
+  "catalogue_no_results_search": "Aucun résultat trouvé.",
+  "catalogue_no_results_try": "Essayez un autre terme de recherche.",
+  "catalogue_no_results_filters": "Essayez d'autres filtres ou revenez plus tard.",
+  "catalogue_scrape_queued_badge": "En file",
+  "catalogue_scrape_busy_badge": "Scraper occupé",
+  "catalogue_scrape_busy_list": "Occupé",
+  "catalogue_scrape_forbidden_badge": "Interdit",
+  "catalogue_scrape_novel_button": "Extraire",
+  "catalogue_scraping_novel": "Extraction…",
+
+  "book_detail_not_in_library": "pas dans la bibliothèque",
+  "book_detail_continue_ch": "Continuer ch.{n}",
+  "book_detail_start_ch1": "Commencer au ch.1",
+  "book_detail_preview_ch1": "Aperçu ch.1",
+  "book_detail_reading_ch": "Lecture ch.{n} sur {total}",
+  "book_detail_n_chapters": "{n} chapitres",
+  "book_detail_rescraping": "En file d'attente…",
+  "book_detail_from_chapter": "À partir du chapitre",
+  "book_detail_to_chapter": "Jusqu'au chapitre (optionnel)",
+  "book_detail_range_queuing": "En file d'attente…",
+  "book_detail_scrape_range": "Plage d'extraction",
+  "book_detail_admin": "Admin",
+  "book_detail_scraping_progress": "Récupération des 20 premiers chapitres. Cette page sera actualisée automatiquement.",
+  "book_detail_scraping_home": "← Accueil",
+  "book_detail_rescrape_book": "Réextraire le livre",
+  "book_detail_less": "Moins",
+  "book_detail_more": "Plus",
+
+  "chapters_search_placeholder": "Rechercher des chapitres…",
+  "chapters_jump_to": "Aller au Ch.{n}",
+  "chapters_no_match": "Aucun chapitre ne correspond à « {q} »",
+  "chapters_none_available": "Aucun chapitre disponible pour l'instant.",
+  "chapters_reading_indicator": "en cours",
+  "chapters_result_count": "{n} résultats",
+
+  "reader_fetching_chapter": "Récupération du chapitre…",
+  "reader_words": "{n} mots",
+  "reader_preview_audio_notice": "Aperçu — audio non disponible pour les livres hors bibliothèque.",
+
+  "profile_click_to_change": "Cliquez sur l'avatar pour changer la photo",
+  "profile_tts_voice": "Voix TTS",
+  "profile_auto_advance": "Avancer automatiquement au chapitre suivant",
+  "profile_saving": "Enregistrement…",
+  "profile_saved": "Enregistré !",
+  "profile_session_this": "Cette session",
+  "profile_session_signed_in": "Connecté le {date}",
+  "profile_session_last_seen": "· Dernière activité {date}",
+  "profile_session_sign_out": "Se déconnecter",
+  "profile_session_end": "Terminer",
+  "profile_session_unrecognised": "Ce sont tous les appareils connectés à votre compte. Terminez toute session que vous ne reconnaissez pas.",
+  "profile_no_sessions": "Aucun enregistrement de session trouvé. Les sessions sont suivies dès la prochaine connexion.",
+  "profile_change_password_heading": "Changer le mot de passe",
+  "profile_update_password": "Mettre à jour le mot de passe",
+  "profile_updating": "Mise à jour…",
+  "profile_password_changed_ok": "Mot de passe modifié avec succès.",
+  "profile_playback_speed": "Vitesse de lecture — {speed}x",
+
+  "user_currently_reading": "En cours de lecture",
+  "user_library_count": "Bibliothèque ({n})",
+  "user_joined": "Inscrit le {date}",
+  "user_followers_label": "abonnés",
+  "user_following_label": "abonnements",
+  "user_no_books": "Aucun livre dans la bibliothèque pour l'instant.",
+
+  "admin_pages_label": "Pages",
+  "admin_tools_label": "Outils",
+
+  "admin_scrape_status_idle": "Inactif",
+  "admin_scrape_full_catalogue": "Catalogue complet",
+  "admin_scrape_single_book": "Livre unique",
+  "admin_scrape_quick_genres": "Genres rapides",
+  "admin_scrape_task_history": "Historique des tâches",
+  "admin_scrape_filter_placeholder": "Filtrer par type, statut ou URL…",
+  "admin_scrape_no_matching": "Aucune tâche correspondante.",
+  "admin_scrape_start": "Démarrer l'extraction",
+  "admin_scrape_queuing": "En file d'attente…",
+  "admin_scrape_running": "En cours…",
+
+  "admin_audio_filter_jobs": "Filtrer par slug, voix ou statut…",
+  "admin_audio_filter_cache": "Filtrer par slug, chapitre ou voix…",
+  "admin_audio_no_matching_jobs": "Aucun job correspondant.",
+  "admin_audio_no_jobs": "Aucun job audio pour l'instant.",
+  "admin_audio_cache_empty": "Cache audio vide.",
+  "admin_audio_no_cache_results": "Aucun résultat.",
+
+  "admin_changelog_gitea": "Releases Gitea",
+  "admin_changelog_no_releases": "Aucune release trouvée.",
+  "admin_changelog_load_error": "Impossible de charger les releases : {error}",
+
+  "comments_top": "Les meilleures",
+  "comments_new": "Nouvelles",
+  "comments_posting": "Publication…",
+  "comments_login_link": "Connectez-vous",
+  "comments_login_suffix": "pour laisser un commentaire.",
+  "comments_anonymous": "Anonyme",
+
+  "reader_audio_narration": "Narration Audio",
+  "reader_playing": "Lecture en cours — contrôles ci-dessous",
+  "reader_paused": "En pause — contrôles ci-dessous",
+  "reader_ch_ready": "Ch.{n} prêt",
+  "reader_ch_preparing": "Préparation Ch.{n}… {percent}%",
+  "reader_ch_generate_on_nav": "Ch.{n} sera généré lors de la navigation",
+  "reader_now_playing": "En cours : {title}",
+  "reader_load_this_chapter": "Charger ce chapitre",
+  "reader_generate_samples": "Générer les échantillons manquants",
+  "reader_voice_applies_next": "La nouvelle voix s'appliquera au prochain « Lire la narration ».",
+  "reader_choose_voice": "Choisir une voix",
+  "reader_generating_narration": "Génération de la narration…"
+}

ui/messages/id.json

@@ -0,0 +1,383 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+
+  "nav_library": "Perpustakaan",
+  "nav_catalogue": "Katalog",
+  "nav_feedback": "Masukan",
+  "nav_admin": "Admin",
+  "nav_profile": "Profil",
+  "nav_sign_in": "Masuk",
+  "nav_sign_out": "Keluar",
+  "nav_toggle_menu": "Menu",
+  "nav_admin_panel": "Panel admin",
+
+  "footer_library": "Perpustakaan",
+  "footer_catalogue": "Katalog",
+  "footer_feedback": "Masukan",
+  "footer_disclaimer": "Penyangkalan",
+  "footer_privacy": "Privasi",
+  "footer_dmca": "DMCA",
+  "footer_copyright": "© {year} libnovel",
+  "footer_dev": "dev",
+
+  "home_title": "libnovel",
+  "home_stat_books": "Buku",
+  "home_stat_chapters": "Bab",
+  "home_stat_in_progress": "Sedang dibaca",
+  "home_continue_reading": "Lanjutkan Membaca",
+  "home_view_all": "Lihat semua",
+  "home_recently_updated": "Baru Diperbarui",
+  "home_from_following": "Dari Orang yang Kamu Ikuti",
+  "home_empty_title": "Perpustakaanmu kosong",
+  "home_empty_body": "Temukan novel dan tambahkan ke perpustakaanmu.",
+  "home_discover_novels": "Temukan Novel",
+  "home_via_reader": "via {username}",
+  "home_chapter_badge": "bab.{n}",
+
+  "player_generating": "Membuat… {percent}%",
+  "player_loading": "Memuat…",
+  "player_chapters": "Bab",
+  "player_chapter_n": "Bab {n}",
+  "player_toggle_chapter_list": "Daftar bab",
+  "player_chapter_list_label": "Daftar bab",
+  "player_close_chapter_list": "Tutup daftar bab",
+  "player_rewind_15": "Mundur 15 detik",
+  "player_skip_30": "Maju 30 detik",
+  "player_back_15": "−15 dtk",
+  "player_forward_30": "+30 dtk",
+  "player_play": "Putar",
+  "player_pause": "Jeda",
+  "player_speed_label": "Kecepatan {speed}x",
+  "player_change_speed": "Ubah kecepatan",
+  "player_auto_next_on": "Auto-lanjut aktif",
+  "player_auto_next_off": "Auto-lanjut nonaktif",
+  "player_auto_next_ready": "Auto-lanjut — Bab.{n} siap",
+  "player_auto_next_preparing": "Auto-lanjut — menyiapkan Bab.{n}…",
+  "player_auto_next_aria": "Auto-lanjut {state}",
+  "player_go_to_chapter": "Pergi ke bab",
+  "player_close": "Tutup pemutar",
+
+  "login_page_title": "Masuk — libnovel",
+  "login_heading": "Masuk ke libnovel",
+  "login_subheading": "Pilih penyedia untuk melanjutkan",
+  "login_continue_google": "Lanjutkan dengan Google",
+  "login_continue_github": "Lanjutkan dengan GitHub",
+  "login_terms_notice": "Dengan masuk, kamu menyetujui syarat layanan kami.",
+  "login_error_oauth_state": "Masuk dibatalkan atau kedaluwarsa. Coba lagi.",
+  "login_error_oauth_failed": "Tidak dapat terhubung ke penyedia. Coba lagi.",
+  "login_error_oauth_no_email": "Akunmu tidak memiliki alamat email terverifikasi. Tambahkan dan coba lagi.",
+
+  "books_page_title": "Perpustakaan — libnovel",
+  "books_heading": "Perpustakaanmu",
+  "books_empty_title": "Belum ada buku",
+  "books_empty_body": "Tambahkan buku ke perpustakaanmu dengan mengunjungi halaman buku.",
+  "books_browse_catalogue": "Jelajahi Katalog",
+  "books_chapter_count": "{n} bab",
+  "books_last_read": "Terakhir: Bab.{n}",
+  "books_reading_progress": "Bab.{current} / {total}",
+  "books_remove": "Hapus",
+
+  "catalogue_page_title": "Katalog — libnovel",
+  "catalogue_heading": "Katalog",
+  "catalogue_search_placeholder": "Cari novel…",
+  "catalogue_filter_genre": "Genre",
+  "catalogue_filter_status": "Status",
+  "catalogue_filter_sort": "Urutkan",
+  "catalogue_sort_popular": "Populer",
+  "catalogue_sort_new": "Terbaru",
+  "catalogue_sort_top_rated": "Nilai Tertinggi",
+  "catalogue_sort_rank": "Peringkat",
+  "catalogue_status_all": "Semua",
+  "catalogue_status_ongoing": "Berlangsung",
+  "catalogue_status_completed": "Selesai",
+  "catalogue_genre_all": "Semua genre",
+  "catalogue_clear_filters": "Hapus",
+  "catalogue_reset": "Atur ulang",
+  "catalogue_no_results": "Novel tidak ditemukan.",
+  "catalogue_loading": "Memuat…",
+  "catalogue_load_more": "Muat lebih banyak",
+  "catalogue_results_count": "{n} hasil",
+
+  "book_detail_page_title": "{title} — libnovel",
+  "book_detail_add_to_library": "Tambah ke Perpustakaan",
+  "book_detail_remove_from_library": "Hapus dari Perpustakaan",
+  "book_detail_read_now": "Baca Sekarang",
+  "book_detail_continue_reading": "Lanjutkan Membaca",
+  "book_detail_start_reading": "Mulai Membaca",
+  "book_detail_chapters": "{n} Bab",
+  "book_detail_status": "Status",
+  "book_detail_author": "Penulis",
+  "book_detail_genres": "Genre",
+  "book_detail_description": "Deskripsi",
+  "book_detail_source": "Sumber",
+  "book_detail_rescrape": "Perbarui",
+  "book_detail_scraping": "Memperbarui…",
+  "book_detail_in_library": "Ada di Perpustakaan",
+
+  "chapters_page_title": "Bab — {title}",
+  "chapters_heading": "Bab",
+  "chapters_back_to_book": "Kembali ke buku",
+  "chapters_reading_now": "Sedang dibaca",
+  "chapters_empty": "Belum ada bab yang diambil.",
+
+  "reader_page_title": "{title} — Bab.{n} — libnovel",
+  "reader_play_narration": "Putar narasi",
+  "reader_generating_audio": "Membuat audio…",
+  "reader_audio_error": "Pembuatan audio gagal.",
+  "reader_prev_chapter": "Bab sebelumnya",
+  "reader_next_chapter": "Bab berikutnya",
+  "reader_back_to_chapters": "Kembali ke daftar bab",
+  "reader_chapter_n": "Bab {n}",
+  "reader_change_voice": "Ganti suara",
+  "reader_voice_panel_title": "Pilih suara",
+  "reader_voice_kokoro": "Suara Kokoro",
+  "reader_voice_pocket": "Suara Pocket-TTS",
+  "reader_voice_play_sample": "Putar sampel",
+  "reader_voice_stop_sample": "Hentikan sampel",
+  "reader_voice_selected": "Dipilih",
+  "reader_close_voice_panel": "Tutup panel suara",
+  "reader_auto_next": "Auto-lanjut",
+  "reader_speed": "Kecepatan",
+  "reader_preview_notice": "Pratinjau — bab ini belum sepenuhnya diambil.",
+
+  "profile_page_title": "Profil — libnovel",
+  "profile_heading": "Profil",
+  "profile_avatar_label": "Avatar",
+  "profile_change_avatar": "Ubah avatar",
+  "profile_username": "Nama pengguna",
+  "profile_email": "Email",
+  "profile_change_password": "Ubah kata sandi",
+  "profile_current_password": "Kata sandi saat ini",
+  "profile_new_password": "Kata sandi baru",
+  "profile_confirm_password": "Konfirmasi kata sandi",
+  "profile_save_password": "Simpan kata sandi",
+  "profile_appearance_heading": "Tampilan",
+  "profile_theme_label": "Tema",
+  "profile_theme_amber": "Amber",
+  "profile_theme_slate": "Abu-abu",
+  "profile_theme_rose": "Mawar",
+  "profile_reading_heading": "Pengaturan membaca",
+  "profile_voice_label": "Suara default",
+  "profile_speed_label": "Kecepatan pemutaran",
+  "profile_auto_next_label": "Auto-lanjut bab",
+  "profile_save_settings": "Simpan pengaturan",
+  "profile_settings_saved": "Pengaturan disimpan.",
+  "profile_settings_error": "Gagal menyimpan pengaturan.",
+  "profile_password_saved": "Kata sandi diubah.",
+  "profile_password_error": "Gagal mengubah kata sandi.",
+  "profile_sessions_heading": "Sesi aktif",
+  "profile_sign_out_all": "Keluar dari semua perangkat lain",
+  "profile_joined": "Bergabung {date}",
+
+  "user_page_title": "{username} — libnovel",
+  "user_library_heading": "Perpustakaan {username}",
+  "user_follow": "Ikuti",
+  "user_unfollow": "Berhenti mengikuti",
+  "user_followers": "{n} pengikut",
+  "user_following": "{n} mengikuti",
+  "user_library_empty": "Tidak ada buku di perpustakaan.",
+
+  "error_not_found_title": "Halaman tidak ditemukan",
+  "error_not_found_body": "Halaman yang kamu cari tidak ada.",
+  "error_generic_title": "Terjadi kesalahan",
+  "error_go_home": "Ke beranda",
+  "error_status": "Error {status}",
+
+  "admin_scrape_page_title": "Scrape — Admin",
+  "admin_scrape_heading": "Scrape",
+  "admin_scrape_catalogue": "Scrape Katalog",
+  "admin_scrape_book": "Scrape Buku",
+  "admin_scrape_url_placeholder": "URL buku di novelfire.net",
+  "admin_scrape_range": "Rentang bab",
+  "admin_scrape_from": "Dari",
+  "admin_scrape_to": "Sampai",
+  "admin_scrape_submit": "Scrape",
+  "admin_scrape_cancel": "Batal",
+  "admin_scrape_status_pending": "Menunggu",
+  "admin_scrape_status_running": "Berjalan",
+  "admin_scrape_status_done": "Selesai",
+  "admin_scrape_status_failed": "Gagal",
+  "admin_scrape_status_cancelled": "Dibatalkan",
+  "admin_tasks_heading": "Tugas terbaru",
+  "admin_tasks_empty": "Belum ada tugas.",
+
+  "admin_audio_page_title": "Audio — Admin",
+  "admin_audio_heading": "Tugas Audio",
+  "admin_audio_empty": "Tidak ada tugas audio.",
+
+  "admin_changelog_page_title": "Changelog — Admin",
+  "admin_changelog_heading": "Changelog",
+
+  "comments_heading": "Komentar",
+  "comments_empty": "Belum ada komentar. Jadilah yang pertama!",
+  "comments_placeholder": "Tulis komentar…",
+  "comments_submit": "Kirim",
+  "comments_login_prompt": "Masuk untuk berkomentar.",
+  "comments_vote_up": "Suka",
+  "comments_vote_down": "Tidak suka",
+  "comments_delete": "Hapus",
+  "comments_reply": "Balas",
+  "comments_show_replies": "Tampilkan {n} balasan",
+  "comments_hide_replies": "Sembunyikan balasan",
+  "comments_edited": "diedit",
+  "comments_deleted": "[dihapus]",
+
+  "disclaimer_page_title": "Penyangkalan — libnovel",
+  "privacy_page_title": "Kebijakan Privasi — libnovel",
+  "dmca_page_title": "DMCA — libnovel",
+  "terms_page_title": "Syarat Layanan — libnovel",
+
+  "common_loading": "Memuat…",
+  "common_error": "Error",
+  "common_save": "Simpan",
+  "common_cancel": "Batal",
+  "common_close": "Tutup",
+  "common_search": "Cari",
+  "common_back": "Kembali",
+  "common_next": "Berikutnya",
+  "common_previous": "Sebelumnya",
+  "common_yes": "Ya",
+  "common_no": "Tidak",
+  "common_on": "aktif",
+  "common_off": "nonaktif",
+
+  "locale_switcher_label": "Bahasa",
+
+  "books_empty_library": "Perpustakaanmu kosong.",
+  "books_empty_discover": "Buku yang mulai kamu baca atau simpan dari",
+  "books_empty_discover_link": "Temukan",
+  "books_empty_discover_suffix": "akan muncul di sini.",
+  "books_count": "{n} buku",
+
+  "catalogue_sort_updated": "Diperbarui",
+  "catalogue_search_button": "Cari",
+  "catalogue_refresh": "Segarkan",
+  "catalogue_refreshing": "Mengantri…",
+  "catalogue_refresh_mobile": "Segarkan katalog",
+  "catalogue_all_loaded": "Semua novel telah dimuat",
+  "catalogue_scroll_top": "Kembali ke atas",
+  "catalogue_view_grid": "Tampilan kisi",
+  "catalogue_view_list": "Tampilan daftar",
+  "catalogue_browse_source": "Jelajahi novel dari novelfire.net",
+  "catalogue_search_results": "{n} hasil untuk \"{q}\"",
+  "catalogue_search_local_count": "({local} lokal, {remote} dari novelfire)",
+  "catalogue_rank_ranked": "{n} novel diurutkan dari scrape katalog terakhir",
+  "catalogue_rank_no_data": "Tidak ada data peringkat.",
+  "catalogue_rank_no_data_body": "Tidak ada data peringkat — jalankan scrape katalog penuh untuk mengisi",
+  "catalogue_rank_run_scrape_admin": "Klik Segarkan katalog di atas untuk memicu scrape katalog penuh.",
+  "catalogue_rank_run_scrape_user": "Minta admin untuk menjalankan scrape katalog.",
+  "catalogue_scrape_queued_flash": "Scrape katalog penuh diantrekan. Perpustakaan dan peringkat akan diperbarui saat buku diproses.",
+  "catalogue_scrape_busy_flash": "Pekerjaan scrape sedang berjalan. Periksa kembali setelah selesai.",
+  "catalogue_scrape_error_flash": "Gagal mengantrekan scrape. Pastikan layanan scraper dapat dijangkau.",
+  "catalogue_filters_label": "Filter",
+  "catalogue_apply": "Terapkan",
+  "catalogue_filter_rank_note": "Filter genre & status hanya berlaku untuk Jelajahi",
+  "catalogue_no_results_search": "Tidak ada hasil.",
+  "catalogue_no_results_try": "Coba kata kunci lain.",
+  "catalogue_no_results_filters": "Coba filter lain atau periksa kembali nanti.",
+  "catalogue_scrape_queued_badge": "Diantrekan",
+  "catalogue_scrape_busy_badge": "Scraper sibuk",
+  "catalogue_scrape_busy_list": "Sibuk",
+  "catalogue_scrape_forbidden_badge": "Terlarang",
+  "catalogue_scrape_novel_button": "Scrape",
+  "catalogue_scraping_novel": "Scraping…",
+
+  "book_detail_not_in_library": "tidak di perpustakaan",
+  "book_detail_continue_ch": "Lanjutkan bab.{n}",
+  "book_detail_start_ch1": "Mulai dari bab.1",
+  "book_detail_preview_ch1": "Pratinjau bab.1",
+  "book_detail_reading_ch": "Membaca bab.{n} dari {total}",
+  "book_detail_n_chapters": "{n} bab",
+  "book_detail_rescraping": "Mengantri…",
+  "book_detail_from_chapter": "Dari bab",
+  "book_detail_to_chapter": "Sampai bab (opsional)",
+  "book_detail_range_queuing": "Mengantri…",
+  "book_detail_scrape_range": "Rentang scrape",
+  "book_detail_admin": "Admin",
+  "book_detail_scraping_progress": "Mengambil 20 bab pertama. Halaman ini akan dimuat ulang otomatis.",
+  "book_detail_scraping_home": "← Beranda",
+  "book_detail_rescrape_book": "Scrape ulang buku",
+  "book_detail_less": "Lebih sedikit",
+  "book_detail_more": "Selengkapnya",
+
+  "chapters_search_placeholder": "Cari bab…",
+  "chapters_jump_to": "Loncat ke Bab.{n}",
+  "chapters_no_match": "Tidak ada bab yang cocok dengan \"{q}\"",
+  "chapters_none_available": "Belum ada bab tersedia.",
+  "chapters_reading_indicator": "sedang dibaca",
+  "chapters_result_count": "{n} hasil",
+
+  "reader_fetching_chapter": "Mengambil bab…",
+  "reader_words": "{n} kata",
+  "reader_preview_audio_notice": "Pratinjau — audio tidak tersedia untuk buku di luar perpustakaan.",
+
+  "profile_click_to_change": "Klik avatar untuk mengganti foto",
+  "profile_tts_voice": "Suara TTS",
+  "profile_auto_advance": "Otomatis lanjut ke bab berikutnya",
+  "profile_saving": "Menyimpan…",
+  "profile_saved": "Tersimpan!",
+  "profile_session_this": "Sesi ini",
+  "profile_session_signed_in": "Masuk {date}",
+  "profile_session_last_seen": "· Terakhir dilihat {date}",
+  "profile_session_sign_out": "Keluar",
+  "profile_session_end": "Akhiri",
+  "profile_session_unrecognised": "Ini semua perangkat yang masuk ke akunmu. Akhiri sesi yang tidak kamu kenali.",
+  "profile_no_sessions": "Tidak ada catatan sesi. Sesi dilacak mulai login berikutnya.",
+  "profile_change_password_heading": "Ubah kata sandi",
+  "profile_update_password": "Perbarui kata sandi",
+  "profile_updating": "Memperbarui…",
+  "profile_password_changed_ok": "Kata sandi berhasil diubah.",
+  "profile_playback_speed": "Kecepatan pemutaran — {speed}x",
+
+  "user_currently_reading": "Sedang Dibaca",
+  "user_library_count": "Perpustakaan ({n})",
+  "user_joined": "Bergabung {date}",
+  "user_followers_label": "pengikut",
+  "user_following_label": "mengikuti",
+  "user_no_books": "Belum ada buku di perpustakaan.",
+
+  "admin_pages_label": "Halaman",
+  "admin_tools_label": "Alat",
+
+  "admin_scrape_status_idle": "Menunggu",
+  "admin_scrape_full_catalogue": "Katalog penuh",
+  "admin_scrape_single_book": "Satu buku",
+  "admin_scrape_quick_genres": "Genre cepat",
+  "admin_scrape_task_history": "Riwayat tugas",
+  "admin_scrape_filter_placeholder": "Filter berdasarkan jenis, status, atau URL…",
+  "admin_scrape_no_matching": "Tidak ada tugas yang cocok.",
+  "admin_scrape_start": "Mulai scrape",
+  "admin_scrape_queuing": "Mengantri…",
+  "admin_scrape_running": "Berjalan…",
+
+  "admin_audio_filter_jobs": "Filter berdasarkan slug, suara, atau status…",
+  "admin_audio_filter_cache": "Filter berdasarkan slug, bab, atau suara…",
+  "admin_audio_no_matching_jobs": "Tidak ada pekerjaan yang cocok.",
+  "admin_audio_no_jobs": "Belum ada pekerjaan audio.",
+  "admin_audio_cache_empty": "Cache audio kosong.",
+  "admin_audio_no_cache_results": "Tidak ada hasil.",
+
+  "admin_changelog_gitea": "Rilis Gitea",
+  "admin_changelog_no_releases": "Tidak ada rilis.",
+  "admin_changelog_load_error": "Gagal memuat rilis: {error}",
+
+  "comments_top": "Teratas",
+  "comments_new": "Terbaru",
+  "comments_posting": "Mengirim…",
+  "comments_login_link": "Masuk",
+  "comments_login_suffix": "untuk meninggalkan komentar.",
+  "comments_anonymous": "Anonim",
+
+  "reader_audio_narration": "Narasi Audio",
+  "reader_playing": "Memutar — kontrol di bawah",
+  "reader_paused": "Dijeda — kontrol di bawah",
+  "reader_ch_ready": "Bab.{n} siap",
+  "reader_ch_preparing": "Menyiapkan Bab.{n}… {percent}%",
+  "reader_ch_generate_on_nav": "Bab.{n} akan dihasilkan saat navigasi",
+  "reader_now_playing": "Sedang diputar: {title}",
+  "reader_load_this_chapter": "Muat bab ini",
+  "reader_generate_samples": "Hasilkan sampel yang hilang",
+  "reader_voice_applies_next": "Suara baru berlaku pada \"Putar narasi\" berikutnya.",
+  "reader_choose_voice": "Pilih Suara",
+  "reader_generating_narration": "Membuat narasi…"
+}

ui/messages/pt-BR.json

@@ -0,0 +1,383 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+
+  "nav_library": "Biblioteca",
+  "nav_catalogue": "Catálogo",
+  "nav_feedback": "Feedback",
+  "nav_admin": "Admin",
+  "nav_profile": "Perfil",
+  "nav_sign_in": "Entrar",
+  "nav_sign_out": "Sair",
+  "nav_toggle_menu": "Menu",
+  "nav_admin_panel": "Painel admin",
+
+  "footer_library": "Biblioteca",
+  "footer_catalogue": "Catálogo",
+  "footer_feedback": "Feedback",
+  "footer_disclaimer": "Aviso legal",
+  "footer_privacy": "Privacidade",
+  "footer_dmca": "DMCA",
+  "footer_copyright": "© {year} libnovel",
+  "footer_dev": "dev",
+
+  "home_title": "libnovel",
+  "home_stat_books": "Livros",
+  "home_stat_chapters": "Capítulos",
+  "home_stat_in_progress": "Em andamento",
+  "home_continue_reading": "Continuar Lendo",
+  "home_view_all": "Ver tudo",
+  "home_recently_updated": "Atualizados Recentemente",
+  "home_from_following": "De Quem Você Segue",
+  "home_empty_title": "Sua biblioteca está vazia",
+  "home_empty_body": "Descubra romances e adicione à sua biblioteca.",
+  "home_discover_novels": "Descobrir Romances",
+  "home_via_reader": "via {username}",
+  "home_chapter_badge": "cap.{n}",
+
+  "player_generating": "Gerando… {percent}%",
+  "player_loading": "Carregando…",
+  "player_chapters": "Capítulos",
+  "player_chapter_n": "Capítulo {n}",
+  "player_toggle_chapter_list": "Lista de capítulos",
+  "player_chapter_list_label": "Lista de capítulos",
+  "player_close_chapter_list": "Fechar lista de capítulos",
+  "player_rewind_15": "Voltar 15 segundos",
+  "player_skip_30": "Avançar 30 segundos",
+  "player_back_15": "−15 s",
+  "player_forward_30": "+30 s",
+  "player_play": "Reproduzir",
+  "player_pause": "Pausar",
+  "player_speed_label": "Velocidade {speed}x",
+  "player_change_speed": "Mudar velocidade",
+  "player_auto_next_on": "Próximo automático ativado",
+  "player_auto_next_off": "Próximo automático desativado",
+  "player_auto_next_ready": "Próximo automático — Cap.{n} pronto",
+  "player_auto_next_preparing": "Próximo automático — preparando Cap.{n}…",
+  "player_auto_next_aria": "Próximo automático {state}",
+  "player_go_to_chapter": "Ir para capítulo",
+  "player_close": "Fechar player",
+
+  "login_page_title": "Entrar — libnovel",
+  "login_heading": "Entrar no libnovel",
+  "login_subheading": "Escolha um provedor para continuar",
+  "login_continue_google": "Continuar com Google",
+  "login_continue_github": "Continuar com GitHub",
+  "login_terms_notice": "Ao entrar, você concorda com nossos termos de serviço.",
+  "login_error_oauth_state": "Login cancelado ou expirado. Tente novamente.",
+  "login_error_oauth_failed": "Não foi possível conectar ao provedor. Tente novamente.",
+  "login_error_oauth_no_email": "Sua conta não tem endereço de email verificado. Adicione um e tente novamente.",
+
+  "books_page_title": "Biblioteca — libnovel",
+  "books_heading": "Sua Biblioteca",
+  "books_empty_title": "Nenhum livro ainda",
+  "books_empty_body": "Adicione livros à sua biblioteca visitando a página de um livro.",
+  "books_browse_catalogue": "Explorar Catálogo",
+  "books_chapter_count": "{n} capítulos",
+  "books_last_read": "Último: Cap.{n}",
+  "books_reading_progress": "Cap.{current} / {total}",
+  "books_remove": "Remover",
+
+  "catalogue_page_title": "Catálogo — libnovel",
+  "catalogue_heading": "Catálogo",
+  "catalogue_search_placeholder": "Pesquisar romances…",
+  "catalogue_filter_genre": "Gênero",
+  "catalogue_filter_status": "Status",
+  "catalogue_filter_sort": "Ordenar",
+  "catalogue_sort_popular": "Popular",
+  "catalogue_sort_new": "Novo",
+  "catalogue_sort_top_rated": "Mais Bem Avaliados",
+  "catalogue_sort_rank": "Ranking",
+  "catalogue_status_all": "Todos",
+  "catalogue_status_ongoing": "Em andamento",
+  "catalogue_status_completed": "Concluído",
+  "catalogue_genre_all": "Todos os gêneros",
+  "catalogue_clear_filters": "Limpar",
+  "catalogue_reset": "Redefinir",
+  "catalogue_no_results": "Nenhum romance encontrado.",
+  "catalogue_loading": "Carregando…",
+  "catalogue_load_more": "Carregar mais",
+  "catalogue_results_count": "{n} resultados",
+
+  "book_detail_page_title": "{title} — libnovel",
+  "book_detail_add_to_library": "Adicionar à Biblioteca",
+  "book_detail_remove_from_library": "Remover da Biblioteca",
+  "book_detail_read_now": "Ler Agora",
+  "book_detail_continue_reading": "Continuar Lendo",
+  "book_detail_start_reading": "Começar a Ler",
+  "book_detail_chapters": "{n} Capítulos",
+  "book_detail_status": "Status",
+  "book_detail_author": "Autor",
+  "book_detail_genres": "Gêneros",
+  "book_detail_description": "Descrição",
+  "book_detail_source": "Fonte",
+  "book_detail_rescrape": "Atualizar",
+  "book_detail_scraping": "Atualizando…",
+  "book_detail_in_library": "Na Biblioteca",
+
+  "chapters_page_title": "Capítulos — {title}",
+  "chapters_heading": "Capítulos",
+  "chapters_back_to_book": "Voltar ao livro",
+  "chapters_reading_now": "Lendo",
+  "chapters_empty": "Nenhum capítulo extraído ainda.",
+
+  "reader_page_title": "{title} — Cap.{n} — libnovel",
+  "reader_play_narration": "Reproduzir narração",
+  "reader_generating_audio": "Gerando áudio…",
+  "reader_audio_error": "Falha na geração de áudio.",
+  "reader_prev_chapter": "Capítulo anterior",
+  "reader_next_chapter": "Próximo capítulo",
+  "reader_back_to_chapters": "Voltar aos capítulos",
+  "reader_chapter_n": "Capítulo {n}",
+  "reader_change_voice": "Mudar voz",
+  "reader_voice_panel_title": "Selecionar voz",
+  "reader_voice_kokoro": "Vozes Kokoro",
+  "reader_voice_pocket": "Vozes Pocket-TTS",
+  "reader_voice_play_sample": "Reproduzir amostra",
+  "reader_voice_stop_sample": "Parar amostra",
+  "reader_voice_selected": "Selecionado",
+  "reader_close_voice_panel": "Fechar painel de voz",
+  "reader_auto_next": "Próximo automático",
+  "reader_speed": "Velocidade",
+  "reader_preview_notice": "Prévia — este capítulo não foi totalmente extraído.",
+
+  "profile_page_title": "Perfil — libnovel",
+  "profile_heading": "Perfil",
+  "profile_avatar_label": "Avatar",
+  "profile_change_avatar": "Mudar avatar",
+  "profile_username": "Nome de usuário",
+  "profile_email": "Email",
+  "profile_change_password": "Mudar senha",
+  "profile_current_password": "Senha atual",
+  "profile_new_password": "Nova senha",
+  "profile_confirm_password": "Confirmar senha",
+  "profile_save_password": "Salvar senha",
+  "profile_appearance_heading": "Aparência",
+  "profile_theme_label": "Tema",
+  "profile_theme_amber": "Âmbar",
+  "profile_theme_slate": "Ardósia",
+  "profile_theme_rose": "Rosa",
+  "profile_reading_heading": "Configurações de leitura",
+  "profile_voice_label": "Voz padrão",
+  "profile_speed_label": "Velocidade de reprodução",
+  "profile_auto_next_label": "Próximo capítulo automático",
+  "profile_save_settings": "Salvar configurações",
+  "profile_settings_saved": "Configurações salvas.",
+  "profile_settings_error": "Falha ao salvar configurações.",
+  "profile_password_saved": "Senha alterada.",
+  "profile_password_error": "Falha ao alterar a senha.",
+  "profile_sessions_heading": "Sessões ativas",
+  "profile_sign_out_all": "Sair de todos os outros dispositivos",
+  "profile_joined": "Entrou em {date}",
+
+  "user_page_title": "{username} — libnovel",
+  "user_library_heading": "Biblioteca de {username}",
+  "user_follow": "Seguir",
+  "user_unfollow": "Deixar de seguir",
+  "user_followers": "{n} seguidores",
+  "user_following": "{n} seguindo",
+  "user_library_empty": "Nenhum livro na biblioteca.",
+
+  "error_not_found_title": "Página não encontrada",
+  "error_not_found_body": "A página que você procura não existe.",
+  "error_generic_title": "Algo deu errado",
+  "error_go_home": "Ir para início",
+  "error_status": "Erro {status}",
+
+  "admin_scrape_page_title": "Extração — Admin",
+  "admin_scrape_heading": "Extração",
+  "admin_scrape_catalogue": "Extrair Catálogo",
+  "admin_scrape_book": "Extrair Livro",
+  "admin_scrape_url_placeholder": "URL do livro em novelfire.net",
+  "admin_scrape_range": "Intervalo de capítulos",
+  "admin_scrape_from": "De",
+  "admin_scrape_to": "Até",
+  "admin_scrape_submit": "Extrair",
+  "admin_scrape_cancel": "Cancelar",
+  "admin_scrape_status_pending": "Pendente",
+  "admin_scrape_status_running": "Em execução",
+  "admin_scrape_status_done": "Concluído",
+  "admin_scrape_status_failed": "Falhou",
+  "admin_scrape_status_cancelled": "Cancelado",
+  "admin_tasks_heading": "Tarefas recentes",
+  "admin_tasks_empty": "Nenhuma tarefa ainda.",
+
+  "admin_audio_page_title": "Áudio — Admin",
+  "admin_audio_heading": "Tarefas de Áudio",
+  "admin_audio_empty": "Nenhuma tarefa de áudio.",
+
+  "admin_changelog_page_title": "Changelog — Admin",
+  "admin_changelog_heading": "Changelog",
+
+  "comments_heading": "Comentários",
+  "comments_empty": "Nenhum comentário ainda. Seja o primeiro!",
+  "comments_placeholder": "Escreva um comentário…",
+  "comments_submit": "Publicar",
+  "comments_login_prompt": "Entre para comentar.",
+  "comments_vote_up": "Votar positivo",
+  "comments_vote_down": "Votar negativo",
+  "comments_delete": "Excluir",
+  "comments_reply": "Responder",
+  "comments_show_replies": "Mostrar {n} respostas",
+  "comments_hide_replies": "Ocultar respostas",
+  "comments_edited": "editado",
+  "comments_deleted": "[excluído]",
+
+  "disclaimer_page_title": "Aviso Legal — libnovel",
+  "privacy_page_title": "Política de Privacidade — libnovel",
+  "dmca_page_title": "DMCA — libnovel",
+  "terms_page_title": "Termos de Serviço — libnovel",
+
+  "common_loading": "Carregando…",
+  "common_error": "Erro",
+  "common_save": "Salvar",
+  "common_cancel": "Cancelar",
+  "common_close": "Fechar",
+  "common_search": "Pesquisar",
+  "common_back": "Voltar",
+  "common_next": "Próximo",
+  "common_previous": "Anterior",
+  "common_yes": "Sim",
+  "common_no": "Não",
+  "common_on": "ativado",
+  "common_off": "desativado",
+
+  "locale_switcher_label": "Idioma",
+
+  "books_empty_library": "Sua biblioteca está vazia.",
+  "books_empty_discover": "Livros que você começar a ler ou salvar de",
+  "books_empty_discover_link": "Descobrir",
+  "books_empty_discover_suffix": "aparecerão aqui.",
+  "books_count": "{n} livro{s}",
+
+  "catalogue_sort_updated": "Atualizado",
+  "catalogue_search_button": "Pesquisar",
+  "catalogue_refresh": "Atualizar",
+  "catalogue_refreshing": "Na fila…",
+  "catalogue_refresh_mobile": "Atualizar catálogo",
+  "catalogue_all_loaded": "Todos os romances carregados",
+  "catalogue_scroll_top": "Voltar ao topo",
+  "catalogue_view_grid": "Visualização em grade",
+  "catalogue_view_list": "Visualização em lista",
+  "catalogue_browse_source": "Explorar romances do novelfire.net",
+  "catalogue_search_results": "{n} resultado{s} para \"{q}\"",
+  "catalogue_search_local_count": "({local} local, {remote} do novelfire)",
+  "catalogue_rank_ranked": "{n} romances classificados do último scrape do catálogo",
+  "catalogue_rank_no_data": "Sem dados de classificação.",
+  "catalogue_rank_no_data_body": "Sem dados de classificação — execute um scrape completo do catálogo para preencher",
+  "catalogue_rank_run_scrape_admin": "Clique em Atualizar catálogo acima para acionar um scrape completo.",
+  "catalogue_rank_run_scrape_user": "Peça a um administrador para executar um scrape do catálogo.",
+  "catalogue_scrape_queued_flash": "Scrape completo do catálogo na fila. A biblioteca e a classificação serão atualizadas conforme os livros forem processados.",
+  "catalogue_scrape_busy_flash": "Um job de scrape já está em execução. Volte quando terminar.",
+  "catalogue_scrape_error_flash": "Falha ao enfileirar o scrape. Verifique se o serviço de scraper está acessível.",
+  "catalogue_filters_label": "Filtros",
+  "catalogue_apply": "Aplicar",
+  "catalogue_filter_rank_note": "Filtros de gênero e status se aplicam apenas a Explorar",
+  "catalogue_no_results_search": "Nenhum resultado encontrado.",
+  "catalogue_no_results_try": "Tente um termo de pesquisa diferente.",
+  "catalogue_no_results_filters": "Tente filtros diferentes ou volte mais tarde.",
+  "catalogue_scrape_queued_badge": "Na fila",
+  "catalogue_scrape_busy_badge": "Scraper ocupado",
+  "catalogue_scrape_busy_list": "Ocupado",
+  "catalogue_scrape_forbidden_badge": "Proibido",
+  "catalogue_scrape_novel_button": "Extrair",
+  "catalogue_scraping_novel": "Extraindo…",
+
+  "book_detail_not_in_library": "não está na biblioteca",
+  "book_detail_continue_ch": "Continuar cap.{n}",
+  "book_detail_start_ch1": "Começar pelo cap.1",
+  "book_detail_preview_ch1": "Prévia do cap.1",
+  "book_detail_reading_ch": "Lendo cap.{n} de {total}",
+  "book_detail_n_chapters": "{n} capítulos",
+  "book_detail_rescraping": "Na fila…",
+  "book_detail_from_chapter": "A partir do capítulo",
+  "book_detail_to_chapter": "Até o capítulo (opcional)",
+  "book_detail_range_queuing": "Na fila…",
+  "book_detail_scrape_range": "Intervalo de extração",
+  "book_detail_admin": "Admin",
+  "book_detail_scraping_progress": "Buscando os primeiros 20 capítulos. Esta página será atualizada automaticamente.",
+  "book_detail_scraping_home": "← Início",
+  "book_detail_rescrape_book": "Reextrair livro",
+  "book_detail_less": "Menos",
+  "book_detail_more": "Mais",
+
+  "chapters_search_placeholder": "Pesquisar capítulos…",
+  "chapters_jump_to": "Ir para Cap.{n}",
+  "chapters_no_match": "Nenhum capítulo encontrado para \"{q}\"",
+  "chapters_none_available": "Nenhum capítulo disponível ainda.",
+  "chapters_reading_indicator": "lendo",
+  "chapters_result_count": "{n} resultados",
+
+  "reader_fetching_chapter": "Buscando capítulo…",
+  "reader_words": "{n} palavras",
+  "reader_preview_audio_notice": "Prévia — áudio não disponível para livros fora da biblioteca.",
+
+  "profile_click_to_change": "Clique no avatar para mudar a foto",
+  "profile_tts_voice": "Voz TTS",
+  "profile_auto_advance": "Avançar automaticamente para o próximo capítulo",
+  "profile_saving": "Salvando…",
+  "profile_saved": "Salvo!",
+  "profile_session_this": "Esta sessão",
+  "profile_session_signed_in": "Entrou em {date}",
+  "profile_session_last_seen": "· Visto por último em {date}",
+  "profile_session_sign_out": "Sair",
+  "profile_session_end": "Encerrar",
+  "profile_session_unrecognised": "Estes são todos os dispositivos conectados à sua conta. Encerre qualquer sessão que não reconhecer.",
+  "profile_no_sessions": "Nenhum registro de sessão encontrado. As sessões são rastreadas a partir do próximo login.",
+  "profile_change_password_heading": "Mudar senha",
+  "profile_update_password": "Atualizar senha",
+  "profile_updating": "Atualizando…",
+  "profile_password_changed_ok": "Senha alterada com sucesso.",
+  "profile_playback_speed": "Velocidade de reprodução — {speed}x",
+
+  "user_currently_reading": "Lendo Agora",
+  "user_library_count": "Biblioteca ({n})",
+  "user_joined": "Entrou em {date}",
+  "user_followers_label": "seguidores",
+  "user_following_label": "seguindo",
+  "user_no_books": "Nenhum livro na biblioteca ainda.",
+
+  "admin_pages_label": "Páginas",
+  "admin_tools_label": "Ferramentas",
+
+  "admin_scrape_status_idle": "Ocioso",
+  "admin_scrape_full_catalogue": "Catálogo completo",
+  "admin_scrape_single_book": "Livro único",
+  "admin_scrape_quick_genres": "Gêneros rápidos",
+  "admin_scrape_task_history": "Histórico de tarefas",
+  "admin_scrape_filter_placeholder": "Filtrar por tipo, status ou URL…",
+  "admin_scrape_no_matching": "Nenhuma tarefa correspondente.",
+  "admin_scrape_start": "Iniciar extração",
+  "admin_scrape_queuing": "Na fila…",
+  "admin_scrape_running": "Executando…",
+
+  "admin_audio_filter_jobs": "Filtrar por slug, voz ou status…",
+  "admin_audio_filter_cache": "Filtrar por slug, capítulo ou voz…",
+  "admin_audio_no_matching_jobs": "Nenhum job correspondente.",
+  "admin_audio_no_jobs": "Nenhum job de áudio ainda.",
+  "admin_audio_cache_empty": "Cache de áudio vazio.",
+  "admin_audio_no_cache_results": "Sem resultados.",
+
+  "admin_changelog_gitea": "Releases do Gitea",
+  "admin_changelog_no_releases": "Nenhum release encontrado.",
+  "admin_changelog_load_error": "Não foi possível carregar os releases: {error}",
+
+  "comments_top": "Mais votados",
+  "comments_new": "Novos",
+  "comments_posting": "Publicando…",
+  "comments_login_link": "Entre",
+  "comments_login_suffix": "para deixar um comentário.",
+  "comments_anonymous": "Anônimo",
+
+  "reader_audio_narration": "Narração em Áudio",
+  "reader_playing": "Reproduzindo — controles abaixo",
+  "reader_paused": "Pausado — controles abaixo",
+  "reader_ch_ready": "Cap.{n} pronto",
+  "reader_ch_preparing": "Preparando Cap.{n}… {percent}%",
+  "reader_ch_generate_on_nav": "Cap.{n} será gerado ao navegar",
+  "reader_now_playing": "Reproduzindo: {title}",
+  "reader_load_this_chapter": "Carregar este capítulo",
+  "reader_generate_samples": "Gerar amostras ausentes",
+  "reader_voice_applies_next": "A nova voz será aplicada no próximo \"Reproduzir narração\".",
+  "reader_choose_voice": "Escolher Voz",
+  "reader_generating_narration": "Gerando narração…"
+}

ui/messages/ru.json

@@ -0,0 +1,383 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+
+  "nav_library": "Библиотека",
+  "nav_catalogue": "Каталог",
+  "nav_feedback": "Обратная связь",
+  "nav_admin": "Админ",
+  "nav_profile": "Профиль",
+  "nav_sign_in": "Войти",
+  "nav_sign_out": "Выйти",
+  "nav_toggle_menu": "Меню",
+  "nav_admin_panel": "Панель администратора",
+
+  "footer_library": "Библиотека",
+  "footer_catalogue": "Каталог",
+  "footer_feedback": "Обратная связь",
+  "footer_disclaimer": "Отказ от ответственности",
+  "footer_privacy": "Конфиденциальность",
+  "footer_dmca": "DMCA",
+  "footer_copyright": "© {year} libnovel",
+  "footer_dev": "dev",
+
+  "home_title": "libnovel",
+  "home_stat_books": "Книги",
+  "home_stat_chapters": "Главы",
+  "home_stat_in_progress": "В процессе",
+  "home_continue_reading": "Продолжить чтение",
+  "home_view_all": "Смотреть все",
+  "home_recently_updated": "Недавно обновлённые",
+  "home_from_following": "От авторов, на которых вы подписаны",
+  "home_empty_title": "Ваша библиотека пуста",
+  "home_empty_body": "Откройте для себя новеллы и добавьте их в библиотеку.",
+  "home_discover_novels": "Открыть новеллы",
+  "home_via_reader": "от {username}",
+  "home_chapter_badge": "гл.{n}",
+
+  "player_generating": "Генерация… {percent}%",
+  "player_loading": "Загрузка…",
+  "player_chapters": "Главы",
+  "player_chapter_n": "Глава {n}",
+  "player_toggle_chapter_list": "Список глав",
+  "player_chapter_list_label": "Список глав",
+  "player_close_chapter_list": "Закрыть список глав",
+  "player_rewind_15": "Назад 15 секунд",
+  "player_skip_30": "Вперёд 30 секунд",
+  "player_back_15": "−15 сек",
+  "player_forward_30": "+30 сек",
+  "player_play": "Воспроизвести",
+  "player_pause": "Пауза",
+  "player_speed_label": "Скорость {speed}x",
+  "player_change_speed": "Изменить скорость",
+  "player_auto_next_on": "Автопереход вкл.",
+  "player_auto_next_off": "Автопереход выкл.",
+  "player_auto_next_ready": "Автопереход — гл.{n} готова",
+  "player_auto_next_preparing": "Автопереход — подготовка гл.{n}…",
+  "player_auto_next_aria": "Автопереход {state}",
+  "player_go_to_chapter": "Перейти к главе",
+  "player_close": "Закрыть плеер",
+
+  "login_page_title": "Вход — libnovel",
+  "login_heading": "Войти в libnovel",
+  "login_subheading": "Выберите провайдера для входа",
+  "login_continue_google": "Продолжить с Google",
+  "login_continue_github": "Продолжить с GitHub",
+  "login_terms_notice": "Входя, вы принимаете наши условия использования.",
+  "login_error_oauth_state": "Вход отменён или истёк срок действия. Попробуйте снова.",
+  "login_error_oauth_failed": "Не удалось подключиться к провайдеру. Попробуйте снова.",
+  "login_error_oauth_no_email": "У вашего аккаунта нет подтверждённого email. Добавьте его и повторите попытку.",
+
+  "books_page_title": "Библиотека — libnovel",
+  "books_heading": "Ваша библиотека",
+  "books_empty_title": "Книг пока нет",
+  "books_empty_body": "Добавляйте книги в библиотеку, посещая страницы книг.",
+  "books_browse_catalogue": "Обзор каталога",
+  "books_chapter_count": "{n} глав",
+  "books_last_read": "Последнее: гл.{n}",
+  "books_reading_progress": "Гл.{current} / {total}",
+  "books_remove": "Удалить",
+
+  "catalogue_page_title": "Каталог — libnovel",
+  "catalogue_heading": "Каталог",
+  "catalogue_search_placeholder": "Поиск новелл…",
+  "catalogue_filter_genre": "Жанр",
+  "catalogue_filter_status": "Статус",
+  "catalogue_filter_sort": "Сортировка",
+  "catalogue_sort_popular": "Популярные",
+  "catalogue_sort_new": "Новые",
+  "catalogue_sort_top_rated": "Топ по рейтингу",
+  "catalogue_sort_rank": "По рангу",
+  "catalogue_status_all": "Все",
+  "catalogue_status_ongoing": "Продолжаются",
+  "catalogue_status_completed": "Завершены",
+  "catalogue_genre_all": "Все жанры",
+  "catalogue_clear_filters": "Сбросить",
+  "catalogue_reset": "Сброс",
+  "catalogue_no_results": "Новеллы не найдены.",
+  "catalogue_loading": "Загрузка…",
+  "catalogue_load_more": "Загрузить ещё",
+  "catalogue_results_count": "{n} результатов",
+
+  "book_detail_page_title": "{title} — libnovel",
+  "book_detail_add_to_library": "В библиотеку",
+  "book_detail_remove_from_library": "Удалить из библиотеки",
+  "book_detail_read_now": "Читать",
+  "book_detail_continue_reading": "Продолжить чтение",
+  "book_detail_start_reading": "Начать чтение",
+  "book_detail_chapters": "{n} глав",
+  "book_detail_status": "Статус",
+  "book_detail_author": "Автор",
+  "book_detail_genres": "Жанры",
+  "book_detail_description": "Описание",
+  "book_detail_source": "Источник",
+  "book_detail_rescrape": "Обновить",
+  "book_detail_scraping": "Обновление…",
+  "book_detail_in_library": "В библиотеке",
+
+  "chapters_page_title": "Главы — {title}",
+  "chapters_heading": "Главы",
+  "chapters_back_to_book": "К книге",
+  "chapters_reading_now": "Читается",
+  "chapters_empty": "Главы ещё не загружены.",
+
+  "reader_page_title": "{title} — Гл.{n} — libnovel",
+  "reader_play_narration": "Воспроизвести озвучку",
+  "reader_generating_audio": "Генерация аудио…",
+  "reader_audio_error": "Ошибка генерации аудио.",
+  "reader_prev_chapter": "Предыдущая глава",
+  "reader_next_chapter": "Следующая глава",
+  "reader_back_to_chapters": "К главам",
+  "reader_chapter_n": "Глава {n}",
+  "reader_change_voice": "Сменить голос",
+  "reader_voice_panel_title": "Выбрать голос",
+  "reader_voice_kokoro": "Голоса Kokoro",
+  "reader_voice_pocket": "Голоса Pocket-TTS",
+  "reader_voice_play_sample": "Прослушать образец",
+  "reader_voice_stop_sample": "Остановить образец",
+  "reader_voice_selected": "Выбран",
+  "reader_close_voice_panel": "Закрыть панель голоса",
+  "reader_auto_next": "Автопереход",
+  "reader_speed": "Скорость",
+  "reader_preview_notice": "Предпросмотр — эта глава не полностью загружена.",
+
+  "profile_page_title": "Профиль — libnovel",
+  "profile_heading": "Профиль",
+  "profile_avatar_label": "Аватар",
+  "profile_change_avatar": "Изменить аватар",
+  "profile_username": "Имя пользователя",
+  "profile_email": "Email",
+  "profile_change_password": "Изменить пароль",
+  "profile_current_password": "Текущий пароль",
+  "profile_new_password": "Новый пароль",
+  "profile_confirm_password": "Подтвердить пароль",
+  "profile_save_password": "Сохранить пароль",
+  "profile_appearance_heading": "Внешний вид",
+  "profile_theme_label": "Тема",
+  "profile_theme_amber": "Янтарь",
+  "profile_theme_slate": "Сланец",
+  "profile_theme_rose": "Роза",
+  "profile_reading_heading": "Настройки чтения",
+  "profile_voice_label": "Голос по умолчанию",
+  "profile_speed_label": "Скорость воспроизведения",
+  "profile_auto_next_label": "Автопереход к следующей главе",
+  "profile_save_settings": "Сохранить настройки",
+  "profile_settings_saved": "Настройки сохранены.",
+  "profile_settings_error": "Не удалось сохранить настройки.",
+  "profile_password_saved": "Пароль изменён.",
+  "profile_password_error": "Не удалось изменить пароль.",
+  "profile_sessions_heading": "Активные сессии",
+  "profile_sign_out_all": "Выйти на всех других устройствах",
+  "profile_joined": "Зарегистрирован {date}",
+
+  "user_page_title": "{username} — libnovel",
+  "user_library_heading": "Библиотека {username}",
+  "user_follow": "Подписаться",
+  "user_unfollow": "Отписаться",
+  "user_followers": "{n} подписчиков",
+  "user_following": "{n} подписок",
+  "user_library_empty": "В библиотеке нет книг.",
+
+  "error_not_found_title": "Страница не найдена",
+  "error_not_found_body": "Запрошенная страница не существует.",
+  "error_generic_title": "Что-то пошло не так",
+  "error_go_home": "На главную",
+  "error_status": "Ошибка {status}",
+
+  "admin_scrape_page_title": "Парсинг — Админ",
+  "admin_scrape_heading": "Парсинг",
+  "admin_scrape_catalogue": "Парсинг каталога",
+  "admin_scrape_book": "Парсинг книги",
+  "admin_scrape_url_placeholder": "URL книги на novelfire.net",
+  "admin_scrape_range": "Диапазон глав",
+  "admin_scrape_from": "От",
+  "admin_scrape_to": "До",
+  "admin_scrape_submit": "Парсить",
+  "admin_scrape_cancel": "Отмена",
+  "admin_scrape_status_pending": "Ожидание",
+  "admin_scrape_status_running": "Выполняется",
+  "admin_scrape_status_done": "Готово",
+  "admin_scrape_status_failed": "Ошибка",
+  "admin_scrape_status_cancelled": "Отменено",
+  "admin_tasks_heading": "Последние задачи",
+  "admin_tasks_empty": "Задач пока нет.",
+
+  "admin_audio_page_title": "Аудио — Админ",
+  "admin_audio_heading": "Аудио задачи",
+  "admin_audio_empty": "Аудио задач нет.",
+
+  "admin_changelog_page_title": "Changelog — Админ",
+  "admin_changelog_heading": "Changelog",
+
+  "comments_heading": "Комментарии",
+  "comments_empty": "Комментариев пока нет. Будьте первым!",
+  "comments_placeholder": "Написать комментарий…",
+  "comments_submit": "Отправить",
+  "comments_login_prompt": "Войдите, чтобы комментировать.",
+  "comments_vote_up": "Плюс",
+  "comments_vote_down": "Минус",
+  "comments_delete": "Удалить",
+  "comments_reply": "Ответить",
+  "comments_show_replies": "Показать {n} ответов",
+  "comments_hide_replies": "Скрыть ответы",
+  "comments_edited": "изменено",
+  "comments_deleted": "[удалено]",
+
+  "disclaimer_page_title": "Отказ от ответственности — libnovel",
+  "privacy_page_title": "Политика конфиденциальности — libnovel",
+  "dmca_page_title": "DMCA — libnovel",
+  "terms_page_title": "Условия использования — libnovel",
+
+  "common_loading": "Загрузка…",
+  "common_error": "Ошибка",
+  "common_save": "Сохранить",
+  "common_cancel": "Отмена",
+  "common_close": "Закрыть",
+  "common_search": "Поиск",
+  "common_back": "Назад",
+  "common_next": "Далее",
+  "common_previous": "Назад",
+  "common_yes": "Да",
+  "common_no": "Нет",
+  "common_on": "вкл.",
+  "common_off": "выкл.",
+
+  "locale_switcher_label": "Язык",
+
+  "books_empty_library": "Ваша библиотека пуста.",
+  "books_empty_discover": "Книги, которые вы начнёте читать или сохраните из",
+  "books_empty_discover_link": "Каталога",
+  "books_empty_discover_suffix": "появятся здесь.",
+  "books_count": "{n} книг{s}",
+
+  "catalogue_sort_updated": "По дате обновления",
+  "catalogue_search_button": "Поиск",
+  "catalogue_refresh": "Обновить",
+  "catalogue_refreshing": "В очереди…",
+  "catalogue_refresh_mobile": "Обновить каталог",
+  "catalogue_all_loaded": "Все новеллы загружены",
+  "catalogue_scroll_top": "Вверх",
+  "catalogue_view_grid": "Сетка",
+  "catalogue_view_list": "Список",
+  "catalogue_browse_source": "Смотреть новеллы с novelfire.net",
+  "catalogue_search_results": "{n} результат{s} по запросу «{q}»",
+  "catalogue_search_local_count": "({local} локальных, {remote} с novelfire)",
+  "catalogue_rank_ranked": "{n} новелл отсортированы по последнему парсингу каталога",
+  "catalogue_rank_no_data": "Нет данных рейтинга.",
+  "catalogue_rank_no_data_body": "Нет данных рейтинга — запустите полный парсинг каталога для заполнения",
+  "catalogue_rank_run_scrape_admin": "Нажмите «Обновить каталог» выше, чтобы запустить полный парсинг.",
+  "catalogue_rank_run_scrape_user": "Попросите администратора запустить парсинг каталога.",
+  "catalogue_scrape_queued_flash": "Полный парсинг каталога поставлен в очередь. Библиотека и рейтинг обновятся по мере обработки.",
+  "catalogue_scrape_busy_flash": "Парсинг уже запущен. Проверьте позже.",
+  "catalogue_scrape_error_flash": "Не удалось поставить парсинг в очередь. Проверьте доступность сервиса.",
+  "catalogue_filters_label": "Фильтры",
+  "catalogue_apply": "Применить",
+  "catalogue_filter_rank_note": "Фильтры по жанру и статусу применяются только к разделу «Обзор»",
+  "catalogue_no_results_search": "Ничего не найдено.",
+  "catalogue_no_results_try": "Попробуйте другой запрос.",
+  "catalogue_no_results_filters": "Попробуйте другие фильтры или проверьте позже.",
+  "catalogue_scrape_queued_badge": "В очереди",
+  "catalogue_scrape_busy_badge": "Парсер занят",
+  "catalogue_scrape_busy_list": "Занят",
+  "catalogue_scrape_forbidden_badge": "Запрещено",
+  "catalogue_scrape_novel_button": "Парсить",
+  "catalogue_scraping_novel": "Парсинг…",
+
+  "book_detail_not_in_library": "не в библиотеке",
+  "book_detail_continue_ch": "Продолжить гл.{n}",
+  "book_detail_start_ch1": "Начать с гл.1",
+  "book_detail_preview_ch1": "Предпросмотр гл.1",
+  "book_detail_reading_ch": "Читается гл.{n} из {total}",
+  "book_detail_n_chapters": "{n} глав",
+  "book_detail_rescraping": "В очереди…",
+  "book_detail_from_chapter": "С главы",
+  "book_detail_to_chapter": "До главы (необязательно)",
+  "book_detail_range_queuing": "В очереди…",
+  "book_detail_scrape_range": "Диапазон глав",
+  "book_detail_admin": "Администрирование",
+  "book_detail_scraping_progress": "Загружаются первые 20 глав. Страница обновится автоматически.",
+  "book_detail_scraping_home": "← На главную",
+  "book_detail_rescrape_book": "Перепарсить книгу",
+  "book_detail_less": "Скрыть",
+  "book_detail_more": "Ещё",
+
+  "chapters_search_placeholder": "Поиск глав…",
+  "chapters_jump_to": "Перейти к гл.{n}",
+  "chapters_no_match": "Главы по запросу «{q}» не найдены",
+  "chapters_none_available": "Глав пока нет.",
+  "chapters_reading_indicator": "читается",
+  "chapters_result_count": "{n} результатов",
+
+  "reader_fetching_chapter": "Загрузка главы…",
+  "reader_words": "{n} слов",
+  "reader_preview_audio_notice": "Предпросмотр — аудио недоступно для книг вне библиотеки.",
+
+  "profile_click_to_change": "Нажмите на аватар для смены фото",
+  "profile_tts_voice": "Голос TTS",
+  "profile_auto_advance": "Автопереход к следующей главе",
+  "profile_saving": "Сохранение…",
+  "profile_saved": "Сохранено!",
+  "profile_session_this": "Текущая сессия",
+  "profile_session_signed_in": "Вход {date}",
+  "profile_session_last_seen": "· Последний визит {date}",
+  "profile_session_sign_out": "Выйти",
+  "profile_session_end": "Завершить",
+  "profile_session_unrecognised": "Это все устройства, авторизованные в вашем аккаунте. Завершите любую сессию, которую не узнаёте.",
+  "profile_no_sessions": "Записей сессий нет. Отслеживание начнётся со следующего входа.",
+  "profile_change_password_heading": "Изменить пароль",
+  "profile_update_password": "Обновить пароль",
+  "profile_updating": "Обновление…",
+  "profile_password_changed_ok": "Пароль успешно изменён.",
+  "profile_playback_speed": "Скорость воспроизведения — {speed}x",
+
+  "user_currently_reading": "Сейчас читает",
+  "user_library_count": "Библиотека ({n})",
+  "user_joined": "Зарегистрирован {date}",
+  "user_followers_label": "подписчиков",
+  "user_following_label": "подписок",
+  "user_no_books": "Книг в библиотеке пока нет.",
+
+  "admin_pages_label": "Страницы",
+  "admin_tools_label": "Инструменты",
+
+  "admin_scrape_status_idle": "Ожидание",
+  "admin_scrape_full_catalogue": "Полный каталог",
+  "admin_scrape_single_book": "Одна книга",
+  "admin_scrape_quick_genres": "Быстрые жанры",
+  "admin_scrape_task_history": "История задач",
+  "admin_scrape_filter_placeholder": "Фильтр по типу, статусу или URL…",
+  "admin_scrape_no_matching": "Задач не найдено.",
+  "admin_scrape_start": "Начать парсинг",
+  "admin_scrape_queuing": "В очереди…",
+  "admin_scrape_running": "Выполняется…",
+
+  "admin_audio_filter_jobs": "Фильтр по slug, голосу или статусу…",
+  "admin_audio_filter_cache": "Фильтр по slug, главе или голосу…",
+  "admin_audio_no_matching_jobs": "Заданий не найдено.",
+  "admin_audio_no_jobs": "Аудиозаданий пока нет.",
+  "admin_audio_cache_empty": "Аудиокэш пуст.",
+  "admin_audio_no_cache_results": "Результатов нет.",
+
+  "admin_changelog_gitea": "Релизы Gitea",
+  "admin_changelog_no_releases": "Релизов не найдено.",
+  "admin_changelog_load_error": "Не удалось загрузить релизы: {error}",
+
+  "comments_top": "Лучшие",
+  "comments_new": "Новые",
+  "comments_posting": "Отправка…",
+  "comments_login_link": "Войдите",
+  "comments_login_suffix": "чтобы оставить комментарий.",
+  "comments_anonymous": "Аноним",
+
+  "reader_audio_narration": "Аудионарратив",
+  "reader_playing": "Воспроизводится — управление ниже",
+  "reader_paused": "Пауза — управление ниже",
+  "reader_ch_ready": "Гл.{n} готова",
+  "reader_ch_preparing": "Подготовка гл.{n}… {percent}%",
+  "reader_ch_generate_on_nav": "Гл.{n} сгенерируется при переходе",
+  "reader_now_playing": "Сейчас играет: {title}",
+  "reader_load_this_chapter": "Загрузить эту главу",
+  "reader_generate_samples": "Сгенерировать недостающие образцы",
+  "reader_voice_applies_next": "Новый голос применится при следующем нажатии «Воспроизвести».",
+  "reader_choose_voice": "Выбрать голос",
+  "reader_generating_narration": "Генерация озвучки…"
+}

ui/package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@aws-sdk/client-s3": "^3.1005.0",
 				"@aws-sdk/s3-request-presigner": "^3.1005.0",
+				"@inlang/paraglide-js": "^2.15.1",
 				"@opentelemetry/exporter-logs-otlp-http": "^0.214.0",
 				"@opentelemetry/exporter-trace-otlp-http": "^0.214.0",
 				"@opentelemetry/resources": "^2.6.1",
@@ -1719,6 +1720,49 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/@inlang/paraglide-js": {
+			"version": "2.15.1",
+			"resolved": "https://registry.npmjs.org/@inlang/paraglide-js/-/paraglide-js-2.15.1.tgz",
+			"integrity": "sha512-7wWKbLWwLx1dkkYz55TnVp+39atKXf7rnlHnL8adSmM73UaAdB9fXDzo24GHSY/6FPGFKSkgHdT2qyJv2whWsA==",
+			"license": "MIT",
+			"dependencies": {
+				"@inlang/recommend-sherlock": "^0.2.1",
+				"@inlang/sdk": "^2.9.1",
+				"commander": "11.1.0",
+				"consola": "3.4.0",
+				"json5": "2.2.3",
+				"unplugin": "^2.1.2",
+				"urlpattern-polyfill": "^10.0.0"
+			},
+			"bin": {
+				"paraglide-js": "bin/run.js"
+			}
+		},
+		"node_modules/@inlang/recommend-sherlock": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@inlang/recommend-sherlock/-/recommend-sherlock-0.2.1.tgz",
+			"integrity": "sha512-ckv8HvHy/iTqaVAEKrr+gnl+p3XFNwe5D2+6w6wJk2ORV2XkcRkKOJ/XsTUJbPSiyi4PI+p+T3bqbmNx/rDUlg==",
+			"license": "MIT",
+			"dependencies": {
+				"comment-json": "^4.2.3"
+			}
+		},
+		"node_modules/@inlang/sdk": {
+			"version": "2.9.1",
+			"resolved": "https://registry.npmjs.org/@inlang/sdk/-/sdk-2.9.1.tgz",
+			"integrity": "sha512-y0C3xaKo6pSGDr3p5OdreRVT3THJpgKVe1lLvG3BE4v9lskp3UfI9cPCbN8X2dpfLt/4ljtehMb5SykpMfJrMg==",
+			"license": "MIT",
+			"dependencies": {
+				"@lix-js/sdk": "0.4.9",
+				"@sinclair/typebox": "^0.31.17",
+				"kysely": "^0.28.12",
+				"sqlite-wasm-kysely": "0.3.0",
+				"uuid": "^13.0.0"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			}
+		},
 		"node_modules/@ioredis/commands": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.1.tgz",
@@ -1780,6 +1824,43 @@
 				"url": "https://opencollective.com/js-sdsl"
 			}
 		},
+		"node_modules/@lix-js/sdk": {
+			"version": "0.4.9",
+			"resolved": "https://registry.npmjs.org/@lix-js/sdk/-/sdk-0.4.9.tgz",
+			"integrity": "sha512-30mDkXpx704359oRrJI42bjfCspCiaMItngVBbPkiTGypS7xX4jYbHWQkXI8XuJ7VDB69D0MsVU6xfrBAIrM4A==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@lix-js/server-protocol-schema": "0.1.1",
+				"dedent": "1.5.1",
+				"human-id": "^4.1.1",
+				"js-sha256": "^0.11.0",
+				"kysely": "^0.28.12",
+				"sqlite-wasm-kysely": "0.3.0",
+				"uuid": "^10.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@lix-js/sdk/node_modules/uuid": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+			"integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"license": "MIT",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
+		"node_modules/@lix-js/server-protocol-schema": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/@lix-js/server-protocol-schema/-/server-protocol-schema-0.1.1.tgz",
+			"integrity": "sha512-jBeALB6prAbtr5q4vTuxnRZZv1M2rKe8iNqRQhFJ4Tv7150unEa0vKyz0hs8Gl3fUGsWaNJBh3J8++fpbrpRBQ==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/@opentelemetry/api": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
@@ -4135,6 +4216,12 @@
 				"node": ">= 18"
 			}
 		},
+		"node_modules/@sinclair/typebox": {
+			"version": "0.31.28",
+			"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.31.28.tgz",
+			"integrity": "sha512-/s55Jujywdw/Jpan+vsy6JZs1z2ZTGxTmbZTPiuSL2wz9mfzA2gN1zzaqmvfi4pq+uOt7Du85fkiwv5ymW84aQ==",
+			"license": "MIT"
+		},
 		"node_modules/@smithy/abort-controller": {
 			"version": "4.2.11",
 			"resolved": "https://registry.npmjs.org/@smithy/abort-controller/-/abort-controller-4.2.11.tgz",
@@ -4867,6 +4954,15 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/@sqlite.org/sqlite-wasm": {
+			"version": "3.48.0-build4",
+			"resolved": "https://registry.npmjs.org/@sqlite.org/sqlite-wasm/-/sqlite-wasm-3.48.0-build4.tgz",
+			"integrity": "sha512-hI6twvUkzOmyGZhQMza1gpfqErZxXRw6JEsiVjUbo7tFanVD+8Oil0Ih3l2nGzHdxPI41zFmfUQG7GHqhciKZQ==",
+			"license": "Apache-2.0",
+			"bin": {
+				"sqlite-wasm": "bin/index.js"
+			}
+		},
 		"node_modules/@standard-schema/spec": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
@@ -5405,6 +5501,12 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/array-timsort": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz",
+			"integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==",
+			"license": "MIT"
+		},
 		"node_modules/ast-types": {
 			"version": "0.16.1",
 			"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
@@ -5590,6 +5692,28 @@
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 			"license": "MIT"
 		},
+		"node_modules/commander": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+			"integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/comment-json": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.6.2.tgz",
+			"integrity": "sha512-R2rze/hDX30uul4NZoIZ76ImSJLFxn/1/ZxtKC1L77y2X1k+yYu1joKbAtMA2Fg3hZrTOiw0I5mwVMo0cf250w==",
+			"license": "MIT",
+			"dependencies": {
+				"array-timsort": "^1.0.3",
+				"esprima": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/commondir": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -5597,6 +5721,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/consola": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/consola/-/consola-3.4.0.tgz",
+			"integrity": "sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==",
+			"license": "MIT",
+			"engines": {
+				"node": "^14.18.0 || >=16.10.0"
+			}
+		},
 		"node_modules/convert-source-map": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -5635,6 +5768,20 @@
 				}
 			}
 		},
+		"node_modules/dedent": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz",
+			"integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
+			"license": "MIT",
+			"peerDependencies": {
+				"babel-plugin-macros": "^3.1.0"
+			},
+			"peerDependenciesMeta": {
+				"babel-plugin-macros": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -5966,6 +6113,15 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/human-id": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/human-id/-/human-id-4.1.3.tgz",
+			"integrity": "sha512-tsYlhAYpjCKa//8rXZ9DqKEawhPoSytweBC2eNvcaDK+57RZLHGqNs3PZTQO6yekLFSuvA6AlnAfrw1uBvtb+Q==",
+			"license": "MIT",
+			"bin": {
+				"human-id": "dist/cli.js"
+			}
+		},
 		"node_modules/import-in-the-middle": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-3.0.0.tgz",
@@ -6062,6 +6218,12 @@
 				"jiti": "lib/jiti-cli.mjs"
 			}
 		},
+		"node_modules/js-sha256": {
+			"version": "0.11.1",
+			"resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.11.1.tgz",
+			"integrity": "sha512-o6WSo/LUvY2uC4j7mO50a2ms7E/EAdbP0swigLV+nzHKTTaYnaLIWJ02VdXrsJX0vGedDESQnLsOekr94ryfjg==",
+			"license": "MIT"
+		},
 		"node_modules/js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6101,6 +6263,15 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/kysely": {
+			"version": "0.28.14",
+			"resolved": "https://registry.npmjs.org/kysely/-/kysely-0.28.14.tgz",
+			"integrity": "sha512-SU3lgh0rPvq7upc6vvdVrCsSMUG1h3ChvHVOY7wJ2fw4C9QEB7X3d5eyYEyULUX7UQtxZJtZXGuT6U2US72UYA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=20.0.0"
+			}
+		},
 		"node_modules/lightningcss": {
 			"version": "1.31.1",
 			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
@@ -6988,6 +7159,17 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/sqlite-wasm-kysely": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/sqlite-wasm-kysely/-/sqlite-wasm-kysely-0.3.0.tgz",
+			"integrity": "sha512-TzjBNv7KwRw6E3pdKdlRyZiTmUIE0UttT/Sl56MVwVARl/u5gp978KepazCJZewFUnlWHz9i3NQd4kOtP/Afdg==",
+			"dependencies": {
+				"@sqlite.org/sqlite-wasm": "^3.48.0-build2"
+			},
+			"peerDependencies": {
+				"kysely": "*"
+			}
+		},
 		"node_modules/standard-as-callback": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -7201,6 +7383,21 @@
 			"integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
 			"license": "MIT"
 		},
+		"node_modules/unplugin": {
+			"version": "2.3.11",
+			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+			"integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.5",
+				"acorn": "^8.15.0",
+				"picomatch": "^4.0.3",
+				"webpack-virtual-modules": "^0.6.2"
+			},
+			"engines": {
+				"node": ">=18.12.0"
+			}
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -7231,6 +7428,25 @@
 				"browserslist": ">= 4.21.0"
 			}
 		},
+		"node_modules/urlpattern-polyfill": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz",
+			"integrity": "sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==",
+			"license": "MIT"
+		},
+		"node_modules/uuid": {
+			"version": "13.0.0",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
+			"integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"license": "MIT",
+			"bin": {
+				"uuid": "dist-node/bin/uuid"
+			}
+		},
 		"node_modules/vite": {
 			"version": "7.3.1",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
@@ -7330,6 +7546,12 @@
 			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
 			"license": "BSD-2-Clause"
 		},
+		"node_modules/webpack-virtual-modules": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+			"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+			"license": "MIT"
+		},
 		"node_modules/whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",

ui/package.json

@@ -30,6 +30,7 @@
 	"dependencies": {
 		"@aws-sdk/client-s3": "^3.1005.0",
 		"@aws-sdk/s3-request-presigner": "^3.1005.0",
+		"@inlang/paraglide-js": "^2.15.1",
 		"@opentelemetry/exporter-logs-otlp-http": "^0.214.0",
 		"@opentelemetry/exporter-trace-otlp-http": "^0.214.0",
 		"@opentelemetry/resources": "^2.6.1",

ui/project.inlang/settings.json

@@ -0,0 +1,11 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"baseLocale": "en",
+	"locales": ["en", "ru", "id", "pt-BR", "fr"],
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{locale}.json"
+	}
+}

ui/src/app.css

@@ -8,6 +8,47 @@
 	--color-surface-3: #3f3f46;   /* zinc-700 */
 	--color-muted: #a1a1aa;       /* zinc-400 */
 	--color-text: #f4f4f5;        /* zinc-100 */
+	--color-border: #3f3f46;      /* zinc-700 */
+	--color-danger: #f87171;      /* red-400 */
+}
+
+/* ── Amber theme (default) — same as @theme above, explicit for clarity ── */
+[data-theme="amber"] {
+	--color-brand:     #f59e0b;
+	--color-brand-dim: #d97706;
+	--color-surface:   #18181b;
+	--color-surface-2: #27272a;
+	--color-surface-3: #3f3f46;
+	--color-muted:     #a1a1aa;
+	--color-text:      #f4f4f5;
+	--color-border:    #3f3f46;
+	--color-danger:    #f87171;
+}
+
+/* ── Slate theme — indigo/slate dark ─────────────────────────────────── */
+[data-theme="slate"] {
+	--color-brand:     #818cf8;   /* indigo-400 */
+	--color-brand-dim: #4f46e5;   /* indigo-600 */
+	--color-surface:   #0f172a;   /* slate-900 */
+	--color-surface-2: #1e293b;   /* slate-800 */
+	--color-surface-3: #334155;   /* slate-700 */
+	--color-muted:     #94a3b8;   /* slate-400 */
+	--color-text:      #f1f5f9;   /* slate-100 */
+	--color-border:    #334155;   /* slate-700 */
+	--color-danger:    #f87171;   /* red-400 */
+}
+
+/* ── Rose theme — dark pink ───────────────────────────────────────────── */
+[data-theme="rose"] {
+	--color-brand:     #fb7185;   /* rose-400 */
+	--color-brand-dim: #e11d48;   /* rose-600 */
+	--color-surface:   #18181b;   /* zinc-900 */
+	--color-surface-2: #1c1318;   /* custom dark rose */
+	--color-surface-3: #2d1f26;   /* custom dark rose-2 */
+	--color-muted:     #a1a1aa;   /* zinc-400 */
+	--color-text:      #f4f4f5;   /* zinc-100 */
+	--color-border:    #3f2d36;   /* custom rose border */
+	--color-danger:    #f87171;   /* red-400 */
 }
 
 html {
@@ -20,13 +61,13 @@ html {
 	max-width: 72ch;
 	line-height: 1.85;
 	font-size: 1.05rem;
-	color: #d4d4d8; /* zinc-300 */
+	color: var(--color-muted);
 }
 
 .prose-chapter h1,
 .prose-chapter h2,
 .prose-chapter h3 {
-	color: #f4f4f5;
+	color: var(--color-text);
 	font-weight: 700;
 	margin-top: 1.5em;
 	margin-bottom: 0.5em;
@@ -41,15 +82,15 @@ html {
 }
 
 .prose-chapter em {
-	color: #a1a1aa;
+	color: var(--color-muted);
 }
 
 .prose-chapter strong {
-	color: #f4f4f5;
+	color: var(--color-text);
 }
 
 .prose-chapter hr {
-	border-color: #3f3f46;
+	border-color: var(--color-border);
 	margin: 2em 0;
 }
 
@@ -62,4 +103,3 @@ html {
 .animate-progress-bar {
 	animation: progress-bar 8s cubic-bezier(0.1, 0.05, 0.1, 1) forwards;
 }
-

ui/src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="%lang%" dir="%dir%">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />

ui/src/hooks.server.ts

@@ -1,4 +1,5 @@
 import type { Handle } from '@sveltejs/kit';
+import { sequence } from '@sveltejs/kit/hooks';
 import { handleErrorWithSentry } from '@sentry/sveltekit';
 import * as Sentry from '@sentry/sveltekit';
 import { randomBytes, createHmac } from 'node:crypto';
@@ -13,6 +14,7 @@ import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http';
 import { BatchLogRecordProcessor } from '@opentelemetry/sdk-logs';
 import { resourceFromAttributes } from '@opentelemetry/resources';
 import { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';
+import { paraglideMiddleware } from '$lib/paraglide/server';
 
 // ─── OpenTelemetry server-side tracing + logs ─────────────────────────────────
 // No-op when OTEL_EXPORTER_OTLP_ENDPOINT is unset (e.g. local dev).
@@ -138,7 +140,21 @@ export function parseAuthToken(token: string): { id: string; username: string; r
 
 // ─── Hook ─────────────────────────────────────────────────────────────────────
 
-export const handle: Handle = async ({ event, resolve }) => {
+function getTextDirection(locale: string): string {
+	// All supported locales (en, ru, id, pt-BR, fr) are LTR
+	return 'ltr';
+}
+
+const paraglideHandle: Handle = ({ event, resolve }) =>
+	paraglideMiddleware(event.request, ({ request: localizedRequest, locale }) => {
+		event.request = localizedRequest;
+		return resolve(event, {
+			transformPageChunk: ({ html }) =>
+				html.replace('%lang%', locale).replace('%dir%', getTextDirection(locale))
+		});
+	});
+
+const appHandle: Handle = async ({ event, resolve }) => {
 	// During graceful shutdown, reject new requests immediately so the load
 	// balancer / Docker health-check can drain existing connections.
 	if (shuttingDown) {
@@ -197,3 +213,5 @@ export const handle: Handle = async ({ event, resolve }) => {
 	return resolve(event);
 };
 
+export const handle = sequence(paraglideHandle, appHandle);
+

ui/src/hooks.ts

@@ -0,0 +1,4 @@
+import type { Reroute } from '@sveltejs/kit';
+import { deLocalizeUrl } from '$lib/paraglide/runtime';
+
+export const reroute: Reroute = ({ url }) => deLocalizeUrl(url).pathname;

ui/src/lib/components/AudioPlayer.svelte

@@ -52,6 +52,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 	import type { Voice } from '$lib/types';
+	import * as m from '$lib/paraglide/messages.js';
 
 	interface Props {
 		slug: string;
@@ -675,7 +676,7 @@
 <!-- ── Voice row snippet (reused in both engine sections) ──────────────── -->
 {#snippet voiceRow(v: import('$lib/types').Voice)}
 	<div
-		class={cn('flex items-center gap-2 px-3 py-2 hover:bg-zinc-800 transition-colors cursor-pointer', audioStore.voice === v.id && 'bg-amber-400/10')}
+		class={cn('flex items-center gap-2 px-3 py-2 hover:bg-(--color-surface-2) transition-colors cursor-pointer', audioStore.voice === v.id && 'bg-(--color-brand)/10')}
 		role="button"
 		tabindex="0"
 		onclick={() => selectVoice(v.id)}
@@ -684,25 +685,25 @@
 		<!-- Selected indicator -->
 		<div class="w-4 flex-shrink-0">
 			{#if audioStore.voice === v.id}
-				<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+				<svg class="w-3.5 h-3.5 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
 					<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
 				</svg>
 			{/if}
 		</div>
 
 		<!-- Voice name -->
-		<span class={cn('flex-1 text-xs', audioStore.voice === v.id ? 'text-amber-400 font-medium' : 'text-zinc-300')}>
+		<span class={cn('flex-1 text-xs', audioStore.voice === v.id ? 'text-(--color-brand) font-medium' : 'text-(--color-text)')}>
 			{voiceLabel(v)}
 		</span>
-		<span class="text-zinc-600 text-xs font-mono">{v.id}</span>
+		<span class="text-(--color-muted) opacity-60 text-xs font-mono">{v.id}</span>
 
 		<!-- Sample play button -->
 		<Button
 			variant="ghost"
 			size="icon"
-			class={cn('h-6 w-6 flex-shrink-0', samplePlayingVoice === v.id ? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25' : 'text-zinc-500 hover:text-zinc-200')}
+			class={cn('h-6 w-6 flex-shrink-0', samplePlayingVoice === v.id ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : 'text-(--color-muted) hover:text-(--color-text)')}
 			onclick={(e) => { e.stopPropagation(); playSample(v.id); }}
-			title={samplePlayingVoice === v.id ? 'Stop sample' : 'Play sample'}
+			title={samplePlayingVoice === v.id ? m.reader_voice_stop_sample() : m.reader_voice_play_sample()}
 			aria-label={samplePlayingVoice === v.id ? `Stop ${v.id} sample` : `Play ${v.id} sample`}
 		>
 			{#if samplePlayingVoice === v.id}
@@ -718,13 +719,13 @@
 	</div>
 {/snippet}
 
-<div class="mt-6 p-4 rounded-lg bg-zinc-800 border border-zinc-700">
+<div class="mt-6 p-4 rounded-lg bg-(--color-surface-2) border border-(--color-border)">
 	<div class="flex items-center justify-between gap-2 mb-3">
 		<div class="flex items-center gap-2">
-			<svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+			<svg class="w-4 h-4 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
 				<path d="M12 3v10.55A4 4 0 1014 17V7h4V3h-6z"/>
 			</svg>
-			<span class="text-sm text-zinc-300 font-medium">Audio Narration</span>
+			<span class="text-sm text-(--color-text) font-medium">{m.reader_audio_narration()}</span>
 		</div>
 
 		<!-- Voice selector button -->
@@ -733,8 +734,8 @@
 				variant="ghost"
 				size="sm"
 				onclick={() => { stopSample(); showVoicePanel = !showVoicePanel; }}
-				class={cn('gap-1.5 text-xs', showVoicePanel ? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25' : '')}
-				title="Change voice"
+				class={cn('gap-1.5 text-xs', showVoicePanel ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : '')}
+				title={m.reader_change_voice()}
 			>
 				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
 					<path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
@@ -749,15 +750,15 @@
 
 	<!-- ── Voice selector panel ──────────────────────────────────────────── -->
 	{#if showVoicePanel && voices.length > 0}
-		<div class="mb-3 rounded-lg border border-zinc-600 bg-zinc-900 overflow-hidden">
-			<div class="px-3 py-2 border-b border-zinc-700 flex items-center justify-between">
-				<span class="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Choose Voice</span>
+		<div class="mb-3 rounded-lg border border-(--color-border) bg-(--color-surface) overflow-hidden">
+			<div class="px-3 py-2 border-b border-(--color-border) flex items-center justify-between">
+				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">{m.reader_choose_voice()}</span>
 				<Button
 					variant="ghost"
 					size="icon"
-					class="h-6 w-6 text-zinc-500 hover:text-zinc-300"
+					class="h-6 w-6 text-(--color-muted) hover:text-(--color-text)"
 					onclick={() => { stopSample(); showVoicePanel = false; }}
-					aria-label="Close voice selector"
+					aria-label={m.reader_close_voice_panel()}
 				>
 					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
@@ -767,8 +768,8 @@
 			<div class="max-h-64 overflow-y-auto">
 				<!-- Kokoro (GPU) section -->
 				{#if kokoroVoices.length > 0}
-					<div class="px-3 py-1.5 bg-zinc-800/70 border-b border-zinc-700/50">
-						<span class="text-[10px] font-semibold text-zinc-500 uppercase tracking-widest">Kokoro (GPU)</span>
+					<div class="px-3 py-1.5 bg-(--color-surface-2)/70 border-b border-(--color-border)/50">
+						<span class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-widest">Kokoro (GPU)</span>
 					</div>
 					{#each kokoroVoices as v (v.id)}
 						{@render voiceRow(v)}
@@ -777,26 +778,26 @@
 
 				<!-- Pocket TTS (CPU) section -->
 				{#if pocketVoices.length > 0}
-					<div class="px-3 py-1.5 bg-zinc-800/70 border-b border-zinc-700/50 {kokoroVoices.length > 0 ? 'border-t border-zinc-700' : ''}">
-						<span class="text-[10px] font-semibold text-zinc-500 uppercase tracking-widest">Pocket TTS (CPU)</span>
+					<div class="px-3 py-1.5 bg-(--color-surface-2)/70 border-b border-(--color-border)/50 {kokoroVoices.length > 0 ? 'border-t border-(--color-border)' : ''}">
+						<span class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-widest">Pocket TTS (CPU)</span>
 					</div>
 					{#each pocketVoices as v (v.id)}
 						{@render voiceRow(v)}
 					{/each}
 				{/if}
 			</div>
-			<div class="px-3 py-2 border-t border-zinc-700 bg-zinc-800/50">
-				<p class="text-xs text-zinc-500">
-					New voice applies on next "Play narration".
+			<div class="px-3 py-2 border-t border-(--color-border) bg-(--color-surface-2)/50">
+				<p class="text-xs text-(--color-muted)">
+					{m.reader_voice_applies_next()}
 					{#if voices.length > 0}
 						<a
 							href="/api/audio/voice-samples"
-							class="text-zinc-400 hover:text-amber-400 transition-colors underline"
+							class="text-(--color-muted) hover:text-(--color-brand) transition-colors underline"
 							onclick={(e) => {
 								e.preventDefault();
 								fetch('/api/audio/voice-samples', { method: 'POST' }).catch(() => {});
 							}}
-						>Generate missing samples</a>
+						>{m.reader_generate_samples()}</a>
 					{/if}
 				</p>
 			</div>
@@ -808,14 +809,14 @@
 
 		{#if audioStore.status === 'idle' || audioStore.status === 'error'}
 			{#if audioStore.status === 'error'}
-				<p class="text-red-400 text-sm mb-2">{audioStore.errorMsg || 'Failed to load audio.'}</p>
+				<p class="text-(--color-danger) text-sm mb-2">{audioStore.errorMsg || 'Failed to load audio.'}</p>
 			{/if}
-			<Button variant="default" size="sm" onclick={handlePlay}>
-				<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
-					<path d="M8 5v14l11-7z"/>
-				</svg>
-				Play narration
-			</Button>
+		<Button variant="default" size="sm" onclick={handlePlay}>
+			<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+				<path d="M8 5v14l11-7z"/>
+			</svg>
+			{m.reader_play_narration()}
+		</Button>
 
 		{:else if audioStore.status === 'loading'}
 			<Button variant="default" size="sm" disabled>
@@ -823,37 +824,37 @@
 					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 				</svg>
-				Loading…
+				{m.player_loading()}
 			</Button>
 
 		{:else if audioStore.status === 'generating'}
 			<div class="space-y-2">
-				<p class="text-xs text-zinc-400">Generating narration…</p>
-				<div class="w-full h-1.5 bg-zinc-700 rounded-full overflow-hidden">
+				<p class="text-xs text-(--color-muted)">{m.reader_generating_narration()}</p>
+				<div class="w-full h-1.5 bg-(--color-surface-3) rounded-full overflow-hidden">
 					<div
-						class="h-full bg-amber-400 rounded-full transition-none"
+						class="h-full bg-(--color-brand) rounded-full transition-none"
 						style="width: {audioStore.progress}%"
 					></div>
 				</div>
-				<p class="text-xs text-zinc-500 tabular-nums">{Math.round(audioStore.progress)}%</p>
+				<p class="text-xs text-(--color-muted) opacity-60 tabular-nums">{Math.round(audioStore.progress)}%</p>
 			</div>
 
 		{:else if audioStore.status === 'ready'}
 			<!-- Mini-bar is the canonical control surface — show a compact indicator here -->
 			<div class="flex items-center justify-between gap-3">
-				<div class="flex items-center gap-2 text-xs text-zinc-400">
-					{#if audioStore.isPlaying}
-						<svg class="w-3.5 h-3.5 text-amber-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
-						</svg>
-						<span>Playing — controls below</span>
-					{:else}
-						<svg class="w-3.5 h-3.5 flex-shrink-0 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M8 5v14l11-7z"/>
-						</svg>
-						<span>Paused — controls below</span>
-					{/if}
-					<span class="tabular-nums text-zinc-500">
+				<div class="flex items-center gap-2 text-xs text-(--color-muted)">
+				{#if audioStore.isPlaying}
+					<svg class="w-3.5 h-3.5 text-(--color-brand) flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+					</svg>
+					<span>{m.reader_playing()}</span>
+				{:else}
+					<svg class="w-3.5 h-3.5 flex-shrink-0 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M8 5v14l11-7z"/>
+					</svg>
+					<span>{m.reader_paused()}</span>
+				{/if}
+					<span class="tabular-nums text-(--color-muted) opacity-60">
 						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
 					</span>
 				</div>
@@ -863,40 +864,40 @@
 					<Button
 						variant="ghost"
 						size="sm"
-						class={cn('gap-1.5 text-xs flex-shrink-0', audioStore.autoNext ? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25' : 'text-zinc-500')}
-						onclick={() => (audioStore.autoNext = !audioStore.autoNext)}
-						title={audioStore.autoNext ? `Auto-next on — will play Ch.${nextChapter} automatically` : 'Auto-next off'}
-						aria-pressed={audioStore.autoNext}
-					>
-						<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
-						</svg>
-						Auto
-					</Button>
+						class={cn('gap-1.5 text-xs flex-shrink-0', audioStore.autoNext ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : 'text-(--color-muted)')}
+				onclick={() => (audioStore.autoNext = !audioStore.autoNext)}
+					title={audioStore.autoNext ? m.player_auto_next_on() : m.player_auto_next_off()}
+					aria-pressed={audioStore.autoNext}
+				>
+					<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
+					</svg>
+					{m.reader_auto_next()}
+				</Button>
 				{/if}
 			</div>
 
 			<!-- Next chapter pre-fetch status (only when auto-next is on) -->
 			{#if audioStore.autoNext && nextChapter !== null && nextChapter !== undefined}
 				<div class="mt-2">
-					{#if audioStore.nextStatus === 'prefetching'}
-						<div class="flex items-center gap-2 text-xs text-zinc-500">
-							<svg class="w-3 h-3 animate-spin flex-shrink-0" fill="none" viewBox="0 0 24 24">
-								<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-								<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-							</svg>
-							<span>Preparing Ch.{nextChapter}… {Math.round(audioStore.nextProgress)}%</span>
-						</div>
-					{:else if audioStore.nextStatus === 'prefetched'}
-						<p class="text-xs text-zinc-500 flex items-center gap-1">
-							<svg class="w-3 h-3 text-amber-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
-								<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
-							</svg>
-							Ch.{nextChapter} ready
-						</p>
-					{:else if audioStore.nextStatus === 'failed'}
-						<p class="text-xs text-zinc-600">Ch.{nextChapter} will generate on navigate</p>
-					{/if}
+			{#if audioStore.nextStatus === 'prefetching'}
+				<div class="flex items-center gap-2 text-xs text-(--color-muted)">
+					<svg class="w-3 h-3 animate-spin flex-shrink-0" fill="none" viewBox="0 0 24 24">
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+					</svg>
+					<span>{m.reader_ch_preparing({ n: String(nextChapter), percent: String(Math.round(audioStore.nextProgress)) })}</span>
+				</div>
+			{:else if audioStore.nextStatus === 'prefetched'}
+				<p class="text-xs text-(--color-muted) flex items-center gap-1">
+					<svg class="w-3 h-3 text-(--color-brand) flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+					</svg>
+					{m.reader_ch_ready({ n: String(nextChapter) })}
+				</p>
+			{:else if audioStore.nextStatus === 'failed'}
+				<p class="text-xs text-(--color-muted) opacity-60">{m.reader_ch_generate_on_nav({ n: String(nextChapter) })}</p>
+			{/if}
 				</div>
 			{/if}
 		{/if}
@@ -904,11 +905,11 @@
 	{:else if audioStore.active}
 		<!-- ── A different chapter is currently playing ── -->
 		<div class="flex items-center justify-between gap-3">
-			<p class="text-xs text-zinc-400">
-				Now playing: {audioStore.chapterTitle || `Ch.${audioStore.chapter}`}
+			<p class="text-xs text-(--color-muted)">
+				{m.reader_now_playing({ title: audioStore.chapterTitle || `Ch.${audioStore.chapter}` })}
 			</p>
 			<Button variant="secondary" size="sm" class="flex-shrink-0" onclick={startPlayback}>
-				Load this chapter
+				{m.reader_load_this_chapter()}
 			</Button>
 		</div>
 
@@ -918,7 +919,7 @@
 			<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
 				<path d="M8 5v14l11-7z"/>
 			</svg>
-			Play narration
+			{m.reader_play_narration()}
 		</Button>
 	{/if}
 </div>

ui/src/lib/components/AvatarCropModal.svelte

@@ -93,14 +93,14 @@
 	     render the crop canvas outside the natural image bounds. The fixed
 	     height gives cropperjs a stable container to size itself against. -->
 	<div class="px-5">
-		<div class="rounded-xl bg-zinc-800" style="height: 300px; position: relative;">
+		<div class="rounded-xl bg-(--color-surface-2)" style="height: 300px; position: relative;">
 			<img
 				bind:this={imgEl}
 				alt="Crop preview"
 				style="display:block; max-width:100%; max-height:100%;"
 			/>
 		</div>
-		<p class="text-xs text-zinc-500 text-center mt-3">
+		<p class="text-xs text-(--color-muted) text-center mt-3">
 			Drag to reposition · pinch or scroll to zoom · drag corners to resize
 		</p>
 	</div>

ui/src/lib/components/CommentsSection.svelte

@@ -3,6 +3,7 @@
 	import { Textarea } from '$lib/components/ui/textarea';
 	import { cn } from '$lib/utils';
 	import type { BookComment } from '$lib/types';
+	import * as m from '$lib/paraglide/messages.js';
 	let {
 		slug,
 		isLoggedIn = false,
@@ -243,28 +244,28 @@
 <div class="mt-10">
 	<!-- Header + sort controls -->
 	<div class="flex items-center justify-between gap-3 mb-4 flex-wrap">
-		<h2 class="text-base font-semibold text-zinc-200">
-			Comments
+		<h2 class="text-base font-semibold text-(--color-text)">
+			{m.comments_heading()}
 			{#if !loading && totalCount > 0}
-				<span class="text-zinc-500 font-normal text-sm ml-1">({totalCount})</span>
+				<span class="text-(--color-muted) font-normal text-sm ml-1">({totalCount})</span>
 			{/if}
 		</h2>
 
 	<!-- Sort tabs -->
 	{#if !loading && comments.length > 0}
-		<div class="flex items-center gap-1 text-xs rounded-lg bg-zinc-800/60 p-1">
+		<div class="flex items-center gap-1 text-xs rounded-lg bg-(--color-surface-2)/60 p-1">
 			<Button
 				variant="ghost"
 				size="sm"
-				class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'top' ? 'bg-zinc-700 text-zinc-100 hover:bg-zinc-700' : 'text-zinc-500 hover:text-zinc-300')}
+				class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'top' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
 				onclick={() => (sort = 'top')}
-			>Top</Button>
+			>{m.comments_top()}</Button>
 			<Button
 				variant="ghost"
 				size="sm"
-				class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'new' ? 'bg-zinc-700 text-zinc-100 hover:bg-zinc-700' : 'text-zinc-500 hover:text-zinc-300')}
+				class={cn('px-2.5 py-1 h-auto text-xs rounded-md', sort === 'new' ? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)' : 'text-(--color-muted) hover:text-(--color-text)')}
 				onclick={() => (sort = 'new')}
-			>New</Button>
+			>{m.comments_new()}</Button>
 		</div>
 	{/if}
 	</div>
@@ -275,16 +276,16 @@
 			<div class="flex flex-col gap-2">
 				<Textarea
 					bind:value={newBody}
-					placeholder="Write a comment…"
+					placeholder={m.comments_placeholder()}
 					rows={3}
 				/>
 				<div class="flex items-center justify-between gap-3">
-					<span class={cn('text-xs tabular-nums', charOver ? 'text-red-400' : 'text-zinc-600')}>
+					<span class={cn('text-xs tabular-nums', charOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
 						{charCount}/2000
 					</span>
 					<div class="flex items-center gap-3">
 						{#if postError}
-							<span class="text-xs text-red-400">{postError}</span>
+							<span class="text-xs text-(--color-danger)">{postError}</span>
 						{/if}
 						<Button
 							variant="default"
@@ -292,15 +293,15 @@
 							disabled={posting || !newBody.trim() || charOver}
 							onclick={postComment}
 						>
-							{posting ? 'Posting…' : 'Post'}
+							{posting ? m.comments_posting() : m.comments_submit()}
 						</Button>
 					</div>
 				</div>
 			</div>
 		{:else}
-			<p class="text-sm text-zinc-500">
-				<a href="/login" class="text-amber-400 hover:text-amber-300 transition-colors">Log in</a>
-				to leave a comment.
+		<p class="text-sm text-(--color-muted)">
+			<a href="/login" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">{m.comments_login_link()}</a>
+				{m.comments_login_suffix()}
 			</p>
 		{/if}
 	</div>
@@ -309,17 +310,17 @@
 	{#if loading}
 		<div class="flex flex-col gap-3">
 			{#each Array(3) as _}
-				<div class="rounded-lg bg-zinc-800/50 p-4 animate-pulse">
-					<div class="h-3 w-24 bg-zinc-700 rounded mb-3"></div>
-					<div class="h-3 w-full bg-zinc-700/60 rounded mb-2"></div>
-					<div class="h-3 w-3/4 bg-zinc-700/60 rounded"></div>
+				<div class="rounded-lg bg-(--color-surface-2)/50 p-4 animate-pulse">
+					<div class="h-3 w-24 bg-(--color-surface-3) rounded mb-3"></div>
+					<div class="h-3 w-full bg-(--color-surface-3)/60 rounded mb-2"></div>
+					<div class="h-3 w-3/4 bg-(--color-surface-3)/60 rounded"></div>
 				</div>
 			{/each}
 		</div>
 	{:else if loadError}
-		<p class="text-sm text-red-400">{loadError}</p>
+		<p class="text-sm text-(--color-danger)">{loadError}</p>
 	{:else if comments.length === 0}
-		<p class="text-sm text-zinc-500">No comments yet. Be the first!</p>
+		<p class="text-sm text-(--color-muted)">{m.comments_empty()}</p>
 	{:else}
 		<div class="flex flex-col gap-3">
 			{#each comments as comment (comment.id)}
@@ -328,39 +329,39 @@
 				{@const deleting = deletingIds.has(comment.id)}
 				{@const isOwner = isLoggedIn && currentUserId === comment.user_id}
 
-				<div class="rounded-lg bg-zinc-800/50 border border-zinc-700/50 px-4 py-3 flex flex-col gap-2 {deleting ? 'opacity-50' : ''}">
-					<!-- Header -->
-					<div class="flex items-center gap-2 flex-wrap">
-						{#if avatarUrls[comment.user_id]}
-							<img src={avatarUrls[comment.user_id]} alt={comment.username} class="w-6 h-6 rounded-full object-cover flex-shrink-0" />
-						{:else}
-							<div class="w-6 h-6 rounded-full bg-zinc-700 flex items-center justify-center flex-shrink-0">
-								<span class="text-[9px] font-semibold text-zinc-300 leading-none">{initials(comment.username)}</span>
-							</div>
-						{/if}
-						{#if comment.username}
-						<a href="/users/{comment.username}" class="text-sm font-medium text-zinc-200 hover:text-amber-400 transition-colors">{comment.username}</a>
+			<div class="rounded-lg bg-(--color-surface-2)/50 border border-(--color-border)/50 px-4 py-3 flex flex-col gap-2 {deleting ? 'opacity-50' : ''}">
+				<!-- Header -->
+				<div class="flex items-center gap-2 flex-wrap">
+					{#if avatarUrls[comment.user_id]}
+						<img src={avatarUrls[comment.user_id]} alt={comment.username} class="w-6 h-6 rounded-full object-cover flex-shrink-0" />
 					{:else}
-						<span class="text-sm font-medium text-zinc-400">Anonymous</span>
+						<div class="w-6 h-6 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
+							<span class="text-[9px] font-semibold text-(--color-text) leading-none">{initials(comment.username)}</span>
+						</div>
 					{/if}
-						<span class="text-zinc-600 text-xs">&middot;</span>
-						<span class="text-xs text-zinc-500">{formatDate(comment.created)}</span>
-					</div>
+					{#if comment.username}
+					<a href="/users/{comment.username}" class="text-sm font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{comment.username}</a>
+				{:else}
+					<span class="text-sm font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
+				{/if}
+					<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
+					<span class="text-xs text-(--color-muted)">{formatDate(comment.created)}</span>
+				</div>
 
-					<!-- Body -->
-					<p class="text-sm text-zinc-300 leading-relaxed whitespace-pre-wrap break-words">{comment.body}</p>
+				<!-- Body -->
+				<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{comment.body}</p>
 
 				<!-- Actions row: votes + reply + delete -->
 				<div class="flex items-center gap-3 pt-1 flex-wrap">
 					<!-- Upvote -->
-					<Button
-						variant="ghost"
-						size="sm"
-						class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'up' ? 'text-amber-400' : 'text-zinc-500 hover:text-zinc-300')}
-						disabled={voting}
-						onclick={() => vote(comment.id, 'up')}
-						title="Upvote"
-					>
+				<Button
+					variant="ghost"
+					size="sm"
+					class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+					disabled={voting}
+					onclick={() => vote(comment.id, 'up')}
+					title={m.comments_vote_up()}
+				>
 						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 							<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
 						</svg>
@@ -368,14 +369,14 @@
 					</Button>
 
 					<!-- Downvote -->
-					<Button
-						variant="ghost"
-						size="sm"
-						class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'down' ? 'text-red-400' : 'text-zinc-500 hover:text-zinc-300')}
-						disabled={voting}
-						onclick={() => vote(comment.id, 'down')}
-						title="Downvote"
-					>
+				<Button
+					variant="ghost"
+					size="sm"
+					class={cn('h-auto px-1 py-0 gap-1 text-xs', myVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
+					disabled={voting}
+					onclick={() => vote(comment.id, 'down')}
+					title={m.comments_vote_down()}
+				>
 						<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 							<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
 						</svg>
@@ -384,11 +385,11 @@
 
 					<!-- Reply button -->
 					{#if isLoggedIn}
-						<Button
-							variant="ghost"
-							size="sm"
-							class={cn('h-auto px-1 py-0 gap-1 text-xs', replyingTo === comment.id ? 'text-amber-400' : 'text-zinc-500 hover:text-zinc-300')}
-							onclick={() => {
+					<Button
+						variant="ghost"
+						size="sm"
+						class={cn('h-auto px-1 py-0 gap-1 text-xs', replyingTo === comment.id ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+						onclick={() => {
 								if (replyingTo === comment.id) {
 									replyingTo = null;
 									replyBody = '';
@@ -403,57 +404,57 @@
 							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 								<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
 							</svg>
-							Reply
+							{m.comments_reply()}
 						</Button>
 					{/if}
 
 					<!-- Delete (owner only) -->
 					{#if isOwner}
-						<Button
-							variant="ghost"
-							size="sm"
-							class="h-auto px-1 py-0 gap-1 text-xs text-zinc-600 hover:text-red-400 ml-auto"
-							disabled={deleting}
-							onclick={() => deleteComment(comment.id)}
-							title="Delete comment"
-						>
+					<Button
+						variant="ghost"
+						size="sm"
+						class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
+						disabled={deleting}
+						onclick={() => deleteComment(comment.id)}
+						title="Delete comment"
+					>
 							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 								<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
 							</svg>
-							Delete
+							{m.comments_delete()}
 						</Button>
 					{/if}
 				</div>
 
 				<!-- Inline reply form -->
 				{#if replyingTo === comment.id}
-					<div class="mt-1 flex flex-col gap-2 pl-2 border-l-2 border-zinc-700">
-						<Textarea
-							bind:value={replyBody}
-							placeholder="Write a reply…"
-							rows={2}
-						/>
-						<div class="flex items-center justify-between gap-2">
-							<span class={cn('text-xs tabular-nums', replyCharOver ? 'text-red-400' : 'text-zinc-600')}>
-								{replyCharCount}/2000
-							</span>
-							<div class="flex items-center gap-2">
-								{#if replyError}
-									<span class="text-xs text-red-400">{replyError}</span>
-								{/if}
-								<Button
-									variant="ghost"
-									size="sm"
-									class="text-zinc-400 hover:text-zinc-200"
-									onclick={() => { replyingTo = null; replyBody = ''; replyError = ''; }}
-								>Cancel</Button>
+			<div class="mt-1 flex flex-col gap-2 pl-2 border-l-2 border-(--color-border)">
+					<Textarea
+						bind:value={replyBody}
+						placeholder={m.comments_placeholder()}
+						rows={2}
+					/>
+					<div class="flex items-center justify-between gap-2">
+						<span class={cn('text-xs tabular-nums', replyCharOver ? 'text-(--color-danger)' : 'text-(--color-muted) opacity-60')}>
+							{replyCharCount}/2000
+						</span>
+						<div class="flex items-center gap-2">
+							{#if replyError}
+								<span class="text-xs text-(--color-danger)">{replyError}</span>
+							{/if}
+							<Button
+								variant="ghost"
+								size="sm"
+								class="text-(--color-muted) hover:text-(--color-text)"
+								onclick={() => { replyingTo = null; replyBody = ''; replyError = ''; }}
+							>{m.common_cancel()}</Button>
 								<Button
 									variant="default"
 									size="sm"
 									disabled={replyPosting || !replyBody.trim() || replyCharOver}
 									onclick={() => postReply(comment.id)}
 								>
-									{replyPosting ? 'Posting…' : 'Reply'}
+									{replyPosting ? m.comments_posting() : m.comments_reply()}
 								</Button>
 							</div>
 						</div>
@@ -462,59 +463,59 @@
 
 					<!-- Replies -->
 					{#if comment.replies && comment.replies.length > 0}
-						<div class="mt-1 flex flex-col gap-2 pl-3 border-l-2 border-zinc-700/60">
-							{#each comment.replies as reply (reply.id)}
-								{@const replyVote = myVotes[reply.id]}
-								{@const replyVoting = votingIds.has(reply.id)}
-								{@const replyDeleting = deletingIds.has(reply.id)}
-								{@const replyIsOwner = isLoggedIn && currentUserId === reply.user_id}
+				<div class="mt-1 flex flex-col gap-2 pl-3 border-l-2 border-(--color-border)/60">
+						{#each comment.replies as reply (reply.id)}
+							{@const replyVote = myVotes[reply.id]}
+							{@const replyVoting = votingIds.has(reply.id)}
+							{@const replyDeleting = deletingIds.has(reply.id)}
+							{@const replyIsOwner = isLoggedIn && currentUserId === reply.user_id}
 
-								<div class="rounded-md bg-zinc-800/30 px-3 py-2.5 flex flex-col gap-1.5 {replyDeleting ? 'opacity-50' : ''}">
-									<!-- Reply header -->
-									<div class="flex items-center gap-2 flex-wrap">
-										{#if avatarUrls[reply.user_id]}
-											<img src={avatarUrls[reply.user_id]} alt={reply.username} class="w-5 h-5 rounded-full object-cover flex-shrink-0" />
-										{:else}
-											<div class="w-5 h-5 rounded-full bg-zinc-700 flex items-center justify-center flex-shrink-0">
-												<span class="text-[8px] font-semibold text-zinc-300 leading-none">{initials(reply.username)}</span>
-											</div>
-										{/if}
-										{#if reply.username}
-										<a href="/users/{reply.username}" class="text-xs font-medium text-zinc-300 hover:text-amber-400 transition-colors">{reply.username}</a>
+							<div class="rounded-md bg-(--color-surface-2)/30 px-3 py-2.5 flex flex-col gap-1.5 {replyDeleting ? 'opacity-50' : ''}">
+								<!-- Reply header -->
+								<div class="flex items-center gap-2 flex-wrap">
+									{#if avatarUrls[reply.user_id]}
+										<img src={avatarUrls[reply.user_id]} alt={reply.username} class="w-5 h-5 rounded-full object-cover flex-shrink-0" />
 									{:else}
-										<span class="text-xs font-medium text-zinc-400">Anonymous</span>
+										<div class="w-5 h-5 rounded-full bg-(--color-surface-3) flex items-center justify-center flex-shrink-0">
+											<span class="text-[8px] font-semibold text-(--color-text) leading-none">{initials(reply.username)}</span>
+										</div>
 									{/if}
-										<span class="text-zinc-600 text-xs">&middot;</span>
-										<span class="text-xs text-zinc-500">{formatDate(reply.created)}</span>
-									</div>
+									{#if reply.username}
+									<a href="/users/{reply.username}" class="text-xs font-medium text-(--color-text) hover:text-(--color-brand) transition-colors">{reply.username}</a>
+								{:else}
+									<span class="text-xs font-medium text-(--color-muted)">{m.comments_anonymous()}</span>
+								{/if}
+									<span class="text-(--color-muted) opacity-60 text-xs">&middot;</span>
+									<span class="text-xs text-(--color-muted)">{formatDate(reply.created)}</span>
+								</div>
 
-									<!-- Reply body -->
-									<p class="text-sm text-zinc-300 leading-relaxed whitespace-pre-wrap break-words">{reply.body}</p>
+								<!-- Reply body -->
+								<p class="text-sm text-(--color-text) leading-relaxed whitespace-pre-wrap break-words">{reply.body}</p>
 
 								<!-- Reply actions -->
 								<div class="flex items-center gap-3 pt-0.5">
-									<Button
-										variant="ghost"
-										size="sm"
-										class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'up' ? 'text-amber-400' : 'text-zinc-500 hover:text-zinc-300')}
-										disabled={replyVoting}
-										onclick={() => vote(reply.id, 'up', comment.id)}
-										title="Upvote"
-									>
+							<Button
+								variant="ghost"
+								size="sm"
+								class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'up' ? 'text-(--color-brand)' : 'text-(--color-muted) hover:text-(--color-text)')}
+								disabled={replyVoting}
+								onclick={() => vote(reply.id, 'up', comment.id)}
+								title={m.comments_vote_up()}
+							>
 										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 											<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"/>
 										</svg>
 										<span class="tabular-nums">{reply.upvotes ?? 0}</span>
 									</Button>
 
-									<Button
-										variant="ghost"
-										size="sm"
-										class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'down' ? 'text-red-400' : 'text-zinc-500 hover:text-zinc-300')}
-										disabled={replyVoting}
-										onclick={() => vote(reply.id, 'down', comment.id)}
-										title="Downvote"
-									>
+							<Button
+								variant="ghost"
+								size="sm"
+								class={cn('h-auto px-1 py-0 gap-1 text-xs', replyVote === 'down' ? 'text-(--color-danger)' : 'text-(--color-muted) hover:text-(--color-text)')}
+								disabled={replyVoting}
+								onclick={() => vote(reply.id, 'down', comment.id)}
+								title={m.comments_vote_down()}
+							>
 										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 											<path stroke-linecap="round" stroke-linejoin="round" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
 										</svg>
@@ -522,19 +523,19 @@
 									</Button>
 
 									{#if replyIsOwner}
-										<Button
-											variant="ghost"
-											size="sm"
-											class="h-auto px-1 py-0 gap-1 text-xs text-zinc-600 hover:text-red-400 ml-auto"
-											disabled={replyDeleting}
-											onclick={() => deleteComment(reply.id, comment.id)}
-											title="Delete reply"
-										>
-											<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-												<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-											</svg>
-											Delete
-										</Button>
+								<Button
+										variant="ghost"
+										size="sm"
+										class="h-auto px-1 py-0 gap-1 text-xs text-(--color-muted) hover:text-(--color-danger) ml-auto"
+								disabled={replyDeleting}
+									onclick={() => deleteComment(reply.id, comment.id)}
+									title="Delete reply"
+								>
+										<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+											<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+										</svg>
+										{m.comments_delete()}
+									</Button>
 									{/if}
 								</div>
 								</div>

ui/src/lib/components/ui/badge/Badge.svelte

@@ -16,10 +16,10 @@
 		'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none';
 
 	const variants: Record<Variant, string> = {
-		default:     'border-transparent bg-amber-400 text-zinc-900',
-		secondary:   'border-transparent bg-zinc-700 text-zinc-200',
-		outline:     'border-zinc-600 text-zinc-300',
-		destructive: 'border-transparent bg-red-500/20 text-red-400',
+		default:     'border-transparent bg-(--color-brand) text-(--color-surface)',
+		secondary:   'border-transparent bg-(--color-surface-3) text-(--color-text)',
+		outline:     'border-(--color-border) text-(--color-muted)',
+		destructive: 'border-transparent bg-(--color-danger)/20 text-(--color-danger)',
 	};
 </script>
 

ui/src/lib/components/ui/button/Button.svelte

@@ -28,15 +28,15 @@
 	}: Props = $props();
 
 	const base =
-		'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 disabled:pointer-events-none disabled:opacity-50';
+		'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-brand) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-surface) disabled:pointer-events-none disabled:opacity-50';
 
 	const variants: Record<Variant, string> = {
-		default:     'bg-amber-400 text-zinc-900 hover:bg-amber-300',
-		secondary:   'bg-zinc-700 text-zinc-200 hover:bg-zinc-600',
-		outline:     'border border-zinc-600 bg-transparent text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100',
-		ghost:       'bg-transparent text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100',
-		destructive: 'bg-red-500/20 text-red-400 hover:bg-red-500/30 hover:text-red-300',
-		link:        'text-amber-400 underline-offset-4 hover:underline bg-transparent p-0 h-auto',
+		default:     'bg-(--color-brand) text-(--color-surface) hover:bg-(--color-brand-dim)',
+		secondary:   'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-border)',
+		outline:     'border border-(--color-border) bg-transparent text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)',
+		ghost:       'bg-transparent text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)',
+		destructive: 'bg-(--color-danger)/20 text-(--color-danger) hover:bg-(--color-danger)/30',
+		link:        'text-(--color-brand) underline-offset-4 hover:underline bg-transparent p-0 h-auto',
 	};
 
 	const sizes: Record<Size, string> = {

ui/src/lib/components/ui/card/Card.svelte

@@ -10,6 +10,6 @@
 	let { class: className = '', children }: Props = $props();
 </script>
 
-<div class={cn('rounded-xl border border-zinc-700 bg-zinc-800/50', className)}>
+<div class={cn('rounded-xl border border-(--color-border) bg-(--color-surface-2)/50', className)}>
 	{@render children?.()}
 </div>

ui/src/lib/components/ui/card/CardDescription.svelte

@@ -10,6 +10,6 @@
 	let { class: className = '', children }: Props = $props();
 </script>
 
-<p class={cn('text-sm text-zinc-400', className)}>
+<p class={cn('text-sm text-(--color-muted)', className)}>
 	{@render children?.()}
 </p>

ui/src/lib/components/ui/card/CardTitle.svelte

@@ -10,6 +10,6 @@
 	let { class: className = '', children }: Props = $props();
 </script>
 
-<h3 class={cn('font-semibold leading-none tracking-tight text-zinc-100', className)}>
+<h3 class={cn('font-semibold leading-none tracking-tight text-(--color-text)', className)}>
 	{@render children?.()}
 </h3>

ui/src/lib/components/ui/dialog/Dialog.svelte

@@ -36,7 +36,7 @@
 		aria-modal="true"
 		onclick={handleBackdropClick}
 	>
-		<div class={cn('bg-zinc-900 rounded-2xl border border-zinc-700 shadow-2xl w-full max-w-sm', className)}>
+		<div class={cn('bg-(--color-surface) rounded-2xl border border-(--color-border) shadow-2xl w-full max-w-sm', className)}>
 			{@render children?.()}
 		</div>
 	</div>

ui/src/lib/components/ui/dialog/DialogTitle.svelte

@@ -10,6 +10,6 @@
 	let { class: className = '', children }: Props = $props();
 </script>
 
-<h2 class={cn('text-base font-semibold leading-none tracking-tight text-zinc-100', className)}>
+<h2 class={cn('text-base font-semibold leading-none tracking-tight text-(--color-text)', className)}>
 	{@render children?.()}
 </h2>

ui/src/lib/components/ui/separator/Separator.svelte

@@ -12,7 +12,7 @@
 <div
 	role="separator"
 	class={cn(
-		'shrink-0 bg-zinc-700',
+		'shrink-0 bg-(--color-border)',
 		orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
 		className
 	)}

ui/src/lib/components/ui/textarea/Textarea.svelte

@@ -30,8 +30,8 @@
 	{rows}
 	{disabled}
 	class={cn(
-		'flex w-full rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-200 placeholder-zinc-500 resize-none transition-colors',
-		'focus:outline-none focus:border-amber-400',
+		'flex w-full rounded-lg border border-(--color-border) bg-(--color-surface-2) px-3 py-2 text-sm text-(--color-text) placeholder-zinc-500 resize-none transition-colors',
+		'focus:outline-none focus:border-(--color-brand)',
 		'disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}

ui/src/lib/server/pocketbase.ts

@@ -54,6 +54,7 @@ export interface PBUserSettings {
 	auto_next: boolean;
 	voice: string;
 	speed: number;
+	theme?: string;
 	updated?: string;
 }
 
@@ -778,7 +779,7 @@ export async function getSettings(
 
 export async function saveSettings(
 	sessionId: string,
-	settings: { autoNext: boolean; voice: string; speed: number },
+	settings: { autoNext: boolean; voice: string; speed: number; theme?: string },
 	userId?: string
 ): Promise<void> {
 	const existing = await listOne<PBUserSettings & { id: string }>(
@@ -793,6 +794,7 @@ export async function saveSettings(
 		speed: settings.speed,
 		updated: new Date().toISOString()
 	};
+	if (settings.theme !== undefined) payload.theme = settings.theme;
 	if (userId) payload.user_id = userId;
 
 	if (existing) {
@@ -915,6 +917,24 @@ export async function listAudioJobs(): Promise<AudioJob[]> {
 	return listAll<AudioJob>('audio_jobs', '', '-started');
 }
 
+// ─── Translation jobs ─────────────────────────────────────────────────────────
+
+export interface TranslationJob {
+	id: string;
+	cache_key: string; // "slug/chapter/lang"
+	slug: string;
+	chapter: number;
+	lang: string;
+	status: string; // "pending" | "running" | "done" | "failed"
+	error_message: string;
+	started: string;
+	finished: string;
+}
+
+export async function listTranslationJobs(): Promise<TranslationJob[]> {
+	return listAll<TranslationJob>('translation_jobs', '', '-started');
+}
+
 export async function getAudioTime(
 	sessionId: string,
 	slug: string,

ui/src/lib/types.ts

@@ -41,4 +41,5 @@ export interface UserSettings {
 	voice: string;
 	speed: number;
 	autoNext: boolean;
+	theme: string;
 }

ui/src/routes/+error.svelte

@@ -1,71 +1,59 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import * as m from '$lib/paraglide/messages.js';
 
 	const status = $derived(page.status);
-	const message = $derived(page.error?.message ?? 'Something went wrong.');
 
 	const title = $derived(
 		status === 404
-			? 'Page not found'
-			: status === 403
-				? 'Access denied'
-				: status === 429
-					? 'Too many requests'
-					: status >= 500
-						? 'Server error'
-						: 'Error'
+			? m.error_not_found_title()
+			: m.error_generic_title()
 	);
 
 	const description = $derived(
 		status === 404
-			? "The page you're looking for doesn't exist or has been moved."
-			: status === 403
-				? "You don't have permission to access this page."
-				: status === 429
-					? 'You are sending too many requests. Please slow down and try again shortly.'
-					: status >= 500
-						? 'An unexpected error occurred on our end. Try refreshing, or come back in a moment.'
-						: message
+			? m.error_not_found_body()
+			: page.error?.message ?? m.error_generic_title()
 	);
 
 	const code = $derived(String(status));
 </script>
 
 <svelte:head>
-	<title>{status} — {title} · libnovel</title>
+	<title>{m.error_status({ status: code })} · libnovel</title>
 </svelte:head>
 
 <!-- Full-viewport centred error page — no layout nav since this is +error.svelte -->
 <div
-	class="min-h-screen bg-zinc-950 text-zinc-100 flex flex-col items-center justify-center px-6 py-16 font-sans"
+	class="min-h-screen bg-(--color-surface) text-(--color-text) flex flex-col items-center justify-center px-6 py-16 font-sans"
 >
 	<!-- Large status code -->
-	<p class="text-[8rem] sm:text-[11rem] font-black leading-none text-zinc-800 select-none tabular-nums">
+	<p class="text-[8rem] sm:text-[11rem] font-black leading-none bg-(--color-surface-2) select-none tabular-nums">
 		{code}
 	</p>
 
 	<!-- Title + description -->
 	<div class="mt-4 text-center max-w-md space-y-2">
-		<h1 class="text-2xl sm:text-3xl font-bold text-zinc-100">{title}</h1>
-		<p class="text-zinc-400 text-sm sm:text-base leading-relaxed">{description}</p>
+		<h1 class="text-2xl sm:text-3xl font-bold text-(--color-text)">{title}</h1>
+		<p class="text-(--color-muted) text-sm sm:text-base leading-relaxed">{description}</p>
 	</div>
 
 	<!-- Actions -->
 	<div class="mt-10 flex flex-wrap gap-3 justify-center">
 		<a
 			href="/"
-			class="px-5 py-2.5 rounded-xl bg-amber-400 text-zinc-900 font-semibold text-sm hover:bg-amber-300 transition-colors"
+			class="px-5 py-2.5 rounded-xl bg-(--color-brand) text-(--color-surface) font-semibold text-sm hover:bg-(--color-brand-dim) transition-colors"
 		>
-			Go home
+			{m.error_go_home()}
 		</a>
 		<button
 			onclick={() => history.back()}
-			class="px-5 py-2.5 rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-200 font-semibold text-sm hover:bg-zinc-700 transition-colors"
+			class="px-5 py-2.5 rounded-xl bg-(--color-surface-2) border border-(--color-border) text-(--color-text) font-semibold text-sm hover:bg-(--color-surface-3) transition-colors"
 		>
-			Go back
+			{m.common_back()}
 		</button>
 	</div>
 
 	<!-- Subtle branding -->
-	<p class="mt-16 text-xs text-zinc-700 tracking-widest uppercase select-none">libnovel</p>
+	<p class="mt-16 text-xs text-(--color-muted) tracking-widest uppercase select-none">libnovel</p>
 </div>

ui/src/routes/+layout.server.ts

@@ -13,14 +13,15 @@ export const load: LayoutServerLoad = async ({ locals, url }) => {
 		redirect(302, `/login`);
 	}
 
-	let settings = { autoNext: false, voice: 'af_bella', speed: 1.0 };
+	let settings = { autoNext: false, voice: 'af_bella', speed: 1.0, theme: 'amber' };
 	try {
 		const row = await getSettings(locals.sessionId, locals.user?.id);
 		if (row) {
 			settings = {
 				autoNext: row.auto_next ?? false,
 				voice: row.voice ?? 'af_bella',
-				speed: row.speed ?? 1.0
+				speed: row.speed ?? 1.0,
+				theme: row.theme ?? 'amber'
 			};
 		}
 	} catch (e) {

ui/src/routes/+layout.svelte

@@ -2,12 +2,15 @@
 	import '../app.css';
 	import { page, navigating } from '$app/state';
 	import { goto } from '$app/navigation';
+	import { setContext } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { LayoutData } from './$types';
 	import { audioStore } from '$lib/audio.svelte';
 	import { env } from '$env/dynamic/public';
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
+	import * as m from '$lib/paraglide/messages.js';
+	import { locales, getLocale, localizeHref } from '$lib/paraglide/runtime.js';
 
 	let { children, data }: { children: Snippet; data: LayoutData } = $props();
 
@@ -21,24 +24,45 @@
 	// AudioPlayer components in chapter pages control it via audioStore.
 	let audioEl = $state<HTMLAudioElement | null>(null);
 
+	// ── Theme ──────────────────────────────────────────────────────────────
+	let currentTheme = $state(data.settings?.theme ?? 'amber');
+
+	// Expose theme state to child pages (e.g. profile theme picker)
+	setContext('theme', {
+		get current() { return currentTheme; },
+		set current(v: string) { currentTheme = v; }
+	});
+
+	$effect(() => {
+		if (typeof document !== 'undefined') {
+			document.documentElement.setAttribute('data-theme', currentTheme);
+		}
+	});
+
 	// Apply persisted settings once on mount (server-loaded data).
+	// Use a derived to react to future invalidateAll() re-loads too.
 	let settingsApplied = false;
 	$effect(() => {
-		if (!settingsApplied && data.settings) {
-			settingsApplied = true;
-			audioStore.autoNext = data.settings.autoNext;
-			audioStore.voice = data.settings.voice;
-			audioStore.speed = data.settings.speed;
+		if (data.settings) {
+			if (!settingsApplied) {
+				settingsApplied = true;
+				audioStore.autoNext = data.settings.autoNext;
+				audioStore.voice = data.settings.voice;
+				audioStore.speed = data.settings.speed;
+			}
+			// Always sync theme (profile page calls invalidateAll after saving)
+			currentTheme = data.settings.theme ?? 'amber';
 		}
 	});
 
 	// ── Persist settings changes (debounced 800ms) ──────────────────────────
 	let settingsSaveTimer = 0;
 	$effect(() => {
-		// Subscribe to the three settings fields
+		// Subscribe to the four settings fields
 		const autoNext = audioStore.autoNext;
 		const voice = audioStore.voice;
 		const speed = audioStore.speed;
+		const theme = currentTheme;
 
 		// Skip saving until settings have been applied from the server
 		if (!settingsApplied) return;
@@ -48,7 +72,7 @@
 			fetch('/api/settings', {
 				method: 'PUT',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ autoNext, voice, speed })
+				body: JSON.stringify({ autoNext, voice, speed, theme })
 			}).catch(() => {});
 		}, 800) as unknown as number;
 	});
@@ -170,6 +194,9 @@
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<title>libnovel</title>
+	<!-- Apply theme before first paint to avoid flash -->
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html `<script>document.documentElement.setAttribute('data-theme','${data.settings?.theme ?? 'amber'}')</script>`}
 	<!-- Umami analytics — no-op when PUBLIC_UMAMI_WEBSITE_ID is unset -->
 	{#if env.PUBLIC_UMAMI_WEBSITE_ID && env.PUBLIC_UMAMI_SCRIPT_URL}
 		<script
@@ -216,18 +243,18 @@
 <div class="min-h-screen flex flex-col" class:pb-24={audioStore.active}>
 	<!-- Navigation progress bar — shown while SSR is running for any page transition -->
 	{#if navigating}
-		<div class="fixed top-0 left-0 right-0 z-[100] h-1 bg-zinc-800">
-			<div class="h-full bg-amber-400 animate-progress-bar"></div>
+		<div class="fixed top-0 left-0 right-0 z-[100] h-1 bg-(--color-surface-2)">
+			<div class="h-full bg-(--color-brand) animate-progress-bar"></div>
 		</div>
 	{/if}
-	<header class="border-b border-zinc-700 bg-zinc-900 sticky top-0 z-50">
+	<header class="border-b border-(--color-border) bg-(--color-surface) sticky top-0 z-50">
 		<nav class="max-w-6xl mx-auto px-4 h-14 flex items-center gap-6">
-			<a href="/" class="text-amber-400 font-bold text-lg tracking-tight hover:text-amber-300 shrink-0">
+			<a href="/" class="text-(--color-brand) font-bold text-lg tracking-tight hover:text-(--color-brand-dim) shrink-0">
 				libnovel
 			</a>
 
 			{#if page.data.book?.title && /\/books\/[^/]+\/chapters\//.test(page.url.pathname)}
-				<span class="text-zinc-400 text-sm truncate min-w-0 flex-1 sm:flex-none sm:max-w-xs">
+				<span class="text-(--color-muted) text-sm truncate min-w-0 flex-1 sm:flex-none sm:max-w-xs">
 					{page.data.book.title}
 				</span>
 			{/if}
@@ -235,24 +262,24 @@
 			{#if data.user}
 				<!-- Desktop nav links (hidden on mobile) -->
 				<a
-					href="/books"
-					class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/books') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+			href="/books"
+				class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/books') ? 'text-(--color-text) font-medium' : 'text-(--color-muted) hover:text-(--color-text)'}"
 				>
-					Library
+					{m.nav_library()}
 				</a>
 			<a
 				href="/catalogue"
-				class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/catalogue') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+				class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/catalogue') ? 'text-(--color-text) font-medium' : 'text-(--color-muted) hover:text-(--color-text)'}"
 			>
-				Catalogue
+				{m.nav_catalogue()}
 			</a>
 			<a
 				href="https://feedback.libnovel.cc"
 				target="_blank"
 				rel="noopener noreferrer"
-				class="hidden sm:block text-sm transition-colors text-zinc-400 hover:text-zinc-100"
+				class="hidden sm:block text-sm transition-colors text-(--color-muted) hover:text-(--color-text)"
 			>
-				Feedback
+				{m.nav_feedback()}
 			</a>
 
 				<div class="ml-auto flex items-center gap-4">
@@ -260,20 +287,20 @@
 				{#if data.user?.role === 'admin'}
 					<a
 						href="/admin/scrape"
-						class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+						class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin') ? 'text-(--color-text) font-medium' : 'text-(--color-muted) hover:text-(--color-text)'}"
 					>
-						Admin
+						{m.nav_admin()}
 					</a>
 				{/if}
 					<a
 						href="/profile"
-						class="hidden sm:block text-sm transition-colors {page.url.pathname === '/profile' ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
+						class="hidden sm:block text-sm transition-colors {page.url.pathname === '/profile' ? 'text-(--color-text) font-medium' : 'text-(--color-muted) hover:text-(--color-text)'}"
 					>
 						{data.user.username}
 					</a>
 					<form method="POST" action="/logout" class="hidden sm:block">
-						<Button type="submit" variant="ghost" size="sm" class="text-zinc-400 hover:text-zinc-100">
-							Sign out
+						<Button type="submit" variant="ghost" size="sm" class="text-(--color-muted) hover:text-(--color-text)">
+							{m.nav_sign_out()}
 						</Button>
 					</form>
 
@@ -282,7 +309,7 @@
 						variant="ghost"
 						size="icon"
 						onclick={() => (menuOpen = !menuOpen)}
-						aria-label="Toggle menu"
+						aria-label={m.nav_toggle_menu()}
 						aria-expanded={menuOpen}
 						class="sm:hidden -mr-1"
 					>
@@ -303,9 +330,9 @@
 				<div class="ml-auto">
 					<a
 						href="/login"
-						class="text-sm px-3 py-1.5 rounded bg-amber-400 text-zinc-900 font-semibold hover:bg-amber-300 transition-colors"
+						class="text-sm px-3 py-1.5 rounded bg-(--color-brand) text-(--color-surface) font-semibold hover:bg-(--color-brand-dim) transition-colors"
 					>
-						Sign in
+						{m.nav_sign_in()}
 					</a>
 				</div>
 			{/if}
@@ -313,56 +340,56 @@
 
 		<!-- Mobile drawer (full-width, below the bar) -->
 		{#if data.user && menuOpen}
-			<div class="sm:hidden border-t border-zinc-700 bg-zinc-900 px-4 py-3 flex flex-col gap-1">
+			<div class="sm:hidden border-t border-(--color-border) bg-(--color-surface) px-4 py-3 flex flex-col gap-1">
 				<a
 					href="/books"
 					onclick={() => (menuOpen = false)}
-					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/books') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/books') ? 'bg-(--color-surface-2) text-(--color-text)' : 'text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)'}"
 				>
-					Library
+					{m.nav_library()}
 				</a>
 			<a
 				href="/catalogue"
 				onclick={() => (menuOpen = false)}
-				class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/catalogue') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+				class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/catalogue') ? 'bg-(--color-surface-2) text-(--color-text)' : 'text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)'}"
 			>
-				Catalogue
+				{m.nav_catalogue()}
 			</a>
 			<a
 				href="https://feedback.libnovel.cc"
 				target="_blank"
 				rel="noopener noreferrer"
 				onclick={() => (menuOpen = false)}
-				class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
+				class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)"
 			>
-				Feedback ↗
+				{m.nav_feedback()} ↗
 			</a>
 				<a
 					href="/profile"
 					onclick={() => (menuOpen = false)}
-					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname === '/profile' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname === '/profile' ? 'bg-(--color-surface-2) text-(--color-text)' : 'text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)'}"
 				>
-					Profile <span class="text-zinc-500 font-normal">({data.user.username})</span>
+					{m.nav_profile()} <span class="text-(--color-muted) font-normal opacity-60">({data.user.username})</span>
 				</a>
 			{#if data.user?.role === 'admin'}
-				<div class="my-1 border-t border-zinc-700/60"></div>
-				<p class="px-3 pt-1 pb-0.5 text-xs text-zinc-600 uppercase tracking-widest">Admin</p>
+				<div class="my-1 border-t border-(--color-border)/60"></div>
+				<p class="px-3 pt-1 pb-0.5 text-xs text-(--color-muted) opacity-50 uppercase tracking-widest">{m.nav_admin()}</p>
 				<a
 					href="/admin/scrape"
 					onclick={() => (menuOpen = false)}
-					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
+					class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin') ? 'bg-(--color-surface-2) text-(--color-text)' : 'text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)'}"
 				>
-					Admin panel
+					{m.nav_admin_panel()}
 				</a>
 			{/if}
-			<div class="my-1 border-t border-zinc-700/60"></div>
+			<div class="my-1 border-t border-(--color-border)/60"></div>
 			<form method="POST" action="/logout">
 				<Button
 					type="submit"
 					variant="ghost"
-					class="w-full justify-start px-3 py-2.5 h-auto text-sm font-medium text-red-400 hover:bg-zinc-800 hover:text-red-300"
+					class="w-full justify-start px-3 py-2.5 h-auto text-sm font-medium text-(--color-danger) hover:bg-(--color-surface-2) hover:text-(--color-danger)"
 				>
-					Sign out
+					{m.nav_sign_out()}
 				</Button>
 			</form>
 			</div>
@@ -375,19 +402,19 @@
 		{/key}
 	</main>
 
-	<footer class="border-t border-zinc-800 mt-auto">
-		<div class="max-w-6xl mx-auto px-4 py-6 flex flex-col items-center gap-4 text-xs text-zinc-500">
+	<footer class="border-t border-(--color-border) mt-auto">
+		<div class="max-w-6xl mx-auto px-4 py-6 flex flex-col items-center gap-4 text-xs text-(--color-muted)">
 			<!-- Top row: site links -->
 			<nav class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
-			<a href="/books" class="hover:text-zinc-300 transition-colors">Library</a>
-			<a href="/catalogue" class="hover:text-zinc-300 transition-colors">Catalogue</a>
+			<a href="/books" class="hover:text-(--color-text) transition-colors">{m.footer_library()}</a>
+			<a href="/catalogue" class="hover:text-(--color-text) transition-colors">{m.footer_catalogue()}</a>
 			<a
 				href="https://feedback.libnovel.cc"
 				target="_blank"
 				rel="noopener noreferrer"
-				class="hover:text-zinc-300 transition-colors flex items-center gap-1"
+				class="hover:text-(--color-text) transition-colors flex items-center gap-1"
 			>
-				Feedback
+				{m.footer_feedback()}
 				<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
 						d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
@@ -397,7 +424,7 @@
 				href="https://novelfire.net"
 					target="_blank"
 					rel="noopener noreferrer"
-					class="hover:text-zinc-300 transition-colors flex items-center gap-1"
+					class="hover:text-(--color-text) transition-colors flex items-center gap-1"
 				>
 					novelfire.net
 					<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -405,34 +432,50 @@
 							d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
 					</svg>
 				</a>
-			</nav>
+		<!-- Locale switcher (always visible) -->
+			<div class="hidden sm:flex items-center gap-1 ml-2">
+				{#each locales as locale}
+					<a
+						href={localizeHref(page.url.pathname, { locale })}
+						data-sveltekit-reload
+						class="px-1.5 py-0.5 rounded text-xs font-mono transition-colors {getLocale() === locale
+							? 'text-(--color-brand) bg-(--color-brand)/10'
+							: 'text-(--color-muted) hover:text-(--color-text)'}"
+						aria-label="{m.locale_switcher_label()}: {locale}"
+					>
+						{locale.toUpperCase()}
+					</a>
+				{/each}
+			</div>
+
+		</nav>
 		<!-- Bottom row: legal links + copyright -->
-		<div class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-zinc-500">
-			<a href="/disclaimer" class="hover:text-zinc-300 transition-colors">Disclaimer</a>
-			<a href="/privacy" class="hover:text-zinc-300 transition-colors">Privacy</a>
-			<a href="/dmca" class="hover:text-zinc-300 transition-colors">DMCA</a>
-			<span>&copy; {new Date().getFullYear()} libnovel</span>
+		<div class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-(--color-muted)">
+			<a href="/disclaimer" class="hover:text-(--color-text) transition-colors">{m.footer_disclaimer()}</a>
+			<a href="/privacy" class="hover:text-(--color-text) transition-colors">{m.footer_privacy()}</a>
+			<a href="/dmca" class="hover:text-(--color-text) transition-colors">{m.footer_dmca()}</a>
+			<span>{m.footer_copyright({ year: String(new Date().getFullYear()) })}</span>
 		</div>
 		<!-- Build version / commit SHA / build time -->
 		{#snippet buildTime()}
 			{#if env.PUBLIC_BUILD_TIME && env.PUBLIC_BUILD_TIME !== 'unknown'}
 				{@const d = new Date(env.PUBLIC_BUILD_TIME)}
-				<span class="text-zinc-500" title="Build time">
+				<span class="text-(--color-muted)" title="Build time">
 					· {d.toUTCString().replace(' GMT', ' UTC').replace(/:\d\d /, ' ')}
 				</span>
 			{/if}
 		{/snippet}
-		<div class="text-xs tabular-nums font-mono px-2 py-0.5 rounded bg-zinc-800 border border-zinc-700">
+		<div class="text-xs tabular-nums font-mono px-2 py-0.5 rounded bg-(--color-surface-2) border border-(--color-border)">
 			{#if env.PUBLIC_BUILD_VERSION && env.PUBLIC_BUILD_VERSION !== 'dev'}
-				<span class="text-zinc-300" title="Build version">{env.PUBLIC_BUILD_VERSION}</span>
+				<span class="text-(--color-text)" title="Build version">{env.PUBLIC_BUILD_VERSION}</span>
 				{#if env.PUBLIC_BUILD_COMMIT && env.PUBLIC_BUILD_COMMIT !== 'unknown'}
-					<span class="text-zinc-500 select-all" title="Commit SHA"
+					<span class="text-(--color-muted) select-all" title="Commit SHA"
 						>+{env.PUBLIC_BUILD_COMMIT.slice(0, 7)}</span
 					>
 				{/if}
 				{@render buildTime()}
 			{:else}
-				<span class="text-zinc-400">dev</span>
+				<span class="text-(--color-muted)">dev</span>
 			{/if}
 		</div>
 		</div>
@@ -441,20 +484,20 @@
 
 <!-- ── Persistent mini-player bar ─────────────────────────────────────────── -->
 {#if audioStore.active}
-	<div class="fixed bottom-0 left-0 right-0 z-50 bg-zinc-900 border-t border-zinc-700 shadow-2xl">
+	<div class="fixed bottom-0 left-0 right-0 z-50 bg-(--color-surface) border-t border-(--color-border) shadow-2xl">
 
 		<!-- Chapter list drawer (slides up above the mini-bar) -->
 		{#if chapterDrawerOpen && audioStore.chapters.length > 0}
-			<div class="border-b border-zinc-700 bg-zinc-900 max-h-[32rem] overflow-y-auto">
+			<div class="border-b border-(--color-border) bg-(--color-surface) max-h-[32rem] overflow-y-auto">
 				<div class="max-w-6xl mx-auto px-4">
-					<div class="flex items-center justify-between py-2 border-b border-zinc-800 sticky top-0 bg-zinc-900">
-						<span class="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Chapters</span>
+					<div class="flex items-center justify-between py-2 border-b border-(--color-border) sticky top-0 bg-(--color-surface)">
+						<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">{m.player_chapters()}</span>
 						<Button
 							variant="ghost"
 							size="icon"
 							onclick={() => (chapterDrawerOpen = false)}
-							aria-label="Close chapter list"
-							class="h-6 w-6 text-zinc-600 hover:text-zinc-300"
+							aria-label={m.player_close_chapter_list()}
+							class="h-6 w-6 text-(--color-muted) hover:text-(--color-text)"
 						>
 							<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
@@ -465,16 +508,16 @@
 						<a
 							href="/books/{audioStore.slug}/chapters/{ch.number}"
 							onclick={() => (chapterDrawerOpen = false)}
-							class="flex items-center gap-2 py-2 text-xs transition-colors hover:text-zinc-100 {ch.number === audioStore.chapter
-								? 'text-amber-400 font-semibold'
-								: 'text-zinc-400'}"
+							class="flex items-center gap-2 py-2 text-xs transition-colors hover:text-(--color-text) {ch.number === audioStore.chapter
+								? 'text-(--color-brand) font-semibold'
+								: 'text-(--color-muted)'}"
 						>
-							<span class="tabular-nums text-zinc-600 w-8 shrink-0 text-right">
+							<span class="tabular-nums text-(--color-muted) opacity-60 w-8 shrink-0 text-right">
 								{ch.number}
 							</span>
-							<span class="truncate">{ch.title || `Chapter ${ch.number}`}</span>
+							<span class="truncate">{ch.title || m.player_chapter_n({ n: String(ch.number) })}</span>
 							{#if ch.number === audioStore.chapter}
-								<svg class="w-3 h-3 shrink-0 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+								<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
 									<path d="M8 5v14l11-7z"/>
 								</svg>
 							{/if}
@@ -486,9 +529,9 @@
 
 		<!-- Generation progress bar (sits at very top of the bar) -->
 		{#if audioStore.status === 'generating' || audioStore.status === 'loading'}
-			<div class="h-0.5 bg-zinc-800">
+			<div class="h-0.5 bg-(--color-surface-2)">
 				<div
-					class="h-full bg-amber-400 transition-none"
+					class="h-full bg-(--color-brand) transition-none"
 					style="width: {audioStore.progress}%"
 				></div>
 			</div>
@@ -501,8 +544,8 @@
 					max={audioStore.duration || 0}
 					value={audioStore.currentTime}
 					oninput={seek}
-					class="w-full h-1 accent-amber-400 cursor-pointer block"
-					style="margin: 0; border-radius: 0;"
+					class="w-full h-1 accent-[--color-brand] cursor-pointer block"
+					style="margin: 0; border-radius: 0; accent-color: var(--color-brand);"
 				/>
 			</div>
 		{/if}
@@ -511,27 +554,27 @@
 
 		<!-- Track info (click to open chapter list drawer) -->
 			<button
-				class="flex-1 min-w-0 text-left rounded px-1 -ml-1 hover:bg-zinc-800 transition-colors"
+				class="flex-1 min-w-0 text-left rounded px-1 -ml-1 hover:bg-(--color-surface-2) transition-colors"
 				onclick={() => { if (audioStore.chapters.length > 0) chapterDrawerOpen = !chapterDrawerOpen; }}
-				aria-label={audioStore.chapters.length > 0 ? 'Toggle chapter list' : undefined}
-				title={audioStore.chapters.length > 0 ? 'Chapter list' : undefined}
+				aria-label={audioStore.chapters.length > 0 ? m.player_toggle_chapter_list() : undefined}
+				title={audioStore.chapters.length > 0 ? m.player_chapter_list_label() : undefined}
 			>
 				{#if audioStore.chapterTitle}
-					<p class="text-xs text-zinc-100 truncate leading-tight">{audioStore.chapterTitle}</p>
+					<p class="text-xs text-(--color-text) truncate leading-tight">{audioStore.chapterTitle}</p>
 				{/if}
 				{#if audioStore.bookTitle}
-					<p class="text-xs text-zinc-500 truncate leading-tight">{audioStore.bookTitle}</p>
+					<p class="text-xs text-(--color-muted) truncate leading-tight">{audioStore.bookTitle}</p>
 				{/if}
 				{#if audioStore.status === 'generating'}
-					<p class="text-xs text-amber-400 leading-tight">
-						Generating… {Math.round(audioStore.progress)}%
+					<p class="text-xs text-(--color-brand) leading-tight">
+						{m.player_generating({ percent: String(Math.round(audioStore.progress)) })}
 					</p>
 				{:else if audioStore.status === 'ready'}
-					<p class="text-xs text-zinc-500 tabular-nums leading-tight">
+					<p class="text-xs text-(--color-muted) tabular-nums leading-tight">
 						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
 					</p>
 				{:else if audioStore.status === 'loading'}
-					<p class="text-xs text-zinc-500 leading-tight">Loading…</p>
+					<p class="text-xs text-(--color-muted) leading-tight">{m.player_loading()}</p>
 				{/if}
 			</button>
 
@@ -541,8 +584,8 @@
 					variant="ghost"
 					size="icon"
 					onclick={skipBack}
-					title="Back 15s"
-					aria-label="Rewind 15 seconds"
+					title={m.player_back_15()}
+					aria-label={m.player_rewind_15()}
 				>
 					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
 						<path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
@@ -550,11 +593,11 @@
 					</svg>
 				</Button>
 
-				<!-- Play / Pause — custom circular amber style, kept as raw button -->
+				<!-- Play / Pause — custom circular brand style, kept as raw button -->
 				<button
 					onclick={togglePlay}
-					class="w-10 h-10 rounded-full bg-amber-400 text-zinc-900 flex items-center justify-center hover:bg-amber-300 transition-colors flex-shrink-0"
-					aria-label={audioStore.isPlaying ? 'Pause' : 'Play'}
+					class="w-10 h-10 rounded-full bg-(--color-brand) text-(--color-surface) flex items-center justify-center hover:bg-(--color-brand-dim) transition-colors flex-shrink-0"
+					aria-label={audioStore.isPlaying ? m.player_pause() : m.player_play()}
 				>
 					{#if audioStore.isPlaying}
 						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
@@ -572,8 +615,8 @@
 					variant="ghost"
 					size="icon"
 					onclick={skipForward}
-					title="Forward 30s"
-					aria-label="Skip 30 seconds"
+					title={m.player_forward_30()}
+					aria-label={m.player_skip_30()}
 				>
 					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
 						<path d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"/>
@@ -584,9 +627,9 @@
 				<!-- Speed control — fixed-width pill, kept as raw button -->
 				<button
 					onclick={cycleSpeed}
-					class="text-xs font-semibold text-zinc-300 hover:text-amber-400 transition-colors px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 flex-shrink-0 tabular-nums w-12 text-center"
-					title="Change playback speed"
-					aria-label="Playback speed {audioStore.speed}x"
+					class="text-xs font-semibold text-(--color-text) hover:text-(--color-brand) transition-colors px-2 py-1 rounded bg-(--color-surface-2) hover:bg-(--color-surface-3) flex-shrink-0 tabular-nums w-12 text-center"
+					title={m.player_change_speed()}
+					aria-label={m.player_speed_label({ speed: String(audioStore.speed) })}
 				>
 					{audioStore.speed}×
 				</button>
@@ -597,17 +640,17 @@
 				class={cn(
 					'relative p-1.5 rounded flex-shrink-0 transition-colors',
 					audioStore.autoNext
-						? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25'
-						: 'text-zinc-600 hover:text-zinc-300 hover:bg-zinc-800'
+						? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25'
+						: 'text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2)'
 				)}
 				title={audioStore.autoNext
 					? audioStore.nextStatus === 'prefetched'
-						? `Auto-next on — Ch.${audioStore.nextChapter} ready`
+						? m.player_auto_next_ready({ n: String(audioStore.nextChapter) })
 						: audioStore.nextStatus === 'prefetching'
-							? `Auto-next on — preparing Ch.${audioStore.nextChapter}…`
-							: 'Auto-next on'
-					: 'Auto-next off'}
-				aria-label="Auto-next {audioStore.autoNext ? 'on' : 'off'}"
+							? m.player_auto_next_preparing({ n: String(audioStore.nextChapter) })
+							: m.player_auto_next_on()
+					: m.player_auto_next_off()}
+				aria-label={m.player_auto_next_aria({ state: audioStore.autoNext ? m.common_on() : m.common_off() })}
 				aria-pressed={audioStore.autoNext}
 			>
 				<!-- "skip to end" / auto-advance icon -->
@@ -616,14 +659,14 @@
 				</svg>
 				<!-- Prefetch status dot -->
 				{#if audioStore.autoNext && audioStore.nextStatus === 'prefetching'}
-					<span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
+					<span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 rounded-full bg-(--color-brand) animate-pulse"></span>
 				{:else if audioStore.autoNext && audioStore.nextStatus === 'prefetched'}
 					<span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 rounded-full bg-green-400"></span>
 				{/if}
 			</button>
 			{:else if audioStore.status === 'generating'}
 				<!-- Spinner during generation -->
-				<svg class="w-6 h-6 text-amber-400 animate-spin flex-shrink-0" fill="none" viewBox="0 0 24 24">
+				<svg class="w-6 h-6 text-(--color-brand) animate-spin flex-shrink-0" fill="none" viewBox="0 0 24 24">
 					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 				</svg>
@@ -634,8 +677,8 @@
 				<a
 					href="/books/{audioStore.slug}/chapters/{audioStore.chapter}"
 					class="shrink-0 rounded overflow-hidden hover:opacity-80 transition-opacity"
-					title="Go to chapter"
-					aria-label="Go to chapter"
+					title={m.player_go_to_chapter()}
+					aria-label={m.player_go_to_chapter()}
 				>
 					{#if audioStore.cover}
 						<img
@@ -645,8 +688,8 @@
 						/>
 					{:else}
 						<!-- Fallback book icon -->
-						<div class="w-8 h-11 flex items-center justify-center bg-zinc-800 rounded border border-zinc-700">
-							<svg class="w-4 h-4 text-zinc-500" fill="currentColor" viewBox="0 0 24 24">
+						<div class="w-8 h-11 flex items-center justify-center bg-(--color-surface-2) rounded border border-(--color-border)">
+							<svg class="w-4 h-4 text-(--color-muted)" fill="currentColor" viewBox="0 0 24 24">
 								<path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 14H8v-2h8v2zm0-4H8v-2h8v2zm0-4H8V6h8v2z"/>
 							</svg>
 						</div>
@@ -659,9 +702,9 @@
 				variant="ghost"
 				size="icon"
 				onclick={dismiss}
-				title="Close player"
-				aria-label="Close player"
-				class="text-zinc-600 hover:text-zinc-400 flex-shrink-0"
+				title={m.player_close()}
+				aria-label={m.player_close()}
+				class="text-(--color-muted) hover:text-(--color-text) flex-shrink-0"
 			>
 				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>

ui/src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
@@ -16,22 +17,22 @@
 </script>
 
 <svelte:head>
-	<title>libnovel</title>
+	<title>{m.home_title()}</title>
 </svelte:head>
 
 <!-- Stats bar -->
 <div class="flex gap-6 mb-8 text-center">
-	<div class="flex-1 rounded-lg bg-zinc-800 border border-zinc-700 py-4 px-6">
-		<p class="text-2xl font-bold text-amber-400">{data.stats.totalBooks}</p>
-		<p class="text-xs text-zinc-400 mt-0.5">Books</p>
+	<div class="flex-1 rounded-lg bg-(--color-surface-2) border border-(--color-border) py-4 px-6">
+		<p class="text-2xl font-bold text-(--color-brand)">{data.stats.totalBooks}</p>
+		<p class="text-xs text-(--color-muted) mt-0.5">{m.home_stat_books()}</p>
 	</div>
-	<div class="flex-1 rounded-lg bg-zinc-800 border border-zinc-700 py-4 px-6">
-		<p class="text-2xl font-bold text-amber-400">{data.stats.totalChapters.toLocaleString()}</p>
-		<p class="text-xs text-zinc-400 mt-0.5">Chapters</p>
+	<div class="flex-1 rounded-lg bg-(--color-surface-2) border border-(--color-border) py-4 px-6">
+		<p class="text-2xl font-bold text-(--color-brand)">{data.stats.totalChapters.toLocaleString()}</p>
+		<p class="text-xs text-(--color-muted) mt-0.5">{m.home_stat_chapters()}</p>
 	</div>
-	<div class="flex-1 rounded-lg bg-zinc-800 border border-zinc-700 py-4 px-6">
-		<p class="text-2xl font-bold text-amber-400">{data.stats.booksInProgress}</p>
-		<p class="text-xs text-zinc-400 mt-0.5">In progress</p>
+	<div class="flex-1 rounded-lg bg-(--color-surface-2) border border-(--color-border) py-4 px-6">
+		<p class="text-2xl font-bold text-(--color-brand)">{data.stats.booksInProgress}</p>
+		<p class="text-xs text-(--color-muted) mt-0.5">{m.home_stat_in_progress()}</p>
 	</div>
 </div>
 
@@ -39,16 +40,16 @@
 {#if data.continueReading.length > 0}
 	<section class="mb-10">
 		<div class="flex items-baseline justify-between mb-3">
-			<h2 class="text-lg font-bold text-zinc-100">Continue Reading</h2>
-			<a href="/books" class="text-xs text-amber-400 hover:text-amber-300">View all</a>
+			<h2 class="text-lg font-bold text-(--color-text)">{m.home_continue_reading()}</h2>
+			<a href="/books" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
 		</div>
 		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 			{#each data.continueReading as { book, chapter }}
 				<a
 					href="/books/{book.slug}/chapters/{chapter}"
-					class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+					class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
 				>
-					<div class="aspect-[2/3] bg-zinc-900 overflow-hidden relative">
+					<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden relative">
 						{#if book.cover}
 							<img
 								src={book.cover}
@@ -57,7 +58,7 @@
 								loading="lazy"
 							/>
 						{:else}
-							<div class="w-full h-full flex items-center justify-center text-zinc-600">
+							<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
 								<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
 										d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -65,14 +66,14 @@
 							</div>
 						{/if}
 						<!-- Chapter badge overlay -->
-						<span class="absolute bottom-1.5 right-1.5 text-xs bg-amber-400 text-zinc-900 font-bold px-1.5 py-0.5 rounded">
-							ch.{chapter}
+						<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-brand) text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
+							{m.home_chapter_badge({ n: String(chapter) })}
 						</span>
 					</div>
 					<div class="p-2">
-						<h3 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
 						{#if book.author}
-							<p class="text-xs text-zinc-500 truncate mt-0.5">{book.author}</p>
+							<p class="text-xs text-(--color-muted) truncate mt-0.5">{book.author}</p>
 						{/if}
 					</div>
 				</a>
@@ -85,17 +86,17 @@
 {#if data.recentlyUpdated.length > 0}
 	<section class="mb-10">
 		<div class="flex items-baseline justify-between mb-3">
-			<h2 class="text-lg font-bold text-zinc-100">Recently Updated</h2>
-			<a href="/books" class="text-xs text-amber-400 hover:text-amber-300">View all</a>
+			<h2 class="text-lg font-bold text-(--color-text)">{m.home_recently_updated()}</h2>
+			<a href="/books" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
 		</div>
 		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 			{#each data.recentlyUpdated as book}
 				{@const genres = parseGenres(book.genres)}
 				<a
 					href="/books/{book.slug}"
-					class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+					class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
 				>
-					<div class="aspect-[2/3] bg-zinc-900 overflow-hidden">
+					<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden">
 						{#if book.cover}
 							<img
 								src={book.cover}
@@ -104,7 +105,7 @@
 								loading="lazy"
 							/>
 						{:else}
-							<div class="w-full h-full flex items-center justify-center text-zinc-600">
+							<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
 								<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
 										d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -113,17 +114,17 @@
 						{/if}
 					</div>
 					<div class="p-2 flex flex-col gap-1">
-						<h3 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
 						{#if book.author}
-							<p class="text-xs text-zinc-400 truncate">{book.author}</p>
+							<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
 						{/if}
 						{#if book.status}
-							<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-700 text-zinc-300 self-start">{book.status}</span>
+							<span class="text-xs px-1.5 py-0.5 rounded bg-(--color-surface-3) text-(--color-text) self-start">{book.status}</span>
 						{/if}
 						{#if genres.length > 0}
 							<div class="flex flex-wrap gap-1 mt-auto pt-1">
 								{#each genres.slice(0, 2) as genre}
-									<span class="text-xs px-1 py-0.5 rounded bg-zinc-900 text-zinc-500">{genre}</span>
+									<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
 								{/each}
 							</div>
 						{/if}
@@ -136,14 +137,14 @@
 
 <!-- Empty state -->
 {#if data.continueReading.length === 0 && data.recentlyUpdated.length === 0}
-	<div class="text-center py-20 text-zinc-500">
-		<p class="text-lg font-semibold text-zinc-300 mb-2">Your library is empty</p>
-		<p class="text-sm mb-6">Discover novels and scrape them into your library.</p>
+	<div class="text-center py-20 text-(--color-muted)">
+		<p class="text-lg font-semibold text-(--color-text) mb-2">{m.home_empty_title()}</p>
+		<p class="text-sm mb-6">{m.home_empty_body()}</p>
 		<a
 			href="/catalogue"
-			class="inline-block px-6 py-3 bg-amber-400 text-zinc-900 font-semibold rounded hover:bg-amber-300 transition-colors"
+			class="inline-block px-6 py-3 bg-(--color-brand) text-(--color-surface) font-semibold rounded hover:bg-(--color-brand-dim) transition-colors"
 		>
-			Discover Novels
+			{m.home_discover_novels()}
 		</a>
 	</div>
 {/if}
@@ -152,16 +153,16 @@
 {#if data.subscriptionFeed.length > 0}
 	<section class="mb-10">
 		<div class="flex items-baseline justify-between mb-3">
-			<h2 class="text-lg font-bold text-zinc-100">From People You Follow</h2>
+			<h2 class="text-lg font-bold text-(--color-text)">{m.home_from_following()}</h2>
 		</div>
 		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 			{#each data.subscriptionFeed as { book, readerUsername }}
 				{@const genres = parseGenres(book.genres)}
 				<a
 					href="/books/{book.slug}"
-					class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+					class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
 				>
-					<div class="aspect-[2/3] bg-zinc-900 overflow-hidden">
+					<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden">
 						{#if book.cover}
 							<img
 								src={book.cover}
@@ -170,7 +171,7 @@
 								loading="lazy"
 							/>
 						{:else}
-							<div class="w-full h-full flex items-center justify-center text-zinc-600">
+							<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
 								<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
 										d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -179,18 +180,18 @@
 						{/if}
 					</div>
 					<div class="p-2 flex flex-col gap-1">
-						<h3 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
 						{#if book.author}
-							<p class="text-xs text-zinc-400 truncate">{book.author}</p>
+							<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
 						{/if}
 						<!-- Reader attribution -->
-						<p class="text-xs text-zinc-600 truncate mt-0.5">
-							via <span class="text-amber-500/70">{readerUsername}</span>
+						<p class="text-xs text-(--color-muted) truncate mt-0.5">
+							{m.home_via_reader({ username: readerUsername })}
 						</p>
 						{#if genres.length > 0}
 							<div class="flex flex-wrap gap-1 mt-auto pt-1">
 								{#each genres.slice(0, 1) as genre}
-									<span class="text-xs px-1 py-0.5 rounded bg-zinc-900 text-zinc-500">{genre}</span>
+									<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
 								{/each}
 							</div>
 						{/if}

ui/src/routes/admin/+layout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import * as m from '$lib/paraglide/messages.js';
 
 	const internalLinks = [
 		{ href: '/admin/scrape', label: 'Scrape' },
-		{ href: '/admin/audio', label: 'Audio' }
+		{ href: '/admin/audio', label: 'Audio' },
+		{ href: '/admin/translation', label: 'Translation' },
+		{ href: '/admin/changelog', label: 'Changelog' }
 	];
 
 	const externalLinks = [
@@ -23,18 +26,18 @@
 
 <div class="flex min-h-[calc(100vh-4rem)] gap-0">
 	<!-- Sidebar -->
-	<aside class="w-48 shrink-0 border-r border-zinc-800 px-3 py-6 flex flex-col gap-6">
+	<aside class="w-48 shrink-0 border-r border-(--color-border) px-3 py-6 flex flex-col gap-6">
 		<!-- Internal pages -->
 		<div>
-			<p class="px-2 mb-2 text-xs font-semibold text-zinc-600 uppercase tracking-widest">Pages</p>
+			<p class="px-2 mb-2 text-xs font-semibold text-(--color-muted) uppercase tracking-widest">{m.admin_pages_label()}</p>
 			<nav class="flex flex-col gap-0.5">
 				{#each internalLinks as link}
 					<a
 						href={link.href}
 						class="px-2 py-1.5 rounded-md text-sm font-medium transition-colors
 							{page.url.pathname.startsWith(link.href)
-								? 'bg-zinc-800 text-zinc-100'
-								: 'text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200'}"
+								? 'bg-(--color-surface-2) text-(--color-text)'
+								: 'text-(--color-muted) hover:bg-(--color-surface-2)/60 hover:text-(--color-text)'}"
 					>
 						{link.label}
 					</a>
@@ -44,14 +47,14 @@
 
 		<!-- External tools -->
 		<div>
-			<p class="px-2 mb-2 text-xs font-semibold text-zinc-600 uppercase tracking-widest">Tools</p>
+			<p class="px-2 mb-2 text-xs font-semibold text-(--color-muted) uppercase tracking-widest">{m.admin_tools_label()}</p>
 			<nav class="flex flex-col gap-0.5">
 				{#each externalLinks as link}
 					<a
 						href={link.href}
 						target="_blank"
 						rel="noopener noreferrer"
-						class="px-2 py-1.5 rounded-md text-sm font-medium text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200 transition-colors flex items-center justify-between"
+						class="px-2 py-1.5 rounded-md text-sm font-medium text-(--color-muted) hover:bg-(--color-surface-2)/60 hover:text-(--color-text) transition-colors flex items-center justify-between"
 					>
 						{link.label}
 						<svg class="w-3 h-3 shrink-0 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">

ui/src/routes/admin/audio/+page.svelte

@@ -3,6 +3,7 @@
 	import { invalidateAll } from '$app/navigation';
 	import type { PageData } from './$types';
 	import type { AudioJob, AudioCacheEntry } from '$lib/server/pocketbase';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
@@ -33,10 +34,10 @@
 	// ── Helpers ──────────────────────────────────────────────────────────────────
 	function jobStatusColor(status: string) {
 		if (status === 'done') return 'text-green-400';
-		if (status === 'generating') return 'text-amber-400 animate-pulse';
+		if (status === 'generating') return 'text-(--color-brand) animate-pulse';
 		if (status === 'pending') return 'text-sky-400 animate-pulse';
-		if (status === 'failed') return 'text-red-400';
-		return 'text-zinc-300';
+		if (status === 'failed') return 'text-(--color-danger)';
+		return 'text-(--color-text)';
 	}
 
 	function fmtDate(s: string) {
@@ -94,36 +95,36 @@
 </script>
 
 <svelte:head>
-	<title>Audio — libnovel admin</title>
+	<title>{m.admin_audio_page_title()}</title>
 </svelte:head>
 
 <div class="space-y-6">
 	<!-- Header -->
 	<div>
-		<h1 class="text-2xl font-bold text-zinc-100">Audio</h1>
-		<p class="text-zinc-400 text-sm mt-1">
+		<h1 class="text-2xl font-bold text-(--color-text)">{m.admin_audio_heading()}</h1>
+		<p class="text-(--color-muted) text-sm mt-1">
 			{stats.total} job{stats.total !== 1 ? 's' : ''} &middot;
 			<span class="text-green-400">{stats.done} done</span>
 			{#if stats.failed > 0}
-				&middot; <span class="text-red-400">{stats.failed} failed</span>
+				&middot; <span class="text-(--color-danger)">{stats.failed} failed</span>
 			{/if}
 			{#if stats.inFlight > 0}
-				&middot; <span class="text-amber-400 animate-pulse">{stats.inFlight} in-flight</span>
+				&middot; <span class="text-(--color-brand) animate-pulse">{stats.inFlight} in-flight</span>
 			{/if}
 			&middot; {entries.length} cached file{entries.length !== 1 ? 's' : ''}
 		</p>
 	</div>
 
 	<!-- Tabs -->
-	<div class="flex gap-1 bg-zinc-800 rounded-lg p-1 w-fit border border-zinc-700">
+	<div class="flex gap-1 bg-(--color-surface-2) rounded-lg p-1 w-fit border border-(--color-border)">
 		<button
 			onclick={() => (activeTab = 'jobs')}
 			class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
-				{activeTab === 'jobs' ? 'bg-zinc-700 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'}"
+				{activeTab === 'jobs' ? 'bg-(--color-surface-3) text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text)'}"
 		>
 			Jobs
 			{#if stats.inFlight > 0}
-				<span class="ml-1.5 inline-flex items-center justify-center w-4 h-4 rounded-full bg-amber-400 text-zinc-900 text-[10px] font-bold">
+				<span class="ml-1.5 inline-flex items-center justify-center w-4 h-4 rounded-full bg-(--color-brand) text-(--color-surface) text-[10px] font-bold">
 					{stats.inFlight}
 				</span>
 			{/if}
@@ -131,7 +132,7 @@
 		<button
 			onclick={() => (activeTab = 'cache')}
 			class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
-				{activeTab === 'cache' ? 'bg-zinc-700 text-zinc-100' : 'text-zinc-400 hover:text-zinc-200'}"
+				{activeTab === 'cache' ? 'bg-(--color-surface-3) text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text)'}"
 		>
 			Cache
 		</button>
@@ -142,19 +143,19 @@
 		<input
 			type="search"
 			bind:value={jobsQ}
-			placeholder="Filter by slug, voice or status…"
-			class="w-full max-w-sm bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
+			placeholder={m.admin_audio_filter_jobs()}
+			class="w-full max-w-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
 		/>
 
 		{#if filteredJobs.length === 0}
-			<p class="text-zinc-500 text-sm py-8 text-center">
-				{jobsQ.trim() ? 'No matching jobs.' : 'No audio jobs yet.'}
+			<p class="text-(--color-muted) text-sm py-8 text-center">
+				{jobsQ.trim() ? m.admin_audio_no_matching_jobs() : m.admin_audio_no_jobs()}
 			</p>
 		{:else}
 			<!-- Desktop table -->
-			<div class="hidden sm:block overflow-x-auto rounded-xl border border-zinc-700">
+			<div class="hidden sm:block overflow-x-auto rounded-xl border border-(--color-border)">
 				<table class="w-full text-sm">
-					<thead class="bg-zinc-800 text-zinc-400 text-xs uppercase tracking-wide">
+					<thead class="bg-(--color-surface-2) text-(--color-muted) text-xs uppercase tracking-wide">
 						<tr>
 							<th class="px-4 py-3 text-left">Book</th>
 							<th class="px-4 py-3 text-right">Ch.</th>
@@ -164,23 +165,23 @@
 							<th class="px-4 py-3 text-left">Duration</th>
 						</tr>
 					</thead>
-					<tbody class="divide-y divide-zinc-700/50">
+					<tbody class="divide-y divide-(--color-border)/50">
 						{#each filteredJobs as job}
-							<tr class="bg-zinc-900 hover:bg-zinc-800/50 transition-colors">
-								<td class="px-4 py-3 text-zinc-200 font-medium">
-									<a href="/books/{job.slug}" class="hover:text-amber-400 transition-colors">{job.slug}</a>
+							<tr class="bg-(--color-surface) hover:bg-(--color-surface-2)/50 transition-colors">
+								<td class="px-4 py-3 text-(--color-text) font-medium">
+									<a href="/books/{job.slug}" class="hover:text-(--color-brand) transition-colors">{job.slug}</a>
 								</td>
-								<td class="px-4 py-3 text-right text-zinc-400">{job.chapter}</td>
-								<td class="px-4 py-3 text-zinc-400 font-mono text-xs">{job.voice}</td>
+								<td class="px-4 py-3 text-right text-(--color-muted)">{job.chapter}</td>
+								<td class="px-4 py-3 text-(--color-muted) font-mono text-xs">{job.voice}</td>
 								<td class="px-4 py-3">
 									<span class="font-medium {jobStatusColor(job.status)}">{job.status}</span>
 								</td>
-								<td class="px-4 py-3 text-zinc-400 whitespace-nowrap">{fmtDate(job.started)}</td>
-								<td class="px-4 py-3 text-zinc-400 whitespace-nowrap">{duration(job.started, job.finished)}</td>
+								<td class="px-4 py-3 text-(--color-muted) whitespace-nowrap">{fmtDate(job.started)}</td>
+								<td class="px-4 py-3 text-(--color-muted) whitespace-nowrap">{duration(job.started, job.finished)}</td>
 							</tr>
 							{#if job.error_message}
-								<tr class="bg-red-950/20">
-									<td colspan="6" class="px-4 py-2 text-xs text-red-400 font-mono">{job.error_message}</td>
+								<tr class="bg-(--color-danger)/10">
+									<td colspan="6" class="px-4 py-2 text-xs text-(--color-danger) font-mono">{job.error_message}</td>
 								</tr>
 							{/if}
 						{/each}
@@ -191,21 +192,21 @@
 			<!-- Mobile cards -->
 			<div class="sm:hidden space-y-3">
 				{#each filteredJobs as job}
-					<div class="bg-zinc-900 rounded-xl border border-zinc-700 p-4 space-y-2">
+					<div class="bg-(--color-surface) rounded-xl border border-(--color-border) p-4 space-y-2">
 						<div class="flex items-start justify-between gap-2">
-							<a href="/books/{job.slug}" class="text-zinc-200 font-medium hover:text-amber-400 transition-colors truncate">
+							<a href="/books/{job.slug}" class="text-(--color-text) font-medium hover:text-(--color-brand) transition-colors truncate">
 								{job.slug}
 							</a>
 							<span class="shrink-0 text-xs font-semibold {jobStatusColor(job.status)}">{job.status}</span>
 						</div>
 						<div class="grid grid-cols-2 gap-1 text-xs">
-							<span class="text-zinc-500">Chapter</span><span class="text-zinc-400 text-right">{job.chapter}</span>
-							<span class="text-zinc-500">Voice</span><span class="text-zinc-400 font-mono text-right truncate">{job.voice}</span>
-							<span class="text-zinc-500">Started</span><span class="text-zinc-400 text-right">{fmtDate(job.started)}</span>
-							<span class="text-zinc-500">Duration</span><span class="text-zinc-400 text-right">{duration(job.started, job.finished)}</span>
+							<span class="text-(--color-muted)">Chapter</span><span class="text-(--color-muted) text-right">{job.chapter}</span>
+							<span class="text-(--color-muted)">Voice</span><span class="text-(--color-muted) font-mono text-right truncate">{job.voice}</span>
+							<span class="text-(--color-muted)">Started</span><span class="text-(--color-muted) text-right">{fmtDate(job.started)}</span>
+							<span class="text-(--color-muted)">Duration</span><span class="text-(--color-muted) text-right">{duration(job.started, job.finished)}</span>
 						</div>
 						{#if job.error_message}
-							<p class="text-xs text-red-400 font-mono break-all">{job.error_message}</p>
+							<p class="text-xs text-(--color-danger) font-mono break-all">{job.error_message}</p>
 						{/if}
 					</div>
 				{/each}
@@ -218,19 +219,19 @@
 		<input
 			type="search"
 			bind:value={cacheQ}
-			placeholder="Filter by slug, chapter or voice…"
-			class="w-full max-w-sm bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
+			placeholder={m.admin_audio_filter_cache()}
+			class="w-full max-w-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
 		/>
 
 		{#if filteredCache.length === 0}
-			<p class="text-zinc-500 text-sm py-8 text-center">
-				{cacheQ.trim() ? 'No results.' : 'Audio cache is empty.'}
+			<p class="text-(--color-muted) text-sm py-8 text-center">
+				{cacheQ.trim() ? m.admin_audio_no_cache_results() : m.admin_audio_cache_empty()}
 			</p>
 		{:else}
 			<!-- Desktop table -->
-			<div class="hidden sm:block overflow-x-auto rounded-xl border border-zinc-700">
+			<div class="hidden sm:block overflow-x-auto rounded-xl border border-(--color-border)">
 				<table class="w-full text-sm">
-					<thead class="bg-zinc-800 text-zinc-400 text-xs uppercase tracking-wide">
+					<thead class="bg-(--color-surface-2) text-(--color-muted) text-xs uppercase tracking-wide">
 						<tr>
 							<th class="px-4 py-3 text-left">Book</th>
 							<th class="px-4 py-3 text-left">Chapter</th>
@@ -239,19 +240,19 @@
 							<th class="px-4 py-3 text-left">Updated</th>
 						</tr>
 					</thead>
-					<tbody class="divide-y divide-zinc-700/50">
+					<tbody class="divide-y divide-(--color-border)/50">
 						{#each filteredCache as entry}
 							{@const parts = parseCacheKey(entry.cache_key)}
-							<tr class="bg-zinc-900 hover:bg-zinc-800/50 transition-colors">
-								<td class="px-4 py-3 text-zinc-200 font-medium">
-									<a href="/books/{parts.slug}" class="hover:text-amber-400 transition-colors">{parts.slug}</a>
+							<tr class="bg-(--color-surface) hover:bg-(--color-surface-2)/50 transition-colors">
+								<td class="px-4 py-3 text-(--color-text) font-medium">
+									<a href="/books/{parts.slug}" class="hover:text-(--color-brand) transition-colors">{parts.slug}</a>
 								</td>
-								<td class="px-4 py-3 text-zinc-400">{parts.chapter}</td>
-								<td class="px-4 py-3 text-zinc-400 font-mono text-xs">{parts.voice}</td>
-								<td class="px-4 py-3 text-zinc-500 font-mono text-xs truncate max-w-[14rem]" title={entry.filename}>
+								<td class="px-4 py-3 text-(--color-muted)">{parts.chapter}</td>
+								<td class="px-4 py-3 text-(--color-muted) font-mono text-xs">{parts.voice}</td>
+								<td class="px-4 py-3 text-(--color-muted) font-mono text-xs truncate max-w-[14rem]" title={entry.filename}>
 									{entry.filename}
 								</td>
-								<td class="px-4 py-3 text-zinc-400 whitespace-nowrap">{fmtDate(entry.updated)}</td>
+								<td class="px-4 py-3 text-(--color-muted) whitespace-nowrap">{fmtDate(entry.updated)}</td>
 							</tr>
 						{/each}
 					</tbody>
@@ -262,17 +263,17 @@
 			<div class="sm:hidden space-y-3">
 				{#each filteredCache as entry}
 					{@const parts = parseCacheKey(entry.cache_key)}
-					<div class="bg-zinc-900 rounded-xl border border-zinc-700 p-4 space-y-2">
-						<a href="/books/{parts.slug}" class="text-zinc-200 font-medium hover:text-amber-400 transition-colors block truncate">
+					<div class="bg-(--color-surface) rounded-xl border border-(--color-border) p-4 space-y-2">
+						<a href="/books/{parts.slug}" class="text-(--color-text) font-medium hover:text-(--color-brand) transition-colors block truncate">
 							{parts.slug}
 						</a>
 						<div class="grid grid-cols-2 gap-1 text-xs">
-							<span class="text-zinc-500">Chapter</span><span class="text-zinc-400 text-right">{parts.chapter}</span>
-							<span class="text-zinc-500">Voice</span><span class="text-zinc-400 font-mono text-right truncate">{parts.voice}</span>
-							<span class="text-zinc-500">Updated</span><span class="text-zinc-400 text-right">{fmtDate(entry.updated)}</span>
+							<span class="text-(--color-muted)">Chapter</span><span class="text-(--color-muted) text-right">{parts.chapter}</span>
+							<span class="text-(--color-muted)">Voice</span><span class="text-(--color-muted) font-mono text-right truncate">{parts.voice}</span>
+							<span class="text-(--color-muted)">Updated</span><span class="text-(--color-muted) text-right">{fmtDate(entry.updated)}</span>
 						</div>
 						{#if entry.filename}
-							<p class="text-xs text-zinc-500 font-mono truncate" title={entry.filename}>{entry.filename}</p>
+							<p class="text-xs text-(--color-muted) font-mono truncate" title={entry.filename}>{entry.filename}</p>
 						{/if}
 					</div>
 				{/each}

ui/src/routes/admin/changelog/+page.server.ts

@@ -0,0 +1,26 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import type { PageServerLoad } from './$types';
+
+export interface Release {
+	id: number;
+	tag_name: string;
+	name: string;
+	body: string;
+	published_at: string;
+	prerelease: boolean;
+	draft: boolean;
+}
+
+export const load: PageServerLoad = async () => {
+	try {
+		// releases.json is baked into the image at build time by CI.
+		// SvelteKit Node adapter copies static/ → build/client/, so the file
+		// lives at <cwd>/build/client/releases.json in production.
+		const raw = readFileSync(join(process.cwd(), 'build', 'client', 'releases.json'), 'utf-8');
+		const releases: Release[] = JSON.parse(raw);
+		return { releases: releases.filter((r) => !r.draft) };
+	} catch (e) {
+		return { releases: [], error: String(e) };
+	}
+};

ui/src/routes/admin/changelog/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import * as m from '$lib/paraglide/messages.js';
+
+	let { data }: { data: PageData } = $props();
+
+	function fmtDate(s: string) {
+		return new Date(s).toLocaleDateString(undefined, {
+			year: 'numeric', month: 'short', day: 'numeric'
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>{m.admin_changelog_page_title()}</title>
+</svelte:head>
+
+<div class="space-y-6 max-w-2xl">
+	<div class="flex items-center gap-3">
+		<h1 class="text-xl font-semibold text-(--color-text) flex-1">{m.admin_changelog_heading()}</h1>
+		<a
+			href="https://gitea.kalekber.cc/kamil/libnovel/releases"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="text-xs text-(--color-muted) hover:text-(--color-text) transition-colors flex items-center gap-1"
+		>
+			{m.admin_changelog_gitea()}
+			<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+			</svg>
+		</a>
+	</div>
+
+	{#if data.error}
+		<p class="text-sm text-(--color-danger)">{m.admin_changelog_load_error({ error: data.error })}</p>
+	{:else if data.releases.length === 0}
+		<p class="text-sm text-(--color-muted) py-8 text-center">{m.admin_changelog_no_releases()}</p>
+	{:else}
+		<div class="space-y-0 divide-y divide-(--color-border) border border-(--color-border) rounded-xl overflow-hidden">
+			{#each data.releases as release}
+				<div class="px-5 py-4 bg-(--color-surface) space-y-2">
+					<div class="flex items-baseline gap-3 flex-wrap">
+						<span class="font-mono text-sm font-semibold text-(--color-brand)">{release.tag_name}</span>
+						{#if release.name && release.name !== release.tag_name}
+							<span class="text-sm text-(--color-text)">{release.name}</span>
+						{/if}
+						{#if release.prerelease}
+							<span class="text-xs px-1.5 py-0.5 rounded bg-(--color-surface-3) text-(--color-muted)">pre-release</span>
+						{/if}
+						<span class="text-xs text-(--color-muted) ml-auto">{fmtDate(release.published_at)}</span>
+					</div>
+					{#if release.body.trim()}
+						<p class="text-sm text-(--color-muted) leading-relaxed whitespace-pre-wrap">{release.body.trim()}</p>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

ui/src/routes/admin/scrape/+page.svelte

@@ -3,6 +3,7 @@
 	import { invalidateAll } from '$app/navigation';
 	import type { PageData } from './$types';
 	import type { ScrapingTask } from '$lib/server/pocketbase';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
@@ -193,10 +194,10 @@
 	// ── Helpers ─────────────────────────────────────────────────────────────────
 	function statusColor(status: string) {
 		if (status === 'done') return 'text-green-400';
-		if (status === 'running') return 'text-amber-400 animate-pulse';
-		if (status === 'failed') return 'text-red-400';
-		if (status === 'cancelled') return 'text-zinc-400';
-		return 'text-zinc-300';
+		if (status === 'running') return 'text-(--color-brand) animate-pulse';
+		if (status === 'failed') return 'text-(--color-danger)';
+		if (status === 'cancelled') return 'text-(--color-muted)';
+		return 'text-(--color-text)';
 	}
 
 	function fmtDate(s: string) {
@@ -228,151 +229,130 @@
 </script>
 
 <svelte:head>
-	<title>Scrape tasks — libnovel admin</title>
+	<title>{m.admin_scrape_page_title()}</title>
 </svelte:head>
 
-<div class="space-y-8">
+<div class="space-y-6">
 	<!-- Header -->
-	<div class="flex items-center justify-between flex-wrap gap-3">
-		<div>
-			<h1 class="text-2xl font-bold text-zinc-100">Scrape tasks</h1>
-			<p class="text-zinc-400 text-sm mt-1">
-				Job status:
-				{#if running}
-					<span class="text-amber-400 font-medium animate-pulse">Running</span>
-				{:else}
-					<span class="text-green-400 font-medium">Idle</span>
-				{/if}
-			</p>
-		</div>
+	<div class="flex items-center gap-3 flex-wrap">
+		<h1 class="text-xl font-semibold text-(--color-text) flex-1">{m.admin_scrape_heading()}</h1>
+		<span class="text-xs {running ? 'text-(--color-brand) animate-pulse' : 'text-green-500'}">
+			● {running ? m.admin_scrape_status_running() : m.admin_scrape_status_idle()}
+		</span>
 	</div>
 
-	<!-- Scrape controls -->
-	<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+	<!-- Compact controls -->
+	<div class="divide-y divide-(--color-border) border border-(--color-border) rounded-xl overflow-hidden">
 		<!-- Full catalogue -->
-		<div class="bg-zinc-800 rounded-xl border border-zinc-700 p-5 space-y-3">
-			<div>
-				<h2 class="text-sm font-semibold text-zinc-300">Scrape full catalogue</h2>
-				<p class="text-xs text-zinc-500 mt-1">Re-crawls all novelfire.net pages and picks up new books.</p>
-			</div>
+		<div class="flex items-center gap-4 px-4 py-3 bg-(--color-surface)">
+			<span class="text-sm text-(--color-muted) w-36 shrink-0">{m.admin_scrape_full_catalogue()}</span>
 			<button
 				onclick={triggerCatalogueScrape}
 				disabled={running || cataloguing}
-				class="w-full px-4 py-2 rounded-lg bg-amber-600 text-zinc-900 font-semibold text-sm hover:bg-amber-500 transition-colors disabled:opacity-50"
+				class="px-3 py-1.5 rounded-md bg-(--color-brand) text-(--color-surface) font-semibold text-xs hover:bg-(--color-brand-dim) transition-colors disabled:opacity-50"
 			>
-				{cataloguing ? 'Queuing…' : running ? 'Already running…' : 'Start catalogue scrape'}
+				{cataloguing ? m.admin_scrape_queuing() : running ? m.admin_scrape_running() : m.admin_scrape_start()}
 			</button>
-			{#if catalogueError}
-				<p class="text-sm text-red-400">{catalogueError}</p>
-			{/if}
+			{#if catalogueError}<span class="text-xs text-(--color-danger)">{catalogueError}</span>{/if}
 		</div>
 
 		<!-- Single book -->
-		<div id="book-form" class="bg-zinc-800 rounded-xl border border-zinc-700 p-5 space-y-3">
-			<h2 class="text-sm font-semibold text-zinc-300">Scrape a single book</h2>
-			<div class="flex gap-2">
-				<input
-					type="url"
-					bind:value={scrapeUrl}
-					placeholder="https://novelfire.net/book/…"
-					class="flex-1 min-w-0 bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
-				/>
-				<button
-					onclick={() => triggerBookScrape(scrapeUrl)}
-					disabled={!scrapeUrl.trim() || running || scraping}
-					class="shrink-0 px-4 py-2 rounded-lg bg-zinc-600 text-zinc-100 font-semibold text-sm hover:bg-zinc-500 transition-colors disabled:opacity-50"
-				>
-					{scraping ? 'Queuing…' : 'Scrape'}
-				</button>
-			</div>
-			{#if scrapeError}
-				<p class="text-sm text-red-400">{scrapeError}</p>
-			{/if}
+		<div id="book-form" class="flex items-center gap-3 px-4 py-3 bg-(--color-surface)">
+			<span class="text-sm text-(--color-muted) w-36 shrink-0">{m.admin_scrape_single_book()}</span>
+			<input
+				type="url"
+				bind:value={scrapeUrl}
+				placeholder="https://novelfire.net/book/…"
+				class="flex-1 min-w-0 bg-(--color-surface-2) border border-(--color-border) rounded-md px-3 py-1.5 text-(--color-text) text-sm placeholder-zinc-600 focus:outline-none focus:ring-1 focus:ring-(--color-brand)"
+			/>
+			<button
+				onclick={() => triggerBookScrape(scrapeUrl)}
+				disabled={!scrapeUrl.trim() || running || scraping}
+				class="shrink-0 px-3 py-1.5 rounded-md bg-(--color-surface-3) text-(--color-text) font-medium text-xs hover:bg-zinc-600 transition-colors disabled:opacity-50"
+			>
+				{scraping ? m.admin_scrape_queuing() : m.admin_scrape_submit()}
+			</button>
+			{#if scrapeError}<span class="text-xs text-(--color-danger)">{scrapeError}</span>{/if}
 		</div>
 
 		<!-- Range scrape -->
-		<div id="range-form" class="bg-zinc-800 rounded-xl border border-zinc-700 p-5 space-y-3">
-			<h2 class="text-sm font-semibold text-zinc-300">Scrape chapter range</h2>
+		<div id="range-form" class="flex items-center gap-3 px-4 py-3 bg-(--color-surface) flex-wrap">
+			<span class="text-sm text-(--color-muted) w-36 shrink-0">{m.admin_scrape_range()}</span>
 			<input
 				type="url"
 				bind:value={rangeUrl}
 				placeholder="https://novelfire.net/book/…"
-				class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
+				class="flex-1 min-w-0 bg-(--color-surface-2) border border-(--color-border) rounded-md px-3 py-1.5 text-(--color-text) text-sm placeholder-zinc-600 focus:outline-none focus:ring-1 focus:ring-(--color-brand)"
 			/>
-			<div class="flex gap-2">
-				<input
-					type="number"
-					bind:value={rangeFrom}
-					min="1"
-					placeholder="From ch."
-					class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
-				/>
-				<input
-					type="number"
-					bind:value={rangeTo}
-					min="1"
-					placeholder="To ch. (opt)"
-					class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
-				/>
-				<button
-					onclick={triggerRangeScrape}
-					disabled={!rangeUrl.trim() || rangeFrom === null || running || ranging}
-					class="shrink-0 px-4 py-2 rounded-lg bg-zinc-600 text-zinc-100 font-semibold text-sm hover:bg-zinc-500 transition-colors disabled:opacity-50"
-				>
-					{ranging ? 'Queuing…' : 'Go'}
-				</button>
-			</div>
-			{#if rangeError}
-				<p class="text-sm text-red-400">{rangeError}</p>
-			{/if}
-		</div>
-	</div>
-
-	<!-- Quick-scrape genre links -->
-	<div class="bg-zinc-800 rounded-xl border border-zinc-700 p-5 space-y-3">
-		<h2 class="text-sm font-semibold text-zinc-300">Quick genre refresh</h2>
-		<p class="text-xs text-zinc-500">Paste one of these into the single-book scraper to re-index a genre, or use them as starting points for range scrapes.</p>
-		<div class="flex flex-wrap gap-2">
-			{#each quickScrapes as qs}
-				<button
-					onclick={() => { scrapeUrl = qs.url; }}
-					class="px-3 py-1.5 rounded-lg text-xs font-medium bg-zinc-700 text-zinc-300 border border-zinc-600 hover:border-amber-400/60 hover:text-amber-300 transition-colors"
-				>
-					{qs.label}
-				</button>
-			{/each}
-			<a
-				href="https://novelfire.net"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="px-3 py-1.5 rounded-lg text-xs font-medium bg-zinc-700/50 text-zinc-400 border border-zinc-600/50 hover:text-amber-300 hover:border-amber-400/40 transition-colors"
+			<input
+				type="number"
+				bind:value={rangeFrom}
+				min="1"
+				placeholder="From"
+				class="w-20 bg-(--color-surface-2) border border-(--color-border) rounded-md px-3 py-1.5 text-(--color-text) text-sm placeholder-zinc-600 focus:outline-none focus:ring-1 focus:ring-(--color-brand)"
+			/>
+			<input
+				type="number"
+				bind:value={rangeTo}
+				min="1"
+				placeholder="To"
+				class="w-20 bg-(--color-surface-2) border border-(--color-border) rounded-md px-3 py-1.5 text-(--color-text) text-sm placeholder-zinc-600 focus:outline-none focus:ring-1 focus:ring-(--color-brand)"
+			/>
+			<button
+				onclick={triggerRangeScrape}
+				disabled={!rangeUrl.trim() || rangeFrom === null || running || ranging}
+				class="shrink-0 px-3 py-1.5 rounded-md bg-(--color-surface-3) text-(--color-text) font-medium text-xs hover:bg-zinc-600 transition-colors disabled:opacity-50"
 			>
-				Browse novelfire.net ↗
-			</a>
+				{ranging ? m.admin_scrape_queuing() : 'Go'}
+			</button>
+			{#if rangeError}<span class="text-xs text-(--color-danger) w-full pl-40">{rangeError}</span>{/if}
+		</div>
+
+		<!-- Quick genre chips -->
+		<div class="flex items-center gap-3 px-4 py-3 bg-(--color-surface) flex-wrap">
+			<span class="text-sm text-(--color-muted) w-36 shrink-0">{m.admin_scrape_quick_genres()}</span>
+			<div class="flex flex-wrap gap-1.5">
+				{#each quickScrapes as qs}
+					<button
+						onclick={() => { scrapeUrl = qs.url; }}
+						class="px-2.5 py-1 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted) border border-(--color-border) hover:border-(--color-brand)/50 hover:text-(--color-brand-dim) transition-colors"
+					>
+						{qs.label}
+					</button>
+				{/each}
+				<a
+					href="https://novelfire.net"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="px-2.5 py-1 rounded text-xs font-medium text-(--color-muted) border border-(--color-border)/50 hover:text-(--color-brand-dim) hover:border-(--color-brand)/40 transition-colors"
+				>
+					novelfire.net ↗
+				</a>
+			</div>
 		</div>
 	</div>
 
 	<!-- Tasks table -->
 	<div class="space-y-3">
 		<div class="flex items-center gap-3 flex-wrap">
-			<h2 class="text-lg font-semibold text-zinc-100 flex-1">Task history</h2>
+			<h2 class="text-sm font-semibold text-(--color-muted) flex-1 uppercase tracking-widest">{m.admin_scrape_task_history()}</h2>
 			<input
 				type="search"
 				bind:value={q}
-				placeholder="Filter by kind, status or URL…"
-				class="w-full max-w-xs bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
+				placeholder={m.admin_scrape_filter_placeholder()}
+				class="w-full max-w-xs bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
 			/>
 		</div>
 
 		{#if filtered.length === 0}
-			<p class="text-zinc-500 text-sm py-8 text-center">
-				{q.trim() ? 'No matching tasks.' : 'No scrape tasks yet.'}
+			<p class="text-(--color-muted) text-sm py-8 text-center">
+				{q.trim() ? m.admin_scrape_no_matching() : m.admin_tasks_empty()}
 			</p>
 		{:else}
 			<!-- Desktop table -->
-			<div class="hidden sm:block overflow-x-auto rounded-xl border border-zinc-700">
+			<div class="hidden sm:block overflow-x-auto rounded-xl border border-(--color-border)">
 				<table class="w-full text-sm">
-					<thead class="bg-zinc-800 text-zinc-400 text-xs uppercase tracking-wide">
+					<thead class="bg-(--color-surface-2) text-(--color-muted) text-xs uppercase tracking-wide">
 						<tr>
 							<th class="px-4 py-3 text-left">Kind / URL</th>
 							<th class="px-4 py-3 text-left">Status</th>
@@ -385,14 +365,14 @@
 							<th class="px-4 py-3 text-left">Actions</th>
 						</tr>
 					</thead>
-					<tbody class="divide-y divide-zinc-700/50">
+					<tbody class="divide-y divide-(--color-border)/50">
 						{#each filtered as task}
-							<tr class="bg-zinc-900 hover:bg-zinc-800/50 transition-colors">
-								<td class="px-4 py-3 font-mono text-xs text-zinc-300">
+							<tr class="bg-(--color-surface) hover:bg-(--color-surface-2)/50 transition-colors">
+								<td class="px-4 py-3 font-mono text-xs text-(--color-text)">
 									{task.kind}
 									{#if task.target_url}
 										<br />
-										<span class="text-zinc-500 truncate max-w-[16rem] block" title={task.target_url}>
+										<span class="text-(--color-muted) truncate max-w-[16rem] block" title={task.target_url}>
 											{task.target_url.replace('https://novelfire.net/book/', '')}
 										</span>
 									{/if}
@@ -400,21 +380,21 @@
 								<td class="px-4 py-3">
 									<span class="font-medium {statusColor(task.status)}">{task.status}</span>
 								</td>
-								<td class="px-4 py-3 text-right text-zinc-300">{task.books_found ?? 0}</td>
-								<td class="px-4 py-3 text-right text-zinc-300">{task.chapters_scraped ?? 0}</td>
-								<td class="px-4 py-3 text-right text-zinc-400">{task.chapters_skipped ?? 0}</td>
-								<td class="px-4 py-3 text-right {task.errors > 0 ? 'text-red-400' : 'text-zinc-400'}">{task.errors ?? 0}</td>
-								<td class="px-4 py-3 text-zinc-400 whitespace-nowrap">{fmtDate(task.started)}</td>
-								<td class="px-4 py-3 text-zinc-400 whitespace-nowrap">{duration(task.started, task.finished)}</td>
+								<td class="px-4 py-3 text-right text-(--color-text)">{task.books_found ?? 0}</td>
+								<td class="px-4 py-3 text-right text-(--color-text)">{task.chapters_scraped ?? 0}</td>
+								<td class="px-4 py-3 text-right text-(--color-muted)">{task.chapters_skipped ?? 0}</td>
+								<td class="px-4 py-3 text-right {task.errors > 0 ? 'text-(--color-danger)' : 'text-(--color-muted)'}">{task.errors ?? 0}</td>
+								<td class="px-4 py-3 text-(--color-muted) whitespace-nowrap">{fmtDate(task.started)}</td>
+								<td class="px-4 py-3 text-(--color-muted) whitespace-nowrap">{duration(task.started, task.finished)}</td>
 							<td class="px-4 py-3">
 								<div class="flex flex-wrap gap-1.5">
 									{#if task.status === 'pending'}
 										<button
 											onclick={() => cancelTask(task.id)}
 											disabled={cancellingIds.has(task.id)}
-											class="px-2 py-1 rounded text-xs font-medium bg-zinc-700 text-zinc-300 hover:bg-red-900 hover:text-red-300 transition-colors disabled:opacity-50"
+											class="px-2 py-1 rounded text-xs font-medium bg-(--color-surface-3) text-(--color-text) hover:bg-red-900 hover:text-red-300 transition-colors disabled:opacity-50"
 										>
-											{cancellingIds.has(task.id) ? 'Cancelling…' : 'Cancel'}
+											{cancellingIds.has(task.id) ? 'Cancelling…' : m.admin_scrape_cancel()}
 										</button>
 									{/if}
 									{#if task.kind === 'book_range' && task.status !== 'pending' && task.status !== 'running' && (task.chapters_scraped ?? 0) > 0}
@@ -434,14 +414,14 @@
 										</button>
 									{/if}
 									{#if cancelErrors[task.id]}
-										<p class="text-xs text-red-400 mt-1 w-full">{cancelErrors[task.id]}</p>
+										<p class="text-xs text-(--color-danger) mt-1 w-full">{cancelErrors[task.id]}</p>
 									{/if}
 								</div>
 							</td>
 							</tr>
 							{#if task.error_message}
-								<tr class="bg-red-950/20">
-									<td colspan="9" class="px-4 py-2 text-xs text-red-400 font-mono">{task.error_message}</td>
+								<tr class="bg-(--color-danger)/10">
+									<td colspan="9" class="px-4 py-2 text-xs text-(--color-danger) font-mono">{task.error_message}</td>
 								</tr>
 							{/if}
 						{/each}
@@ -452,12 +432,12 @@
 			<!-- Mobile cards -->
 			<div class="sm:hidden space-y-3">
 				{#each filtered as task}
-					<div class="bg-zinc-900 rounded-xl border border-zinc-700 p-4 space-y-2">
+					<div class="bg-(--color-surface) rounded-xl border border-(--color-border) p-4 space-y-2">
 						<div class="flex items-start justify-between gap-2">
 							<div class="min-w-0">
-								<span class="font-mono text-xs text-zinc-300">{task.kind}</span>
+								<span class="font-mono text-xs text-(--color-text)">{task.kind}</span>
 								{#if task.target_url}
-									<p class="text-xs text-zinc-500 truncate mt-0.5" title={task.target_url}>
+									<p class="text-xs text-(--color-muted) truncate mt-0.5" title={task.target_url}>
 										{task.target_url.replace('https://novelfire.net/book/', '')}
 									</p>
 								{/if}
@@ -465,24 +445,24 @@
 							<span class="shrink-0 text-xs font-semibold {statusColor(task.status)}">{task.status}</span>
 						</div>
 						<div class="grid grid-cols-2 gap-1 text-xs">
-							<span class="text-zinc-500">Books</span><span class="text-zinc-300 text-right">{task.books_found ?? 0}</span>
-							<span class="text-zinc-500">Chapters</span><span class="text-zinc-300 text-right">{task.chapters_scraped ?? 0}</span>
-							<span class="text-zinc-500">Skipped</span><span class="text-zinc-400 text-right">{task.chapters_skipped ?? 0}</span>
-							<span class="text-zinc-500">Errors</span><span class="{task.errors > 0 ? 'text-red-400' : 'text-zinc-400'} text-right">{task.errors ?? 0}</span>
-							<span class="text-zinc-500">Started</span><span class="text-zinc-400 text-right">{fmtDate(task.started)}</span>
-							<span class="text-zinc-500">Duration</span><span class="text-zinc-400 text-right">{duration(task.started, task.finished)}</span>
+							<span class="text-(--color-muted)">Books</span><span class="text-(--color-text) text-right">{task.books_found ?? 0}</span>
+							<span class="text-(--color-muted)">Chapters</span><span class="text-(--color-text) text-right">{task.chapters_scraped ?? 0}</span>
+							<span class="text-(--color-muted)">Skipped</span><span class="text-(--color-muted) text-right">{task.chapters_skipped ?? 0}</span>
+							<span class="text-(--color-muted)">Errors</span><span class="{task.errors > 0 ? 'text-(--color-danger)' : 'text-(--color-muted)'} text-right">{task.errors ?? 0}</span>
+							<span class="text-(--color-muted)">Started</span><span class="text-(--color-muted) text-right">{fmtDate(task.started)}</span>
+							<span class="text-(--color-muted)">Duration</span><span class="text-(--color-muted) text-right">{duration(task.started, task.finished)}</span>
 						</div>
 					{#if task.error_message}
-						<p class="text-xs text-red-400 font-mono break-all">{task.error_message}</p>
+						<p class="text-xs text-(--color-danger) font-mono break-all">{task.error_message}</p>
 					{/if}
 					<div class="flex flex-wrap gap-2">
 						{#if task.status === 'pending'}
 							<button
 								onclick={() => cancelTask(task.id)}
 								disabled={cancellingIds.has(task.id)}
-								class="flex-1 px-3 py-1.5 rounded-lg text-xs font-medium bg-zinc-700 text-zinc-300 hover:bg-red-900 hover:text-red-300 transition-colors disabled:opacity-50"
+								class="flex-1 px-3 py-1.5 rounded-lg text-xs font-medium bg-(--color-surface-3) text-(--color-text) hover:bg-red-900 hover:text-red-300 transition-colors disabled:opacity-50"
 							>
-								{cancellingIds.has(task.id) ? 'Cancelling…' : 'Cancel task'}
+								{cancellingIds.has(task.id) ? 'Cancelling…' : m.admin_scrape_cancel()} task
 							</button>
 						{/if}
 						{#if task.kind === 'book_range' && task.status !== 'pending' && task.status !== 'running' && (task.chapters_scraped ?? 0) > 0}
@@ -502,7 +482,7 @@
 							</button>
 						{/if}
 						{#if cancelErrors[task.id]}
-							<p class="text-xs text-red-400 w-full">{cancelErrors[task.id]}</p>
+							<p class="text-xs text-(--color-danger) w-full">{cancelErrors[task.id]}</p>
 						{/if}
 					</div>
 					</div>

ui/src/routes/admin/translation/+page.server.ts

@@ -0,0 +1,63 @@
+import { redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { listBooks, listTranslationJobs, type TranslationJob } from '$lib/server/pocketbase';
+import { backendFetch } from '$lib/server/scraper';
+import { log } from '$lib/server/logger';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (locals.user?.role !== 'admin') {
+		redirect(302, '/');
+	}
+
+	const [books, jobs] = await Promise.all([
+		listBooks().catch((e): Awaited<ReturnType<typeof listBooks>> => {
+			log.warn('admin/translation', 'failed to load books', { err: String(e) });
+			return [];
+		}),
+		listTranslationJobs().catch((e): TranslationJob[] => {
+			log.warn('admin/translation', 'failed to load translation jobs', { err: String(e) });
+			return [];
+		})
+	]);
+
+	return { books, jobs };
+};
+
+export const actions: Actions = {
+	bulk: async ({ request, locals }) => {
+		if (locals.user?.role !== 'admin') {
+			return { success: false, error: 'Unauthorized' };
+		}
+
+		const form = await request.formData();
+		const slug = form.get('slug')?.toString().trim() ?? '';
+		const lang = form.get('lang')?.toString().trim() ?? '';
+		const from = parseInt(form.get('from')?.toString() ?? '1', 10);
+		const to = parseInt(form.get('to')?.toString() ?? '1', 10);
+
+		if (!slug || !lang) {
+			return { success: false, error: 'slug and lang are required' };
+		}
+		if (isNaN(from) || isNaN(to) || from < 1 || to < from) {
+			return { success: false, error: 'Invalid chapter range' };
+		}
+
+		try {
+			const res = await backendFetch('/api/admin/translation/bulk', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ slug, lang, from, to })
+			});
+			if (!res.ok) {
+				const body = await res.text().catch(() => '');
+				log.error('admin/translation', 'bulk enqueue failed', { status: res.status, body });
+				return { success: false, error: `Backend error ${res.status}: ${body}` };
+			}
+			const data = await res.json();
+			return { success: true, enqueued: data.enqueued as number };
+		} catch (e) {
+			log.error('admin/translation', 'bulk enqueue fetch error', { err: String(e) });
+			return { success: false, error: String(e) };
+		}
+	}
+};

ui/src/routes/admin/translation/+page.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { invalidateAll } from '$app/navigation';
+	import { enhance } from '$app/forms';
+	import type { PageData, ActionData } from './$types';
+	import type { TranslationJob } from '$lib/server/pocketbase';
+
+	let { data, form }: { data: PageData; form: ActionData } = $props();
+
+	let jobs = $state<TranslationJob[]>(untrack(() => data.jobs));
+
+	// Keep in sync on server reloads
+	$effect(() => {
+		jobs = data.jobs;
+	});
+
+	// ── Live-poll while any job is in-flight ─────────────────────────────────────
+	let hasInFlight = $derived(jobs.some((j) => j.status === 'pending' || j.status === 'running'));
+
+	$effect(() => {
+		if (!hasInFlight) return;
+		const id = setInterval(() => {
+			invalidateAll();
+		}, 3000);
+		return () => clearInterval(id);
+	});
+
+	// ── Tabs ─────────────────────────────────────────────────────────────────────
+	type Tab = 'enqueue' | 'jobs';
+	let activeTab = $state<Tab>('enqueue');
+
+	// ── Bulk enqueue form ─────────────────────────────────────────────────────────
+	let slugInput = $state('');
+	let langInput = $state('ru');
+	let fromInput = $state(1);
+	let toInput = $state(1);
+	let submitting = $state(false);
+
+	const langs = [
+		{ value: 'ru', label: 'Russian (ru)' },
+		{ value: 'id', label: 'Indonesian (id)' },
+		{ value: 'pt', label: 'Portuguese (pt)' },
+		{ value: 'fr', label: 'French (fr)' }
+	];
+
+	// ── Jobs helpers ──────────────────────────────────────────────────────────────
+	function jobStatusColor(status: string) {
+		if (status === 'done') return 'text-green-400';
+		if (status === 'running') return 'text-(--color-brand) animate-pulse';
+		if (status === 'pending') return 'text-sky-400 animate-pulse';
+		if (status === 'failed') return 'text-(--color-danger)';
+		return 'text-(--color-text)';
+	}
+
+	function fmtDate(s: string) {
+		if (!s || s.startsWith('0001')) return '—';
+		return new Date(s).toLocaleString(undefined, {
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	function duration(started: string, finished: string) {
+		if (!started || !finished || started.startsWith('0001') || finished.startsWith('0001'))
+			return '—';
+		const ms = new Date(finished).getTime() - new Date(started).getTime();
+		if (ms < 0) return '—';
+		const s = Math.floor(ms / 1000);
+		if (s < 60) return `${s}s`;
+		const m = Math.floor(s / 60);
+		return `${m}m ${s % 60}s`;
+	}
+
+	let jobsQ = $state('');
+	let filteredJobs = $derived(
+		jobsQ.trim()
+			? jobs.filter(
+					(j) =>
+						j.slug.toLowerCase().includes(jobsQ.toLowerCase().trim()) ||
+						j.lang.toLowerCase().includes(jobsQ.toLowerCase().trim()) ||
+						j.status.toLowerCase().includes(jobsQ.toLowerCase().trim())
+				)
+			: jobs
+	);
+
+	let stats = $derived({
+		total: jobs.length,
+		done: jobs.filter((j) => j.status === 'done').length,
+		failed: jobs.filter((j) => j.status === 'failed').length,
+		inFlight: jobs.filter((j) => j.status === 'pending' || j.status === 'running').length
+	});
+</script>
+
+<svelte:head>
+	<title>Translation — Admin</title>
+</svelte:head>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div>
+		<h1 class="text-2xl font-bold text-(--color-text)">Machine Translation</h1>
+		<p class="text-(--color-muted) text-sm mt-1">
+			{stats.total} job{stats.total !== 1 ? 's' : ''} &middot;
+			<span class="text-green-400">{stats.done} done</span>
+			{#if stats.failed > 0}
+				&middot; <span class="text-(--color-danger)">{stats.failed} failed</span>
+			{/if}
+			{#if stats.inFlight > 0}
+				&middot; <span class="text-(--color-brand) animate-pulse">{stats.inFlight} in-flight</span>
+			{/if}
+		</p>
+	</div>
+
+	<!-- Tabs -->
+	<div class="flex gap-1 bg-(--color-surface-2) rounded-lg p-1 w-fit border border-(--color-border)">
+		<button
+			onclick={() => (activeTab = 'enqueue')}
+			class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
+				{activeTab === 'enqueue' ? 'bg-(--color-surface-3) text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text)'}"
+		>
+			Enqueue
+		</button>
+		<button
+			onclick={() => (activeTab = 'jobs')}
+			class="px-4 py-1.5 rounded-md text-sm font-medium transition-colors
+				{activeTab === 'jobs' ? 'bg-(--color-surface-3) text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text)'}"
+		>
+			Jobs
+			{#if stats.inFlight > 0}
+				<span
+					class="ml-1.5 inline-flex items-center justify-center w-4 h-4 rounded-full bg-(--color-brand) text-(--color-surface) text-[10px] font-bold"
+				>
+					{stats.inFlight}
+				</span>
+			{/if}
+		</button>
+	</div>
+
+	<!-- ── Enqueue tab ─────────────────────────────────────────────────────────── -->
+	{#if activeTab === 'enqueue'}
+		<div class="max-w-lg space-y-5">
+			<!-- Result banner -->
+			{#if form?.success}
+				<div class="rounded-lg border border-green-500/40 bg-green-500/10 px-4 py-3 text-sm text-green-400">
+					Enqueued {form.enqueued} translation job{form.enqueued !== 1 ? 's' : ''} successfully.
+				</div>
+			{:else if form?.error}
+				<div class="rounded-lg border border-(--color-danger)/40 bg-(--color-danger)/10 px-4 py-3 text-sm text-(--color-danger)">
+					{form.error}
+				</div>
+			{/if}
+
+			<form
+				method="POST"
+				action="?/bulk"
+				use:enhance={() => {
+					submitting = true;
+					return async ({ update }) => {
+						await update();
+						submitting = false;
+						activeTab = 'jobs';
+					};
+				}}
+				class="space-y-4"
+			>
+				<!-- Book slug -->
+				<div class="space-y-1">
+					<label for="slug" class="block text-sm font-medium text-(--color-text)">Book slug</label>
+					<input
+						id="slug"
+						name="slug"
+						type="text"
+						required
+						list="book-slugs"
+						bind:value={slugInput}
+						placeholder="e.g. the-beginning-after-the-end"
+						class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
+					/>
+					<datalist id="book-slugs">
+						{#each data.books as book}
+							<option value={book.slug}>{book.title}</option>
+						{/each}
+					</datalist>
+				</div>
+
+				<!-- Language -->
+				<div class="space-y-1">
+					<label for="lang" class="block text-sm font-medium text-(--color-text)">Target language</label>
+					<select
+						id="lang"
+						name="lang"
+						bind:value={langInput}
+						class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
+					>
+						{#each langs as l}
+							<option value={l.value}>{l.label}</option>
+						{/each}
+					</select>
+				</div>
+
+				<!-- Chapter range -->
+				<div class="grid grid-cols-2 gap-3">
+					<div class="space-y-1">
+						<label for="from" class="block text-sm font-medium text-(--color-text)">From chapter</label>
+						<input
+							id="from"
+							name="from"
+							type="number"
+							min="1"
+							required
+							bind:value={fromInput}
+							class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
+						/>
+					</div>
+					<div class="space-y-1">
+						<label for="to" class="block text-sm font-medium text-(--color-text)">To chapter</label>
+						<input
+							id="to"
+							name="to"
+							type="number"
+							min="1"
+							required
+							bind:value={toInput}
+							class="w-full bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
+						/>
+					</div>
+				</div>
+
+				<p class="text-xs text-(--color-muted)">
+					Enqueues {Math.max(0, toInput - fromInput + 1)} task{toInput - fromInput + 1 !== 1 ? 's' : ''} — one per chapter. Max 1000 at a time.
+				</p>
+
+				<button
+					type="submit"
+					disabled={submitting}
+					class="w-full sm:w-auto px-6 py-2 rounded-lg bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
+				>
+					{submitting ? 'Enqueueing…' : 'Enqueue translations'}
+				</button>
+			</form>
+		</div>
+	{/if}
+
+	<!-- ── Jobs tab ───────────────────────────────────────────────────────────── -->
+	{#if activeTab === 'jobs'}
+		<input
+			type="search"
+			bind:value={jobsQ}
+			placeholder="Filter by slug, lang, or status…"
+			class="w-full max-w-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
+		/>
+
+		{#if filteredJobs.length === 0}
+			<p class="text-(--color-muted) text-sm py-8 text-center">
+				{jobsQ.trim() ? 'No matching jobs.' : 'No translation jobs yet.'}
+			</p>
+		{:else}
+			<!-- Desktop table -->
+			<div class="hidden sm:block overflow-x-auto rounded-xl border border-(--color-border)">
+				<table class="w-full text-sm">
+					<thead class="bg-(--color-surface-2) text-(--color-muted) text-xs uppercase tracking-wide">
+						<tr>
+							<th class="px-4 py-3 text-left">Book</th>
+							<th class="px-4 py-3 text-right">Ch.</th>
+							<th class="px-4 py-3 text-left">Lang</th>
+							<th class="px-4 py-3 text-left">Status</th>
+							<th class="px-4 py-3 text-left">Started</th>
+							<th class="px-4 py-3 text-left">Duration</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-(--color-border)/50">
+						{#each filteredJobs as job}
+							<tr class="bg-(--color-surface) hover:bg-(--color-surface-2)/50 transition-colors">
+								<td class="px-4 py-3 text-(--color-text) font-medium">
+									<a href="/books/{job.slug}" class="hover:text-(--color-brand) transition-colors"
+										>{job.slug}</a
+									>
+								</td>
+								<td class="px-4 py-3 text-right text-(--color-muted)">{job.chapter}</td>
+								<td class="px-4 py-3 text-(--color-muted) font-mono text-xs uppercase">{job.lang}</td>
+								<td class="px-4 py-3">
+									<span class="font-medium {jobStatusColor(job.status)}">{job.status}</span>
+								</td>
+								<td class="px-4 py-3 text-(--color-muted) whitespace-nowrap">{fmtDate(job.started)}</td>
+								<td class="px-4 py-3 text-(--color-muted) whitespace-nowrap"
+									>{duration(job.started, job.finished)}</td
+								>
+							</tr>
+							{#if job.error_message}
+								<tr class="bg-(--color-danger)/10">
+									<td colspan="6" class="px-4 py-2 text-xs text-(--color-danger) font-mono"
+										>{job.error_message}</td
+									>
+								</tr>
+							{/if}
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			<!-- Mobile cards -->
+			<div class="sm:hidden space-y-3">
+				{#each filteredJobs as job}
+					<div class="bg-(--color-surface) rounded-xl border border-(--color-border) p-4 space-y-2">
+						<div class="flex items-start justify-between gap-2">
+							<a
+								href="/books/{job.slug}"
+								class="text-(--color-text) font-medium hover:text-(--color-brand) transition-colors truncate"
+							>
+								{job.slug}
+							</a>
+							<span class="shrink-0 text-xs font-semibold {jobStatusColor(job.status)}"
+								>{job.status}</span
+							>
+						</div>
+						<div class="grid grid-cols-2 gap-1 text-xs">
+							<span class="text-(--color-muted)">Chapter</span><span
+								class="text-(--color-muted) text-right">{job.chapter}</span
+							>
+							<span class="text-(--color-muted)">Lang</span><span
+								class="text-(--color-muted) font-mono text-right uppercase">{job.lang}</span
+							>
+							<span class="text-(--color-muted)">Started</span><span
+								class="text-(--color-muted) text-right">{fmtDate(job.started)}</span
+							>
+							<span class="text-(--color-muted)">Duration</span><span
+								class="text-(--color-muted) text-right">{duration(job.started, job.finished)}</span
+							>
+						</div>
+						{#if job.error_message}
+							<p class="text-xs text-(--color-danger) font-mono break-all">{job.error_message}</p>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>

ui/src/routes/api/settings/+server.ts

@@ -5,7 +5,7 @@ import { log } from '$lib/server/logger';
 
 /**
  * GET /api/settings
- * Returns the current user's settings (auto_next, voice, speed).
+ * Returns the current user's settings (auto_next, voice, speed, theme).
  * Returns defaults if no settings record exists yet.
  */
 export const GET: RequestHandler = async ({ locals }) => {
@@ -14,7 +14,8 @@ export const GET: RequestHandler = async ({ locals }) => {
 		return json({
 			autoNext: settings?.auto_next ?? false,
 			voice: settings?.voice ?? 'af_bella',
-			speed: settings?.speed ?? 1.0
+			speed: settings?.speed ?? 1.0,
+			theme: settings?.theme ?? 'amber'
 		});
 	} catch (e) {
 		log.error('settings', 'GET failed', { err: String(e) });
@@ -24,7 +25,7 @@ export const GET: RequestHandler = async ({ locals }) => {
 
 /**
  * PUT /api/settings
- * Body: { autoNext: boolean, voice: string, speed: number }
+ * Body: { autoNext: boolean, voice: string, speed: number, theme?: string }
  * Saves user preferences.
  */
 export const PUT: RequestHandler = async ({ request, locals }) => {
@@ -39,6 +40,12 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
 		error(400, 'Invalid body — expected { autoNext, voice, speed }');
 	}
 
+	// theme is optional — if provided it must be a known value
+	const validThemes = ['amber', 'slate', 'rose'];
+	if (body.theme !== undefined && !validThemes.includes(body.theme)) {
+		error(400, `Invalid theme — must be one of: ${validThemes.join(', ')}`);
+	}
+
 	try {
 		await saveSettings(locals.sessionId, body, locals.user?.id);
 	} catch (e) {

ui/src/routes/books/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
@@ -16,23 +17,23 @@
 </script>
 
 <svelte:head>
-	<title>Library — libnovel</title>
+	<title>{m.books_page_title()}</title>
 </svelte:head>
 
 <div class="mb-6">
-	<h1 class="text-2xl font-bold text-zinc-100">Library</h1>
-	<p class="text-zinc-400 text-sm mt-1">
-		{data.books?.length ?? 0} book{(data.books?.length ?? 0) !== 1 ? 's' : ''}
+	<h1 class="text-2xl font-bold text-(--color-text)">{m.books_heading()}</h1>
+	<p class="text-(--color-muted) text-sm mt-1">
+		{m.books_count({ n: String(data.books?.length ?? 0), s: (data.books?.length ?? 0) !== 1 ? 's' : '' })}
 	</p>
 </div>
 
 {#if !data.books?.length}
-	<div class="text-center py-20 text-zinc-500">
-		<p class="text-lg">Your library is empty.</p>
+	<div class="text-center py-20 text-(--color-muted)">
+		<p class="text-lg">{m.books_empty_library()}</p>
 		<p class="text-sm mt-2">
-			Books you start reading or save from
-			<a href="/catalogue" class="text-amber-400 hover:text-amber-300 transition-colors">Discover</a>
-			will appear here.
+			{m.books_empty_discover()}
+			<a href="/catalogue" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">{m.books_empty_discover_link()}</a>
+			{m.books_empty_discover_suffix()}
 		</p>
 	</div>
 {:else}
@@ -42,10 +43,10 @@
 			{@const genres = parseGenres(book.genres)}
 			<a
 				href="/books/{book.slug}"
-				class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
 			>
 				<!-- Cover image -->
-				<div class="aspect-[2/3] bg-zinc-900 overflow-hidden">
+				<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden">
 					{#if book.cover}
 						<img
 							src={book.cover}
@@ -54,7 +55,7 @@
 							loading="lazy"
 						/>
 					{:else}
-						<div class="w-full h-full flex items-center justify-center text-zinc-600">
+						<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
 							<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
 									d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -65,21 +66,21 @@
 
 				<!-- Info -->
 				<div class="p-2 flex flex-col gap-1 flex-1">
-					<h2 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">
+					<h2 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">
 						{book.title ?? ''}
 					</h2>
 					{#if book.author}
-						<p class="text-xs text-zinc-400 truncate">{book.author ?? ''}</p>
+						<p class="text-xs text-(--color-muted) truncate">{book.author ?? ''}</p>
 					{/if}
 
 					<div class="mt-auto pt-1 flex items-center justify-between gap-1">
 						{#if book.status}
-							<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-700 text-zinc-300 truncate max-w-[60%]">
+							<span class="text-xs px-1.5 py-0.5 rounded bg-(--color-surface-3) text-(--color-text) truncate max-w-[60%]">
 								{book.status}
 							</span>
 						{/if}
 						{#if lastChapter}
-							<span class="text-xs text-amber-400 font-medium ml-auto whitespace-nowrap">
+							<span class="text-xs text-(--color-brand) font-medium ml-auto whitespace-nowrap">
 								ch.{lastChapter}
 							</span>
 						{/if}
@@ -88,7 +89,7 @@
 					{#if genres.length > 0}
 						<div class="flex flex-wrap gap-1 mt-1">
 							{#each genres.slice(0, 2) as genre}
-								<span class="text-xs px-1 py-0.5 rounded bg-zinc-900 text-zinc-500">{genre}</span>
+								<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
 							{/each}
 						</div>
 					{/if}

ui/src/routes/books/[slug]/+page.svelte

@@ -3,6 +3,7 @@
 	import { invalidateAll } from '$app/navigation';
 	import type { PageData } from './$types';
 	import CommentsSection from '$lib/components/CommentsSection.svelte';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
@@ -38,8 +39,6 @@
 	}
 
 	const genres = $derived(parseGenres(data.book?.genres ?? []));
-
-	// Use chapters from loaded data (both library and preview paths return chapters now)
 	const chapterList = $derived(data.chapters ?? []);
 
 	// ── Admin: rescrape ───────────────────────────────────────────────────────
@@ -102,9 +101,6 @@
 	let adminOpen = $state(false);
 
 	// ── Auto-poll when scrape task is in flight ───────────────────────────────
-	// When the backend enqueues a scrape for an unseen book, the page shows a
-	// spinner. Poll every 3 s until the task reaches "done" or "failed", then
-	// reload the full page data so chapters appear automatically.
 	$effect(() => {
 		if (!data.scraping || !data.taskId) return;
 
@@ -130,26 +126,26 @@
 </script>
 
 <svelte:head>
-	<title>{data.scraping ? 'Scraping…' : data.book?.title ?? 'Book'} — libnovel</title>
+	<title>{data.scraping ? m.book_detail_scraping() : (data.book?.title ?? 'Book')} — libnovel</title>
 </svelte:head>
 
 {#if data.scraping}
 <!-- ═══════════════════════════════════════════ Scraping in progress ══ -->
 <div class="flex flex-col items-center justify-center py-24 gap-5 text-center">
-	<svg class="w-10 h-10 text-amber-400 animate-spin" fill="none" viewBox="0 0 24 24">
+	<svg class="w-10 h-10 text-(--color-brand) animate-spin" fill="none" viewBox="0 0 24 24">
 		<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 		<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 	</svg>
 	<div>
-		<p class="text-zinc-200 font-semibold text-lg">Scraping in progress…</p>
-		<p class="text-zinc-500 text-sm mt-1">
-			Fetching the first 20 chapters. This page will refresh automatically.
+		<p class="text-(--color-text) font-semibold text-lg">{m.book_detail_scraping()}</p>
+		<p class="text-(--color-muted) text-sm mt-1">
+			{m.book_detail_scraping_progress()}
 		</p>
 		{#if data.taskId}
-			<p class="text-zinc-600 text-xs mt-2 font-mono">task: {data.taskId}</p>
+			<p class="text-(--color-muted) text-xs mt-2 font-mono">task: {data.taskId}</p>
 		{/if}
 	</div>
-	<a href="/" class="mt-2 text-sm text-amber-400 hover:text-amber-300 transition-colors">← Home</a>
+	<a href="/" class="mt-2 text-sm text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">{m.book_detail_scraping_home()}</a>
 </div>
 
 {:else}
@@ -165,7 +161,7 @@
 			aria-hidden="true"
 		></div>
 	{/if}
-	<div class="absolute inset-0 bg-gradient-to-b from-zinc-900/60 to-zinc-900/95 pointer-events-none" aria-hidden="true"></div>
+	<div class="absolute inset-0 bg-gradient-to-b from-(--color-surface)/60 to-(--color-surface)/95 pointer-events-none" aria-hidden="true"></div>
 
 	<div class="relative flex flex-col p-5 sm:p-7 gap-4">
 		<!-- Cover + meta row -->
@@ -175,7 +171,7 @@
 				<img
 					src={book.cover}
 					alt={book.title}
-					class="w-28 sm:w-48 rounded-lg object-cover flex-shrink-0 border border-zinc-700 shadow-xl self-start"
+					class="w-28 sm:w-48 rounded-lg object-cover flex-shrink-0 border border-(--color-border) shadow-xl self-start"
 				/>
 			{/if}
 
@@ -183,57 +179,57 @@
 			<div class="flex flex-col gap-2 min-w-0 flex-1">
 				<!-- Title + "not in library" badge -->
 				<div class="flex items-start gap-2 flex-wrap">
-					<h1 class="text-xl sm:text-3xl font-bold text-zinc-100 leading-tight">{book.title}</h1>
+					<h1 class="text-xl sm:text-3xl font-bold text-(--color-text) leading-tight">{book.title}</h1>
 					{#if !data.inLib}
 						<span
-							class="mt-1 text-xs px-2 py-0.5 rounded-full bg-zinc-700 text-zinc-400 border border-zinc-600 shrink-0"
+							class="mt-1 text-xs px-2 py-0.5 rounded-full bg-(--color-surface-3) text-(--color-muted) border border-(--color-border) shrink-0"
 							title="This book was fetched live from the source and is not yet in your library"
 						>
-							not in library
+							{m.book_detail_not_in_library()}
 						</span>
 					{/if}
 				</div>
 
 				<!-- Author -->
 				{#if book.author}
-					<p class="text-zinc-400 text-sm">{book.author}</p>
+					<p class="text-(--color-muted) text-sm">{book.author}</p>
 				{/if}
 
 				<!-- Status + genres -->
 				<div class="flex flex-wrap gap-1.5 mt-0.5">
 					{#if book.status}
-						<span class="text-xs px-2 py-0.5 rounded bg-zinc-700 text-zinc-300 border border-zinc-600">{book.status}</span>
+						<span class="text-xs px-2 py-0.5 rounded bg-(--color-surface-3) text-(--color-text) border border-(--color-border)">{book.status}</span>
 					{/if}
 					{#each genres as genre}
-						<span class="text-xs px-2 py-0.5 rounded bg-zinc-800 text-zinc-400 border border-zinc-700">{genre}</span>
+						<span class="text-xs px-2 py-0.5 rounded bg-(--color-surface-2) text-(--color-muted) border border-(--color-border)">{genre}</span>
 					{/each}
 				</div>
 
 				<!-- Summary with expand toggle -->
 				{#if book.summary}
 					<div class="mt-1">
-						<p class="text-zinc-400 text-sm leading-relaxed break-words {summaryExpanded ? '' : 'line-clamp-3'}">
+						<p class="text-(--color-muted) text-sm leading-relaxed break-words {summaryExpanded ? '' : 'line-clamp-3'}">
 							{book.summary}
 						</p>
 						{#if book.summary.length > 220}
 							<button
 								onclick={() => (summaryExpanded = !summaryExpanded)}
-								class="text-xs text-amber-400/70 hover:text-amber-400 mt-1 transition-colors"
+								class="text-xs text-(--color-brand)/70 hover:text-(--color-brand) mt-1 transition-colors"
 							>
-								{summaryExpanded ? 'Less' : 'More'}
+								{summaryExpanded ? m.book_detail_less() : m.book_detail_more()}
 							</button>
 						{/if}
 					</div>
 				{/if}
 
-				<!-- CTA buttons — desktop only (hidden on mobile, shown below on mobile) -->
+				<!-- CTA buttons — desktop only -->
 				<div class="hidden sm:flex gap-2 mt-3 items-center flex-wrap">
 					{#if data.lastChapter}
 						<a
 							href="/books/{book.slug}/chapters/{data.lastChapter}"
-							class="px-5 py-2 bg-amber-400 text-zinc-900 font-semibold rounded-lg text-sm hover:bg-amber-300 transition-colors shadow"
+							class="px-5 py-2 bg-(--color-brand) text-(--color-surface) font-semibold rounded-lg text-sm hover:bg-(--color-brand-dim) transition-colors shadow"
 						>
-							Continue ch.{data.lastChapter}
+							{m.book_detail_continue_ch({ n: String(data.lastChapter) })}
 						</a>
 					{/if}
 					{#if chapterList.length > 0}
@@ -241,21 +237,21 @@
 							href="/books/{book.slug}/chapters/1"
 							class="px-4 py-2 rounded-lg text-sm font-semibold transition-colors
 								{data.lastChapter
-									? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600'
-									: 'bg-amber-400 text-zinc-900 hover:bg-amber-300 shadow'}"
+					? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)'
+								: 'bg-(--color-brand) text-(--color-surface) hover:bg-(--color-brand-dim) shadow'}"
 						>
-							{data.inLib ? 'Start from ch.1' : 'Preview ch.1'}
+							{data.inLib ? m.book_detail_start_ch1() : m.book_detail_preview_ch1()}
 						</a>
 					{/if}
 					{#if data.inLib}
 						<button
 							onclick={toggleSave}
 							disabled={saving}
-							title={saved ? 'Remove from library' : 'Add to library'}
+							title={saved ? m.book_detail_remove_from_library() : m.book_detail_add_to_library()}
 							class="flex items-center justify-center w-9 h-9 rounded-lg border transition-colors disabled:opacity-50
 								{saved
-									? 'bg-amber-400/20 text-amber-300 border-amber-400/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
-									: 'bg-zinc-700 text-zinc-400 border-zinc-600 hover:bg-zinc-600 hover:text-zinc-100'}"
+									? 'bg-(--color-brand)/20 text-(--color-brand-dim) border-(--color-brand)/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
+									: 'bg-(--color-surface-3) text-(--color-muted) border-(--color-border) hover:bg-(--color-surface-3) hover:text-(--color-text)'}"
 						>
 							{#if saving}
 								<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
@@ -277,14 +273,14 @@
 			</div>
 		</div>
 
-		<!-- CTA buttons — mobile only, full-width row below cover+meta -->
+		<!-- CTA buttons — mobile only -->
 		<div class="flex sm:hidden gap-2 items-center">
 			{#if data.lastChapter}
 				<a
 					href="/books/{book.slug}/chapters/{data.lastChapter}"
-					class="flex-1 text-center px-4 py-2.5 bg-amber-400 text-zinc-900 font-semibold rounded-lg text-sm hover:bg-amber-300 transition-colors shadow"
+					class="flex-1 text-center px-4 py-2.5 bg-(--color-brand) text-(--color-surface) font-semibold rounded-lg text-sm hover:bg-(--color-brand-dim) transition-colors shadow"
 				>
-					Continue ch.{data.lastChapter}
+					{m.book_detail_continue_ch({ n: String(data.lastChapter) })}
 				</a>
 			{/if}
 			{#if chapterList.length > 0}
@@ -292,21 +288,21 @@
 					href="/books/{book.slug}/chapters/1"
 					class="flex-1 text-center px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors
 						{data.lastChapter
-							? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600'
-							: 'bg-amber-400 text-zinc-900 hover:bg-amber-300 shadow'}"
+					? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)'
+						: 'bg-(--color-brand) text-(--color-surface) hover:bg-(--color-brand-dim) shadow'}"
 				>
-					{data.inLib ? 'Start from ch.1' : 'Preview ch.1'}
+					{data.inLib ? m.book_detail_start_ch1() : m.book_detail_preview_ch1()}
 				</a>
 			{/if}
 			{#if data.inLib}
 				<button
 					onclick={toggleSave}
 					disabled={saving}
-					title={saved ? 'Remove from library' : 'Add to library'}
+					title={saved ? m.book_detail_remove_from_library() : m.book_detail_add_to_library()}
 					class="flex items-center justify-center w-10 h-10 flex-shrink-0 rounded-lg border transition-colors disabled:opacity-50
 						{saved
-							? 'bg-amber-400/20 text-amber-300 border-amber-400/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
-							: 'bg-zinc-700 text-zinc-400 border-zinc-600 hover:bg-zinc-600 hover:text-zinc-100'}"
+							? 'bg-(--color-brand)/20 text-(--color-brand-dim) border-(--color-brand)/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
+							: 'bg-(--color-surface-3) text-(--color-muted) border-(--color-border) hover:bg-(--color-surface-3) hover:text-(--color-text)'}"
 				>
 					{#if saving}
 						<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
@@ -329,28 +325,27 @@
 </div>
 
 <!-- ══════════════════════════════════════════════════ Chapters row ══ -->
-<div class="flex flex-col divide-y divide-zinc-800 border border-zinc-800 rounded-xl overflow-hidden mb-6">
-	<!-- Chapters row: links to the full chapter list page -->
+<div class="flex flex-col divide-y divide-(--color-border) border border-(--color-border) rounded-xl overflow-hidden mb-6">
 	<a
 		href="/books/{book.slug}/chapters"
-		class="flex items-center gap-3 px-4 py-3.5 hover:bg-zinc-800/60 transition-colors group"
+		class="flex items-center gap-3 px-4 py-3.5 hover:bg-(--color-surface-2)/60 transition-colors group"
 	>
-		<svg class="w-4 h-4 text-amber-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+		<svg class="w-4 h-4 text-(--color-brand) flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
 			<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h10"/>
 		</svg>
 		<div class="flex flex-col min-w-0 flex-1">
-			<span class="text-sm font-semibold text-zinc-200">Chapters</span>
+			<span class="text-sm font-semibold text-(--color-text)">{m.chapters_heading()}</span>
 			{#if chapterList.length > 0}
-				<span class="text-xs text-zinc-500">
+				<span class="text-xs text-(--color-muted)">
 					{#if data.lastChapter && data.lastChapter > 0}
-						Reading ch.{data.lastChapter} of {chapterList.length}
+						{m.book_detail_reading_ch({ n: String(data.lastChapter), total: String(chapterList.length) })}
 					{:else}
-						{chapterList.length} chapter{chapterList.length === 1 ? '' : 's'}
+						{m.book_detail_n_chapters({ n: String(chapterList.length) })}
 					{/if}
 				</span>
 			{/if}
 		</div>
-		<svg class="w-4 h-4 text-zinc-600 group-hover:text-zinc-400 transition-colors flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+		<svg class="w-4 h-4 text-(--color-muted) group-hover:text-(--color-muted) transition-colors flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
 			<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
 		</svg>
 	</a>
@@ -360,44 +355,44 @@
 		<div>
 			<button
 				onclick={() => (adminOpen = !adminOpen)}
-				class="w-full flex items-center gap-2 px-4 py-2.5 text-xs font-medium text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/50 transition-colors text-left"
+				class="w-full flex items-center gap-2 px-4 py-2.5 text-xs font-medium text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2)/50 transition-colors text-left"
 			>
 				<svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
 				</svg>
-				Admin
+				{m.book_detail_admin()}
 				<svg class="w-3 h-3 ml-auto transition-transform {adminOpen ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
 				</svg>
 			</button>
 
 			{#if adminOpen}
-				<div class="px-4 py-3 border-t border-zinc-800 flex flex-col gap-4">
+				<div class="px-4 py-3 border-t border-(--color-border) flex flex-col gap-4">
 					<!-- Rescrape -->
 					<div class="flex items-center gap-3 flex-wrap">
 						<button
 							onclick={rescrape}
 							disabled={scraping}
 							class="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors
-								{scraping ? 'bg-zinc-700 text-zinc-500 cursor-not-allowed' : 'bg-zinc-700 text-zinc-200 hover:bg-zinc-600'}"
+								{scraping ? 'bg-(--color-surface-3) text-(--color-muted) cursor-not-allowed' : 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)'}"
 						>
 							{#if scraping}
 								<svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
 									<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 									<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 								</svg>
-								Queuing…
+								{m.book_detail_rescraping()}
 							{:else}
 								<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
 								</svg>
-								Rescrape book
+								{m.book_detail_rescrape_book()}
 							{/if}
 						</button>
 						{#if scrapeResult}
-							<span class="text-xs {scrapeResult === 'queued' ? 'text-green-400' : scrapeResult === 'busy' ? 'text-amber-400' : 'text-red-400'}">
-								{scrapeResult === 'queued' ? 'Queued.' : scrapeResult === 'busy' ? 'Scraper busy.' : 'Error.'}
+							<span class="text-xs {scrapeResult === 'queued' ? 'text-green-400' : scrapeResult === 'busy' ? 'text-(--color-brand)' : 'text-(--color-danger)'}">
+								{scrapeResult === 'queued' ? m.catalogue_scrape_queued_badge() + '.' : scrapeResult === 'busy' ? m.catalogue_scrape_busy_badge() + '.' : m.common_error() + '.'}
 							</span>
 						{/if}
 					</div>
@@ -405,25 +400,25 @@
 					<!-- Range scrape -->
 					<div class="flex flex-wrap items-end gap-3">
 						<div class="flex flex-col gap-1">
-							<label for="range-from" class="text-xs text-zinc-500">From chapter</label>
+							<label for="range-from" class="text-xs text-(--color-muted)">{m.book_detail_from_chapter()}</label>
 							<input
 								id="range-from"
 								type="number"
 								min="1"
 								bind:value={rangeFrom}
 								placeholder="1"
-								class="w-24 px-2 py-1 rounded bg-zinc-700 border border-zinc-600 text-zinc-200 text-xs focus:outline-none focus:border-amber-400"
+								class="w-24 px-2 py-1 rounded bg-(--color-surface-3) border border-(--color-border) text-(--color-text) text-xs focus:outline-none focus:border-(--color-brand)"
 							/>
 						</div>
 						<div class="flex flex-col gap-1">
-							<label for="range-to" class="text-xs text-zinc-500">To chapter (optional)</label>
+							<label for="range-to" class="text-xs text-(--color-muted)">{m.book_detail_to_chapter()}</label>
 							<input
 								id="range-to"
 								type="number"
 								min="1"
 								bind:value={rangeTo}
 								placeholder="end"
-								class="w-24 px-2 py-1 rounded bg-zinc-700 border border-zinc-600 text-zinc-200 text-xs focus:outline-none focus:border-amber-400"
+								class="w-24 px-2 py-1 rounded bg-(--color-surface-3) border border-(--color-border) text-(--color-text) text-xs focus:outline-none focus:border-(--color-brand)"
 							/>
 						</div>
 						<button
@@ -431,14 +426,14 @@
 							disabled={rangeScraping || !rangeFrom}
 							class="px-3 py-1.5 rounded text-xs font-medium transition-colors
 								{rangeScraping || !rangeFrom
-									? 'bg-zinc-700 text-zinc-500 cursor-not-allowed'
-									: 'bg-amber-500/20 text-amber-300 hover:bg-amber-500/40 border border-amber-500/30'}"
+									? 'bg-(--color-surface-3) text-(--color-muted) cursor-not-allowed'
+									: 'bg-(--color-brand)/20 text-(--color-brand-dim) hover:bg-(--color-brand)/40 border border-(--color-brand)/30'}"
 						>
-							{rangeScraping ? 'Queuing…' : 'Scrape range'}
+							{rangeScraping ? m.book_detail_range_queuing() : m.book_detail_scrape_range()}
 						</button>
 						{#if rangeResult}
-							<span class="text-xs {rangeResult === 'queued' ? 'text-green-400' : rangeResult === 'busy' ? 'text-amber-400' : 'text-red-400'}">
-								{rangeResult === 'queued' ? 'Range scrape queued.' : rangeResult === 'busy' ? 'Scraper busy.' : 'Error queuing.'}
+							<span class="text-xs {rangeResult === 'queued' ? 'text-green-400' : rangeResult === 'busy' ? 'text-(--color-brand)' : 'text-(--color-danger)'}">
+								{rangeResult === 'queued' ? m.catalogue_scrape_queued_badge() + '.' : rangeResult === 'busy' ? m.catalogue_scrape_busy_badge() + '.' : m.common_error() + '.'}
 							</span>
 						{/if}
 					</div>

ui/src/routes/books/[slug]/chapters/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import type { ChapterIdx } from '$lib/server/pocketbase';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
@@ -57,39 +58,39 @@
 </script>
 
 <svelte:head>
-	<title>{data.book.title} — Chapters — libnovel</title>
+	<title>{m.chapters_page_title({ title: data.book.title })}</title>
 </svelte:head>
 
 <!-- ── Back link + title ─────────────────────────────────────────────────── -->
 <div class="flex items-center gap-3 mb-5">
 	<a
 		href="/books/{data.book.slug}"
-		class="flex items-center gap-1.5 text-zinc-400 hover:text-zinc-200 transition-colors text-sm"
+		class="flex items-center gap-1.5 text-(--color-muted) hover:text-(--color-text) transition-colors text-sm"
 	>
 		<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
 			<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
 		</svg>
-		Back
+		{m.common_back()}
 	</a>
-	<span class="text-zinc-700">/</span>
-	<h1 class="text-base font-semibold text-zinc-200 truncate">{data.book.title}</h1>
+	<span class="text-(--color-border)">/</span>
+	<h1 class="text-base font-semibold text-(--color-text) truncate">{data.book.title}</h1>
 </div>
 
 <!-- ── Search bar ───────────────────────────────────────────────────────── -->
 <div class="relative mb-4">
-	<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 pointer-events-none" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+	<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted) pointer-events-none" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
 		<circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35"/>
 	</svg>
 	<input
 		type="search"
-		placeholder="Search chapters…"
+		placeholder={m.chapters_search_placeholder()}
 		bind:value={searchQuery}
-		class="w-full pl-9 pr-4 py-2.5 rounded-lg bg-zinc-800 border border-zinc-700 text-zinc-200 placeholder-zinc-500 text-sm focus:outline-none focus:border-amber-400 transition-colors"
+		class="w-full pl-9 pr-4 py-2.5 rounded-lg bg-(--color-surface-2) border border-(--color-border) text-(--color-text) placeholder-zinc-500 text-sm focus:outline-none focus:border-(--color-brand) transition-colors"
 	/>
 	{#if searchQuery}
 		<button
 			onclick={() => (searchQuery = '')}
-			class="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 hover:text-zinc-300"
+			class="absolute right-3 top-1/2 -translate-y-1/2 text-(--color-muted) hover:text-(--color-text)"
 			aria-label="Clear search"
 		>
 			<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -107,9 +108,9 @@
 				onclick={() => (activeGroup = i)}
 				class="px-2.5 py-1 rounded text-xs font-medium transition-colors
 					{activeGroup === i
-						? 'bg-amber-400 text-zinc-900'
-						: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'}
-					{currentGroup === i && activeGroup !== i ? 'ring-1 ring-amber-400/50' : ''}"
+						? 'bg-(--color-brand) text-(--color-surface)'
+						: 'bg-(--color-surface-2) text-(--color-muted) hover:bg-(--color-surface-3) hover:text-(--color-text)'}
+					{currentGroup === i && activeGroup !== i ? 'ring-1 ring-(--color-brand)/50' : ''}"
 			>
 				{groupLabel(i)}
 			</button>
@@ -121,26 +122,26 @@
 {#if data.lastChapter && data.lastChapter > 0 && !searchQuery && activeGroup !== currentGroup}
 	<button
 		onclick={() => (activeGroup = currentGroup)}
-		class="flex items-center gap-2 w-full px-3 py-2 mb-3 rounded-lg bg-amber-400/10 border border-amber-400/25 text-amber-400 text-sm hover:bg-amber-400/20 transition-colors"
+		class="flex items-center gap-2 w-full px-3 py-2 mb-3 rounded-lg bg-(--color-brand)/10 border border-(--color-brand)/25 text-(--color-brand) text-sm hover:bg-(--color-brand)/20 transition-colors"
 	>
 		<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
 			<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
 		</svg>
-		Jump to Ch.{data.lastChapter}
+		{m.chapters_jump_to({ n: String(data.lastChapter) })}
 	</button>
 {/if}
 
 <!-- ── Chapter list ───────────────────────────────────────────────────── -->
 {#if visibleChapters.length === 0}
 	{#if searchQuery}
-		<p class="text-zinc-500 text-sm py-8 text-center">No chapters match "{searchQuery}"</p>
+		<p class="text-(--color-muted) text-sm py-8 text-center">{m.chapters_no_match({ q: searchQuery })}</p>
 	{:else}
-		<p class="text-zinc-500 text-sm">No chapters available yet.</p>
+		<p class="text-(--color-muted) text-sm">{m.chapters_none_available()}</p>
 	{/if}
 {:else}
 	<!-- Result count while searching -->
 	{#if searchQuery}
-		<p class="text-xs text-zinc-500 mb-2">{visibleChapters.length} result{visibleChapters.length === 1 ? '' : 's'}</p>
+		<p class="text-xs text-(--color-muted) mb-2">{m.chapters_result_count({ n: String(visibleChapters.length) })}</p>
 	{/if}
 
 	<div class="flex flex-col gap-0.5">
@@ -150,12 +151,12 @@
 				href="/books/{data.book.slug}/chapters/{chapter.number}"
 				id="ch-{chapter.number}"
 				class="flex items-center gap-3 px-3 py-2.5 rounded transition-colors group
-					{isCurrent ? 'bg-zinc-800' : 'hover:bg-zinc-800/60'}"
+					{isCurrent ? 'bg-(--color-surface-2)' : 'hover:bg-(--color-surface-2)/60'}"
 			>
 				<!-- Number badge -->
 				<span
 					class="w-9 text-right text-sm font-mono flex-shrink-0
-						{isCurrent ? 'text-amber-400 font-semibold' : 'text-zinc-600'}"
+						{isCurrent ? 'text-(--color-brand) font-semibold' : 'text-(--color-muted)'}"
 				>
 					{chapter.number}
 				</span>
@@ -163,21 +164,21 @@
 				<!-- Title -->
 				<span
 					class="flex-1 min-w-0 text-sm truncate transition-colors
-						{isCurrent ? 'text-amber-300 font-medium' : 'text-zinc-300 group-hover:text-zinc-100'}"
+						{isCurrent ? 'text-(--color-brand-dim) font-medium' : 'text-(--color-text) group-hover:text-(--color-text)'}"
 				>
-					{chapter.title || `Chapter ${chapter.number}`}
+					{chapter.title || m.reader_chapter_n({ n: String(chapter.number) })}
 				</span>
 
 				<!-- Date — desktop only -->
 				{#if chapter.date_label}
-					<span class="hidden sm:block text-xs text-zinc-600 flex-shrink-0">
+					<span class="hidden sm:block text-xs text-(--color-muted) flex-shrink-0">
 						{chapter.date_label}
 					</span>
 				{/if}
 
 				<!-- Reading indicator -->
 				{#if isCurrent}
-					<span class="text-xs text-amber-500 font-medium flex-shrink-0">reading</span>
+					<span class="text-xs text-(--color-brand) font-medium flex-shrink-0">{m.chapters_reading_indicator()}</span>
 				{/if}
 			</a>
 		{/each}
@@ -185,15 +186,15 @@
 
 	<!-- Bottom page-group nav (mirrors top, for long lists) -->
 	{#if !searchQuery && totalGroups > 1}
-		<div class="flex flex-wrap gap-1.5 mt-5 pt-4 border-t border-zinc-800">
+		<div class="flex flex-wrap gap-1.5 mt-5 pt-4 border-t border-(--color-border)">
 			{#each Array(totalGroups) as _, i}
 				<button
 					onclick={() => { activeGroup = i; window.scrollTo({ top: 0, behavior: 'smooth' }); }}
 					class="px-2.5 py-1 rounded text-xs font-medium transition-colors
 						{activeGroup === i
-							? 'bg-amber-400 text-zinc-900'
-							: 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200'}
-						{currentGroup === i && activeGroup !== i ? 'ring-1 ring-amber-400/50' : ''}"
+							? 'bg-(--color-brand) text-(--color-surface)'
+							: 'bg-(--color-surface-2) text-(--color-muted) hover:bg-(--color-surface-3) hover:text-(--color-text)'}
+						{currentGroup === i && activeGroup !== i ? 'ring-1 ring-(--color-brand)/50' : ''}"
 				>
 					{groupLabel(i)}
 				</button>

ui/src/routes/books/[slug]/chapters/[n]/+page.server.ts

@@ -6,6 +6,8 @@ import { log } from '$lib/server/logger';
 import { backendFetch } from '$lib/server/scraper';
 import type { Voice } from '$lib/types';
 
+const SUPPORTED_LANGS = new Set(['ru', 'id', 'pt', 'fr']);
+
 export const load: PageServerLoad = async ({ params, url, locals }) => {
 	const { slug } = params;
 	const n = parseInt(params.n, 10);
@@ -15,6 +17,8 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 	const isPreview = url.searchParams.get('preview') === '1';
 	const chapterUrl = url.searchParams.get('chapter_url') ?? '';
 	const chapterTitle = url.searchParams.get('title') ?? '';
+	const lang = url.searchParams.get('lang') ?? '';
+	const useTranslation = SUPPORTED_LANGS.has(lang);
 
 	if (isPreview) {
 		// ── Preview path: scrape chapter live, nothing from PocketBase/MinIO ──
@@ -77,7 +81,9 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 			next: null as number | null,
 			chapters: [] as { number: number; title: string }[],
 			sessionId: locals.sessionId,
-			isPreview: true
+			isPreview: true,
+			lang: '',
+			translationStatus: 'unavailable' as string
 		};
 	}
 
@@ -105,7 +111,37 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 		// Non-critical — UI will use store default
 	}
 
-	// Fetch chapter markdown directly from the backend (server-side MinIO read)
+	// ── Translation path: try to serve translated HTML ─────────────────────
+	if (useTranslation) {
+		try {
+			const tRes = await backendFetch(
+				`/api/translation/${encodeURIComponent(slug)}/${n}?lang=${lang}`
+			);
+			if (tRes.ok) {
+				const tData = (await tRes.json()) as { html: string; lang: string };
+				const prevChapter = chapters.find((c) => c.number === n - 1) ?? null;
+				const nextChapter = chapters.find((c) => c.number === n + 1) ?? null;
+				return {
+					book: { slug: book.slug, title: book.title, cover: book.cover ?? '' },
+					chapter: chapterIdx,
+					html: tData.html,
+					voices,
+					prev: prevChapter ? prevChapter.number : null,
+					next: nextChapter ? nextChapter.number : null,
+					chapters: chapters.map((c) => ({ number: c.number, title: c.title })),
+					sessionId: locals.sessionId,
+					isPreview: false,
+					lang,
+					translationStatus: 'done'
+				};
+			}
+			// 404 = not generated yet — fall through to original, UI can trigger generation
+		} catch {
+			// Non-critical — fall through to original content
+		}
+	}
+
+	// ── Original content path ──────────────────────────────────────────────
 	let html = '';
 	try {
 		const res = await backendFetch(`/api/chapter-markdown/${encodeURIComponent(slug)}/${n}`);
@@ -122,6 +158,22 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 		error(502, 'Could not fetch chapter content');
 	}
 
+	// Check translation status for the UI switcher (non-blocking)
+	let translationStatus = 'idle';
+	if (useTranslation) {
+		try {
+			const stRes = await backendFetch(
+				`/api/translation/status/${encodeURIComponent(slug)}/${n}?lang=${lang}`
+			);
+			if (stRes.ok) {
+				const stData = (await stRes.json()) as { status: string };
+				translationStatus = stData.status ?? 'idle';
+			}
+		} catch {
+			// Non-critical
+		}
+	}
+
 	const prevChapter = chapters.find((c) => c.number === n - 1) ?? null;
 	const nextChapter = chapters.find((c) => c.number === n + 1) ?? null;
 
@@ -134,6 +186,8 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 		next: nextChapter ? nextChapter.number : null,
 		chapters: chapters.map((c) => ({ number: c.number, title: c.title })),
 		sessionId: locals.sessionId,
-		isPreview: false
+		isPreview: false,
+		lang: useTranslation ? lang : '',
+		translationStatus
 	};
 };

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import AudioPlayer from '$lib/components/AudioPlayer.svelte';
 	import type { PageData } from './$types';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
@@ -9,16 +12,69 @@
 	let fetchingContent = $state(untrack(() => !data.isPreview && !data.html));
 	let fetchError = $state('');
 
-	// ── Word count ────────────────────────────────────────────────────────────
-	function countWords(htmlStr: string | null): number {
-		if (!htmlStr) return 0;
-		// Strip HTML tags, collapse whitespace, split on whitespace
-		return htmlStr.replace(/<[^>]+>/g, ' ').trim().split(/\s+/).filter(Boolean).length;
+	// Translation state
+	const SUPPORTED_LANGS = [
+		{ code: 'ru', label: 'RU' },
+		{ code: 'id', label: 'ID' },
+		{ code: 'pt', label: 'PT' },
+		{ code: 'fr', label: 'FR' }
+	];
+	let translationStatus = $state(untrack(() => data.translationStatus ?? 'idle'));
+	let translatingLang = $state(untrack(() => data.lang ?? ''));
+	let pollingTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function currentLang() {
+		return page.url.searchParams.get('lang') ?? '';
 	}
 
-	const wordCount = $derived(countWords(html));
+	function langUrl(lang: string) {
+		const u = new URL(page.url);
+		if (lang) u.searchParams.set('lang', lang);
+		else u.searchParams.delete('lang');
+		return u.pathname + u.search;
+	}
 
-	onMount(async () => {
+	async function requestTranslation(lang: string) {
+		translatingLang = lang;
+		translationStatus = 'pending';
+		try {
+			const res = await fetch(
+				`/api/translation/${encodeURIComponent(data.book.slug)}/${data.chapter.number}?lang=${lang}`,
+				{ method: 'POST' }
+			);
+			const d = (await res.json()) as { status: string };
+			translationStatus = d.status ?? 'pending';
+			if (d.status === 'done') {
+				goto(langUrl(lang));
+			} else {
+				startPolling(lang);
+			}
+		} catch {
+			translationStatus = 'idle';
+		}
+	}
+
+	function startPolling(lang: string) {
+		if (pollingTimer) clearTimeout(pollingTimer);
+		pollingTimer = setTimeout(async () => {
+			try {
+				const res = await fetch(
+					`/api/translation/status/${encodeURIComponent(data.book.slug)}/${data.chapter.number}?lang=${lang}`
+				);
+				const d = (await res.json()) as { status: string };
+				translationStatus = d.status ?? 'idle';
+				if (d.status === 'done') {
+					goto(langUrl(lang));
+				} else if (d.status === 'pending' || d.status === 'running') {
+					startPolling(lang);
+				}
+			} catch {
+				startPolling(lang); // retry on network error
+			}
+		}, 3000);
+	}
+
+	onMount(() => {
 		// Umami analytics: track chapter reads
 		window.umami?.track('chapter_read', {
 			slug: data.book.slug,
@@ -28,7 +84,7 @@
 		// Record reading progress (skip for preview chapters)
 		if (!data.isPreview) {
 			try {
-				await fetch('/api/progress', {
+				fetch('/api/progress', {
 					method: 'POST',
 					headers: { 'Content-Type': 'application/json' },
 					body: JSON.stringify({ slug: data.book.slug, chapter: data.chapter.number })
@@ -38,81 +94,137 @@
 			}
 		}
 
+		// Resume polling if translation was in-progress at load time
+		if (translatingLang && (translationStatus === 'pending' || translationStatus === 'running')) {
+			startPolling(translatingLang);
+		}
+
 		// If the normal path returned no content, fall back to live preview scrape
 		if (!data.isPreview && !data.html) {
-			try {
-				const res = await fetch(
-					`/api/chapter-text-preview/${encodeURIComponent(data.book.slug)}/${data.chapter.number}`
-				);
-				if (!res.ok) throw new Error(`status ${res.status}`);
-				const d = (await res.json()) as { text?: string };
-				if (d.text) {
-					const { marked } = await import('marked');
-					html = await marked(d.text, { async: true });
-				} else {
-					fetchError = 'Chapter content not available.';
+			(async () => {
+				try {
+					const res = await fetch(
+						`/api/chapter-text-preview/${encodeURIComponent(data.book.slug)}/${data.chapter.number}`
+					);
+					if (!res.ok) throw new Error(`status ${res.status}`);
+					const d = (await res.json()) as { text?: string };
+					if (d.text) {
+						const { marked } = await import('marked');
+						html = await marked(d.text, { async: true });
+					} else {
+						fetchError = m.reader_audio_error();
+					}
+				} catch {
+					fetchError = m.reader_fetching_chapter();
+				} finally {
+					fetchingContent = false;
 				}
-			} catch (e) {
-				fetchError = 'Could not fetch chapter content.';
-			} finally {
-				fetchingContent = false;
-			}
+			})();
 		}
+
+		return () => {
+			if (pollingTimer) clearTimeout(pollingTimer);
+		};
 	});
+
+	const wordCount = $derived(
+		html ? (html.replace(/<[^>]*>/g, '').match(/\S+/g)?.length ?? 0) : 0
+	);
 </script>
 
 <svelte:head>
-	<title>{data.chapter.title || `Chapter ${data.chapter.number}`} — {data.book.title} — libnovel</title>
+	<title>{data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })} — {data.book.title} — libnovel</title>
 </svelte:head>
 
 <!-- Top nav -->
 <div class="flex items-center justify-between mb-6 gap-4">
 	<a
-		href="/books/{data.book.slug}"
-		class="text-zinc-400 hover:text-zinc-100 text-sm flex items-center gap-1 transition-colors"
+		href="/books/{data.book.slug}/chapters"
+		class="text-(--color-muted) hover:text-(--color-text) text-sm flex items-center gap-1 transition-colors"
 	>
 		<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
 		</svg>
-		Chapters
+		{m.reader_back_to_chapters()}
 	</a>
 
 	<div class="flex gap-2">
 		{#if data.prev}
 			<a
 				href="/books/{data.book.slug}/chapters/{data.prev}"
-				class="px-3 py-1.5 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors"
+				class="px-3 py-1.5 rounded bg-(--color-surface-3) text-(--color-text) text-sm hover:bg-(--color-surface-3) transition-colors"
 			>
-				&larr; Ch.{data.prev}
+				&larr; {m.reader_chapter_n({ n: String(data.prev) })}
 			</a>
 		{/if}
 		{#if data.next}
 			<a
 				href="/books/{data.book.slug}/chapters/{data.next}"
-				class="px-3 py-1.5 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
+				class="px-3 py-1.5 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors"
 			>
-				Ch.{data.next} &rarr;
+				{m.reader_chapter_n({ n: String(data.next) })} &rarr;
 			</a>
 		{/if}
 	</div>
 </div>
 
 <!-- Chapter heading -->
-<div class="mb-6">
-	<h1 class="text-xl font-bold text-zinc-100">
-		{data.chapter.title || `Chapter ${data.chapter.number}`}
+<div class="mb-4">
+	<h1 class="text-xl font-bold text-(--color-text)">
+		{data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
 	</h1>
 	{#if wordCount > 0}
-		<p class="text-zinc-600 text-xs mt-1">{wordCount.toLocaleString()} words</p>
+		<p class="text-(--color-muted) text-xs mt-1">{m.reader_words({ n: wordCount.toLocaleString() })}</p>
 	{/if}
 </div>
 
+<!-- Language switcher (not shown for preview chapters) -->
+{#if !data.isPreview}
+<div class="flex items-center gap-2 mb-6 flex-wrap">
+	<span class="text-(--color-muted) text-xs">Read in:</span>
+
+	<!-- English (original) -->
+	<a
+		href={langUrl('')}
+		class="px-2 py-0.5 rounded text-xs font-medium transition-colors {currentLang() === '' ? 'bg-(--color-brand) text-(--color-surface)' : 'bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'}"
+	>
+		EN
+	</a>
+
+	{#each SUPPORTED_LANGS as { code, label }}
+		{#if currentLang() === code && (translationStatus === 'pending' || translationStatus === 'running')}
+			<!-- Spinning indicator while translating -->
+			<span class="flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted)">
+				<svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+				</svg>
+				{label}
+			</span>
+		{:else if currentLang() === code}
+			<!-- Active translated lang -->
+			<a
+				href={langUrl(code)}
+				class="px-2 py-0.5 rounded text-xs font-medium bg-(--color-brand) text-(--color-surface)"
+			>{label}</a>
+		{:else}
+			<!-- Inactive lang: click to request/navigate -->
+			<button
+				onclick={() => requestTranslation(code)}
+				disabled={translatingLang !== '' && translatingLang !== code && (translationStatus === 'pending' || translationStatus === 'running')}
+				class="px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text) transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+			>{label}</button>
+		{/if}
+	{/each}
+</div>
+{/if}
+
 <!-- Audio player -->
 {#if !data.isPreview}
 <AudioPlayer
 	slug={data.book.slug}
 	chapter={data.chapter.number}
-	chapterTitle={data.chapter.title || `Chapter ${data.chapter.number}`}
+	chapterTitle={data.chapter.title || m.reader_chapter_n({ n: String(data.chapter.number) })}
 	bookTitle={data.book.title}
 	cover={data.book.cover}
 	nextChapter={data.next}
@@ -120,23 +232,23 @@
 	voices={data.voices}
 />
 {:else}
-<div class="mb-6 px-4 py-3 rounded bg-zinc-800/60 border border-zinc-700 text-zinc-500 text-sm">
-	Preview chapter — audio not available for books outside the library.
+<div class="mb-6 px-4 py-3 rounded bg-(--color-surface-2)/60 border border-(--color-border) text-(--color-muted) text-sm">
+	{m.reader_preview_audio_notice()}
 </div>
 {/if}
 
 <!-- Chapter content -->
 {#if fetchingContent}
-	<div class="flex flex-col items-center gap-3 py-16 text-zinc-500 text-sm">
+	<div class="flex flex-col items-center gap-3 py-16 text-(--color-muted) text-sm">
 		<svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
 			<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 			<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 		</svg>
-		Fetching chapter…
+		{m.reader_fetching_chapter()}
 	</div>
 {:else if !html}
-	<div class="text-zinc-500 text-center py-16">
-		<p>{fetchError || 'Chapter content not available.'}</p>
+	<div class="text-(--color-muted) text-center py-16">
+		<p>{fetchError || m.reader_audio_error()}</p>
 	</div>
 {:else}
 	<div class="prose-chapter mt-8">
@@ -145,13 +257,13 @@
 {/if}
 
 <!-- Bottom nav -->
-<div class="flex justify-between mt-12 pt-6 border-t border-zinc-800 gap-4">
+<div class="flex justify-between mt-12 pt-6 border-t border-(--color-border) gap-4">
 	{#if data.prev}
 		<a
 			href="/books/{data.book.slug}/chapters/{data.prev}"
-			class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors"
+			class="px-4 py-2 rounded bg-(--color-surface-3) text-(--color-text) text-sm hover:bg-(--color-surface-3) transition-colors"
 		>
-			&larr; Previous chapter
+			&larr; {m.reader_prev_chapter()}
 		</a>
 	{:else}
 		<div></div>
@@ -159,9 +271,9 @@
 	{#if data.next}
 		<a
 			href="/books/{data.book.slug}/chapters/{data.next}"
-			class="px-4 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
+			class="px-4 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors"
 		>
-			Next chapter &rarr;
+			{m.reader_next_chapter()} &rarr;
 		</a>
 	{/if}
 </div>

ui/src/routes/catalogue/+page.svelte

@@ -5,17 +5,15 @@
 	import { untrack } from 'svelte';
 	import type { PageData, ActionData } from './$types';
 	import type { NovelListing } from './+page.server';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
 	// ── Local filter state (mirrors URL params) ──────────────────────────────
-	// These are separate from data.* so we can bind them to selects and keep
-	// the DOM in sync. They sync back from data whenever a navigation completes.
 	let filterSort = $state(untrack(() => data.sort));
 	let filterGenre = $state(untrack(() => data.genre));
 	let filterStatus = $state(untrack(() => data.status));
 
-	// Keep local state in sync whenever SvelteKit re-runs the load (URL changed).
 	$effect(() => {
 		filterSort = data.sort;
 		filterGenre = data.genre;
@@ -31,10 +29,8 @@
 		goto(`/catalogue?${params.toString()}`);
 	}
 
-	// Track which novel card is currently being navigated to
 	let loadingSlug = $state<string | null>(null);
 
-	// Clear loading state when navigation ends (success or failure)
 	$effect(() => {
 		if (!navigating) loadingSlug = null;
 	});
@@ -44,15 +40,11 @@
 	}
 
 	// ── Infinite scroll state ────────────────────────────────────────────────
-	// novels is the accumulated list across all fetched pages.
-	// Seeded from SSR page 1; new pages are appended client-side.
 	let novels = $state<NovelListing[]>(untrack(() => data.novels));
 	let currentPage = $state(untrack(() => data.page));
 	let hasNext = $state(untrack(() => data.hasNext));
 	let loadingMore = $state(false);
 
-	// A key derived from the active filters — when it changes, reset the list
-	// to the fresh SSR data (SvelteKit already re-ran the server load).
 	let filterKey = $derived(`${data.sort}|${data.genre}|${data.status}|${data.searchQuery}`);
 	let lastFilterKey = '';
 	$effect(() => {
@@ -66,7 +58,6 @@
 
 	async function loadNextPage() {
 		if (loadingMore || !hasNext) return;
-		// Infinite scroll only applies in browse mode (not rank, not search)
 		if (data.sort === 'rank' || data.searchQuery) return;
 
 		loadingMore = true;
@@ -106,44 +97,38 @@
 		return () => observer.disconnect();
 	});
 
-	// Filter options — built from Meilisearch facet distribution when available,
-	// with a hardcoded fallback list for when Meilisearch is not yet populated.
 	const FALLBACK_GENRES = [
 		'action', 'adventure', 'comedy', 'drama', 'fantasy', 'harem',
 		'historical', 'horror', 'isekai', 'martial-arts', 'mystery',
 		'psychological', 'romance', 'sci-fi', 'system', 'xianxia'
 	];
 	const genres = $derived([
-		{ value: 'all', label: 'All Genres' },
+		{ value: 'all', label: m.catalogue_genre_all() },
 		...((data.genres?.length ? data.genres : FALLBACK_GENRES).map((g: string) => ({
 			value: g,
 			label: g.charAt(0).toUpperCase() + g.slice(1).replace(/-/g, ' ')
 		})))
 	]);
-	const sorts = [
-		{ value: 'popular', label: 'Popular' },
-		{ value: 'new', label: 'New' },
-		{ value: 'update', label: 'Updated' },
-		{ value: 'top-rated', label: 'Top Rated' },
-		{ value: 'rank', label: 'Ranking' }
-	];
+	const sorts = $derived([
+		{ value: 'popular', label: m.catalogue_sort_popular() },
+		{ value: 'new', label: m.catalogue_sort_new() },
+		{ value: 'update', label: m.catalogue_sort_updated() },
+		{ value: 'top-rated', label: m.catalogue_sort_top_rated() },
+		{ value: 'rank', label: m.catalogue_sort_rank() }
+	]);
 	const FALLBACK_STATUSES = ['ongoing', 'completed'];
 	const statuses = $derived([
-		{ value: 'all', label: 'All' },
+		{ value: 'all', label: m.catalogue_status_all() },
 		...((data.statuses?.length ? data.statuses : FALLBACK_STATUSES).map((s: string) => ({
 			value: s,
 			label: s.charAt(0).toUpperCase() + s.slice(1)
 		})))
 	]);
 
-	// When sort=rank the ranking API is used — pagination + genre/status filters
-	// don't apply to that endpoint.
 	const isRankView = $derived(data.sort === 'rank');
 	const isSearchView = $derived(!!data.searchQuery);
 
-
 	// View toggle: 'grid' | 'list'. Persisted in localStorage.
-	// Rank view always uses list; otherwise restore saved preference (default: grid).
 	const VIEW_KEY = 'libnovel:browse:view';
 	function savedView(): 'grid' | 'list' {
 		if (data.sort === 'rank') return 'list';
@@ -154,7 +139,6 @@
 		return 'grid';
 	}
 	let view = $state<'grid' | 'list'>(savedView());
-	// Keep view in sync when sort changes via filter form, and persist changes.
 	$effect(() => {
 		if (data.sort === 'rank' && view === 'grid') view = 'list';
 	});
@@ -194,7 +178,6 @@
 	// ── Collapsible filters panel ────────────────────────────────────────────
 	let filtersOpen = $state(false);
 
-	// Human-readable summary of active filters shown on the toggle button
 	const filterSummary = $derived((() => {
 		const parts: string[] = [];
 		const sortLabel = sorts.find((s) => s.value === data.sort)?.label ?? data.sort;
@@ -210,7 +193,6 @@
 		return parts.join(' · ');
 	})());
 
-	// Whether any non-default filter is active (used to show a dot indicator)
 	const hasActiveFilters = $derived(
 		(data.genre && data.genre !== 'all') ||
 		(data.status && data.status !== 'all') ||
@@ -229,26 +211,26 @@
 </script>
 
 <svelte:head>
-	<title>Catalogue — libnovel</title>
+	<title>{m.catalogue_page_title()}</title>
 </svelte:head>
 
 <!-- Header -->
 <div class="mb-4">
-	<h1 class="text-2xl font-bold text-zinc-100">Catalogue</h1>
-	<p class="text-zinc-400 text-sm mt-1">
+	<h1 class="text-2xl font-bold text-(--color-text)">{m.catalogue_heading()}</h1>
+	<p class="text-(--color-muted) text-sm mt-1">
 		{#if isSearchView}
-			{novels.length} result{novels.length !== 1 ? 's' : ''} for "<span class="text-zinc-200">{data.searchQuery}</span>"
+			{m.catalogue_search_results({ n: String(novels.length), s: novels.length !== 1 ? 's' : '', q: data.searchQuery })}
 			{#if data.searchLocalCount > 0 || data.searchRemoteCount > 0}
-				<span class="text-zinc-500 text-xs ml-1">({data.searchLocalCount} local, {data.searchRemoteCount} from novelfire)</span>
+				<span class="text-(--color-muted) text-xs ml-1">{m.catalogue_search_local_count({ local: String(data.searchLocalCount), remote: String(data.searchRemoteCount) })}</span>
 			{/if}
 		{:else if isRankView}
 			{#if novels.length > 0}
-				{novels.length} novels ranked from last catalogue scrape
+				{m.catalogue_rank_ranked({ n: String(novels.length) })}
 			{:else}
-				No ranking data — run a full catalogue scrape to populate
+				{m.catalogue_rank_no_data_body()}
 			{/if}
 		{:else}
-			Browse novels from novelfire.net
+			{m.catalogue_browse_source()}
 		{/if}
 	</p>
 </div>
@@ -257,15 +239,15 @@
 {#if form}
 	{#if form.status === 'queued'}
 		<div class="mb-4 px-4 py-3 rounded bg-emerald-900/40 border border-emerald-700 text-emerald-300 text-sm">
-			Full catalogue scrape queued. Library and ranking will update as books are processed.
+			{m.catalogue_scrape_queued_flash()}
 		</div>
 	{:else if form.status === 'busy'}
 		<div class="mb-4 px-4 py-3 rounded bg-yellow-900/40 border border-yellow-700 text-yellow-300 text-sm">
-			A scrape job is already running. Check back once it finishes.
+			{m.catalogue_scrape_busy_flash()}
 		</div>
 	{:else if form.status === 'error'}
-		<div class="mb-4 px-4 py-3 rounded bg-red-900/40 border border-red-700 text-red-300 text-sm">
-			Failed to queue scrape. Check that the scraper service is reachable.
+		<div class="mb-4 px-4 py-3 rounded bg-(--color-danger)/10 border border-(--color-danger) text-(--color-danger) text-sm">
+			{m.catalogue_scrape_error_flash()}
 		</div>
 	{/if}
 {/if}
@@ -278,21 +260,21 @@
 			type="search"
 			name="q"
 			value={data.searchQuery}
-			placeholder="Search…"
-			class="flex-1 min-w-0 bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 placeholder-zinc-500"
+			placeholder={m.catalogue_search_placeholder()}
+			class="flex-1 min-w-0 bg-(--color-surface-2) border border-(--color-border) text-(--color-text) text-sm rounded px-3 py-2 focus:outline-none focus:border-(--color-brand) placeholder-zinc-500"
 		/>
 		<button
 			type="submit"
-			class="px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors whitespace-nowrap"
+			class="px-3 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors whitespace-nowrap"
 		>
-			Search
+			{m.catalogue_search_button()}
 		</button>
 		{#if data.searchQuery}
 			<a
 				href="/catalogue"
-				class="px-3 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors whitespace-nowrap"
+				class="px-3 py-2 rounded bg-(--color-surface-3) text-(--color-text) text-sm hover:bg-(--color-surface-3) transition-colors whitespace-nowrap"
 			>
-				Clear
+				{m.catalogue_clear_filters()}
 			</a>
 		{/if}
 	</form>
@@ -304,28 +286,27 @@
 		aria-expanded={filtersOpen}
 		class="relative flex items-center gap-1.5 px-3 py-2 rounded border text-sm font-medium transition-colors whitespace-nowrap
 			{filtersOpen
-				? 'bg-zinc-700 border-zinc-500 text-zinc-100'
-				: 'bg-zinc-800 border-zinc-700 text-zinc-300 hover:border-zinc-500 hover:text-zinc-100'}"
+				? 'bg-(--color-surface-3) border-zinc-500 text-(--color-text)'
+				: 'bg-(--color-surface-2) border-(--color-border) text-(--color-text) hover:border-zinc-500 hover:text-(--color-text)'}"
 	>
 		<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
 				d="M3 4h18M7 8h10M11 12h2M9 16h6" />
 		</svg>
-		<span class="hidden sm:inline">Filters</span>
-		<!-- Active indicator dot -->
+		<span class="hidden sm:inline">{m.catalogue_filters_label()}</span>
 		{#if hasActiveFilters}
-			<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-amber-400"></span>
+			<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-(--color-brand)"></span>
 		{/if}
 	</button>
 
 	<!-- View toggle -->
-	<div class="flex items-center bg-zinc-800 border border-zinc-700 rounded overflow-hidden shrink-0">
+	<div class="flex items-center bg-(--color-surface-2) border border-(--color-border) rounded overflow-hidden shrink-0">
 		<button
 			onclick={() => (view = 'grid')}
-			title="Grid view"
+			title={m.catalogue_view_grid()}
 			class="px-2.5 py-2 transition-colors {view === 'grid'
-				? 'bg-zinc-600 text-zinc-100'
-				: 'text-zinc-400 hover:text-zinc-200'}"
+				? 'bg-(--color-surface-3) text-(--color-text)'
+				: 'text-(--color-muted) hover:text-(--color-text)'}"
 		>
 			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -334,10 +315,10 @@
 		</button>
 		<button
 			onclick={() => (view = 'list')}
-			title="List view"
+			title={m.catalogue_view_list()}
 			class="px-2.5 py-2 transition-colors {view === 'list'
-				? 'bg-zinc-600 text-zinc-100'
-				: 'text-zinc-400 hover:text-zinc-200'}"
+				? 'bg-(--color-surface-3) text-(--color-text)'
+				: 'text-(--color-muted) hover:text-(--color-text)'}"
 		>
 			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -362,9 +343,9 @@
 			<button
 				type="submit"
 				disabled={refreshing}
-				class="hidden sm:block px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+				class="hidden sm:block px-3 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
 			>
-				{refreshing ? 'Queuing…' : 'Refresh'}
+				{refreshing ? m.catalogue_refreshing() : m.catalogue_refresh()}
 			</button>
 		</form>
 	{/if}
@@ -372,15 +353,15 @@
 
 <!-- Active filter summary (shown when panel is closed and filters are active) -->
 {#if !filtersOpen && hasActiveFilters}
-	<p class="text-xs text-zinc-500 mb-3">
-		<span class="text-zinc-400">{filterSummary}</span>
-		<a href="/catalogue" class="ml-2 text-zinc-600 hover:text-zinc-400 underline underline-offset-2">clear</a>
+	<p class="text-xs text-(--color-muted) mb-3">
+		<span class="text-(--color-muted)">{filterSummary}</span>
+		<a href="/catalogue" class="ml-2 text-(--color-muted) hover:text-(--color-muted) underline underline-offset-2">{m.catalogue_clear_filters().toLowerCase()}</a>
 	</p>
 {/if}
 
 <!-- Collapsible filter panel -->
 {#if filtersOpen}
-	<!-- Admin refresh (mobile only — outside filter form to avoid nested <form>) -->
+	<!-- Admin refresh (mobile only) -->
 	{#if data.isAdmin}
 		<form
 			method="POST"
@@ -397,24 +378,24 @@
 			<button
 				type="submit"
 				disabled={refreshing}
-				class="w-full px-3 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+				class="w-full px-3 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
 			>
-				{refreshing ? 'Queuing…' : 'Refresh catalogue'}
+				{refreshing ? m.catalogue_refreshing() : m.catalogue_refresh_mobile()}
 			</button>
 		</form>
 	{/if}
 
-	<form method="GET" action="/catalogue" class="mb-4 p-3 rounded-lg bg-zinc-800/60 border border-zinc-700 flex flex-col gap-3">
+	<form method="GET" action="/catalogue" class="mb-4 p-3 rounded-lg bg-(--color-surface-2)/60 border border-(--color-border) flex flex-col gap-3">
 		<input type="hidden" name="page" value="1" />
 
 		<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
 			<div class="flex flex-col gap-1">
-				<label for="filter-sort" class="text-xs text-zinc-500 uppercase tracking-wide">Sort</label>
+				<label for="filter-sort" class="text-xs text-(--color-muted) uppercase tracking-wide">{m.catalogue_filter_sort()}</label>
 				<select
 					id="filter-sort"
 					name="sort"
 					bind:value={filterSort}
-					class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 w-full"
+					class="bg-(--color-surface) border border-(--color-border) text-(--color-text) text-sm rounded px-3 py-2 focus:outline-none focus:border-(--color-brand) w-full"
 				>
 					{#each sorts as s}
 						<option value={s.value} selected={s.value === filterSort}>{s.label}</option>
@@ -423,13 +404,13 @@
 			</div>
 
 			<div class="flex flex-col gap-1">
-				<label for="filter-genre" class="text-xs text-zinc-500 uppercase tracking-wide">Genre</label>
+				<label for="filter-genre" class="text-xs text-(--color-muted) uppercase tracking-wide">{m.catalogue_filter_genre()}</label>
 				<select
 					id="filter-genre"
 					name="genre"
 					bind:value={filterGenre}
 					disabled={isRankView}
-					class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
+					class="bg-(--color-surface) border border-(--color-border) text-(--color-text) text-sm rounded px-3 py-2 focus:outline-none focus:border-(--color-brand) disabled:opacity-40 disabled:cursor-not-allowed w-full"
 				>
 					{#each genres as g}
 						<option value={g.value} selected={g.value === filterGenre}>{g.label}</option>
@@ -438,13 +419,13 @@
 			</div>
 
 			<div class="flex flex-col gap-1">
-				<label for="filter-status" class="text-xs text-zinc-500 uppercase tracking-wide">Status</label>
+				<label for="filter-status" class="text-xs text-(--color-muted) uppercase tracking-wide">{m.catalogue_filter_status()}</label>
 				<select
 					id="filter-status"
 					name="status"
 					bind:value={filterStatus}
 					disabled={isRankView}
-					class="bg-zinc-900 border border-zinc-700 text-zinc-200 text-sm rounded px-3 py-2 focus:outline-none focus:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed w-full"
+					class="bg-(--color-surface) border border-(--color-border) text-(--color-text) text-sm rounded px-3 py-2 focus:outline-none focus:border-(--color-brand) disabled:opacity-40 disabled:cursor-not-allowed w-full"
 				>
 					{#each statuses as st}
 						<option value={st.value} selected={st.value === filterStatus}>{st.label}</option>
@@ -454,19 +435,19 @@
 		</div>
 
 		{#if isRankView}
-			<p class="text-xs text-zinc-500 italic">Genre &amp; status filters apply to Browse only</p>
+			<p class="text-xs text-(--color-muted) italic">{m.catalogue_filter_rank_note()}</p>
 		{/if}
 
 		<div class="flex gap-2 justify-end">
-			<a href="/catalogue" class="px-4 py-2 rounded bg-zinc-700 text-zinc-300 text-sm hover:bg-zinc-600 transition-colors">
-				Reset
+			<a href="/catalogue" class="px-4 py-2 rounded bg-(--color-surface-3) text-(--color-text) text-sm hover:bg-(--color-surface-3) transition-colors">
+				{m.catalogue_reset()}
 			</a>
 			<button
 				type="button"
 				onclick={applyFilters}
-				class="px-4 py-2 rounded bg-amber-400 text-zinc-900 text-sm font-semibold hover:bg-amber-300 transition-colors"
+				class="px-4 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors"
 			>
-				Apply
+				{m.catalogue_apply()}
 			</button>
 		</div>
 	</form>
@@ -474,19 +455,19 @@
 
 <!-- Content -->
 {#if novels.length === 0}
-	<div class="text-center py-20 text-zinc-500">
-		<p class="text-lg">{isSearchView ? 'No results found.' : isRankView ? 'No ranking data.' : 'No novels found.'}</p>
+	<div class="text-center py-20 text-(--color-muted)">
+		<p class="text-lg">{isSearchView ? m.catalogue_no_results_search() : isRankView ? m.catalogue_rank_no_data() : m.catalogue_no_results()}</p>
 		<p class="text-sm mt-2">
 			{#if isSearchView}
-				Try a different search term.
+				{m.catalogue_no_results_try()}
 			{:else if isRankView}
 				{#if data.isAdmin}
-					Click <span class="text-amber-400">Refresh catalogue</span> above to trigger a full catalogue scrape.
+					{m.catalogue_rank_run_scrape_admin()}
 				{:else}
-					Ask an admin to run a catalogue scrape.
+					{m.catalogue_rank_run_scrape_user()}
 				{/if}
 			{:else}
-				Try different filters or check back later.
+				{m.catalogue_no_results_filters()}
 			{/if}
 		</p>
 	</div>
@@ -499,11 +480,11 @@
 			<a
 				href="/books/{novel.slug}"
 				onclick={() => handleNovelClick(novel.slug)}
-				class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 border transition-colors relative
-					{isLoading ? 'border-amber-400/60' : 'border-zinc-700 hover:border-zinc-500'}"
+				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) border transition-colors relative
+					{isLoading ? 'border-(--color-brand)/60' : 'border-(--color-border) hover:border-zinc-500'}"
 			>
 				<!-- Cover -->
-				<div class="aspect-[2/3] bg-zinc-900 overflow-hidden relative">
+				<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden relative">
 					{#if novel.cover}
 						<img
 							src={novel.cover}
@@ -512,7 +493,7 @@
 							loading="lazy"
 						/>
 					{:else}
-						<div class="w-full h-full flex items-center justify-center text-zinc-600">
+						<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
 							<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
 									d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -520,19 +501,19 @@
 						</div>
 					{/if}
 					{#if novel.rank}
-						<span class="absolute top-1 left-1 text-xs px-1.5 py-0.5 rounded bg-zinc-900/80 text-amber-400 font-bold">
+						<span class="absolute top-1 left-1 text-xs px-1.5 py-0.5 rounded bg-(--color-surface)/80 text-(--color-brand) font-bold">
 							{novel.rank}
 						</span>
 					{/if}
 					{#if novel.rating}
-						<span class="absolute top-1 right-1 text-xs px-1.5 py-0.5 rounded bg-zinc-900/80 text-zinc-300">
+						<span class="absolute top-1 right-1 text-xs px-1.5 py-0.5 rounded bg-(--color-surface)/80 text-(--color-text)">
 							{novel.rating}
 						</span>
 					{/if}
 					<!-- Loading overlay -->
 					{#if isLoading}
-						<div class="absolute inset-0 bg-zinc-900/70 flex items-center justify-center">
-							<svg class="w-8 h-8 animate-spin text-amber-400" fill="none" viewBox="0 0 24 24">
+						<div class="absolute inset-0 bg-(--color-surface)/70 flex items-center justify-center">
+							<svg class="w-8 h-8 animate-spin text-(--color-brand)" fill="none" viewBox="0 0 24 24">
 								<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 								<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 							</svg>
@@ -542,31 +523,31 @@
 
 				<!-- Info -->
 				<div class="p-2 flex flex-col gap-1 flex-1">
-					<h2 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{novel.title}</h2>
+					<h2 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{novel.title}</h2>
 					{#if novel.author}
-						<p class="text-xs text-zinc-500 truncate">{novel.author}</p>
+						<p class="text-xs text-(--color-muted) truncate">{novel.author}</p>
 					{:else if novel.chapters}
-						<p class="text-xs text-zinc-500 truncate">{novel.chapters}</p>
+						<p class="text-xs text-(--color-muted) truncate">{novel.chapters}</p>
 					{/if}
 
 					<!-- Admin: per-novel scrape button -->
 					{#if data.isAdmin && novel.url}
 						<div class="mt-auto pt-1">
 							{#if scrapeResult[novel.slug] === 'queued'}
-								<span class="text-xs text-emerald-400 font-medium">Queued</span>
+								<span class="text-xs text-emerald-400 font-medium">{m.catalogue_scrape_queued_badge()}</span>
 							{:else if scrapeResult[novel.slug] === 'busy'}
-								<span class="text-xs text-yellow-400 font-medium">Scraper busy</span>
+								<span class="text-xs text-yellow-400 font-medium">{m.catalogue_scrape_busy_badge()}</span>
 							{:else if scrapeResult[novel.slug] === 'forbidden'}
-								<span class="text-xs text-red-400 font-medium">Forbidden</span>
+								<span class="text-xs text-(--color-danger) font-medium">{m.catalogue_scrape_forbidden_badge()}</span>
 							{:else if scrapeResult[novel.slug] === 'error'}
-								<span class="text-xs text-red-400 font-medium">Error</span>
+								<span class="text-xs text-(--color-danger) font-medium">{m.common_error()}</span>
 							{:else}
 								<button
 									onclick={(e) => { e.preventDefault(); scrapeNovel(novel); }}
 									disabled={scraping[novel.slug]}
-									class="w-full text-xs px-2 py-1 rounded bg-amber-500/20 text-amber-300 hover:bg-amber-500/40 transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-amber-500/30"
+									class="w-full text-xs px-2 py-1 rounded bg-amber-500/20 text-(--color-brand-dim) hover:bg-amber-500/40 transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-amber-500/30"
 								>
-									{scraping[novel.slug] ? 'Scraping…' : 'Scrape'}
+									{scraping[novel.slug] ? m.catalogue_scraping_novel() : m.catalogue_scrape_novel_button()}
 								</button>
 							{/if}
 						</div>
@@ -582,20 +563,20 @@
 		{#each novels as novel}
 			{@const isLoading = loadingSlug === novel.slug}
 			<div
-				class="flex items-center gap-4 bg-zinc-800 border rounded-lg px-4 py-3 transition-colors
-					{isLoading ? 'border-amber-400/60' : 'border-zinc-700 hover:border-zinc-500'}"
+				class="flex items-center gap-4 bg-(--color-surface-2) border rounded-lg px-4 py-3 transition-colors
+					{isLoading ? 'border-(--color-brand)/60' : 'border-(--color-border) hover:border-zinc-500'}"
 			>
 				<!-- Rank / index -->
 				{#if novel.rank}
-					<span class="text-amber-400 font-bold text-sm w-8 shrink-0 text-right">{novel.rank}</span>
+					<span class="text-(--color-brand) font-bold text-sm w-8 shrink-0 text-right">{novel.rank}</span>
 				{/if}
 
 				<!-- Cover thumbnail -->
-				<div class="w-10 h-14 shrink-0 rounded overflow-hidden bg-zinc-900 relative">
+				<div class="w-10 h-14 shrink-0 rounded overflow-hidden bg-(--color-surface) relative">
 					{#if novel.cover}
 						<img src={novel.cover} alt={novel.title} class="w-full h-full object-cover" loading="lazy" />
 					{:else}
-						<div class="w-full h-full flex items-center justify-center text-zinc-600">
+						<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
 							<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
 									d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -603,8 +584,8 @@
 						</div>
 					{/if}
 					{#if isLoading}
-						<div class="absolute inset-0 bg-zinc-900/70 flex items-center justify-center">
-							<svg class="w-4 h-4 animate-spin text-amber-400" fill="none" viewBox="0 0 24 24">
+						<div class="absolute inset-0 bg-(--color-surface)/70 flex items-center justify-center">
+							<svg class="w-4 h-4 animate-spin text-(--color-brand)" fill="none" viewBox="0 0 24 24">
 								<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 								<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 							</svg>
@@ -619,28 +600,28 @@
 							href="/books/{novel.slug}"
 							onclick={() => handleNovelClick(novel.slug)}
 							class="text-sm font-semibold transition-colors line-clamp-1
-								{isLoading ? 'text-amber-400' : 'text-zinc-100 hover:text-amber-400'}"
+								{isLoading ? 'text-(--color-brand)' : 'text-(--color-text) hover:text-(--color-brand)'}"
 						>
 							{novel.title}
 						</a>
 					{:else}
-						<span class="text-sm font-semibold text-zinc-100 line-clamp-1">{novel.title}</span>
+						<span class="text-sm font-semibold text-(--color-text) line-clamp-1">{novel.title}</span>
 					{/if}
 					<div class="flex items-center gap-2 mt-0.5 flex-wrap">
 						{#if novel.author}
-							<span class="text-xs text-zinc-400">{novel.author}</span>
+							<span class="text-xs text-(--color-muted)">{novel.author}</span>
 						{/if}
 						{#if novel.status}
-							<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-700 text-zinc-300">{novel.status}</span>
+							<span class="text-xs px-1.5 py-0.5 rounded bg-(--color-surface-3) text-(--color-text)">{novel.status}</span>
 						{:else if novel.chapters}
-							<span class="text-xs text-zinc-500">{novel.chapters}</span>
+							<span class="text-xs text-(--color-muted)">{novel.chapters}</span>
 						{/if}
 						{#if novel.rating}
-							<span class="text-xs px-1.5 py-0.5 rounded bg-zinc-700 text-zinc-400">★ {novel.rating}</span>
+							<span class="text-xs px-1.5 py-0.5 rounded bg-(--color-surface-3) text-(--color-muted)">★ {novel.rating}</span>
 						{/if}
 						{#if novel.genres?.length}
 							{#each novel.genres.slice(0, 3) as genre}
-								<span class="text-xs px-1 py-0.5 rounded bg-zinc-900 text-zinc-500">{genre}</span>
+								<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
 							{/each}
 						{/if}
 					</div>
@@ -650,18 +631,18 @@
 				{#if data.isAdmin && novel.url}
 					<div class="shrink-0">
 						{#if scrapeResult[novel.slug] === 'queued'}
-							<span class="text-xs text-emerald-400 font-medium">Queued</span>
+							<span class="text-xs text-emerald-400 font-medium">{m.catalogue_scrape_queued_badge()}</span>
 						{:else if scrapeResult[novel.slug] === 'busy'}
-							<span class="text-xs text-yellow-400 font-medium">Busy</span>
+							<span class="text-xs text-yellow-400 font-medium">{m.catalogue_scrape_busy_list()}</span>
 						{:else if scrapeResult[novel.slug] === 'error'}
-							<span class="text-xs text-red-400 font-medium">Error</span>
+							<span class="text-xs text-(--color-danger) font-medium">{m.common_error()}</span>
 						{:else}
 							<button
 								onclick={() => scrapeNovel(novel)}
 								disabled={scraping[novel.slug]}
-								class="text-xs px-2.5 py-1 rounded bg-amber-500/20 text-amber-300 hover:bg-amber-500/40 transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-amber-500/30 whitespace-nowrap"
+								class="text-xs px-2.5 py-1 rounded bg-amber-500/20 text-(--color-brand-dim) hover:bg-amber-500/40 transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-amber-500/30 whitespace-nowrap"
 							>
-								{scraping[novel.slug] ? 'Scraping…' : 'Scrape'}
+								{scraping[novel.slug] ? m.catalogue_scraping_novel() : m.catalogue_scrape_novel_button()}
 							</button>
 						{/if}
 					</div>
@@ -673,7 +654,7 @@
 						href={novel.source_url ?? novel.url}
 						target="_blank"
 						rel="noopener noreferrer"
-						class="shrink-0 text-zinc-500 hover:text-zinc-300 transition-colors"
+						class="shrink-0 text-(--color-muted) hover:text-(--color-text) transition-colors"
 						title="Open on novelfire.net"
 					>
 						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -690,20 +671,18 @@
 <!-- Infinite scroll sentinel (browse mode only — not rank, not search) -->
 {#if !isRankView && !isSearchView}
 	{#if hasNext}
-		<!-- Invisible div watched by IntersectionObserver -->
 		<div bind:this={sentinel} class="h-px mt-8"></div>
 	{/if}
 
-	<!-- Loading spinner while fetching next page -->
 	{#if loadingMore}
 		<div class="flex justify-center py-8">
-			<svg class="w-6 h-6 animate-spin text-amber-400" fill="none" viewBox="0 0 24 24">
+			<svg class="w-6 h-6 animate-spin text-(--color-brand)" fill="none" viewBox="0 0 24 24">
 				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
 			</svg>
 		</div>
 	{:else if !hasNext && novels.length > 0}
-		<p class="text-center text-zinc-600 text-xs mt-8 pb-4">All novels loaded</p>
+		<p class="text-center text-(--color-muted) text-xs mt-8 pb-4">{m.catalogue_all_loaded()}</p>
 	{/if}
 {/if}
 
@@ -711,9 +690,9 @@
 {#if showScrollTop}
 	<button
 		onclick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-		class="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-zinc-800 border border-zinc-600 text-zinc-300 shadow-lg hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
-		title="Back to top"
-		aria-label="Scroll to top"
+		class="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-(--color-surface-2) border border-(--color-border) text-(--color-text) shadow-lg hover:bg-(--color-surface-3) hover:text-(--color-text) transition-colors"
+		title={m.catalogue_scroll_top()}
+		aria-label={m.catalogue_scroll_top()}
 	>
 		<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />

ui/src/routes/disclaimer/+page.svelte

@@ -1,14 +1,18 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages.js';
+</script>
+
 <svelte:head>
-	<title>Disclaimer — libnovel</title>
+	<title>{m.disclaimer_page_title()}</title>
 </svelte:head>
 
 <div class="max-w-2xl mx-auto py-10 px-4">
-	<h1 class="text-2xl font-bold text-zinc-100 mb-6">Disclaimer</h1>
+	<h1 class="text-2xl font-bold text-(--color-text) mb-6">Disclaimer</h1>
 
-	<div class="space-y-5 text-sm text-zinc-400 leading-relaxed">
+	<div class="space-y-5 text-sm text-(--color-muted) leading-relaxed">
 		<p>
 			libnovel is a personal reading tool that indexes and caches publicly accessible novel content
-			from third-party sources, primarily <a href="https://novelfire.net" target="_blank" rel="noopener noreferrer" class="text-amber-400 hover:text-amber-300 transition-colors">novelfire.net</a>.
+			from third-party sources, primarily <a href="https://novelfire.net" target="_blank" rel="noopener noreferrer" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">novelfire.net</a>.
 			It is not affiliated with, endorsed by, or in any way officially connected to those sources.
 		</p>
 
@@ -20,7 +24,7 @@
 
 		<p>
 			If you are a rights holder and believe your work is being used without authorisation, please
-			refer to our <a href="/dmca" class="text-amber-400 hover:text-amber-300 transition-colors">DMCA policy</a>
+			refer to our <a href="/dmca" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">DMCA policy</a>
 			for instructions on how to request removal.
 		</p>
 
@@ -29,6 +33,6 @@
 			content displayed. Use of this site is at your own risk.
 		</p>
 
-		<p class="text-zinc-600 text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
+		<p class="text-(--color-muted) text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
 	</div>
 </div>

ui/src/routes/dmca/+page.svelte

@@ -1,18 +1,22 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages.js';
+</script>
+
 <svelte:head>
-	<title>DMCA — libnovel</title>
+	<title>{m.dmca_page_title()}</title>
 </svelte:head>
 
 <div class="max-w-2xl mx-auto py-10 px-4">
-	<h1 class="text-2xl font-bold text-zinc-100 mb-6">DMCA Takedown Policy</h1>
+	<h1 class="text-2xl font-bold text-(--color-text) mb-6">DMCA Takedown Policy</h1>
 
-	<div class="prose-zinc space-y-5 text-sm text-zinc-400 leading-relaxed">
+	<div class="prose-zinc space-y-5 text-sm text-(--color-muted) leading-relaxed">
 		<p>
 			libnovel respects the intellectual property rights of authors, publishers, and other content
 			creators. If you believe that content available through this site infringes your copyright,
 			please send a written takedown notice to the contact address below.
 		</p>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Your notice must include</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Your notice must include</h2>
 		<ol class="list-decimal list-inside space-y-2 pl-1">
 			<li>Your full legal name and contact information (email address).</li>
 			<li>A description of the copyrighted work you claim has been infringed.</li>
@@ -28,18 +32,18 @@
 			<li>Your electronic or physical signature.</li>
 		</ol>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">How to submit</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">How to submit</h2>
 		<p>
-			Send your notice by email to <span class="text-zinc-300 font-medium">dmca@libnovel.local</span>.
+			Send your notice by email to <span class="text-(--color-text) font-medium">dmca@libnovel.local</span>.
 			We will review valid notices and remove or disable access to the identified content promptly.
 		</p>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Counter-notices</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Counter-notices</h2>
 		<p>
 			If you believe content was removed in error, you may submit a counter-notice to the same
 			address with the information required under 17 U.S.C. § 512(g)(3).
 		</p>
 
-		<p class="text-zinc-600 text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
+		<p class="text-(--color-muted) text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
 	</div>
 </div>

ui/src/routes/login/+page.svelte

@@ -1,29 +1,29 @@
 <script lang="ts">
-	import type { PageServerLoad } from './$types';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: { error?: string } } = $props();
 
-	const errorMessages: Record<string, string> = {
-		oauth_state: 'Sign-in was cancelled or expired. Please try again.',
-		oauth_failed: 'Could not connect to the provider. Please try again.',
-		oauth_no_email: 'Your account has no verified email address. Please add one and retry.'
-	};
+	const errorMessages = $derived<Record<string, string>>({
+		oauth_state: m.login_error_oauth_state(),
+		oauth_failed: m.login_error_oauth_failed(),
+		oauth_no_email: m.login_error_oauth_no_email()
+	});
 </script>
 
 <svelte:head>
-	<title>Sign in — libnovel</title>
+	<title>{m.login_page_title()}</title>
 </svelte:head>
 
 <div class="flex items-center justify-center min-h-[60vh]">
 	<div class="w-full max-w-sm">
 
 		<div class="text-center mb-8">
-			<h1 class="text-2xl font-bold text-zinc-100 mb-2">Sign in to libnovel</h1>
-			<p class="text-sm text-zinc-400">Choose a provider to continue</p>
+			<h1 class="text-2xl font-bold text-(--color-text) mb-2">{m.login_heading()}</h1>
+			<p class="text-sm text-(--color-muted)">{m.login_subheading()}</p>
 		</div>
 
 		{#if data.error && errorMessages[data.error]}
-			<div class="mb-6 rounded bg-red-900/40 border border-red-700 px-4 py-3 text-sm text-red-300">
+			<div class="mb-6 rounded bg-(--color-danger)/10 border border-(--color-danger) px-4 py-3 text-sm text-(--color-danger)">
 				{errorMessages[data.error]}
 			</div>
 		{/if}
@@ -33,8 +33,8 @@
 			<a
 				href="/auth/google"
 				class="flex items-center justify-center gap-3 w-full py-3 px-4 rounded-lg
-					bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm font-medium
-					hover:bg-zinc-700 hover:border-zinc-600 transition-colors"
+					bg-(--color-surface-2) border border-(--color-border) text-(--color-text) text-sm font-medium
+					hover:bg-(--color-surface-3) hover:border-zinc-600 transition-colors"
 			>
 				<svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
 					<path
@@ -54,17 +54,17 @@
 						fill="#EA4335"
 					/>
 				</svg>
-				Continue with Google
+				{m.login_continue_google()}
 			</a>
 
 			<!-- GitHub -->
 			<a
 				href="/auth/github"
 				class="flex items-center justify-center gap-3 w-full py-3 px-4 rounded-lg
-					bg-zinc-800 border border-zinc-700 text-zinc-100 text-sm font-medium
-					hover:bg-zinc-700 hover:border-zinc-600 transition-colors"
+					bg-(--color-surface-2) border border-(--color-border) text-(--color-text) text-sm font-medium
+					hover:bg-(--color-surface-3) hover:border-zinc-600 transition-colors"
 			>
-				<svg class="w-5 h-5 shrink-0 fill-zinc-100" viewBox="0 0 24 24" aria-hidden="true">
+				<svg class="w-5 h-5 shrink-0 fill-(--color-text)" viewBox="0 0 24 24" aria-hidden="true">
 					<path
 						d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483
 						0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466
@@ -76,12 +76,12 @@
 						2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"
 					/>
 				</svg>
-				Continue with GitHub
+				{m.login_continue_github()}
 			</a>
 		</div>
 
-		<p class="mt-8 text-center text-xs text-zinc-500">
-			By signing in you agree to our terms of service.
+		<p class="mt-8 text-center text-xs text-(--color-muted)">
+			{m.login_terms_notice()}
 		</p>
 	</div>
 </div>

ui/src/routes/privacy/+page.svelte

@@ -1,55 +1,59 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages.js';
+</script>
+
 <svelte:head>
-	<title>Privacy Policy — libnovel</title>
+	<title>{m.privacy_page_title()}</title>
 </svelte:head>
 
 <div class="max-w-2xl mx-auto py-10 px-4">
-	<h1 class="text-2xl font-bold text-zinc-100 mb-6">Privacy Policy</h1>
+	<h1 class="text-2xl font-bold text-(--color-text) mb-6">Privacy Policy</h1>
 
-	<div class="space-y-5 text-sm text-zinc-400 leading-relaxed">
+	<div class="space-y-5 text-sm text-(--color-muted) leading-relaxed">
 		<p>
 			This policy describes what limited data libnovel collects and how it is used.
 		</p>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Data we collect</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Data we collect</h2>
 		<ul class="list-disc list-inside space-y-2 pl-1">
 			<li>
-				<span class="text-zinc-300">Session cookies</span> — a short-lived cookie is set when you
+				<span class="text-(--color-text)">Session cookies</span> — a short-lived cookie is set when you
 				visit the site to track reading progress across pages. No account is required.
 			</li>
 			<li>
-				<span class="text-zinc-300">Account data (optional)</span> — if you create an account,
+				<span class="text-(--color-text)">Account data (optional)</span> — if you create an account,
 				we store your username and a hashed password. No email address is required.
 			</li>
 			<li>
-				<span class="text-zinc-300">Reading progress</span> — the last chapter you read for each
+				<span class="text-(--color-text)">Reading progress</span> — the last chapter you read for each
 				book is stored server-side, tied to your session or account, so you can resume reading.
 			</li>
 			<li>
-				<span class="text-zinc-300">Saved books</span> — books you explicitly bookmark are stored
+				<span class="text-(--color-text)">Saved books</span> — books you explicitly bookmark are stored
 				server-side tied to your session or account.
 			</li>
 		</ul>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">What we do not collect</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">What we do not collect</h2>
 		<ul class="list-disc list-inside space-y-2 pl-1">
 			<li>No email addresses (unless you choose to provide one).</li>
 			<li>No tracking pixels, analytics scripts, or third-party ad networks.</li>
 			<li>No selling or sharing of data with third parties.</li>
 		</ul>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Third-party content</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Third-party content</h2>
 		<p>
 			Cover images and chapter content are fetched from third-party sources (e.g.
-			<a href="https://novelfire.net" target="_blank" rel="noopener noreferrer" class="text-amber-400 hover:text-amber-300 transition-colors">novelfire.net</a>).
+			<a href="https://novelfire.net" target="_blank" rel="noopener noreferrer" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">novelfire.net</a>).
 			Your browser may make requests directly to those domains when loading images.
 		</p>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Data deletion</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Data deletion</h2>
 		<p>
 			You can delete your reading progress and saved books from your profile page at any time.
-			To request full account deletion, contact us via the <a href="/dmca" class="text-amber-400 hover:text-amber-300 transition-colors">contact address listed in our DMCA policy</a>.
+			To request full account deletion, contact us via the <a href="/dmca" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">contact address listed in our DMCA policy</a>.
 		</p>
 
-		<p class="text-zinc-600 text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
+		<p class="text-(--color-muted) text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
 	</div>
 </div>

ui/src/routes/profile/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import { invalidateAll } from '$app/navigation';
-	import { untrack } from 'svelte';
+	import { untrack, getContext } from 'svelte';
 	import type { PageData, ActionData } from './$types';
 	import { audioStore } from '$lib/audio.svelte';
 	import { browser } from '$app/environment';
 	import type { Voice } from '$lib/types';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -89,6 +90,16 @@
 		autoNext = audioStore.autoNext;
 	});
 
+	// ── Theme ────────────────────────────────────────────────────────────────────
+	const themeCtx = getContext<{ currentTheme: string; setTheme: (t: string) => void } | undefined>('theme');
+	let selectedTheme = $state(untrack(() => data.settings?.theme ?? themeCtx?.currentTheme ?? 'amber'));
+
+	const THEMES: { id: string; label: () => string; swatch: string }[] = [
+		{ id: 'amber', label: () => m.profile_theme_amber(),  swatch: '#f59e0b' },
+		{ id: 'slate', label: () => m.profile_theme_slate(),  swatch: '#818cf8' },
+		{ id: 'rose',  label: () => m.profile_theme_rose(),   swatch: '#fb7185' },
+	];
+
 	let settingsSaving = $state(false);
 	let settingsSaved = $state(false);
 
@@ -99,12 +110,14 @@
 			await fetch('/api/settings', {
 				method: 'PUT',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ autoNext, voice, speed })
+				body: JSON.stringify({ autoNext, voice, speed, theme: selectedTheme })
 			});
 			// Sync to audioStore so the player picks up changes immediately
 			audioStore.autoNext = autoNext;
 			audioStore.voice = voice;
 			audioStore.speed = speed;
+			// Apply theme live via context
+			themeCtx?.setTheme(selectedTheme);
 			await invalidateAll();
 			settingsSaved = true;
 			setTimeout(() => (settingsSaved = false), 2500);
@@ -192,7 +205,7 @@
 </script>
 
 <svelte:head>
-	<title>Profile — libnovel</title>
+	<title>{m.profile_page_title()}</title>
 </svelte:head>
 
 {#if cropFile && browser}
@@ -214,15 +227,15 @@
 		<div class="relative shrink-0">
 			<button
 				onclick={() => fileInput?.click()}
-				class="group relative w-20 h-20 rounded-full overflow-hidden ring-2 ring-zinc-600 hover:ring-amber-400 transition-all focus:outline-none focus:ring-amber-400"
-				title="Change profile picture"
+				class="group relative w-20 h-20 rounded-full overflow-hidden ring-2 ring-(--color-border) hover:ring-(--color-brand) transition-all focus:outline-none focus:ring-(--color-brand)"
+				title={m.profile_change_avatar()}
 				disabled={avatarUploading}
 			>
 				{#if avatarUrl}
 					<img src={avatarUrl} alt="Profile" class="w-full h-full object-cover" />
 				{:else}
-					<div class="w-full h-full bg-zinc-700 flex items-center justify-center">
-						<svg class="w-10 h-10 text-zinc-400" fill="currentColor" viewBox="0 0 24 24">
+					<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+						<svg class="w-10 h-10 text-(--color-muted)" fill="currentColor" viewBox="0 0 24 24">
 							<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
 						</svg>
 					</div>
@@ -252,34 +265,64 @@
 	</div>
 
 		<div>
-			<h1 class="text-2xl font-bold text-zinc-100">{data.user.username}</h1>
-			<p class="text-zinc-400 text-sm mt-0.5 capitalize">{data.user.role}</p>
+			<h1 class="text-2xl font-bold text-(--color-text)">{data.user.username}</h1>
+			<p class="text-(--color-muted) text-sm mt-0.5 capitalize">{data.user.role}</p>
 			{#if avatarError}
-				<p class="text-red-400 text-xs mt-1">{avatarError}</p>
+				<p class="text-(--color-danger) text-xs mt-1">{avatarError}</p>
 			{:else}
-				<p class="text-zinc-500 text-xs mt-1">Click avatar to change photo</p>
+				<p class="text-(--color-muted) text-xs mt-1">{m.profile_click_to_change()}</p>
 			{/if}
 		</div>
 	</div>
 
+	<!-- ── Appearance ────────────────────────────────────────────────────────── -->
+	<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-6 space-y-5">
+		<h2 class="text-lg font-semibold text-(--color-text)">{m.profile_appearance_heading()}</h2>
+
+		<div class="space-y-2">
+			<p class="text-sm font-medium text-(--color-text)">{m.profile_theme_label()}</p>
+			<div class="flex gap-3 flex-wrap">
+				{#each THEMES as t}
+					<button
+						type="button"
+						onclick={() => (selectedTheme = t.id)}
+						class="flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors
+							{selectedTheme === t.id
+								? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+								: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+						aria-pressed={selectedTheme === t.id}
+					>
+						<span class="w-3.5 h-3.5 rounded-full flex-shrink-0" style="background: {t.swatch};"></span>
+						{t.label()}
+						{#if selectedTheme === t.id}
+							<svg class="w-3 h-3 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+							</svg>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+	</section>
+
 	<!-- ── Reading settings ─────────────────────────────────────────────────── -->
-	<section class="bg-zinc-800 rounded-xl border border-zinc-700 p-6 space-y-5">
-		<h2 class="text-lg font-semibold text-zinc-100">Reading settings</h2>
+	<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-6 space-y-5">
+		<h2 class="text-lg font-semibold text-(--color-text)">{m.profile_reading_heading()}</h2>
 
 		<!-- Voice -->
 		<div class="space-y-1.5">
-			<label class="block text-sm font-medium text-zinc-300" for="voice-select">TTS voice</label>
+			<label class="block text-sm font-medium text-(--color-text)" for="voice-select">{m.profile_tts_voice()}</label>
 			{#if !voicesLoaded}
-				<div class="h-9 bg-zinc-700 rounded animate-pulse"></div>
+				<div class="h-9 bg-(--color-surface-3) rounded animate-pulse"></div>
 			{:else if voices.length === 0}
-				<select id="voice-select" disabled class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-400 text-sm cursor-not-allowed">
-					<option>No voices available</option>
+				<select id="voice-select" disabled class="w-full bg-(--color-surface-3) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-muted) text-sm cursor-not-allowed">
+					<option>{m.common_loading()}</option>
 				</select>
 			{:else}
 				<select
 					id="voice-select"
 					bind:value={voice}
-					class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400"
+					class="w-full bg-(--color-surface-3) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
 				>
 					{#if kokoroVoices.length > 0}
 						<optgroup label="Kokoro (GPU)">
@@ -301,8 +344,8 @@
 
 		<!-- Speed -->
 		<div class="space-y-1.5">
-			<label class="block text-sm font-medium text-zinc-300" for="speed-range">
-				Playback speed — <span class="text-amber-400 font-mono">{speed.toFixed(1)}x</span>
+			<label class="block text-sm font-medium text-(--color-text)" for="speed-range">
+				{m.profile_playback_speed({ speed: speed.toFixed(1) })}
 			</label>
 			<input
 				id="speed-range"
@@ -311,9 +354,10 @@
 				max="3.0"
 				step="0.1"
 				bind:value={speed}
-				class="w-full accent-amber-400"
+				style="accent-color: var(--color-brand);"
+				class="w-full"
 			/>
-			<div class="flex justify-between text-xs text-zinc-500">
+			<div class="flex justify-between text-xs text-(--color-muted)">
 				<span>0.5x</span>
 				<span>3.0x</span>
 			</div>
@@ -324,56 +368,57 @@
 			<input
 				type="checkbox"
 				bind:checked={autoNext}
-				class="w-4 h-4 rounded accent-amber-400"
+				style="accent-color: var(--color-brand);"
+				class="w-4 h-4 rounded"
 			/>
-			<span class="text-sm text-zinc-300">Auto-advance to next chapter</span>
+			<span class="text-sm text-(--color-text)">{m.profile_auto_advance()}</span>
 		</label>
 
 		<div class="flex items-center gap-3 pt-1">
 			<button
 				onclick={saveSettings}
 				disabled={settingsSaving}
-				class="px-4 py-2 rounded-lg bg-amber-400 text-zinc-900 font-semibold text-sm hover:bg-amber-300 transition-colors disabled:opacity-60"
+				class="px-4 py-2 rounded-lg bg-(--color-brand) text-(--color-surface) font-semibold text-sm hover:bg-(--color-brand-dim) transition-colors disabled:opacity-60"
 			>
-				{settingsSaving ? 'Saving…' : 'Save settings'}
+				{settingsSaving ? m.profile_saving() : m.profile_save_settings()}
 			</button>
 			{#if settingsSaved}
-				<span class="text-sm text-green-400">Saved!</span>
+				<span class="text-sm text-green-400">{m.profile_saved()}</span>
 			{/if}
 		</div>
 	</section>
 
 	<!-- ── Active sessions ──────────────────────────────────────────────────── -->
-	<section class="bg-zinc-800 rounded-xl border border-zinc-700 p-6 space-y-4">
-		<h2 class="text-lg font-semibold text-zinc-100">Active sessions</h2>
-		<p class="text-sm text-zinc-400">These are all devices currently signed into your account. End any session you don't recognise.</p>
+	<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-6 space-y-4">
+		<h2 class="text-lg font-semibold text-(--color-text)">{m.profile_sessions_heading()}</h2>
+		<p class="text-sm text-(--color-muted)">{m.profile_session_unrecognised()}</p>
 
 		{#if revokeError}
-			<div class="rounded-lg bg-red-900/40 border border-red-700 px-4 py-2.5 text-sm text-red-300">
+			<div class="rounded-lg bg-(--color-danger)/10 border border-(--color-danger) px-4 py-2.5 text-sm text-(--color-danger)">
 				{revokeError}
 			</div>
 		{/if}
 
 		{#if sessions.length === 0}
-			<p class="text-sm text-zinc-500 italic">No session records found. Sessions are tracked from the next login.</p>
+			<p class="text-sm text-(--color-muted) italic">{m.profile_no_sessions()}</p>
 		{:else}
 			<ul class="space-y-2">
 				{#each sessions as session (session.id)}
-					<li class="flex items-start justify-between gap-3 rounded-lg px-4 py-3 {session.is_current ? 'bg-amber-400/10 border border-amber-400/30' : 'bg-zinc-700/50 border border-zinc-600/50'}">
+					<li class="flex items-start justify-between gap-3 rounded-lg px-4 py-3 {session.is_current ? 'bg-(--color-brand)/10 border border-(--color-brand)/30' : 'bg-(--color-surface-3)/50 border border-(--color-border)/50'}">
 						<div class="min-w-0 space-y-0.5">
 							<div class="flex items-center gap-2 flex-wrap">
-								<span class="text-sm font-medium text-zinc-100 truncate">{parseUA(session.user_agent)}</span>
+								<span class="text-sm font-medium text-(--color-text) truncate">{parseUA(session.user_agent)}</span>
 								{#if session.is_current}
-									<span class="shrink-0 text-xs font-semibold px-1.5 py-0.5 rounded bg-amber-400/20 text-amber-300 border border-amber-400/40">This session</span>
+									<span class="shrink-0 text-xs font-semibold px-1.5 py-0.5 rounded bg-(--color-brand)/20 text-(--color-brand-dim) border border-(--color-brand)/40">{m.profile_session_this()}</span>
 								{/if}
 							</div>
 							{#if session.ip}
-								<p class="text-xs text-zinc-400 font-mono">{session.ip}</p>
+								<p class="text-xs text-(--color-muted) font-mono">{session.ip}</p>
 							{/if}
-							<p class="text-xs text-zinc-500">
-								Signed in {formatDate(session.created_at)}
+							<p class="text-xs text-(--color-muted)">
+								{m.profile_session_signed_in({ date: formatDate(session.created_at) })}
 								{#if session.last_seen && session.last_seen !== session.created_at}
-									· Last seen {formatDate(session.last_seen)}
+									{m.profile_session_last_seen({ date: formatDate(session.last_seen) })}
 								{/if}
 							</p>
 						</div>
@@ -382,10 +427,10 @@
 							disabled={revokingId === session.id}
 							class="shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors disabled:opacity-50
 								{session.is_current
-									? 'bg-red-900/40 text-red-300 border border-red-700/60 hover:bg-red-900/70'
-									: 'bg-zinc-600/60 text-zinc-300 border border-zinc-500/50 hover:bg-zinc-600'}"
+									? 'bg-(--color-danger)/10 text-(--color-danger) border border-(--color-danger)/60 hover:bg-(--color-danger)/20'
+									: 'bg-(--color-surface-3) text-(--color-text) border border-(--color-border) hover:bg-(--color-surface-3)'}"
 						>
-							{revokingId === session.id ? '…' : session.is_current ? 'Sign out' : 'End'}
+							{revokingId === session.id ? '…' : session.is_current ? m.profile_session_sign_out() : m.profile_session_end()}
 						</button>
 					</li>
 				{/each}
@@ -394,18 +439,18 @@
 	</section>
 
 	<!-- ── Change password ──────────────────────────────────────────────────── -->
-	<section class="bg-zinc-800 rounded-xl border border-zinc-700 p-6 space-y-4">
-		<h2 class="text-lg font-semibold text-zinc-100">Change password</h2>
+	<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-6 space-y-4">
+		<h2 class="text-lg font-semibold text-(--color-text)">{m.profile_change_password_heading()}</h2>
 
 		{#if form?.error}
-			<div class="rounded-lg bg-red-900/40 border border-red-700 px-4 py-2.5 text-sm text-red-300">
+			<div class="rounded-lg bg-(--color-danger)/10 border border-(--color-danger) px-4 py-2.5 text-sm text-(--color-danger)">
 				{form.error}
 			</div>
 		{/if}
 
 		{#if pwSuccess}
 			<div class="rounded-lg bg-green-900/40 border border-green-700 px-4 py-2.5 text-sm text-green-300">
-				Password changed successfully.
+				{m.profile_password_changed_ok()}
 			</div>
 		{/if}
 
@@ -422,44 +467,44 @@
 			class="space-y-4"
 		>
 			<div class="space-y-1.5">
-				<label class="block text-sm font-medium text-zinc-300" for="current">Current password</label>
+				<label class="block text-sm font-medium text-(--color-text)" for="current">{m.profile_current_password()}</label>
 				<input
 					id="current"
 					name="current"
 					type="password"
 					autocomplete="current-password"
 					required
-					class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
+					class="w-full bg-(--color-surface-3) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
 				/>
 			</div>
 			<div class="space-y-1.5">
-				<label class="block text-sm font-medium text-zinc-300" for="next">New password</label>
+				<label class="block text-sm font-medium text-(--color-text)" for="next">{m.profile_new_password()}</label>
 				<input
 					id="next"
 					name="next"
 					type="password"
 					autocomplete="new-password"
 					required
-					class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
+					class="w-full bg-(--color-surface-3) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
 				/>
 			</div>
 			<div class="space-y-1.5">
-				<label class="block text-sm font-medium text-zinc-300" for="confirm">Confirm new password</label>
+				<label class="block text-sm font-medium text-(--color-text)" for="confirm">{m.profile_confirm_password()}</label>
 				<input
 					id="confirm"
 					name="confirm"
 					type="password"
 					autocomplete="new-password"
 					required
-					class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
+					class="w-full bg-(--color-surface-3) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
 				/>
 			</div>
 			<button
 				type="submit"
 				disabled={pwSubmitting}
-				class="px-4 py-2 rounded-lg bg-zinc-600 text-zinc-100 font-semibold text-sm hover:bg-zinc-500 transition-colors disabled:opacity-60"
+				class="px-4 py-2 rounded-lg bg-(--color-surface-3) text-(--color-text) font-semibold text-sm hover:bg-(--color-surface-3) transition-colors disabled:opacity-60"
 			>
-				{pwSubmitting ? 'Updating…' : 'Update password'}
+				{pwSubmitting ? m.profile_updating() : m.profile_update_password()}
 			</button>
 		</form>
 	</section>

ui/src/routes/terms/+page.svelte

@@ -1,16 +1,20 @@
+<script lang="ts">
+	import * as m from '$lib/paraglide/messages.js';
+</script>
+
 <svelte:head>
-	<title>Terms of Service — libnovel</title>
+	<title>{m.terms_page_title()}</title>
 </svelte:head>
 
 <div class="max-w-2xl mx-auto py-10 px-4">
-	<h1 class="text-2xl font-bold text-zinc-100 mb-6">Terms of Service</h1>
+	<h1 class="text-2xl font-bold text-(--color-text) mb-6">Terms of Service</h1>
 
-	<div class="space-y-5 text-sm text-zinc-400 leading-relaxed">
+	<div class="space-y-5 text-sm text-(--color-muted) leading-relaxed">
 		<p>
 			By using libnovel you agree to these terms. If you do not agree, please do not use the service.
 		</p>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Use of the service</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Use of the service</h2>
 		<ul class="list-disc list-inside space-y-2 pl-1">
 			<li>libnovel is provided for personal, non-commercial reading use only.</li>
 			<li>You may not scrape, crawl, or systematically download content from the site.</li>
@@ -18,34 +22,34 @@
 			<li>Accounts may be suspended or terminated for abuse.</li>
 		</ul>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Content</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Content</h2>
 		<p>
 			libnovel aggregates publicly available web novel content from third-party sources for
 			personal reading convenience. We do not claim ownership of any novel content displayed on
 			the site. If you are a rights holder and wish to have content removed, please see our
-			<a href="/dmca" class="text-amber-400 hover:text-amber-300 transition-colors">DMCA policy</a>.
+			<a href="/dmca" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">DMCA policy</a>.
 		</p>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Accounts</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Accounts</h2>
 		<p>
 			You are responsible for maintaining the security of your account. libnovel is not liable
 			for any loss or damage resulting from unauthorised access to your account.
 		</p>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Disclaimer of warranties</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Disclaimer of warranties</h2>
 		<p>
 			The service is provided "as is" without warranty of any kind. We do not guarantee
 			availability, accuracy, or completeness of any content. See our full
-			<a href="/disclaimer" class="text-amber-400 hover:text-amber-300 transition-colors">disclaimer</a>
+			<a href="/disclaimer" class="text-(--color-brand) hover:text-(--color-brand-dim) transition-colors">disclaimer</a>
 			for details.
 		</p>
 
-		<h2 class="text-base font-semibold text-zinc-200 mt-6">Changes to these terms</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mt-6">Changes to these terms</h2>
 		<p>
 			We may update these terms at any time. Continued use of the service after changes are
 			posted constitutes acceptance of the revised terms.
 		</p>
 
-		<p class="text-zinc-600 text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
+		<p class="text-(--color-muted) text-xs mt-8">Last updated: {new Date().getFullYear()}</p>
 	</div>
 </div>

ui/src/routes/users/[username]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import type { PageData } from './$types';
+	import * as m from '$lib/paraglide/messages.js';
 
 	let { data }: { data: PageData } = $props();
 
@@ -50,7 +51,7 @@
 </script>
 
 <svelte:head>
-	<title>{data.profile.username} — libnovel</title>
+	<title>{m.user_page_title({ username: data.profile.username })}</title>
 </svelte:head>
 
 <!-- ── Header ────────────────────────────────────────────────────────────── -->
@@ -61,10 +62,10 @@
 			<img
 				src={data.avatarUrl}
 				alt={data.profile.username}
-				class="w-20 h-20 rounded-full object-cover ring-2 ring-zinc-700"
+				class="w-20 h-20 rounded-full object-cover ring-2 ring-(--color-border)"
 			/>
 		{:else}
-			<div class="w-20 h-20 rounded-full bg-zinc-700 flex items-center justify-center text-2xl font-bold text-zinc-300 ring-2 ring-zinc-600">
+			<div class="w-20 h-20 rounded-full bg-(--color-surface-3) flex items-center justify-center text-2xl font-bold text-(--color-text) ring-2 ring-(--color-border)">
 				{initials(data.profile.username)}
 			</div>
 		{/if}
@@ -72,18 +73,18 @@
 
 	<!-- Info -->
 	<div class="flex-1 min-w-0">
-		<h1 class="text-xl font-bold text-zinc-100 mb-0.5">{data.profile.username}</h1>
-		<p class="text-xs text-zinc-500 mb-3">Joined {joinDate(data.profile.created)}</p>
+		<h1 class="text-xl font-bold text-(--color-text) mb-0.5">{data.profile.username}</h1>
+		<p class="text-xs text-(--color-muted) mb-3">{m.user_joined({ date: joinDate(data.profile.created) })}</p>
 
 		<!-- Stats row -->
 		<div class="flex gap-5 text-sm mb-4">
 			<span>
-				<span class="font-semibold text-zinc-100">{followerCount}</span>
-				<span class="text-zinc-500 ml-1">followers</span>
+				<span class="font-semibold text-(--color-text)">{followerCount}</span>
+				<span class="text-(--color-muted) ml-1">{m.user_followers_label()}</span>
 			</span>
 			<span>
-				<span class="font-semibold text-zinc-100">{data.profile.followingCount}</span>
-				<span class="text-zinc-500 ml-1">following</span>
+				<span class="font-semibold text-(--color-text)">{data.profile.followingCount}</span>
+				<span class="text-(--color-muted) ml-1">{m.user_following_label()}</span>
 			</span>
 		</div>
 
@@ -94,23 +95,23 @@
 				disabled={subLoading}
 				class="px-4 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50
 					{subscribed
-						? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600 border border-zinc-600'
-						: 'bg-amber-400 text-zinc-900 hover:bg-amber-300'}"
+						? 'bg-(--color-surface-3) text-(--color-text) hover:bg-zinc-600 border border-(--color-border)'
+						: 'bg-(--color-brand) text-(--color-surface) hover:bg-(--color-brand-dim)'}"
 			>
 				{#if subLoading}
 					…
 				{:else if subscribed}
-					Following
+					{m.user_unfollow()}
 				{:else}
-					Follow
+					{m.user_follow()}
 				{/if}
 			</button>
 		{:else if !data.isLoggedIn}
 			<a
 				href="/login"
-				class="inline-block px-4 py-1.5 rounded-lg text-sm font-medium bg-amber-400 text-zinc-900 hover:bg-amber-300 transition-colors"
+				class="inline-block px-4 py-1.5 rounded-lg text-sm font-medium bg-(--color-brand) text-(--color-surface) hover:bg-(--color-brand-dim) transition-colors"
 			>
-				Follow
+				{m.user_follow()}
 			</a>
 		{/if}
 	</div>
@@ -119,14 +120,14 @@
 <!-- ── Currently Reading ─────────────────────────────────────────────────── -->
 {#if data.currentlyReading.length > 0}
 	<section class="mb-10">
-		<h2 class="text-base font-semibold text-zinc-200 mb-3">Currently Reading</h2>
+		<h2 class="text-base font-semibold text-(--color-text) mb-3">{m.user_currently_reading()}</h2>
 		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 			{#each data.currentlyReading as { book, chapter }}
 				<a
 					href="/books/{book.slug}"
-					class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+					class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
 				>
-					<div class="aspect-[2/3] bg-zinc-900 overflow-hidden relative">
+					<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden relative">
 						{#if book.cover}
 							<img
 								src={book.cover}
@@ -135,20 +136,20 @@
 								loading="lazy"
 							/>
 						{:else}
-							<div class="w-full h-full flex items-center justify-center text-zinc-600">
+							<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
 								<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
 								</svg>
 							</div>
 						{/if}
-						<span class="absolute bottom-1.5 right-1.5 text-xs bg-amber-400 text-zinc-900 font-bold px-1.5 py-0.5 rounded">
+						<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-brand) text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
 							ch.{chapter}
 						</span>
 					</div>
 					<div class="p-2">
-						<h3 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{book.title}</h3>
+						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title}</h3>
 						{#if book.author}
-							<p class="text-xs text-zinc-500 truncate mt-0.5">{book.author}</p>
+							<p class="text-xs text-(--color-muted) truncate mt-0.5">{book.author}</p>
 						{/if}
 					</div>
 				</a>
@@ -160,18 +161,17 @@
 <!-- ── Library ───────────────────────────────────────────────────────────── -->
 {#if data.library.length > 0}
 	<section class="mb-10">
-		<h2 class="text-base font-semibold text-zinc-200 mb-3">
-			Library
-			<span class="text-zinc-500 font-normal text-sm ml-1">({data.library.length})</span>
+		<h2 class="text-base font-semibold text-(--color-text) mb-3">
+			{m.user_library_count({ n: String(data.library.length) })}
 		</h2>
 		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
 			{#each data.library as { book, chapter, saved }}
 				{@const genres = parseGenres(book.genres)}
 				<a
 					href="/books/{book.slug}"
-					class="group flex flex-col rounded-lg overflow-hidden bg-zinc-800 hover:bg-zinc-700 transition-colors border border-zinc-700 hover:border-zinc-500"
+					class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
 				>
-					<div class="aspect-[2/3] bg-zinc-900 overflow-hidden relative">
+					<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden relative">
 						{#if book.cover}
 							<img
 								src={book.cover}
@@ -180,32 +180,32 @@
 								loading="lazy"
 							/>
 						{:else}
-							<div class="w-full h-full flex items-center justify-center text-zinc-600">
+							<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
 								<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
 								</svg>
 							</div>
 						{/if}
 						{#if chapter}
-							<span class="absolute bottom-1.5 right-1.5 text-xs bg-zinc-900/80 text-zinc-300 font-medium px-1.5 py-0.5 rounded">
+							<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-surface)/80 text-(--color-text) font-medium px-1.5 py-0.5 rounded">
 								ch.{chapter}
 							</span>
 						{/if}
 						{#if saved && !chapter}
 							<span class="absolute top-1.5 right-1.5">
-								<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
+								<svg class="w-3.5 h-3.5 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
 									<path d="M5 3a2 2 0 00-2 2v16l9-4 9 4V5a2 2 0 00-2-2H5z"/>
 								</svg>
 							</span>
 						{/if}
 					</div>
 					<div class="p-2">
-						<h3 class="text-xs font-semibold text-zinc-100 line-clamp-2 leading-snug">{book.title}</h3>
+						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title}</h3>
 						{#if book.author}
-							<p class="text-xs text-zinc-500 truncate mt-0.5">{book.author}</p>
+							<p class="text-xs text-(--color-muted) truncate mt-0.5">{book.author}</p>
 						{/if}
 						{#if genres.length > 0}
-							<p class="text-xs text-zinc-600 truncate mt-0.5">{genres[0]}</p>
+							<p class="text-xs text-(--color-muted) truncate mt-0.5">{genres[0]}</p>
 						{/if}
 					</div>
 				</a>
@@ -216,10 +216,10 @@
 
 <!-- ── Empty state ───────────────────────────────────────────────────────── -->
 {#if data.library.length === 0 && data.currentlyReading.length === 0}
-	<div class="py-16 text-center text-zinc-500">
-		<svg class="w-10 h-10 mx-auto mb-3 text-zinc-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+	<div class="py-16 text-center text-(--color-muted)">
+		<svg class="w-10 h-10 mx-auto mb-3 text-(--color-border)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
 		</svg>
-		<p class="text-sm">No books in library yet.</p>
+		<p class="text-sm">{m.user_no_books()}</p>
 	</div>
 {/if}

ui/vite.config.ts

@@ -1,5 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
+import { paraglideVitePlugin as paraglide } from '@inlang/paraglide-js';
 import { defineConfig } from 'vite';
 
 // Source maps are always generated so that the CI pipeline can upload them to
@@ -8,7 +9,15 @@ export default defineConfig({
 	build: {
 		sourcemap: true
 	},
-	plugins: [tailwindcss(), sveltekit()],
+	plugins: [
+		tailwindcss(),
+		paraglide({
+			project: './project.inlang',
+			outdir: './src/lib/paraglide',
+			strategy: ['url', 'cookie', 'baseLocale']
+		}),
+		sveltekit()
+	],
 	ssr: {
 		// Force these packages to be bundled into the server output rather than
 		// treated as external requires. The production Docker image has no