Add an English/Czech interface language switch

English stays the default; Czech is a full translation. Only the app chrome
is translated - notes and generated decks keep their own language, which is a
core feature, not a setting.

i18n
- lib/i18n-dict.ts: flat en/cs dictionaries (441 keys each), translate() and
  translatePlural() with real Czech plural rules (1 sada / 2-4 sady / 5+ sad).
  English is the default and the fallback for a missing key.
- lib/i18n.ts: browser store (freezmo.locale.v1), useI18n() hook, and the
  x-freezmo-locale header. The hook's t/plural are bound to the locale React
  is rendering with, so the first client render matches the server HTML and
  then re-renders in the stored language; module-level t is only for event
  handlers and non-React helpers.
- <html lang> follows the choice (inline script + setLocale).

UI
- Settings -> Language segmented control (English / Cestina), plus an EN/CS
  button on the key gate for first run.
- Every screen translated: sidebar, header, tab bar, library, deck cards,
  folder bar, create flow, all seven activities, study chrome, results,
  settings + health panel, API-key gate and help, install sheet, offline and
  the deck-not-found page.
- Plural-aware counts everywhere (decks, folders, activities, runs, photos,
  documents, pages, words, wrong attempts).

Server
- API routes and guards (generate, grade, health, http-guard, rate-limit,
  ollama error mapping) answer in the request's language, so error cards and
  the health panel never fall back to English mid-sentence.

Fixes
- A hydration mismatch when a non-default locale was stored silently dropped
  the .dark class after hydration; render-time t() is now bound to the
  hook's locale (UploadScreen.describeExtraction, ResultsScreen.answerFor,
  DeckCard's folder fallback).
- Bumped the service worker cache to freezmo-v4 for this deploy.

Tests: i18n 27/27 (gate toggle, persistence, html lang, Czech plurals,
settings switch) and a rebuilt regression suite 72/72 (English default,
library, create, all 7 activity types, results, settings, install sheet,
offline, PWA, security, Czech smoke).

components/activities/shared.tsx

@@ -2,6 +2,7 @@
 
 import { motion } from "framer-motion";
 
+import { useI18n } from "@/lib/i18n";
 import type { Activity } from "@/lib/schemas";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui";
@@ -19,14 +20,14 @@ export type ActivityComponentProps<A extends Activity = Activity> = {
   isLast: boolean;
 };
 
-export const TYPE_META: Record<Activity["type"], { label: string; icon: string; tint: string }> = {
-  flashcard: { label: "Flashcard", icon: "🃏", tint: "tint-sky" },
-  multiple_choice: { label: "Multiple choice", icon: "🔘", tint: "tint-lilac" },
-  true_false: { label: "True or false", icon: "⚖️", tint: "tint-mint" },
-  fill_blank: { label: "Fill the blank", icon: "✏️", tint: "tint-peach" },
-  matching: { label: "Match up", icon: "🧲", tint: "tint-sky" },
-  ordering: { label: "Put in order", icon: "🔢", tint: "tint-lilac" },
-  short_answer: { label: "Short answer", icon: "💬", tint: "tint-rose" },
+export const TYPE_META: Record<Activity["type"], { labelKey: string; icon: string; tint: string }> = {
+  flashcard: { labelKey: "type.flashcard", icon: "🃏", tint: "tint-sky" },
+  multiple_choice: { labelKey: "type.multipleChoice", icon: "🔘", tint: "tint-lilac" },
+  true_false: { labelKey: "type.trueFalse", icon: "⚖️", tint: "tint-mint" },
+  fill_blank: { labelKey: "type.fillBlank", icon: "✏️", tint: "tint-peach" },
+  matching: { labelKey: "type.matching", icon: "🧲", tint: "tint-sky" },
+  ordering: { labelKey: "type.ordering", icon: "🔢", tint: "tint-lilac" },
+  short_answer: { labelKey: "type.shortAnswer", icon: "💬", tint: "tint-rose" },
 };
 export function ActivityHeader({
   type,
@@ -37,6 +38,7 @@ export function ActivityHeader({
   topic?: string;
   extra?: React.ReactNode;
 }) {
+  const { t } = useI18n();
   const meta = TYPE_META[type];
   return (
     <div className="flex flex-wrap items-center gap-2">
@@ -47,7 +49,7 @@ export function ActivityHeader({
         )}
       >
         <span aria-hidden>{meta.icon}</span>
-        {meta.label}
+        {t(meta.labelKey)}
       </span>
       {topic ? (
         <span className="glass-chip rounded-full px-3 py-1 text-xs font-medium text-frost-600 dark:text-frost-300">
@@ -144,6 +146,7 @@ export function FeedbackPanel({
   detail?: React.ReactNode;
   children?: React.ReactNode;
 }) {
+  const { t } = useI18n();
   return (
     <motion.div
       initial={{ opacity: 0, y: 18 }}
@@ -166,7 +169,7 @@ export function FeedbackPanel({
           )}
         >
           <span aria-hidden>{correct ? "✅" : "💧"}</span>
-          {headline ?? (correct ? "Nice one!" : "Not quite")}
+          {headline ?? (correct ? t("activity.niceOne") : t("activity.notQuite"))}
         </p>
         {correct && xp ? (
           <motion.span
@@ -182,7 +185,7 @@ export function FeedbackPanel({
       {detail ? <div className="mt-2 text-sm text-frost-700 dark:text-frost-200">{detail}</div> : null}
 
       <p className="mt-2 text-sm leading-relaxed text-frost-700 dark:text-frost-200">
-        <span className="font-bold">Why: </span>
+        <span className="font-bold">{t("activity.why")} </span>
         {explanation}
       </p>
 
@@ -190,7 +193,7 @@ export function FeedbackPanel({
 
       <div className="mt-4 flex items-center justify-end">
         <Button onClick={onNext} size="md" className="min-w-28">
-          {isLast ? "See results" : "Next"}
+          {isLast ? t("activity.seeResults") : t("activity.next")}
           <span aria-hidden>→</span>
         </Button>
       </div>