From 3c36ceee0caec3bff8ff7d127c319b78ad39f5fb Mon Sep 17 00:00:00 2001
From: Florian <52180080+florianjs@users.noreply.github.com>
Date: Tue, 20 Oct 2026 13:02:58 +0200
Subject: [PATCH 1/2] feat(admin): add appearance editor for theme, fonts,
 images, login and texts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Admins can now restyle the site from Admin → Appearance:
- theme presets and per-token colours for light and dark themes,
  corner radius
- body, heading and mono fonts from a bundled set
- login page picture and home banner
- four login designs (centered, split, background, minimal) with a
  live preview, shared by the sign-in and sign-up pages
- any interface text overridden per language

Everything lives in one validated `appearance` setting. The theme is
injected as a server-rendered <style>; text overrides are merged into
vue-i18n as message functions, so no runtime message compiler is
needed and admin text is never parsed as message syntax or HTML.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/assets/css/main.css                       |  27 ++
 app/components/AuthShell.vue                  |  88 ++++
 app/components/AuthShellHeader.vue            |  14 +
 app/components/AuthShellLogo.vue              |  12 +
 app/components/admin/Appearance.vue           |  99 ++++
 app/components/admin/AppearanceImages.vue     |  69 +++
 app/components/admin/AppearanceLogin.vue      |  72 +++
 app/components/admin/AppearanceTexts.vue      | 120 +++++
 app/components/admin/AppearanceTheme.vue      | 149 ++++++
 app/components/admin/AppearanceTypography.vue |  45 ++
 app/composables/useAppearance.ts              |   9 +
 app/pages/admin.vue                           |   6 +
 app/pages/admin/appearance.vue                |   3 +
 app/pages/auth/login.vue                      | 201 ++++----
 app/pages/auth/register.vue                   | 431 ++++++++----------
 app/pages/index.vue                           |   9 +
 app/plugins/appearance.ts                     |  30 ++
 app/utils/authBranding.ts                     |   9 +
 doc/.vitepress/config.ts                      |   1 +
 doc/guide/appearance.md                       |  50 ++
 i18n/locales/de/appearance.json               | 129 ++++++
 i18n/locales/en/appearance.json               | 129 ++++++
 i18n/locales/es/appearance.json               | 129 ++++++
 i18n/locales/fr/appearance.json               | 129 ++++++
 i18n/locales/it/appearance.json               | 129 ++++++
 i18n/locales/ja/appearance.json               | 129 ++++++
 i18n/locales/ru/appearance.json               | 129 ++++++
 i18n/locales/zh/appearance.json               | 129 ++++++
 nuxt.config.ts                                |   7 +-
 package-lock.json                             |  50 ++
 package.json                                  |   5 +
 server/api/admin/appearance/image.post.ts     |  70 +++
 server/api/admin/appearance/index.put.ts      |  37 ++
 server/api/admin/appearance/texts.get.ts      |  16 +
 server/api/appearance.get.ts                  |  10 +
 server/utils/localeSource.ts                  |  23 +
 server/utils/settings.ts                      |  14 +
 shared/utils/appearance.ts                    | 394 ++++++++++++++++
 tailwind.config.ts                            |  12 +-
 tests/appearance.test.ts                      | 151 ++++++
 40 files changed, 2912 insertions(+), 353 deletions(-)
 create mode 100644 app/components/AuthShell.vue
 create mode 100644 app/components/AuthShellHeader.vue
 create mode 100644 app/components/AuthShellLogo.vue
 create mode 100644 app/components/admin/Appearance.vue
 create mode 100644 app/components/admin/AppearanceImages.vue
 create mode 100644 app/components/admin/AppearanceLogin.vue
 create mode 100644 app/components/admin/AppearanceTexts.vue
 create mode 100644 app/components/admin/AppearanceTheme.vue
 create mode 100644 app/components/admin/AppearanceTypography.vue
 create mode 100644 app/composables/useAppearance.ts
 create mode 100644 app/pages/admin/appearance.vue
 create mode 100644 app/plugins/appearance.ts
 create mode 100644 app/utils/authBranding.ts
 create mode 100644 doc/guide/appearance.md
 create mode 100644 i18n/locales/de/appearance.json
 create mode 100644 i18n/locales/en/appearance.json
 create mode 100644 i18n/locales/es/appearance.json
 create mode 100644 i18n/locales/fr/appearance.json
 create mode 100644 i18n/locales/it/appearance.json
 create mode 100644 i18n/locales/ja/appearance.json
 create mode 100644 i18n/locales/ru/appearance.json
 create mode 100644 i18n/locales/zh/appearance.json
 create mode 100644 server/api/admin/appearance/image.post.ts
 create mode 100644 server/api/admin/appearance/index.put.ts
 create mode 100644 server/api/admin/appearance/texts.get.ts
 create mode 100644 server/api/appearance.get.ts
 create mode 100644 server/utils/localeSource.ts
 create mode 100644 shared/utils/appearance.ts
 create mode 100644 tests/appearance.test.ts

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 07016375..f498ad7a 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -4,6 +4,22 @@
 @import '@fontsource/ibm-plex-sans/600.css';
 @import '@fontsource/ibm-plex-mono/400.css';
 @import '@fontsource/ibm-plex-mono/500.css';
+/* Fonts an admin can pick (shared/utils/appearance.ts): declared here, only
+   downloaded by browsers when the theme uses them */
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/500.css';
+@import '@fontsource/inter/600.css';
+@import '@fontsource/space-grotesk/400.css';
+@import '@fontsource/space-grotesk/500.css';
+@import '@fontsource/space-grotesk/600.css';
+@import '@fontsource/nunito/400.css';
+@import '@fontsource/nunito/500.css';
+@import '@fontsource/nunito/600.css';
+@import '@fontsource/source-serif-4/400.css';
+@import '@fontsource/source-serif-4/500.css';
+@import '@fontsource/source-serif-4/600.css';
+@import '@fontsource/jetbrains-mono/400.css';
+@import '@fontsource/jetbrains-mono/500.css';
 
 @tailwind base;
 @tailwind components;
@@ -17,6 +33,11 @@
 @layer base {
   :root {
     color-scheme: light;
+    /* Overridden by the admin appearance (app/plugins/appearance.ts) */
+    --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
+    --font-heading: var(--font-sans);
+    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
+    --radius: 0.3125rem;
     --bg: 243 244 246;
     --surface: 255 255 255;
     --raised: 247 248 250;
@@ -83,6 +104,12 @@
     @apply bg-bg-primary text-text-primary font-sans text-sm leading-6;
   }
 
+  h1,
+  h2,
+  h3 {
+    @apply font-heading;
+  }
+
   ::selection {
     @apply bg-free/25 text-text-primary;
   }
diff --git a/app/components/AuthShell.vue b/app/components/AuthShell.vue
new file mode 100644
index 00000000..8be28499
--- /dev/null
+++ b/app/components/AuthShell.vue
@@ -0,0 +1,88 @@
+<template>
+  <!-- Split: picture or accent panel on the left, form on the right -->
+  <div v-if="layout === 'split'" class="bg-bg-primary lg:grid lg:grid-cols-2" :class="frame">
+    <div class="relative hidden lg:block overflow-hidden" :class="{ 'bg-free': !image }">
+      <img v-if="image" :src="image" alt="" class="absolute inset-0 w-full h-full object-cover" />
+      <div class="absolute inset-0 bg-gradient-to-t from-scrim/70 via-scrim/20 to-transparent"></div>
+      <div class="absolute bottom-0 left-0 right-0 p-10 text-paper">
+        <h2 class="text-3xl font-semibold tracking-tight" v-html="title"></h2>
+        <div class="mt-2 text-paper/80 [&>p]:m-0" v-html="subtitle"></div>
+      </div>
+    </div>
+    <div class="relative flex items-center justify-center px-4 py-12">
+      <div class="absolute top-4 right-4"><LanguageSwitcher /></div>
+      <div class="w-full max-w-md">
+        <AuthShellHeader :branding="branding" :title="title" :subtitle="subtitle" class="lg:hidden" />
+        <AuthShellLogo :branding="branding" class="hidden lg:flex mb-8" />
+        <slot />
+      </div>
+    </div>
+  </div>
+
+  <!-- Background: full-page picture, form on a translucent card -->
+  <div
+    v-else-if="layout === 'background'"
+    class="relative flex items-center justify-center px-4 py-12 overflow-hidden"
+    :class="[frame, image ? 'bg-scrim' : 'bg-gradient-to-br from-free/40 via-bg-primary to-bg-primary']"
+  >
+    <img v-if="image" :src="image" alt="" class="absolute inset-0 w-full h-full object-cover" />
+    <div v-if="image" class="absolute inset-0 bg-scrim/45"></div>
+    <div class="absolute top-4 right-4 z-10"><LanguageSwitcher /></div>
+    <div class="relative w-full max-w-md bg-bg-secondary/90 backdrop-blur-md border border-border rounded-lg shadow-2xl shadow-scrim/30 p-8">
+      <AuthShellHeader :branding="branding" :title="title" :subtitle="subtitle" />
+      <slot />
+    </div>
+  </div>
+
+  <!-- Minimal: no logo tile, left-aligned, narrow column -->
+  <div v-else-if="layout === 'minimal'" class="relative bg-bg-primary flex flex-col px-6 py-6" :class="frame">
+    <div class="flex items-center justify-between">
+      <span class="text-sm font-medium text-text-primary" v-html="branding?.siteName || 'Trackarr'"></span>
+      <LanguageSwitcher />
+    </div>
+    <div class="flex-1 flex items-center justify-center py-12">
+      <div class="w-full max-w-sm">
+        <h1 class="text-3xl font-semibold tracking-tight" v-html="title"></h1>
+        <div class="text-text-muted text-sm mt-1 mb-8 [&>p]:m-0" v-html="subtitle"></div>
+        <slot />
+      </div>
+    </div>
+  </div>
+
+  <!-- Centered (default) -->
+  <div v-else class="relative bg-bg-primary flex items-center justify-center px-4" :class="frame">
+    <div class="absolute top-4 right-4"><LanguageSwitcher /></div>
+    <div class="w-full max-w-md">
+      <AuthShellHeader :branding="branding" :title="title" :subtitle="subtitle" />
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LoginLayout } from '~~/shared/utils/appearance';
+import type { AuthBranding } from '~/utils/authBranding';
+
+/**
+ * Frame of the sign-in and sign-up pages, in the design chosen by the admin
+ * (Admin → Appearance → Login page). Pages put their form in the slot.
+ */
+const props = defineProps<{
+  layout?: LoginLayout;
+  image?: string | null;
+  /** Fill the parent instead of the viewport (admin preview) */
+  contained?: boolean;
+}>();
+
+const { t } = useI18n();
+const appearance = useAppearance();
+const { data: branding } = await useFetch<AuthBranding>('/api/branding');
+
+// Props let the admin page preview a design before saving it
+const layout = computed(() => props.layout ?? appearance.value.login.layout);
+const image = computed(() => (props.image !== undefined ? props.image : appearance.value.login.image));
+const frame = computed(() => (props.contained ? 'h-full' : 'min-h-screen'));
+// Sanitized on the server (rich text), rendered with v-html as before
+const title = computed(() => branding.value?.authTitle || branding.value?.siteName || 'TRACKARR');
+const subtitle = computed(() => branding.value?.authSubtitle || t('auth.defaultSubtitle'));
+</script>
diff --git a/app/components/AuthShellHeader.vue b/app/components/AuthShellHeader.vue
new file mode 100644
index 00000000..40374638
--- /dev/null
+++ b/app/components/AuthShellHeader.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="text-center mb-8">
+    <AuthShellLogo :branding="branding" class="mx-auto mb-4" />
+    <h1 class="text-2xl font-bold tracking-tighter" v-html="title"></h1>
+    <div class="text-text-muted text-sm mt-1 [&>p]:m-0" v-html="subtitle"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AuthBranding } from '~/utils/authBranding';
+
+// title and subtitle are sanitized rich text from /api/branding
+defineProps<{ branding: AuthBranding | null | undefined; title: string; subtitle: string }>();
+</script>
diff --git a/app/components/AuthShellLogo.vue b/app/components/AuthShellLogo.vue
new file mode 100644
index 00000000..33280b2e
--- /dev/null
+++ b/app/components/AuthShellLogo.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="w-16 h-16 bg-white rounded-lg flex items-center justify-center overflow-hidden">
+    <img v-if="branding?.siteLogoImage" :src="branding.siteLogoImage" alt="Logo" class="w-full h-full object-contain" />
+    <Icon v-else :name="branding?.siteLogo || 'ph:broadcast-bold'" class="text-black text-4xl" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AuthBranding } from '~/utils/authBranding';
+
+defineProps<{ branding: AuthBranding | null | undefined }>();
+</script>
diff --git a/app/components/admin/Appearance.vue b/app/components/admin/Appearance.vue
new file mode 100644
index 00000000..118a54b0
--- /dev/null
+++ b/app/components/admin/Appearance.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="space-y-6">
+    <div class="card">
+      <div class="card-header flex flex-wrap items-center justify-between gap-3">
+        <div class="flex gap-1 flex-wrap" role="tablist">
+          <button
+            v-for="tab in tabs"
+            :key="tab.id"
+            type="button"
+            role="tab"
+            :aria-selected="current === tab.id"
+            class="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded"
+            :class="current === tab.id ? 'bg-bg-tertiary text-text-primary font-medium' : 'text-text-muted hover:text-text-primary'"
+            @click="current = tab.id"
+          >
+            <Icon :name="tab.icon" />{{ t(`appearance.tabs.${tab.id}`) }}
+          </button>
+        </div>
+        <div class="flex items-center gap-2">
+          <span v-if="dirty" class="text-xs text-leech">{{ t('appearance.unsaved') }}</span>
+          <button type="button" class="btn btn-secondary" :disabled="!dirty || saving" @click="discard">
+            {{ t('appearance.discard') }}
+          </button>
+          <button type="button" class="btn btn-primary" :disabled="!dirty || saving" @click="save">
+            <Icon :name="saving ? 'ph:circle-notch' : 'ph:floppy-disk'" :class="{ 'animate-spin': saving }" />
+            {{ t('common.save') }}
+          </button>
+        </div>
+      </div>
+      <div class="card-body" role="tabpanel">
+        <p class="text-xs text-text-muted mb-4">{{ t('appearance.previewHint') }}</p>
+        <AdminAppearanceTheme v-if="current === 'theme'" v-model="draft" />
+        <AdminAppearanceTypography v-else-if="current === 'typography'" v-model="draft" />
+        <AdminAppearanceImages v-else-if="current === 'images'" :appearance="saved" @uploaded="onImage" />
+        <AdminAppearanceLogin v-else-if="current === 'login'" v-model="draft" />
+        <AdminAppearanceTexts v-else v-model="draft" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNotificationStore } from '~/stores/notifications';
+import type { Appearance } from '~~/shared/utils/appearance';
+
+const { t } = useI18n();
+const notifications = useNotificationStore();
+const appearance = useAppearance();
+
+const tabs = [
+  { id: 'theme', icon: 'ph:palette' },
+  { id: 'typography', icon: 'ph:text-aa' },
+  { id: 'images', icon: 'ph:image' },
+  { id: 'login', icon: 'ph:sign-in' },
+  { id: 'texts', icon: 'ph:translate' },
+] as const;
+const current = ref<(typeof tabs)[number]['id']>('theme');
+
+// What the server holds, and the edited copy previewed on the whole site
+const saved = ref<Appearance>(structuredClone(toRaw(appearance.value)));
+const draft = ref<Appearance>(structuredClone(toRaw(appearance.value)));
+const dirty = computed(() => JSON.stringify(draft.value) !== JSON.stringify(saved.value));
+
+watch(draft, (value) => (appearance.value = structuredClone(toRaw(value))), { deep: true });
+
+// Leaving without saving drops the preview
+onBeforeUnmount(() => {
+  appearance.value = structuredClone(toRaw(saved.value));
+});
+
+function discard() {
+  draft.value = structuredClone(toRaw(saved.value));
+}
+
+const saving = ref(false);
+async function save() {
+  saving.value = true;
+  const textsChanged = JSON.stringify(draft.value.texts) !== JSON.stringify(saved.value.texts);
+  try {
+    const result = await $fetch<Appearance>('/api/admin/appearance', { method: 'PUT', body: draft.value });
+    saved.value = result;
+    draft.value = structuredClone(result);
+    notifications.success(t('appearance.saved'));
+    // Removed text overrides stay merged in vue-i18n until the app reloads
+    if (textsChanged) reloadNuxtApp({ force: true });
+  } catch (error) {
+    const message = (error as { data?: { message?: string } }).data?.message;
+    notifications.error(t('appearance.saveFailed'), message);
+  } finally {
+    saving.value = false;
+  }
+}
+
+// Images are stored on upload: update both copies, keep other edits pending
+function onImage(next: Appearance) {
+  saved.value = { ...saved.value, login: { ...saved.value.login, image: next.login.image }, images: next.images };
+  draft.value = { ...draft.value, login: { ...draft.value.login, image: next.login.image }, images: next.images };
+}
+</script>
diff --git a/app/components/admin/AppearanceImages.vue b/app/components/admin/AppearanceImages.vue
new file mode 100644
index 00000000..b9e16a20
--- /dev/null
+++ b/app/components/admin/AppearanceImages.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <SettingsGroup
+      v-for="slot in APPEARANCE_IMAGE_SLOTS"
+      :key="slot"
+      :label="t(`appearance.images.${slot}`)"
+      :description="t(`appearance.images.${slot}Hint`)"
+    >
+      <div
+        class="relative rounded-lg border border-dashed border-border bg-bg-tertiary/50 overflow-hidden flex items-center justify-center"
+        :class="slot === 'homeBanner' ? 'h-32' : 'h-48'"
+      >
+        <img v-if="current(slot)" :src="current(slot)!" alt="" class="absolute inset-0 w-full h-full object-cover" />
+        <span v-else class="text-sm text-text-muted flex items-center gap-2">
+          <Icon name="ph:image" />{{ t('appearance.images.none') }}
+        </span>
+      </div>
+      <div class="flex flex-wrap items-center gap-2 mt-3">
+        <label class="btn btn-secondary cursor-pointer" :class="{ 'opacity-50 pointer-events-none': busy === slot }">
+          <Icon :name="busy === slot ? 'ph:circle-notch' : 'ph:upload-simple'" :class="{ 'animate-spin': busy === slot }" />
+          {{ current(slot) ? t('appearance.images.replace') : t('appearance.images.upload') }}
+          <input type="file" accept="image/png,image/jpeg,image/webp" class="sr-only" @change="upload(slot, $event)" />
+        </label>
+        <button v-if="current(slot)" type="button" class="btn btn-ghost text-danger" :disabled="busy === slot" @click="send(slot, null)">
+          <Icon name="ph:trash" />{{ t('appearance.images.remove') }}
+        </button>
+        <span class="text-xs text-text-muted">{{ t('appearance.images.formats') }}</span>
+      </div>
+    </SettingsGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNotificationStore } from '~/stores/notifications';
+import { APPEARANCE_IMAGE_SLOTS, type Appearance, type AppearanceImageSlot } from '~~/shared/utils/appearance';
+
+const props = defineProps<{ appearance: Appearance }>();
+const emit = defineEmits<{ uploaded: [appearance: Appearance] }>();
+const { t } = useI18n();
+const notifications = useNotificationStore();
+
+const current = (slot: AppearanceImageSlot) =>
+  slot === 'loginImage' ? props.appearance.login.image : props.appearance.images.homeBanner;
+
+const busy = ref<AppearanceImageSlot | null>(null);
+
+function upload(slot: AppearanceImageSlot, event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (file) send(slot, file);
+}
+
+// Stored right away, not with the Save button
+async function send(slot: AppearanceImageSlot, file: File | null) {
+  const form = new FormData();
+  form.append('slot', slot);
+  if (file) form.append('image', file);
+  busy.value = slot;
+  try {
+    emit('uploaded', await $fetch<Appearance>('/api/admin/appearance/image', { method: 'POST', body: form }));
+  } catch (error) {
+    const message = (error as { data?: { message?: string } }).data?.message;
+    notifications.error(t('appearance.images.failed'), message);
+  } finally {
+    busy.value = null;
+  }
+}
+</script>
diff --git a/app/components/admin/AppearanceLogin.vue b/app/components/admin/AppearanceLogin.vue
new file mode 100644
index 00000000..524fbf88
--- /dev/null
+++ b/app/components/admin/AppearanceLogin.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <SettingsGroup :label="t('appearance.login.layout')" :description="t('appearance.login.layoutHint')">
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
+        <button
+          v-for="layout in LOGIN_LAYOUTS"
+          :key="layout"
+          type="button"
+          class="text-left rounded-lg border p-2 transition-colors"
+          :class="model.login.layout === layout ? 'border-free ring-2 ring-free/30' : 'border-border hover:border-border-hover'"
+          :aria-pressed="model.login.layout === layout"
+          @click="model = { ...model, login: { ...model.login, layout } }"
+        >
+          <!-- Schematic of the design -->
+          <div class="h-20 rounded border border-border bg-bg-primary overflow-hidden flex" aria-hidden="true">
+            <template v-if="layout === 'split'">
+              <div class="w-1/2 bg-free/60"></div>
+              <div class="w-1/2 flex items-center justify-center"><div class="w-8 h-10 rounded-sm bg-bg-tertiary border border-border"></div></div>
+            </template>
+            <div v-else-if="layout === 'background'" class="w-full flex items-center justify-center bg-gradient-to-br from-free/60 to-scrim/40">
+              <div class="w-10 h-12 rounded-sm bg-bg-secondary/90 border border-border"></div>
+            </div>
+            <div v-else-if="layout === 'minimal'" class="w-full p-2 flex flex-col">
+              <div class="w-6 h-1 bg-text-muted/50 rounded-full"></div>
+              <div class="flex-1 flex flex-col justify-center gap-1 pl-6">
+                <div class="w-10 h-1.5 bg-text-primary/70 rounded-full"></div>
+                <div class="w-14 h-1 bg-border rounded-full"></div>
+                <div class="w-14 h-1 bg-border rounded-full"></div>
+              </div>
+            </div>
+            <div v-else class="w-full flex flex-col items-center justify-center gap-1">
+              <div class="w-4 h-4 rounded-sm bg-white"></div>
+              <div class="w-12 h-1 bg-border rounded-full"></div>
+              <div class="w-12 h-1 bg-border rounded-full"></div>
+            </div>
+          </div>
+          <p class="text-sm font-medium mt-2">{{ t(`appearance.login.layouts.${layout}`) }}</p>
+          <p class="text-xs text-text-muted">{{ t(`appearance.login.layouts.${layout}Hint`) }}</p>
+        </button>
+      </div>
+      <p v-if="needsImage" class="text-xs text-text-muted mt-3 flex items-center gap-1.5">
+        <Icon name="ph:info" />{{ t('appearance.login.imageHint') }}
+      </p>
+    </SettingsGroup>
+
+    <SettingsGroup :label="t('appearance.login.preview')">
+      <!-- Rendered at twice the size, scaled down: the real page, not a mockup -->
+      <div class="h-[400px] rounded-lg border border-border overflow-hidden pointer-events-none select-none" inert>
+        <div class="origin-top-left scale-50 w-[200%] h-[800px]">
+          <AuthShell :layout="model.login.layout" :image="model.login.image" contained>
+            <div class="space-y-4">
+              <div class="h-9 rounded bg-bg-tertiary border border-border"></div>
+              <div class="h-9 rounded bg-bg-tertiary border border-border"></div>
+              <div class="h-10 rounded bg-white"></div>
+            </div>
+          </AuthShell>
+        </div>
+      </div>
+    </SettingsGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LOGIN_LAYOUTS, type Appearance } from '~~/shared/utils/appearance';
+
+const model = defineModel<Appearance>({ required: true });
+const { t } = useI18n();
+
+const needsImage = computed(
+  () => (model.value.login.layout === 'split' || model.value.login.layout === 'background') && !model.value.login.image
+);
+</script>
diff --git a/app/components/admin/AppearanceTexts.vue b/app/components/admin/AppearanceTexts.vue
new file mode 100644
index 00000000..15df07f2
--- /dev/null
+++ b/app/components/admin/AppearanceTexts.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <p class="text-sm text-text-muted mb-4">{{ t('appearance.texts.hint') }}</p>
+
+    <div class="flex flex-wrap items-center gap-2 mb-4">
+      <select v-model="locale" class="input w-auto" :aria-label="t('appearance.texts.locale')">
+        <option v-for="code in APPEARANCE_LOCALES" :key="code" :value="code">
+          {{ localeName(code) }}{{ count(code) ? ` (${count(code)})` : '' }}
+        </option>
+      </select>
+      <div class="relative flex-1 min-w-[12rem]">
+        <Icon name="ph:magnifying-glass" class="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted" />
+        <input v-model="query" type="search" class="input w-full pl-8" :placeholder="t('appearance.texts.search')" />
+      </div>
+      <label class="flex items-center gap-2 text-sm text-text-secondary select-none cursor-pointer">
+        <input v-model="onlyModified" type="checkbox" class="accent-free" />
+        {{ t('appearance.texts.onlyModified') }}
+      </label>
+    </div>
+
+    <div v-if="pending" class="py-10 text-center text-text-muted"><Icon name="ph:circle-notch" class="animate-spin" /></div>
+    <template v-else>
+      <p class="text-xs text-text-muted mb-2">{{ t('appearance.texts.results', { n: filtered.length }, filtered.length) }}</p>
+      <ul class="divide-y divide-border border border-border rounded">
+        <li v-for="key in page" :key="key" class="p-3 grid md:grid-cols-2 gap-2">
+          <div class="min-w-0">
+            <code class="num text-2xs text-text-muted break-all">{{ key }}</code>
+            <p class="text-sm text-text-secondary mt-0.5 break-words">{{ source[key] }}</p>
+          </div>
+          <div class="flex items-start gap-1">
+            <textarea
+              :value="overrides[key] ?? ''"
+              rows="1"
+              class="input w-full resize-y min-h-[2.25rem]"
+              :class="{ 'border-free/60': overrides[key] !== undefined }"
+              :placeholder="source[key]"
+              :maxlength="MAX_TEXT_OVERRIDE_LENGTH"
+              :aria-label="key"
+              @input="setText(key, ($event.target as HTMLTextAreaElement).value)"
+            ></textarea>
+            <button
+              v-if="overrides[key] !== undefined"
+              type="button"
+              class="p-2 text-text-muted hover:text-text-primary"
+              :title="t('common.reset')"
+              :aria-label="t('common.reset')"
+              @click="setText(key, '')"
+            >
+              <Icon name="ph:arrow-counter-clockwise" class="block" />
+            </button>
+          </div>
+        </li>
+        <li v-if="!filtered.length" class="p-6 text-center text-sm text-text-muted">{{ t('appearance.texts.empty') }}</li>
+      </ul>
+      <div v-if="pages > 1" class="flex items-center justify-center gap-2 mt-3">
+        <button type="button" class="btn btn-ghost" :disabled="pageIndex === 0" @click="pageIndex--">
+          <Icon name="ph:caret-left" />
+        </button>
+        <span class="text-xs text-text-muted num">{{ t('common.pageOf', { page: pageIndex + 1, pages }) }}</span>
+        <button type="button" class="btn btn-ghost" :disabled="pageIndex >= pages - 1" @click="pageIndex++">
+          <Icon name="ph:caret-right" />
+        </button>
+      </div>
+      <p class="text-xs text-text-muted mt-3">{{ t('appearance.texts.placeholders') }}</p>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { APPEARANCE_LOCALES, MAX_TEXT_OVERRIDE_LENGTH, type Appearance } from '~~/shared/utils/appearance';
+
+type Locale = (typeof APPEARANCE_LOCALES)[number];
+const PAGE_SIZE = 40;
+
+const model = defineModel<Appearance>({ required: true });
+const { t, locale: uiLocale, locales } = useI18n();
+
+const locale = ref<Locale>(
+  (APPEARANCE_LOCALES as readonly string[]).includes(uiLocale.value) ? (uiLocale.value as Locale) : 'en'
+);
+const query = ref('');
+const onlyModified = ref(false);
+const pageIndex = ref(0);
+
+const { data, pending } = await useFetch<Record<string, string>>('/api/admin/appearance/texts', {
+  query: { locale },
+  lazy: true,
+});
+const source = computed(() => data.value ?? {});
+const overrides = computed(() => model.value.texts[locale.value] ?? {});
+
+function localeName(code: string) {
+  return locales.value.find((l) => l.code === code)?.name ?? code;
+}
+const count = (code: Locale) => Object.keys(model.value.texts[code] ?? {}).length;
+
+// Matches the key, the shipped text or the override
+const filtered = computed(() => {
+  const q = query.value.trim().toLowerCase();
+  return Object.keys(source.value).filter((key) => {
+    if (onlyModified.value && overrides.value[key] === undefined) return false;
+    if (!q) return true;
+    return [key, source.value[key], overrides.value[key] ?? ''].some((s) => s!.toLowerCase().includes(q));
+  });
+});
+const pages = computed(() => Math.max(1, Math.ceil(filtered.value.length / PAGE_SIZE)));
+const page = computed(() => filtered.value.slice(pageIndex.value * PAGE_SIZE, (pageIndex.value + 1) * PAGE_SIZE));
+watch([query, onlyModified, locale], () => (pageIndex.value = 0));
+
+// An empty field restores the shipped text
+function setText(key: string, value: string) {
+  const current = { ...overrides.value };
+  if (value === '') delete current[key];
+  else current[key] = value;
+  const texts = { ...model.value.texts };
+  if (Object.keys(current).length) texts[locale.value] = current;
+  else delete texts[locale.value];
+  model.value = { ...model.value, texts };
+}
+</script>
diff --git a/app/components/admin/AppearanceTheme.vue b/app/components/admin/AppearanceTheme.vue
new file mode 100644
index 00000000..573ac528
--- /dev/null
+++ b/app/components/admin/AppearanceTheme.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <SettingsGroup :label="t('appearance.theme.presets')" :description="t('appearance.theme.presetsHint')">
+      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
+        <button
+          v-for="id in PRESET_IDS"
+          :key="id"
+          type="button"
+          class="text-left rounded-lg border p-2 transition-colors"
+          :class="model.preset === id ? 'border-free ring-2 ring-free/30' : 'border-border hover:border-border-hover'"
+          :aria-pressed="model.preset === id"
+          @click="choosePreset(id)"
+        >
+          <div class="flex h-10 rounded overflow-hidden border border-border">
+            <div v-for="mode in modes" :key="mode" class="flex-1 flex items-end gap-1 p-1.5" :style="{ background: swatches(id)[mode].bg }">
+              <span class="h-3 w-3 rounded-full" :style="{ background: swatches(id)[mode].ink }"></span>
+              <span class="h-3 w-3 rounded-full" :style="{ background: swatches(id)[mode].free }"></span>
+              <span class="h-3 w-3 rounded-full" :style="{ background: swatches(id)[mode].seed }"></span>
+            </div>
+          </div>
+          <p class="text-sm font-medium mt-2">{{ t(`appearance.presets.${id}`) }}</p>
+        </button>
+      </div>
+    </SettingsGroup>
+
+    <SettingsGroup :label="t('appearance.theme.colors')" :description="t('appearance.theme.colorsHint')">
+      <div class="flex items-center justify-between mb-3">
+        <div class="flex gap-1">
+          <button
+            v-for="mode in modes"
+            :key="mode"
+            type="button"
+            class="px-3 py-1 text-xs rounded border"
+            :class="editing === mode ? 'border-free text-text-primary bg-bg-tertiary' : 'border-border text-text-muted'"
+            @click="editing = mode"
+          >
+            <Icon :name="mode === 'light' ? 'ph:sun' : 'ph:moon'" class="mr-1" />{{ t(`appearance.theme.${mode}`) }}
+          </button>
+        </div>
+        <button
+          v-if="Object.keys(model.colors[editing]).length"
+          type="button"
+          class="text-xs text-text-muted hover:text-text-primary underline"
+          @click="resetMode"
+        >
+          {{ t('appearance.theme.resetColors') }}
+        </button>
+      </div>
+      <div v-for="group in TOKEN_GROUPS" :key="group.id" class="mb-4 last:mb-0">
+        <p class="text-xs text-text-muted mb-2">{{ t(`appearance.theme.groups.${group.id}`) }}</p>
+        <div class="grid sm:grid-cols-2 gap-2">
+          <label
+            v-for="token in group.tokens"
+            :key="token"
+            class="flex items-center gap-2 px-2 py-1.5 rounded border border-border bg-bg-tertiary/50"
+          >
+            <input
+              type="color"
+              :value="palettes[editing][token]"
+              class="w-7 h-7 rounded cursor-pointer bg-transparent border-0 p-0 shrink-0"
+              @input="setColor(token, ($event.target as HTMLInputElement).value)"
+            />
+            <span class="text-sm flex-1 min-w-0 truncate">{{ t(`appearance.theme.tokens.${token}`) }}</span>
+            <code class="num text-2xs text-text-muted">{{ palettes[editing][token] }}</code>
+            <button
+              v-if="model.colors[editing][token]"
+              type="button"
+              class="p-0.5 text-text-muted hover:text-text-primary"
+              :title="t('common.reset')"
+              :aria-label="t('common.reset')"
+              @click.prevent="clearColor(token)"
+            >
+              <Icon name="ph:arrow-counter-clockwise" class="block" />
+            </button>
+          </label>
+        </div>
+      </div>
+    </SettingsGroup>
+
+    <SettingsGroup :label="t('appearance.theme.radius')" :description="t('appearance.theme.radiusHint')">
+      <div class="flex flex-wrap gap-2">
+        <button
+          v-for="(value, id) in RADII"
+          :key="id"
+          type="button"
+          class="flex items-center gap-2 px-3 py-2 text-sm border"
+          :style="{ borderRadius: value }"
+          :class="model.radius === id ? 'border-free bg-bg-tertiary text-text-primary' : 'border-border text-text-muted hover:text-text-primary'"
+          @click="model = { ...model, radius: id }"
+        >
+          {{ t(`appearance.theme.radii.${id}`) }}
+        </button>
+      </div>
+    </SettingsGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  PRESET_IDS,
+  RADII,
+  resolvePalettes,
+  DEFAULT_APPEARANCE,
+  type Appearance,
+  type ThemeToken,
+} from '~~/shared/utils/appearance';
+
+const model = defineModel<Appearance>({ required: true });
+const { t } = useI18n();
+
+const modes = ['light', 'dark'] as const;
+const editing = ref<(typeof modes)[number]>('light');
+
+const TOKEN_GROUPS: { id: string; tokens: ThemeToken[] }[] = [
+  { id: 'surfaces', tokens: ['bg', 'surface', 'raised', 'hover', 'line', 'line-strong'] },
+  { id: 'text', tokens: ['ink', 'ink-2', 'ink-3', 'contrast', 'contrast-inv'] },
+  { id: 'meaning', tokens: ['free', 'seed', 'leech', 'danger'] },
+];
+
+const palettes = computed(() => resolvePalettes(model.value));
+
+// Preset colours alone, for the preset cards
+function swatches(preset: string) {
+  return resolvePalettes({ ...DEFAULT_APPEARANCE, preset });
+}
+
+// A preset replaces the colours picked by hand
+function choosePreset(preset: string) {
+  model.value = { ...model.value, preset, colors: { light: {}, dark: {} } };
+}
+
+function setColor(token: ThemeToken, value: string) {
+  const mode = editing.value;
+  model.value = {
+    ...model.value,
+    colors: { ...model.value.colors, [mode]: { ...model.value.colors[mode], [token]: value.toLowerCase() } },
+  };
+}
+
+function clearColor(token: ThemeToken) {
+  const mode = editing.value;
+  const { [token]: _removed, ...rest } = model.value.colors[mode];
+  model.value = { ...model.value, colors: { ...model.value.colors, [mode]: rest } };
+}
+
+function resetMode() {
+  model.value = { ...model.value, colors: { ...model.value.colors, [editing.value]: {} } };
+}
+</script>
diff --git a/app/components/admin/AppearanceTypography.vue b/app/components/admin/AppearanceTypography.vue
new file mode 100644
index 00000000..c6ddae12
--- /dev/null
+++ b/app/components/admin/AppearanceTypography.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <SettingsGroup
+      v-for="slot in slots"
+      :key="slot.id"
+      :label="t(`appearance.typography.${slot.id}`)"
+      :description="t(`appearance.typography.${slot.id}Hint`)"
+    >
+      <div class="grid sm:grid-cols-2 gap-2">
+        <button
+          v-for="(stack, id) in slot.fonts"
+          :key="id"
+          type="button"
+          class="text-left px-3 py-2.5 rounded border transition-colors"
+          :class="model.fonts[slot.id] === id ? 'border-free bg-bg-tertiary' : 'border-border hover:border-border-hover'"
+          :aria-pressed="model.fonts[slot.id] === id"
+          @click="choose(slot.id, String(id))"
+        >
+          <span class="block text-xs text-text-muted">{{ t(`appearance.fonts.${slot.id === 'mono' ? 'mono' : 'sans'}.${id}`) }}</span>
+          <span class="block text-lg text-text-primary truncate" :style="{ fontFamily: stack }">
+            {{ slot.id === 'mono' ? '0123 ↑ 4.2 GB · 1.87' : t('appearance.typography.sample') }}
+          </span>
+        </button>
+      </div>
+    </SettingsGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MONO_FONTS, SANS_FONTS, type Appearance } from '~~/shared/utils/appearance';
+
+const model = defineModel<Appearance>({ required: true });
+const { t } = useI18n();
+
+type FontSlot = keyof Appearance['fonts'];
+const slots: { id: FontSlot; fonts: Record<string, string> }[] = [
+  { id: 'sans', fonts: SANS_FONTS },
+  { id: 'heading', fonts: SANS_FONTS },
+  { id: 'mono', fonts: MONO_FONTS },
+];
+
+function choose(slot: FontSlot, id: string) {
+  model.value = { ...model.value, fonts: { ...model.value.fonts, [slot]: id } as Appearance['fonts'] };
+}
+</script>
diff --git a/app/composables/useAppearance.ts b/app/composables/useAppearance.ts
new file mode 100644
index 00000000..61342585
--- /dev/null
+++ b/app/composables/useAppearance.ts
@@ -0,0 +1,9 @@
+import { DEFAULT_APPEARANCE, type Appearance } from '~~/shared/utils/appearance';
+
+/**
+ * Site appearance (theme, fonts, login design, images, texts), loaded once by
+ * app/plugins/appearance.ts. The admin page writes to it to preview changes.
+ */
+export function useAppearance() {
+  return useState<Appearance>('appearance', () => structuredClone(DEFAULT_APPEARANCE));
+}
diff --git a/app/pages/admin.vue b/app/pages/admin.vue
index 1b0660cc..9e1fab0f 100644
--- a/app/pages/admin.vue
+++ b/app/pages/admin.vue
@@ -133,6 +133,12 @@ const menuItems = computed(() => [
     icon: 'ph:paint-brush',
     description: t('admin.nav.branding.description'),
   },
+  {
+    label: t('appearance.nav.label'),
+    path: '/admin/appearance',
+    icon: 'ph:palette',
+    description: t('appearance.nav.description'),
+  },
   {
     label: t('admin.nav.settings.label'),
     path: '/admin/settings',
diff --git a/app/pages/admin/appearance.vue b/app/pages/admin/appearance.vue
new file mode 100644
index 00000000..5701a392
--- /dev/null
+++ b/app/pages/admin/appearance.vue
@@ -0,0 +1,3 @@
+<template>
+  <AdminAppearance />
+</template>
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index 9b72e5aa..0a67d5e8 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,133 +1,100 @@
 <template>
-  <div class="relative min-h-screen bg-bg-primary flex items-center justify-center px-4">
-    <div class="absolute top-4 right-4">
-      <LanguageSwitcher />
+  <AuthShell>
+    <div
+      v-if="!status?.registrationOpen && !status?.needsSetup"
+      class="mb-6 p-3 bg-blue-500/10 border border-blue-500/20 rounded flex items-start gap-3"
+    >
+      <Icon name="ph:info" class="text-blue-400 text-lg mt-0.5 shrink-0" />
+      <p class="text-blue-400 text-xs leading-relaxed">
+        {{ t('auth.login.registrationsClosed') }}
+      </p>
     </div>
-    <div class="w-full max-w-md">
-      <!-- Logo -->
-      <div class="text-center mb-8">
-        <div
-          class="w-16 h-16 bg-white rounded-lg flex items-center justify-center mx-auto mb-4 overflow-hidden"
+
+    <form @submit.prevent="handleLogin" class="space-y-4">
+      <div>
+        <label
+          for="username"
+          class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
         >
-          <img
-            v-if="branding?.siteLogoImage"
-            :src="branding.siteLogoImage"
-            alt="Logo"
-            class="w-full h-full object-contain"
-          />
-          <Icon
-            v-else
-            :name="branding?.siteLogo || 'ph:broadcast-bold'"
-            class="text-black text-4xl"
-          />
-        </div>
-        <h1
-          class="text-2xl font-bold tracking-tighter"
-          v-html="branding?.authTitle || branding?.siteName || 'TRACKARR'"
-        ></h1>
-        <div
-          class="text-text-muted text-sm mt-1 [&>p]:m-0"
-          v-html="branding?.authSubtitle || t('auth.defaultSubtitle')"
-        ></div>
+          {{ t('common.username') }}
+        </label>
+        <input
+          id="username"
+          v-model="form.username"
+          type="text"
+          required
+          autocomplete="username"
+          class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
+          :placeholder="t('auth.usernamePlaceholder')"
+        />
       </div>
 
-      <div
-        v-if="!status?.registrationOpen && !status?.needsSetup"
-        class="mb-6 p-3 bg-blue-500/10 border border-blue-500/20 rounded flex items-start gap-3"
-      >
-        <Icon name="ph:info" class="text-blue-400 text-lg mt-0.5 shrink-0" />
-        <p class="text-blue-400 text-xs leading-relaxed">
-          {{ t('auth.login.registrationsClosed') }}
-        </p>
+      <div>
+        <label
+          for="password"
+          class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
+        >
+          {{ t('common.password') }}
+        </label>
+        <input
+          id="password"
+          v-model="form.password"
+          type="password"
+          required
+          autocomplete="current-password"
+          class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
+          :placeholder="t('auth.passwordPlaceholder')"
+        />
       </div>
 
-      <form @submit.prevent="handleLogin" class="space-y-4">
-        <div>
-          <label
-            for="username"
-            class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
-          >
-            {{ t('common.username') }}
-          </label>
-          <input
-            id="username"
-            v-model="form.username"
-            type="text"
-            required
-            autocomplete="username"
-            class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
-            :placeholder="t('auth.usernamePlaceholder')"
-          />
-        </div>
-
-        <div>
-          <label
-            for="password"
-            class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
-          >
-            {{ t('common.password') }}
-          </label>
-          <input
-            id="password"
-            v-model="form.password"
-            type="password"
-            required
-            autocomplete="current-password"
-            class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
-            :placeholder="t('auth.passwordPlaceholder')"
-          />
-        </div>
-
-        <div v-if="error" class="text-red-400 text-sm">
-          {{ error }}
-        </div>
-
-        <!-- Status indicator for ZKE challenge processing -->
-        <div
-          v-if="authStatus"
-          class="text-text-muted text-xs flex items-center gap-2"
-        >
-          <Icon name="ph:spinner" class="animate-spin" />
-          {{ authStatus }}
-        </div>
-
-        <button
-          type="submit"
-          :disabled="loading"
-          class="w-full bg-white text-black font-medium py-2.5 rounded hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-        >
-          <span v-if="loading">{{ t('auth.login.signingIn') }}</span>
-          <span v-else>{{ t('auth.login.signIn') }}</span>
-        </button>
-        <!-- Honeypot: invisible to people, filled by bots (server/utils/honeypot.ts) -->
-        <div class="sr-only" aria-hidden="true">
-          <input
-            v-model="form.hpot_field"
-            type="text"
-            name="hpot_field"
-            tabindex="-1"
-            autocomplete="off"
-          />
-        </div>
-      </form>
+      <div v-if="error" class="text-red-400 text-sm">
+        {{ error }}
+      </div>
 
+      <!-- Status indicator for ZKE challenge processing -->
       <div
-        v-if="status?.registrationOpen"
-        class="mt-6 pt-6 border-t border-border text-center"
+        v-if="authStatus"
+        class="text-text-muted text-xs flex items-center gap-2"
       >
-        <p class="text-text-muted text-sm">
-          {{ t('auth.login.noAccount') }}
-          <NuxtLink
-            to="/auth/register"
-            class="text-white hover:underline font-medium"
-          >
-            {{ t('auth.login.createOne') }}
-          </NuxtLink>
-        </p>
+        <Icon name="ph:spinner" class="animate-spin" />
+        {{ authStatus }}
       </div>
 
+      <button
+        type="submit"
+        :disabled="loading"
+        class="w-full bg-white text-black font-medium py-2.5 rounded hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <span v-if="loading">{{ t('auth.login.signingIn') }}</span>
+        <span v-else>{{ t('auth.login.signIn') }}</span>
+      </button>
+      <!-- Honeypot: invisible to people, filled by bots (server/utils/honeypot.ts) -->
+      <div class="sr-only" aria-hidden="true">
+        <input
+          v-model="form.hpot_field"
+          type="text"
+          name="hpot_field"
+          tabindex="-1"
+          autocomplete="off"
+        />
+      </div>
+    </form>
+
+    <div
+      v-if="status?.registrationOpen"
+      class="mt-6 pt-6 border-t border-border text-center"
+    >
+      <p class="text-text-muted text-sm">
+        {{ t('auth.login.noAccount') }}
+        <NuxtLink
+          to="/auth/register"
+          class="text-white hover:underline font-medium"
+        >
+          {{ t('auth.login.createOne') }}
+        </NuxtLink>
+      </p>
     </div>
-  </div>
+  </AuthShell>
 </template>
 
 <script setup lang="ts">
diff --git a/app/pages/auth/register.vue b/app/pages/auth/register.vue
index 175ab492..35973c62 100644
--- a/app/pages/auth/register.vue
+++ b/app/pages/auth/register.vue
@@ -1,284 +1,251 @@
 <template>
-  <div class="relative min-h-screen bg-bg-primary flex items-center justify-center px-4">
-    <div class="absolute top-4 right-4">
-      <LanguageSwitcher />
+  <AuthShell>
+    <!-- Registration Closed -->
+    <div
+      v-if="
+        !status?.registrationOpen &&
+        !status?.inviteEnabled &&
+        !status?.needsSetup
+      "
+      class="bg-bg-secondary border border-border rounded-lg p-6 text-center"
+    >
+      <Icon
+        name="ph:lock-simple"
+        class="text-4xl text-text-muted mx-auto mb-4"
+      />
+      <h2 class="text-lg font-semibold mb-2">{{ t('auth.register.closedTitle') }}</h2>
+      <p class="text-text-muted text-sm mb-6">
+        {{ t('auth.register.closedText') }}
+      </p>
+      <NuxtLink
+        to="/auth/login"
+        class="inline-block bg-white text-black font-medium px-6 py-2 rounded hover:bg-gray-200 transition-colors"
+      >
+        {{ t('auth.login.signIn') }}
+      </NuxtLink>
     </div>
-    <div class="w-full max-w-md">
-      <!-- Logo -->
-      <div class="text-center mb-8">
-        <div
-          class="w-16 h-16 bg-white rounded-lg flex items-center justify-center mx-auto mb-4 overflow-hidden"
-        >
-          <img
-            v-if="branding?.siteLogoImage"
-            :src="branding.siteLogoImage"
-            alt="Logo"
-            class="w-full h-full object-contain"
-          />
-          <Icon
-            v-else
-            :name="branding?.siteLogo || 'ph:broadcast-bold'"
-            class="text-black text-4xl"
-          />
-        </div>
-        <h1
-          class="text-2xl font-bold tracking-tighter"
-          v-html="branding?.authTitle || branding?.siteName || 'TRACKARR'"
-        ></h1>
-        <div
-          class="text-text-muted text-sm mt-1 [&>p]:m-0"
-          v-html="branding?.authSubtitle || t('auth.defaultSubtitle')"
-        ></div>
-      </div>
 
-      <!-- Registration Closed -->
+    <!-- Register Form -->
+    <div v-else class="bg-bg-secondary border border-border rounded-lg p-6">
+      <h2 class="text-lg font-semibold mb-6">
+        {{
+          status?.needsSetup
+            ? t('auth.register.createAdminAccount')
+            : !status?.registrationOpen && status?.inviteEnabled
+              ? t('auth.register.inviteOnlyTitle')
+              : t('auth.register.createAccount')
+        }}
+      </h2>
+
       <div
-        v-if="
-          !status?.registrationOpen &&
-          !status?.inviteEnabled &&
-          !status?.needsSetup
-        "
-        class="bg-bg-secondary border border-border rounded-lg p-6 text-center"
+        v-if="status?.needsSetup"
+        class="mb-6 p-3 bg-amber-500/10 border border-amber-500/20 rounded"
       >
-        <Icon
-          name="ph:lock-simple"
-          class="text-4xl text-text-muted mx-auto mb-4"
-        />
-        <h2 class="text-lg font-semibold mb-2">{{ t('auth.register.closedTitle') }}</h2>
-        <p class="text-text-muted text-sm mb-6">
-          {{ t('auth.register.closedText') }}
+        <p class="text-amber-400 text-sm">
+          <Icon name="ph:warning" class="inline-block align-[-2px] mr-1" />
+          {{ t('auth.register.firstAccountWarning') }}
         </p>
-        <NuxtLink
-          to="/auth/login"
-          class="inline-block bg-white text-black font-medium px-6 py-2 rounded hover:bg-gray-200 transition-colors"
-        >
-          {{ t('auth.login.signIn') }}
-        </NuxtLink>
       </div>
 
-      <!-- Register Form -->
-      <div v-else class="bg-bg-secondary border border-border rounded-lg p-6">
-        <h2 class="text-lg font-semibold mb-6">
-          {{
-            status?.needsSetup
-              ? t('auth.register.createAdminAccount')
-              : !status?.registrationOpen && status?.inviteEnabled
-                ? t('auth.register.inviteOnlyTitle')
-                : t('auth.register.createAccount')
-          }}
-        </h2>
+      <!-- ZKE Warning -->
+      <div class="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded">
+        <p class="text-red-400 text-sm">
+          <Icon name="ph:shield-warning" class="inline-block align-[-2px] mr-1" />
+          <strong>{{ t('auth.register.zkeTitle') }}</strong>
+          {{ t('auth.register.zkeText') }}
+        </p>
+      </div>
 
-        <div
-          v-if="status?.needsSetup"
-          class="mb-6 p-3 bg-amber-500/10 border border-amber-500/20 rounded"
-        >
-          <p class="text-amber-400 text-sm">
-            <Icon name="ph:warning" class="inline-block align-[-2px] mr-1" />
-            {{ t('auth.register.firstAccountWarning') }}
-          </p>
+      <form @submit.prevent="handleRegister" class="space-y-4">
+        <!-- Invite Code (Required if registration closed) -->
+        <div v-if="status?.inviteEnabled">
+          <label
+            for="inviteCode"
+            class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
+          >
+            {{ t('auth.register.inviteCode') }}
+            <span
+              v-if="status?.registrationOpen"
+              class="text-text-muted/50 normal-case tracking-normal ml-1"
+            >
+              ({{ t('common.optional') }})
+            </span>
+          </label>
+          <input
+            id="inviteCode"
+            v-model="form.inviteCode"
+            type="text"
+            :required="!status?.registrationOpen"
+            class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors font-mono"
+            :placeholder="t('auth.register.inviteCodePlaceholder')"
+          />
         </div>
 
-        <!-- ZKE Warning -->
-        <div class="mb-6 p-3 bg-red-500/10 border border-red-500/20 rounded">
-          <p class="text-red-400 text-sm">
-            <Icon name="ph:shield-warning" class="inline-block align-[-2px] mr-1" />
-            <strong>{{ t('auth.register.zkeTitle') }}</strong>
-            {{ t('auth.register.zkeText') }}
-          </p>
+        <div>
+          <label
+            for="username"
+            class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
+          >
+            {{ t('common.username') }}
+          </label>
+          <input
+            id="username"
+            v-model="form.username"
+            type="text"
+            required
+            autocomplete="username"
+            class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
+            :placeholder="t('auth.register.usernamePlaceholder')"
+          />
         </div>
 
-        <form @submit.prevent="handleRegister" class="space-y-4">
-          <!-- Invite Code (Required if registration closed) -->
-          <div v-if="status?.inviteEnabled">
-            <label
-              for="inviteCode"
-              class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
-            >
-              {{ t('auth.register.inviteCode') }}
-              <span
-                v-if="status?.registrationOpen"
-                class="text-text-muted/50 normal-case tracking-normal ml-1"
-              >
-                ({{ t('common.optional') }})
-              </span>
-            </label>
-            <input
-              id="inviteCode"
-              v-model="form.inviteCode"
-              type="text"
-              :required="!status?.registrationOpen"
-              class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors font-mono"
-              :placeholder="t('auth.register.inviteCodePlaceholder')"
-            />
-          </div>
+        <div>
+          <label
+            for="password"
+            class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
+          >
+            {{ t('common.password') }}
+          </label>
+          <input
+            id="password"
+            v-model="form.password"
+            type="password"
+            required
+            autocomplete="new-password"
+            class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
+            :placeholder="t('auth.register.passwordPlaceholder')"
+          />
+        </div>
 
-          <div>
-            <label
-              for="username"
-              class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
-            >
-              {{ t('common.username') }}
-            </label>
-            <input
-              id="username"
-              v-model="form.username"
-              type="text"
-              required
-              autocomplete="username"
-              class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
-              :placeholder="t('auth.register.usernamePlaceholder')"
-            />
+        <div>
+          <label
+            for="confirmPassword"
+            class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
+          >
+            {{ t('auth.register.confirmPassword') }}
+          </label>
+          <input
+            id="confirmPassword"
+            v-model="form.confirmPassword"
+            type="password"
+            required
+            autocomplete="new-password"
+            class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
+            :placeholder="t('auth.register.confirmPasswordPlaceholder')"
+          />
+        </div>
+
+        <!-- Panic Password (First Admin Only) -->
+        <div
+          v-if="status?.needsSetup"
+          class="pt-4 mt-4 border-t border-border"
+        >
+          <div
+            class="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded"
+          >
+            <p class="text-red-400 text-sm">
+              <Icon name="ph:shield-warning" class="inline-block align-[-2px] mr-1" />
+              {{ t('auth.register.panicWarning') }}
+            </p>
           </div>
 
-          <div>
+          <div class="mb-4">
             <label
-              for="password"
+              for="panicPassword"
               class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
             >
-              {{ t('common.password') }}
+              {{ t('auth.register.panicPassword') }}
             </label>
             <input
-              id="password"
-              v-model="form.password"
+              id="panicPassword"
+              v-model="form.panicPassword"
               type="password"
               required
-              autocomplete="new-password"
               class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
-              :placeholder="t('auth.register.passwordPlaceholder')"
+              :placeholder="t('auth.register.panicPasswordPlaceholder')"
             />
           </div>
 
           <div>
             <label
-              for="confirmPassword"
+              for="confirmPanicPassword"
               class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
             >
-              {{ t('auth.register.confirmPassword') }}
+              {{ t('auth.register.confirmPanicPassword') }}
             </label>
             <input
-              id="confirmPassword"
-              v-model="form.confirmPassword"
+              id="confirmPanicPassword"
+              v-model="form.confirmPanicPassword"
               type="password"
               required
-              autocomplete="new-password"
               class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
-              :placeholder="t('auth.register.confirmPasswordPlaceholder')"
+              :placeholder="t('auth.register.confirmPanicPasswordPlaceholder')"
             />
           </div>
+        </div>
 
-          <!-- Panic Password (First Admin Only) -->
-          <div
-            v-if="status?.needsSetup"
-            class="pt-4 mt-4 border-t border-border"
-          >
-            <div
-              class="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded"
-            >
-              <p class="text-red-400 text-sm">
-                <Icon name="ph:shield-warning" class="inline-block align-[-2px] mr-1" />
-                {{ t('auth.register.panicWarning') }}
-              </p>
-            </div>
-
-            <div class="mb-4">
-              <label
-                for="panicPassword"
-                class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
-              >
-                {{ t('auth.register.panicPassword') }}
-              </label>
-              <input
-                id="panicPassword"
-                v-model="form.panicPassword"
-                type="password"
-                required
-                class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
-                :placeholder="t('auth.register.panicPasswordPlaceholder')"
-              />
-            </div>
-
-            <div>
-              <label
-                for="confirmPanicPassword"
-                class="block text-xs font-medium text-text-muted uppercase tracking-wider mb-2"
-              >
-                {{ t('auth.register.confirmPanicPassword') }}
-              </label>
-              <input
-                id="confirmPanicPassword"
-                v-model="form.confirmPanicPassword"
-                type="password"
-                required
-                class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-white transition-colors"
-                :placeholder="t('auth.register.confirmPanicPasswordPlaceholder')"
-              />
-            </div>
-          </div>
-
-          <div v-if="error" class="text-red-400 text-sm">
-            {{ error }}
-          </div>
+        <div v-if="error" class="text-red-400 text-sm">
+          {{ error }}
+        </div>
 
-          <!-- Status indicator for PoW and ZKE processing -->
-          <div v-if="authStatus" class="space-y-2">
-            <div class="text-text-muted text-xs flex items-center gap-2">
-              <Icon name="ph:spinner" class="animate-spin" />
-              {{ authStatus }}
-            </div>
-            <!-- PoW Progress Bar -->
-            <div
-              v-if="powProgress > 0"
-              class="w-full bg-bg-tertiary rounded-full h-1"
-            >
-              <div
-                class="bg-white h-1 rounded-full transition-all duration-300"
-                :style="{ width: `${Math.min(powProgress, 100)}%` }"
-              />
-            </div>
+        <!-- Status indicator for PoW and ZKE processing -->
+        <div v-if="authStatus" class="space-y-2">
+          <div class="text-text-muted text-xs flex items-center gap-2">
+            <Icon name="ph:spinner" class="animate-spin" />
+            {{ authStatus }}
           </div>
-
-          <button
-            type="submit"
-            :disabled="loading"
-            class="w-full bg-white text-black font-medium py-2.5 rounded hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          <!-- PoW Progress Bar -->
+          <div
+            v-if="powProgress > 0"
+            class="w-full bg-bg-tertiary rounded-full h-1"
           >
-            <span v-if="loading">{{ t('auth.register.creatingAccount') }}</span>
-            <span v-else>{{
-              status?.needsSetup
-                ? t('auth.register.createAdminAccount')
-                : t('auth.register.createAccount')
-            }}</span>
-          </button>
-          <!-- Honeypot: invisible to people, filled by bots (server/utils/honeypot.ts) -->
-          <div class="sr-only" aria-hidden="true">
-            <input
-              v-model="form.hpot_field"
-              type="text"
-              name="hpot_field"
-              tabindex="-1"
-              autocomplete="off"
+            <div
+              class="bg-white h-1 rounded-full transition-all duration-300"
+              :style="{ width: `${Math.min(powProgress, 100)}%` }"
             />
           </div>
-        </form>
+        </div>
 
-        <div
-          v-if="!status?.needsSetup"
-          class="mt-6 pt-6 border-t border-border text-center"
+        <button
+          type="submit"
+          :disabled="loading"
+          class="w-full bg-white text-black font-medium py-2.5 rounded hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          <p class="text-text-muted text-sm">
-            {{ t('auth.register.haveAccount') }}
-            <NuxtLink
-              to="/auth/login"
-              class="text-white hover:underline font-medium"
-            >
-              {{ t('auth.register.signInLink') }}
-            </NuxtLink>
-          </p>
+          <span v-if="loading">{{ t('auth.register.creatingAccount') }}</span>
+          <span v-else>{{
+            status?.needsSetup
+              ? t('auth.register.createAdminAccount')
+              : t('auth.register.createAccount')
+          }}</span>
+        </button>
+        <!-- Honeypot: invisible to people, filled by bots (server/utils/honeypot.ts) -->
+        <div class="sr-only" aria-hidden="true">
+          <input
+            v-model="form.hpot_field"
+            type="text"
+            name="hpot_field"
+            tabindex="-1"
+            autocomplete="off"
+          />
         </div>
-      </div>
+      </form>
 
+      <div
+        v-if="!status?.needsSetup"
+        class="mt-6 pt-6 border-t border-border text-center"
+      >
+        <p class="text-text-muted text-sm">
+          {{ t('auth.register.haveAccount') }}
+          <NuxtLink
+            to="/auth/login"
+            class="text-white hover:underline font-medium"
+          >
+            {{ t('auth.register.signInLink') }}
+          </NuxtLink>
+        </p>
+      </div>
     </div>
-  </div>
+  </AuthShell>
 </template>
 
 <script setup lang="ts">
diff --git a/app/pages/index.vue b/app/pages/index.vue
index f6b1985f..57b0b9c0 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="space-y-6">
+    <!-- Banner set in Admin → Appearance → Images -->
+    <img
+      v-if="appearance.images.homeBanner"
+      :src="appearance.images.homeBanner"
+      alt=""
+      class="w-full h-36 md:h-52 object-cover rounded-lg border border-border"
+    />
+
     <!-- Greeting -->
     <div class="flex flex-wrap items-end justify-between gap-4">
       <div>
@@ -192,6 +200,7 @@ interface Dashboard {
 }
 
 const { t, locale } = useI18n();
+const appearance = useAppearance();
 const { user } = useUserSession();
 const { data, refresh } = await useFetch<Dashboard>('/api/dashboard');
 // Shared with the layout's request (same key): no extra call
diff --git a/app/plugins/appearance.ts b/app/plugins/appearance.ts
new file mode 100644
index 00000000..473b4a34
--- /dev/null
+++ b/app/plugins/appearance.ts
@@ -0,0 +1,30 @@
+import { buildOverrideTree, buildThemeCss, type Appearance } from '~~/shared/utils/appearance';
+
+/**
+ * Applies the admin appearance on every page: a <style> with the theme
+ * variables (rendered on the server, so no flash) and the text overrides
+ * merged into vue-i18n, for the current locale and each one switched to.
+ */
+export default defineNuxtPlugin({
+  name: 'trackarr:appearance',
+  dependsOn: ['i18n:plugin', 'trackarr:locale-cookie'],
+  async setup(nuxtApp) {
+    const appearance = useAppearance();
+    const { data } = await useAsyncData('appearance', () => $fetch<Appearance>('/api/appearance'));
+    if (data.value) appearance.value = data.value;
+
+    useHead({
+      style: [{ key: 'appearance', textContent: computed(() => buildThemeCss(appearance.value)) }],
+    });
+
+    const i18n = nuxtApp.$i18n;
+    const applyTexts = (locale: string) => {
+      const texts = appearance.value.texts[locale as keyof Appearance['texts']];
+      if (!texts) return;
+      // Message functions, not strings: no message compiler involved
+      i18n.mergeLocaleMessage(locale, buildOverrideTree(texts) as never);
+    };
+    applyTexts(i18n.locale.value);
+    nuxtApp.hook('i18n:localeSwitched', ({ newLocale }) => applyTexts(newLocale));
+  },
+});
diff --git a/app/utils/authBranding.ts b/app/utils/authBranding.ts
new file mode 100644
index 00000000..be968801
--- /dev/null
+++ b/app/utils/authBranding.ts
@@ -0,0 +1,9 @@
+/** Fields of /api/branding the sign-in and sign-up pages show */
+export interface AuthBranding {
+  siteName: string;
+  siteLogo: string;
+  siteLogoImage: string | null;
+  siteFavicon: string | null;
+  authTitle: string | null;
+  authSubtitle: string | null;
+}
diff --git a/doc/.vitepress/config.ts b/doc/.vitepress/config.ts
index 6eba4861..b4c1236f 100644
--- a/doc/.vitepress/config.ts
+++ b/doc/.vitepress/config.ts
@@ -47,6 +47,7 @@ export default defineConfig({
           items: [
             { text: 'Getting Started', link: '/guide/getting-started' },
             { text: 'Configuration', link: '/guide/configuration' },
+            { text: 'Appearance', link: '/guide/appearance' },
             { text: 'Monitoring', link: '/guide/monitoring' },
             { text: 'Backup & Restore', link: '/guide/backup-restore' },
             { text: 'High Availability', link: '/guide/high-availability' },
diff --git a/doc/guide/appearance.md b/doc/guide/appearance.md
new file mode 100644
index 00000000..a1434156
--- /dev/null
+++ b/doc/guide/appearance.md
@@ -0,0 +1,50 @@
+# Appearance
+
+**Admin Panel → Appearance** changes the look of the whole site without touching code. Every change is previewed live, for you only, until you click **Save**.
+
+## Theme
+
+- **Presets**: Trackarr, Midnight, Forest, Sunset, Monochrome and High contrast. Each one sets both the light and the dark theme.
+- **Colours**: adjust any of the 15 colours of the light and dark themes (backgrounds, borders, text, buttons, and the meaningful colours: accent/freeleech, upload, download, errors). Picking a preset clears the colours set by hand.
+- **Corners**: from square to round, for buttons, fields and cards.
+
+Members still choose light, dark or system in their menu.
+
+## Typography
+
+Pick the font of the body text, of the headings and of numbers and code. Fonts are bundled with Trackarr (the Content Security Policy only allows fonts from the site itself):
+
+| Text           | Fonts                                                                  |
+| -------------- | ---------------------------------------------------------------------- |
+| Body, headings | IBM Plex Sans, Inter, Space Grotesk, Nunito, Source Serif 4, system    |
+| Numbers, code  | IBM Plex Mono, JetBrains Mono, system monospace                        |
+
+## Images
+
+| Slot                | Where                                              |
+| ------------------- | -------------------------------------------------- |
+| Login page picture  | Split and Background login designs                 |
+| Home banner         | Top of the member dashboard                        |
+
+PNG, JPEG or WebP, 8 MB max. Images are saved as soon as they are uploaded and stored in the database, like logos. The logo and favicon stay in **Branding**.
+
+## Login page
+
+Four designs for the sign-in and sign-up pages, with a live preview:
+
+- **Centered**: logo and form in the middle (default)
+- **Split**: picture on the left, form on the right
+- **Background**: full-page picture behind a translucent card
+- **Minimal**: plain, left-aligned, without the logo tile
+
+Without a picture, Split and Background use the accent colour.
+
+## Texts
+
+Replace any text of the interface, language by language: search a key or a text, type your version, save. An empty field restores the shipped text.
+
+- Keep the words between braces, such as `{name}`: they are replaced by values.
+- Plural forms are separated by ` | `, like in the original text.
+- Texts are shown as plain text, never as HTML.
+
+Overrides are kept across updates. A text that changes in a new release keeps your version until you reset it.
diff --git a/i18n/locales/de/appearance.json b/i18n/locales/de/appearance.json
new file mode 100644
index 00000000..87ed77b6
--- /dev/null
+++ b/i18n/locales/de/appearance.json
@@ -0,0 +1,129 @@
+{
+  "appearance": {
+    "nav": {
+      "label": "Erscheinungsbild",
+      "description": "Farben, Schriften, Bilder, Anmeldeseite und Texte"
+    },
+    "tabs": {
+      "theme": "Design",
+      "typography": "Typografie",
+      "images": "Bilder",
+      "login": "Anmeldeseite",
+      "texts": "Texte"
+    },
+    "unsaved": "Ungespeicherte Änderungen",
+    "discard": "Verwerfen",
+    "previewHint": "Änderungen werden bis zum Speichern nur für dich auf der ganzen Seite angezeigt.",
+    "saved": "Erscheinungsbild gespeichert",
+    "saveFailed": "Erscheinungsbild konnte nicht gespeichert werden",
+    "presets": {
+      "default": "Trackarr",
+      "midnight": "Mitternacht",
+      "forest": "Wald",
+      "sunset": "Abendrot",
+      "mono": "Monochrom",
+      "contrast": "Hoher Kontrast"
+    },
+    "theme": {
+      "presets": "Vorlage",
+      "presetsHint": "Ein Ausgangspunkt für helles und dunkles Design. Eine Vorlage zu wählen löscht die von Hand gesetzten Farben.",
+      "colors": "Farben",
+      "colorsHint": "Passe jede Farbe des hellen und dunklen Designs an. Mitglieder wählen weiterhin hell, dunkel oder System.",
+      "light": "Hell",
+      "dark": "Dunkel",
+      "resetColors": "Auf Vorlage zurücksetzen",
+      "groups": {
+        "surfaces": "Flächen",
+        "text": "Text",
+        "meaning": "Bedeutungsfarben"
+      },
+      "tokens": {
+        "bg": "Seitenhintergrund",
+        "surface": "Karten",
+        "raised": "Erhöhte Bereiche",
+        "hover": "Hover",
+        "line": "Rahmen",
+        "line-strong": "Starke Rahmen",
+        "ink": "Haupttext",
+        "ink-2": "Nebentext",
+        "ink-3": "Gedämpfter Text",
+        "contrast": "Primäre Schaltflächen",
+        "contrast-inv": "Text auf primären Schaltflächen",
+        "free": "Akzent und Freeleech",
+        "seed": "Upload und Seeder",
+        "leech": "Download und Leecher",
+        "danger": "Fehler und Gefahr"
+      },
+      "radius": "Ecken",
+      "radiusHint": "Rundung von Schaltflächen, Feldern und Karten.",
+      "radii": {
+        "none": "Eckig",
+        "small": "Klein",
+        "default": "Standard",
+        "large": "Groß",
+        "round": "Rund"
+      }
+    },
+    "typography": {
+      "sans": "Fließtext",
+      "sansHint": "Schrift der gesamten Oberfläche.",
+      "heading": "Überschriften",
+      "headingHint": "Schrift der Seiten- und Abschnittstitel.",
+      "mono": "Zahlen und Code",
+      "monoHint": "Schrift für Größen, Ratios, Hashes und Code.",
+      "sample": "Franz jagt im komplett verwahrlosten Taxi"
+    },
+    "fonts": {
+      "sans": {
+        "plex": "IBM Plex Sans",
+        "inter": "Inter",
+        "grotesk": "Space Grotesk",
+        "nunito": "Nunito",
+        "serif": "Source Serif 4",
+        "system": "Systemschrift"
+      },
+      "mono": {
+        "plex": "IBM Plex Mono",
+        "jetbrains": "JetBrains Mono",
+        "system": "System-Monospace"
+      }
+    },
+    "images": {
+      "loginImage": "Bild der Anmeldeseite",
+      "loginImageHint": "Wird von den Designs Geteilt und Hintergrund angezeigt.",
+      "homeBanner": "Startseiten-Banner",
+      "homeBannerHint": "Breites Bild oben im Dashboard der Mitglieder.",
+      "none": "Kein Bild",
+      "upload": "Hochladen",
+      "replace": "Ersetzen",
+      "remove": "Entfernen",
+      "formats": "PNG, JPEG oder WebP, max. 8 MB. Wird sofort gespeichert.",
+      "failed": "Bild konnte nicht aktualisiert werden"
+    },
+    "login": {
+      "layout": "Design",
+      "layoutHint": "Für die Anmelde- und Registrierungsseite.",
+      "layouts": {
+        "centered": "Zentriert",
+        "centeredHint": "Logo und Formular in der Seitenmitte.",
+        "split": "Geteilt",
+        "splitHint": "Bild links, Formular rechts.",
+        "background": "Hintergrund",
+        "backgroundHint": "Ganzseitiges Bild hinter einer durchscheinenden Karte.",
+        "minimal": "Minimal",
+        "minimalHint": "Schlicht, linksbündig, ohne Logo-Kachel."
+      },
+      "imageHint": "Ohne Bild nutzt dieses Design die Akzentfarbe. Füge eines im Tab Bilder hinzu.",
+      "preview": "Vorschau"
+    },
+    "texts": {
+      "hint": "Ersetze jeden Text der Oberfläche, Sprache für Sprache. Lass ein Feld leer, um den mitgelieferten Text zu behalten.",
+      "locale": "Sprache",
+      "search": "Schlüssel oder Text suchen…",
+      "onlyModified": "Nur geänderte",
+      "results": "Kein Text | 1 Text | {n} Texte",
+      "empty": "Kein Text passt.",
+      "placeholders": "Behalte die Wörter in geschweiften Klammern aus dem Originaltext: Sie werden durch Werte wie Namen oder Zahlen ersetzt. Pluralformen werden durch einen senkrechten Strich mit Leerzeichen getrennt."
+    }
+  }
+}
diff --git a/i18n/locales/en/appearance.json b/i18n/locales/en/appearance.json
new file mode 100644
index 00000000..f5502d0a
--- /dev/null
+++ b/i18n/locales/en/appearance.json
@@ -0,0 +1,129 @@
+{
+  "appearance": {
+    "nav": {
+      "label": "Appearance",
+      "description": "Colours, fonts, images, login page and texts"
+    },
+    "tabs": {
+      "theme": "Theme",
+      "typography": "Typography",
+      "images": "Images",
+      "login": "Login page",
+      "texts": "Texts"
+    },
+    "unsaved": "Unsaved changes",
+    "discard": "Discard",
+    "previewHint": "Changes are previewed on the whole site for you only, until you save them.",
+    "saved": "Appearance saved",
+    "saveFailed": "Could not save the appearance",
+    "presets": {
+      "default": "Trackarr",
+      "midnight": "Midnight",
+      "forest": "Forest",
+      "sunset": "Sunset",
+      "mono": "Monochrome",
+      "contrast": "High contrast"
+    },
+    "theme": {
+      "presets": "Preset",
+      "presetsHint": "A starting point for both light and dark themes. Picking one clears the colours set by hand.",
+      "colors": "Colours",
+      "colorsHint": "Adjust each colour of the light and dark themes. Members still choose light, dark or system.",
+      "light": "Light",
+      "dark": "Dark",
+      "resetColors": "Reset to preset",
+      "groups": {
+        "surfaces": "Surfaces",
+        "text": "Text",
+        "meaning": "Meaningful colours"
+      },
+      "tokens": {
+        "bg": "Page background",
+        "surface": "Cards",
+        "raised": "Raised areas",
+        "hover": "Hover",
+        "line": "Borders",
+        "line-strong": "Strong borders",
+        "ink": "Main text",
+        "ink-2": "Secondary text",
+        "ink-3": "Muted text",
+        "contrast": "Primary buttons",
+        "contrast-inv": "Text on primary buttons",
+        "free": "Accent and freeleech",
+        "seed": "Upload and seeders",
+        "leech": "Download and leechers",
+        "danger": "Errors and danger"
+      },
+      "radius": "Corners",
+      "radiusHint": "Roundness of buttons, fields and cards.",
+      "radii": {
+        "none": "Square",
+        "small": "Small",
+        "default": "Default",
+        "large": "Large",
+        "round": "Round"
+      }
+    },
+    "typography": {
+      "sans": "Body text",
+      "sansHint": "Font of the whole interface.",
+      "heading": "Headings",
+      "headingHint": "Font of page and section titles.",
+      "mono": "Numbers and code",
+      "monoHint": "Font of sizes, ratios, hashes and code.",
+      "sample": "The quick brown fox seeds"
+    },
+    "fonts": {
+      "sans": {
+        "plex": "IBM Plex Sans",
+        "inter": "Inter",
+        "grotesk": "Space Grotesk",
+        "nunito": "Nunito",
+        "serif": "Source Serif 4",
+        "system": "System font"
+      },
+      "mono": {
+        "plex": "IBM Plex Mono",
+        "jetbrains": "JetBrains Mono",
+        "system": "System monospace"
+      }
+    },
+    "images": {
+      "loginImage": "Login page picture",
+      "loginImageHint": "Shown by the Split and Background login designs.",
+      "homeBanner": "Home banner",
+      "homeBannerHint": "Wide picture at the top of the member dashboard.",
+      "none": "No picture",
+      "upload": "Upload",
+      "replace": "Replace",
+      "remove": "Remove",
+      "formats": "PNG, JPEG or WebP, 8 MB max. Saved right away.",
+      "failed": "Could not update the picture"
+    },
+    "login": {
+      "layout": "Design",
+      "layoutHint": "Used by the sign-in and sign-up pages.",
+      "layouts": {
+        "centered": "Centered",
+        "centeredHint": "Logo and form in the middle of the page.",
+        "split": "Split",
+        "splitHint": "Picture on the left, form on the right.",
+        "background": "Background",
+        "backgroundHint": "Full-page picture behind a translucent card.",
+        "minimal": "Minimal",
+        "minimalHint": "Plain, left-aligned, without logo tile."
+      },
+      "imageHint": "Without a picture, this design uses the accent colour. Add one in the Images tab.",
+      "preview": "Preview"
+    },
+    "texts": {
+      "hint": "Replace any text of the interface, language by language. Leave a field empty to keep the shipped text.",
+      "locale": "Language",
+      "search": "Search a key or a text…",
+      "onlyModified": "Modified only",
+      "results": "No text | 1 text | {n} texts",
+      "empty": "No text matches.",
+      "placeholders": "Keep the words between braces of the original text: they are replaced by values such as names or numbers. Plural forms are separated by a vertical bar surrounded by spaces."
+    }
+  }
+}
diff --git a/i18n/locales/es/appearance.json b/i18n/locales/es/appearance.json
new file mode 100644
index 00000000..0647b44b
--- /dev/null
+++ b/i18n/locales/es/appearance.json
@@ -0,0 +1,129 @@
+{
+  "appearance": {
+    "nav": {
+      "label": "Apariencia",
+      "description": "Colores, fuentes, imágenes, página de acceso y textos"
+    },
+    "tabs": {
+      "theme": "Tema",
+      "typography": "Tipografía",
+      "images": "Imágenes",
+      "login": "Página de acceso",
+      "texts": "Textos"
+    },
+    "unsaved": "Cambios sin guardar",
+    "discard": "Descartar",
+    "previewHint": "Los cambios se previsualizan en todo el sitio, solo para ti, hasta que los guardes.",
+    "saved": "Apariencia guardada",
+    "saveFailed": "No se pudo guardar la apariencia",
+    "presets": {
+      "default": "Trackarr",
+      "midnight": "Medianoche",
+      "forest": "Bosque",
+      "sunset": "Atardecer",
+      "mono": "Monocromo",
+      "contrast": "Alto contraste"
+    },
+    "theme": {
+      "presets": "Preajuste",
+      "presetsHint": "Un punto de partida para los temas claro y oscuro. Elegir uno borra los colores ajustados a mano.",
+      "colors": "Colores",
+      "colorsHint": "Ajusta cada color de los temas claro y oscuro. Los miembros siguen eligiendo claro, oscuro o sistema.",
+      "light": "Claro",
+      "dark": "Oscuro",
+      "resetColors": "Volver al preajuste",
+      "groups": {
+        "surfaces": "Superficies",
+        "text": "Texto",
+        "meaning": "Colores con significado"
+      },
+      "tokens": {
+        "bg": "Fondo de página",
+        "surface": "Tarjetas",
+        "raised": "Zonas elevadas",
+        "hover": "Al pasar el ratón",
+        "line": "Bordes",
+        "line-strong": "Bordes marcados",
+        "ink": "Texto principal",
+        "ink-2": "Texto secundario",
+        "ink-3": "Texto atenuado",
+        "contrast": "Botones principales",
+        "contrast-inv": "Texto de los botones principales",
+        "free": "Acento y freeleech",
+        "seed": "Subida y seeders",
+        "leech": "Descarga y leechers",
+        "danger": "Errores y peligro"
+      },
+      "radius": "Esquinas",
+      "radiusHint": "Redondez de botones, campos y tarjetas.",
+      "radii": {
+        "none": "Cuadradas",
+        "small": "Pequeñas",
+        "default": "Por defecto",
+        "large": "Grandes",
+        "round": "Redondas"
+      }
+    },
+    "typography": {
+      "sans": "Texto",
+      "sansHint": "Fuente de toda la interfaz.",
+      "heading": "Títulos",
+      "headingHint": "Fuente de los títulos de páginas y secciones.",
+      "mono": "Números y código",
+      "monoHint": "Fuente de tamaños, ratios, hashes y código.",
+      "sample": "El veloz murciélago hindú comía feliz"
+    },
+    "fonts": {
+      "sans": {
+        "plex": "IBM Plex Sans",
+        "inter": "Inter",
+        "grotesk": "Space Grotesk",
+        "nunito": "Nunito",
+        "serif": "Source Serif 4",
+        "system": "Fuente del sistema"
+      },
+      "mono": {
+        "plex": "IBM Plex Mono",
+        "jetbrains": "JetBrains Mono",
+        "system": "Monoespaciada del sistema"
+      }
+    },
+    "images": {
+      "loginImage": "Imagen de la página de acceso",
+      "loginImageHint": "La muestran los diseños Dividido y Fondo.",
+      "homeBanner": "Banner de inicio",
+      "homeBannerHint": "Imagen ancha en la parte superior del panel de los miembros.",
+      "none": "Sin imagen",
+      "upload": "Subir",
+      "replace": "Reemplazar",
+      "remove": "Quitar",
+      "formats": "PNG, JPEG o WebP, 8 MB máx. Se guarda al instante.",
+      "failed": "No se pudo actualizar la imagen"
+    },
+    "login": {
+      "layout": "Diseño",
+      "layoutHint": "Lo usan las páginas de acceso y de registro.",
+      "layouts": {
+        "centered": "Centrado",
+        "centeredHint": "Logo y formulario en el centro de la página.",
+        "split": "Dividido",
+        "splitHint": "Imagen a la izquierda, formulario a la derecha.",
+        "background": "Fondo",
+        "backgroundHint": "Imagen a pantalla completa tras una tarjeta translúcida.",
+        "minimal": "Mínimo",
+        "minimalHint": "Sobrio, alineado a la izquierda, sin logo."
+      },
+      "imageHint": "Sin imagen, este diseño usa el color de acento. Añade una en la pestaña Imágenes.",
+      "preview": "Vista previa"
+    },
+    "texts": {
+      "hint": "Reemplaza cualquier texto de la interfaz, idioma por idioma. Deja un campo vacío para conservar el texto original.",
+      "locale": "Idioma",
+      "search": "Buscar una clave o un texto…",
+      "onlyModified": "Solo modificados",
+      "results": "Ningún texto | 1 texto | {n} textos",
+      "empty": "Ningún texto coincide.",
+      "placeholders": "Conserva las palabras entre llaves del texto original: se sustituyen por valores como nombres o números. Las formas plurales se separan con una barra vertical rodeada de espacios."
+    }
+  }
+}
diff --git a/i18n/locales/fr/appearance.json b/i18n/locales/fr/appearance.json
new file mode 100644
index 00000000..8dfe0be4
--- /dev/null
+++ b/i18n/locales/fr/appearance.json
@@ -0,0 +1,129 @@
+{
+  "appearance": {
+    "nav": {
+      "label": "Apparence",
+      "description": "Couleurs, polices, images, page de connexion et textes"
+    },
+    "tabs": {
+      "theme": "Thème",
+      "typography": "Typographie",
+      "images": "Images",
+      "login": "Page de connexion",
+      "texts": "Textes"
+    },
+    "unsaved": "Modifications non enregistrées",
+    "discard": "Annuler",
+    "previewHint": "Les modifications sont prévisualisées sur tout le site, pour vous seul, jusqu'à l'enregistrement.",
+    "saved": "Apparence enregistrée",
+    "saveFailed": "Impossible d'enregistrer l'apparence",
+    "presets": {
+      "default": "Trackarr",
+      "midnight": "Minuit",
+      "forest": "Forêt",
+      "sunset": "Crépuscule",
+      "mono": "Monochrome",
+      "contrast": "Contraste élevé"
+    },
+    "theme": {
+      "presets": "Préréglage",
+      "presetsHint": "Une base pour les thèmes clair et sombre. En choisir un efface les couleurs réglées à la main.",
+      "colors": "Couleurs",
+      "colorsHint": "Ajustez chaque couleur des thèmes clair et sombre. Les membres choisissent toujours clair, sombre ou système.",
+      "light": "Clair",
+      "dark": "Sombre",
+      "resetColors": "Revenir au préréglage",
+      "groups": {
+        "surfaces": "Surfaces",
+        "text": "Texte",
+        "meaning": "Couleurs porteuses de sens"
+      },
+      "tokens": {
+        "bg": "Fond de page",
+        "surface": "Cartes",
+        "raised": "Zones surélevées",
+        "hover": "Survol",
+        "line": "Bordures",
+        "line-strong": "Bordures marquées",
+        "ink": "Texte principal",
+        "ink-2": "Texte secondaire",
+        "ink-3": "Texte atténué",
+        "contrast": "Boutons principaux",
+        "contrast-inv": "Texte des boutons principaux",
+        "free": "Accent et freeleech",
+        "seed": "Upload et seeders",
+        "leech": "Download et leechers",
+        "danger": "Erreurs et danger"
+      },
+      "radius": "Coins",
+      "radiusHint": "Arrondi des boutons, champs et cartes.",
+      "radii": {
+        "none": "Carré",
+        "small": "Petit",
+        "default": "Par défaut",
+        "large": "Grand",
+        "round": "Rond"
+      }
+    },
+    "typography": {
+      "sans": "Texte courant",
+      "sansHint": "Police de toute l'interface.",
+      "heading": "Titres",
+      "headingHint": "Police des titres de pages et de sections.",
+      "mono": "Chiffres et code",
+      "monoHint": "Police des tailles, ratios, hashs et du code.",
+      "sample": "Portez ce vieux whisky au juge blond"
+    },
+    "fonts": {
+      "sans": {
+        "plex": "IBM Plex Sans",
+        "inter": "Inter",
+        "grotesk": "Space Grotesk",
+        "nunito": "Nunito",
+        "serif": "Source Serif 4",
+        "system": "Police système"
+      },
+      "mono": {
+        "plex": "IBM Plex Mono",
+        "jetbrains": "JetBrains Mono",
+        "system": "Monospace système"
+      }
+    },
+    "images": {
+      "loginImage": "Image de la page de connexion",
+      "loginImageHint": "Affichée par les designs Divisé et Arrière-plan.",
+      "homeBanner": "Bannière d'accueil",
+      "homeBannerHint": "Grande image en haut du tableau de bord des membres.",
+      "none": "Pas d'image",
+      "upload": "Envoyer",
+      "replace": "Remplacer",
+      "remove": "Supprimer",
+      "formats": "PNG, JPEG ou WebP, 8 Mo max. Enregistrée immédiatement.",
+      "failed": "Impossible de mettre à jour l'image"
+    },
+    "login": {
+      "layout": "Design",
+      "layoutHint": "Utilisé par les pages de connexion et d'inscription.",
+      "layouts": {
+        "centered": "Centré",
+        "centeredHint": "Logo et formulaire au milieu de la page.",
+        "split": "Divisé",
+        "splitHint": "Image à gauche, formulaire à droite.",
+        "background": "Arrière-plan",
+        "backgroundHint": "Image en plein écran derrière une carte translucide.",
+        "minimal": "Minimal",
+        "minimalHint": "Sobre, aligné à gauche, sans tuile de logo."
+      },
+      "imageHint": "Sans image, ce design utilise la couleur d'accent. Ajoutez-en une dans l'onglet Images.",
+      "preview": "Aperçu"
+    },
+    "texts": {
+      "hint": "Remplacez n'importe quel texte de l'interface, langue par langue. Laissez un champ vide pour garder le texte d'origine.",
+      "locale": "Langue",
+      "search": "Rechercher une clé ou un texte…",
+      "onlyModified": "Modifiés uniquement",
+      "results": "Aucun texte | 1 texte | {n} textes",
+      "empty": "Aucun texte ne correspond.",
+      "placeholders": "Gardez les mots entre accolades du texte d'origine : ils sont remplacés par des valeurs comme des noms ou des nombres. Les formes plurielles sont séparées par une barre verticale entourée d'espaces."
+    }
+  }
+}
diff --git a/i18n/locales/it/appearance.json b/i18n/locales/it/appearance.json
new file mode 100644
index 00000000..be599267
--- /dev/null
+++ b/i18n/locales/it/appearance.json
@@ -0,0 +1,129 @@
+{
+  "appearance": {
+    "nav": {
+      "label": "Aspetto",
+      "description": "Colori, font, immagini, pagina di accesso e testi"
+    },
+    "tabs": {
+      "theme": "Tema",
+      "typography": "Tipografia",
+      "images": "Immagini",
+      "login": "Pagina di accesso",
+      "texts": "Testi"
+    },
+    "unsaved": "Modifiche non salvate",
+    "discard": "Annulla",
+    "previewHint": "Le modifiche sono visibili in anteprima su tutto il sito, solo per te, finché non le salvi.",
+    "saved": "Aspetto salvato",
+    "saveFailed": "Impossibile salvare l'aspetto",
+    "presets": {
+      "default": "Trackarr",
+      "midnight": "Mezzanotte",
+      "forest": "Foresta",
+      "sunset": "Tramonto",
+      "mono": "Monocromatico",
+      "contrast": "Contrasto elevato"
+    },
+    "theme": {
+      "presets": "Predefinito",
+      "presetsHint": "Una base per i temi chiaro e scuro. Sceglierne uno cancella i colori impostati a mano.",
+      "colors": "Colori",
+      "colorsHint": "Regola ogni colore dei temi chiaro e scuro. I membri scelgono sempre chiaro, scuro o sistema.",
+      "light": "Chiaro",
+      "dark": "Scuro",
+      "resetColors": "Torna al predefinito",
+      "groups": {
+        "surfaces": "Superfici",
+        "text": "Testo",
+        "meaning": "Colori con significato"
+      },
+      "tokens": {
+        "bg": "Sfondo della pagina",
+        "surface": "Schede",
+        "raised": "Aree in rilievo",
+        "hover": "Passaggio del mouse",
+        "line": "Bordi",
+        "line-strong": "Bordi marcati",
+        "ink": "Testo principale",
+        "ink-2": "Testo secondario",
+        "ink-3": "Testo attenuato",
+        "contrast": "Pulsanti principali",
+        "contrast-inv": "Testo dei pulsanti principali",
+        "free": "Accento e freeleech",
+        "seed": "Upload e seeder",
+        "leech": "Download e leecher",
+        "danger": "Errori e pericolo"
+      },
+      "radius": "Angoli",
+      "radiusHint": "Arrotondamento di pulsanti, campi e schede.",
+      "radii": {
+        "none": "Squadrati",
+        "small": "Piccoli",
+        "default": "Predefiniti",
+        "large": "Grandi",
+        "round": "Rotondi"
+      }
+    },
+    "typography": {
+      "sans": "Testo",
+      "sansHint": "Font di tutta l'interfaccia.",
+      "heading": "Titoli",
+      "headingHint": "Font dei titoli di pagine e sezioni.",
+      "mono": "Numeri e codice",
+      "monoHint": "Font di dimensioni, ratio, hash e codice.",
+      "sample": "Quel vituperabile xenofobo zelante"
+    },
+    "fonts": {
+      "sans": {
+        "plex": "IBM Plex Sans",
+        "inter": "Inter",
+        "grotesk": "Space Grotesk",
+        "nunito": "Nunito",
+        "serif": "Source Serif 4",
+        "system": "Font di sistema"
+      },
+      "mono": {
+        "plex": "IBM Plex Mono",
+        "jetbrains": "JetBrains Mono",
+        "system": "Monospazio di sistema"
+      }
+    },
+    "images": {
+      "loginImage": "Immagine della pagina di accesso",
+      "loginImageHint": "Mostrata dai design Diviso e Sfondo.",
+      "homeBanner": "Banner della home",
+      "homeBannerHint": "Immagine larga in cima alla dashboard dei membri.",
+      "none": "Nessuna immagine",
+      "upload": "Carica",
+      "replace": "Sostituisci",
+      "remove": "Rimuovi",
+      "formats": "PNG, JPEG o WebP, max 8 MB. Salvata subito.",
+      "failed": "Impossibile aggiornare l'immagine"
+    },
+    "login": {
+      "layout": "Design",
+      "layoutHint": "Usato dalle pagine di accesso e di registrazione.",
+      "layouts": {
+        "centered": "Centrato",
+        "centeredHint": "Logo e modulo al centro della pagina.",
+        "split": "Diviso",
+        "splitHint": "Immagine a sinistra, modulo a destra.",
+        "background": "Sfondo",
+        "backgroundHint": "Immagine a tutta pagina dietro una scheda traslucida.",
+        "minimal": "Minimale",
+        "minimalHint": "Sobrio, allineato a sinistra, senza logo."
+      },
+      "imageHint": "Senza immagine, questo design usa il colore d'accento. Aggiungine una nella scheda Immagini.",
+      "preview": "Anteprima"
+    },
+    "texts": {
+      "hint": "Sostituisci qualsiasi testo dell'interfaccia, lingua per lingua. Lascia un campo vuoto per mantenere il testo originale.",
+      "locale": "Lingua",
+      "search": "Cerca una chiave o un testo…",
+      "onlyModified": "Solo modificati",
+      "results": "Nessun testo | 1 testo | {n} testi",
+      "empty": "Nessun testo corrisponde.",
+      "placeholders": "Mantieni le parole tra parentesi graffe del testo originale: vengono sostituite da valori come nomi o numeri. Le forme plurali sono separate da una barra verticale circondata da spazi."
+    }
+  }
+}
diff --git a/i18n/locales/ja/appearance.json b/i18n/locales/ja/appearance.json
new file mode 100644
index 00000000..a9436638
--- /dev/null
+++ b/i18n/locales/ja/appearance.json
@@ -0,0 +1,129 @@
+{
+  "appearance": {
+    "nav": {
+      "label": "外観",
+      "description": "色、フォント、画像、ログインページ、テキスト"
+    },
+    "tabs": {
+      "theme": "テーマ",
+      "typography": "タイポグラフィ",
+      "images": "画像",
+      "login": "ログインページ",
+      "texts": "テキスト"
+    },
+    "unsaved": "未保存の変更があります",
+    "discard": "破棄",
+    "previewHint": "保存するまで、変更はあなたにだけサイト全体でプレビュー表示されます。",
+    "saved": "外観を保存しました",
+    "saveFailed": "外観を保存できませんでした",
+    "presets": {
+      "default": "Trackarr",
+      "midnight": "ミッドナイト",
+      "forest": "フォレスト",
+      "sunset": "サンセット",
+      "mono": "モノクロ",
+      "contrast": "ハイコントラスト"
+    },
+    "theme": {
+      "presets": "プリセット",
+      "presetsHint": "ライトとダークの両テーマの出発点です。選ぶと手動で設定した色は消去されます。",
+      "colors": "色",
+      "colorsHint": "ライトとダークの各色を調整します。メンバーは引き続きライト、ダーク、システムを選べます。",
+      "light": "ライト",
+      "dark": "ダーク",
+      "resetColors": "プリセットに戻す",
+      "groups": {
+        "surfaces": "面",
+        "text": "テキスト",
+        "meaning": "意味を持つ色"
+      },
+      "tokens": {
+        "bg": "ページ背景",
+        "surface": "カード",
+        "raised": "浮き上がった領域",
+        "hover": "ホバー",
+        "line": "枠線",
+        "line-strong": "強い枠線",
+        "ink": "本文",
+        "ink-2": "補足テキスト",
+        "ink-3": "控えめなテキスト",
+        "contrast": "主要ボタン",
+        "contrast-inv": "主要ボタンの文字",
+        "free": "アクセントとフリーリーチ",
+        "seed": "アップロードとシーダー",
+        "leech": "ダウンロードとリーチャー",
+        "danger": "エラーと危険"
+      },
+      "radius": "角",
+      "radiusHint": "ボタン、入力欄、カードの丸み。",
+      "radii": {
+        "none": "四角",
+        "small": "小",
+        "default": "標準",
+        "large": "大",
+        "round": "丸"
+      }
+    },
+    "typography": {
+      "sans": "本文",
+      "sansHint": "インターフェース全体のフォント。",
+      "heading": "見出し",
+      "headingHint": "ページやセクションのタイトルのフォント。",
+      "mono": "数字とコード",
+      "monoHint": "サイズ、レシオ、ハッシュ、コードのフォント。",
+      "sample": "いろはにほへと ちりぬるを"
+    },
+    "fonts": {
+      "sans": {
+        "plex": "IBM Plex Sans",
+        "inter": "Inter",
+        "grotesk": "Space Grotesk",
+        "nunito": "Nunito",
+        "serif": "Source Serif 4",
+        "system": "システムフォント"
+      },
+      "mono": {
+        "plex": "IBM Plex Mono",
+        "jetbrains": "JetBrains Mono",
+        "system": "システム等幅フォント"
+      }
+    },
+    "images": {
+      "loginImage": "ログインページの画像",
+      "loginImageHint": "「分割」と「背景」のデザインで表示されます。",
+      "homeBanner": "ホームのバナー",
+      "homeBannerHint": "メンバーのダッシュボード上部に表示される横長の画像。",
+      "none": "画像なし",
+      "upload": "アップロード",
+      "replace": "置き換え",
+      "remove": "削除",
+      "formats": "PNG、JPEG、WebP、最大 8 MB。すぐに保存されます。",
+      "failed": "画像を更新できませんでした"
+    },
+    "login": {
+      "layout": "デザイン",
+      "layoutHint": "ログインページと登録ページで使われます。",
+      "layouts": {
+        "centered": "中央",
+        "centeredHint": "ロゴとフォームをページ中央に配置。",
+        "split": "分割",
+        "splitHint": "左に画像、右にフォーム。",
+        "background": "背景",
+        "backgroundHint": "全面画像の上に半透明のカード。",
+        "minimal": "ミニマル",
+        "minimalHint": "シンプルな左寄せ、ロゴタイルなし。"
+      },
+      "imageHint": "画像がない場合、このデザインはアクセントカラーを使います。「画像」タブで追加してください。",
+      "preview": "プレビュー"
+    },
+    "texts": {
+      "hint": "インターフェースのテキストを言語ごとに置き換えられます。空欄にすると元のテキストのままになります。",
+      "locale": "言語",
+      "search": "キーまたはテキストを検索…",
+      "onlyModified": "変更済みのみ",
+      "results": "テキストなし | 1 件のテキスト | {n} 件のテキスト",
+      "empty": "一致するテキストはありません。",
+      "placeholders": "元のテキストの波括弧で囲まれた語はそのまま残してください。名前や数値などに置き換えられます。複数形は前後に空白のある縦棒で区切ります。"
+    }
+  }
+}
diff --git a/i18n/locales/ru/appearance.json b/i18n/locales/ru/appearance.json
new file mode 100644
index 00000000..f089f301
--- /dev/null
+++ b/i18n/locales/ru/appearance.json
@@ -0,0 +1,129 @@
+{
+  "appearance": {
+    "nav": {
+      "label": "Оформление",
+      "description": "Цвета, шрифты, изображения, страница входа и тексты"
+    },
+    "tabs": {
+      "theme": "Тема",
+      "typography": "Типографика",
+      "images": "Изображения",
+      "login": "Страница входа",
+      "texts": "Тексты"
+    },
+    "unsaved": "Есть несохранённые изменения",
+    "discard": "Отменить",
+    "previewHint": "До сохранения изменения видны на всём сайте только вам.",
+    "saved": "Оформление сохранено",
+    "saveFailed": "Не удалось сохранить оформление",
+    "presets": {
+      "default": "Trackarr",
+      "midnight": "Полночь",
+      "forest": "Лес",
+      "sunset": "Закат",
+      "mono": "Монохром",
+      "contrast": "Высокий контраст"
+    },
+    "theme": {
+      "presets": "Шаблон",
+      "presetsHint": "Основа для светлой и тёмной тем. Выбор шаблона сбрасывает цвета, заданные вручную.",
+      "colors": "Цвета",
+      "colorsHint": "Настройте каждый цвет светлой и тёмной тем. Участники по-прежнему выбирают светлую, тёмную или системную.",
+      "light": "Светлая",
+      "dark": "Тёмная",
+      "resetColors": "Вернуть шаблон",
+      "groups": {
+        "surfaces": "Поверхности",
+        "text": "Текст",
+        "meaning": "Смысловые цвета"
+      },
+      "tokens": {
+        "bg": "Фон страницы",
+        "surface": "Карточки",
+        "raised": "Приподнятые области",
+        "hover": "Наведение",
+        "line": "Границы",
+        "line-strong": "Яркие границы",
+        "ink": "Основной текст",
+        "ink-2": "Дополнительный текст",
+        "ink-3": "Приглушённый текст",
+        "contrast": "Основные кнопки",
+        "contrast-inv": "Текст основных кнопок",
+        "free": "Акцент и фрилич",
+        "seed": "Отдача и сиды",
+        "leech": "Загрузка и личи",
+        "danger": "Ошибки и опасность"
+      },
+      "radius": "Углы",
+      "radiusHint": "Скругление кнопок, полей и карточек.",
+      "radii": {
+        "none": "Прямые",
+        "small": "Малые",
+        "default": "Обычные",
+        "large": "Большие",
+        "round": "Круглые"
+      }
+    },
+    "typography": {
+      "sans": "Основной текст",
+      "sansHint": "Шрифт всего интерфейса.",
+      "heading": "Заголовки",
+      "headingHint": "Шрифт заголовков страниц и разделов.",
+      "mono": "Числа и код",
+      "monoHint": "Шрифт размеров, рейтингов, хешей и кода.",
+      "sample": "Съешь же ещё этих мягких французских булок"
+    },
+    "fonts": {
+      "sans": {
+        "plex": "IBM Plex Sans",
+        "inter": "Inter",
+        "grotesk": "Space Grotesk",
+        "nunito": "Nunito",
+        "serif": "Source Serif 4",
+        "system": "Системный шрифт"
+      },
+      "mono": {
+        "plex": "IBM Plex Mono",
+        "jetbrains": "JetBrains Mono",
+        "system": "Системный моноширинный"
+      }
+    },
+    "images": {
+      "loginImage": "Изображение страницы входа",
+      "loginImageHint": "Показывается в оформлениях «Разделённое» и «Фон».",
+      "homeBanner": "Баннер главной",
+      "homeBannerHint": "Широкое изображение вверху панели участника.",
+      "none": "Нет изображения",
+      "upload": "Загрузить",
+      "replace": "Заменить",
+      "remove": "Удалить",
+      "formats": "PNG, JPEG или WebP, до 8 МБ. Сохраняется сразу.",
+      "failed": "Не удалось обновить изображение"
+    },
+    "login": {
+      "layout": "Оформление",
+      "layoutHint": "Используется страницами входа и регистрации.",
+      "layouts": {
+        "centered": "По центру",
+        "centeredHint": "Логотип и форма в центре страницы.",
+        "split": "Разделённое",
+        "splitHint": "Изображение слева, форма справа.",
+        "background": "Фон",
+        "backgroundHint": "Изображение на всю страницу за полупрозрачной карточкой.",
+        "minimal": "Минимальное",
+        "minimalHint": "Просто, по левому краю, без плитки логотипа."
+      },
+      "imageHint": "Без изображения используется акцентный цвет. Добавьте его во вкладке «Изображения».",
+      "preview": "Предпросмотр"
+    },
+    "texts": {
+      "hint": "Замените любой текст интерфейса для каждого языка. Оставьте поле пустым, чтобы сохранить исходный текст.",
+      "locale": "Язык",
+      "search": "Поиск по ключу или тексту…",
+      "onlyModified": "Только изменённые",
+      "results": "нет текстов | {n} текст | {n} текста | {n} текстов",
+      "empty": "Ничего не найдено.",
+      "placeholders": "Сохраняйте слова в фигурных скобках из исходного текста: они заменяются значениями, например именами или числами. Формы множественного числа разделяются вертикальной чертой с пробелами."
+    }
+  }
+}
diff --git a/i18n/locales/zh/appearance.json b/i18n/locales/zh/appearance.json
new file mode 100644
index 00000000..fd01322f
--- /dev/null
+++ b/i18n/locales/zh/appearance.json
@@ -0,0 +1,129 @@
+{
+  "appearance": {
+    "nav": {
+      "label": "外观",
+      "description": "颜色、字体、图片、登录页和文本"
+    },
+    "tabs": {
+      "theme": "主题",
+      "typography": "字体排版",
+      "images": "图片",
+      "login": "登录页",
+      "texts": "文本"
+    },
+    "unsaved": "有未保存的更改",
+    "discard": "放弃",
+    "previewHint": "保存之前，更改仅对你在整个站点上预览。",
+    "saved": "外观已保存",
+    "saveFailed": "无法保存外观",
+    "presets": {
+      "default": "Trackarr",
+      "midnight": "午夜",
+      "forest": "森林",
+      "sunset": "日落",
+      "mono": "单色",
+      "contrast": "高对比度"
+    },
+    "theme": {
+      "presets": "预设",
+      "presetsHint": "浅色和深色主题的起点。选择预设会清除手动设置的颜色。",
+      "colors": "颜色",
+      "colorsHint": "调整浅色和深色主题的每种颜色。成员仍可选择浅色、深色或跟随系统。",
+      "light": "浅色",
+      "dark": "深色",
+      "resetColors": "恢复预设",
+      "groups": {
+        "surfaces": "表面",
+        "text": "文本",
+        "meaning": "含义色"
+      },
+      "tokens": {
+        "bg": "页面背景",
+        "surface": "卡片",
+        "raised": "凸起区域",
+        "hover": "悬停",
+        "line": "边框",
+        "line-strong": "强调边框",
+        "ink": "主要文本",
+        "ink-2": "次要文本",
+        "ink-3": "弱化文本",
+        "contrast": "主要按钮",
+        "contrast-inv": "主要按钮文字",
+        "free": "强调色与免费",
+        "seed": "上传与做种",
+        "leech": "下载与吸血",
+        "danger": "错误与危险"
+      },
+      "radius": "圆角",
+      "radiusHint": "按钮、输入框和卡片的圆角程度。",
+      "radii": {
+        "none": "直角",
+        "small": "小",
+        "default": "默认",
+        "large": "大",
+        "round": "圆"
+      }
+    },
+    "typography": {
+      "sans": "正文",
+      "sansHint": "整个界面的字体。",
+      "heading": "标题",
+      "headingHint": "页面和区块标题的字体。",
+      "mono": "数字与代码",
+      "monoHint": "大小、分享率、哈希和代码的字体。",
+      "sample": "敏捷的棕色狐狸在做种"
+    },
+    "fonts": {
+      "sans": {
+        "plex": "IBM Plex Sans",
+        "inter": "Inter",
+        "grotesk": "Space Grotesk",
+        "nunito": "Nunito",
+        "serif": "Source Serif 4",
+        "system": "系统字体"
+      },
+      "mono": {
+        "plex": "IBM Plex Mono",
+        "jetbrains": "JetBrains Mono",
+        "system": "系统等宽字体"
+      }
+    },
+    "images": {
+      "loginImage": "登录页图片",
+      "loginImageHint": "在“分栏”和“背景”设计中显示。",
+      "homeBanner": "首页横幅",
+      "homeBannerHint": "显示在成员仪表板顶部的宽幅图片。",
+      "none": "无图片",
+      "upload": "上传",
+      "replace": "替换",
+      "remove": "移除",
+      "formats": "PNG、JPEG 或 WebP，最大 8 MB。立即保存。",
+      "failed": "无法更新图片"
+    },
+    "login": {
+      "layout": "设计",
+      "layoutHint": "用于登录页和注册页。",
+      "layouts": {
+        "centered": "居中",
+        "centeredHint": "标志和表单位于页面中央。",
+        "split": "分栏",
+        "splitHint": "左侧图片，右侧表单。",
+        "background": "背景",
+        "backgroundHint": "全页图片之上的半透明卡片。",
+        "minimal": "极简",
+        "minimalHint": "简洁、左对齐、无标志方块。"
+      },
+      "imageHint": "没有图片时，此设计使用强调色。请在“图片”标签页中添加。",
+      "preview": "预览"
+    },
+    "texts": {
+      "hint": "按语言替换界面中的任何文本。留空则保留原始文本。",
+      "locale": "语言",
+      "search": "搜索键名或文本…",
+      "onlyModified": "仅已修改",
+      "results": "没有文本 | 1 条文本 | {n} 条文本",
+      "empty": "没有匹配的文本。",
+      "placeholders": "请保留原文中花括号内的词：它们会被替换为名称或数字等值。复数形式之间用两侧带空格的竖线分隔。"
+    }
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 670b6698..bcd27e1e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 import pkg from './package.json';
 
 // One translation file per area, in i18n/locales/<code>/ (issue #43)
-const LOCALE_FILES = ['app.json', 'shop.json', 'messages.json', 'shoutbox.json'];
+const LOCALE_FILES = ['app.json', 'shop.json', 'messages.json', 'shoutbox.json', 'appearance.json'];
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -80,4 +80,9 @@ export default defineNuxtConfig({
   build: {
     transpile: ['chart.js', 'vue-chartjs'],
   },
+
+  nitro: {
+    // Source strings for the admin text editor (server/utils/localeSource.ts)
+    serverAssets: [{ baseName: 'locales', dir: '../i18n/locales' }],
+  },
 });
diff --git a/package-lock.json b/package-lock.json
index f2539806..17f5d669 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,11 @@
       "dependencies": {
         "@fontsource/ibm-plex-mono": "^5.3.0",
         "@fontsource/ibm-plex-sans": "^5.3.0",
+        "@fontsource/inter": "^5.3.0",
+        "@fontsource/jetbrains-mono": "^5.3.0",
+        "@fontsource/nunito": "^5.3.0",
+        "@fontsource/source-serif-4": "5.3.0",
+        "@fontsource/space-grotesk": "^5.3.0",
         "@nuxtjs/i18n": "^10.6.0",
         "@nuxtjs/tailwindcss": "6.14.0",
         "@pinia/nuxt": "^1.0.3",
@@ -1590,6 +1595,51 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/jetbrains-mono": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.3.0.tgz",
+      "integrity": "sha512-fqDfB5I9f1p1TV486aUgB9t8zP84P0O1FtQR5Ol9vjwPy+S+EIGlVYm1cvj2W5shcZMTg2nZFdVMoH5wFu8a1A==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/nunito": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/nunito/-/nunito-5.3.0.tgz",
+      "integrity": "sha512-vw9TaTQJ/zpEpKrsODuPmOvaVjXgdda6B+xXA4YqjrdeJ62MLgVoDerdRXFQHyBnSCt2yQ2nHKCHPP/Pv7Xq4Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/source-serif-4": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-serif-4/-/source-serif-4-5.3.0.tgz",
+      "integrity": "sha512-yQz8xmIgMzks8zQbpuca3UYtjxK798XCyQAGdDXmzBgvV7sdoK6d0YvE9F9kiYxORCEMRBgGZDZsSYcXj5KvwA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/space-grotesk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/space-grotesk/-/space-grotesk-5.3.0.tgz",
+      "integrity": "sha512-ksnGizDPXIDuvqcTYTSrmZ+evx9sDlS8rp7+42BQ7wU+spt3twEoXfbJz672C+5CLg6VeUQwRy5RXshWb67LcQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@iconify/collections": {
       "version": "1.0.753",
       "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.753.tgz",
diff --git a/package.json b/package.json
index 0f25ed93..98ec1e34 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,11 @@
   "dependencies": {
     "@fontsource/ibm-plex-mono": "^5.3.0",
     "@fontsource/ibm-plex-sans": "^5.3.0",
+    "@fontsource/inter": "^5.3.0",
+    "@fontsource/jetbrains-mono": "^5.3.0",
+    "@fontsource/nunito": "^5.3.0",
+    "@fontsource/source-serif-4": "5.3.0",
+    "@fontsource/space-grotesk": "^5.3.0",
     "@nuxtjs/i18n": "^10.6.0",
     "@nuxtjs/tailwindcss": "6.14.0",
     "@pinia/nuxt": "^1.0.3",
diff --git a/server/api/admin/appearance/image.post.ts b/server/api/admin/appearance/image.post.ts
new file mode 100644
index 00000000..c58830c2
--- /dev/null
+++ b/server/api/admin/appearance/image.post.ts
@@ -0,0 +1,70 @@
+import { randomBytes } from 'crypto';
+import { requireAdminSession } from '../../../utils/adminAuth';
+import { getAppearance, setAppearance } from '../../../utils/settings';
+import { deleteUpload, saveUpload } from '../../../utils/uploads';
+import { detectImage } from '../../../utils/imageType';
+import {
+  APPEARANCE_IMAGE_RE,
+  APPEARANCE_IMAGE_SLOTS,
+  type Appearance,
+  type AppearanceImageSlot,
+} from '../../../../shared/utils/appearance';
+
+const MAX_SIZE = 8 * 1024 * 1024;
+
+function slotValue(a: Appearance, slot: AppearanceImageSlot): string | null {
+  return slot === 'loginImage' ? a.login.image : a.images.homeBanner;
+}
+
+function withSlot(a: Appearance, slot: AppearanceImageSlot, url: string | null): Appearance {
+  return slot === 'loginImage'
+    ? { ...a, login: { ...a.login, image: url } }
+    : { ...a, images: { ...a.images, homeBanner: url } };
+}
+
+/**
+ * POST /api/admin/appearance/image
+ * Multipart: `slot` (loginImage | homeBanner) and `image` (PNG, JPEG or WebP,
+ * 8 MB max). Without `image`, clears the slot. The previous file is deleted.
+ * Returns the stored appearance.
+ */
+export default defineEventHandler(async (event) => {
+  await requireAdminSession(event);
+
+  const form = (await readMultipartFormData(event)) ?? [];
+  const slot = form.find((f) => f.name === 'slot')?.data.toString('utf8');
+  if (!APPEARANCE_IMAGE_SLOTS.includes(slot as AppearanceImageSlot)) {
+    throw createError({ statusCode: 400, message: 'Invalid image slot' });
+  }
+  const typedSlot = slot as AppearanceImageSlot;
+
+  let url: string | null = null;
+  const file = form.find((f) => f.name === 'image');
+  if (file?.data?.length) {
+    if (file.data.length > MAX_SIZE) {
+      throw createError({ statusCode: 400, message: 'File too large. Maximum size: 8MB' });
+    }
+    // Magic bytes, not the declared type: SVG and GIF are refused
+    const image = detectImage(file.data);
+    if (!image || image.kind === 'gif') {
+      throw createError({ statusCode: 400, message: 'Invalid image. Allowed: PNG, JPEG, WebP' });
+    }
+    const name = `appearance-${randomBytes(8).toString('hex')}.${image.ext}`;
+    await saveUpload(name, file.data);
+    url = `/uploads/${name}`;
+  }
+
+  const current = await getAppearance();
+  const previous = slotValue(current, typedSlot);
+  const next = withSlot(current, typedSlot, url);
+  await setAppearance(next);
+
+  // Only files this endpoint created (the pattern is validated on read too)
+  if (previous && previous !== url && APPEARANCE_IMAGE_RE.test(previous)) {
+    await deleteUpload(previous.slice('/uploads/'.length)).catch((err) => {
+      console.error('[Appearance] Failed to delete old image:', err);
+    });
+  }
+
+  return next;
+});
diff --git a/server/api/admin/appearance/index.put.ts b/server/api/admin/appearance/index.put.ts
new file mode 100644
index 00000000..58e03043
--- /dev/null
+++ b/server/api/admin/appearance/index.put.ts
@@ -0,0 +1,37 @@
+import { requireAdminSession } from '../../../utils/adminAuth';
+import { getAppearance, setAppearance } from '../../../utils/settings';
+import { getLocaleSource } from '../../../utils/localeSource';
+import { validateBody } from '../../../utils/schemas';
+import { appearanceSchema } from '../../../../shared/utils/appearance';
+
+/**
+ * PUT /api/admin/appearance
+ * Save theme, fonts, login layout and text overrides (admin only). Images are
+ * set by POST /api/admin/appearance/image, so the stored ones are kept.
+ */
+export default defineEventHandler(async (event) => {
+  await requireAdminSession(event);
+  const body = await validateBody(event, appearanceSchema);
+
+  // Only keys that exist in the shipped translations, and no copy of the
+  // default text: an override equal to it would hide later translation fixes
+  const texts: typeof body.texts = {};
+  for (const [locale, overrides] of Object.entries(body.texts) as [keyof typeof body.texts, Record<string, string>][]) {
+    const source = await getLocaleSource(locale);
+    const kept = Object.fromEntries(
+      Object.entries(overrides).filter(([key, text]) => key in source && text.trim() !== '' && text !== source[key])
+    );
+    if (Object.keys(kept).length > 0) texts[locale] = kept;
+  }
+
+  const current = await getAppearance();
+  const appearance = {
+    ...body,
+    login: { layout: body.login.layout, image: current.login.image },
+    images: current.images,
+    texts,
+  };
+  await setAppearance(appearance);
+
+  return appearance;
+});
diff --git a/server/api/admin/appearance/texts.get.ts b/server/api/admin/appearance/texts.get.ts
new file mode 100644
index 00000000..6a9a3572
--- /dev/null
+++ b/server/api/admin/appearance/texts.get.ts
@@ -0,0 +1,16 @@
+import { z } from 'zod';
+import { requireAdminSession } from '../../../utils/adminAuth';
+import { getLocaleSource } from '../../../utils/localeSource';
+import { APPEARANCE_LOCALES } from '../../../../shared/utils/appearance';
+
+const querySchema = z.object({ locale: z.enum(APPEARANCE_LOCALES) });
+
+/**
+ * GET /api/admin/appearance/texts?locale=fr
+ * Shipped translations of a locale, flat, for the admin text editor
+ */
+export default defineEventHandler(async (event) => {
+  await requireAdminSession(event);
+  const { locale } = await getValidatedQuery(event, querySchema.parse);
+  return getLocaleSource(locale);
+});
diff --git a/server/api/appearance.get.ts b/server/api/appearance.get.ts
new file mode 100644
index 00000000..1a2dad28
--- /dev/null
+++ b/server/api/appearance.get.ts
@@ -0,0 +1,10 @@
+import { getAppearance } from '../utils/settings';
+
+/**
+ * GET /api/appearance
+ * Public: theme, fonts, login design, images and text overrides, applied on
+ * every page including the login page (no auth required)
+ */
+export default defineEventHandler(async () => {
+  return getAppearance();
+});
diff --git a/server/utils/localeSource.ts b/server/utils/localeSource.ts
new file mode 100644
index 00000000..657d28d9
--- /dev/null
+++ b/server/utils/localeSource.ts
@@ -0,0 +1,23 @@
+import { flattenMessages, type MessageTree } from '../../shared/utils/appearance';
+
+/**
+ * Translations as shipped in i18n/locales/<locale>/*.json (bundled as server
+ * assets, see nuxt.config.ts), flattened: what the admin text editor shows
+ * as defaults and the keys it accepts.
+ */
+const cache = new Map<string, Record<string, string>>();
+
+export async function getLocaleSource(locale: string): Promise<Record<string, string>> {
+  const cached = cache.get(locale);
+  if (cached) return cached;
+
+  const storage = useStorage('assets:locales');
+  const out: Record<string, string> = {};
+  for (const key of await storage.getKeys(locale)) {
+    if (!key.endsWith('.json')) continue;
+    const tree = await storage.getItem<MessageTree>(key);
+    if (tree && typeof tree === 'object') flattenMessages(tree, '', out);
+  }
+  cache.set(locale, out);
+  return out;
+}
diff --git a/server/utils/settings.ts b/server/utils/settings.ts
index 68df040b..1616ada2 100644
--- a/server/utils/settings.ts
+++ b/server/utils/settings.ts
@@ -1,4 +1,5 @@
 import { eq } from 'drizzle-orm';
+import { parseAppearance, type Appearance } from '../../shared/utils/appearance';
 import { db } from '../db';
 import { settings } from '../db/schema';
 import { invalidateTracker } from '../tracker/client';
@@ -75,6 +76,8 @@ export const SETTINGS_KEYS = {
   // Shoutbox
   SHOUTBOX_ENABLED: 'shoutbox_enabled',
   SHOUTBOX_SEEDED: 'shoutbox_seeded',
+  // Theme, fonts, login design, images, text overrides (shared/utils/appearance.ts)
+  APPEARANCE: 'appearance',
 } as const;
 
 const settingsCache = new Map<
@@ -527,3 +530,14 @@ export async function getFooterLinks(): Promise<FooterLink[]> {
 export async function getFooterTagline(): Promise<string | null> {
   return getSetting(SETTINGS_KEYS.FOOTER_TAGLINE);
 }
+
+/**
+ * Site appearance; every section falls back to its default
+ */
+export async function getAppearance(): Promise<Appearance> {
+  return parseAppearance(await getSetting(SETTINGS_KEYS.APPEARANCE));
+}
+
+export async function setAppearance(appearance: Appearance): Promise<void> {
+  await setSetting(SETTINGS_KEYS.APPEARANCE, JSON.stringify(appearance));
+}
diff --git a/shared/utils/appearance.ts b/shared/utils/appearance.ts
new file mode 100644
index 00000000..2e472a74
--- /dev/null
+++ b/shared/utils/appearance.ts
@@ -0,0 +1,394 @@
+import { z } from 'zod';
+
+/**
+ * Admin-defined look of the site: colour tokens, fonts, corner radius, login
+ * page design, fixed images and text overrides. Stored as one JSON setting,
+ * served by GET /api/appearance and applied by app/plugins/appearance.ts.
+ */
+
+// Same names as the CSS variables of app/assets/css/main.css
+export const THEME_TOKENS = [
+  'bg',
+  'surface',
+  'raised',
+  'hover',
+  'line',
+  'line-strong',
+  'ink',
+  'ink-2',
+  'ink-3',
+  'seed',
+  'leech',
+  'free',
+  'danger',
+  'contrast',
+  'contrast-inv',
+] as const;
+export type ThemeToken = (typeof THEME_TOKENS)[number];
+export type Palette = Record<ThemeToken, string>;
+export type PaletteOverride = Partial<Palette>;
+
+// Built-in theme, copied from main.css (the CSS keeps it for the first paint)
+export const DEFAULT_PALETTES: { light: Palette; dark: Palette } = {
+  light: {
+    bg: '#f3f4f6',
+    surface: '#ffffff',
+    raised: '#f7f8fa',
+    hover: '#eceef1',
+    line: '#dcdfe4',
+    'line-strong': '#c3c8d0',
+    ink: '#1a1c20',
+    'ink-2': '#4f555e',
+    'ink-3': '#6b717b',
+    seed: '#1d8556',
+    leech: '#a86b0c',
+    free: '#5b47d6',
+    danger: '#c23a33',
+    contrast: '#1a1c20',
+    'contrast-inv': '#ffffff',
+  },
+  dark: {
+    bg: '#17181b',
+    surface: '#1f2125',
+    raised: '#282a2f',
+    hover: '#2e3036',
+    line: '#33363c',
+    'line-strong': '#464a52',
+    ink: '#eceae5',
+    'ink-2': '#a7a6a1',
+    'ink-3': '#84857f',
+    seed: '#4cb782',
+    leech: '#e2a23e',
+    free: '#9b8af7',
+    danger: '#e6625b',
+    contrast: '#f5f4f0',
+    'contrast-inv': '#17181b',
+  },
+};
+
+/** Ready-made themes: overrides of the default palettes */
+export const THEME_PRESETS: Record<string, { light: PaletteOverride; dark: PaletteOverride }> = {
+  default: { light: {}, dark: {} },
+  midnight: {
+    light: {
+      bg: '#eef1f7',
+      raised: '#f5f7fb',
+      hover: '#e4e9f2',
+      line: '#d5dbe7',
+      'line-strong': '#b8c1d3',
+      ink: '#141a2a',
+      'ink-2': '#475069',
+      'ink-3': '#646d85',
+      free: '#2f6fe0',
+      contrast: '#141a2a',
+    },
+    dark: {
+      bg: '#0f1420',
+      surface: '#161c2b',
+      raised: '#1d2436',
+      hover: '#232b40',
+      line: '#2a3349',
+      'line-strong': '#3a4560',
+      ink: '#e6e9f2',
+      'ink-2': '#a3abc2',
+      'ink-3': '#7d86a0',
+      free: '#6ea8ff',
+      contrast: '#eef2fb',
+      'contrast-inv': '#0f1420',
+    },
+  },
+  forest: {
+    light: {
+      bg: '#f1f3ef',
+      raised: '#f6f8f4',
+      hover: '#e6eae2',
+      line: '#d6ddd0',
+      'line-strong': '#bcc7b4',
+      ink: '#1b211c',
+      'ink-2': '#4c5a4f',
+      'ink-3': '#66736a',
+      free: '#0e7c7b',
+      contrast: '#1b211c',
+    },
+    dark: {
+      bg: '#151a17',
+      surface: '#1c221e',
+      raised: '#232a25',
+      hover: '#29312b',
+      line: '#313a33',
+      'line-strong': '#435046',
+      ink: '#e7ece6',
+      'ink-2': '#a6b2a8',
+      'ink-3': '#818d83',
+      free: '#3cc4c0',
+      contrast: '#eef3ed',
+      'contrast-inv': '#151a17',
+    },
+  },
+  sunset: {
+    light: {
+      bg: '#f7f3ef',
+      surface: '#fffdfb',
+      raised: '#faf6f2',
+      hover: '#f0e9e2',
+      line: '#e5dbd1',
+      'line-strong': '#cfc1b3',
+      ink: '#2a1f1a',
+      'ink-2': '#5f4f45',
+      'ink-3': '#7a685c',
+      free: '#c43d52',
+      contrast: '#2a1f1a',
+      'contrast-inv': '#fffdfb',
+    },
+    dark: {
+      bg: '#1c1714',
+      surface: '#241e1a',
+      raised: '#2c2520',
+      hover: '#332b25',
+      line: '#3b322b',
+      'line-strong': '#51453c',
+      ink: '#f2e9e1',
+      'ink-2': '#bba99b',
+      'ink-3': '#94857a',
+      free: '#f07a8a',
+      contrast: '#f7efe8',
+      'contrast-inv': '#1c1714',
+    },
+  },
+  mono: {
+    light: { free: '#4a505a' },
+    dark: { free: '#c9c9c4' },
+  },
+  contrast: {
+    light: {
+      bg: '#ffffff',
+      raised: '#f2f2f2',
+      hover: '#e6e6e6',
+      line: '#8a8a8a',
+      'line-strong': '#4a4a4a',
+      ink: '#000000',
+      'ink-2': '#1f1f1f',
+      'ink-3': '#3d3d3d',
+      free: '#3b1fd1',
+      contrast: '#000000',
+    },
+    dark: {
+      bg: '#000000',
+      surface: '#0b0b0b',
+      raised: '#161616',
+      hover: '#1f1f1f',
+      line: '#6b6b6b',
+      'line-strong': '#9a9a9a',
+      ink: '#ffffff',
+      'ink-2': '#e6e6e6',
+      'ink-3': '#c2c2c2',
+      free: '#b4a6ff',
+      contrast: '#ffffff',
+      'contrast-inv': '#000000',
+    },
+  },
+};
+export const PRESET_IDS = Object.keys(THEME_PRESETS) as [string, ...string[]];
+
+// Fonts bundled with the app (the CSP only allows same-origin fonts),
+// imported in main.css. Browsers only download the ones in use.
+export const SANS_FONTS = {
+  plex: '"IBM Plex Sans", system-ui, sans-serif',
+  inter: '"Inter", system-ui, sans-serif',
+  grotesk: '"Space Grotesk", system-ui, sans-serif',
+  nunito: '"Nunito", system-ui, sans-serif',
+  serif: '"Source Serif 4", Georgia, serif',
+  system: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+} as const;
+export const MONO_FONTS = {
+  plex: '"IBM Plex Mono", ui-monospace, monospace',
+  jetbrains: '"JetBrains Mono", ui-monospace, monospace',
+  system: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+} as const;
+type SansFont = keyof typeof SANS_FONTS;
+type MonoFont = keyof typeof MONO_FONTS;
+const SANS_IDS = Object.keys(SANS_FONTS) as [SansFont, ...SansFont[]];
+const MONO_IDS = Object.keys(MONO_FONTS) as [MonoFont, ...MonoFont[]];
+
+export const RADII = {
+  none: '0rem',
+  small: '0.1875rem',
+  default: '0.3125rem',
+  large: '0.5rem',
+  round: '0.75rem',
+} as const;
+type Radius = keyof typeof RADII;
+const RADIUS_IDS = Object.keys(RADII) as [Radius, ...Radius[]];
+
+export const LOGIN_LAYOUTS = ['centered', 'split', 'background', 'minimal'] as const;
+export type LoginLayout = (typeof LOGIN_LAYOUTS)[number];
+
+export const APPEARANCE_LOCALES = ['en', 'fr', 'es', 'de', 'it', 'zh', 'ja', 'ru'] as const;
+
+export const MAX_TEXT_OVERRIDE_LENGTH = 2000;
+const TEXT_KEY_RE = /^[A-Za-z0-9_-]+(\.[A-Za-z0-9_-]+){0,8}$/;
+const FORBIDDEN_SEGMENTS = new Set(['__proto__', 'prototype', 'constructor']);
+
+/** Dotted locale key, without segments that would reach Object.prototype */
+export function isTextKey(key: string): boolean {
+  return TEXT_KEY_RE.test(key) && !key.split('.').some((part) => FORBIDDEN_SEGMENTS.has(part));
+}
+
+// Images uploaded through POST /api/admin/appearance/image only
+export const APPEARANCE_IMAGE_RE = /^\/uploads\/appearance-[a-f0-9]{16}\.(png|jpg|webp)$/;
+export const APPEARANCE_IMAGE_SLOTS = ['loginImage', 'homeBanner'] as const;
+export type AppearanceImageSlot = (typeof APPEARANCE_IMAGE_SLOTS)[number];
+
+const hex = z.string().regex(/^#[0-9a-f]{6}$/i).transform((v) => v.toLowerCase());
+const paletteOverrideSchema = z
+  .object(Object.fromEntries(THEME_TOKENS.map((t) => [t, hex.optional()])) as Record<ThemeToken, z.ZodOptional<typeof hex>>)
+  .strict();
+const imageSchema = z.string().regex(APPEARANCE_IMAGE_RE).nullable();
+
+const sections = {
+  preset: z.enum(PRESET_IDS),
+  colors: z.object({ light: paletteOverrideSchema, dark: paletteOverrideSchema }),
+  fonts: z.object({ sans: z.enum(SANS_IDS), heading: z.enum(SANS_IDS), mono: z.enum(MONO_IDS) }),
+  radius: z.enum(RADIUS_IDS),
+  login: z.object({ layout: z.enum(LOGIN_LAYOUTS), image: imageSchema }),
+  images: z.object({ homeBanner: imageSchema }),
+  // partialRecord: a locale without overrides is simply absent
+  texts: z.partialRecord(
+    z.enum(APPEARANCE_LOCALES),
+    z.record(z.string().refine(isTextKey), z.string().max(MAX_TEXT_OVERRIDE_LENGTH))
+  ),
+};
+
+export const appearanceSchema = z.object(sections);
+export type Appearance = z.infer<typeof appearanceSchema>;
+
+export const DEFAULT_APPEARANCE: Appearance = {
+  preset: 'default',
+  colors: { light: {}, dark: {} },
+  fonts: { sans: 'plex', heading: 'plex', mono: 'plex' },
+  radius: 'default',
+  login: { layout: 'centered', image: null },
+  images: { homeBanner: null },
+  texts: {},
+};
+
+/**
+ * Read the stored setting. Each section falls back to its default on its own,
+ * so one invalid section (older format, manual edit) does not reset the rest.
+ */
+export function parseAppearance(raw: unknown): Appearance {
+  let value: unknown = raw;
+  if (typeof raw === 'string') {
+    try {
+      value = JSON.parse(raw);
+    } catch {
+      return structuredClone(DEFAULT_APPEARANCE);
+    }
+  }
+  const input = value && typeof value === 'object' ? (value as Record<string, unknown>) : {};
+  const out = structuredClone(DEFAULT_APPEARANCE) as Record<string, unknown>;
+  for (const [name, schema] of Object.entries(sections)) {
+    const parsed = schema.safeParse(input[name]);
+    if (parsed.success) out[name] = parsed.data;
+  }
+  return out as Appearance;
+}
+
+/** Preset, then the admin's own colours on top */
+export function resolvePalettes(a: Appearance): { light: Palette; dark: Palette } {
+  const preset = THEME_PRESETS[a.preset] ?? THEME_PRESETS.default!;
+  return {
+    light: { ...DEFAULT_PALETTES.light, ...preset.light, ...a.colors.light },
+    dark: { ...DEFAULT_PALETTES.dark, ...preset.dark, ...a.colors.dark },
+  };
+}
+
+/** '#1d8556' -> '29 133 86', the channel format the Tailwind tokens expect */
+export function hexToChannels(value: string): string {
+  const n = parseInt(value.slice(1), 16);
+  return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`;
+}
+
+const declarations = (palette: Palette) =>
+  THEME_TOKENS.map((t) => `--${t}:${hexToChannels(palette[t])};`).join('');
+
+/**
+ * CSS overriding main.css. `html:root` outranks main.css's `:root` whatever
+ * the order the stylesheets load in. Every value comes from a validated enum
+ * or hex colour, so nothing admin-typed reaches the stylesheet as is.
+ */
+export function buildThemeCss(a: Appearance): string {
+  const { light, dark } = resolvePalettes(a);
+  const base =
+    `--font-sans:${SANS_FONTS[a.fonts.sans]};` +
+    `--font-heading:${SANS_FONTS[a.fonts.heading]};` +
+    `--font-mono:${MONO_FONTS[a.fonts.mono]};` +
+    `--radius:${RADII[a.radius]};`;
+  return (
+    `html:root{${base}${declarations(light)}}` +
+    `@media (prefers-color-scheme: dark){html:root:not([data-theme='light']){${declarations(dark)}}}` +
+    `html:root[data-theme='dark']{${declarations(dark)}}`
+  );
+}
+
+/** The parts of vue-i18n's MessageContext an override message uses */
+export interface OverrideMessageContext {
+  named: (key: string) => unknown;
+  plural: (messages: string[]) => string;
+}
+export type OverrideMessage = (ctx: OverrideMessageContext) => string;
+export interface OverrideTree {
+  [key: string]: OverrideTree | OverrideMessage;
+}
+
+/**
+ * An admin text as a vue-i18n message function: {name} placeholders and
+ * ' | ' plural forms work like in the locale files, and nothing else is
+ * special (no @ links, no compiler). Output is text, escaped by Vue.
+ */
+export function overrideMessage(text: string): OverrideMessage {
+  const forms = text.split(' | ');
+  return (ctx) => {
+    const fill = (form: string) =>
+      form.replace(/\{(\w+)\}/g, (match, name: string) => {
+        const value = ctx.named(name);
+        return value === undefined || value === null ? match : String(value);
+      });
+    return forms.length > 1 ? ctx.plural(forms.map(fill)) : fill(text);
+  };
+}
+
+/** Flat 'a.b.c' overrides as the nested message tree vue-i18n merges */
+export function buildOverrideTree(texts: Record<string, string> | undefined): OverrideTree {
+  const tree: OverrideTree = Object.create(null);
+  for (const [key, text] of Object.entries(texts ?? {})) {
+    if (!isTextKey(key)) continue;
+    const parts = key.split('.');
+    let node: OverrideTree | null = tree;
+    for (const part of parts.slice(0, -1)) {
+      const next: OverrideTree | OverrideMessage | undefined = node[part];
+      // 'a.b' already holds a text: 'a.b.c' cannot exist next to it
+      if (typeof next === 'function') {
+        node = null;
+        break;
+      }
+      node = next ?? (node[part] = Object.create(null) as OverrideTree);
+    }
+    if (node) node[parts[parts.length - 1]!] = overrideMessage(text);
+  }
+  return tree;
+}
+
+export interface MessageTree {
+  [key: string]: MessageTree | string;
+}
+
+/** Locale file tree as flat 'a.b.c' keys (strings only) */
+export function flattenMessages(tree: MessageTree, prefix = '', out: Record<string, string> = {}): Record<string, string> {
+  for (const [key, value] of Object.entries(tree)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (typeof value === 'string') out[path] = value;
+    else if (value && typeof value === 'object') flattenMessages(value, path, out);
+  }
+  return out;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 83a993d0..a7cb3a24 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -50,15 +50,21 @@ export default {
         scrim: 'rgb(0 0 0 / <alpha-value>)',
         paper: 'rgb(255 255 255 / <alpha-value>)'
       },
+      // Variables set in main.css, overridden by the admin appearance
       fontFamily: {
-        sans: ['"IBM Plex Sans"', 'system-ui', 'sans-serif'],
-        mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace']
+        sans: 'var(--font-sans)',
+        heading: 'var(--font-heading)',
+        mono: 'var(--font-mono)'
       },
       fontSize: {
         '2xs': ['0.6875rem', { lineHeight: '1rem' }]
       },
+      // Scaled from --radius (admin appearance); default values unchanged
       borderRadius: {
-        DEFAULT: '0.3125rem'
+        sm: 'calc(var(--radius) * 0.4)',
+        DEFAULT: 'var(--radius)',
+        md: 'calc(var(--radius) * 1.2)',
+        lg: 'calc(var(--radius) * 1.6)'
       }
     }
   },
diff --git a/tests/appearance.test.ts b/tests/appearance.test.ts
new file mode 100644
index 00000000..0ffca0af
--- /dev/null
+++ b/tests/appearance.test.ts
@@ -0,0 +1,151 @@
+import { describe, it, expect } from 'vitest';
+import {
+  DEFAULT_APPEARANCE,
+  DEFAULT_PALETTES,
+  THEME_PRESETS,
+  THEME_TOKENS,
+  appearanceSchema,
+  buildOverrideTree,
+  buildThemeCss,
+  hexToChannels,
+  overrideMessage,
+  parseAppearance,
+  resolvePalettes,
+  type OverrideMessage,
+  type OverrideMessageContext,
+} from '../shared/utils/appearance';
+
+const ctx = (named: Record<string, unknown> = {}, index = 0): OverrideMessageContext => ({
+  named: (key) => named[key],
+  plural: (messages) => messages[Math.min(index, messages.length - 1)]!,
+});
+
+describe('parseAppearance', () => {
+  it('returns defaults for missing or broken values', () => {
+    expect(parseAppearance(null)).toEqual(DEFAULT_APPEARANCE);
+    expect(parseAppearance('{not json')).toEqual(DEFAULT_APPEARANCE);
+    expect(parseAppearance('[]')).toEqual(DEFAULT_APPEARANCE);
+  });
+
+  it('keeps valid sections when another one is invalid', () => {
+    const a = parseAppearance(JSON.stringify({ preset: 'midnight', radius: 'huge', fonts: { sans: 'inter', heading: 'serif', mono: 'jetbrains' } }));
+    expect(a.preset).toBe('midnight');
+    expect(a.radius).toBe('default');
+    expect(a.fonts).toEqual({ sans: 'inter', heading: 'serif', mono: 'jetbrains' });
+  });
+
+  it('does not return a shared default object', () => {
+    parseAppearance(null).colors.light.bg = '#000000';
+    expect(DEFAULT_APPEARANCE.colors.light.bg).toBeUndefined();
+  });
+});
+
+describe('appearanceSchema', () => {
+  it('accepts the defaults', () => {
+    expect(appearanceSchema.safeParse(DEFAULT_APPEARANCE).success).toBe(true);
+  });
+
+  it('rejects colours that could escape the stylesheet', () => {
+    const colors = { light: { bg: 'red;}body{display:none' }, dark: {} };
+    expect(appearanceSchema.safeParse({ ...DEFAULT_APPEARANCE, colors }).success).toBe(false);
+  });
+
+  it('rejects unknown tokens', () => {
+    const colors = { light: { evil: '#000000' }, dark: {} };
+    expect(appearanceSchema.safeParse({ ...DEFAULT_APPEARANCE, colors }).success).toBe(false);
+  });
+
+  it('only accepts images uploaded for the appearance', () => {
+    const ok = { ...DEFAULT_APPEARANCE, login: { layout: 'split', image: '/uploads/appearance-0123456789abcdef.webp' } };
+    expect(appearanceSchema.safeParse(ok).success).toBe(true);
+    for (const image of ['https://evil.test/a.png', '/uploads/../x.png', '/uploads/appearance-0123456789abcdef.svg']) {
+      const bad = { ...DEFAULT_APPEARANCE, login: { layout: 'split', image } };
+      expect(appearanceSchema.safeParse(bad).success, image).toBe(false);
+    }
+  });
+
+  it('validates text override locales and keys', () => {
+    expect(appearanceSchema.safeParse({ ...DEFAULT_APPEARANCE, texts: { fr: { 'auth.login.signIn': 'Entrer' } } }).success).toBe(true);
+    expect(appearanceSchema.safeParse({ ...DEFAULT_APPEARANCE, texts: { xx: { a: 'b' } } }).success).toBe(false);
+    expect(appearanceSchema.safeParse({ ...DEFAULT_APPEARANCE, texts: { en: { '../a': 'b' } } }).success).toBe(false);
+    expect(appearanceSchema.safeParse({ ...DEFAULT_APPEARANCE, texts: { en: JSON.parse('{"__proto__.x":"b"}') } }).success).toBe(false);
+  });
+});
+
+describe('palettes', () => {
+  it('every preset only overrides known tokens with hex colours', () => {
+    for (const [name, preset] of Object.entries(THEME_PRESETS)) {
+      for (const palette of [preset.light, preset.dark]) {
+        for (const [token, value] of Object.entries(palette)) {
+          expect(THEME_TOKENS, `${name}.${token}`).toContain(token);
+          expect(value, `${name}.${token}`).toMatch(/^#[0-9a-f]{6}$/);
+        }
+      }
+    }
+  });
+
+  it('applies preset then admin colours', () => {
+    const a = { ...DEFAULT_APPEARANCE, preset: 'midnight', colors: { light: { free: '#123456' }, dark: {} } };
+    const { light, dark } = resolvePalettes(a);
+    expect(light.free).toBe('#123456');
+    expect(light.bg).toBe(THEME_PRESETS.midnight!.light.bg);
+    expect(light.seed).toBe(DEFAULT_PALETTES.light.seed);
+    expect(dark.free).toBe(THEME_PRESETS.midnight!.dark.free);
+  });
+
+  it('converts hex to channels', () => {
+    expect(hexToChannels('#1d8556')).toBe('29 133 86');
+    expect(hexToChannels('#ffffff')).toBe('255 255 255');
+  });
+});
+
+describe('buildThemeCss', () => {
+  it('reproduces main.css for the defaults', () => {
+    const css = buildThemeCss(DEFAULT_APPEARANCE);
+    expect(css).toContain('--bg:243 244 246;');
+    expect(css).toContain("html:root[data-theme='dark']{--bg:23 24 27;");
+    expect(css).toContain('--font-sans:"IBM Plex Sans"');
+    expect(css).toContain('--radius:0.3125rem;');
+  });
+
+  it('uses the chosen fonts', () => {
+    const css = buildThemeCss({ ...DEFAULT_APPEARANCE, fonts: { sans: 'inter', heading: 'serif', mono: 'jetbrains' } });
+    expect(css).toContain('--font-sans:"Inter"');
+    expect(css).toContain('--font-heading:"Source Serif 4"');
+    expect(css).toContain('--font-mono:"JetBrains Mono"');
+  });
+});
+
+describe('overrideMessage', () => {
+  it('fills named placeholders', () => {
+    expect(overrideMessage('Hello {name}!')(ctx({ name: 'Ada' }))).toBe('Hello Ada!');
+  });
+
+  it('keeps unknown placeholders and special characters as typed', () => {
+    expect(overrideMessage('{missing} @mail | not plural?')(ctx())).toBe('{missing} @mail');
+    expect(overrideMessage('a@b.c {x}')(ctx())).toBe('a@b.c {x}');
+  });
+
+  it('picks the plural form', () => {
+    const message = overrideMessage('none | one item | {n} items');
+    expect(message(ctx({ n: 5 }, 2))).toBe('5 items');
+    expect(message(ctx({ n: 1 }, 1))).toBe('one item');
+  });
+});
+
+describe('buildOverrideTree', () => {
+  it('nests dotted keys', () => {
+    const tree = buildOverrideTree({ 'auth.login.signIn': 'Go', 'auth.title': 'T' });
+    const auth = tree.auth as Record<string, unknown>;
+    expect(typeof auth.title).toBe('function');
+    expect(((auth.login as Record<string, OverrideMessage>).signIn)(ctx())).toBe('Go');
+  });
+
+  it('skips keys under an existing text and invalid keys', () => {
+    const tree = buildOverrideTree({ 'a.b': 'x', 'a.b.c': 'y', '__proto__.x': 'z', 'bad key': 'w' });
+    expect(typeof (tree.a as Record<string, unknown>).b).toBe('function');
+    expect(Object.keys(tree)).toEqual(['a']);
+    expect(({} as Record<string, unknown>).x).toBeUndefined();
+    expect(Object.keys(buildOverrideTree({ 'constructor.prototype.y': 'z' }))).toEqual([]);
+  });
+});

From 598260e090617d476c7f0f140050006043be7cdb Mon Sep 17 00:00:00 2001
From: Florian <52180080+florianjs@users.noreply.github.com>
Date: Tue, 20 Oct 2026 13:11:21 +0200
Subject: [PATCH 2/2] fix(appearance): address review findings

- escape the translated login subtitle before v-html: it is now an
  admin-editable text, not trusted markup
- accept text overrides for own keys of the shipped locales only, so
  inherited names like toString are rejected (keepTextOverrides, tested)
- lock the editor while saving so the response cannot drop newer edits
- clamp the texts page index when the filtered list shrinks
- say that images are public as soon as they are uploaded

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/components/AuthShell.vue             |  8 ++++++--
 app/components/admin/Appearance.vue      |  3 ++-
 app/components/admin/AppearanceTexts.vue |  2 ++
 doc/guide/appearance.md                  |  2 +-
 i18n/locales/de/appearance.json          |  2 +-
 i18n/locales/en/appearance.json          |  2 +-
 i18n/locales/es/appearance.json          |  2 +-
 i18n/locales/fr/appearance.json          |  2 +-
 i18n/locales/it/appearance.json          |  2 +-
 i18n/locales/ja/appearance.json          |  2 +-
 i18n/locales/ru/appearance.json          |  2 +-
 i18n/locales/zh/appearance.json          |  2 +-
 server/api/admin/appearance/index.put.ts |  9 ++-------
 shared/utils/appearance.ts               | 16 ++++++++++++++++
 tests/appearance.test.ts                 | 14 ++++++++++++++
 15 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/app/components/AuthShell.vue b/app/components/AuthShell.vue
index 8be28499..ef91b803 100644
--- a/app/components/AuthShell.vue
+++ b/app/components/AuthShell.vue
@@ -82,7 +82,11 @@ const { data: branding } = await useFetch<AuthBranding>('/api/branding');
 const layout = computed(() => props.layout ?? appearance.value.login.layout);
 const image = computed(() => (props.image !== undefined ? props.image : appearance.value.login.image));
 const frame = computed(() => (props.contained ? 'h-full' : 'min-h-screen'));
-// Sanitized on the server (rich text), rendered with v-html as before
+// Rendered with v-html: branding fields are sanitized rich text from the
+// server; the translated fallback is plain text an admin can override, so
+// it is escaped
+const escapeHtml = (text: string) =>
+  text.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]!);
 const title = computed(() => branding.value?.authTitle || branding.value?.siteName || 'TRACKARR');
-const subtitle = computed(() => branding.value?.authSubtitle || t('auth.defaultSubtitle'));
+const subtitle = computed(() => branding.value?.authSubtitle || escapeHtml(t('auth.defaultSubtitle')));
 </script>
diff --git a/app/components/admin/Appearance.vue b/app/components/admin/Appearance.vue
index 118a54b0..6e1274ab 100644
--- a/app/components/admin/Appearance.vue
+++ b/app/components/admin/Appearance.vue
@@ -27,7 +27,8 @@
           </button>
         </div>
       </div>
-      <div class="card-body" role="tabpanel">
+      <!-- Locked while saving: the response replaces the draft -->
+      <div class="card-body transition-opacity" :class="{ 'opacity-60': saving }" role="tabpanel" :inert="saving">
         <p class="text-xs text-text-muted mb-4">{{ t('appearance.previewHint') }}</p>
         <AdminAppearanceTheme v-if="current === 'theme'" v-model="draft" />
         <AdminAppearanceTypography v-else-if="current === 'typography'" v-model="draft" />
diff --git a/app/components/admin/AppearanceTexts.vue b/app/components/admin/AppearanceTexts.vue
index 15df07f2..1deeea5e 100644
--- a/app/components/admin/AppearanceTexts.vue
+++ b/app/components/admin/AppearanceTexts.vue
@@ -106,6 +106,8 @@ const filtered = computed(() => {
 const pages = computed(() => Math.max(1, Math.ceil(filtered.value.length / PAGE_SIZE)));
 const page = computed(() => filtered.value.slice(pageIndex.value * PAGE_SIZE, (pageIndex.value + 1) * PAGE_SIZE));
 watch([query, onlyModified, locale], () => (pageIndex.value = 0));
+// Resetting the last text of the last page shrinks the list
+watch(pages, (count) => (pageIndex.value = Math.min(pageIndex.value, count - 1)));
 
 // An empty field restores the shipped text
 function setText(key: string, value: string) {
diff --git a/doc/guide/appearance.md b/doc/guide/appearance.md
index a1434156..93cb86e3 100644
--- a/doc/guide/appearance.md
+++ b/doc/guide/appearance.md
@@ -1,6 +1,6 @@
 # Appearance
 
-**Admin Panel → Appearance** changes the look of the whole site without touching code. Every change is previewed live, for you only, until you click **Save**.
+**Admin Panel → Appearance** changes the look of the whole site without touching code. Every change is previewed live, for you only, until you click **Save**, except images: they are public as soon as they are uploaded.
 
 ## Theme
 
diff --git a/i18n/locales/de/appearance.json b/i18n/locales/de/appearance.json
index 87ed77b6..5f68ed36 100644
--- a/i18n/locales/de/appearance.json
+++ b/i18n/locales/de/appearance.json
@@ -13,7 +13,7 @@
     },
     "unsaved": "Ungespeicherte Änderungen",
     "discard": "Verwerfen",
-    "previewHint": "Änderungen werden bis zum Speichern nur für dich auf der ganzen Seite angezeigt.",
+    "previewHint": "Änderungen werden bis zum Speichern nur für dich auf der ganzen Seite angezeigt. Ausnahme sind Bilder: Sie sind sofort nach dem Hochladen öffentlich.",
     "saved": "Erscheinungsbild gespeichert",
     "saveFailed": "Erscheinungsbild konnte nicht gespeichert werden",
     "presets": {
diff --git a/i18n/locales/en/appearance.json b/i18n/locales/en/appearance.json
index f5502d0a..6f43b6f3 100644
--- a/i18n/locales/en/appearance.json
+++ b/i18n/locales/en/appearance.json
@@ -13,7 +13,7 @@
     },
     "unsaved": "Unsaved changes",
     "discard": "Discard",
-    "previewHint": "Changes are previewed on the whole site for you only, until you save them.",
+    "previewHint": "Changes are previewed on the whole site for you only, until you save them. Images are the exception: they are public as soon as they are uploaded.",
     "saved": "Appearance saved",
     "saveFailed": "Could not save the appearance",
     "presets": {
diff --git a/i18n/locales/es/appearance.json b/i18n/locales/es/appearance.json
index 0647b44b..b3788d39 100644
--- a/i18n/locales/es/appearance.json
+++ b/i18n/locales/es/appearance.json
@@ -13,7 +13,7 @@
     },
     "unsaved": "Cambios sin guardar",
     "discard": "Descartar",
-    "previewHint": "Los cambios se previsualizan en todo el sitio, solo para ti, hasta que los guardes.",
+    "previewHint": "Los cambios se previsualizan en todo el sitio, solo para ti, hasta que los guardes. Salvo las imágenes: son públicas en cuanto se suben.",
     "saved": "Apariencia guardada",
     "saveFailed": "No se pudo guardar la apariencia",
     "presets": {
diff --git a/i18n/locales/fr/appearance.json b/i18n/locales/fr/appearance.json
index 8dfe0be4..79eda749 100644
--- a/i18n/locales/fr/appearance.json
+++ b/i18n/locales/fr/appearance.json
@@ -13,7 +13,7 @@
     },
     "unsaved": "Modifications non enregistrées",
     "discard": "Annuler",
-    "previewHint": "Les modifications sont prévisualisées sur tout le site, pour vous seul, jusqu'à l'enregistrement.",
+    "previewHint": "Les modifications sont prévisualisées sur tout le site, pour vous seul, jusqu'à l'enregistrement. Sauf les images : elles sont publiques dès leur envoi.",
     "saved": "Apparence enregistrée",
     "saveFailed": "Impossible d'enregistrer l'apparence",
     "presets": {
diff --git a/i18n/locales/it/appearance.json b/i18n/locales/it/appearance.json
index be599267..f0e74b3b 100644
--- a/i18n/locales/it/appearance.json
+++ b/i18n/locales/it/appearance.json
@@ -13,7 +13,7 @@
     },
     "unsaved": "Modifiche non salvate",
     "discard": "Annulla",
-    "previewHint": "Le modifiche sono visibili in anteprima su tutto il sito, solo per te, finché non le salvi.",
+    "previewHint": "Le modifiche sono visibili in anteprima su tutto il sito, solo per te, finché non le salvi. Tranne le immagini: sono pubbliche appena caricate.",
     "saved": "Aspetto salvato",
     "saveFailed": "Impossibile salvare l'aspetto",
     "presets": {
diff --git a/i18n/locales/ja/appearance.json b/i18n/locales/ja/appearance.json
index a9436638..653c8ae4 100644
--- a/i18n/locales/ja/appearance.json
+++ b/i18n/locales/ja/appearance.json
@@ -13,7 +13,7 @@
     },
     "unsaved": "未保存の変更があります",
     "discard": "破棄",
-    "previewHint": "保存するまで、変更はあなたにだけサイト全体でプレビュー表示されます。",
+    "previewHint": "保存するまで、変更はあなたにだけサイト全体でプレビュー表示されます。ただし画像は例外で、アップロードした時点で公開されます。",
     "saved": "外観を保存しました",
     "saveFailed": "外観を保存できませんでした",
     "presets": {
diff --git a/i18n/locales/ru/appearance.json b/i18n/locales/ru/appearance.json
index f089f301..dd6c20e4 100644
--- a/i18n/locales/ru/appearance.json
+++ b/i18n/locales/ru/appearance.json
@@ -13,7 +13,7 @@
     },
     "unsaved": "Есть несохранённые изменения",
     "discard": "Отменить",
-    "previewHint": "До сохранения изменения видны на всём сайте только вам.",
+    "previewHint": "До сохранения изменения видны на всём сайте только вам. Исключение — изображения: они становятся общедоступными сразу после загрузки.",
     "saved": "Оформление сохранено",
     "saveFailed": "Не удалось сохранить оформление",
     "presets": {
diff --git a/i18n/locales/zh/appearance.json b/i18n/locales/zh/appearance.json
index fd01322f..dc4cacd3 100644
--- a/i18n/locales/zh/appearance.json
+++ b/i18n/locales/zh/appearance.json
@@ -13,7 +13,7 @@
     },
     "unsaved": "有未保存的更改",
     "discard": "放弃",
-    "previewHint": "保存之前，更改仅对你在整个站点上预览。",
+    "previewHint": "保存之前，更改仅对你在整个站点上预览。图片除外：上传后立即公开。",
     "saved": "外观已保存",
     "saveFailed": "无法保存外观",
     "presets": {
diff --git a/server/api/admin/appearance/index.put.ts b/server/api/admin/appearance/index.put.ts
index 58e03043..a042caf4 100644
--- a/server/api/admin/appearance/index.put.ts
+++ b/server/api/admin/appearance/index.put.ts
@@ -2,7 +2,7 @@ import { requireAdminSession } from '../../../utils/adminAuth';
 import { getAppearance, setAppearance } from '../../../utils/settings';
 import { getLocaleSource } from '../../../utils/localeSource';
 import { validateBody } from '../../../utils/schemas';
-import { appearanceSchema } from '../../../../shared/utils/appearance';
+import { appearanceSchema, keepTextOverrides } from '../../../../shared/utils/appearance';
 
 /**
  * PUT /api/admin/appearance
@@ -13,14 +13,9 @@ export default defineEventHandler(async (event) => {
   await requireAdminSession(event);
   const body = await validateBody(event, appearanceSchema);
 
-  // Only keys that exist in the shipped translations, and no copy of the
-  // default text: an override equal to it would hide later translation fixes
   const texts: typeof body.texts = {};
   for (const [locale, overrides] of Object.entries(body.texts) as [keyof typeof body.texts, Record<string, string>][]) {
-    const source = await getLocaleSource(locale);
-    const kept = Object.fromEntries(
-      Object.entries(overrides).filter(([key, text]) => key in source && text.trim() !== '' && text !== source[key])
-    );
+    const kept = keepTextOverrides(overrides, await getLocaleSource(locale));
     if (Object.keys(kept).length > 0) texts[locale] = kept;
   }
 
diff --git a/shared/utils/appearance.ts b/shared/utils/appearance.ts
index 2e472a74..591c4565 100644
--- a/shared/utils/appearance.ts
+++ b/shared/utils/appearance.ts
@@ -392,3 +392,19 @@ export function flattenMessages(tree: MessageTree, prefix = '', out: Record<stri
   }
   return out;
 }
+
+/**
+ * Overrides worth storing: keys the shipped translations define (own keys
+ * only, not toString & co.), and no copy of the shipped text, which would
+ * hide later translation fixes.
+ */
+export function keepTextOverrides(
+  overrides: Record<string, string>,
+  source: Record<string, string>
+): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries(overrides).filter(
+      ([key, text]) => Object.hasOwn(source, key) && text.trim() !== '' && text !== source[key]
+    )
+  );
+}
diff --git a/tests/appearance.test.ts b/tests/appearance.test.ts
index 0ffca0af..c4696efe 100644
--- a/tests/appearance.test.ts
+++ b/tests/appearance.test.ts
@@ -8,6 +8,7 @@ import {
   buildOverrideTree,
   buildThemeCss,
   hexToChannels,
+  keepTextOverrides,
   overrideMessage,
   parseAppearance,
   resolvePalettes,
@@ -149,3 +150,16 @@ describe('buildOverrideTree', () => {
     expect(Object.keys(buildOverrideTree({ 'constructor.prototype.y': 'z' }))).toEqual([]);
   });
 });
+
+describe('keepTextOverrides', () => {
+  const source = { 'auth.title': 'Sign in', 'nav.home': 'Home' };
+
+  it('keeps changed texts of shipped keys', () => {
+    expect(keepTextOverrides({ 'auth.title': 'Enter' }, source)).toEqual({ 'auth.title': 'Enter' });
+  });
+
+  it('drops unknown keys, inherited names, blanks and copies of the shipped text', () => {
+    const overrides = { toString: 'x', valueOf: 'y', 'nav.missing': 'z', 'nav.home': 'Home', 'auth.title': '  ' };
+    expect(keepTextOverrides(overrides, source)).toEqual({});
+  });
+});