diff --git a/CLAUDE.md b/CLAUDE.md
index 4cdc3356..ca5c7eaf 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -172,9 +172,17 @@ promoted to `dev` in batches. While it is in progress:
   (`panel`, `btn`, `form-input`, `badge`, `animate__*`, `screen_loader`, `main-section`),
   plus `pilotui/toast` and `useAppStore` from `pilotui/store`. Un-migrated screens render
   inside the new shell and keep working.
-- **Dark mode is light-only on migrated surfaces.** The theme switcher stays and
-  `:root.dark` is scaffolded but empty, so toggling dark leaves migrated screens light while
-  pilotui ones go dark. Deliberate; dark lands as its own milestone.
+- **Dark mode is real on `st-` surfaces.** The theme is applied as
+  `data-theme="light" | "dark"` on `<html>`; both Tailwind builds use
+  `darkMode: ['selector', '[data-theme="dark"]']`, and `@nuxtjs/color-mode` owns the
+  preference (Light / Dark / System, `subturtle:theme`, pre-paint script, no flash). The
+  control is `StThemeSwitcher` in the topbar — there is no Appearance row in the profile
+  menu. Un-migrated pilotui screens keep their own `dark:` behaviour; the module also keeps
+  writing the `.dark` class and `plugins/theme.client.ts` mirrors the preference into
+  pilotui's store, so the two never disagree, but they are not styled to match and will not
+  be until each screen migrates.
+  ⚠️ `ui/src/styles/theme-tokens.css` still holds the EARLIER handoff's palette. The design
+  system's own `subturtle-theme.css` supersedes it wholesale — see the banner in that file.
 - `subturtle-ui` is a `link:../ui` dependency whose `dist/` is not committed, so the
   frontend's `postinstall` builds it. Any context that installs the frontend needs `ui/`
   present — the Dockerfile copies it in.
diff --git a/frontend/components/Leitner/LeitnerPhrasePicker.vue b/frontend/components/Leitner/LeitnerPhrasePicker.vue
index b4fb07c6..bf4df394 100644
--- a/frontend/components/Leitner/LeitnerPhrasePicker.vue
+++ b/frontend/components/Leitner/LeitnerPhrasePicker.vue
@@ -1,324 +1,285 @@
 <script setup lang="ts">
-import { ref, watch, computed, nextTick } from 'vue';
-import { functionProvider, dataProvider } from '@modular-rest/client';
-import { DATABASE, COLLECTIONS } from '~/types/database.type';
-import { useProfileStore } from '~/stores/profile';
-import { storeToRefs } from 'pinia';
-import { Button, Input, Modal } from 'pilotui';
-import Toggle from '~/components/material/Toggle.vue';
-
-const props = defineProps<{
-	targetBox: number | null;
-	totalBoxes: number;
-	modelValue: boolean;
-}>();
-
-const emit = defineEmits(['update:modelValue', 'phraseAdded', 'phraseRemoved']);
-
-const profileStore = useProfileStore();
-const { authUser } = storeToRefs(profileStore);
-const { t } = useI18n();
-
-const phrases = ref<any[]>([]);
-const bundles = ref<any[]>([]);
-const boxPhraseIds = ref<Set<string>>(new Set());
-const phraseToBoxMap = ref<Record<string, number>>({});
-const loading = ref(false);
-const totalPhrases = ref(0);
-const page = ref(1);
-const limit = ref(10);
-const search = ref('');
-const selectedBundleId = ref('');
-const activeBox = ref<number>(1);
-const pagination = ref<any>(null);
-const phraseFilterIds = ref<string[] | null>(null);
-const showOnlyInBox = ref(false);
-
-const controller = computed(() => {
-	const query: any = {
-		refId: authUser.value?.id,
-		phrase: { $regex: search.value, $options: 'i' }
-	};
-
-	let resultIds: string[] | null = null;
-	if (showOnlyInBox.value) {
-		resultIds = Object.entries(phraseToBoxMap.value)
-			.filter(([_, box]) => box === activeBox.value)
-			.map(([id]) => id);
-	}
-
-	if (phraseFilterIds.value) {
-		if (resultIds === null) {
-			resultIds = phraseFilterIds.value;
-		} else {
-			const bundleIds = new Set(phraseFilterIds.value);
-			resultIds = resultIds.filter(id => bundleIds.has(id));
-		}
-	}
-
-	if (resultIds !== null) {
-		query._id = { $in: resultIds };
-	}
-
-	return dataProvider.list<any>(
-		{
-			database: DATABASE.USER_CONTENT,
-			collection: COLLECTIONS.PHRASE,
-			query,
-			options: {
-				sort: { createdAt: -1 }
-			}
-		},
-		{
-			limit: limit.value,
-			page: page.value,
-			onFetched: (items) => {
-				phrases.value = items || [];
-				pagination.value = controller.value.pagination;
-				totalPhrases.value = controller.value.pagination.total;
-			}
-		}
-	);
-});
-
-async function loadPickerData() {
-	try {
-		const info = await functionProvider.run({
-			name: 'get-phrase-management-info',
-			args: { userId: authUser.value?.id }
-		}) as any;
-		phraseToBoxMap.value = info?.phraseToBoxMap || {};
-		boxPhraseIds.value = new Set(Object.keys(phraseToBoxMap.value));
-		bundles.value = info?.bundles || [];
-	} catch (e) {
-		console.error('[Picker] Failed to load picker metadata', e);
-	}
-}
-
-async function fetchPhrases() {
-	loading.value = true;
-	try {
-		if (selectedBundleId.value) {
-			const bundle = await dataProvider.findOne<any>({
-				database: DATABASE.USER_CONTENT,
-				collection: COLLECTIONS.PHRASE_BUNDLE,
-				query: { _id: selectedBundleId.value }
-			} as any);
-			phraseFilterIds.value = bundle?.phrases || [];
-		} else {
-			phraseFilterIds.value = null;
-		}
-
-		// Check for early empty result when filtering by box
-		if (showOnlyInBox.value) {
-			const boxIds = Object.entries(phraseToBoxMap.value)
-				.filter(([_, box]) => box === activeBox.value)
-				.map(([id]) => id);
-
-			// If box is empty, or if we intersect and result is empty
-			if (boxIds.length === 0 || (phraseFilterIds.value && boxIds.filter(id => phraseFilterIds.value!.includes(id)).length === 0)) {
-				phrases.value = [];
-				totalPhrases.value = 0;
-				loading.value = false;
-				return;
-			}
-		}
-
-		await nextTick(); // Ensure computed controller updates with new phraseFilterIds
-		await controller.value.updatePagination();
-		await controller.value.fetchPage(page.value);
-	} catch (e) {
-		console.error('[Picker] Failed to fetch phrases', e);
-	} finally {
-		loading.value = false;
-	}
-}
-
-async function addPhrase(phraseId: string) {
-	const pid = phraseId.toString();
-	try {
-		await functionProvider.run({
-			name: 'add-phrase-to-box',
-			args: {
-				userId: authUser.value?.id,
-				phraseId: pid,
-				boxLevel: activeBox.value
-			}
-		});
-		phraseToBoxMap.value[pid] = activeBox.value;
-		boxPhraseIds.value.add(pid);
-		emit('phraseAdded');
-	} catch (e) {
-		console.error('[Picker] Failed to add phrase', e);
-	}
-}
-
-async function removePhrase(phraseId: string) {
-	const pid = phraseId.toString();
-	try {
-		await functionProvider.run({
-			name: 'remove-phrase-from-box',
-			args: {
-				userId: authUser.value?.id,
-				phraseId: pid
-			}
-		});
-		delete phraseToBoxMap.value[pid];
-		boxPhraseIds.value.delete(pid);
-		emit('phraseRemoved');
-	} catch (e) {
-		console.error('[Picker] Failed to remove phrase', e);
-	}
-}
-
-watch(() => props.modelValue, (newVal) => {
-	if (newVal) {
-		activeBox.value = props.targetBox || 1;
-		search.value = '';
-		selectedBundleId.value = '';
-		showOnlyInBox.value = false;
-		loadPickerData();
-		fetchPhrases();
-	}
-});
-
-watch([search, selectedBundleId, page, showOnlyInBox, activeBox], () => {
-	fetchPhrases();
-});
-
-function close() {
-	emit('update:modelValue', false);
-}
+    import { ref, watch, computed, nextTick } from 'vue';
+    import { functionProvider, dataProvider } from '@modular-rest/client';
+    import { DATABASE, COLLECTIONS } from '~/types/database.type';
+    import { useProfileStore } from '~/stores/profile';
+    import { storeToRefs } from 'pinia';
+    import { StButton, StInput, StSkeleton, StSwitch } from 'subturtle-ui';
+
+    /**
+     * The level's phrase manager. It used to be a modal opened from the level row; the redesign
+     * makes it the inline panel underneath that row (one level open at a time), so `targetBox` is
+     * the open level rather than a modal argument. Only the shell changed — the data logic
+     * (picker metadata, the paged phrase query, add/remove) is as it was.
+     */
+    const props = defineProps<{
+        targetBox: number | null;
+        totalBoxes: number;
+    }>();
+
+    const emit = defineEmits(['phraseAdded', 'phraseRemoved']);
+
+    const profileStore = useProfileStore();
+    const { authUser } = storeToRefs(profileStore);
+    const { t } = useI18n();
+
+    const phrases = ref<any[]>([]);
+    const bundles = ref<any[]>([]);
+    const boxPhraseIds = ref<Set<string>>(new Set());
+    const phraseToBoxMap = ref<Record<string, number>>({});
+    const loading = ref(false);
+    const totalPhrases = ref(0);
+    const page = ref(1);
+    const limit = ref(10);
+    const search = ref('');
+    const selectedBundleId = ref('');
+    const activeBox = ref<number>(props.targetBox || 1);
+    const pagination = ref<any>(null);
+    const phraseFilterIds = ref<string[] | null>(null);
+    const showOnlyInBox = ref(false);
+
+    const totalPages = computed(() => Math.max(1, Math.ceil(totalPhrases.value / limit.value)));
+
+    const controller = computed(() => {
+        const query: any = {
+            refId: authUser.value?.id,
+            phrase: { $regex: search.value, $options: 'i' },
+        };
+
+        let resultIds: string[] | null = null;
+        if (showOnlyInBox.value) {
+            resultIds = Object.entries(phraseToBoxMap.value)
+                .filter(([_, box]) => box === activeBox.value)
+                .map(([id]) => id);
+        }
+
+        if (phraseFilterIds.value) {
+            if (resultIds === null) {
+                resultIds = phraseFilterIds.value;
+            } else {
+                const bundleIds = new Set(phraseFilterIds.value);
+                resultIds = resultIds.filter((id) => bundleIds.has(id));
+            }
+        }
+
+        if (resultIds !== null) {
+            query._id = { $in: resultIds };
+        }
+
+        return dataProvider.list<any>(
+            {
+                database: DATABASE.USER_CONTENT,
+                collection: COLLECTIONS.PHRASE,
+                query,
+                options: {
+                    sort: { createdAt: -1 },
+                },
+            },
+            {
+                limit: limit.value,
+                page: page.value,
+                onFetched: (items) => {
+                    phrases.value = items || [];
+                    pagination.value = controller.value.pagination;
+                    totalPhrases.value = controller.value.pagination.total;
+                },
+            }
+        );
+    });
+
+    async function loadPickerData() {
+        try {
+            const info = (await functionProvider.run({
+                name: 'get-phrase-management-info',
+                args: { userId: authUser.value?.id },
+            })) as any;
+            phraseToBoxMap.value = info?.phraseToBoxMap || {};
+            boxPhraseIds.value = new Set(Object.keys(phraseToBoxMap.value));
+            bundles.value = info?.bundles || [];
+        } catch (e) {
+            console.error('[Picker] Failed to load picker metadata', e);
+        }
+    }
+
+    async function fetchPhrases() {
+        loading.value = true;
+        try {
+            if (selectedBundleId.value) {
+                const bundle = await dataProvider.findOne<any>({
+                    database: DATABASE.USER_CONTENT,
+                    collection: COLLECTIONS.PHRASE_BUNDLE,
+                    query: { _id: selectedBundleId.value },
+                } as any);
+                phraseFilterIds.value = bundle?.phrases || [];
+            } else {
+                phraseFilterIds.value = null;
+            }
+
+            // Check for early empty result when filtering by box
+            if (showOnlyInBox.value) {
+                const boxIds = Object.entries(phraseToBoxMap.value)
+                    .filter(([_, box]) => box === activeBox.value)
+                    .map(([id]) => id);
+
+                // If box is empty, or if we intersect and result is empty
+                if (boxIds.length === 0 || (phraseFilterIds.value && boxIds.filter((id) => phraseFilterIds.value!.includes(id)).length === 0)) {
+                    phrases.value = [];
+                    totalPhrases.value = 0;
+                    loading.value = false;
+                    return;
+                }
+            }
+
+            await nextTick(); // Ensure computed controller updates with new phraseFilterIds
+            await controller.value.updatePagination();
+            await controller.value.fetchPage(page.value);
+        } catch (e) {
+            console.error('[Picker] Failed to fetch phrases', e);
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    async function addPhrase(phraseId: string) {
+        const pid = phraseId.toString();
+        try {
+            await functionProvider.run({
+                name: 'add-phrase-to-box',
+                args: {
+                    userId: authUser.value?.id,
+                    phraseId: pid,
+                    boxLevel: activeBox.value,
+                },
+            });
+            phraseToBoxMap.value[pid] = activeBox.value;
+            boxPhraseIds.value.add(pid);
+            emit('phraseAdded');
+        } catch (e) {
+            console.error('[Picker] Failed to add phrase', e);
+        }
+    }
+
+    async function removePhrase(phraseId: string) {
+        const pid = phraseId.toString();
+        try {
+            await functionProvider.run({
+                name: 'remove-phrase-from-box',
+                args: {
+                    userId: authUser.value?.id,
+                    phraseId: pid,
+                },
+            });
+            delete phraseToBoxMap.value[pid];
+            boxPhraseIds.value.delete(pid);
+            emit('phraseRemoved');
+        } catch (e) {
+            console.error('[Picker] Failed to remove phrase', e);
+        }
+    }
+
+    // The open level IS the target level now — following it replaces the modal's open-time reset.
+    watch(
+        () => props.targetBox,
+        (box) => {
+            if (!box) return;
+            activeBox.value = box;
+            search.value = '';
+            selectedBundleId.value = '';
+            showOnlyInBox.value = false;
+            page.value = 1;
+            loadPickerData();
+            fetchPhrases();
+        },
+        { immediate: true }
+    );
+
+    watch([search, selectedBundleId, page, showOnlyInBox, activeBox], () => {
+        fetchPhrases();
+    });
+
+    // Searching or re-filtering invalidates the current page number.
+    watch([search, selectedBundleId, showOnlyInBox], () => {
+        page.value = 1;
+    });
 </script>
 
 <template>
-	<Modal :modelValue="modelValue" :title="$t('smart_review.select_phrase')" @close="close" size="xl">
-		<template #trigger="{ toggleModal }">
-			<p></p>
-		</template>
-		<template #default>
-			<div class="flex flex-col gap-4">
-				<!-- Box Selector -->
-				<div class="flex flex-wrap gap-2 border-b border-gray-100 pb-4 dark:border-gray-700">
-					<span class="flex items-center text-sm font-semibold text-gray-500 mr-2">{{
-						$t('smart_review.target_level') }}:</span>
-					<button v-for="b in totalBoxes" :key="b" @click="activeBox = b" :class="[
-						'px-4 py-1.5 rounded-full text-xs font-bold transition-all border',
-						activeBox === b
-							? 'bg-primary border-primary text-white shadow-md ring-2 ring-primary/20'
-							: 'bg-white border-gray-200 text-gray-600 hover:border-primary-400 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400'
-					]">
-						{{ $t('smart_review.level_number', { number: b }) }}
-					</button>
-				</div>
-
-				<!-- Search & Filters -->
-				<div class="flex flex-col gap-4 sm:flex-row sm:items-center">
-					<div class="flex-1">
-						<Input v-model="search" iconName="IconSearch"
-							:placeholder="$t('smart_review.search_phrases_placeholder')" class="w-full" />
-					</div>
-
-					<div class="flex items-center gap-3 bg-gray-50 dark:bg-gray-800/50 p-1.5 px-3 rounded-lg border border-gray-100 dark:border-gray-700 transition-all"
-						:class="{ 'border-primary/50 dark:border-primary/50': showOnlyInBox }">
-						<select v-model="selectedBundleId"
-							class="rounded-md border-0 bg-transparent text-sm focus:ring-0 dark:text-white cursor-pointer min-w-[140px]">
-							<option value="">{{ $t('smart_review.all_bundles') }}</option>
-							<option v-for="bundle in bundles" :key="bundle._id" :value="bundle._id">
-								{{ bundle.title }}
-							</option>
-						</select>
-
-						<div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
-
-						<div class="flex items-center px-2 py-1 rounded-md transition-all"
-							:class="{ 'bg-primary-light dark:bg-primary-dark-light shadow-sm': showOnlyInBox }">
-							<Toggle v-model="showOnlyInBox"
-								:label="$t('smart_review.level_number', { number: activeBox }) + ':'" />
-						</div>
-					</div>
-				</div>
-
-				<!-- Phrase List -->
-				<div
-					class="phrase-list-container h-[450px] overflow-y-auto rounded-lg border border-gray-100 dark:border-gray-700 shadow-inner">
-					<div v-if="loading" class="flex h-64 items-center justify-center">
-						<span class="text-gray-500">{{ $t('smart_review.loading') }}</span>
-					</div>
-					<div v-else-if="phrases.length === 0" class="flex h-64 items-center justify-center">
-						<span class="text-gray-500">{{ $t('smart_review.no_phrases_found') }}</span>
-					</div>
-					<div v-else class="divide-y divide-gray-100 dark:divide-gray-700">
-						<div v-for="phrase in phrases" :key="phrase._id"
-							class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
-							<div class="flex-1 pr-4">
-								<p class="font-bold text-gray-900 dark:text-white">{{ phrase.phrase }}</p>
-								<p class="text-sm text-gray-500 dark:text-gray-400">{{ phrase.translation }}</p>
-							</div>
-							<div class="shrink-0 flex gap-2">
-								<template v-if="phraseToBoxMap[phrase._id]">
-									<Button v-if="phraseToBoxMap[phrase._id] !== activeBox" size="sm" variant="outline"
-										@click="addPhrase(phrase._id)">
-										{{ $t('smart_review.move_to_level', { number: activeBox }) }}
-									</Button>
-									<Button v-if="phraseToBoxMap[phrase._id] === activeBox" size="sm" variant="danger"
-										@click="removePhrase(phrase._id)">
-										{{ $t('smart_review.remove_from_level', { number: activeBox }) }}
-									</Button>
-								</template>
-								<Button v-else size="sm" @click="addPhrase(phrase._id)">
-									{{ $t('smart_review.add_to_level', { number: activeBox }) }}
-								</Button>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- Pagination -->
-				<div class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-gray-700">
-					<span class="text-sm text-gray-500">{{ $t('smart_review.total_phrases', { count: totalPhrases })
-					}}</span>
-					<div class="flex gap-2">
-						<Button size="sm" variant="secondary" :disabled="page <= 1" @click="page--">{{
-							$t('smart_review.previous')
-						}}</Button>
-						<span class="flex items-center px-4 py-1 text-sm font-medium">{{ $t('smart_review.page', {
-							page:
-								page
-						})
-						}}</span>
-						<Button size="sm" variant="secondary" :disabled="phrases.length < limit" @click="page++">{{
-							$t('smart_review.next') }}</Button>
-					</div>
-				</div>
-			</div>
-		</template>
-	</Modal>
+    <div class="border-t border-st-line bg-st-sunken p-[18px]">
+        <div class="mb-[14px] flex flex-wrap items-center gap-3">
+            <span class="text-st-xs font-extrabold text-st-strong">
+                {{ t('smart_review.phrases_in_level', { number: activeBox }) }}
+            </span>
+            <span class="flex-1"></span>
+
+            <StInput v-model="search" icon="solar:magnifer-linear" :placeholder="t('smart_review.search_phrases_placeholder')" class="w-[210px]" />
+
+            <!-- Native select: the design draws a pill that opens a bundle list, and the design
+                 system ships no Select yet. Styled to match the Input beside it. -->
+            <select
+                v-model="selectedBundleId"
+                class="h-control-md rounded-st-md border border-st-line bg-st-card px-3.5 text-st-xs font-bold text-st-body outline-none focus:border-st-primary"
+            >
+                <option value="">{{ t('smart_review.all_bundles') }}</option>
+                <option v-for="bundle in bundles" :key="bundle._id" :value="bundle._id">
+                    {{ bundle.title }}
+                </option>
+            </select>
+
+            <StSwitch v-model="showOnlyInBox" size="sm" :label="t('smart_review.only_this_level')" class="text-st-xs font-bold text-st-muted" />
+        </div>
+
+        <div v-if="loading" class="flex flex-col gap-2">
+            <StSkeleton v-for="n in 4" :key="n" class="h-[52px]" />
+        </div>
+
+        <p v-else-if="!phrases.length" class="py-8 text-center text-st-sm font-semibold text-st-muted">
+            {{ t('smart_review.no_phrases_found') }}
+        </p>
+
+        <div v-else class="flex flex-col gap-2">
+            <div
+                v-for="phrase in phrases"
+                :key="phrase._id"
+                class="flex flex-wrap items-center gap-4 rounded-st-md border border-st-line bg-st-card px-3.5 py-[11px]"
+            >
+                <div class="min-w-0 flex-1">
+                    <span class="text-st-sm font-extrabold text-st-strong">{{ phrase.phrase }}</span>
+                    <span class="text-st-sm font-semibold text-st-muted"> — {{ phrase.translation }}</span>
+                </div>
+
+                <span class="flex-none rounded-st-pill bg-st-sunken px-[11px] py-1 text-st-2xs font-extrabold text-st-muted">
+                    {{ phraseToBoxMap[phrase._id] ? t('smart_review.level_number', { number: phraseToBoxMap[phrase._id] }) : t('smart_review.not_in_chain') }}
+                </span>
+
+                <template v-if="phraseToBoxMap[phrase._id]">
+                    <StButton v-if="phraseToBoxMap[phrase._id] !== activeBox" variant="soft" color="primary" size="sm" @click="addPhrase(phrase._id)">
+                        {{ t('smart_review.move_to_level', { number: activeBox }) }}
+                    </StButton>
+                    <StButton v-else variant="ghost" color="danger" size="sm" @click="removePhrase(phrase._id)">
+                        {{ t('smart_review.remove') }}
+                    </StButton>
+                </template>
+                <StButton v-else variant="soft" color="primary" size="sm" @click="addPhrase(phrase._id)">
+                    {{ t('smart_review.add_here') }}
+                </StButton>
+            </div>
+        </div>
+
+        <div class="mt-[14px] flex flex-wrap items-center justify-between gap-4">
+            <span class="text-st-xs font-bold text-st-muted">
+                {{ t('smart_review.total_phrases', { count: totalPhrases }) }}
+            </span>
+            <div class="flex items-center gap-2">
+                <StButton variant="ghost" color="neutral" size="sm" :disabled="page <= 1" @click="page--">
+                    {{ t('smart_review.previous') }}
+                </StButton>
+                <span class="text-st-xs font-extrabold text-st-body">
+                    {{ t('smart_review.page_of', { page, total: totalPages }) }}
+                </span>
+                <StButton variant="ghost" color="neutral" size="sm" :disabled="page >= totalPages" @click="page++">
+                    {{ t('smart_review.next') }}
+                </StButton>
+            </div>
+        </div>
+    </div>
 </template>
-
-<style scoped>
-.phrase-list-container::-webkit-scrollbar {
-	width: 6px;
-}
-
-.phrase-list-container::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-.phrase-list-container::-webkit-scrollbar-thumb {
-	background: #e2e8f0;
-	border-radius: 10px;
-}
-
-.dark .phrase-list-container::-webkit-scrollbar-thumb {
-	background: #334155;
-}
-
-.phrase-list-container::-webkit-scrollbar-thumb:hover {
-	background: #cbd5e1;
-}
-
-.dark .phrase-list-container::-webkit-scrollbar-thumb:hover {
-	background: #475569;
-}
-</style>
diff --git a/frontend/components/Leitner/LeitnerSettings.vue b/frontend/components/Leitner/LeitnerSettings.vue
index a304e455..7c7707d8 100644
--- a/frontend/components/Leitner/LeitnerSettings.vue
+++ b/frontend/components/Leitner/LeitnerSettings.vue
@@ -1,537 +1,621 @@
 <template>
-    <div class="flex flex-col gap-8 pb-20">
-        <!-- Header / Stats Summary -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <Card
-                class="p-4 bg-gradient-to-br from-primary-light to-white dark:from-primary-dark-light dark:to-gray-800 border-none shadow-sm overflow-hidden relative">
-                <div class="relative">
-                    <p class="text-xs font-bold text-primary uppercase tracking-wider">{{
-                        $t('smart_review.total_progress') }}</p>
-                    <h3 class="text-2xl font-black text-gray-900 dark:text-white">{{ stats?.totalItems || 0 }}</h3>
-                    <p class="text-xs text-gray-500">{{ $t('smart_review.collected_phrases') }}</p>
-                </div>
-                <div class="absolute -right-4 -bottom-4 opacity-10 pointer-events-none">
-                    <Icon name="IconFolder" class="!w-24 !h-24 text-primary" />
-                </div>
-            </Card>
-
-            <Card
-                class="p-4 bg-gradient-to-br from-success-light to-white dark:from-success-dark-light dark:to-gray-800 border-none shadow-sm overflow-hidden relative">
-                <div class="relative">
-                    <p class="text-xs font-bold text-success uppercase tracking-wider">{{
-                        $t('smart_review.next_session') }}</p>
-                    <h3 class="text-2xl font-black text-gray-900 dark:text-white">{{ localSettings.reviewHour }}:00</h3>
-                    <p class="text-xs text-gray-500">{{ localSettings.reviewInterval === 1 ? $t('smart_review.daily') :
-                        $t('smart_review.every_days_reminder', { days: localSettings.reviewInterval }) }} ({{
-                            profileStore.userDetail?.timeZone || 'UTC' }})</p>
-                </div>
-                <div class="absolute -right-4 -bottom-4 opacity-10 pointer-events-none">
-                    <Icon name="IconClock" class="!w-24 !h-24 text-success" />
-                </div>
-            </Card>
-
-            <Card
-                class="p-4 bg-gradient-to-br from-warning-light to-white dark:from-warning-dark-light dark:to-gray-800 border-none shadow-sm overflow-hidden relative">
-                <div class="relative">
-                    <p class="text-xs font-bold text-warning uppercase tracking-wider">{{
-                        $t('smart_review.levels_active') }}</p>
-                    <h3 class="text-2xl font-black text-gray-900 dark:text-white">{{ localSettings.totalBoxes }}</h3>
-                    <p class="text-xs text-gray-500">{{ $t('smart_review.step_progression') }}</p>
-                </div>
-                <div class="absolute -right-4 -bottom-4 opacity-10 pointer-events-none">
-                    <Icon name="IconArchive" class="!w-24 !h-24 text-warning" />
-                </div>
-            </Card>
+    <div class="relative flex flex-col gap-5">
+        <!-- Save failure. pilotui's toaster renders nothing in this app (it asks for a
+             `TairoToaster` component nobody registers), so a failed save had no visible outcome
+             at all; the design's banner is the one that reports it. -->
+        <div v-if="saveFailed" class="flex items-center gap-3.5 rounded-st-md border border-st-danger bg-st-danger-soft px-[18px] py-3.5">
+            <StIcon name="solar:danger-triangle-bold" :size="22" class="flex-none text-st-danger" />
+            <div class="min-w-0 flex-1">
+                <div class="text-st-sm font-extrabold text-st-strong">{{ t('smart_review.save_failed_title') }}</div>
+                <p class="mt-0.5 text-st-xs font-semibold text-st-muted">{{ t('smart_review.save_failed_body') }}</p>
+            </div>
+            <StButton variant="soft" color="danger" size="sm" icon="solar:refresh-bold" :disabled="loading" @click="performSave">
+                {{ t('smart_review.try_again') }}
+            </StButton>
         </div>
 
-        <!-- Main Configuration Card -->
-        <Card class="rounded-2xl border border-gray-100 shadow-sm dark:border-gray-700 relative">
-            <!-- <div class="h-1.5 bg-gradient-to-r from-primary via-secondary to-primary-light"></div> -->
-            <div class="flex flex-col gap-6 p-8">
-                <div class="flex items-center gap-4">
-                    <div class="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
-                        <Icon name="IconSettings" class="!w-6 !h-6" />
-                    </div>
-                    <div>
-                        <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ $t('smart_review.settings') }}
-                        </h3>
-                        <p class="text-sm text-gray-500 dark:text-gray-400">
-                            {{ $t('smart_review.settings_desc') }}
-                        </p>
-                    </div>
-                </div>
+        <!-- Header: status, Discard, Save -->
+        <div class="flex flex-wrap items-end justify-between gap-8">
+            <div>
+                <div class="st-overline mb-2">{{ t('smart_review.title') }}</div>
+                <h1 class="font-st-display text-st-2xl font-black leading-[1.05] tracking-st-tight text-st-strong">
+                    {{ t('smart_review.page_title') }}
+                </h1>
+                <p class="mt-2 max-w-[29rem] text-st-base font-semibold leading-normal text-st-muted [text-wrap:pretty]">
+                    {{ t('smart_review.page_subtitle') }}
+                </p>
+            </div>
 
-                <div
-                    class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6 pt-4 border-t border-gray-100 dark:border-gray-700">
-                    <!-- Toggle: Auto Entry -->
-                    <div class="flex items-center justify-between group">
-                        <div class="flex flex-col gap-0.5">
-                            <div class="flex items-center gap-2 mb-0.5">
-                                <div class="flex items-center justify-center p-0.5">
-                                    <Icon name="iconify solar--rocket-bold"
-                                        class="text-primary opacity-50 !w-4 !h-4 shrink-0" />
-                                </div>
-                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">{{
-                                    $t('smart_review.auto_entry') }}</label>
+            <div class="flex flex-none items-center gap-3">
+                <span class="inline-flex items-center gap-2 text-st-xs font-extrabold" :class="settingsDirty || saveFailed ? 'text-st-body' : 'text-st-muted'">
+                    <span class="h-2 w-2 rounded-full" :class="saveFailed ? 'bg-st-danger' : settingsDirty ? 'bg-st-warning' : 'bg-st-accent'" />
+                    {{ statusLabel }}
+                </span>
+                <StButton v-if="settingsDirty" variant="ghost" color="neutral" :disabled="loading" @click="discard">
+                    {{ t('smart_review.discard') }}
+                </StButton>
+                <StButton
+                    :variant="settingsDirty ? 'solid' : 'soft'"
+                    color="primary"
+                    icon="solar:diskette-bold"
+                    class="whitespace-nowrap"
+                    :disabled="!settingsDirty || loading || resetting"
+                    @click="performSave"
+                >
+                    {{ t('smart_review.save_preferences') }}
+                </StButton>
+            </div>
+        </div>
+
+        <!-- Stat tiles -->
+        <div class="grid grid-cols-1 gap-[14px] sm:grid-cols-3">
+            <StStatTile icon="solar:bookmark-bold-duotone" :value="stats?.totalItems || 0" :label="t('smart_review.collected_phrases')" />
+            <StStatTile icon="solar:clock-circle-bold-duotone" accent="accent" :value="`${localSettings.reviewHour}:00`" :label="reviewCadenceLabel" />
+            <StStatTile
+                icon="solar:layers-minimalistic-bold-duotone"
+                accent="warning"
+                :value="localSettings.totalBoxes"
+                :label="t('smart_review.step_progression')"
+            />
+        </div>
+
+        <div class="flex flex-wrap items-start gap-5">
+            <!-- Left column: the journey + start over -->
+            <div class="flex min-w-[288px] max-w-[328px] flex-[1_1_328px] flex-col gap-[14px]">
+                <StCard>
+                    <div class="st-overline mb-4">{{ t('smart_review.the_journey') }}</div>
+
+                    <div class="flex flex-col gap-4">
+                        <div class="flex items-start justify-between gap-3.5">
+                            <div class="min-w-0">
+                                <div class="text-st-sm font-extrabold text-st-strong">{{ t('smart_review.auto_entry') }}</div>
+                                <p class="mt-[3px] text-st-xs font-semibold text-st-muted">{{ t('smart_review.auto_entry_desc') }}</p>
                             </div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400 max-w-[200px]">{{
-                                $t('smart_review.auto_entry_desc') }}</p>
+                            <StSwitch v-model="localSettings.autoEntry" :aria-label="t('smart_review.auto_entry')" />
                         </div>
-                        <Toggle v-model="localSettings.autoEntry" />
-                    </div>
 
-                    <!-- Input: Total Boxes -->
-                    <div class="flex items-center justify-between group">
-                        <div class="flex flex-col gap-0.5">
-                            <div class="flex items-center gap-2 mb-0.5">
-                                <div class="flex items-center justify-center p-0.5">
-                                    <Icon name="iconify solar--layers-bold"
-                                        class="text-primary opacity-50 !w-4 !h-4 shrink-0" />
+                        <div class="h-px bg-st-line" />
+
+                        <div class="flex items-center justify-between gap-3.5">
+                            <div class="min-w-0">
+                                <div class="flex items-center gap-2">
+                                    <span class="text-st-sm font-extrabold text-st-strong">{{ t('smart_review.total_levels') }}</span>
+                                    <StBadge v-if="changed.totalBoxes" color="warning">{{ t('smart_review.changed') }}</StBadge>
                                 </div>
-                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">
-                                    {{ $t('smart_review.total_levels') }}
-                                </label>
+                                <p class="mt-[3px] text-st-xs font-semibold text-st-muted">{{ t('smart_review.total_levels_note') }}</p>
                             </div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('smart_review.settings_desc') }}
-                            </p>
-                        </div>
-                        <div class="relative">
-                            <input v-model.number="localSettings.totalBoxes" type="number" min="1" max="10"
-                                class="form-input w-24 rounded-lg border-gray-200 bg-gray-50 py-2 px-3 text-sm font-bold focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary/10 dark:border-gray-600 dark:bg-gray-700 transition-all text-center" />
+                            <StInput
+                                :model-value="localSettings.totalBoxes"
+                                type="number"
+                                min="1"
+                                max="10"
+                                class="w-[82px]"
+                                @update:model-value="localSettings.totalBoxes = clamp($event, 1, 10)"
+                            />
                         </div>
-                    </div>
 
-                    <!-- Input: Daily Limit -->
-                    <div class="flex items-center justify-between group">
-                        <div class="flex flex-col gap-0.5">
-                            <div class="flex items-center gap-2 mb-0.5">
-                                <div class="flex items-center justify-center p-0.5">
-                                    <Icon name="IconChartSquare" class="text-primary opacity-50 !w-4 !h-4 shrink-0" />
+                        <div class="h-px bg-st-line" />
+
+                        <div class="flex items-center justify-between gap-3.5">
+                            <div class="min-w-0">
+                                <div class="flex items-center gap-2">
+                                    <span class="text-st-sm font-extrabold text-st-strong">{{ t('smart_review.global_daily_limit') }}</span>
+                                    <StBadge v-if="changed.dailyLimit" color="warning">{{ t('smart_review.changed') }}</StBadge>
                                 </div>
-                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">{{
-                                    $t('smart_review.global_daily_limit') }}</label>
+                                <p class="mt-[3px] text-st-xs font-semibold text-st-muted">{{ t('smart_review.max_phrases_desc') }}</p>
                             </div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $t('smart_review.max_phrases_desc')
-                                }}</p>
-                        </div>
-                        <div class="relative">
-                            <input v-model.number="localSettings.dailyLimit" type="number" min="1"
-                                class="form-input w-24 rounded-lg border-gray-200 bg-gray-50 py-2 px-3 text-sm font-bold focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary/10 dark:border-gray-600 dark:bg-gray-700 transition-all text-center" />
+                            <StInput
+                                :model-value="localSettings.dailyLimit"
+                                type="number"
+                                min="1"
+                                class="w-[82px]"
+                                @update:model-value="localSettings.dailyLimit = clamp($event, 1, 999)"
+                            />
                         </div>
-                    </div>
 
-                    <!-- Input: Review Interval Group -->
-                    <div class="flex items-center justify-between group relative flex-wrap">
-                        <div class="flex flex-col gap-0.5">
-                            <div class="flex items-center gap-2 mb-0.5">
-                                <div class="flex items-center justify-center p-0.5">
-                                    <Icon name="IconClock" class="text-primary opacity-50 !w-4 !h-4 shrink-0" />
-                                </div>
-                                <label class="font-bold text-gray-800 dark:text-gray-200 leading-none">{{
-                                    $t('smart_review.review_interval') }}</label>
+                        <div class="h-px bg-st-line" />
+
+                        <div>
+                            <div class="text-st-sm font-extrabold text-st-strong">{{ t('smart_review.review_interval') }}</div>
+                            <p class="mb-2.5 mt-[3px] text-st-xs font-semibold text-st-muted">{{ t('smart_review.session_frequency_desc') }}</p>
+                            <div class="flex flex-wrap items-center gap-2">
+                                <span class="text-st-2xs font-extrabold uppercase tracking-st-caps text-st-faint">{{ t('smart_review.each') }}</span>
+                                <StInput
+                                    :model-value="localSettings.reviewInterval"
+                                    type="number"
+                                    min="1"
+                                    class="w-16"
+                                    @update:model-value="localSettings.reviewInterval = clamp($event, 1, 30)"
+                                />
+                                <span class="text-st-2xs font-extrabold uppercase tracking-st-caps text-st-faint">{{ t('smart_review.day_at') }}</span>
+                                <!-- The design shows a time field ("9:00 AM"); the stored value is
+                                     an integer hour, so this is a 0-23 number with the minutes
+                                     spelled out beside it rather than a format the model can't hold. -->
+                                <StInput
+                                    :model-value="localSettings.reviewHour"
+                                    type="number"
+                                    min="0"
+                                    max="23"
+                                    class="w-[72px]"
+                                    @update:model-value="localSettings.reviewHour = clamp($event, 0, 23)"
+                                />
+                                <span class="text-st-xs font-bold text-st-muted">:00</span>
                             </div>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">
-                                {{ $t('smart_review.session_frequency_desc') }}
-                                <br />
-                                <span class="text-[10px] opacity-75">
-                                    {{ $t('smart_review.based_on_local_time') }}
-                                    <NuxtLink to="/settings/profile"
-                                        class="underline hover:text-primary transition-colors">
-                                        {{ $t('smart_review.setup_timezone') }}
-                                    </NuxtLink>
-                                </span>
+                            <p class="mt-2.5 text-st-xs font-semibold text-st-muted">
+                                {{ t('smart_review.times_follow', { zone: timeZone }) }}
+                                <NuxtLink to="/settings/profile" class="font-bold text-st-link hover:underline">{{
+                                    t('smart_review.setup_timezone')
+                                }}</NuxtLink>
                             </p>
                         </div>
-                        <div class="flex items-center gap-2">
-                            <span class="text-xs font-bold text-gray-400 uppercase">{{ $t('smart_review.each') }}</span>
-                            <input v-model.number="localSettings.reviewInterval" type="number" min="1"
-                                class="form-input w-16 rounded-lg border-gray-200 bg-gray-50 py-2 px-2 text-sm font-bold focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary/10 dark:border-gray-600 dark:bg-gray-700 transition-all text-center" />
-                            <span class="text-xs font-bold text-gray-400 uppercase whitespace-nowrap">{{
-                                $t('smart_review.day_at') }}</span>
-                            <HourSelector v-model="localSettings.reviewHour" />
-                        </div>
                     </div>
-                </div>
+                </StCard>
+
+                <StCard>
+                    <div class="mb-1.5 text-st-sm font-extrabold text-st-strong">{{ t('smart_review.start_over') }}</div>
+                    <p class="mb-3 text-st-xs font-semibold leading-normal text-st-muted">{{ resetNote }}</p>
+                    <StButton variant="ghost" color="danger" size="sm" icon="solar:restart-bold" class="whitespace-nowrap" @click="resetOpen = true">
+                        {{ t('smart_review.reset_progress') }}
+                    </StButton>
+                </StCard>
             </div>
-        </Card>
-
-        <!-- Vertical Flow Chain -->
-        <div class="relative flex flex-col space-y-0 px-4 md:px-0">
-            <template v-for="(box, index) in localSettings.totalBoxes" :key="index">
-                <div class="relative flex gap-8 items-stretch">
-                    <!-- Visual Progression Column -->
-                    <div class="flex flex-col items-center w-12 pt-4">
-                        <!-- Top Connection ( bridges the gap from previous row's bottom line) -->
-                        <div v-if="index > 0"
-                            class="h-4 w-1 bg-gradient-to-b from-gray-200/50 to-primary/30 dark:from-gray-700/50 dark:to-primary/50 -mt-4 mb-0">
-                        </div>
 
-                        <!-- Box Circle -->
-                        <div class="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border-2 bg-white shadow-lg transition-all my-0"
-                            :class="[
-                                index === 0 ? 'border-primary text-primary dark:border-primary-400 dark:text-primary-400 ring-4 ring-primary/5' : 'border-gray-200 text-gray-400 dark:border-gray-700 dark:text-gray-500 dark:bg-gray-800',
-                                getItemCount(index) > 0 ? 'bg-primary/5 border-primary/40' : ''
-                            ]">
-                            <!-- Pulse effect for non-empty boxes -->
-                            <div v-if="getItemCount(index) > 0"
-                                class="absolute inset-0 rounded-2xl bg-primary/20 animate-ping opacity-25"></div>
-                            <span class="text-sm font-black">{{ index + 1 }}</span>
-                        </div>
+            <!-- Right column: the chain -->
+            <div class="flex min-w-0 flex-[1_1_640px] flex-col gap-3">
+                <div class="flex flex-wrap items-baseline justify-between gap-4">
+                    <h2 class="font-st-display text-st-lg font-black tracking-st-tight text-st-strong">{{ t('smart_review.the_chain') }}</h2>
+                    <span class="text-st-xs font-bold text-st-faint">{{ chainNote }}</span>
+                </div>
+
+                <StCard v-if="!stats?.totalItems" padding="none">
+                    <StEmptyState
+                        icon="solar:bookmark-bold-duotone"
+                        color="neutral"
+                        :title="t('smart_review.empty_chain_title')"
+                        :description="t('smart_review.empty_chain_description')"
+                    />
+                </StCard>
 
-                        <!-- Progress Line Segment (Stretches to fill row height) -->
-                        <div v-if="index < localSettings.totalBoxes - 1"
-                            class="w-1 flex-1 bg-gradient-to-b from-primary/30 to-gray-200 dark:from-primary/50 dark:to-gray-700 rounded-full">
+                <div
+                    v-for="level in chain"
+                    :key="level.n"
+                    class="overflow-hidden rounded-st-lg border bg-st-card shadow-st-sm"
+                    :class="openLevel === level.n ? 'border-st-primary' : 'border-st-line'"
+                >
+                    <div class="flex flex-wrap items-center gap-4 px-[18px] py-3.5">
+                        <span
+                            class="flex h-[38px] w-[38px] flex-none items-center justify-center rounded-st-sm border-[1.5px] font-st-display text-st-sm font-black"
+                            :class="level.chipClass"
+                        >
+                            {{ level.n }}
+                        </span>
+
+                        <div class="min-w-[180px] flex-1">
+                            <div class="flex items-center gap-2.5">
+                                <span class="text-st-sm font-extrabold text-st-strong">{{ t('smart_review.level_number', { number: level.n }) }}</span>
+                                <StBadge v-if="level.tag" :color="level.tagColor">{{ level.tag }}</StBadge>
+                            </div>
+                            <p class="mt-1 text-st-xs font-semibold text-st-muted">{{ level.note }}</p>
+                            <div class="mt-[7px] flex items-center gap-2.5">
+                                <div class="h-1.5 max-w-[170px] flex-1 overflow-hidden rounded-st-pill bg-st-ink-150">
+                                    <div class="h-full rounded-st-pill" :class="level.barClass" :style="{ width: level.barWidth }" />
+                                </div>
+                                <span class="text-st-xs font-bold text-st-muted">{{ t('smart_review.n_cards', { count: level.count }) }}</span>
+                            </div>
                         </div>
-                    </div>
 
-                    <!-- Box Card Content -->
-                    <div class="flex-1 pb-12 group">
-                        <Card
-                            class="flex flex-col gap-4 rounded-2xl border border-gray-100 p-6 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1 dark:border-gray-700 dark:bg-gray-800/50 backdrop-blur-sm group-hover:bg-white dark:group-hover:bg-gray-800">
-                            <div class="flex flex-col justify-between gap-6 sm:flex-row sm:items-center">
-                                <div class="flex items-center gap-4">
-                                    <div
-                                        class="h-14 w-14 rounded-2xl bg-gray-50 dark:bg-gray-700/50 flex flex-col items-center justify-center border border-gray-100 dark:border-gray-600">
-                                        <span class="text-xl font-black text-primary">{{ getItemCount(index) }}</span>
-                                        <span class="text-[10px] font-bold uppercase tracking-tighter text-gray-400">{{
-                                            $t('smart_review.cards') }}</span>
-                                    </div>
-                                    <div>
-                                        <h4
-                                            class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
-                                            {{ $t('smart_review.level_number', { number: index + 1 }) }}
-                                            <span v-if="index === 0"
-                                                class="px-1.5 py-0 rounded text-[9px] bg-primary/10 text-primary uppercase font-bold border border-primary/20">{{
-                                                    $t('smart_review.entrance') }}</span>
-                                            <span v-else-if="index === localSettings.totalBoxes - 1"
-                                                class="px-1.5 py-0 rounded text-[9px] bg-success/10 text-success uppercase font-bold border border-success/20">{{
-                                                    $t('smart_review.mature') }}</span>
-                                        </h4>
-                                        <p class="text-xs text-gray-500 dark:text-gray-400 italic">{{
-                                            $t('smart_review.level_retention_desc', { number: index + 1 }) }}</p>
-                                    </div>
+                        <div class="flex min-w-0 flex-wrap items-end gap-3.5">
+                            <div class="flex min-w-0 flex-col gap-1.5">
+                                <span class="inline-flex items-center gap-1.5 text-st-2xs font-extrabold uppercase tracking-st-caps text-st-faint">
+                                    <StIcon name="solar:calendar-minimalistic-linear" :size="13" />
+                                    {{ t('smart_review.interval') }}
+                                </span>
+                                <div class="flex min-w-0 items-center gap-[7px]">
+                                    <StInput
+                                        :model-value="localSettings.boxIntervals[level.i]"
+                                        type="number"
+                                        min="1"
+                                        class="w-[70px]"
+                                        @update:model-value="localSettings.boxIntervals[level.i] = clamp($event, 1, 999)"
+                                    />
+                                    <span class="w-[30px] text-st-xs font-bold text-st-muted">{{ t('smart_review.days') }}</span>
                                 </div>
+                            </div>
 
-                                <div class="flex flex-wrap gap-4 items-end">
-                                    <!-- Interval -->
-                                    <div class="flex flex-col gap-1.5">
-                                        <label
-                                            class="text-[10px] font-bold text-gray-400 uppercase tracking-widest flex items-center gap-1">
-                                            <Icon name="IconCalendar" class="!w-3 !h-3 shrink-0" />
-                                            <span class="leading-none">{{ $t('smart_review.interval') }}</span>
-                                        </label>
-                                        <div class="relative group/input">
-                                            <input v-model.number="localSettings.boxIntervals[index]" type="number"
-                                                min="1"
-                                                class="form-input w-24 rounded-lg border-gray-100 bg-gray-50/50 py-1.5 px-3 text-sm font-semibold focus:border-primary focus:bg-white transition-all dark:bg-gray-700 dark:border-gray-600" />
-                                            <span
-                                                class="absolute right-2 top-2 text-[10px] text-gray-400 pointer-events-none">{{
-                                                    $t('smart_review.days') }}</span>
-                                        </div>
-                                    </div>
-
-                                    <!-- Quota -->
-                                    <div class="flex flex-col gap-1.5">
-                                        <label
-                                            class="text-[10px] font-bold text-gray-400 uppercase tracking-widest flex items-center gap-1">
-                                            <Icon name="IconBolt" class="!w-3 !h-3 shrink-0" />
-                                            <span class="leading-none">{{ $t('smart_review.quota') }}</span>
-                                        </label>
-                                        <div class="relative group/input">
-                                            <input v-model.number="localSettings.boxQuotas[index]" type="number" min="0"
-                                                class="form-input w-24 rounded-lg border-gray-100 bg-gray-50/50 py-1.5 px-3 text-sm font-semibold focus:border-primary focus:bg-white transition-all dark:bg-gray-700 dark:border-gray-600" />
-                                            <span
-                                                class="absolute right-2 top-2 text-[10px] text-gray-400 pointer-events-none">{{
-                                                    $t('smart_review.items') }}</span>
-                                        </div>
-                                    </div>
-
-                                    <!-- Add Phrase Action -->
-                                    <Button size="sm" variant="outline"
-                                        class="h-[38px] px-4 rounded-lg border-primary/20 hover:border-primary text-primary transition-all active:scale-95 flex items-center gap-2"
-                                        @click="openPicker(index + 1)">
-                                        <template #icon>
-                                            <Icon name="iconify solar--add-circle-bold" class="!w-4 !h-4" />
-                                        </template>
-                                        {{ $t('smart_review.manage') }}
-                                    </Button>
+                            <div class="flex flex-col gap-1.5">
+                                <span class="inline-flex items-center gap-1.5 text-st-2xs font-extrabold uppercase tracking-st-caps text-st-faint">
+                                    <StIcon name="solar:bolt-linear" :size="13" />
+                                    {{ t('smart_review.quota') }}
+                                </span>
+                                <div class="flex min-w-0 items-center gap-[7px]">
+                                    <StInput
+                                        :model-value="localSettings.boxQuotas[level.i]"
+                                        type="number"
+                                        min="0"
+                                        class="w-[70px]"
+                                        @update:model-value="localSettings.boxQuotas[level.i] = clamp($event, 0, 999)"
+                                    />
+                                    <span class="w-[30px] text-st-xs font-bold text-st-muted">{{ t('smart_review.items') }}</span>
                                 </div>
                             </div>
-                        </Card>
+                        </div>
+
+                        <StButton
+                            :variant="openLevel === level.n ? 'solid' : 'soft'"
+                            color="primary"
+                            size="sm"
+                            icon="solar:tuning-2-bold"
+                            @click="toggleLevel(level.n)"
+                        >
+                            {{ t('smart_review.manage') }}
+                        </StButton>
                     </div>
-                </div>
-            </template>
-        </div>
 
-        <!-- Float Action Footer -->
-        <div
-            class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[95%] max-w-2xl flex items-center justify-between gap-4 rounded-2xl border border-white/20 bg-white/70 p-4 shadow-2xl backdrop-blur-xl dark:border-gray-700/30 dark:bg-gray-900/70">
-            <div class="flex items-center gap-4 pl-2">
-                <div v-if="settingsDirty" class="flex h-2 w-2 rounded-full bg-warning animate-pulse"></div>
-                <div v-else class="flex h-2 w-2 rounded-full bg-success"></div>
-                <span class="text-xs font-bold text-gray-600 dark:text-gray-400">
-                    {{ settingsDirty ? $t('smart_review.unsaved_changes') : $t('smart_review.settings_synced') }}
-                </span>
+                    <!-- One level open at a time; the picker follows it. -->
+                    <LeitnerPhrasePicker
+                        v-if="openLevel === level.n"
+                        :target-box="openLevel"
+                        :total-boxes="localSettings.totalBoxes"
+                        @phrase-added="handlePhraseChange"
+                        @phrase-removed="handlePhraseChange"
+                    />
+                </div>
             </div>
+        </div>
 
-            <div class="flex items-center gap-3">
-                <Modal :title="$t('smart_review.reset_title')">
-                    <template #trigger="{ toggleModal }">
-                        <button
-                            class="px-4 py-2 rounded-xl text-xs font-bold text-danger hover:bg-danger/10 transition-colors disabled:opacity-50"
-                            :disabled="loading || resetting" @click="toggleModal(true)">
-                            {{ $t('smart_review.reset_progress') }}
-                        </button>
-                    </template>
-                    <template #default>
-                        <div class="p-4 flex flex-col items-center text-center gap-4">
-                            <div
-                                class="h-16 w-16 rounded-full bg-danger/10 flex items-center justify-center text-danger">
-                                <Icon name="IconInfoTriangle" class="!w-8 !h-8" />
-                            </div>
-                            <div>
-                                <h4 class="text-xl font-bold text-gray-900 dark:text-white">{{
-                                    $t('smart_review.dangerous_action') }}</h4>
-                                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                                    {{ $t('smart_review.reset_confirm') }}
-                                    <br />
-                                    <strong class="text-danger">{{ $t('smart_review.reset_warning') }}</strong> {{
-                                        $t('smart_review.settings_desc') }}
-                                </p>
-                            </div>
-                        </div>
-                    </template>
-                    <template #footer="{ toggleModal }">
-                        <div class="flex justify-end gap-3 w-full p-4 border-t dark:border-gray-700">
-                            <Button variant="outline" :disabled="resetting" @click="toggleModal(false)">{{
-                                $t('smart_review.keep_everything') }}</Button>
-                            <Button color="danger" :is-loading="resetting" @click="performReset(toggleModal)">{{
-                                $t('smart_review.confirm_wipe') }}</Button>
-                        </div>
-                    </template>
-                </Modal>
-
-                <Modal :title="$t('smart_review.confirm_save')">
-                    <template #trigger="{ toggleModal }">
-                        <Button color="primary" size="md" rounded="xl" :is-loading="loading"
-                            :disabled="!settingsDirty || resetting"
-                            class="shadow-lg shadow-primary/20 px-8 py-2.5 flex items-center gap-2"
-                            @click="toggleModal(true)">
-                            <template #icon>
-                                <Icon name="IconSave" class="!w-4 !h-4" />
-                            </template>
-                            {{ $t('smart_review.save_preferences') }}
-                        </Button>
-                    </template>
-                    <template #default>
-                        <div class="p-4 flex flex-col items-center text-center gap-4">
-                            <div
-                                class="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center text-primary">
-                                <Icon name="IconInfoCircle" class="!w-8 !h-8" />
-                            </div>
-                            <div>
-                                <h4 class="text-xl font-bold text-gray-900 dark:text-white">{{
-                                    $t('smart_review.review_changes') }}</h4>
-                                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                                    {{ $t('smart_review.save_confirm_desc') }}
-                                </p>
-                            </div>
-                        </div>
-                    </template>
-                    <template #footer="{ toggleModal }">
-                        <div class="flex justify-end gap-3 w-full p-4 border-t dark:border-gray-700">
-                            <Button variant="outline" :disabled="loading" @click="toggleModal(false)">{{
-                                $t('smart_review.go_back') }}</Button>
-                            <Button color="primary" :is-loading="loading" @click="performSave(toggleModal)">{{
-                                $t('smart_review.apply_now') }}</Button>
-                        </div>
-                    </template>
-                </Modal>
+        <StModal
+            :open="resetOpen"
+            :title="t('smart_review.reset_title')"
+            :description="t('smart_review.reset_description')"
+            :dismissible="!resetting"
+            @close="resetOpen = false"
+        >
+            <div class="my-1 flex flex-col gap-2.5">
+                <div class="flex items-start gap-2.5 text-st-sm font-semibold text-st-body">
+                    <StIcon name="solar:close-circle-bold" :size="18" class="mt-0.5 flex-none text-st-danger" />
+                    {{ t('smart_review.reset_loses', { count: stats?.totalItems || 0 }) }}
+                </div>
+                <div class="flex items-start gap-2.5 text-st-sm font-semibold text-st-body">
+                    <StIcon name="solar:check-circle-bold" :size="18" class="mt-0.5 flex-none text-st-accent" />
+                    {{ t('smart_review.reset_keeps') }}
+                </div>
             </div>
-        </div>
 
-        <!-- Phrase Picker Modal -->
-        <LeitnerPhrasePicker v-model="showPicker" :target-box="pickingForBox" :total-boxes="localSettings.totalBoxes"
-            @phrase-added="handlePhraseChange" @phrase-removed="handlePhraseChange" />
+            <template #actions>
+                <StButton variant="ghost" color="neutral" :disabled="resetting" @click="resetOpen = false">
+                    {{ t('smart_review.keep_everything') }}
+                </StButton>
+                <StButton color="danger" :disabled="resetting" @click="performReset">
+                    {{ t('smart_review.confirm_wipe') }}
+                </StButton>
+            </template>
+        </StModal>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { Button, Card, Icon } from 'pilotui/elements';
-import { Modal } from 'pilotui/complex';
-import { toastSuccess, toastError } from 'pilotui/toast';
-import LeitnerPhrasePicker from './LeitnerPhrasePicker.vue';
-import Toggle from '~/components/material/Toggle.vue';
-import HourSelector from '~/components/material/HourSelector.vue';
-import { functionProvider } from '@modular-rest/client';
-import { useProfileStore } from '~/stores/profile';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-interface Settings {
-    dailyLimit: number;
-    totalBoxes: number;
-    boxIntervals: number[];
-    boxQuotas: number[];
-    autoEntry: boolean;
-    reviewInterval: number;
-    reviewHour: number;
-}
-
-const props = defineProps<{
-    stats?: {
-        settings: Settings;
-        distribution: Record<string, number>;
-        totalItems: number;
-    };
-}>();
-
-const emit = defineEmits(['saved', 'reset']);
-
-const profileStore = useProfileStore();
-
-const { authUser } = storeToRefs(profileStore);
-const { t } = useI18n();
-
-const loading = ref(false);
-const resetting = ref(false);
-
-// Default state
-const localSettings = ref<Settings>({
-    dailyLimit: 20,
-    totalBoxes: 5,
-    boxIntervals: [1, 2, 4, 8, 16],
-    boxQuotas: [20, 10, 5, 5, 5],
-    autoEntry: true,
-    reviewInterval: 1,
-    reviewHour: 9,
-});
-
-const showPicker = ref(false);
-const pickingForBox = ref<number | null>(null);
-const isDirty = ref(false); // Phrase changes dirty state
-const settingsDirty = ref(false); // Settings configuration dirty state
-
-function openPicker(boxLevel: number) {
-    pickingForBox.value = boxLevel;
-    showPicker.value = true;
-    isDirty.value = false;
-}
-
-function handlePhraseChange() {
-    isDirty.value = true;
-}
-
-watch(showPicker, (newVal, oldVal) => {
-    // If modal was closed and something changed
-    if (oldVal === true && newVal === false && isDirty.value) {
-        emit('saved');
+    import { ref, watch } from 'vue';
+    import { StBadge, StButton, StCard, StEmptyState, StIcon, StInput, StModal, StStatTile, StSwitch } from 'subturtle-ui';
+    import { toastSuccess, toastError } from 'pilotui/toast';
+    import LeitnerPhrasePicker from './LeitnerPhrasePicker.vue';
+    import { functionProvider } from '@modular-rest/client';
+    import { useProfileStore } from '~/stores/profile';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+
+    interface Settings {
+        dailyLimit: number;
+        totalBoxes: number;
+        boxIntervals: number[];
+        boxQuotas: number[];
+        autoEntry: boolean;
+        reviewInterval: number;
+        reviewHour: number;
+    }
+
+    const props = defineProps<{
+        stats?: {
+            settings: Settings;
+            distribution: Record<string, number>;
+            totalItems: number;
+        };
+    }>();
+
+    const emit = defineEmits(['saved', 'reset']);
+
+    const profileStore = useProfileStore();
+
+    const { authUser } = storeToRefs(profileStore);
+    const { t } = useI18n();
+
+    const loading = ref(false);
+    const resetting = ref(false);
+    const saveFailed = ref(false);
+    const resetOpen = ref(false);
+
+    // Default state
+    const localSettings = ref<Settings>({
+        dailyLimit: 20,
+        totalBoxes: 5,
+        boxIntervals: [1, 2, 4, 8, 16],
+        boxQuotas: [20, 10, 5, 5, 5],
+        autoEntry: true,
+        reviewInterval: 1,
+        reviewHour: 9,
+    });
+
+    const openLevel = ref<number | null>(null);
+    const isDirty = ref(false); // Phrase changes dirty state
+    const settingsDirty = ref(false); // Settings configuration dirty state
+
+    /** Which fields moved since the last sync — drives the "Changed" pills and the status count. */
+    const changed = ref<Record<string, boolean>>({});
+
+    function toggleLevel(n: number) {
+        openLevel.value = openLevel.value === n ? null : n;
         isDirty.value = false;
     }
-});
-
-watch(() => localSettings.value.totalBoxes, () => {
-    adjustArrays();
-});
-
-watch(localSettings, () => {
-    settingsDirty.value = true;
-}, { deep: true });
-
-// Sync props to local state
-watch(
-    () => props.stats,
-    (newVal) => {
-        if (newVal && newVal.settings) {
-            // deep copy to avoid mutations prop warnings if object is shared
-            localSettings.value = JSON.parse(JSON.stringify(newVal.settings));
-            // Ensure arrays are filled if data is partial
+
+    function handlePhraseChange() {
+        isDirty.value = true;
+    }
+
+    // Closing the panel after a phrase moved refetches the stats, as closing the modal used to.
+    watch(openLevel, (now, before) => {
+        if (before !== null && now !== before && isDirty.value) {
+            emit('saved');
+            isDirty.value = false;
+        }
+    });
+
+    watch(
+        () => localSettings.value.totalBoxes,
+        () => {
             adjustArrays();
-            // Reset dirty state after sync
-            setTimeout(() => {
-                // Ensure defaults if missing in restored settings
-                if (!localSettings.value.reviewInterval) localSettings.value.reviewInterval = 1;
-                if (localSettings.value.reviewHour === undefined) localSettings.value.reviewHour = 9;
-                settingsDirty.value = false;
-            }, 0);
+            // A shorter chain can leave an open panel pointing at a level that no longer exists.
+            if (openLevel.value && openLevel.value > localSettings.value.totalBoxes) openLevel.value = null;
         }
-    },
-    { immediate: true, deep: true }
-);
-
-function getItemCount(index: number): number {
-    return props.stats?.distribution[String(index + 1)] || 0;
-}
-
-function adjustArrays() {
-    const targetLen = localSettings.value.totalBoxes;
-
-    // Ensure arrays exist
-    if (!localSettings.value.boxIntervals) localSettings.value.boxIntervals = [];
-    if (!localSettings.value.boxQuotas) localSettings.value.boxQuotas = [];
-
-    const currentIntervals = localSettings.value.boxIntervals;
-    const currentQuotas = localSettings.value.boxQuotas;
-
-    // Resize Intervals
-    if (currentIntervals.length < targetLen) {
-        for (let i = currentIntervals.length; i < targetLen; i++) {
-            // Default logic: double previous or 1
-            const prev = i > 0 ? currentIntervals[i - 1] : 1;
-            currentIntervals.push(prev * 2);
+    );
+
+    watch(
+        localSettings,
+        () => {
+            settingsDirty.value = true;
+        },
+        { deep: true }
+    );
+
+    // Sync props to local state
+    watch(
+        () => props.stats,
+        (newVal) => {
+            if (newVal && newVal.settings) {
+                // deep copy to avoid mutations prop warnings if object is shared
+                localSettings.value = JSON.parse(JSON.stringify(newVal.settings));
+                // Ensure arrays are filled if data is partial
+                adjustArrays();
+                // Reset dirty state after sync
+                setTimeout(() => {
+                    // Ensure defaults if missing in restored settings
+                    if (!localSettings.value.reviewInterval) localSettings.value.reviewInterval = 1;
+                    if (localSettings.value.reviewHour === undefined) localSettings.value.reviewHour = 9;
+                    settingsDirty.value = false;
+                    changed.value = {};
+                }, 0);
+            }
+        },
+        { immediate: true, deep: true }
+    );
+
+    /** Field-level diff against the fetched settings, for the "Changed" pills. */
+    watch(
+        localSettings,
+        (now) => {
+            const saved = props.stats?.settings;
+            if (!saved) return;
+            // Only the overlapping range: growing or shrinking totalBoxes resizes both arrays via
+            // adjustArrays, and counting that as its own edit reported "3 unsaved changes" for a
+            // single change of the level count. A real per-level edit still lands inside the range.
+            const overlaps = (a: number[] = [], b: number[] = []) => {
+                const n = Math.min(a.length, b.length);
+                return a.slice(0, n).join() !== b.slice(0, n).join();
+            };
+
+            changed.value = {
+                totalBoxes: now.totalBoxes !== saved.totalBoxes,
+                dailyLimit: now.dailyLimit !== saved.dailyLimit,
+                autoEntry: now.autoEntry !== saved.autoEntry,
+                reviewInterval: now.reviewInterval !== saved.reviewInterval,
+                reviewHour: now.reviewHour !== saved.reviewHour,
+                boxIntervals: overlaps(now.boxIntervals, saved.boxIntervals),
+                boxQuotas: overlaps(now.boxQuotas, saved.boxQuotas),
+            };
+        },
+        { deep: true }
+    );
+
+    const changedCount = computed(() => Object.values(changed.value).filter(Boolean).length);
+
+    const statusLabel = computed(() => {
+        if (saveFailed.value) return t('smart_review.not_saved');
+        if (!settingsDirty.value) return t('smart_review.settings_synced');
+        return changedCount.value ? t('smart_review.n_unsaved', changedCount.value) : t('smart_review.unsaved_changes');
+    });
+
+    /** The profile's timezone, falling back to the browser's rather than a hardcoded UTC. */
+    const timeZone = computed(() => {
+        if (profileStore.userDetail?.timeZone) return profileStore.userDetail.timeZone;
+        try {
+            return Intl.DateTimeFormat().resolvedOptions().timeZone;
+        } catch {
+            return 'UTC';
         }
-    } else if (currentIntervals.length > targetLen) {
-        localSettings.value.boxIntervals = currentIntervals.slice(0, targetLen);
+    });
+
+    const reviewCadenceLabel = computed(() =>
+        localSettings.value.reviewInterval === 1
+            ? t('smart_review.daily_in_zone', { zone: timeZone.value })
+            : t('smart_review.every_days_in_zone', { days: localSettings.value.reviewInterval, zone: timeZone.value })
+    );
+
+    const chainNote = computed(() =>
+        props.stats?.totalItems ? t('smart_review.chain_note', { count: props.stats.totalItems }) : t('smart_review.chain_note_empty')
+    );
+
+    const resetNote = computed(() =>
+        props.stats?.totalItems ? t('smart_review.reset_note', { count: props.stats.totalItems }) : t('smart_review.reset_note_empty')
+    );
+
+    /**
+     * One entry per level. Cloze really does begin at level 3 (`FlashCard.vue` switches on
+     * `leitnerLevel >= 3`), so that tag is a fact about the app, not decoration.
+     */
+    const chain = computed(() => {
+        const total = localSettings.value.totalBoxes;
+        const counts = Array.from({ length: total }, (_, i) => getItemCount(i));
+        const peak = Math.max(1, ...counts);
+
+        return Array.from({ length: total }, (_, i) => {
+            const n = i + 1;
+            const last = n === total;
+            const count = counts[i];
+
+            let tag = '';
+            let tagColor: 'info' | 'primary' | 'accent' = 'primary';
+            if (n === 1) {
+                tag = t('smart_review.entrance');
+                tagColor = 'info';
+            } else if (last) {
+                tag = t('smart_review.mature');
+                tagColor = 'accent';
+            } else if (n === 3) {
+                tag = t('smart_review.cloze');
+                tagColor = 'primary';
+            }
+
+            const note =
+                n === 1
+                    ? t('smart_review.note_entrance')
+                    : n === 3
+                    ? t('smart_review.note_cloze')
+                    : last
+                    ? t('smart_review.note_mature')
+                    : t('smart_review.note_middle');
+
+            return {
+                i,
+                n,
+                count,
+                tag,
+                tagColor,
+                note,
+                barWidth: `${((count / peak) * 100).toFixed(1)}%`,
+                barClass: n === 1 ? 'bg-st-primary' : last ? 'bg-st-accent' : 'bg-st-ink-300',
+                chipClass:
+                    n === 1
+                        ? 'border-st-primary bg-st-primary-soft text-st-primary'
+                        : last
+                        ? 'border-st-jade-600 bg-st-accent-soft text-st-jade-600'
+                        : 'border-st-ink-300 bg-st-card text-st-muted',
+            };
+        });
+    });
+
+    function getItemCount(index: number): number {
+        return props.stats?.distribution[String(index + 1)] || 0;
+    }
+
+    /** Number inputs emit strings; keep the model numeric and inside the field's range. */
+    function clamp(value: string | number, lo: number, hi: number): number {
+        const n = Number(value);
+        return Math.max(lo, Math.min(hi, isNaN(n) ? lo : n));
     }
 
-    // Resize Quotas
-    if (currentQuotas.length < targetLen) {
-        for (let i = currentQuotas.length; i < targetLen; i++) {
-            currentQuotas.push(5); // Default quota
+    function adjustArrays() {
+        const targetLen = localSettings.value.totalBoxes;
+
+        // Ensure arrays exist
+        if (!localSettings.value.boxIntervals) localSettings.value.boxIntervals = [];
+        if (!localSettings.value.boxQuotas) localSettings.value.boxQuotas = [];
+
+        const currentIntervals = localSettings.value.boxIntervals;
+        const currentQuotas = localSettings.value.boxQuotas;
+
+        // Resize Intervals
+        if (currentIntervals.length < targetLen) {
+            for (let i = currentIntervals.length; i < targetLen; i++) {
+                // Default logic: double previous or 1
+                const prev = i > 0 ? currentIntervals[i - 1] : 1;
+                currentIntervals.push(prev * 2);
+            }
+        } else if (currentIntervals.length > targetLen) {
+            localSettings.value.boxIntervals = currentIntervals.slice(0, targetLen);
+        }
+
+        // Resize Quotas
+        if (currentQuotas.length < targetLen) {
+            for (let i = currentQuotas.length; i < targetLen; i++) {
+                currentQuotas.push(5); // Default quota
+            }
+        } else if (currentQuotas.length > targetLen) {
+            localSettings.value.boxQuotas = currentQuotas.slice(0, targetLen);
         }
-    } else if (currentQuotas.length > targetLen) {
-        localSettings.value.boxQuotas = currentQuotas.slice(0, targetLen);
     }
-}
-
-async function performSave(toggleModal: (state: boolean) => void) {
-    loading.value = true;
-    try {
-        await functionProvider.run({
-            name: 'update-settings',
-            args: {
-                userId: authUser.value?.id,
-                settings: localSettings.value,
-            },
+
+    /** Discard restores what was fetched, NOT the component's hardcoded defaults. */
+    function discard() {
+        const saved = props.stats?.settings;
+        if (!saved) return;
+        localSettings.value = JSON.parse(JSON.stringify(saved));
+        adjustArrays();
+        saveFailed.value = false;
+        nextTick(() => {
+            settingsDirty.value = false;
+            changed.value = {};
         });
-        toggleModal(false);
-        settingsDirty.value = false;
-        emit('saved');
-    } catch (e) {
-        console.error(e);
-        toastError(t('smart_review.failed_save'));
-    } finally {
-        loading.value = false;
     }
-}
-
-async function performReset(toggleModal: (state: boolean) => void) {
-    resetting.value = true;
-    try {
-        await functionProvider.run({
-            name: 'reset-system',
-            args: {
-                userId: authUser.value?.id,
-            },
-        });
-        toggleModal(false);
-        emit('reset');
-        toastSuccess(t('smart_review.system_reset_success'));
-    } catch (e) {
-        console.error(e);
-        toastError(t('smart_review.failed_reset'));
-    } finally {
-        resetting.value = false;
+
+    async function performSave() {
+        loading.value = true;
+        try {
+            await functionProvider.run({
+                name: 'update-settings',
+                args: {
+                    userId: authUser.value?.id,
+                    settings: localSettings.value,
+                },
+            });
+            saveFailed.value = false;
+            settingsDirty.value = false;
+            changed.value = {};
+            emit('saved');
+        } catch (e) {
+            console.error(e);
+            saveFailed.value = true;
+            toastError(t('smart_review.failed_save'));
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    async function performReset() {
+        resetting.value = true;
+        try {
+            await functionProvider.run({
+                name: 'reset-system',
+                args: {
+                    userId: authUser.value?.id,
+                },
+            });
+            resetOpen.value = false;
+            openLevel.value = null;
+            emit('reset');
+            toastSuccess(t('smart_review.system_reset_success'));
+        } catch (e) {
+            console.error(e);
+            toastError(t('smart_review.failed_reset'));
+        } finally {
+            resetting.value = false;
+        }
     }
-}
 </script>
diff --git a/frontend/components/PoolCard.vue b/frontend/components/PoolCard.vue
index 94f6b327..96d24749 100644
--- a/frontend/components/PoolCard.vue
+++ b/frontend/components/PoolCard.vue
@@ -1,99 +1,56 @@
 <template>
-	<!-- Count-adaptive Pool card. Renders nothing when the pool is empty. -->
-	<div v-if="poolCount > 0" class="group h-full">
-		<Card
-			class="relative h-full flex flex-col overflow-hidden rounded-[2.5rem] bg-white dark:bg-gray-800 shadow-[0_4px_20px_rgba(0,0,0,0.03)] hover:shadow-[0_40px_80px_rgba(var(--primary-rgb),0.15)] transition-all duration-700 hover:-translate-y-3 cursor-default p-0 border-0">
-
-			<!-- Accent header -->
-			<div class="h-32 w-full relative overflow-hidden shrink-0 rounded-t-[2rem]">
-				<div
-					class="absolute inset-0 bg-gradient-to-br from-secondary via-primary to-primary-dark opacity-100 group-hover:scale-110 transition-transform duration-1000">
-				</div>
-				<div
-					class="absolute inset-0 opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]">
-				</div>
-				<div class="absolute -left-6 -bottom-10 opacity-10 scale-150 group-hover:rotate-12 transition-transform duration-1000">
-					<Icon name="iconify solar--inbox-archive-bold-duotone" class="w-32 h-32 text-white" />
-				</div>
-			</div>
-
-			<!-- Content -->
-			<div
-				class="p-10 pb-12 flex flex-col flex-grow relative -mt-8 bg-white dark:bg-gray-800 rounded-t-[3rem] z-10 border-t border-white/10">
-				<div class="absolute -top-12 left-10 h-24 w-24">
-					<div
-						class="h-24 w-24 bg-white dark:bg-gray-900 rounded-[2rem] shadow-2xl flex items-center justify-center border border-gray-50 dark:border-gray-800 ring-8 ring-white/10 dark:ring-gray-900/10 group-hover:scale-105 transition-transform duration-500">
-						<Icon name="iconify solar--inbox-in-bold-duotone" class="text-4xl text-secondary" />
-					</div>
-				</div>
-
-				<div class="mt-10 mb-8">
-					<div class="flex items-center gap-2 mb-3">
-						<span class="text-[10px] font-bold text-secondary uppercase tracking-widest">{{ $t('pool.module_label') }}</span>
-						<div class="h-px flex-grow bg-gray-100 dark:bg-gray-700/50"></div>
-					</div>
-					<h3 class="text-2xl font-black text-gray-900 dark:text-white mb-3 tracking-tight group-hover:text-secondary transition-colors">
-						{{ $t('pool.title') }}
-					</h3>
-					<p class="text-base font-medium text-gray-500 dark:text-gray-400 leading-relaxed flex items-center gap-2">
-						<Icon name="iconify solar--layers-minimalistic-bold-duotone" class="w-5 h-5 opacity-60 shrink-0" />
-						<span>{{ cardCopy }}</span>
-					</p>
-				</div>
-
-				<!-- Actions -->
-				<div class="mt-auto pt-8 flex flex-col gap-3">
-					<Button @click="start()" block size="lg"
-						class="h-16 rounded-2xl font-black bg-gray-900 dark:bg-white text-white dark:text-gray-900 hover:bg-secondary dark:hover:bg-secondary hover:text-white dark:hover:text-white transition-all duration-300 active:scale-95 shadow-xl">
-						<div class="flex items-center justify-center gap-3">
-							<Icon name="iconify solar--play-circle-bold" class="w-6 h-6" />
-							{{ $t('pool.start') }}
-						</div>
-					</Button>
-					<Button v-if="poolCount > chunkSize" @click="doNext()" block size="lg" :outline="true" color="secondary"
-						class="h-14 rounded-2xl font-bold">
-						{{ $t('pool.do_next', { chunk: chunkSize }) }}
-					</Button>
-				</div>
-			</div>
-		</Card>
-	</div>
+    <!-- Count-adaptive Pool card. Renders nothing when the pool is empty. -->
+    <StCard v-if="poolCount > 0" class="flex flex-col">
+        <span class="mb-5 inline-flex h-[54px] w-[54px] items-center justify-center rounded-st-md bg-st-accent-soft text-st-jade-600">
+            <StIcon name="solar:inbox-in-bold-duotone" :size="29" />
+        </span>
+
+        <h3 class="mb-1.5 text-st-md font-extrabold text-st-strong">{{ t('pool.title') }}</h3>
+        <p class="mb-[18px] text-st-sm font-semibold text-st-muted [text-wrap:pretty]">{{ cardCopy }}</p>
+
+        <div class="mt-auto flex flex-col gap-[10px]">
+            <StButton color="primary" icon="solar:play-bold" block @click="start()">{{ t('pool.start') }}</StButton>
+            <StButton v-if="poolCount > chunkSize" variant="outline" color="primary" block @click="doNext()">
+                {{ t('pool.do_next', { chunk: chunkSize }) }}
+            </StButton>
+        </div>
+    </StCard>
 </template>
 
 <script setup lang="ts">
-import { usePoolStore } from '~/stores/pool';
-import { useProfileStore } from '~/stores/profile';
-import { storeToRefs } from 'pinia';
-import { Card, Button, Icon } from 'pilotui/elements';
-
-const { t } = useI18n();
-const router = useRouter();
-const poolStore = usePoolStore();
-const profileStore = useProfileStore();
-const { poolCount } = storeToRefs(poolStore);
-const { userDetail } = storeToRefs(profileStore);
-
-// Chunk size for "Do the next N" — user-configurable on the profile (default 10).
-const chunkSize = computed(() => (userDetail.value as any)?.poolChunkSize || 10);
-
-// ~15s per word, matching the spec's examples (8 words ≈ 2 min, 23 words ≈ 6 min).
-const estMinutes = computed(() => Math.max(1, Math.round(poolCount.value * 0.25)));
-
-// Copy adapts to how big the backlog is (spec's four ranges; 0 renders no card).
-const cardCopy = computed(() => {
-	const count = poolCount.value;
-	if (count <= 15) return t('pool.card_small', { count, mins: estMinutes.value });
-	if (count <= 30) return t('pool.card_medium', { count, mins: estMinutes.value, chunk: chunkSize.value });
-	return t('pool.card_large', { count, chunk: chunkSize.value });
-});
-
-function start() {
-	poolStore.startSession();
-	router.push('/practice/pool');
-}
-
-function doNext() {
-	poolStore.startSession(chunkSize.value);
-	router.push('/practice/pool');
-}
+    import { usePoolStore } from '~/stores/pool';
+    import { useProfileStore } from '~/stores/profile';
+    import { storeToRefs } from 'pinia';
+    import { StButton, StCard, StIcon } from 'subturtle-ui';
+
+    const { t } = useI18n();
+    const router = useRouter();
+    const poolStore = usePoolStore();
+    const profileStore = useProfileStore();
+    const { poolCount } = storeToRefs(poolStore);
+    const { userDetail } = storeToRefs(profileStore);
+
+    // Chunk size for "Do the next N" — user-configurable on the profile (default 10).
+    const chunkSize = computed(() => (userDetail.value as any)?.poolChunkSize || 10);
+
+    // ~15s per word, matching the spec's examples (8 words ≈ 2 min, 23 words ≈ 6 min).
+    const estMinutes = computed(() => Math.max(1, Math.round(poolCount.value * 0.25)));
+
+    // Copy adapts to how big the backlog is (spec's four ranges; 0 renders no card).
+    const cardCopy = computed(() => {
+        const count = poolCount.value;
+        if (count <= 15) return t('pool.card_small', { count, mins: estMinutes.value });
+        if (count <= 30) return t('pool.card_medium', { count, mins: estMinutes.value, chunk: chunkSize.value });
+        return t('pool.card_large', { count, chunk: chunkSize.value });
+    });
+
+    function start() {
+        poolStore.startSession();
+        router.push('/practice/pool');
+    }
+
+    function doNext() {
+        poolStore.startSession(chunkSize.value);
+        router.push('/practice/pool');
+    }
 </script>
diff --git a/frontend/components/bundle/AddNew.vue b/frontend/components/bundle/AddNew.vue
index ff7e927c..2636f6cb 100644
--- a/frontend/components/bundle/AddNew.vue
+++ b/frontend/components/bundle/AddNew.vue
@@ -1,112 +1,142 @@
 <template>
-    <Modal :title="t('bundle.add_new.title')">
-        <template #trigger="{ toggleModal }">
-            <Button color="primary" rounded="lg" class="w-full" @click="openForm(toggleModal)" iconName="IconPlus"
-                :label="t('bundle.add_new.action_add_new')" />
+    <StButton :variant="variant" color="primary" icon="solar:add-circle-bold" @click="openForm">
+        {{ t('bundle.add_new.action_add_new') }}
+    </StButton>
+
+    <StModal
+        :open="isOpen"
+        size="sm"
+        :title="t('bundle.add_new.title')"
+        :description="t('bundle.add_new.description')"
+        :dismissible="!isPending"
+        @close="closeForm"
+    >
+        <form class="flex flex-col gap-4" @submit.prevent="createBundle">
+            <StInput
+                v-model="title"
+                :label="t('bundle.add_new.title_label')"
+                :placeholder="t('bundle.add_new.title_placeholder')"
+                :error="errors.title || submitError"
+                autofocus
+            />
+            <StTextarea
+                v-model="description"
+                :label="t('bundle.add_new.desc_label')"
+                :optional-label="t('bundle.add_new.desc_optional')"
+                :placeholder="t('bundle.add_new.desc_placeholder')"
+                :error="errors.description"
+            />
+            <!-- Enter submits; the visible button lives in the modal's actions slot, outside this form. -->
+            <button type="submit" class="hidden" />
+        </form>
+
+        <template #actions>
+            <StButton variant="ghost" color="neutral" :disabled="isPending" @click="closeForm">
+                {{ t('bundle.add_new.action_cancel') }}
+            </StButton>
+            <StButton color="primary" :disabled="!isValidForm || isPending" @click="createBundle">
+                {{ t('bundle.add_new.action_create') }}
+            </StButton>
         </template>
-
-        <template #default>
-            <div class="flex flex-col space-y-2 p-4">
-                <Input :placeholder="t('bundle.add_new.title_placeholder')" v-model="title" :error="!!error"
-                    :error-message="error || ''" />
-                <TextArea :placeholder="t('bundle.add_new.desc_placeholder')" v-model="description" :error="!!error"
-                    :error-message="error || ''" />
-            </div>
-        </template>
-
-        <template #footer="{ toggleModal }">
-            <!-- Footer -->
-            <div class="flex justify-end space-x-2">
-                <Button @click="closeForm(toggleModal)" :label="t('bundle.add_new.action_cancel')" />
-                <Button color="primary" @click="createBundle(toggleModal)" :loading="isPending" :disabled="!isValidForm"
-                    :label="t('bundle.add_new.action_create')" />
-            </div>
-        </template>
-    </Modal>
+    </StModal>
 </template>
 
 <script setup lang="ts">
-import { Button, Input, TextArea, Modal } from 'pilotui';
-import { dataProvider } from '@modular-rest/client';
-import { useForm } from 'vee-validate';
-import * as yup from 'yup';
-import { COLLECTIONS, DATABASE } from '~/types/database.type';
-import { analytic } from '~/plugins/mixpanel';
-const { t } = useI18n();
-
-const router = useRouter();
-
-const error = ref<string | null>(null);
-const isPending = ref(false);
-
-const { errors, values, defineField, resetForm } = useForm({
-    validationSchema: yup.object({
-        title: yup.string().required(t('bundle.add_new.title_required')),
-        description: yup.string().max(130, t('bundle.add_new.desc_max')),
-    }),
-});
-
-const [title] = defineField('title', values.title);
-const [description] = defineField('description', values.description);
-
-const isValidForm = computed(() => {
-    return title.value?.length && Object.keys(errors.value).length === 0;
-});
-
-function closeForm(toggleModal: (state: boolean) => void) {
-    toggleModal(false);
-}
-
-function openForm(toggleModal: (state: boolean) => void) {
-    resetForm();
-    toggleModal(true);
-}
-
-function createBundle(toggleModal: (state: boolean) => void) {
-    if (!isValidForm) return;
-
-    isPending.value = true;
-
-    dataProvider
-        .insertOne({
-            database: DATABASE.USER_CONTENT,
-            collection: COLLECTIONS.PHRASE_BUNDLE,
-            doc: {
-                title: title.value,
-                desc: description.value,
-                refId: authUser.value?.id,
-            },
-        })
-        .then(({ _id }) => {
-            analytic.track('phrase-bundle_created');
-
-            isPending.value = false;
-            toggleModal(false);
-            router.push({ path: '/bundles/' + _id });
-        })
-        .catch(({ error }) => {
-            isPending.value = false;
-
-            if (error.includes('duplicate key error')) {
-                return toastError({
-                    title: t('bundle.add_new.duplicate_title'),
-                    message: t('bundle.add_new.duplicate_title_desc'),
-                });
-            } else {
-                toastError({
-                    title: t('bundle.add_new.error'),
-                    message: error,
-                });
-            }
-        });
-}
+    import { StButton, StInput, StModal, StTextarea } from 'subturtle-ui';
+    import { dataProvider } from '@modular-rest/client';
+    import { useForm } from 'vee-validate';
+    import * as yup from 'yup';
+    import { COLLECTIONS, DATABASE } from '~/types/database.type';
+    import { analytic } from '~/plugins/mixpanel';
+    const { t } = useI18n();
+
+    const router = useRouter();
+
+    withDefaults(defineProps<{ variant?: 'solid' | 'outline' }>(), { variant: 'solid' });
+
+    const isOpen = ref(false);
+    const isPending = ref(false);
+
+    // Server-side rejection shown on the Name field. The toast below is the briefed feedback, but
+    // pilotui's toaster resolves a `TairoToaster` component this app never registers, so it renders
+    // nothing — without this the duplicate-title case would fail silently.
+    const submitError = ref('');
+
+    const { errors, values, defineField, resetForm } = useForm({
+        validationSchema: yup.object({
+            title: yup.string().required(t('bundle.add_new.title_required')),
+            description: yup.string().max(130, t('bundle.add_new.desc_max')),
+        }),
+    });
+
+    const [title] = defineField('title', values.title);
+    const [description] = defineField('description', values.description);
+
+    const isValidForm = computed(() => {
+        return title.value?.length && Object.keys(errors.value).length === 0;
+    });
+
+    function closeForm() {
+        if (isPending.value) return;
+        isOpen.value = false;
+    }
+
+    function openForm() {
+        resetForm();
+        submitError.value = '';
+        isOpen.value = true;
+    }
+
+    function createBundle() {
+        if (!isValidForm.value || isPending.value) return;
+
+        isPending.value = true;
+        submitError.value = '';
+
+        dataProvider
+            .insertOne({
+                database: DATABASE.USER_CONTENT,
+                collection: COLLECTIONS.PHRASE_BUNDLE,
+                doc: {
+                    title: title.value,
+                    desc: description.value,
+                    refId: authUser.value?.id,
+                },
+            })
+            .then(({ _id }) => {
+                // Analytics is best-effort: with no Mixpanel token (CI, e2e, local dev) track()
+                // throws, and an unguarded call here lands in the .catch below — so a bundle that
+                // was created fine reported an error and never navigated. Same guard as the
+                // subscription page's pricing-page_viewed.
+                try {
+                    analytic.track('phrase-bundle_created');
+                } catch (e) {
+                    console.error('Failed to track phrase-bundle_created:', e);
+                }
+
+                isPending.value = false;
+                isOpen.value = false;
+                router.push({ path: '/bundles/' + _id });
+            })
+            .catch((err) => {
+                isPending.value = false;
+
+                // Rejections from the data provider carry `{ error }`; anything else (a thrown
+                // TypeError, a network failure) does not, and blind destructuring hid the real one.
+                const error: string = typeof err?.error === 'string' ? err.error : String(err?.message || err);
+
+                if (error.includes('duplicate key error')) {
+                    submitError.value = t('bundle.add_new.duplicate_title_desc');
+                    return toastError({
+                        title: t('bundle.add_new.duplicate_title'),
+                        message: t('bundle.add_new.duplicate_title_desc'),
+                    });
+                } else {
+                    toastError({
+                        title: t('bundle.add_new.error'),
+                        message: error,
+                    });
+                }
+            });
+    }
 </script>
-
-<style>
-[role='dialog'] {
-    /* 
-    decrease the z-index of the modal to avoid overlapping with toast
-   */
-    z-index: 199 !important;
-}
-</style>
diff --git a/frontend/components/material/PracticeToolScaffold.vue b/frontend/components/material/PracticeToolScaffold.vue
index e0a17179..3c8dcfc7 100644
--- a/frontend/components/material/PracticeToolScaffold.vue
+++ b/frontend/components/material/PracticeToolScaffold.vue
@@ -19,7 +19,11 @@
                     <h1 class="text-sm text-gray-800">{{ title }}</h1>
                 </div>
 
-                <div>
+                <!-- This session bar is the only chrome these screens have, so the theme control
+                     is placed by hand: immediately left of End session, 10px gap. The scaffold is
+                     shared by every practice tool, so wiring it here covers all of them. -->
+                <div class="flex items-center gap-[10px]">
+                    <PartialThemeSwitcher />
                     <Button class="scale-50 md:scale-100" rounded="md" size="md" iconName="IconX" @click="endSession" />
                 </div>
             </Card>
diff --git a/frontend/components/partial/ProfileButton.vue b/frontend/components/partial/ProfileButton.vue
deleted file mode 100644
index c3b3ce6d..00000000
--- a/frontend/components/partial/ProfileButton.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-    <div>
-        <Dropdown :triggerText="''" :offsetDistance="7">
-            <template #trigger>
-                <IconButton size="lg" :imgUrl="profilePicture" />
-            </template>
-
-            <template #body="{ close }">
-                <ul class="w-[230px] !py-0 font-semibold text-dark dark:text-white-dark dark:text-white-light/90">
-                    <li>
-                        <div class="flex items-center px-4 py-4">
-                            <div class="flex-none">
-                                <img class="h-10 w-10 rounded-md object-cover" :src="profilePicture" @error="onAvatarLoadError" />
-                            </div>
-                            <div class="truncate ltr:pl-4 rtl:pr-4">
-                                <h4 class="text-base">
-                                    {{ profileStore.userDetail?.name }}
-                                </h4>
-                                <span class="text-black/60 dark:text-dark-light/60 dark:hover:text-white">
-                                    {{ profileStore.email }}
-                                </span>
-                            </div>
-                        </div>
-                    </li>
-                    <li class="cursor-pointer">
-                        <a class="dark:hover:text-white" @click="
-                            close();
-                        goToProfileSettings();
-                        ">
-                            <Icon name="IconUser" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
-                            {{ t('profile.profile') }}
-                        </a>
-                    </li>
-                    <li class="cursor-pointer">
-                        <a class="dark:hover:text-white" @click="
-                            close();
-                        goToLeitnerSettings();
-                        ">
-                            <Icon name="IconSettings" class="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
-                            {{ t('preferences.nav') }}
-                        </a>
-                    </li>
-                    <li class="cursor-pointer border-t border-white-light dark:border-white-light/10">
-                        <a class="flex items-center !py-3 text-danger ltr:pl-5 rtl:pr-5" @click="
-                            close();
-                        showSignOutModal = true;
-                        ">
-                            <Icon name="icon-logout" class="h-4.5 w-4.5 shrink-0 rotate-90 ltr:mr-2 rtl:ml-2" />
-                            {{ t('sign-out') }}
-                        </a>
-                    </li>
-                </ul>
-            </template>
-        </Dropdown>
-
-        <!-- Sign Out Confirmation Modal -->
-        <!-- Rendered outside the Dropdown so its <ul @click="close()"> doesn't
-             unmount the modal before it has a chance to display. -->
-        <Modal v-model="showSignOutModal" :title="t('confirm-sign-out')">
-            <template #trigger>
-                <div class="hidden" />
-            </template>
-
-            <template #default>
-                <div class="flex flex-col space-y-2 p-4">
-                    <p>{{ t('confirm-sign-out-message') }}</p>
-                </div>
-            </template>
-
-            <template #footer="{ toggleModal }">
-                <div class="flex justify-end space-x-2">
-                    <Button @click="toggleModal(false)">{{ t('cancel') }}</Button>
-                    <Button color="danger" @click="confirmSignOut">{{ t('sign-out') }}</Button>
-                </div>
-            </template>
-        </Modal>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { useProfileStore } from '@/stores/profile';
-import { Dropdown, IconButton, Icon, Button } from 'pilotui/elements';
-import { Modal } from 'pilotui/complex';
-
-const router = useRouter();
-const { t } = useI18n();
-
-const profileStore = useProfileStore();
-
-const showSignOutModal = ref(false);
-
-const profilePicture = computed(() => {
-    return profileStore.profilePicture || '/assets/images/user.png';
-});
-
-function onAvatarLoadError(event: Event) {
-    const img = event.target as HTMLImageElement;
-    if (img && img.src !== window.location.origin + '/assets/images/user.png') {
-        img.src = '/assets/images/user.png';
-    }
-}
-
-function confirmSignOut() {
-    showSignOutModal.value = false;
-    profileStore.logout();
-    // Hard reload after logout: localStorage is now cleared, so the auth
-    // middleware on the next boot will detect no session and redirect to
-    // /auth/login. This sidesteps vue-router race conditions (queued
-    // navigations from the axios 401/412 interceptor or stale post-logout
-    // API responses) that were silently aborting in-page redirects.
-    window.location.reload();
-}
-
-function goToProfileSettings() {
-    router.push('/settings/profile');
-}
-
-function goToLeitnerSettings() {
-    router.push('/settings/preferences');
-}
-</script>
diff --git a/frontend/components/partial/ProfileMenu.vue b/frontend/components/partial/ProfileMenu.vue
new file mode 100644
index 00000000..4cb2a995
--- /dev/null
+++ b/frontend/components/partial/ProfileMenu.vue
@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <StProfileMenu
+            v-model:open="open"
+            :name="profileStore.userDetail?.name ?? ''"
+            :email="profileStore.email"
+            :avatar-src="profileStore.profilePicture || undefined"
+            :plan="planLabel"
+            :items="items"
+            :width="296"
+            :labels="labels"
+        >
+            <template #trigger>
+                <StAvatar :name="profileStore.userDetail?.name ?? ''" :src="profileStore.profilePicture || undefined" size="md" online />
+            </template>
+        </StProfileMenu>
+
+        <!--
+            Sign-out confirmation, carried over from the pilotui ProfileButton this replaces.
+            Rendered as a sibling of the menu, not inside it: the menu closes on the row's click,
+            which would unmount a modal nested in its panel before it could show.
+        -->
+        <Modal v-model="showSignOutModal" :title="t('confirm-sign-out')">
+            <template #trigger>
+                <div class="hidden" />
+            </template>
+
+            <template #default>
+                <div class="flex flex-col space-y-2 p-4">
+                    <p>{{ t('confirm-sign-out-message') }}</p>
+                </div>
+            </template>
+
+            <template #footer="{ toggleModal }">
+                <div class="flex justify-end space-x-2">
+                    <Button @click="toggleModal(false)">{{ t('cancel') }}</Button>
+                    <Button color="danger" @click="confirmSignOut">{{ t('sign-out') }}</Button>
+                </div>
+            </template>
+        </Modal>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { StAvatar, StProfileMenu, type StProfileMenuItem } from 'subturtle-ui';
+    import { Button } from 'pilotui/elements';
+    import { Modal } from 'pilotui/complex';
+    import { useProfileStore } from '~/stores/profile';
+    import { useVoiceBalance } from '~/composables/useVoiceBalance';
+
+    const { t } = useI18n();
+    const router = useRouter();
+    const route = useRoute();
+    const profileStore = useProfileStore();
+    const { isFreemium, baseRemaining } = useVoiceBalance();
+
+    const open = ref(false);
+    const showSignOutModal = ref(false);
+
+    // Router knowledge stays in the app — subturtle-ui also ships to the extension, which has
+    // no router at all.
+    watch(
+        () => route.fullPath,
+        () => (open.value = false)
+    );
+
+    // The appearance strings moved out with the switch — it now sits in the topbar
+    // (PartialThemeSwitch) rather than in an Appearance row here.
+    const labels = computed(() => ({ menu: t('account.menu') }));
+
+    const planLabel = computed(() => {
+        if (profileStore.isSubscriptionFetching) return undefined;
+        return profileStore.isFreemium ? 'Free' : profileStore.activeSubscription?.label || undefined;
+    });
+
+    /**
+     * The Subscription row's trailing meta: voice minutes for a paid plan, save count on Free.
+     * Returns undefined — so the row simply renders without a meta — whenever the subscription
+     * has not resolved or the field is missing. A placeholder here would read as a real number.
+     */
+    const subscriptionMeta = computed(() => {
+        if (profileStore.isSubscriptionFetching) return undefined;
+
+        if (isFreemium.value) {
+            const allocation = profileStore.freemiumAllocation as { allowed_save_words?: number; allowed_save_words_used?: number } | null;
+            const total = allocation?.allowed_save_words;
+            const used = allocation?.allowed_save_words_used;
+            if (typeof total !== 'number' || typeof used !== 'number') return undefined;
+            return t('account.saves', { used, total });
+        }
+
+        return t('subscription.voice-meter.left-voice', { n: baseRemaining.value });
+    });
+
+    const items = computed<StProfileMenuItem[]>(() => [
+        { label: t('profile.profile'), icon: 'solar:user-linear', onClick: () => router.push('/settings/profile') },
+        { label: t('account.study-settings'), icon: 'solar:settings-linear', onClick: () => router.push('/settings/preferences') },
+        {
+            label: t('account.subscription'),
+            icon: 'solar:crown-linear',
+            meta: subscriptionMeta.value,
+            onClick: () => router.push('/settings/subscription'),
+        },
+        {
+            label: t('account.sign-out'),
+            icon: 'solar:logout-2-linear',
+            danger: true,
+            dividerBefore: true,
+            onClick: () => (showSignOutModal.value = true),
+        },
+    ]);
+
+    function confirmSignOut() {
+        showSignOutModal.value = false;
+        profileStore.logout();
+        // Hard reload after logout: localStorage is now cleared, so the auth middleware on the
+        // next boot will detect no session and redirect to /auth/login. This sidesteps
+        // vue-router race conditions (queued navigations from the axios 401/412 interceptor or
+        // stale post-logout API responses) that were silently aborting in-page redirects.
+        window.location.reload();
+    }
+</script>
diff --git a/frontend/components/partial/ThemeSwitcher.vue b/frontend/components/partial/ThemeSwitcher.vue
index 1ee33895..9d01f17f 100644
--- a/frontend/components/partial/ThemeSwitcher.vue
+++ b/frontend/components/partial/ThemeSwitcher.vue
@@ -1,18 +1,30 @@
 <template>
-    <div :class="$attrs.class">
-        <div class="flex items-center space-x-2">
-            <IconButton size="md" icon="IconLaptop" v-show="store.theme === 'system'"
-                @click="store.toggleTheme('light')" />
-            <IconButton size="md" icon="IconMoon" v-show="store.theme === 'dark'"
-                @click="store.toggleTheme('system')" />
-            <IconButton size="md" icon="IconSun" v-show="store.theme === 'light'" @click="store.toggleTheme('dark')" />
-        </div>
-    </div>
+    <StThemeSwitcher v-model="theme" size="md" variant="soft" persist-key="" :apply="false" :labels="labels" />
 </template>
 
 <script lang="ts" setup>
-import { useAppStore } from 'pilotui/store';
-import { IconButton } from 'pilotui/elements';
+    import { StThemeSwitcher } from 'subturtle-ui';
 
-const store = useAppStore();
+    /**
+     * The topbar theme control. Deliberately thin.
+     *
+     * `persist-key=""` and `:apply="false"` hand persistence and the `data-theme` attribute to
+     * @nuxtjs/color-mode, which already owns both plus the pre-paint script that keeps a hard
+     * reload from flashing. Two writers would fight over the same attribute and the same key.
+     * The component still resolves `system` itself, because its tooltip and aria-label name what
+     * `system` currently resolves to.
+     */
+    const { t } = useI18n();
+    const { theme } = useAppTheme();
+
+    // `aria` and `resolved` are passed as FORMATTERS, not as translated patterns. Handing
+    // t('theme.aria') straight over would look right and be wrong: vue-i18n interpolates
+    // {current}/{next} on the way out, so the placeholders arrive already blanked.
+    const labels = computed(() => ({
+        light: t('theme.light'),
+        dark: t('theme.dark'),
+        system: t('theme.system'),
+        aria: (current: string, next: string) => t('theme.aria', { current, next }),
+        resolved: (mode: string, resolved: string) => t('theme.resolved', { mode, resolved }),
+    }));
 </script>
diff --git a/frontend/composables/useAppTheme.ts b/frontend/composables/useAppTheme.ts
new file mode 100644
index 00000000..57a3664e
--- /dev/null
+++ b/frontend/composables/useAppTheme.ts
@@ -0,0 +1,32 @@
+export type AppTheme = 'light' | 'dark' | 'system';
+
+/**
+ * The app's view of the theme switch: three states, with `system` following the OS.
+ *
+ * StThemeSwitcher binds to `theme` and is passed `persist-key=""` / `:apply="false"`, so
+ * @nuxtjs/color-mode stays the single writer of both `subturtle:theme` and the `data-theme`
+ * attribute.
+ *
+ * Thin on purpose. `@nuxtjs/color-mode` already persists the preference, resolves `system` from
+ * `prefers-color-scheme`, keeps following it live via its own matchMedia listener, and stamps the
+ * `data-theme` attribute on <html> before first paint. The side effects that are ours — the transition guard and the
+ * pilotui mirror — are registered once in plugins/theme.client.ts, not here, so calling this from
+ * several components is free.
+ *
+ * `theme` is what a switch binds to (the user's choice, which may be `system`); `resolved` is what
+ * is actually on screen, for anything that has to branch on the real palette.
+ */
+export function useAppTheme() {
+    const colorMode = useColorMode();
+
+    const theme = computed<AppTheme>({
+        get: () => colorMode.preference as AppTheme,
+        set: (next) => {
+            colorMode.preference = next;
+        },
+    });
+
+    const resolved = computed<'light' | 'dark'>(() => (colorMode.value === 'dark' ? 'dark' : 'light'));
+
+    return { theme, resolved };
+}
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 7ad2e0d5..cb79c3bf 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,9 +1,10 @@
 <template>
     <!--
         <App> is pilotui's theme/RTL provider. It stays until the last pilotui-era page is
-        migrated: every un-migrated screen's components still read their theming from it, and
-        the header's theme switcher drives it. StAppShell replaces only the chrome
-        (DashboardShell + SidebarMenu + HorizontalMenu).
+        migrated: every un-migrated screen's components still read their theming from it.
+        It no longer DRIVES the theme, though — @nuxtjs/color-mode owns the preference now and
+        plugins/theme.client.ts mirrors it into pilotui's store, so this only follows.
+        StAppShell replaces only the chrome (DashboardShell + SidebarMenu + HorizontalMenu).
     -->
     <App>
         <!-- StAppShell fills its container and scrolls internally, so it needs a container
@@ -28,8 +29,8 @@
                 </template>
 
                 <template #header-right>
-                    <PartialThemeSwitcher class="scale-75" />
-                    <PartialProfileButton />
+                    <PartialThemeSwitcher />
+                    <PartialProfileMenu />
                 </template>
 
                 <!-- overflow-x-clip contains decorative full-bleed page backgrounds (e.g. blurred blobs positioned past the edge)
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 9ccd1aef..3772431b 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -7,18 +7,30 @@
         "list": "Bundle List",
         "detail": "Bundle Detail",
         "add_phrase": "Add Phrase",
-        "no-bundles": "No Phrase Bundles Yet",
-        "no-bundles-description": "You don't have any phrase bundles yet. Create your first bundle to start adding phrases and practice with live sessions.",
+        "collection_label": "Library",
+        "list_title": "Phrase bundles",
+        "list_subtitle": "{count} bundle. Practise it from here. | {count} bundles. Practise any of them from here.",
+        "showing_count": "Showing {shown} of {total}",
+        "load_more": "Load more",
+        "no-bundles": "No bundles yet",
+        "no-bundles-description": "Save a phrase from YouTube, Netflix, or any page and Subturtle files it into a bundle for you.",
+        "no-matches": "No bundles match \"{filter}\"",
+        "no-matches-description": "Nothing in your library has that in its title. Try a shorter word, or clear the filter to see everything.",
+        "clear_filter": "Clear filter",
         "add_new": {
-            "title_placeholder": "My new Tiny set",
+            "title_placeholder": "My new tiny set",
             "title_required": "Title is required",
             "duplicate_title": "Title already exists",
             "duplicate_title_desc": "Please choose another title",
             "desc_max": "Description is too long",
-            "desc_placeholder": "Description",
+            "desc_placeholder": "A line about what's inside",
             "error": "Failed to create new bundle",
-            "title": "Add new bundle",
-            "action_add_new": "Add new bundle",
+            "title": "New bundle",
+            "description": "Name it after where the phrases come from — a show, a course, a topic.",
+            "title_label": "Name",
+            "desc_label": "Description",
+            "desc_optional": "(optional)",
+            "action_add_new": "New bundle",
             "action_cancel": "Cancel",
             "action_create": "Create"
         },
@@ -35,7 +47,7 @@
             "confirm_deletion": "Confirm Phrase Deletion",
             "confirm_deletion_message": "Are you sure you want to delete this phrase?"
         },
-        "filter_bundles": "Filter bundles...",
+        "filter_bundles": "Filter bundles",
         "select_bundle": "Select Bundle"
     },
     "freemium": {
@@ -453,9 +465,6 @@
         "nav": "Practice",
         "title": "Study"
     },
-    "activities": {
-        "title": "Activities"
-    },
     "live-session": {
         "no-sessions": "No Sessions Yet",
         "no-sessions-description": "You haven't started any practice sessions yet. Start a live session from a phrase bundle to practice your language skills and come back here to see your session history.",
@@ -542,7 +551,6 @@
     "pool": {
         "title": "New words to encode",
         "tab": "Pool",
-        "module_label": "Encode Queue",
         "card_small": "{count} new words from yesterday's videos · ~{mins} min",
         "card_medium": "{count} words to encode · ~{mins} min · do the first {chunk} today?",
         "card_large": "{count} words waiting · do {chunk} now, the rest are aging",
@@ -565,6 +573,43 @@
         "save_failed": "Failed to save Pool settings"
     },
     "smart_review": {
+        "page_title": "Review settings",
+        "page_subtitle": "Your chain, your pace. Everything Smart Review keeps lives on this page.",
+        "the_journey": "The journey",
+        "the_chain": "The chain",
+        "discard": "Discard",
+        "changed": "Changed",
+        "not_saved": "Not saved",
+        "n_unsaved": "{count} unsaved change | {count} unsaved changes",
+        "total_levels_note": "Links in the chain, 1 to 10.",
+        "times_follow": "Times follow {zone}.",
+        "daily_in_zone": "Daily · {zone}",
+        "every_days_in_zone": "Every {days} days · {zone}",
+        "start_over": "Start over",
+        "reset_note": "Puts all {count} phrases back at level 1. This can't be undone.",
+        "reset_note_empty": "Nothing to reset yet. Levels and intervals stay as you set them.",
+        "reset_description": "Every phrase goes back to level 1 and the next session starts from scratch.",
+        "reset_loses": "{count} phrases lose their level and review history.",
+        "reset_keeps": "Your bundles, intervals and daily limit stay exactly as they are.",
+        "chain_note": "Items move down the chain as you learn them · {count} phrases",
+        "chain_note_empty": "Waiting on your first saved phrase",
+        "empty_chain_title": "Nothing in the chain yet",
+        "empty_chain_description": "Save a phrase from YouTube, Netflix or any page and, with auto entry on, it lands in level 1 at the next session.",
+        "n_cards": "{count} cards",
+        "cloze": "Cloze",
+        "note_entrance": "New saves land here.",
+        "note_middle": "Plain recall, both directions.",
+        "note_cloze": "Fill-in-the-blank starts here.",
+        "note_mature": "Nearly learned. Light touch-ups.",
+        "save_failed_title": "We couldn't save your preferences",
+        "save_failed_body": "Your edits are still here. Check your connection and try again.",
+        "try_again": "Try again",
+        "phrases_in_level": "Phrases in level {number}",
+        "only_this_level": "Only this level",
+        "not_in_chain": "Not in chain",
+        "add_here": "Add here",
+        "remove": "Remove",
+        "page_of": "Page {page} of {total}",
         "title": "Smart Review",
         "settings": "Smart Review Settings",
         "settings_desc": "Configure your spaced repetition journey. Items move down the chain as you learn them.",
@@ -636,13 +681,30 @@
         "select_phrase": "Select Phrase"
     },
     "board": {
-        "no_activities": "No activities right now",
         "all_caught_up": "You are all caught up! Check back later.",
         "due": "Due",
         "items_due": "{count} items due for review",
         "activity_ready": "Ready to start",
         "start_activity": "Start Activity",
-        "back_to_board": "Back to Board"
+        "back_to_board": "Back to Board",
+        "overline": "Today",
+        "title": "Today's board",
+        "subtitle": "Your reviews for today, and a few optional ways to practice.",
+        "due_today": "Due today",
+        "optional_practice": "Optional practice",
+        "start_review": "Start review",
+        "empty": {
+            "title": "You're all caught up",
+            "description": "Nothing is due right now. Check back later, or save a few new phrases while you watch.",
+            "cta": "Browse bundles"
+        },
+        "practice": {
+            "flashcards": {
+                "title": "Flashcards",
+                "description": "Free practice on any bundle. Doesn't move levels.",
+                "cta": "Open"
+            }
+        }
     },
     "leitner_session": {
         "completed_title": "Review Session Completed!",
@@ -662,5 +724,19 @@
         "todays-board": "Today's board",
         "start-a-session": "Start a session",
         "account": "Account"
+    },
+    "account": {
+        "menu": "Account menu",
+        "study-settings": "Study settings",
+        "subscription": "Subscription",
+        "sign-out": "Sign out",
+        "saves": "{used} / {total} saves"
+    },
+    "theme": {
+        "light": "Light",
+        "dark": "Dark",
+        "system": "System",
+        "resolved": "{mode} \u00b7 {resolved}",
+        "aria": "Theme: {current}. Switch to {next}."
     }
 }
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 5f570d41..0ea3e4b2 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -78,7 +78,44 @@ export default defineNuxtConfig({
 
     plugins: ['~/plugins/mixpanel.ts'],
 
-    modules: ['@pinia/nuxt', '@nuxtjs/i18n', '@cssninja/nuxt-toaster'],
+    modules: ['@pinia/nuxt', '@nuxtjs/i18n', '@cssninja/nuxt-toaster', '@nuxtjs/color-mode'],
+
+    /**
+     * The theme layer for the `st-` design system. The module stamps BOTH a `data-theme` attribute
+     * and a bare `light`/`dark` class on <html>; subturtle-ui re-points its tokens under
+     * `html[data-theme='dark']` and both Tailwind builds select on the same attribute.
+     *
+     * The module also injects a blocking pre-paint script into the SPA shell's <head>, which is what
+     * keeps a hard reload from flashing the wrong theme. `system` is resolved in that script from
+     * `prefers-color-scheme`, so it is flash-free too; useAppTheme() keeps it following live
+     * afterwards.
+     *
+     * pilotui writes its own theme to localStorage under `theme`, so this uses a distinct key rather
+     * than fighting it over one entry — plugins/theme.client.ts mirrors this preference into
+     * pilotui's store.
+     *
+     * `disableTransition: false` is the module's own default, kept explicit so nobody turns it on.
+     * At `true` the module suppresses the cross-fade itself by injecting an anonymous <style>
+     * element; at `false` it leaves transitions alone, which is what we want, because
+     * plugins/theme.client.ts already does that job with an `html.theme-switching` class whose
+     * rule ships in subturtle-ui's stylesheet. One mechanism, and one that is inspectable in
+     * devtools. Setting this to `true` would stack a second, invisible one on top.
+     */
+    colorMode: {
+        // `dataValue` is what makes the module write data-theme="light|dark" on <html> — the
+        // application mechanism the design system specifies, and what both Tailwind builds now
+        // select on. The pre-paint script sets it too, which is what keeps a hard reload from
+        // flashing the wrong theme, `system` included.
+        dataValue: 'theme',
+        // The class is ALSO kept. pilotui's compiled CSS and every un-migrated screen's `dark:`
+        // classes were built against `.dark`, so dropping it would take those screens' dark mode
+        // with it. Migrated `st-` surfaces read data-theme; the two agree at all times.
+        classSuffix: '',
+        preference: 'system',
+        fallback: 'light',
+        storageKey: 'subturtle:theme',
+        disableTransition: false,
+    },
 
     i18n: {
         locales: [{ code: 'en', file: 'en.json' }],
diff --git a/frontend/package.json b/frontend/package.json
index ed003a06..46bb8a6a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
     "@iconify/json": "2.2.319",
     "@iconify/tailwind": "^1.2.0",
     "@nuxt/devtools": "^1.6.0",
+    "@nuxtjs/color-mode": "^4.0.1",
     "@nuxtjs/i18n": "^8.0.0-beta.9",
     "@pinia/testing": "^1.0.2",
     "@playwright/test": "^1.54.1",
@@ -65,8 +66,8 @@
     "markdown-it": "^14",
     "mixpanel-browser": "^2.66.0",
     "pilotui": "^1.29.0",
-    "subturtle-ui": "link:../ui",
     "pinia": "^2.0.22",
+    "subturtle-ui": "link:../ui",
     "vee-validate": "^4.15.0",
     "vue": "^3.5.12",
     "vue-height-collapsible": "^0.1.1",
diff --git a/frontend/pages/auth/login.vue b/frontend/pages/auth/login.vue
index 5d52b62e..76aac540 100644
--- a/frontend/pages/auth/login.vue
+++ b/frontend/pages/auth/login.vue
@@ -8,16 +8,28 @@
     <div class="relative flex h-[100dvh] w-full items-center overflow-hidden bg-st-page font-st-sans text-st-body">
         <!-- Ambient brand wash, purely decorative and behind everything. A radial gradient is
              the one thing the `st-` token namespace cannot express, so it reads the custom
-             properties directly. -->
+             properties directly. The alpha is scaled off --blob-alpha (5% light / 3% dark) so
+             these follow the same "blobs drop in dark" rule as the app shell's, at the stronger
+             weight this screen is drawn at. -->
         <span
             aria-hidden="true"
-            class="pointer-events-none absolute -right-[220px] -top-[320px] h-[820px] w-[820px] rounded-full bg-[radial-gradient(circle,rgb(var(--rose-500)/0.09),transparent_62%)]"
+            class="pointer-events-none absolute -right-[220px] -top-[320px] h-[820px] w-[820px] rounded-full"
+            :style="{ background: 'radial-gradient(circle, rgb(var(--rose-500) / calc(var(--blob-alpha) * 1.8)), transparent 62%)' }"
         />
         <span
             aria-hidden="true"
-            class="pointer-events-none absolute -bottom-[260px] -left-[180px] h-[620px] w-[620px] rounded-full bg-[radial-gradient(circle,rgb(var(--jade-500)/0.08),transparent_62%)]"
+            class="pointer-events-none absolute -bottom-[260px] -left-[180px] h-[620px] w-[620px] rounded-full"
+            :style="{ background: 'radial-gradient(circle, rgb(var(--jade-500) / calc(var(--blob-alpha) * 1.6)), transparent 62%)' }"
         />
 
+        <!-- No shell on this screen, so the switcher is placed by hand at the design's offsets.
+             Positioned via a WRAPPER, not by passing classes to the component: its root already
+             carries `st-relative`, and subturtle-ui's stylesheet loads after the app's, so an
+             `absolute` handed down as a fall-through class loses the specificity tie. -->
+        <div class="absolute right-[26px] top-[22px] z-[3]">
+            <PartialThemeSwitcher />
+        </div>
+
         <!-- Sign-in column. Below xl it centres and the decorative half is dropped (see
              LoginBoardPreview for why xl), but the 344px form width is kept so the button never
              stretches across a tablet. -->
diff --git a/frontend/pages/board/index.vue b/frontend/pages/board/index.vue
index 81072c46..c99bc0b0 100644
--- a/frontend/pages/board/index.vue
+++ b/frontend/pages/board/index.vue
@@ -1,263 +1,153 @@
 <template>
-    <div class="relative min-h-screen overflow-hidden">
-        <!-- Decorative Background Elements -->
-        <div
-            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
-        </div>
-        <div
-            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
-        </div>
-
-        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
-            <!-- Header Section -->
-            <div class="mb-14 flex flex-col md:flex-row md:items-end justify-between gap-6">
-                <div class="flex flex-col gap-3">
-                    <div class="flex items-center gap-2">
-                        <div class="h-2 w-2 rounded-full bg-primary animate-pulse"></div>
-                        <span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary/60">Mission
-                            Control</span>
-                    </div>
-                    <h1
-                        class="text-5xl font-black text-gray-900 dark:text-white tracking-tight leading-none bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400">
-                        {{ $t('activities.title') }}
-                    </h1>
-                    <p class="text-lg text-gray-500 dark:text-gray-400 font-medium max-w-md">
-                        Your daily language mission and progress tracker. Stay consistent, stay ahead.
-                    </p>
-                </div>
-                <div class="hidden md:flex flex-col items-end gap-2">
-                    <div class="h-1.5 w-32 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
-                    <span class="text-xs font-bold text-gray-400 uppercase tracking-widest">Active System</span>
-                </div>
-            </div>
-
-            <!-- Pool encode queue — self-contained, shows only when the pool is non-empty.
-                 Sits alongside the activity cards regardless of board-activity state. -->
-            <div v-if="!loading" class="mb-10 grid gap-10 md:grid-cols-2 lg:grid-cols-3">
-                <PoolCard />
-            </div>
-
-            <!-- Loading State -->
-            <div v-if="loading" class="flex flex-col items-center justify-center py-32 gap-6">
-                <div class="relative">
-                    <div
-                        class="h-20 w-20 animate-[spin_3s_linear_infinite] rounded-full border-[3px] border-primary/5 border-t-primary">
-                    </div>
-                    <div
-                        class="h-20 w-20 absolute inset-0 animate-[spin_2s_linear_infinite] rounded-full border-[3px] border-transparent border-b-secondary opacity-40">
-                    </div>
-                    <div class="absolute inset-0 flex items-center justify-center">
-                        <Icon name="IconBolt" class="w-8 h-8 text-primary animate-pulse" />
-                    </div>
-                </div>
-                <div class="flex flex-col items-center gap-1">
-                    <p class="text-xs font-black text-primary uppercase tracking-[0.3em] animate-pulse">Synchronizing
-                    </p>
-                    <p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Mission Data Feed</p>
-                </div>
-            </div>
+    <div class="flex flex-col gap-[22px]">
+        <StPageHeader :title="t('board.title')" :overline="t('board.overline')" :subtitle="t('board.subtitle')" />
 
-            <!-- Empty State -->
-            <div v-else-if="activities.length === 0 && poolCount === 0" class="max-w-3xl mx-auto">
-                <Card
-                    class="relative group flex flex-col items-center justify-center py-24 px-10 text-center bg-white/40 dark:bg-gray-800/40 backdrop-blur-2xl border-2 border-dashed border-gray-200/60 dark:border-gray-700/60 rounded-[3rem] overflow-hidden shadow-2xl shadow-gray-200/20 dark:shadow-none transition-all duration-700 hover:border-primary/30">
-                    <!-- Subtle background glow for empty state -->
-                    <div
-                        class="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-1000">
-                    </div>
+        <!-- Loading: two placeholder rows, matching the design's `.sk` blocks. -->
+        <div v-if="loading" class="flex flex-col gap-[14px]">
+            <StSkeleton v-for="n in 2" :key="n" class="h-[104px]" />
+        </div>
 
-                    <div class="relative mb-10">
-                        <div
-                            class="absolute inset-0 bg-primary blur-3xl opacity-20 group-hover:opacity-30 transition-opacity">
-                        </div>
-                        <div
-                            class="relative h-24 w-24 rounded-3xl bg-gradient-to-br from-primary to-primary-light flex items-center justify-center shadow-2xl shadow-primary/30 group-hover:scale-110 transition-transform duration-700">
-                            <Icon name="iconify solar--rocket-2-bold-duotone" class="text-5xl text-white" />
+        <!-- Populated: "Due today" and "Optional practice" travel together — the design gates both
+             on the same `listShow`, so neither appears beside the caught-up card. -->
+        <template v-else-if="activities.length || poolCount">
+            <!-- One card per board activity — the design's three fixed cards are demo data; the
+                 board only ever returns the types the server actually raised. PoolCard sits in the
+                 same grid and renders nothing when the pool is empty. -->
+            <section>
+                <h2 class="mb-[14px] text-st-2xs font-extrabold uppercase tracking-st-caps text-st-faint">
+                    {{ t('board.due_today') }}
+                </h2>
+
+                <!-- Cards stretch (the design's default) so every `mt-auto` footer lands on the
+                     same baseline across the row. -->
+                <div class="grid gap-[14px] [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
+                    <StCard v-for="activity in activities" :key="activity._id" class="flex flex-col">
+                        <div class="mb-5 flex items-start justify-between gap-3">
+                            <span
+                                class="inline-flex h-[54px] w-[54px] items-center justify-center rounded-st-md"
+                                :class="isReview(activity) ? 'bg-st-warning-soft text-st-amber-600' : 'bg-st-primary-soft text-st-rose-600'"
+                            >
+                                <StIcon :name="isReview(activity) ? 'solar:layers-minimalistic-bold-duotone' : 'solar:play-bold'" :size="29" />
+                            </span>
+                            <StBadge v-if="activity.state === 'toasted'" color="warning">{{ t('board.due') }}</StBadge>
                         </div>
-                    </div>
 
-                    <div class="relative z-10 max-w-md">
-                        <h2 class="text-3xl font-black text-gray-900 dark:text-white mb-4 tracking-tight">
-                            {{ $t('board.no_activities') }}
-                        </h2>
-                        <p class="text-gray-500 dark:text-gray-400 font-medium mb-10 leading-relaxed text-lg">
-                            {{ $t('board.all_caught_up') }} Take this moment to explore new phrases.
+                        <h3 class="mb-1.5 text-st-md font-extrabold text-st-strong">
+                            {{ isReview(activity) ? t('smart_review.title') : activity.type }}
+                        </h3>
+                        <p class="mb-[18px] text-st-sm font-semibold text-st-muted [text-wrap:pretty]">
+                            {{
+                                isReview(activity) && activity.meta?.dueCount
+                                    ? t('board.items_due', { count: activity.meta.dueCount })
+                                    : t('board.activity_ready')
+                            }}
                         </p>
-                    </div>
-                </Card>
-            </div>
-
-            <!-- Activities Grid -->
-            <div v-else-if="activities && activities.length > 0" class="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
-                <div v-for="(activity, index) in activities" :key="activity._id" class="group h-full animate-fade-in-up"
-                    :style="{ animationDelay: `${index * 150}ms`, opacity: 0 }">
-                    <Card
-                        class="relative h-full flex flex-col overflow-hidden rounded-[2.5rem] bg-white dark:bg-gray-800 shadow-[0_4px_20px_rgba(0,0,0,0.03)] hover:shadow-[0_40px_80px_rgba(var(--primary-rgb),0.15)] transition-all duration-700 hover:-translate-y-3 cursor-default p-0 group border-0">
-
-                        <!-- Card Accent Header -->
-                        <div class="h-32 w-full relative overflow-hidden shrink-0 rounded-t-[2rem]">
-                            <div
-                                class="absolute inset-0 bg-gradient-to-br from-primary via-primary-dark to-secondary opacity-100 group-hover:scale-110 transition-transform duration-1000">
-                            </div>
 
-                            <!-- Animated pattern overlay -->
-                            <div
-                                class="absolute inset-0 opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]">
-                            </div>
-
-                            <div class="absolute top-6 right-6 z-20">
-                                <span v-if="activity.state === 'toasted'"
-                                    class="flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md rounded-2xl text-[10px] font-black text-white uppercase tracking-[0.2em] border border-white/20 shadow-xl shadow-black/10">
-                                    <div class="h-1.5 w-1.5 rounded-full bg-white animate-pulse"></div>
-                                    {{ $t('board.due') }}
-                                </span>
-                            </div>
-
-                            <!-- Big symbolic background icon -->
-                            <div
-                                class="absolute -left-6 -bottom-10 opacity-10 scale-150 group-hover:rotate-12 transition-transform duration-1000">
-                                <Icon v-if="activity.type === 'leitner_review'" name="IconArchive"
-                                    class="w-32 h-32 text-white" />
-                                <Icon v-else name="IconStar" class="w-32 h-32 text-white" />
-                            </div>
-
-                            <!-- Bottom transition gradient mask -->
-                            <div
-                                class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-30">
-                            </div>
+                        <div class="mt-auto">
+                            <StButton color="primary" icon="solar:play-bold" block @click="handleStartActivity(activity)">
+                                {{ isReview(activity) ? t('board.start_review') : t('board.start_activity') }}
+                            </StButton>
                         </div>
+                    </StCard>
 
-                        <!-- Main Content -->
-                        <div
-                            class="p-10 pb-12 flex flex-col flex-grow relative -mt-8 bg-white dark:bg-gray-800 rounded-t-[3rem] z-10 border-t border-white/10">
-                            <!-- Floating Glass Icon -->
-                            <div class="absolute -top-12 left-10 h-24 w-24">
-                                <div
-                                    class="h-24 w-24 bg-white dark:bg-gray-900 rounded-[2rem] shadow-2xl flex items-center justify-center border border-gray-50 dark:border-gray-800 ring-8 ring-white/10 dark:ring-gray-900/10 group-hover:scale-105 transition-transform duration-500">
-                                    <Icon v-if="activity.type === 'leitner_review'"
-                                        name="iconify solar--box-bold-duotone" class="text-4xl text-primary" />
-                                    <Icon v-else name="iconify solar--star-bold-duotone"
-                                        class="text-4xl text-primary" />
-                                </div>
-                            </div>
-
-                            <div class="mt-10 mb-8">
-                                <div class="flex items-center gap-2 mb-3">
-                                    <span class="text-[10px] font-bold text-primary uppercase tracking-widest">Training
-                                        Module</span>
-                                    <div class="h-px flex-grow bg-gray-100 dark:bg-gray-700/50"></div>
-                                </div>
-                                <h3
-                                    class="text-2xl font-black text-gray-900 dark:text-white mb-3 tracking-tight group-hover:text-primary transition-colors">
-                                    <span v-if="activity.type === 'leitner_review'">{{ $t('review.title') }}</span>
-                                    <span v-else>{{ activity.type }}</span>
-                                </h3>
-                                <p class="text-base font-medium text-gray-500 dark:text-gray-400 leading-relaxed">
-                                    <span v-if="activity.type === 'leitner_review' && activity.meta?.dueCount"
-                                        class="flex items-center gap-2">
-                                        <Icon name="iconify solar--checklist-minimalistic-bold-duotone"
-                                            class="w-5 h-5 opacity-60" />
-                                        {{ $t('board.items_due', { count: activity.meta.dueCount }) }}
-                                    </span>
-                                    <span v-else class="flex items-center gap-2">
-                                        <Icon name="iconify solar--check-circle-bold-duotone"
-                                            class="w-5 h-5 text-green-500" />
-                                        {{ $t('board.activity_ready') }}
-                                    </span>
-                                </p>
-                            </div>
-
-                            <!-- Footer / Action -->
-                            <div class="mt-auto pt-8">
-                                <Button @click="handleStartActivity(activity)" block size="lg"
-                                    class="h-16 rounded-2xl font-black bg-gray-900 dark:bg-white text-white dark:text-gray-900 hover:bg-primary dark:hover:bg-primary hover:text-white dark:hover:text-white transition-all duration-300 active:scale-95 shadow-xl hover:shadow-primary/30 group/btn overflow-hidden">
-                                    <div class="flex items-center justify-center gap-3 relative z-10">
-                                        <Icon name="iconify solar--play-circle-bold"
-                                            class="w-6 h-6 group-hover/btn:rotate-12 transition-transform" />
-                                        {{ $t('board.start_activity') }}
-                                    </div>
-                                    <div
-                                        class="absolute inset-0 bg-primary opacity-0 group-hover/btn:opacity-100 transition-opacity">
-                                    </div>
-                                </Button>
-                            </div>
+                    <!-- Pool encode queue — self-contained, shows only when the pool is non-empty.
+                         Still pilotui; it gets its own migration PR. -->
+                    <PoolCard />
+                </div>
+            </section>
+
+            <!-- Optional practice. The design shows three tiles; only Flashcards has a route that
+                 works as an entry point, so it is the only one kept — see the PR notes. -->
+            <section>
+                <h2 class="mb-[14px] text-st-2xs font-extrabold uppercase tracking-st-caps text-st-faint">
+                    {{ t('board.optional_practice') }}
+                </h2>
+
+                <div class="grid items-start gap-[14px] [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
+                    <StCard class="flex flex-col">
+                        <span class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-st-md bg-st-info-soft text-st-sky-600">
+                            <StIcon name="solar:card-2-bold-duotone" :size="26" />
+                        </span>
+                        <h3 class="mb-[5px] text-st-base font-extrabold text-st-strong">
+                            {{ t('board.practice.flashcards.title') }}
+                        </h3>
+                        <p class="mb-4 text-st-sm font-semibold text-st-muted [text-wrap:pretty]">
+                            {{ t('board.practice.flashcards.description') }}
+                        </p>
+                        <div class="mt-auto">
+                            <StButton variant="ghost" color="neutral" size="sm" @click="router.push('/practice/bundle-review')">
+                                {{ t('board.practice.flashcards.cta') }}
+                            </StButton>
                         </div>
-                    </Card>
+                    </StCard>
                 </div>
-            </div>
-        </div>
+            </section>
+        </template>
+
+        <StCard v-else padding="none">
+            <StEmptyState icon="solar:check-circle-bold-duotone" color="accent" :title="t('board.empty.title')" :description="t('board.empty.description')">
+                <template #action>
+                    <StButton variant="outline" color="primary" icon="solar:notebook-bold" @click="router.push('/bundles')">
+                        {{ t('board.empty.cta') }}
+                    </StButton>
+                </template>
+            </StEmptyState>
+        </StCard>
     </div>
 </template>
 
 <script setup lang="ts">
-import { useLeitnerStore } from '~/stores/leitner';
-import { usePoolStore } from '~/stores/pool';
-import { type BoardActivityType } from '~/types/database.type';
-import { storeToRefs } from 'pinia';
-import { Card, Button, Icon } from 'pilotui/elements';
-
-const { t } = useI18n();
-const router = useRouter();
-const leitnerStore = useLeitnerStore();
-const poolStore = usePoolStore();
-const { boardActivities } = storeToRefs(leitnerStore);
-const { poolCount } = storeToRefs(poolStore);
-
-const loading = ref(true);
-
-const activities = computed(() => boardActivities.value);
-
-definePageMeta({
-    layout: 'default',
-    // @ts-ignore
-    middleware: ['auth'],
-});
-
-onMounted(async () => {
-    loading.value = true;
-    try {
-        await Promise.all([leitnerStore.fetchBoard(), poolStore.fetchPool()]);
-    } catch (e) {
-        console.error('Failed to fetch board:', e);
-    } finally {
-        loading.value = false;
+    import { useLeitnerStore } from '~/stores/leitner';
+    import { usePoolStore } from '~/stores/pool';
+    import { type BoardActivityType } from '~/types/database.type';
+    import { storeToRefs } from 'pinia';
+    import { StBadge, StButton, StCard, StEmptyState, StIcon, StSkeleton } from 'subturtle-ui';
+    import StPageHeader from '~/components/common/StPageHeader.vue';
+
+    const { t } = useI18n();
+    const router = useRouter();
+    const leitnerStore = useLeitnerStore();
+    const poolStore = usePoolStore();
+    const { boardActivities } = storeToRefs(leitnerStore);
+    const { poolCount } = storeToRefs(poolStore);
+
+    const loading = ref(true);
+
+    const activities = computed(() => boardActivities.value);
+
+    /** The only type the server raises today; everything else renders as a generic card. */
+    function isReview(activity: BoardActivityType) {
+        return activity.type === 'leitner_review';
     }
-});
 
-async function handleStartActivity(activity: BoardActivityType) {
-    try {
-        // 1. Mark as consumed/started
-        await leitnerStore.consumeActivity(activity.type, activity.refId);
-
-        // 2. Navigate to the activity
-        if (activity.type === 'leitner_review') {
-            router.push('/practice/review');
+    definePageMeta({
+        layout: 'default',
+        // @ts-ignore
+        middleware: ['auth'],
+    });
+
+    onMounted(async () => {
+        loading.value = true;
+        try {
+            await Promise.all([leitnerStore.fetchBoard(), poolStore.fetchPool()]);
+        } catch (e) {
+            console.error('Failed to fetch board:', e);
+        } finally {
+            loading.value = false;
+        }
+    });
+
+    async function handleStartActivity(activity: BoardActivityType) {
+        try {
+            // 1. Mark as consumed/started
+            await leitnerStore.consumeActivity(activity.type, activity.refId);
+
+            // 2. Navigate to the activity
+            if (activity.type === 'leitner_review') {
+                router.push('/practice/review');
+            }
+        } catch (e) {
+            console.error('Failed to start activity:', e);
         }
-    } catch (e) {
-        console.error('Failed to start activity:', e);
     }
-}
 </script>
-
-<style scoped>
-.animate-fade-in-up {
-    animation: fade-in-up 0.6s ease-out forwards;
-}
-
-@keyframes fade-in-up {
-    from {
-        opacity: 0;
-        transform: translateY(30px) scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-:root {
-    --primary-rgb: 79, 70, 229;
-    /* Adjust to match your primary theme color */
-}
-</style>
diff --git a/frontend/pages/bundles/index.vue b/frontend/pages/bundles/index.vue
index c2c0179f..a0a947d5 100644
--- a/frontend/pages/bundles/index.vue
+++ b/frontend/pages/bundles/index.vue
@@ -1,135 +1,150 @@
 <template>
-    <div class="relative min-h-screen">
-        <!-- Decorative Background Elements -->
-        <div
-            class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/5 rounded-full blur-[120px] pointer-events-none">
-        </div>
-        <div
-            class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-secondary/5 rounded-full blur-[120px] pointer-events-none">
+    <div class="flex flex-col gap-[22px]">
+        <StPageHeader :title="t('bundle.list_title')" :overline="t('bundle.collection_label')" :subtitle="subtitle">
+            <template #actions>
+                <StInput v-model="filter" :placeholder="t('bundle.filter_bundles')" icon="solar:magnifer-linear" class="w-[240px]" />
+                <BundleAddNew />
+            </template>
+        </StPageHeader>
+
+        <!-- Loading: six card placeholders, so the grid keeps its shape while the first page lands. -->
+        <div v-if="isLoading && !bundleList.length" class="grid grid-cols-1 gap-[14px] sm:grid-cols-2 lg:grid-cols-3">
+            <StSkeleton v-for="n in 6" :key="n" class="h-[190px]" />
         </div>
 
-        <!-- Standard Container -->
-        <div class="container relative mx-auto px-6 py-16 max-w-7xl">
-            <!-- Standard Header Block -->
-            <PageHeader :overline="t('bundle.collection_label', 'LIBRARY')"
-                :title="t('bundle.list_title', 'Your bundles')"
-                :subtitle="t('bundle.list_subtitle', 'Manage and practice your language collections.')">
-                <template #actions>
-                    <div class="w-full md:w-64">
-                        <Input iconName="IconSearch" v-model="filter" :placeholder="t('bundle.filter_bundles')"
-                            :error="!!error" :error-message="error || ''" class="bg-white/50 backdrop-blur-sm" />
-                    </div>
-                    <div>
-                        <BundleAddNew />
-                    </div>
-                </template>
-            </PageHeader>
-
-            <!-- Empty State -->
-            <div v-if="isEmptyState" class="flex flex-1 flex-col items-center justify-center py-20">
-                <div
-                    class="relative flex max-w-xl flex-col items-center justify-center rounded-3xl border border-white/20 bg-white/40 p-12 text-center shadow-xl backdrop-blur-md dark:bg-gray-800/40">
-                    <!-- Decorative blob for empty state -->
-                    <div
-                        class="absolute inset-0 -z-10 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 blur-2xl">
-                    </div>
-
-                    <img class="mx-auto h-48 w-auto dark:hidden"
-                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3.svg"
-                        alt="No bundles available" />
-                    <img class="mx-auto hidden h-48 w-auto dark:block"
-                        src="/assets/images/illustrations/placeholders/flat/placeholder-search-3-dark.svg"
-                        alt="No bundles available" />
-                    <h3 class="mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
-                        {{ t('bundle.no-bundles') }}
-                    </h3>
-                    <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
-                        {{ t('bundle.no-bundles-description') }}
-                    </p>
-                    <div class="mt-8">
-                        <BundleAddNew />
-                    </div>
-                </div>
+        <template v-else-if="bundleList.length">
+            <section class="grid grid-cols-1 gap-[14px] sm:grid-cols-2 lg:grid-cols-3">
+                <BundleGenerativeCard v-for="bundle of bundleList" :key="bundle._id" :bundle="bundle" />
+            </section>
+
+            <div class="flex items-center justify-center gap-4 pt-1.5">
+                <span class="text-st-sm font-semibold text-st-faint">
+                    {{ t('bundle.showing_count', { shown: bundleList.length, total: totalBundles }) }}
+                </span>
+                <StButton v-if="hasMore" variant="outline" color="neutral" :disabled="isLoading" @click="loadMore">
+                    {{ t('bundle.load_more') }}
+                </StButton>
             </div>
+        </template>
 
-            <!-- Grid section -->
-            <section v-else class="grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-                <template v-for="bundle of bundleList" :key="bundle._id">
-                    <BundleGenerativeCard :bundle="bundle" />
+        <!-- No match for the active filter. Distinct from an empty library: the fix is to clear the
+             filter, not to create a bundle. -->
+        <StCard v-else-if="filter" padding="none">
+            <StEmptyState
+                icon="solar:magnifer-linear"
+                color="neutral"
+                :title="t('bundle.no-matches', { filter })"
+                :description="t('bundle.no-matches-description')"
+            >
+                <template #action>
+                    <StButton variant="outline" color="primary" @click="filter = ''">{{ t('bundle.clear_filter') }}</StButton>
                 </template>
-            </section>
+            </StEmptyState>
+        </StCard>
 
-            <!-- Pagination -->
-            <div v-if="pagination && !isEmptyState" class="mt-12 flex justify-center">
-                <Pagination v-model="controller.pagination.page" :totalPages="controller.pagination.pages"
-                    @change-page="controller.fetchPage($event)" />
-            </div>
-        </div>
+        <StCard v-else padding="none">
+            <StEmptyState icon="solar:notebook-bold-duotone" color="neutral" :title="t('bundle.no-bundles')" :description="t('bundle.no-bundles-description')">
+                <template #action>
+                    <BundleAddNew variant="outline" />
+                </template>
+            </StEmptyState>
+        </StCard>
     </div>
 </template>
 
 <script setup lang="ts">
-import { Input, Pagination } from 'pilotui';
-import PageHeader from '~/components/common/PageHeader.vue';
-import { dataProvider } from '@modular-rest/client';
-import type { PaginationType } from '@modular-rest/client/dist/types/types';
-import { COLLECTIONS, DATABASE, type PhraseBundleType } from '~/types/database.type';
-
-const { t } = useI18n();
-
-const error = ref<string | null>(null);
-
-definePageMeta({
-    layout: 'default',
-    title: () => t('bundle.list'),
-    // @ts-ignore
-    middleware: ['auth'],
-});
-
-const filter = ref('');
-const perPage = ref(20);
-const bundleList = ref<PhraseBundleType[]>([]);
-const pagination = ref<PaginationType | null>(null);
-const isLoading = ref(false);
-const isEmptyState = computed(() => !bundleList.value.length && !isLoading.value);
-
-const controller = dataProvider.list<PhraseBundleType>(
-    {
-        database: DATABASE.USER_CONTENT,
-        collection: COLLECTIONS.PHRASE_BUNDLE,
-        query: {
-            refId: authUser.value?.id,
-            title: {
-                $regex: filter.value,
-                $options: 'i',
-            },
-        },
-        options: {
-            sort: {
-                _id: -1,
+    import { dataProvider } from '@modular-rest/client';
+    import type { PaginationType } from '@modular-rest/client/dist/types/types';
+    import { COLLECTIONS, DATABASE, type PhraseBundleType } from '~/types/database.type';
+    import { StButton, StCard, StEmptyState, StInput, StSkeleton } from 'subturtle-ui';
+    import StPageHeader from '~/components/common/StPageHeader.vue';
+
+    const { t } = useI18n();
+
+    definePageMeta({
+        layout: 'default',
+        title: () => t('bundle.list'),
+        // @ts-ignore
+        middleware: ['auth'],
+    });
+
+    const filter = ref('');
+    const perPage = ref(20);
+    const bundleList = ref<PhraseBundleType[]>([]);
+    const pagination = ref<PaginationType | null>(null);
+    const isLoading = ref(false);
+
+    // Size of the whole library, refreshed only on unfiltered fetches. The subtitle describes the
+    // library, so it must not follow the filter — "0 bundles. Practise any of them from here."
+    // under a non-matching filter is not what the header is saying.
+    const libraryTotal = ref(0);
+
+    // Size of the CURRENT result set (filtered or not) — what "Showing X of Y" and Load more read.
+    const totalBundles = computed(() => pagination.value?.total ?? bundleList.value.length);
+    const hasMore = computed(() => bundleList.value.length < totalBundles.value);
+
+    // The design's "14 bundles, 342 phrases" needs a phrase total across ALL bundles; only the
+    // loaded page carries phrase arrays, so the count would be wrong on every page but the last.
+    const subtitle = computed(() => t('bundle.list_subtitle', libraryTotal.value));
+
+    /**
+     * Rebuilt per fetch: the query has to read the CURRENT filter. The previous version built the
+     * controller once at setup, which captured `filter.value` as '' forever — typing in the filter
+     * box re-rendered nothing.
+     */
+    function buildController(page: number) {
+        return dataProvider.list<PhraseBundleType>(
+            {
+                database: DATABASE.USER_CONTENT,
+                collection: COLLECTIONS.PHRASE_BUNDLE,
+                query: {
+                    refId: authUser.value?.id,
+                    title: {
+                        $regex: filter.value,
+                        $options: 'i',
+                    },
+                },
+                options: {
+                    sort: {
+                        _id: -1,
+                    },
+                },
             },
-        },
-    },
-    {
-        limit: perPage.value,
-        page: 1,
-        onFetched: (data) => {
-            bundleList.value = data;
+            { limit: perPage.value, page }
+        );
+    }
+
+    async function fetchPage(page: number, append = false) {
+        isLoading.value = true;
+        try {
+            const controller = buildController(page);
+            await controller.updatePagination();
+            // Assigned from the returned rows, not the `onFetched` hook: that hook does not fire
+            // for an empty result, which left the previous list on screen under a filter that
+            // matches nothing ("Showing 4 of 0").
+            const rows = (await controller.fetchPage(page)) ?? [];
+            bundleList.value = append ? [...bundleList.value, ...rows] : rows;
             pagination.value = controller.pagination;
-        },
+            if (!filter.value) libraryTotal.value = controller.pagination.total;
+        } catch (e) {
+            console.error('Failed to fetch bundles:', e);
+        } finally {
+            isLoading.value = false;
+        }
     }
-);
-
-onMounted(async () => {
-    isLoading.value = true;
-
-    try {
-        // update pagination
-        await controller.updatePagination();
-        // fetch first page
-        await controller.fetchPage(1);
-    } catch (error) {
-        isLoading.value = false;
+
+    function loadMore() {
+        fetchPage((pagination.value?.page ?? 1) + 1, true);
     }
-});
+
+    // Debounced so a keystroke isn't a request; always back to page 1, since the result set changes.
+    let filterTimer: ReturnType<typeof setTimeout> | undefined;
+    watch(filter, () => {
+        clearTimeout(filterTimer);
+        filterTimer = setTimeout(() => fetchPage(1), 300);
+    });
+
+    onBeforeUnmount(() => clearTimeout(filterTimer));
+
+    onMounted(() => fetchPage(1));
 </script>
diff --git a/frontend/pages/settings/preferences.vue b/frontend/pages/settings/preferences.vue
index 5a4cc8b4..574a18f5 100644
--- a/frontend/pages/settings/preferences.vue
+++ b/frontend/pages/settings/preferences.vue
@@ -1,94 +1,105 @@
 <template>
-  <div class="mx-auto max-w-5xl px-4 py-8 sm:px-6">
-    <!-- Page header -->
-    <header class="mb-8">
-      <p class="text-[11px] font-black uppercase tracking-[0.2em] text-primary/60">{{ t('preferences.eyebrow') }}</p>
-      <h1 class="mt-1 text-3xl font-black tracking-tight text-gray-900 dark:text-white">{{ t('preferences.title') }}</h1>
-      <p class="mt-2 max-w-xl text-gray-500 dark:text-gray-400">{{ t('preferences.subtitle') }}</p>
-    </header>
+    <div class="flex flex-col gap-5">
+        <!--
+            Segmented tabs. The design draws Review settings as a single page, but Smart Review and
+            the Pool are two independent domains with their own save affordances, and PoolSettings
+            is still a pilotui screen awaiting its own PR — so the tab row stays and only the Smart
+            Review side is migrated. Each section owns its page header, which is where the design
+            puts the save controls.
+        -->
+        <div class="inline-flex w-fit gap-1 rounded-st-pill bg-st-ink-100 p-1">
+            <button
+                v-for="tab in tabs"
+                :key="tab.key"
+                type="button"
+                class="st-focus-ring duration-fast inline-flex items-center gap-2 rounded-st-pill px-5 py-2 text-st-sm font-extrabold transition ease-out"
+                :class="active === tab.key ? 'bg-st-card text-st-primary shadow-st-sm' : 'text-st-muted hover:text-st-body'"
+                @click="active = tab.key"
+            >
+                <StIcon :name="tab.icon" :size="18" />
+                {{ tab.label }}
+            </button>
+        </div>
 
-    <!-- Segmented tabs: one domain at a time keeps the page calm and gives each -->
-    <!-- section its own save affordance. -->
-    <div class="mb-8 inline-flex rounded-2xl border border-gray-100 bg-gray-100/70 p-1 dark:border-gray-700 dark:bg-gray-800/60">
-      <button v-for="tab in tabs" :key="tab.key" type="button" @click="active = tab.key"
-        class="flex items-center gap-2 rounded-xl px-5 py-2.5 text-sm font-bold transition-all duration-200"
-        :class="active === tab.key
-          ? 'bg-white text-primary shadow-sm dark:bg-gray-900'
-          : 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'">
-        <Icon :name="tab.icon" class="!h-5 !w-5" />
-        {{ tab.label }}
-      </button>
-    </div>
+        <div v-if="loading" class="flex flex-col gap-5">
+            <div class="grid grid-cols-1 gap-[14px] sm:grid-cols-3">
+                <StSkeleton v-for="n in 3" :key="n" class="h-[84px]" />
+            </div>
+            <div class="flex flex-wrap items-start gap-5">
+                <div class="flex min-w-[288px] max-w-[328px] flex-[1_1_328px] flex-col gap-[14px]">
+                    <StSkeleton class="h-[470px]" />
+                    <StSkeleton class="h-[150px]" />
+                </div>
+                <div class="flex min-w-0 flex-[1_1_640px] flex-col gap-3">
+                    <StSkeleton v-for="n in 5" :key="n" class="h-[100px]" />
+                </div>
+            </div>
+        </div>
 
-    <!-- Loading -->
-    <div v-if="loading" class="flex justify-center py-20">
-      <div class="h-8 w-8 animate-spin rounded-full border-4 border-primary-500 border-t-transparent"></div>
+        <!-- Only the active section is mounted, so only its save bar shows. -->
+        <template v-else>
+            <LeitnerSettings v-if="active === 'review'" :stats="stats" @saved="onSaved" @reset="onReset" />
+            <PoolSettings v-else-if="active === 'pool'" :stats="stats" @saved="onSaved" />
+        </template>
     </div>
-
-    <!-- Sections (only the active one is mounted, so only its save bar shows) -->
-    <template v-else>
-      <LeitnerSettings v-if="active === 'review'" :stats="stats" @saved="onSaved" @reset="onReset" />
-      <PoolSettings v-else-if="active === 'pool'" :stats="stats" @saved="onSaved" />
-    </template>
-  </div>
 </template>
 
 <script lang="ts" setup>
-import { Icon } from 'pilotui/elements';
-import LeitnerSettings from '~/components/Leitner/LeitnerSettings.vue';
-import PoolSettings from '~/components/Pool/PoolSettings.vue';
-import { functionProvider } from '@modular-rest/client';
-import { useProfileStore } from '~/stores/profile';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
+    import { StIcon, StSkeleton } from 'subturtle-ui';
+    import LeitnerSettings from '~/components/Leitner/LeitnerSettings.vue';
+    import PoolSettings from '~/components/Pool/PoolSettings.vue';
+    import { functionProvider } from '@modular-rest/client';
+    import { useProfileStore } from '~/stores/profile';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+    const { t } = useI18n();
 
-definePageMeta({
-  layout: 'default',
-  title: 'Preferences',
-  middleware: ['auth'],
-});
-
-const active = ref<'review' | 'pool'>('review');
+    definePageMeta({
+        layout: 'default',
+        title: 'Preferences',
+        middleware: ['auth'],
+    });
 
-const tabs = computed(() => [
-  { key: 'review' as const, label: t('smart_review.title'), icon: 'iconify solar--card-2-bold-duotone' },
-  { key: 'pool' as const, label: t('pool.tab'), icon: 'iconify solar--inbox-in-bold-duotone' },
-]);
+    const active = ref<'review' | 'pool'>('review');
 
-const stats = ref<any>(null);
-const loading = ref(true);
-const profileStore = useProfileStore();
-const { authUser } = storeToRefs(profileStore);
+    const tabs = computed(() => [
+        { key: 'review' as const, label: t('smart_review.title'), icon: 'solar:card-2-bold-duotone' },
+        { key: 'pool' as const, label: t('pool.tab'), icon: 'solar:inbox-in-bold-duotone' },
+    ]);
 
-onMounted(() => {
-  fetchStats();
-});
+    const stats = ref<any>(null);
+    const loading = ref(true);
+    const profileStore = useProfileStore();
+    const { authUser } = storeToRefs(profileStore);
 
-async function fetchStats() {
-  loading.value = true;
-  try {
-    const userId = authUser.value?.id;
-    const res: any = await functionProvider.run({
-      name: 'get-stats',
-      args: { userId },
+    onMounted(() => {
+        fetchStats();
     });
-    if (res) {
-      stats.value = res;
+
+    async function fetchStats() {
+        loading.value = true;
+        try {
+            const userId = authUser.value?.id;
+            const res: any = await functionProvider.run({
+                name: 'get-stats',
+                args: { userId },
+            });
+            if (res) {
+                stats.value = res;
+            }
+        } catch (e) {
+            console.error(e);
+        } finally {
+            loading.value = false;
+        }
     }
-  } catch (e) {
-    console.error(e);
-  } finally {
-    loading.value = false;
-  }
-}
 
-function onSaved() {
-  fetchStats();
-}
+    function onSaved() {
+        fetchStats();
+    }
 
-function onReset() {
-  fetchStats(); // Reload empty state
-}
+    function onReset() {
+        fetchStats(); // Reload empty state
+    }
 </script>
diff --git a/frontend/plugins/theme.client.ts b/frontend/plugins/theme.client.ts
new file mode 100644
index 00000000..7b57778f
--- /dev/null
+++ b/frontend/plugins/theme.client.ts
@@ -0,0 +1,49 @@
+import { useAppStore } from 'pilotui/store';
+
+/**
+ * Session-wide theme side effects. `@nuxtjs/color-mode` owns the preference and the
+ * `light`/`dark` class on <html>; this plugin adds the two things it does not do.
+ *
+ * 1. Suppress transitions for the frame in which the palette swaps, so the page repaints in the
+ *    new theme instead of cross-fading every colour independently.
+ * 2. Mirror the preference into pilotui's app store, so the screens still on pilotui follow the
+ *    same switch. They keep their own `dark:` styling — this only keeps the two in sync.
+ *
+ * Both live here rather than in a composable because they must be registered exactly once, before
+ * any component can flip the theme.
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+    const colorMode = useColorMode();
+
+    /**
+     * `flush: 'sync'` matters. The colour-mode plugin registers its own watcher on the same source
+     * to swap the class on <html>; ours has to have already added `theme-switching` by the time
+     * that runs, and a sync watcher is the only flush that is guaranteed to. It also covers both
+     * ways the resolved value can change — a click on the Appearance row, and an OS-level
+     * `prefers-color-scheme` flip while the preference is `system` (which the module's own
+     * matchMedia listener applies directly to `value`, never touching `preference`).
+     */
+    watch(
+        () => colorMode.value,
+        () => {
+            const root = document.documentElement;
+            root.classList.add('theme-switching');
+            // Force a style recalculation so the suppression is in effect for the swap itself
+            // rather than being coalesced with the removal below.
+            void window.getComputedStyle(root).opacity;
+            requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove('theme-switching')));
+        },
+        { flush: 'sync' }
+    );
+
+    // Pinia is ready by app:mounted, and so is pilotui's <App> — before that, writing to the store
+    // races with <App>'s own restore-from-localStorage on mount and the value can be clobbered.
+    nuxtApp.hook('app:mounted', () => {
+        const appStore = useAppStore();
+        // Watches the RESOLVED value as well as the preference. pilotui resolves `system` against
+        // the media query itself, at the moment toggleTheme() is called — so an OS-level flip, which
+        // leaves `preference` on `system` and only moves `value`, has to re-poke it or the pilotui
+        // screens would stay on the old palette while the `st-` surfaces flipped.
+        watch([() => colorMode.preference, () => colorMode.value], () => appStore.toggleTheme(colorMode.preference), { immediate: true });
+    });
+});
diff --git a/frontend/stores/profile.ts b/frontend/stores/profile.ts
index b21ae8bd..96c15f8c 100644
--- a/frontend/stores/profile.ts
+++ b/frontend/stores/profile.ts
@@ -174,9 +174,11 @@ export const useProfileStore = defineStore('profile', () => {
                 const gPicture = profile?.gPicture;
                 const knownFailed = !!(userId && gPicture && isPictureMarkedFailed(userId, gPicture));
 
-                // If we already know this URL is broken, strip it before exposing the profile
-                // to Vue — that way ProfileButton never renders the doomed <img :src>.
-                userDetail.value = knownFailed ? { ...profile, gPicture: '' } : profile;
+                // `knownFailed` means the CANVAS CACHE of this URL failed before, not that the URL
+                // is undisplayable — see the note in the catch below. So the profile is exposed
+                // with gPicture intact either way, and only the re-encode is skipped; StAvatar
+                // falls back to initials if the <img> itself actually errors.
+                userDetail.value = profile;
 
                 if (userId && gPicture && !knownFailed) {
                     const cached = readCachedPicture(userId);
@@ -187,13 +189,18 @@ export const useProfileStore = defineStore('profile', () => {
                         // UI falls back to gPicture URL until the encode completes.
                         profilePictureBase64.value = '';
                         downloadAndCachePicture(userId, gPicture).catch(() => {
-                            // The CORS image fetch failed — remember this URL is broken so we
-                            // don't keep retrying, and drop gPicture from local state so
-                            // renderers fall through to the placeholder.
+                            // The caching fetch failed — remember that, so we don't re-attempt the
+                            // encode on every load.
+                            //
+                            // But do NOT strip gPicture. This path draws the image to a canvas and
+                            // calls toDataURL(), which is the only reason it needs `crossOrigin`,
+                            // and so the usual failure here is a CORS one. A plain <img src> needs
+                            // no CORS whatsoever — the browser renders that URL fine. Dropping
+                            // gPicture on a CORS error therefore hid a perfectly displayable
+                            // avatar behind the initials fallback. A genuinely dead URL is caught
+                            // where it belongs, by the <img> itself: StAvatar falls back to
+                            // initials on its error event.
                             markPictureFailed(userId, gPicture);
-                            if (userDetail.value && userDetail.value.gPicture === gPicture) {
-                                userDetail.value = { ...userDetail.value, gPicture: '' };
-                            }
                         });
                     }
                 } else {
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 8e4b31a0..35dab2d7 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -17,7 +17,7 @@ module.exports = {
         './composables/**/*.{js,ts}',
         './nuxt.config.{js,ts}',
     ],
-    darkMode: 'class',
+    darkMode: ['selector', '[data-theme="dark"]'],
     theme: {
         container: {
             center: true,
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 32b76673..4140fcf9 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1346,6 +1346,33 @@
     unimport "^4.1.2"
     untyped "^2.0.0"
 
+"@nuxt/kit@^4.4.6":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-4.5.2.tgz#fa338b169d14d9e66f973ded551d2376edb72398"
+  integrity sha512-l66LU9DcJYjmNwqwAj2I5UGRrUbnG2DOKGChnN70zIGtn0eq/z87gi/FRgha6eMb9/FmB1PFHgtx6PWVml1C2Q==
+  dependencies:
+    c12 "^3.3.4"
+    consola "^3.4.2"
+    defu "^6.1.7"
+    destr "^2.0.5"
+    errx "^0.1.2"
+    exsolve "^1.1.1"
+    ignore "^7.0.6"
+    jiti "^2.7.0"
+    klona "^2.0.6"
+    mlly "^1.8.2"
+    nostics "^1.2.0"
+    ohash "^2.0.11"
+    pathe "^2.0.3"
+    pkg-types "^2.3.1"
+    rc9 "^3.0.1"
+    scule "^1.3.0"
+    tinyglobby "^0.2.17"
+    ufo "^1.6.4"
+    unctx "^3.0.0"
+    untyped "^2.0.0"
+    verkit "^0.3.1"
+
 "@nuxt/schema@3.13.2":
   version "3.13.2"
   resolved "https://registry.npmjs.org/@nuxt/schema/-/schema-3.13.2.tgz"
@@ -1424,6 +1451,17 @@
     vite-plugin-checker "^0.8.0"
     vue-bundle-renderer "^2.1.0"
 
+"@nuxtjs/color-mode@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/color-mode/-/color-mode-4.0.1.tgz#fd06ba8dac561278ec62261267fce95651260bf6"
+  integrity sha512-eiA7hWXi5zNHaYKyJFCGF6i0wFZtuvR7KDXZ6jiSvwxjCpRFwphrw0MOSmNfArTSSsT1wpW+/2H92cejeVfUlg==
+  dependencies:
+    "@nuxt/kit" "^4.4.6"
+    exsolve "^1.0.8"
+    pathe "^2.0.3"
+    pkg-types "^2.3.1"
+    semver "^7.8.1"
+
 "@nuxtjs/i18n@^8.0.0-beta.9":
   version "8.5.6"
   resolved "https://registry.npmjs.org/@nuxtjs/i18n/-/i18n-8.5.6.tgz"
@@ -2898,6 +2936,11 @@ acorn@^8.14.0, acorn@^8.5.0, acorn@^8.6.0, acorn@^8.8.2, acorn@^8.9.0:
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz"
   integrity sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==
 
+acorn@^8.16.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.18.0.tgz#4faf01b2d6d326bfeed97aea1f52220b5f4c1940"
+  integrity sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==
+
 agent-base@9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-9.0.0.tgz#ec9efb08314e1e75b0852d74aabf9a387f99834e"
@@ -3350,6 +3393,24 @@ c12@^3.0.2:
     pkg-types "^2.0.0"
     rc9 "^2.1.2"
 
+c12@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/c12/-/c12-3.3.4.tgz#1253a5faf8b61244884d42459b4a6412571fe9f3"
+  integrity sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==
+  dependencies:
+    chokidar "^5.0.0"
+    confbox "^0.2.4"
+    defu "^6.1.6"
+    dotenv "^17.3.1"
+    exsolve "^1.0.8"
+    giget "^3.2.0"
+    jiti "^2.6.1"
+    ohash "^2.0.11"
+    pathe "^2.0.3"
+    perfect-debounce "^2.1.0"
+    pkg-types "^2.3.0"
+    rc9 "^3.0.1"
+
 cac@^6.7.14:
   version "6.7.14"
   resolved "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz"
@@ -3496,6 +3557,13 @@ chokidar@^4.0.3:
   dependencies:
     readdirp "^4.0.1"
 
+chokidar@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-5.0.0.tgz#949c126a9238a80792be9a0265934f098af369a5"
+  integrity sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==
+  dependencies:
+    readdirp "^5.0.0"
+
 chownr@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz"
@@ -3732,6 +3800,11 @@ confbox@^0.2.1:
   resolved "https://registry.npmjs.org/confbox/-/confbox-0.2.1.tgz"
   integrity sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==
 
+confbox@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.2.4.tgz#592e7be71f882a4a874e3c88f0ac1ef6f7da1ce5"
+  integrity sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==
+
 config-chain@^1.1.11, config-chain@^1.1.13:
   version "1.1.13"
   resolved "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz"
@@ -4196,7 +4269,7 @@ define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defu@^6.1.2, defu@^6.1.4, defu@^6.1.6:
+defu@^6.1.2, defu@^6.1.4, defu@^6.1.6, defu@^6.1.7:
   version "6.1.7"
   resolved "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz"
   integrity sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==
@@ -4352,6 +4425,11 @@ dotenv@^16.4.5, dotenv@^16.4.7:
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz"
   integrity sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==
 
+dotenv@^17.3.1:
+  version "17.4.2"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-17.4.2.tgz#c07e54a746e11eba021dd9e1047ced5afdc1c034"
+  integrity sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==
+
 dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz"
@@ -4498,6 +4576,11 @@ errx@^0.1.0:
   resolved "https://registry.npmjs.org/errx/-/errx-0.1.0.tgz"
   integrity sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==
 
+errx@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/errx/-/errx-0.1.2.tgz#cd870178afe9072700d8486af4eb3c358892f40c"
+  integrity sha512-chfpPHmCerdo/rXr/nNvPZRkV4WwDRwzwnsJ0Uzz3tVi8Z41tDctRjduYy1138ii77AFlts1qvWtX3g/Acg91Q==
+
 es-define-property@^1.0.0, es-define-property@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz"
@@ -4805,6 +4888,11 @@ exsolve@^1.0.0, exsolve@^1.0.1, exsolve@^1.0.2, exsolve@^1.0.4:
   resolved "https://registry.npmjs.org/exsolve/-/exsolve-1.0.4.tgz"
   integrity sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==
 
+exsolve@^1.0.8, exsolve@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exsolve/-/exsolve-1.1.1.tgz#c055418255459b6ecde4e59de0060a3e97bc7572"
+  integrity sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==
+
 extend@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
@@ -5157,6 +5245,11 @@ giget@^2.0.0:
     nypm "^0.6.0"
     pathe "^2.0.3"
 
+giget@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/giget/-/giget-3.3.1.tgz#4a4e610cd112e5dc478c6035986fdc19c76dad73"
+  integrity sha512-r+mvuDjrjMpsdw46Kmeydb8bdHm7wOKw8wNBtTndkjbPjgAp5oUJUxRE76wZFknxIPokfWvep2qSXK37aXE6zg==
+
 git-log-parser@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/git-log-parser/-/git-log-parser-1.2.1.tgz#44355787b37af7560dcc4ddc01cb53b5d139cc28"
@@ -5509,6 +5602,11 @@ ignore@^7.0.3:
   resolved "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz"
   integrity sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==
 
+ignore@^7.0.6:
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-7.0.8.tgz#84d8466899958458ee30b4190c839ee1446cc88d"
+  integrity sha512-YYNsSlXBjMk92SKnkwvB5LOVSa6OznlFUGcsvrFgNJbJCd0M1XKeFVRc8ZByeCqz32FivYNHJVooLmdqrmvp/Q==
+
 image-meta@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/image-meta/-/image-meta-0.2.1.tgz"
@@ -5997,6 +6095,11 @@ jiti@^2.1.2, jiti@^2.4.1, jiti@^2.4.2:
   resolved "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz"
   integrity sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==
 
+jiti@^2.6.1, jiti@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.7.0.tgz#974228f2f4ca2bc21885a1797b45fea68e950c64"
+  integrity sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==
+
 js-beautify@^1.14.9:
   version "1.15.4"
   resolved "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.4.tgz"
@@ -6837,6 +6940,16 @@ mlly@^1.2.0, mlly@^1.3.0, mlly@^1.6.1, mlly@^1.7.1, mlly@^1.7.3, mlly@^1.7.4:
     pkg-types "^1.3.0"
     ufo "^1.5.4"
 
+mlly@^1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.8.2.tgz#e7f7919a82d13b174405613117249a3f449d78bb"
+  integrity sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==
+  dependencies:
+    acorn "^8.16.0"
+    pathe "^2.0.3"
+    pkg-types "^1.3.1"
+    ufo "^1.6.3"
+
 mrmime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz"
@@ -7122,6 +7235,11 @@ normalize-url@^9.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-9.0.1.tgz#c8fe3b4b045074dbe872a357ebc4b7e19d7fb043"
   integrity sha512-ARftfC5HdUNu9jJeL8pHj8debUIHA2b91FizCoMzY4lG6dDX13jdvTK0TBe24IBDRf2HvJSzzwEPvmbkQWHRSg==
 
+nostics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/nostics/-/nostics-1.2.0.tgz#1362df6de2ca8456b521914501abf6c52c4d7fb5"
+  integrity sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==
+
 npm-audit-report@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-7.0.0.tgz#c384ac4afede55f21b30778202ad568e54644c35"
@@ -7819,6 +7937,11 @@ perfect-debounce@^1.0.0:
   resolved "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz"
   integrity sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==
 
+perfect-debounce@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/perfect-debounce/-/perfect-debounce-2.1.0.tgz#e7078e38f231cb191855c3136a4423aef725d261"
+  integrity sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==
+
 perfect-scrollbar@^1.5.5:
   version "1.5.6"
   resolved "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.6.tgz"
@@ -7922,6 +8045,15 @@ pkg-types@^2.0.0, pkg-types@^2.0.1, pkg-types@^2.1.0:
     exsolve "^1.0.1"
     pathe "^2.0.3"
 
+pkg-types@^2.3.0, pkg-types@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-2.3.1.tgz#fa27ed0940efcf40bba453b0e5cab41217b0d442"
+  integrity sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==
+  dependencies:
+    confbox "^0.2.4"
+    exsolve "^1.0.8"
+    pathe "^2.0.3"
+
 playwright-core@1.54.1:
   version "1.54.1"
   resolved "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.1.tgz"
@@ -8635,7 +8767,7 @@ rc9@^2.1.2:
     defu "^6.1.4"
     destr "^2.0.3"
 
-rc9@^3.0.0:
+rc9@^3.0.0, rc9@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz"
   integrity sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==
@@ -8758,6 +8890,11 @@ readdirp@^4.0.1:
   resolved "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz"
   integrity sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==
 
+readdirp@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-5.1.1.tgz#520bca06f9d1ae1b96cc0800dbe84b983d19422c"
+  integrity sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
@@ -9162,6 +9299,11 @@ semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.6.3, semve
   resolved "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz"
   integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
 
+semver@^7.8.1:
+  version "7.8.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.8.5.tgz#39b646037dd50c14fb451e7e4cac58ed8b863f69"
+  integrity sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==
+
 send@0.19.0:
   version "0.19.0"
   resolved "https://registry.npmjs.org/send/-/send-0.19.0.tgz"
@@ -9995,7 +10137,7 @@ tinyglobby@^0.2.10, tinyglobby@^0.2.11:
     fdir "^6.4.3"
     picomatch "^4.0.2"
 
-tinyglobby@^0.2.12, tinyglobby@^0.2.14:
+tinyglobby@^0.2.12, tinyglobby@^0.2.14, tinyglobby@^0.2.17:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.17.tgz#562a9a6c9eb2b3b123d39719f9af5bb44fcd7631"
   integrity sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==
@@ -10169,6 +10311,11 @@ ufo@^1.1.2, ufo@^1.3.1, ufo@^1.5.4:
   resolved "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz"
   integrity sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==
 
+ufo@^1.6.3, ufo@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.6.4.tgz#7a8fb875fcc6382d2c7d0b3692738b0500a92467"
+  integrity sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==
+
 uglify-js@^3.1.4:
   version "3.19.3"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.19.3.tgz#82315e9bbc6f2b25888858acd1fff8441035b77f"
@@ -10194,6 +10341,11 @@ unctx@^2.3.1, unctx@^2.4.1:
     magic-string "^0.30.17"
     unplugin "^2.1.0"
 
+unctx@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/unctx/-/unctx-3.0.1.tgz#16dc56fc256a2bf4df485d9f38866634109058a1"
+  integrity sha512-5RAt2etv7g362RXyd33R82gm9u/kbtQlpoaOs9Bgm4E32GRMJ0xjbZyvdxUTmiuHk3V1IQb1aUNrp5IWY+JaWw==
+
 undici-types@~6.20.0:
   version "6.20.0"
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz"
@@ -10489,6 +10641,11 @@ vee-validate@^4.15.0:
     "@vue/devtools-api" "^7.5.2"
     type-fest "^4.8.3"
 
+verkit@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/verkit/-/verkit-0.3.2.tgz#0511ea63310551b62a20c010aa820350c5c350c6"
+  integrity sha512-zj/ob3UsvJGN0whEAKFp53REA5X66hvffVqoCtVQAakJKnKlH+/PcOfMoFwIG/o4rElqLv/ycAFlx8ZlXUorCg==
+
 vite-hot-client@^0.2.4:
   version "0.2.4"
   resolved "https://registry.npmjs.org/vite-hot-client/-/vite-hot-client-0.2.4.tgz"
diff --git a/ui/README.md b/ui/README.md
index 9f45d85f..b0fc6a6b 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -72,9 +72,29 @@ composes them as `rgb(var(--token) / <alpha-value>)`. That is what makes opacity
 (`st-bg-primary/5`, the ambient background blobs) and what a dark theme will hook into. Write raw
 CSS against them as `rgb(var(--rose-500))`.
 
-`:root.dark` is scaffolded and empty. The design system ships light values only, and the product
-keeps its theme switcher, so dark currently leaves anything built on this library in its light
-palette. Adding dark means redefining the semantic aliases there — no component should change.
+`src/styles/theme-tokens.css` is the dark half, imported straight after `tokens.css`. It re-points
+the **same token names** under `html.dark`, so a component already written against
+`var(--surface-card)` / `var(--text-body)` / `var(--ink-100)` themes itself with no edits — that is
+the whole mechanism, and it is why nothing in `src/` carries a `dark:` variant.
+
+Two flips in that file are load-bearing, and both look wrong until you know the role they protect:
+
+- **The `--ink-*` ramp inverts** — `--ink-50` is the darkest step in dark. Components use `ink-100`
+  as a hover wash and `ink-150`/`ink-200` as hairlines; inverting is what preserves those roles.
+  The corollary is that `ink-800`/`ink-900` can no longer be used as a *dark fill* (it would become
+  a light fill); `bg-inverse` + `text-page` is the pair for that.
+- **`--rose-700` / `--jade-700` (and the `-600` steps) become light tints** — they are used as
+  "text on a soft brand tint", so they flip to stay legible.
+
+`--white` is deliberately *not* re-pointed. It means "ink on a rose CTA". Never use it as a
+surface; use `--surface-card`.
+
+The theme is applied as **`data-theme="light" | "dark"` on `<html>`** (both Tailwind builds use
+`darkMode: ['selector', '[data-theme="dark"]']`).
+
+Consumers must also add `class="theme-switching"` to `<html>` for the one frame around a change —
+the stylesheet kills transitions while it is set, otherwise the whole page cross-fades. See the
+dashboard's `plugins/theme.client.ts`.
 
 ### Icons
 
@@ -102,13 +122,45 @@ yarn dev     # rebuild on change, for a linked consumer
 
 | Group | |
 | --- | --- |
-| Shell | `StAppShell`, `StSidebarNav` |
-| Elements | `StButton`, `StIconButton`, `StCard`, `StBadge`, `StAvatar`, `StEmptyState`, `StSkeleton`, `StIcon` |
+| Shell | `StAppShell`, `StSidebarNav`, `StProfileMenu` |
+| Elements | `StButton`, `StIconButton`, `StCard`, `StBadge`, `StAvatar`, `StEmptyState`, `StSkeleton`, `StThemeSwitcher`, `StIcon` |
 | Brand | `StStatTile`, `StBundleCard` |
 
-This is the set the app shell and the Progress screen need. The rest of the design system
-(`Input`, `Tag`, `Switch`, `ProgressBar`, `SegmentedControl`, `Tabs`, `Modal`, `Toast`,
-`PhraseCard`, `Flashcard`, `LevelPip`, `PlanCard`) lands as each remaining screen is migrated.
+This is the set the app shell, the Progress screen and the Login screen need. The rest of the
+design system (`Input`, `Tag`, `Switch`, `ProgressBar`, `SegmentedControl`, `Tabs`, `Modal`,
+`Toast`, `PhraseCard`, `Flashcard`, `LevelPip`, `PlanCard`) lands as each remaining screen is
+migrated.
+
+### `StThemeSwitcher`
+
+One round icon button that cycles Light → Dark → System. It can run standalone — persisting to
+`persistKey` and writing `data-theme` itself — or controlled via `v-model` with `persist-key=""`
+and `:apply="false"`, which is what a host that already owns the theme (the dashboard, through
+`@nuxtjs/color-mode`) must pass so the two do not both write the attribute.
+
+`labels.aria` and `labels.resolved` are **formatters**, not patterns. Handing a translated pattern
+like `t('theme.aria')` over instead looks correct and silently isn't: vue-i18n interpolates the
+placeholders on the way out, so `{current}` / `{next}` arrive already blanked.
+
+Positioning it is done by a **wrapper element**, not by passing layout classes down. Its root
+carries `st-relative`, and `dist/style.css` loads after the host's own Tailwind, so an `absolute`
+passed as a fall-through class loses the specificity tie.
+
+### `StProfileMenu`
+
+The account dropdown, shared by the dashboard topbar and the extension popup. Two things about it
+are not stylistic preferences:
+
+- **The panel is teleported to `<body>` and positioned `fixed`** against the trigger rect,
+  re-placed on `resize` and on **capture-phase** `scroll` (so scrolling `StAppShell`'s inner
+  `<main>` counts). The topbar sets `backdrop-filter`, which bleeds its blur under an
+  absolutely-positioned descendant and washes the panel out. The design prototype hit this and
+  fixes it the same way.
+There is no Appearance row: the design system ships `StThemeSwitcher` as a dedicated topbar
+control, so the menu keeps its four rows.
+
+The component holds no router, store or i18n coupling — `items` is a plain array carrying the
+caller's own handlers, and every visible string comes in through `labels`.
 
 Three things were deliberately added rather than ported, because the source components are React
 files styled entirely with inline style objects and cannot express them: nav-item hover states,
diff --git a/ui/scripts/build-icons.mjs b/ui/scripts/build-icons.mjs
index f53d1d29..75401f28 100644
--- a/ui/scripts/build-icons.mjs
+++ b/ui/scripts/build-icons.mjs
@@ -18,36 +18,58 @@ import { fileURLToPath } from 'node:url';
 const here = dirname(fileURLToPath(import.meta.url));
 const root = resolve(here, '..');
 
-/** Every icon the shell, the Progress screen and the Login screen use. Keep sorted by set, then name. */
+/** Every icon the shell, the Progress screen, the Login screen and the profile menu use. Keep sorted by set, then name. */
 const ICONS = [
     'logos:google-icon',
     'solar:add-circle-bold',
+    'solar:alt-arrow-down-linear',
     'solar:alt-arrow-left-linear',
     'solar:alt-arrow-right-linear',
     'solar:arrow-down-bold',
     'solar:arrow-right-bold',
     'solar:arrow-right-linear',
     'solar:arrow-up-bold',
+    'solar:bolt-linear',
     'solar:bookmark-bold-duotone',
+    'solar:calendar-minimalistic-linear',
+    'solar:card-2-bold-duotone',
     'solar:chart-2-bold-duotone',
+    'solar:check-circle-bold',
+    'solar:check-circle-bold-duotone',
     'solar:clock-circle-bold',
+    'solar:clock-circle-bold-duotone',
+    'solar:close-circle-bold',
     'solar:crown-bold',
     'solar:crown-bold-duotone',
+    'solar:crown-linear',
     'solar:danger-triangle-bold',
+    'solar:diskette-bold',
     'solar:documents-bold-duotone',
     'solar:download-minimalistic-bold',
     'solar:fire-bold',
     'solar:fire-bold-duotone',
     'solar:hamburger-menu-linear',
     'solar:history-2-bold-duotone',
+    'solar:inbox-in-bold-duotone',
     'solar:layers-minimalistic-bold-duotone',
     'solar:lock-keyhole-minimalistic-bold-duotone',
+    'solar:logout-2-linear',
+    'solar:magnifer-linear',
     'solar:microphone-3-bold-duotone',
+    'solar:monitor-bold-duotone',
+    'solar:moon-bold-duotone',
     'solar:moon-sleep-bold-duotone',
+    'solar:notebook-bold',
     'solar:notebook-bold-duotone',
     'solar:play-bold',
+    'solar:refresh-bold',
+    'solar:restart-bold',
     'solar:rocket-2-bold-duotone',
     'solar:settings-bold-duotone',
+    'solar:settings-linear',
+    'solar:sun-2-bold-duotone',
+    'solar:tuning-2-bold',
+    'solar:user-linear',
 ];
 
 const setCache = new Map();
diff --git a/ui/src/brand/StBundleCard.vue b/ui/src/brand/StBundleCard.vue
index 7327c2f7..ccfdd5d4 100644
--- a/ui/src/brand/StBundleCard.vue
+++ b/ui/src/brand/StBundleCard.vue
@@ -22,8 +22,8 @@
             -->
             <span
                 v-if="sourceLang && targetLang"
-                class="st-relative st-inline-flex st-items-center st-gap-[6px] st-px-[10px] st-py-1 st-rounded-pill st-text-white st-text-2xs st-font-extrabold st-tracking-wide st-backdrop-blur-[4px]"
-                :class="$slots.cover ? 'st-bg-ink-950/55' : 'st-bg-white/25'"
+                class="st-relative st-inline-flex st-items-center st-gap-[6px] st-px-[10px] st-py-1 st-rounded-pill st-text-on-brand st-text-2xs st-font-extrabold st-tracking-wide st-backdrop-blur-[4px]"
+                :class="$slots.cover ? 'st-bg-overlay/55' : 'st-bg-on-brand/25'"
             >
                 {{ sourceLang }}
                 <StIcon name="solar:arrow-right-linear" :size="12" />
@@ -35,7 +35,7 @@
                 v-if="!$slots.cover"
                 name="solar:notebook-bold-duotone"
                 :size="40"
-                class="st-text-white/45"
+                class="st-text-on-brand/45"
             />
         </div>
 
diff --git a/ui/src/elements/StAvatar.vue b/ui/src/elements/StAvatar.vue
index 6a689f0c..234caf23 100644
--- a/ui/src/elements/StAvatar.vue
+++ b/ui/src/elements/StAvatar.vue
@@ -1,23 +1,23 @@
 <template>
     <span class="st-relative st-inline-flex st-shrink-0" :style="{ width: `${dim}px`, height: `${dim}px` }">
         <span
-            class="st-flex st-items-center st-justify-center st-overflow-hidden st-rounded-circle st-font-sans st-font-extrabold st-text-rose-700 st-border-[1.5px] st-border-white st-shadow-xs"
-            :class="src ? 'st-bg-ink-100' : 'st-bg-primary-soft'"
+            class="st-flex st-items-center st-justify-center st-overflow-hidden st-rounded-circle st-font-sans st-font-extrabold st-text-rose-700 st-border-[1.5px] st-border-card st-shadow-xs"
+            :class="showImage ? 'st-bg-ink-100' : 'st-bg-primary-soft'"
             :style="{ width: `${dim}px`, height: `${dim}px`, fontSize: `${dim * 0.38}px` }"
         >
-            <img v-if="src" :src="src" :alt="name" class="st-w-full st-h-full st-object-cover" />
+            <img v-if="showImage" :src="src" :alt="name" class="st-w-full st-h-full st-object-cover" @error="broken = true" />
             <template v-else>{{ initials }}</template>
         </span>
         <span
             v-if="online"
-            class="st-absolute st-right-0 st-bottom-0 st-rounded-circle st-bg-accent st-border-2 st-border-white"
+            class="st-absolute st-right-0 st-bottom-0 st-rounded-circle st-bg-accent st-border-2 st-border-card"
             :style="{ width: `${dim * 0.28}px`, height: `${dim * 0.28}px` }"
         />
     </span>
 </template>
 
 <script setup lang="ts">
-    import { computed } from 'vue';
+    import { computed, ref, watch } from 'vue';
 
     const props = withDefaults(
         defineProps<{
@@ -33,6 +33,19 @@
 
     const dim = computed(() => ({ xs: 28, sm: 36, md: 44, lg: 56, xl: 72 })[props.size]);
 
+    /**
+     * A `src` that fails to load falls back to the initials rather than leaving a broken image.
+     * This is the only place that can tell a genuinely dead avatar URL from one a caller merely
+     * could not pre-cache, so callers should pass the URL and let this decide. Reset when `src`
+     * changes, so a later working URL is not suppressed by an earlier failure.
+     */
+    const broken = ref(false);
+    watch(
+        () => props.src,
+        () => (broken.value = false)
+    );
+    const showImage = computed(() => !!props.src && !broken.value);
+
     /** First letter of each of the first two words: "Somi Park" -> "SP". */
     const initials = computed(() =>
         props.name
diff --git a/ui/src/elements/StBadge.vue b/ui/src/elements/StBadge.vue
index 49b7c8f3..d326c42a 100644
--- a/ui/src/elements/StBadge.vue
+++ b/ui/src/elements/StBadge.vue
@@ -34,12 +34,14 @@
     };
 
     const SOLID: Record<BadgeColor, string> = {
-        primary: 'st-bg-primary st-text-white',
-        accent: 'st-bg-accent st-text-white',
-        neutral: 'st-bg-ink-800 st-text-white',
-        warning: 'st-bg-warning st-text-white',
-        danger: 'st-bg-danger st-text-white',
-        info: 'st-bg-info st-text-white',
+        primary: 'st-bg-primary st-text-on-brand',
+        accent: 'st-bg-accent st-text-on-brand',
+        // `bg-inverse`, not `bg-ink-800`: the ink ramp inverts in dark, so an ink-800 chip
+        // with white text would become a near-white chip with white text.
+        neutral: 'st-bg-inverse st-text-page',
+        warning: 'st-bg-warning st-text-on-brand',
+        danger: 'st-bg-danger st-text-on-brand',
+        info: 'st-bg-info st-text-on-brand',
     };
 
     const tone = computed(() => (props.solid ? SOLID : SOFT)[props.color]);
diff --git a/ui/src/elements/StButton.vue b/ui/src/elements/StButton.vue
index 87877566..b55bca79 100644
--- a/ui/src/elements/StButton.vue
+++ b/ui/src/elements/StButton.vue
@@ -56,8 +56,10 @@
         solid: {
             primary: 'st-bg-primary hover:st-bg-primary-hover st-text-primary-on st-border-[1.5px] st-border-transparent st-shadow-primary',
             accent: 'st-bg-accent hover:st-bg-accent-hover st-text-accent-on st-border-[1.5px] st-border-transparent st-shadow-accent',
-            neutral: 'st-bg-ink-900 hover:st-bg-ink-950 st-text-white st-border-[1.5px] st-border-transparent st-shadow-sm',
-            danger: 'st-bg-danger hover:st-bg-red-600 st-text-white st-border-[1.5px] st-border-transparent st-shadow-sm',
+            // `bg-inverse`, not the ink ramp: ink inverts in dark, so an ink-900 fill with
+            // white text would become a near-white fill with white text.
+            neutral: 'st-bg-inverse hover:st-opacity-90 st-text-page st-border-[1.5px] st-border-transparent st-shadow-sm',
+            danger: 'st-bg-danger hover:st-bg-red-600 st-text-on-brand st-border-[1.5px] st-border-transparent st-shadow-sm',
         },
         soft: {
             primary: 'st-bg-primary-tint hover:st-bg-primary-soft st-text-rose-700 st-border-[1.5px] st-border-transparent',
diff --git a/ui/src/elements/StIconButton.vue b/ui/src/elements/StIconButton.vue
index 42ee1207..9e2b9b66 100644
--- a/ui/src/elements/StIconButton.vue
+++ b/ui/src/elements/StIconButton.vue
@@ -48,8 +48,9 @@
         solid: {
             primary: 'st-bg-primary hover:st-bg-primary-hover st-text-primary-on',
             accent: 'st-bg-accent hover:st-bg-accent-hover st-text-accent-on',
-            neutral: 'st-bg-ink-900 hover:st-bg-ink-950 st-text-white',
-            danger: 'st-bg-danger hover:st-bg-red-600 st-text-white',
+            // See StButton: the ink ramp inverts in dark, so this pairs with --surface-page.
+            neutral: 'st-bg-inverse hover:st-opacity-90 st-text-page',
+            danger: 'st-bg-danger hover:st-bg-red-600 st-text-on-brand',
         },
         soft: {
             primary: 'st-bg-primary-tint hover:st-bg-primary-soft st-text-rose-600',
diff --git a/ui/src/elements/StInput.vue b/ui/src/elements/StInput.vue
new file mode 100644
index 00000000..2c5e4ebc
--- /dev/null
+++ b/ui/src/elements/StInput.vue
@@ -0,0 +1,73 @@
+<template>
+    <label :for="id" class="st-block st-font-sans" :class="$attrs.class" :style="$attrs.style as any">
+        <span v-if="label" class="st-block st-mb-[6px] st-text-sm st-font-bold st-text-body">{{ label }}</span>
+
+        <!--
+            The ring lives on the WRAPPER, not the input: the icon sits inside the same box, so the
+            focus treatment has to surround both. focus-within does that without a JS focus flag
+            (the design's React version keeps one in state only because inline styles can't express
+            the variant).
+        -->
+        <span
+            class="st-flex st-items-center st-gap-[10px] st-h-control-md st-px-[14px] st-rounded-md st-border-[1.5px] st-transition st-duration-fast st-ease-out"
+            :class="[
+                disabled ? 'st-bg-ink-100' : 'st-bg-card',
+                error ? 'st-border-danger' : 'st-border-default',
+                error ? '' : 'focus-within:st-border-primary',
+                'focus-within:st-shadow-[0_0_0_3px_var(--ring-focus)]',
+            ]"
+        >
+            <StIcon v-if="icon" :name="icon" :size="18" class="st-flex-none st-text-faint" />
+            <input
+                :id="id"
+                :type="type"
+                :value="modelValue"
+                :placeholder="placeholder"
+                :disabled="disabled"
+                class="st-flex-1 st-min-w-0 st-border-none st-bg-transparent st-font-sans st-text-sm st-font-medium st-text-strong st-outline-none placeholder:st-text-faint disabled:st-cursor-not-allowed"
+                v-bind="inputAttrs"
+                @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+            />
+        </span>
+
+        <span v-if="error || hint" class="st-block st-mt-[6px] st-text-xs st-font-semibold" :class="error ? 'st-text-danger' : 'st-text-muted'">
+            {{ error || hint }}
+        </span>
+    </label>
+</template>
+
+<script setup lang="ts">
+    import { computed, useAttrs } from 'vue';
+    import StIcon from '../icon/StIcon.vue';
+
+    // Attributes land on the <input>, not the <label> wrapper — so `autofocus`, `maxlength`,
+    // `aria-*` and friends reach the control the caller means. `class` and `style` are the
+    // exception: those size and place the whole field, so they stay on the wrapper.
+    defineOptions({ inheritAttrs: false });
+
+    const attrs = useAttrs();
+    const inputAttrs = computed(() => {
+        const { class: _class, style: _style, ...rest } = attrs;
+        return rest;
+    });
+
+    withDefaults(
+        defineProps<{
+            modelValue?: string | number;
+            label?: string;
+            placeholder?: string;
+            /** Leading icon, an Iconify name. */
+            icon?: string;
+            /** Helper text below the field. Replaced by `error` when that is set. */
+            hint?: string;
+            /** Error message. Also turns the border and the helper line red. */
+            error?: string;
+            type?: string;
+            disabled?: boolean;
+            id?: string;
+        }>(),
+        { type: 'text' }
+    );
+
+    defineEmits<{ 'update:modelValue': [string] }>();
+</script>
diff --git a/ui/src/elements/StModal.vue b/ui/src/elements/StModal.vue
new file mode 100644
index 00000000..f4b6b8fe
--- /dev/null
+++ b/ui/src/elements/StModal.vue
@@ -0,0 +1,77 @@
+<template>
+    <!--
+        Teleported to <body> and positioned `fixed`, for the same reason StProfileMenu's panel is:
+        an ancestor with `backdrop-filter` (the app shell's topbar) or any transform creates a
+        containing block that an in-tree overlay cannot escape. The design prototype uses
+        `position: absolute` because it renders inside a fixed-size artboard, not a page.
+    -->
+    <Teleport to="body">
+        <div
+            v-if="open"
+            class="st-fixed st-inset-0 st-z-modal st-flex st-items-center st-justify-center st-box-border st-p-6 st-bg-overlay/45 st-backdrop-blur-[3px] st-font-sans"
+            @click="dismissible && $emit('close')"
+        >
+            <div
+                role="dialog"
+                aria-modal="true"
+                :aria-label="title"
+                class="st-relative st-w-full st-max-h-full st-box-border st-overflow-y-auto st-bg-card st-border st-border-subtle st-rounded-lg st-shadow-xl st-p-card"
+                :class="size === 'sm' ? 'st-max-w-[380px]' : size === 'lg' ? 'st-max-w-[720px]' : 'st-max-w-[520px]'"
+                @click.stop
+            >
+                <button
+                    v-if="dismissible"
+                    type="button"
+                    aria-label="Close"
+                    class="st-absolute st-top-[14px] st-right-[14px] st-inline-flex st-h-[30px] st-w-[30px] st-items-center st-justify-center st-rounded-sm st-border-none st-bg-transparent st-text-faint st-cursor-pointer st-transition st-duration-fast st-ease-out hover:st-bg-ink-100 hover:st-text-body st-focus-ring"
+                    @click="$emit('close')"
+                >
+                    <StIcon name="solar:close-circle-bold" :size="20" />
+                </button>
+
+                <h2 v-if="title" class="st-m-0 st-text-lg st-font-black st-tracking-tight st-text-strong" :class="dismissible ? 'st-pr-[34px]' : ''">
+                    {{ title }}
+                </h2>
+                <p v-if="description" class="st-mt-2 st-mb-0 st-text-sm st-font-semibold st-text-muted st-leading-normal [text-wrap:pretty]">
+                    {{ description }}
+                </p>
+
+                <div v-if="$slots.default" :class="title || description ? 'st-mt-[18px]' : ''">
+                    <slot />
+                </div>
+
+                <div v-if="$slots.actions" class="st-mt-[22px] st-flex st-justify-end st-gap-[10px]">
+                    <slot name="actions" />
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+    import { onBeforeUnmount, onMounted } from 'vue';
+    import StIcon from '../icon/StIcon.vue';
+
+    const props = withDefaults(
+        defineProps<{
+            open?: boolean;
+            title?: string;
+            description?: string;
+            size?: 'sm' | 'md' | 'lg';
+            /** Backdrop click, Escape and the corner button all close. Off for blocking dialogs. */
+            dismissible?: boolean;
+        }>(),
+        { open: true, size: 'md', dismissible: true }
+    );
+
+    const emit = defineEmits<{ close: [] }>();
+
+    // Escape is the one affordance the design's inline styles could not express, and the only way
+    // to leave the dialog from the keyboard.
+    function onKeydown(e: KeyboardEvent) {
+        if (e.key === 'Escape' && props.open && props.dismissible) emit('close');
+    }
+
+    onMounted(() => document.addEventListener('keydown', onKeydown));
+    onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown));
+</script>
diff --git a/ui/src/elements/StSkeleton.vue b/ui/src/elements/StSkeleton.vue
index f8b9f4ef..a48d28f4 100644
--- a/ui/src/elements/StSkeleton.vue
+++ b/ui/src/elements/StSkeleton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="st-skeleton st-bg-ink-150 st-rounded-lg" />
+    <div class="st-skeleton st-rounded-lg" />
 </template>
 
 <script setup lang="ts">
@@ -7,24 +7,30 @@
 </script>
 
 <style>
+    /*
+     * The handoff's audit specifies base --ink-100 and highlight --ink-150, so the pulse animates
+     * background-color between the two rather than fading a single fill's opacity. That also makes
+     * it theme-correct for free: the ink ramp inverts in dark, keeping both roles.
+     */
     @keyframes st-skeleton-pulse {
         0%,
         100% {
-            opacity: 0.55;
+            background-color: rgb(var(--ink-100));
         }
         50% {
-            opacity: 1;
+            background-color: rgb(var(--ink-150));
         }
     }
 
     .st-skeleton {
+        background-color: rgb(var(--ink-100));
         animation: st-skeleton-pulse 1.4s var(--ease-in-out) infinite;
     }
 
     @media (prefers-reduced-motion: reduce) {
         .st-skeleton {
             animation: none;
-            opacity: 0.7;
+            background-color: rgb(var(--ink-150));
         }
     }
 </style>
diff --git a/ui/src/elements/StSwitch.vue b/ui/src/elements/StSwitch.vue
new file mode 100644
index 00000000..c14b1911
--- /dev/null
+++ b/ui/src/elements/StSwitch.vue
@@ -0,0 +1,56 @@
+<template>
+    <component
+        :is="label ? 'label' : 'span'"
+        class="st-inline-flex st-items-center st-gap-[10px] st-font-sans st-text-sm st-font-semibold st-text-body"
+        :class="[disabled ? 'st-cursor-not-allowed' : 'st-cursor-pointer', $attrs.class]"
+    >
+        <button
+            type="button"
+            role="switch"
+            :aria-checked="modelValue"
+            :aria-label="label ? undefined : ariaLabel"
+            :disabled="disabled"
+            class="st-inline-flex st-items-center st-flex-none st-rounded-pill st-border-none st-p-[3px] st-transition-colors st-duration-base st-ease-out st-focus-ring"
+            :class="[
+                modelValue ? 'st-bg-primary' : 'st-bg-ink-300',
+                disabled ? 'st-opacity-50 st-cursor-not-allowed' : 'st-cursor-pointer',
+                size === 'sm' ? 'st-w-9 st-h-5' : 'st-w-[46px] st-h-[26px]',
+            ]"
+            @click="toggle"
+        >
+            <!-- Hard #fff, not `white`: --white is redeclared as a card neutral by the design
+                 system's dark layer, and the knob has to stay light on the rose track in both. -->
+            <span
+                class="st-block st-rounded-circle st-bg-on-brand st-shadow-sm st-transition-transform st-duration-base st-ease-spring"
+                :class="[
+                    size === 'sm' ? 'st-w-3.5 st-h-3.5' : 'st-w-5 st-h-5',
+                    modelValue ? (size === 'sm' ? 'st-translate-x-4' : 'st-translate-x-5') : 'st-translate-x-0',
+                ]"
+            />
+        </button>
+        <slot>{{ label }}</slot>
+    </component>
+</template>
+
+<script setup lang="ts">
+    defineOptions({ inheritAttrs: false });
+
+    const props = withDefaults(
+        defineProps<{
+            modelValue?: boolean;
+            /** Renders the control inside a <label>; without one, pass `ariaLabel`. */
+            label?: string;
+            /** Accessible name when the switch has no visible label. */
+            ariaLabel?: string;
+            size?: 'sm' | 'md';
+            disabled?: boolean;
+        }>(),
+        { size: 'md' }
+    );
+
+    const emit = defineEmits<{ 'update:modelValue': [boolean] }>();
+
+    function toggle() {
+        if (!props.disabled) emit('update:modelValue', !props.modelValue);
+    }
+</script>
diff --git a/ui/src/elements/StTextarea.vue b/ui/src/elements/StTextarea.vue
new file mode 100644
index 00000000..daf01aaa
--- /dev/null
+++ b/ui/src/elements/StTextarea.vue
@@ -0,0 +1,62 @@
+<template>
+    <label :for="id" class="st-block st-font-sans" :class="$attrs.class" :style="$attrs.style as any">
+        <span v-if="label" class="st-block st-mb-[6px] st-text-sm st-font-bold st-text-body">
+            {{ label }}
+            <span v-if="optionalLabel" class="st-font-semibold st-text-faint">{{ optionalLabel }}</span>
+        </span>
+
+        <textarea
+            :id="id"
+            :value="modelValue"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :rows="rows"
+            class="st-block st-w-full st-box-border st-min-h-[84px] st-resize-y st-px-[14px] st-py-[10px] st-rounded-md st-border-[1.5px] st-font-sans st-text-sm st-font-medium st-text-strong st-outline-none st-transition st-duration-fast st-ease-out placeholder:st-text-faint disabled:st-cursor-not-allowed"
+            :class="[
+                disabled ? 'st-bg-ink-100' : 'st-bg-card',
+                error ? 'st-border-danger' : 'st-border-default',
+                error ? '' : 'focus:st-border-primary',
+                'focus:st-shadow-[0_0_0_3px_var(--ring-focus)]',
+            ]"
+            v-bind="textareaAttrs"
+            @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+        />
+
+        <span v-if="error || hint" class="st-block st-mt-[6px] st-text-xs st-font-semibold" :class="error ? 'st-text-danger' : 'st-text-muted'">
+            {{ error || hint }}
+        </span>
+    </label>
+</template>
+
+<script setup lang="ts">
+    // Same contract as StInput; kept separate because a textarea takes the ring directly (there is
+    // no icon to wrap) and carries `rows` / vertical resize. As there, `class` and `style` size the
+    // whole field and stay on the wrapper.
+    import { computed, useAttrs } from 'vue';
+
+    defineOptions({ inheritAttrs: false });
+
+    const attrs = useAttrs();
+    const textareaAttrs = computed(() => {
+        const { class: _class, style: _style, ...rest } = attrs;
+        return rest;
+    });
+
+    withDefaults(
+        defineProps<{
+            modelValue?: string;
+            label?: string;
+            /** Muted suffix after the label, e.g. "(optional)". */
+            optionalLabel?: string;
+            placeholder?: string;
+            hint?: string;
+            error?: string;
+            disabled?: boolean;
+            rows?: number;
+            id?: string;
+        }>(),
+        { rows: 3 }
+    );
+
+    defineEmits<{ 'update:modelValue': [string] }>();
+</script>
diff --git a/ui/src/elements/StThemeSwitcher.vue b/ui/src/elements/StThemeSwitcher.vue
new file mode 100644
index 00000000..62683d60
--- /dev/null
+++ b/ui/src/elements/StThemeSwitcher.vue
@@ -0,0 +1,194 @@
+<template>
+    <span class="st-relative st-inline-flex">
+        <button
+            type="button"
+            :aria-label="ariaLabel"
+            :class="[
+                'st-inline-flex st-items-center st-justify-center st-shrink-0 st-p-0 st-border-none st-cursor-pointer st-rounded-pill st-focus-ring',
+                'st-transition st-duration-fast st-ease-out active:st-scale-[0.92]',
+                SIZE[size].box,
+                variant === 'ghost' ? 'st-bg-transparent hover:st-bg-ink-100' : 'st-bg-ink-50 hover:st-bg-ink-100',
+            ]"
+            @click="cycle"
+            @mouseenter="hovered = true"
+            @mouseleave="hovered = false"
+            @focus="focused = true"
+            @blur="focused = false"
+        >
+            <!--
+                Keyed on the mode so each press remounts the glyph and replays the spin. The colour
+                carries the state as much as the shape does, so it is bound rather than themed.
+            -->
+            <StIcon :key="mode" :name="ICONS[mode]" :size="SIZE[size].icon" class="st-theme-glyph" :style="{ color: GLYPH[mode] }" />
+        </button>
+
+        <span
+            v-if="hovered || focused"
+            role="tooltip"
+            class="st-absolute st-left-1/2 st-top-full st-z-tooltip st-mt-2 -st-translate-x-1/2 st-whitespace-nowrap st-rounded-sm st-bg-ink-900 st-px-2 st-py-1 st-text-2xs st-font-bold st-text-paper st-pointer-events-none"
+        >
+            {{ tooltip }}
+        </span>
+    </span>
+</template>
+
+<script setup lang="ts">
+    import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import StIcon from '../icon/StIcon.vue';
+    import type { StTheme } from '../types';
+
+    /**
+     * The theme control: one round icon button that cycles Light -> Dark -> System.
+     *
+     * It can run standalone — persisting to `persistKey` and writing `data-theme` itself — which is
+     * what the design-system specimens and the extension need. The dashboard instead drives it
+     * controlled (`v-model`) with `persist-key=""` and `:apply="false"`, because there
+     * @nuxtjs/color-mode already owns persistence, the attribute and the pre-paint script, and two
+     * writers would fight over both.
+     */
+    const props = withDefaults(
+        defineProps<{
+            /** v-model. Omit for uncontrolled. */
+            modelValue?: StTheme;
+            size?: 'sm' | 'md' | 'lg';
+            variant?: 'soft' | 'ghost';
+            /** localStorage key. '' disables persistence (specimens, screenshots). */
+            persistKey?: string;
+            /** Whether to write data-theme on <html>. false for specimens and static screenshots. */
+            apply?: boolean;
+            /**
+             * Copy; the library carries no i18n of its own. The mode names are plain strings, but
+             * `aria` and `resolved` are FORMATTERS, not patterns — a consumer must not hand a
+             * pattern like 'Theme: {current}.' to vue-i18n's t() without params, because t()
+             * interpolates the placeholders to empty strings on the way through.
+             */
+            labels?: {
+                light?: string;
+                dark?: string;
+                system?: string;
+                aria?: (current: string, next: string) => string;
+                resolved?: (mode: string, resolved: string) => string;
+            };
+        }>(),
+        { size: 'md', variant: 'soft', persistKey: 'subturtle:theme', apply: true }
+    );
+
+    const emit = defineEmits<{ 'update:modelValue': [StTheme]; change: [StTheme, 'light' | 'dark'] }>();
+
+    const ORDER: StTheme[] = ['light', 'dark', 'system'];
+    const ICONS: Record<StTheme, string> = {
+        light: 'solar:sun-2-bold-duotone',
+        dark: 'solar:moon-bold-duotone',
+        system: 'solar:monitor-bold-duotone',
+    };
+    const GLYPH: Record<StTheme, string> = {
+        light: 'rgb(var(--amber-500))',
+        dark: 'rgb(var(--rose-600))',
+        system: 'rgb(var(--text-muted))',
+    };
+    const SIZE = {
+        sm: { box: 'st-w-8 st-h-8', icon: 18 },
+        md: { box: 'st-w-10 st-h-10', icon: 22 },
+        lg: { box: 'st-w-12 st-h-12', icon: 26 },
+    };
+
+    const DEFAULT_LABELS = {
+        light: 'Light',
+        dark: 'Dark',
+        system: 'System',
+        aria: (current: string, next: string) => `Theme: ${current}. Switch to ${next}.`,
+        resolved: (mode: string, res: string) => `${mode} · ${res}`,
+    };
+    const labels = computed(() => ({ ...DEFAULT_LABELS, ...(props.labels ?? {}) }));
+
+    const hovered = ref(false);
+    const focused = ref(false);
+
+    const uncontrolled = ref<StTheme>(readStored() ?? 'system');
+    const mode = computed<StTheme>(() => props.modelValue ?? uncontrolled.value);
+
+    function readStored(): StTheme | null {
+        if (!props.persistKey) return null;
+        try {
+            const v = localStorage.getItem(props.persistKey);
+            return v === 'light' || v === 'dark' || v === 'system' ? v : null;
+        } catch {
+            return null; // Private mode / blocked storage — fall back to the default.
+        }
+    }
+
+    /**
+     * Live, not read once: a `system` user has to flip at sunset without reloading. Tracked even
+     * when controlled, because the tooltip and the aria-label both name what `system` resolves to.
+     */
+    const prefersDark = ref(false);
+    let mql: MediaQueryList | undefined;
+    const onMedia = (e: MediaQueryListEvent | MediaQueryList) => (prefersDark.value = e.matches);
+
+    onMounted(() => {
+        if (!window.matchMedia) return;
+        mql = window.matchMedia('(prefers-color-scheme: dark)');
+        onMedia(mql);
+        mql.addEventListener('change', onMedia);
+    });
+    onBeforeUnmount(() => mql?.removeEventListener('change', onMedia));
+
+    const resolved = computed<'light' | 'dark'>(() => (mode.value === 'system' ? (prefersDark.value ? 'dark' : 'light') : mode.value));
+
+    const ariaLabel = computed(() => {
+        const next = ORDER[(ORDER.indexOf(mode.value) + 1) % ORDER.length];
+        return labels.value.aria(labels.value[mode.value], labels.value[next].toLowerCase());
+    });
+
+    // `system` also names what it currently resolves to — "System · dark".
+    const tooltip = computed(() =>
+        mode.value === 'system' ? labels.value.resolved(labels.value.system, labels.value[resolved.value].toLowerCase()) : labels.value[mode.value]
+    );
+
+    function applyAttribute() {
+        if (!props.apply) return;
+        document.documentElement.setAttribute('data-theme', resolved.value);
+    }
+
+    function cycle() {
+        const next = ORDER[(ORDER.indexOf(mode.value) + 1) % ORDER.length];
+        if (props.modelValue === undefined) uncontrolled.value = next;
+        if (props.persistKey) {
+            try {
+                localStorage.setItem(props.persistKey, next);
+            } catch {
+                // Non-fatal: the preference just won't survive a reload.
+            }
+        }
+        emit('update:modelValue', next);
+    }
+
+    // Covers both a click and an OS-level flip while on `system`.
+    watch([resolved, mode], () => {
+        applyAttribute();
+        emit('change', mode.value, resolved.value);
+    });
+    onMounted(applyAttribute);
+</script>
+
+<style>
+    /* Each press turns the glyph over. Keyed remount replays it; reduced motion drops it. */
+    @keyframes st-theme-glyph-spin {
+        from {
+            transform: rotate(-180deg);
+        }
+        to {
+            transform: rotate(0deg);
+        }
+    }
+
+    .st-theme-glyph {
+        animation: st-theme-glyph-spin var(--dur-slow) var(--ease-spring);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .st-theme-glyph {
+            animation: none;
+        }
+    }
+</style>
diff --git a/ui/src/icon/icons.generated.ts b/ui/src/icon/icons.generated.ts
index 8bbbfffd..5d88fcb6 100644
--- a/ui/src/icon/icons.generated.ts
+++ b/ui/src/icon/icons.generated.ts
@@ -9,32 +9,54 @@ export interface IconDef {
 export const icons: Record<string, IconDef> = {
     "logos:google-icon": { body: "<path fill=\"#4285f4\" d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"/><path fill=\"#34a853\" d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"/><path fill=\"#fbbc05\" d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"/><path fill=\"#eb4335\" d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"/>", width: 256, height: 262 },
     "solar:add-circle-bold": { body: "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.75 9C12.75 8.58579 12.4142 8.25 12 8.25C11.5858 8.25 11.25 8.58579 11.25 9L11.25 11.25H9C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75H11.25V15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15L12.75 12.75H15C15.4142 12.75 15.75 12.4142 15.75 12C15.75 11.5858 15.4142 11.25 15 11.25H12.75V9Z\" clip-rule=\"evenodd\"/>", width: 24, height: 24 },
+    "solar:alt-arrow-down-linear": { body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M19 9L12 15L5 9\"/>", width: 24, height: 24 },
     "solar:alt-arrow-left-linear": { body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M15 5L9 12L15 19\"/>", width: 24, height: 24 },
     "solar:alt-arrow-right-linear": { body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 5L15 12L9 19\"/>", width: 24, height: 24 },
     "solar:arrow-down-bold": { body: "<path fill=\"currentColor\" d=\"M12.75 4C12.75 3.58579 12.4142 3.25 12 3.25C11.5858 3.25 11.25 3.58579 11.25 4L11.25 13.25H6.00002C5.69668 13.25 5.4232 13.4327 5.30711 13.713C5.19103 13.9932 5.25519 14.3158 5.46969 14.5303L11.4697 20.5303C11.6103 20.671 11.8011 20.75 12 20.75C12.1989 20.75 12.3897 20.671 12.5304 20.5303L18.5304 14.5303C18.7449 14.3158 18.809 13.9932 18.6929 13.713C18.5768 13.4327 18.3034 13.25 18 13.25H12.75L12.75 4Z\"/>", width: 24, height: 24 },
     "solar:arrow-right-bold": { body: "<path fill=\"currentColor\" d=\"M4 11.25C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75H13.25V18C13.25 18.3034 13.4327 18.5768 13.713 18.6929C13.9932 18.809 14.3158 18.7449 14.5303 18.5304L20.5303 12.5304C20.671 12.3897 20.75 12.1989 20.75 12C20.75 11.8011 20.671 11.6103 20.5303 11.4697L14.5303 5.46969C14.3158 5.25519 13.9932 5.19103 13.713 5.30711C13.4327 5.4232 13.25 5.69668 13.25 6.00002V11.25H4Z\"/>", width: 24, height: 24 },
     "solar:arrow-right-linear": { body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 12H20M14 18L20 12L14 6\"/>", width: 24, height: 24 },
     "solar:arrow-up-bold": { body: "<path fill=\"currentColor\" d=\"M12.75 20C12.75 20.4142 12.4142 20.75 12 20.75C11.5858 20.75 11.25 20.4142 11.25 20L11.25 10.75H6.00002C5.69668 10.75 5.4232 10.5673 5.30711 10.287C5.19103 10.0068 5.25519 9.68417 5.46969 9.46967L11.4697 3.46967C11.6103 3.32902 11.8011 3.25 12 3.25C12.1989 3.25 12.3897 3.32902 12.5304 3.46967L18.5304 9.46967C18.7449 9.68417 18.809 10.0068 18.6929 10.287C18.5768 10.5673 18.3034 10.75 18 10.75H12.75L12.75 20Z\"/>", width: 24, height: 24 },
+    "solar:bolt-linear": { body: "<path fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M5.66953 9.91436L8.73167 5.77133C10.711 3.09327 11.7007 1.75425 12.6241 2.03721C13.5474 2.32018 13.5474 3.96249 13.5474 7.24712V7.55682C13.5474 8.74151 13.5474 9.33386 13.926 9.70541L13.946 9.72466C14.3327 10.0884 14.9492 10.0884 16.1822 10.0884C18.4011 10.0884 19.5106 10.0884 19.8855 10.7613C19.8917 10.7724 19.8977 10.7837 19.9036 10.795C20.2576 11.4784 19.6152 12.3475 18.3304 14.0857L15.2683 18.2287C13.2889 20.9067 12.2992 22.2458 11.3758 21.9628C10.4525 21.6798 10.4525 20.0375 10.4525 16.7528L10.4526 16.4433C10.4526 15.2585 10.4526 14.6662 10.074 14.2946L10.054 14.2754C9.6673 13.9117 9.05079 13.9117 7.81775 13.9117C5.59888 13.9117 4.48945 13.9117 4.1145 13.2387C4.10829 13.2276 4.10225 13.2164 4.09639 13.205C3.74244 12.5217 4.3848 11.6526 5.66953 9.91436Z\"/>", width: 24, height: 24 },
     "solar:bookmark-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M21 11.0975V16.0909C21 19.1875 21 20.7358 20.2659 21.4123C19.9158 21.735 19.4739 21.9377 19.0031 21.9915C18.016 22.1045 16.8633 21.0849 14.5578 19.0458C13.5388 18.1445 13.0292 17.6938 12.4397 17.5751C12.1494 17.5166 11.8506 17.5166 11.5603 17.5751C10.9708 17.6938 10.4612 18.1445 9.44216 19.0458C7.13673 21.0849 5.98402 22.1045 4.99692 21.9915C4.52615 21.9377 4.08421 21.735 3.73411 21.4123C3 20.7358 3 19.1875 3 16.0909V11.0975C3 6.80891 3 4.6646 4.31802 3.3323C5.63604 2 7.75736 2 12 2C16.2426 2 18.364 2 19.682 3.3323C21 4.6646 21 6.80891 21 11.0975Z\" opacity=\".5\"/><path d=\"M9 5.25C8.58579 5.25 8.25 5.58579 8.25 6C8.25 6.41421 8.58579 6.75 9 6.75H15C15.4142 6.75 15.75 6.41421 15.75 6C15.75 5.58579 15.4142 5.25 15 5.25H9Z\"/></g>", width: 24, height: 24 },
+    "solar:calendar-minimalistic-linear": { body: "<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z\"/><path stroke-linecap=\"round\" d=\"M7 4V2.5\"/><path stroke-linecap=\"round\" d=\"M17 4V2.5\"/><path stroke-linecap=\"round\" d=\"M2.5 9H21.5\"/></g>", width: 24, height: 24 },
+    "solar:card-2-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M9.99976 20H13.9998C17.771 20 19.6566 20 20.8282 18.8284C21.9998 17.6569 21.9998 15.7712 21.9998 12C21.9998 11.5581 21.9981 10.392 21.9962 10H2C1.99811 10.392 1.99976 11.5581 1.99976 12C1.99976 15.7712 1.99976 17.6569 3.17133 18.8284C4.34291 20 6.22852 20 9.99976 20Z\" opacity=\".5\"/><path d=\"M5.25 13.5C5.25 13.0858 5.58579 12.75 6 12.75H8C8.41421 12.75 8.75 13.0858 8.75 13.5C8.75 13.9142 8.41421 14.25 8 14.25H6C5.58579 14.25 5.25 13.9142 5.25 13.5Z\"/><path d=\"M5.25 16.5C5.25 16.0858 5.58579 15.75 6 15.75H10C10.4142 15.75 10.75 16.0858 10.75 16.5C10.75 16.9142 10.4142 17.25 10 17.25H6C5.58579 17.25 5.25 16.9142 5.25 16.5Z\"/><path fill-rule=\"evenodd\" d=\"M17.1972 12.2933C16.8744 12.2499 16.4776 12.25 16.0447 12.25H15.9553C15.5224 12.25 15.1256 12.2499 14.8028 12.2933C14.4473 12.3411 14.0716 12.4535 13.7626 12.7626C13.4535 13.0716 13.3411 13.4473 13.2933 13.8028C13.2499 14.1256 13.2499 14.5224 13.25 14.9553L13.25 15L13.25 15.0448C13.2499 15.4776 13.2499 15.8744 13.2933 16.1972C13.3411 16.5527 13.4535 16.9284 13.7626 17.2374C14.0716 17.5465 14.4473 17.6589 14.8028 17.7067C15.1256 17.7501 15.5224 17.7501 15.9553 17.75L16 17.75L16.0447 17.75C16.4776 17.7501 16.8744 17.7501 17.1972 17.7067C17.5527 17.6589 17.9284 17.5465 18.2374 17.2374C18.5465 16.9284 18.6589 16.5527 18.7067 16.1972C18.7501 15.8744 18.7501 15.4776 18.75 15.0447V14.9553C18.7501 14.5224 18.7501 14.1256 18.7067 13.8028C18.6589 13.4473 18.5465 13.0716 18.2374 12.7626C17.9284 12.4535 17.5527 12.3411 17.1972 12.2933ZM14.8257 13.8219L14.8233 13.8232L14.8219 13.8257C14.8209 13.8276 14.8192 13.8309 14.8172 13.836C14.8082 13.8578 14.7929 13.9061 14.7799 14.0027C14.7516 14.2134 14.75 14.5074 14.75 15C14.75 15.4926 14.7516 15.7866 14.7799 15.9973C14.7929 16.0939 14.8082 16.1423 14.8172 16.164C14.8184 16.1671 14.8195 16.1695 14.8204 16.1714C14.821 16.1726 14.8215 16.1736 14.8219 16.1743L14.8232 16.1768L14.8257 16.1781C14.8276 16.1792 14.8309 16.1808 14.836 16.1828C14.8577 16.1918 14.9061 16.2071 15.0027 16.2201C15.2134 16.2484 15.5074 16.25 16 16.25C16.4926 16.25 16.7866 16.2484 16.9973 16.2201C17.0939 16.2071 17.1423 16.1918 17.164 16.1828C17.1691 16.1808 17.1724 16.1792 17.1743 16.1781L17.1768 16.1768L17.1781 16.1743C17.1791 16.1724 17.1808 16.1691 17.1828 16.164C17.1918 16.1423 17.2071 16.0939 17.2201 15.9973C17.2484 15.7866 17.25 15.4926 17.25 15C17.25 14.5074 17.2484 14.2134 17.2201 14.0027C17.2071 13.9061 17.1918 13.8578 17.1828 13.836C17.1808 13.8309 17.1791 13.8276 17.1781 13.8257L17.1768 13.8232L17.1743 13.8219C17.1724 13.8209 17.1691 13.8192 17.164 13.8172C17.1423 13.8082 17.0939 13.7929 16.9973 13.7799C16.7866 13.7516 16.4926 13.75 16 13.75C15.5074 13.75 15.2134 13.7516 15.0027 13.7799C14.9061 13.7929 14.8577 13.8082 14.836 13.8172C14.8309 13.8192 14.8276 13.8209 14.8257 13.8219Z\" clip-rule=\"evenodd\"/><path d=\"M9.99484 4H14.0052C17.7861 4 19.6766 4 20.8512 5.11578C21.6969 5.91916 21.9337 7.07507 22 9V10H2V9C2.0663 7.07507 2.3031 5.91916 3.14881 5.11578C4.3234 4 6.21388 4 9.99484 4Z\"/></g>", width: 24, height: 24 },
     "solar:chart-2-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M3.29289 9.29289C3 9.58579 3 10.0572 3 11V17C3 17.9428 3 18.4142 3.29289 18.7071C3.58579 19 4.05719 19 5 19C5.94281 19 6.41421 19 6.70711 18.7071C7 18.4142 7 17.9428 7 17V11C7 10.0572 7 9.58579 6.70711 9.29289C6.41421 9 5.94281 9 5 9C4.05719 9 3.58579 9 3.29289 9.29289Z\"/><path d=\"M17.2929 2.29289C17 2.58579 17 3.05719 17 4V17C17 17.9428 17 18.4142 17.2929 18.7071C17.5858 19 18.0572 19 19 19C19.9428 19 20.4142 19 20.7071 18.7071C21 18.4142 21 17.9428 21 17V4C21 3.05719 21 2.58579 20.7071 2.29289C20.4142 2 19.9428 2 19 2C18.0572 2 17.5858 2 17.2929 2.29289Z\" opacity=\".5\"/><path d=\"M10 7C10 6.05719 10 5.58579 10.2929 5.29289C10.5858 5 11.0572 5 12 5C12.9428 5 13.4142 5 13.7071 5.29289C14 5.58579 14 6.05719 14 7V17C14 17.9428 14 18.4142 13.7071 18.7071C13.4142 19 12.9428 19 12 19C11.0572 19 10.5858 19 10.2929 18.7071C10 18.4142 10 17.9428 10 17V7Z\" opacity=\".5\"/><path d=\"M3 21.25C2.58579 21.25 2.25 21.5858 2.25 22C2.25 22.4142 2.58579 22.75 3 22.75H21C21.4142 22.75 21.75 22.4142 21.75 22C21.75 21.5858 21.4142 21.25 21 21.25H3Z\"/></g>", width: 24, height: 24 },
+    "solar:check-circle-bold": { body: "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z\" clip-rule=\"evenodd\"/>", width: 24, height: 24 },
+    "solar:check-circle-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" opacity=\".5\"/><path d=\"M16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z\"/></g>", width: 24, height: 24 },
     "solar:clock-circle-bold": { body: "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 7.25C11.5858 7.25 11.25 7.58579 11.25 8V12C11.25 12.1989 11.3291 12.3896 11.4697 12.5303L13.9697 15.0303C14.2626 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2626 15.0303 13.9697L12.75 11.6895V8C12.75 7.58579 12.4142 7.25 12 7.25Z\" clip-rule=\"evenodd\"/>", width: 24, height: 24 },
+    "solar:clock-circle-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" opacity=\".5\"/><path fill-rule=\"evenodd\" d=\"M12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V11.6893L15.0303 13.9697C15.3232 14.2626 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2626 15.3232 13.9697 15.0303L11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.58579 11.5858 7.25 12 7.25Z\" clip-rule=\"evenodd\"/></g>", width: 24, height: 24 },
+    "solar:close-circle-bold": { body: "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z\" clip-rule=\"evenodd\"/>", width: 24, height: 24 },
     "solar:crown-bold": { body: "<g fill=\"currentColor\"><path d=\"M20.0918 14.3257L20.2848 12.4316C20.3878 11.421 20.4558 10.7537 20.4024 10.3332L20.4211 10.3333C21.2931 10.3333 22 9.58714 22 8.66667C22 7.74619 21.2931 7 20.4211 7C19.549 7 18.8421 7.74619 18.8421 8.66667C18.8421 9.08296 18.9867 9.4636 19.2258 9.7557C18.8826 9.9793 18.4338 10.4511 17.7584 11.1613L17.7584 11.1613C17.2381 11.7084 16.9779 11.9819 16.6877 12.0243C16.5269 12.0478 16.363 12.0236 16.2145 11.9546C15.9465 11.83 15.7678 11.4919 15.4105 10.8155L13.5268 7.25044C13.3063 6.83319 13.1218 6.48397 12.9554 6.20294C13.6379 5.83541 14.1053 5.08643 14.1053 4.22222C14.1053 2.99492 13.1627 2 12 2C10.8373 2 9.89474 2.99492 9.89474 4.22222C9.89474 5.08643 10.3621 5.83541 11.0446 6.20294C10.8782 6.48399 10.6937 6.83316 10.4732 7.25045L8.58953 10.8155C8.23217 11.4919 8.05348 11.83 7.78548 11.9546C7.63699 12.0236 7.47313 12.0478 7.31231 12.0243C7.02208 11.9819 6.76191 11.7084 6.24157 11.1613C5.56617 10.4511 5.11743 9.97929 4.77424 9.75569C5.0133 9.4636 5.15789 9.08296 5.15789 8.66667C5.15789 7.74619 4.45098 7 3.57895 7C2.70692 7 2 7.74619 2 8.66667C2 9.58714 2.70692 10.3333 3.57895 10.3333L3.59759 10.3332C3.54423 10.7537 3.61223 11.421 3.71521 12.4316L3.90821 14.3257C4.01535 15.377 4.10443 16.3774 4.21355 17.2778H19.7864C19.8956 16.3774 19.9847 15.377 20.0918 14.3257Z\"/><path d=\"M10.8548 22H13.1452C16.1304 22 17.623 22 18.6189 21.0591C19.0535 20.6484 19.3288 19.908 19.5274 18.9444H4.47259C4.67121 19.908 4.94646 20.6484 5.38113 21.0591C6.37702 22 7.86961 22 10.8548 22Z\"/></g>", width: 24, height: 24 },
     "solar:crown-bold-duotone": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M19.6872 14.0932L19.8706 12.3885C19.9684 11.479 20.033 10.8784 19.9823 10.5C19.5357 10.4948 19.1359 10.2944 18.8645 9.98019C18.5384 10.1814 18.1122 10.6061 17.4705 11.2452C16.9762 11.7376 16.729 11.9838 16.4533 12.0219C16.3005 12.0431 16.1449 12.0213 16.0038 11.9592C15.7492 11.8471 15.5794 11.5427 15.2399 10.934L13.4505 7.72546C13.241 7.3499 13.0657 7.03565 12.9077 6.78271C12.6353 6.92169 12.3268 7.00006 12 7.00006C11.6732 7.00006 11.3647 6.92169 11.0923 6.78272C10.9343 7.03566 10.759 7.34991 10.5495 7.72547L8.76006 10.934C8.42056 11.5427 8.25081 11.8471 7.99621 11.9592C7.85514 12.0213 7.69947 12.0431 7.5467 12.0219C7.27097 11.9838 7.02381 11.7376 6.5295 11.2452C5.88785 10.6061 5.46157 10.1814 5.13553 9.98019C4.86406 10.2944 4.46434 10.4948 4.01771 10.5C3.96702 10.8784 4.03162 11.479 4.12945 12.3885L4.3128 14.0932C4.34376 14.3809 4.37312 14.6645 4.40192 14.9425C4.65422 17.3783 4.86292 19.3932 5.71208 20.1532C6.65817 21.0001 8.07613 21.0001 10.9121 21.0001H13.0879C15.9239 21.0001 17.3418 21.0001 18.2879 20.1532C19.1371 19.3932 19.3458 17.3783 19.5981 14.9426C19.6269 14.6645 19.6562 14.3809 19.6872 14.0932Z\" clip-rule=\"evenodd\" opacity=\".5\"/><path d=\"M20 10.5C20.8284 10.5 21.5 9.82843 21.5 9C21.5 8.17157 20.8284 7.5 20 7.5C19.1716 7.5 18.5 8.17157 18.5 9C18.5 9.37466 18.6374 9.71724 18.8645 9.98013C19.1359 10.2944 19.5357 10.4947 19.9823 10.4999L20 10.5Z\"/><path d=\"M12 3C10.8954 3 10 3.89543 10 5C10 5.77778 10.444 6.45187 11.0923 6.78265C11.3647 6.92163 11.6732 7 12 7C12.3268 7 12.6353 6.92163 12.9077 6.78265C13.556 6.45187 14 5.77778 14 5C14 3.89543 13.1046 3 12 3Z\"/><path d=\"M2.5 9C2.5 9.82843 3.17157 10.5 4 10.5L4.01771 10.4999C4.46434 10.4947 4.86406 10.2944 5.13553 9.98012C5.36264 9.71724 5.5 9.37466 5.5 9C5.5 8.17157 4.82843 7.5 4 7.5C3.17157 7.5 2.5 8.17157 2.5 9Z\"/><path d=\"M4.84862 18.25C4.75064 17.7997 4.67228 17.2952 4.60254 16.75H19.3968C19.327 17.2952 19.2487 17.7997 19.1507 18.25H4.84862Z\"/></g>", width: 24, height: 24 },
+    "solar:crown-linear": { body: "<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M19.9823 10.4999L20 10.5C20.8284 10.5 21.5 9.82843 21.5 9C21.5 8.17157 20.8284 7.5 20 7.5C19.1716 7.5 18.5 8.17157 18.5 9C18.5 9.37466 18.6374 9.71724 18.8645 9.98013C19.1359 10.2944 19.5357 10.4947 19.9823 10.4999Z\"/><path d=\"M19.9823 10.5C20.033 10.8784 19.9684 11.479 19.8706 12.3885L19.6872 14.0932C19.3851 16.902 19.234 19.3064 18.2879 20.1533C17.3418 21.0001 15.9239 21.0001 13.0879 21.0001H10.9121C8.07613 21.0001 6.65817 21.0001 5.71208 20.1533C4.76598 19.3064 4.61492 16.902 4.3128 14.0932L4.12945 12.3885C4.03162 11.479 3.96702 10.8784 4.01771 10.5\"/><path d=\"M4 10.5L4.01771 10.4999C4.46434 10.4947 4.86406 10.2944 5.13553 9.98012C5.36264 9.71724 5.5 9.37466 5.5 9C5.5 8.17157 4.82843 7.5 4 7.5C3.17157 7.5 2.5 8.17157 2.5 9C2.5 9.82843 3.17157 10.5 4 10.5Z\"/><path d=\"M11.0925 6.78271C10.9345 7.03566 10.7592 7.34991 10.5498 7.72547L8.76027 10.934C8.42077 11.5427 8.25102 11.8471 7.99642 11.9592C7.85535 12.0213 7.69969 12.0431 7.54691 12.0219C7.27118 11.9838 7.02403 11.7376 6.52971 11.2452C5.88806 10.6061 5.46178 10.1814 5.13574 9.98019\"/><path d=\"M11.0923 6.78265C11.3647 6.92163 11.6732 7 12 7C12.3268 7 12.6353 6.92163 12.9077 6.78265C13.556 6.45187 14 5.77778 14 5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5C10 5.77778 10.444 6.45187 11.0923 6.78265Z\"/><path d=\"M12.9077 6.78271C13.0658 7.03565 13.241 7.34991 13.4505 7.72546L15.24 10.934C15.5795 11.5427 15.7492 11.8471 16.0038 11.9592C16.1449 12.0213 16.3006 12.0431 16.4533 12.0219C16.7291 11.9838 16.9762 11.7376 17.4705 11.2452C18.1122 10.6061 18.5385 10.1814 18.8645 9.98019\"/><path stroke-linecap=\"round\" d=\"M5 17.5H19\"/></g>", width: 24, height: 24 },
     "solar:danger-triangle-bold": { body: "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M5.31171 10.7615C8.23007 5.58716 9.68925 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.31034 17.856 2.52291 15.7061 4.94805 11.4063L5.31171 10.7615ZM12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V13C12.75 13.4142 12.4142 13.75 12 13.75C11.5858 13.75 11.25 13.4142 11.25 13V8C11.25 7.58579 11.5858 7.25 12 7.25ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z\" clip-rule=\"evenodd\"/>", width: 24, height: 24 },
+    "solar:diskette-bold": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M20.5355 20.5355C22 19.0711 22 16.714 22 12C22 11.6585 22 11.4878 21.9848 11.3142C21.9142 10.5049 21.586 9.71257 21.0637 9.09034C20.9516 8.95687 20.828 8.83317 20.5806 8.58578L15.4142 3.41944C15.1668 3.17206 15.0431 3.04835 14.9097 2.93631C14.2874 2.414 13.4951 2.08581 12.6858 2.01515C12.5122 2 12.3415 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355C4.1485 21.2196 5.02727 21.5841 6.25 21.7784L6.25 20.948C6.24997 20.0495 6.24995 19.3003 6.32991 18.7055C6.41432 18.0777 6.59999 17.5109 7.05546 17.0555C7.51093 16.6 8.07773 16.4143 8.70552 16.3299C9.3003 16.2499 10.0495 16.25 10.948 16.25H13.052C13.9505 16.25 14.6997 16.2499 15.2945 16.3299C15.9223 16.4143 16.4891 16.6 16.9445 17.0555C17.4 17.5109 17.5857 18.0777 17.6701 18.7055C17.7501 19.3003 17.75 20.0495 17.75 20.948L17.75 21.7784C18.9727 21.5841 19.8515 21.2196 20.5355 20.5355ZM6.25 8C6.25 7.58579 6.58579 7.25 7 7.25H13C13.4142 7.25 13.75 7.58579 13.75 8C13.75 8.41421 13.4142 8.75 13 8.75H7C6.58579 8.75 6.25 8.41421 6.25 8Z\" clip-rule=\"evenodd\"/><path d=\"M16.1835 18.9054C16.2484 19.3884 16.25 20.036 16.25 21V21.9313C15.0942 22 13.7004 22 12 22C10.2996 22 8.9058 22 7.75 21.9313V21C7.75 20.036 7.75159 19.3884 7.81654 18.9054C7.87858 18.4439 7.9858 18.2464 8.11612 18.1161C8.24643 17.9858 8.44393 17.8786 8.90539 17.8165C9.38843 17.7516 10.036 17.75 11 17.75H13C13.964 17.75 14.6116 17.7516 15.0946 17.8165C15.5561 17.8786 15.7536 17.9858 15.8839 18.1161C16.0142 18.2464 16.1214 18.4439 16.1835 18.9054Z\"/></g>", width: 24, height: 24 },
     "solar:documents-bold-duotone": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.87868 2.87868C5 3.75736 5 5.17157 5 8V16C5 18.8284 5 20.2426 5.87868 21.1213C6.75736 22 8.17157 22 11 22H13C15.8284 22 17.2426 22 18.1213 21.1213C19 20.2426 19 18.8284 19 16V8C19 5.17157 19 3.75736 18.1213 2.87868C17.2426 2 15.8284 2 13 2H11C8.17157 2 6.75736 2 5.87868 2.87868ZM8.25 17C8.25 16.5858 8.58579 16.25 9 16.25H12C12.4142 16.25 12.75 16.5858 12.75 17C12.75 17.4142 12.4142 17.75 12 17.75H9C8.58579 17.75 8.25 17.4142 8.25 17ZM9 12.25C8.58579 12.25 8.25 12.5858 8.25 13C8.25 13.4142 8.58579 13.75 9 13.75H15C15.4142 13.75 15.75 13.4142 15.75 13C15.75 12.5858 15.4142 12.25 15 12.25H9ZM8.25 9C8.25 8.58579 8.58579 8.25 9 8.25H15C15.4142 8.25 15.75 8.58579 15.75 9C15.75 9.41421 15.4142 9.75 15 9.75H9C8.58579 9.75 8.25 9.41421 8.25 9Z\" clip-rule=\"evenodd\"/><path d=\"M5.23525 4.05811C5 4.94139 5 6.17689 5 7.99985V15.9999C5 17.8229 5 19.0584 5.23527 19.9417L5 19.9238C4.02491 19.8279 3.36857 19.6111 2.87868 19.1212C2 18.2425 2 16.8283 2 13.9999V9.99991C2 7.17148 2 5.75726 2.87868 4.87859C3.36857 4.3887 4.02491 4.17194 5 4.07602L5.23525 4.05811Z\" opacity=\".5\"/><path d=\"M18.7646 19.9417C18.9999 19.0584 18.9999 17.8229 18.9999 15.9999V7.99985C18.9999 6.17689 18.9999 4.94139 18.7647 4.05811L18.9999 4.07602C19.975 4.17194 20.6314 4.3887 21.1212 4.87859C21.9999 5.75726 21.9999 7.17148 21.9999 9.99991V13.9999C21.9999 16.8283 21.9999 18.2425 21.1212 19.1212C20.6314 19.6111 19.975 19.8279 18.9999 19.9238L18.7646 19.9417Z\" opacity=\".5\"/></g>", width: 24, height: 24 },
     "solar:download-minimalistic-bold": { body: "<g fill=\"currentColor\"><path d=\"M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z\"/><path d=\"M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z\"/></g>", width: 24, height: 24 },
     "solar:fire-bold": { body: "<path fill=\"currentColor\" d=\"M12.8324 21.8013C15.9583 21.1747 20 18.926 20 13.1112C20 7.8196 16.1267 4.29593 13.3415 2.67685C12.7235 2.31757 12 2.79006 12 3.50492V5.3334C12 6.77526 11.3938 9.40711 9.70932 10.5018C8.84932 11.0607 7.92052 10.2242 7.816 9.20388L7.73017 8.36604C7.6304 7.39203 6.63841 6.80075 5.85996 7.3946C4.46147 8.46144 3 10.3296 3 13.1112C3 20.2223 8.28889 22.0001 10.9333 22.0001C11.0871 22.0001 11.2488 21.9955 11.4171 21.9858C10.1113 21.8742 8 21.064 8 18.4442C8 16.3949 9.49507 15.0085 10.631 14.3346C10.9365 14.1533 11.2941 14.3887 11.2941 14.7439V15.3331C11.2941 15.784 11.4685 16.4889 11.8836 16.9714C12.3534 17.5174 13.0429 16.9454 13.0985 16.2273C13.1161 16.0008 13.3439 15.8564 13.5401 15.9711C14.1814 16.3459 15 17.1465 15 18.4442C15 20.4922 13.871 21.4343 12.8324 21.8013Z\"/>", width: 24, height: 24 },
     "solar:fire-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M12.8324 21.8013C15.9583 21.1747 20 18.926 20 13.1112C20 7.8196 16.1267 4.29593 13.3415 2.67685C12.7235 2.31757 12 2.79006 12 3.50492V5.3334C12 6.77526 11.3938 9.40711 9.70932 10.5018C8.84932 11.0607 7.92052 10.2242 7.816 9.20388L7.73017 8.36604C7.6304 7.39203 6.63841 6.80075 5.85996 7.3946C4.46147 8.46144 3 10.3296 3 13.1112C3 20.2223 8.28889 22.0001 10.9333 22.0001C11.0871 22.0001 11.2488 21.9955 11.4171 21.9858C11.863 21.9296 11.4171 22.085 12.8324 21.8013Z\" opacity=\".5\"/><path d=\"M8 18.4442C8 21.064 10.1113 21.8742 11.4171 21.9858C11.863 21.9296 11.4171 22.085 12.8324 21.8013C13.871 21.4343 15 20.4922 15 18.4442C15 17.1465 14.1814 16.3459 13.5401 15.9711C13.3439 15.8564 13.1161 16.0008 13.0985 16.2273C13.0429 16.9454 12.3534 17.5174 11.8836 16.9714C11.4685 16.4889 11.2941 15.784 11.2941 15.3331V14.7439C11.2941 14.3887 10.9365 14.1533 10.631 14.3346C9.49507 15.0085 8 16.3949 8 18.4442Z\"/></g>", width: 24, height: 24 },
     "solar:hamburger-menu-linear": { body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M20 7L4 7\"/><path d=\"M20 12L4 12\"/><path d=\"M20 17L4 17\"/></g>", width: 24, height: 24 },
     "solar:history-2-bold-duotone": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M11.25 2C11.25 1.58579 11.5858 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12C1.25 11.5858 1.58579 11.25 2 11.25C2.41421 11.25 2.75 11.5858 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75C11.5858 2.75 11.25 2.41421 11.25 2Z\" clip-rule=\"evenodd\"/><path fill-rule=\"evenodd\" d=\"M9.10012 2.39808C9.24928 2.7845 9.05695 3.21868 8.67053 3.36785C8.52909 3.42245 8.38933 3.48042 8.25134 3.54168C7.87275 3.70975 7.4296 3.5391 7.26154 3.16051C7.09347 2.78193 7.26412 2.33878 7.64271 2.17071C7.80321 2.09946 7.9658 2.03201 8.13034 1.96849C8.51677 1.81932 8.95095 2.01166 9.10012 2.39808ZM5.64824 4.2408C5.93391 4.54075 5.92232 5.01549 5.62237 5.30115C5.5127 5.40559 5.40559 5.5127 5.30115 5.62237C5.01549 5.92232 4.54075 5.93391 4.2408 5.64824C3.94085 5.36258 3.92927 4.88785 4.21493 4.5879C4.3362 4.46056 4.46056 4.3362 4.5879 4.21493C4.88785 3.92927 5.36258 3.94085 5.64824 4.2408ZM3.16051 7.26154C3.5391 7.42961 3.70975 7.87276 3.54168 8.25134C3.48042 8.38933 3.42245 8.52909 3.36785 8.67053C3.21868 9.05695 2.7845 9.24928 2.39808 9.10012C2.01166 8.95095 1.81932 8.51677 1.96849 8.13035C2.03201 7.9658 2.09946 7.80321 2.17071 7.64271C2.33878 7.26412 2.78193 7.09347 3.16051 7.26154Z\" clip-rule=\"evenodd\" opacity=\".5\"/><path d=\"M12 8.25C12.4142 8.25 12.75 8.58579 12.75 9V12.25H16C16.4142 12.25 16.75 12.5858 16.75 13C16.75 13.4142 16.4142 13.75 16 13.75H12C11.5858 13.75 11.25 13.4142 11.25 13V9C11.25 8.58579 11.5858 8.25 12 8.25Z\" opacity=\".5\"/></g>", width: 24, height: 24 },
+    "solar:inbox-in-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z\" opacity=\".5\"/><path d=\"M3.46451 20.5355C4.92902 22 7.28611 22 12.0003 22C16.7145 22 19.0716 22 20.5361 20.5355C21.8931 19.1785 21.9927 17.0551 22 13H18.8402C17.935 13 17.4824 13 17.0846 13.183C16.6868 13.3659 16.3922 13.7096 15.8031 14.3968L15.1977 15.1032C14.6086 15.7904 14.314 16.1341 13.9162 16.317C13.5183 16.5 13.0658 16.5 12.1606 16.5H11.84C10.9348 16.5 10.4822 16.5 10.0844 16.317C9.68655 16.1341 9.392 15.7904 8.80291 15.1032L8.19747 14.3968C7.60837 13.7096 7.31382 13.3659 6.91599 13.183C6.51815 13 6.06555 13 5.16035 13H2C2.0073 17.0551 2.10744 19.1785 3.46451 20.5355Z\"/><path d=\"M12.5305 11.3301C12.3899 11.4708 12.1991 11.5498 12.0002 11.5498C11.8013 11.5498 11.6105 11.4708 11.4699 11.3301L8.16987 8.03014C7.87697 7.73724 7.87697 7.26237 8.16987 6.96948C8.46276 6.67658 8.93763 6.67658 9.23053 6.96947L11.2502 8.98914L11.2502 2.00024C11.4933 2 11.7431 2 12 2C12.257 2 12.507 2 12.7502 2.00024V8.98914L14.7699 6.96947C15.0628 6.67658 15.5376 6.67658 15.8305 6.96947C16.1234 7.26237 16.1234 7.73724 15.8305 8.03013L12.5305 11.3301Z\"/></g>", width: 24, height: 24 },
     "solar:layers-minimalistic-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M7.62442 4.4489C9.50121 3.69796 10.6208 3.25 12 3.25C13.3792 3.25 14.4988 3.69796 16.3756 4.4489L19.3451 5.6367C20.2996 6.01851 21.0728 6.32776 21.6035 6.60601C21.8721 6.74683 22.1323 6.90648 22.333 7.09894C22.5392 7.29668 22.75 7.59658 22.75 8C22.75 8.40342 22.5392 8.70332 22.333 8.90106C22.1323 9.09352 21.8721 9.25317 21.6035 9.39399C21.0728 9.67223 20.2996 9.98148 19.3451 10.3633L16.3756 11.5511C14.4988 12.302 13.3792 12.75 12 12.75C10.6208 12.75 9.50121 12.302 7.62443 11.5511L4.65495 10.3633C3.70037 9.98149 2.9272 9.67223 2.39647 9.39399C2.12786 9.25317 1.86765 9.09352 1.66701 8.90106C1.46085 8.70332 1.25 8.40342 1.25 8C1.25 7.59658 1.46085 7.29668 1.66701 7.09894C1.86765 6.90648 2.12786 6.74683 2.39647 6.60601C2.92721 6.32776 3.70037 6.01851 4.65496 5.63669L7.62442 4.4489Z\"/><path d=\"M2.50248 11.4432L2.49899 11.4402C2.19062 11.1654 1.71762 11.1915 1.44158 11.4992C1.16499 11.8075 1.19103 12.282 1.49936 12.5586C1.49936 12.5586 1.49905 12.5583 1.99987 12L1.49936 12.5586L1.50044 12.5595L1.5022 12.5611L1.50682 12.5652L1.52052 12.5772C1.53164 12.5868 1.54671 12.5997 1.56573 12.6155C1.60379 12.6473 1.65768 12.6911 1.72743 12.745C1.86692 12.8528 2.06992 13.001 2.33649 13.1739C2.86958 13.5196 3.65745 13.9644 4.70015 14.3814L7.50862 15.5048L7.62429 15.5511C9.50108 16.302 10.6206 16.75 11.9999 16.75C13.3791 16.75 14.4987 16.302 16.3754 15.5511L16.4911 15.5048L19.2996 14.3814C20.3423 13.9644 21.1302 13.5196 21.6632 13.1739C21.9298 13.001 22.1328 12.8528 22.2723 12.745C22.3421 12.6911 22.3959 12.6473 22.434 12.6155C22.453 12.5997 22.4681 12.5868 22.4792 12.5772L22.4929 12.5652L22.4975 12.5611L22.4993 12.5595L22.5007 12.5583C22.809 12.2817 22.8347 11.8075 22.5582 11.4992C22.2821 11.1915 21.8093 11.1652 21.501 11.44L21.4993 11.4415L21.4973 11.4432C21.4929 11.4471 21.4846 11.4541 21.4726 11.4641C21.4486 11.4842 21.4094 11.5161 21.3551 11.5581C21.2463 11.6422 21.077 11.7663 20.8471 11.9154C20.3872 12.2136 19.6857 12.6115 18.7425 12.9887L15.934 14.1121C13.9092 14.922 13.0603 15.25 11.9999 15.25C10.9395 15.25 10.0905 14.922 8.06571 14.1121L5.25724 12.9887C4.31406 12.6115 3.61251 12.2136 3.15267 11.9154C2.92276 11.7663 2.7534 11.6422 2.64465 11.5581C2.59029 11.5161 2.5511 11.4842 2.52709 11.4641C2.51509 11.4541 2.50689 11.4471 2.50248 11.4432Z\" opacity=\".5\"/><path d=\"M2.50248 11.4432L2.49899 11.4402C2.19062 11.1654 1.71762 11.1915 1.44158 11.4992C1.16499 11.8075 1.19103 12.282 1.49936 12.5586C1.49936 12.5586 1.49905 12.5583 1.99987 12L1.49936 12.5586L1.50044 12.5595L1.5022 12.5611L1.50682 12.5652L1.52052 12.5772C1.53164 12.5868 1.54671 12.5997 1.56573 12.6155C1.60379 12.6473 1.65768 12.6911 1.72743 12.745C1.86692 12.8528 2.06992 13.001 2.33649 13.1739C2.86958 13.5196 3.65745 13.9644 4.70015 14.3814L7.50862 15.5048L7.62429 15.5511C9.50108 16.302 10.6206 16.75 11.9999 16.75C13.3791 16.75 14.4987 16.302 16.3754 15.5511L16.4911 15.5048L19.2996 14.3814C20.3423 13.9644 21.1302 13.5196 21.6632 13.1739C21.9298 13.001 22.1328 12.8528 22.2723 12.745C22.3421 12.6911 22.3959 12.6473 22.434 12.6155C22.453 12.5997 22.4681 12.5868 22.4792 12.5772L22.4929 12.5652L22.4975 12.5611L22.4993 12.5595L22.5007 12.5583C22.809 12.2817 22.8347 11.8075 22.5582 11.4992C22.2821 11.1915 21.8093 11.1652 21.501 11.44L21.4993 11.4415L21.4973 11.4432C21.4929 11.4471 21.4846 11.4541 21.4726 11.4641C21.4486 11.4842 21.4094 11.5161 21.3551 11.5581C21.2463 11.6422 21.077 11.7663 20.8471 11.9154C20.3872 12.2136 19.6857 12.6115 18.7425 12.9887L15.934 14.1121C13.9092 14.922 13.0603 15.25 11.9999 15.25C10.9395 15.25 10.0905 14.922 8.06571 14.1121L5.25724 12.9887C4.31406 12.6115 3.61251 12.2136 3.15267 11.9154C2.92276 11.7663 2.7534 11.6422 2.64465 11.5581C2.59029 11.5161 2.5511 11.4842 2.52709 11.4641C2.51509 11.4541 2.50689 11.4471 2.50248 11.4432Z\" opacity=\".5\"/><path d=\"M2.49883 15.4991C2.19045 15.2243 1.71762 15.2506 1.44158 15.5583C1.16499 15.8666 1.19103 16.3411 1.49936 16.6177L1.50044 16.6186L1.5022 16.6202L1.50682 16.6243L1.52052 16.6362C1.53164 16.6459 1.54671 16.6587 1.56573 16.6746C1.60379 16.7064 1.65768 16.7502 1.72743 16.8041C1.86692 16.9119 2.06992 17.0601 2.33649 17.233C2.86958 17.5787 3.65745 18.0234 4.70015 18.4405L7.50862 19.5639L7.62429 19.6102C9.50108 20.3611 10.6206 20.8091 11.9999 20.8091C13.3791 20.8091 14.4987 20.3611 16.3754 19.6102L16.4911 19.5639L19.2996 18.4405C20.3423 18.0234 21.1302 17.5787 21.6632 17.233C21.9298 17.0601 22.1328 16.9119 22.2723 16.8041C22.3421 16.7502 22.3959 16.7064 22.434 16.6746C22.453 16.6587 22.4681 16.6459 22.4792 16.6362L22.4929 16.6243L22.4975 16.6202L22.4993 16.6186L22.5007 16.6174C22.809 16.3408 22.8347 15.8666 22.5582 15.5583C22.2821 15.2506 21.8093 15.2243 21.501 15.4991L21.4993 15.5005L21.4973 15.5023C21.4929 15.5061 21.4846 15.5132 21.4726 15.5232C21.4486 15.5432 21.4094 15.5752 21.3551 15.6172C21.2463 15.7013 21.077 15.8254 20.8471 15.9745C20.3872 16.2727 19.6857 16.6705 18.7425 17.0478L15.934 18.1712C13.9092 18.9811 13.0603 19.3091 11.9999 19.3091C10.9395 19.3091 10.0905 18.9811 8.06571 18.1712L5.25724 17.0478C4.31406 16.6705 3.61251 16.2727 3.15267 15.9745C2.92276 15.8254 2.7534 15.7013 2.64465 15.6172C2.59029 15.5752 2.5511 15.5432 2.52709 15.5232C2.51509 15.5132 2.50689 15.5061 2.50248 15.5023L2.49883 15.4991Z\" opacity=\".5\"/></g>", width: 24, height: 24 },
     "solar:lock-keyhole-minimalistic-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.75736 10 5.17157 10 8 10H16C18.8284 10 20.2426 10 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16Z\" opacity=\".5\"/><path d=\"M12.75 14C12.75 13.5858 12.4142 13.25 12 13.25C11.5858 13.25 11.25 13.5858 11.25 14V18C11.25 18.4142 11.5858 18.75 12 18.75C12.4142 18.75 12.75 18.4142 12.75 18V14Z\"/><path d=\"M6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C17.8174 10.0089 18.3135 10.022 18.75 10.0546V8C18.75 4.27208 15.7279 1.25 12 1.25C8.27208 1.25 5.25 4.27208 5.25 8V10.0546C5.68651 10.022 6.18264 10.0089 6.75 10.0036V8Z\"/></g>", width: 24, height: 24 },
+    "solar:logout-2-linear": { body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.2429 22 18.8286 22 16.0002 22H15.0002C12.1718 22 10.7576 22 9.87889 21.1213C9.11051 20.3529 9.01406 19.175 9.00195 17\"/><path stroke-linejoin=\"round\" d=\"M15 12L2 12M5.5 15L2 12L5.5 9\"/></g>", width: 24, height: 24 },
+    "solar:magnifer-linear": { body: "<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"11.5\" cy=\"11.5\" r=\"9.5\"/><path stroke-linecap=\"round\" d=\"M18.5 18.5L22 22\"/></g>", width: 24, height: 24 },
     "solar:microphone-3-bold-duotone": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4 9C4.41421 9 4.75 9.33579 4.75 9.75V10.75C4.75 14.7541 7.99594 18 12 18C16.0041 18 19.25 14.7541 19.25 10.75V9.75C19.25 9.33579 19.5858 9 20 9C20.4142 9 20.75 9.33579 20.75 9.75V10.75C20.75 15.3298 17.2314 19.0879 12.75 19.4683V21.75C12.75 22.1642 12.4142 22.5 12 22.5C11.5858 22.5 11.25 22.1642 11.25 21.75V19.4683C6.7686 19.0879 3.25 15.3298 3.25 10.75V9.75C3.25 9.33579 3.58579 9 4 9Z\" clip-rule=\"evenodd\"/><path fill-rule=\"evenodd\" d=\"M12 2C8.82436 2 6.25 4.57436 6.25 7.75V10.75C6.25 13.9256 8.82436 16.5 12 16.5C15.1756 16.5 17.75 13.9256 17.75 10.75V7.75C17.75 4.57436 15.1756 2 12 2ZM14 11.5C14.4142 11.5 14.75 11.1642 14.75 10.75C14.75 10.3358 14.4142 10 14 10H10C9.58579 10 9.25 10.3358 9.25 10.75C9.25 11.1642 9.58579 11.5 10 11.5H14ZM13.75 7.75C13.75 8.16421 13.4142 8.5 13 8.5H11C10.5858 8.5 10.25 8.16421 10.25 7.75C10.25 7.33579 10.5858 7 11 7H13C13.4142 7 13.75 7.33579 13.75 7.75Z\" clip-rule=\"evenodd\" opacity=\".5\"/><path d=\"M14 11.5C14.4142 11.5 14.75 11.1642 14.75 10.75C14.75 10.3358 14.4142 10 14 10H10C9.58579 10 9.25 10.3358 9.25 10.75C9.25 11.1642 9.58579 11.5 10 11.5H14Z\"/><path d=\"M13 8.5C13.4142 8.5 13.75 8.16421 13.75 7.75C13.75 7.33579 13.4142 7 13 7H11C10.5858 7 10.25 7.33579 10.25 7.75C10.25 8.16421 10.5858 8.5 11 8.5H13Z\"/></g>", width: 24, height: 24 },
+    "solar:monitor-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M10 2H14C17.7712 2 19.6569 2 20.8284 3.17157C22 4.34315 22 6.22876 22 10V11C22 11.5516 22 12.5494 21.9935 13H2.00652C2 12.5494 2 11.5516 2 11V10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.22876 2 10 2Z\" opacity=\".5\"/><path d=\"M7.9846 17.5C5.14528 17.5 3.72562 17.5 2.84356 16.6213C2.27207 16.052 2.07085 15.2579 2 14V13H22V14C21.9292 15.2579 21.7279 16.052 21.1564 16.6213C20.2744 17.5 18.8547 17.5 16.0154 17.5H12.7529V21.5H16.0154C16.4312 21.5 16.7683 21.8358 16.7683 22.25C16.7683 22.6642 16.4312 23 16.0154 23H7.9846C7.56879 23 7.23171 22.6642 7.23171 22.25C7.23171 21.8358 7.56879 21.5 7.9846 21.5H11.2471V17.5H7.9846Z\"/></g>", width: 24, height: 24 },
+    "solar:moon-bold-duotone": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M22 12.0004C22 17.5232 17.5228 22.0004 12 22.0004C10.8358 22.0004 9.71801 21.8014 8.67887 21.4357C8.24138 20.3772 8 19.217 8 18.0004C8 15.7792 8.80467 13.7459 10.1384 12.1762C11.31 13.8818 13.2744 15.0004 15.5 15.0004C17.8615 15.0004 19.9289 13.741 21.0672 11.8572C21.3065 11.4612 22 11.5377 22 12.0004Z\" clip-rule=\"evenodd\" opacity=\".5\"/><path d=\"M2 12C2 16.3586 4.78852 20.0659 8.67887 21.4353C8.24138 20.3768 8 19.2166 8 18C8 15.7788 8.80467 13.7455 10.1384 12.1758C9.42027 11.1303 9 9.86422 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12Z\"/></g>", width: 24, height: 24 },
     "solar:moon-sleep-bold-duotone": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M18 2.75C17.5858 2.75 17.25 2.41421 17.25 2C17.25 1.58579 17.5858 1.25 18 1.25H22C22.3034 1.25 22.5768 1.43273 22.6929 1.71299C22.809 1.99324 22.7449 2.31583 22.5304 2.53033L19.8107 5.25H22C22.4142 5.25 22.75 5.58579 22.75 6C22.75 6.41421 22.4142 6.75 22 6.75H18C17.6967 6.75 17.4232 6.56727 17.3071 6.28701C17.191 6.00676 17.2552 5.68417 17.4697 5.46967L20.1894 2.75H18ZM13.5 8.75C13.0858 8.75 12.75 8.41421 12.75 8C12.75 7.58579 13.0858 7.25 13.5 7.25H16.5C16.8034 7.25 17.0768 7.43273 17.1929 7.71299C17.309 7.99324 17.2449 8.31583 17.0304 8.53033L15.3107 10.25H16.5C16.9142 10.25 17.25 10.5858 17.25 11C17.25 11.4142 16.9142 11.75 16.5 11.75H13.5C13.1967 11.75 12.9232 11.5673 12.8071 11.287C12.691 11.0068 12.7552 10.6842 12.9697 10.4697L14.6894 8.75H13.5Z\" clip-rule=\"evenodd\"/><path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 11.5373 21.3065 11.4608 21.0672 11.8568C19.9289 13.7406 17.8615 15 15.5 15C11.9101 15 9 12.0899 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" opacity=\".5\"/></g>", width: 24, height: 24 },
+    "solar:notebook-bold": { body: "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.75 2.0127V22L15 22C17.8284 22 19.2426 22 20.1213 21.1213C21 20.2426 21 18.8284 21 16V8C21 5.17157 21 3.75736 20.1213 2.87868C19.2426 2 17.8284 2 15 2H9L8.75 2.0127ZM10.75 6.5C10.75 6.08579 11.0858 5.75 11.5 5.75H16.5C16.9142 5.75 17.25 6.08579 17.25 6.5C17.25 6.91421 16.9142 7.25 16.5 7.25H11.5C11.0858 7.25 10.75 6.91421 10.75 6.5ZM10.75 10C10.75 9.58579 11.0858 9.25 11.5 9.25H16.5C16.9142 9.25 17.25 9.58579 17.25 10C17.25 10.4142 16.9142 10.75 16.5 10.75H11.5C11.0858 10.75 10.75 10.4142 10.75 10ZM3.0007 7.25C3.00753 4.91427 3.08136 3.676 3.87868 2.87868C4.55366 2.2037 5.54467 2.04722 7.25 2.01095V21.9891C5.54467 21.9528 4.55366 21.7963 3.87868 21.1213C3.08136 20.324 3.00753 19.0857 3.0007 16.75H4C4.41421 16.75 4.75 16.4142 4.75 16C4.75 15.5858 4.41421 15.25 4 15.25H3V12.75H4C4.41421 12.75 4.75 12.4142 4.75 12C4.75 11.5858 4.41421 11.25 4 11.25H3V8.75H4C4.41421 8.75 4.75 8.41421 4.75 8C4.75 7.58579 4.41421 7.25 4 7.25H3.0007ZM3.0007 7.25H2C1.58579 7.25 1.25 7.58579 1.25 8C1.25 8.41421 1.58579 8.75 2 8.75H3V8C3 7.73811 3 7.48834 3.0007 7.25ZM3 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H3V12.75ZM3 15.25H2C1.58579 15.25 1.25 15.5858 1.25 16C1.25 16.4142 1.58579 16.75 2 16.75H3.0007C3 16.5117 3 16.2619 3 16V15.25Z\" clip-rule=\"evenodd\"/>", width: 24, height: 24 },
     "solar:notebook-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M3 8C3 5.17157 3 3.75736 3.87868 2.87868C4.75736 2 6.17157 2 9 2H15C17.8284 2 19.2426 2 20.1213 2.87868C21 3.75736 21 5.17157 21 8V16C21 18.8284 21 20.2426 20.1213 21.1213C19.2426 22 17.8284 22 15 22H9C6.17157 22 4.75736 22 3.87868 21.1213C3 20.2426 3 18.8284 3 16V8Z\" opacity=\".5\"/><path fill-rule=\"evenodd\" d=\"M8.75 2.01221V22.0111H7.25V2.01221H8.75Z\" clip-rule=\"evenodd\"/><path fill-rule=\"evenodd\" d=\"M1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H4C4.41421 7.25 4.75 7.58579 4.75 8C4.75 8.41421 4.41421 8.75 4 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM1.25 16C1.25 15.5858 1.58579 15.25 2 15.25H4C4.41421 15.25 4.75 15.5858 4.75 16C4.75 16.4142 4.41421 16.75 4 16.75H2C1.58579 16.75 1.25 16.4142 1.25 16Z\" clip-rule=\"evenodd\"/><path d=\"M10.75 6.5C10.75 6.08579 11.0858 5.75 11.5 5.75H16.5C16.9142 5.75 17.25 6.08579 17.25 6.5C17.25 6.91421 16.9142 7.25 16.5 7.25H11.5C11.0858 7.25 10.75 6.91421 10.75 6.5Z\"/><path d=\"M10.75 10C10.75 9.58579 11.0858 9.25 11.5 9.25H16.5C16.9142 9.25 17.25 9.58579 17.25 10C17.25 10.4142 16.9142 10.75 16.5 10.75H11.5C11.0858 10.75 10.75 10.4142 10.75 10Z\"/></g>", width: 24, height: 24 },
     "solar:play-bold": { body: "<path fill=\"currentColor\" d=\"M21.4086 9.35258C23.5305 10.5065 23.5305 13.4935 21.4086 14.6474L8.59662 21.6145C6.53435 22.736 4 21.2763 4 18.9671L4 5.0329C4 2.72368 6.53435 1.26402 8.59661 2.38548L21.4086 9.35258Z\"/>", width: 24, height: 24 },
+    "solar:refresh-bold": { body: "<g fill=\"currentColor\"><path d=\"M12.0789 2.25C7.2854 2.25 3.34478 5.913 2.96055 10.5833H2.00002C1.69614 10.5833 1.42229 10.7667 1.30655 11.0477C1.19081 11.3287 1.25606 11.6517 1.47178 11.8657L3.15159 13.5324C3.444 13.8225 3.91567 13.8225 4.20808 13.5324L5.88789 11.8657C6.10361 11.6517 6.16886 11.3287 6.05312 11.0477C5.93738 10.7667 5.66353 10.5833 5.35965 10.5833H4.4668C4.84652 6.75167 8.10479 3.75 12.0789 3.75C14.8484 3.75 17.2727 5.20845 18.6156 7.39279C18.8325 7.74565 19.2944 7.85585 19.6473 7.63892C20.0002 7.42199 20.1104 6.96007 19.8934 6.60721C18.2871 3.99427 15.3873 2.25 12.0789 2.25Z\"/><path d=\"M20.8411 10.4666C20.549 10.1778 20.0789 10.1778 19.7867 10.4666L18.1005 12.1333C17.8841 12.3471 17.8184 12.6703 17.9339 12.9517C18.0495 13.233 18.3235 13.4167 18.6277 13.4167H19.5268C19.1455 17.2462 15.8759 20.25 11.8828 20.25C9.10026 20.25 6.66586 18.7903 5.31796 16.6061C5.10042 16.2536 4.63833 16.1442 4.28583 16.3618C3.93334 16.5793 3.82393 17.0414 4.04146 17.3939C5.65407 20.007 8.56406 21.75 11.8828 21.75C16.6906 21.75 20.6475 18.0892 21.0331 13.4167H22.0002C22.3043 13.4167 22.5783 13.233 22.6939 12.9517C22.8095 12.6703 22.7437 12.3471 22.5274 12.1333L20.8411 10.4666Z\"/></g>", width: 24, height: 24 },
+    "solar:restart-bold": { body: "<path fill=\"currentColor\" d=\"M18.2577 3.50828C18.538 3.62437 18.7207 3.89785 18.7207 4.20119V8.44383C18.7207 8.85805 18.3849 9.19383 17.9707 9.19383H13.728C13.4247 9.19383 13.1512 9.0111 13.0351 8.73085C12.9191 8.45059 12.9832 8.128 13.1977 7.9135L14.8007 6.3105C12.1674 5.20912 9.01606 5.7309 6.87348 7.87348C4.04217 10.7048 4.04217 15.2952 6.87348 18.1265C9.70478 20.9578 14.2952 20.9578 17.1265 18.1265C18.7727 16.4803 19.4622 14.2401 19.1935 12.0937C19.142 11.6827 19.4335 11.3078 19.8445 11.2563C20.2555 11.2049 20.6304 11.4963 20.6819 11.9073C21.0057 14.4934 20.1746 17.1997 18.1872 19.1872C14.7701 22.6043 9.2299 22.6043 5.81282 19.1872C2.39573 15.7701 2.39573 10.2299 5.81282 6.81282C8.55119 4.07444 12.6515 3.5312 15.9309 5.18028L17.4404 3.67086C17.6549 3.45637 17.9774 3.3922 18.2577 3.50828Z\"/>", width: 24, height: 24 },
     "solar:rocket-2-bold-duotone": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M15.5023 14.3674L20.5319 9.35289C21.2563 8.63072 21.6185 8.26963 21.8092 7.81046C22 7.3513 22 6.84065 22 5.81937V5.33146C22 3.76099 22 2.97576 21.5106 2.48788C21.0213 2 20.2337 2 18.6585 2H18.1691C17.1447 2 16.6325 2 16.172 2.19019C15.7114 2.38039 15.3493 2.74147 14.6249 3.46364L9.59522 8.47817C8.74882 9.32202 8.224 9.84526 8.02078 10.3506C7.95657 10.5103 7.92446 10.6682 7.92446 10.8339C7.92446 11.5238 8.48138 12.0791 9.59522 13.1896L9.74492 13.3388L11.4985 11.5591C11.7486 11.3053 12.1571 11.3022 12.4109 11.5523C12.6647 11.8024 12.6678 12.2109 12.4177 12.4647L10.6587 14.2499L10.7766 14.3674C11.8905 15.4779 12.4474 16.0331 13.1394 16.0331C13.2924 16.0331 13.4387 16.006 13.5858 15.9518C14.1048 15.7607 14.6345 15.2325 15.5023 14.3674ZM17.8652 8.47854C17.2127 9.12904 16.1548 9.12904 15.5024 8.47854C14.8499 7.82803 14.8499 6.77335 15.5024 6.12284C16.1548 5.47233 17.2127 5.47233 17.8652 6.12284C18.5177 6.77335 18.5177 7.82803 17.8652 8.47854Z\" clip-rule=\"evenodd\"/><path fill-rule=\"evenodd\" d=\"M2.77409 12.4814C3.07033 12.778 3.07004 13.2586 2.77343 13.5548L2.61779 13.7103C2.48483 13.8431 2.48483 14.058 2.61779 14.1908C2.75125 14.3241 2.96801 14.3241 3.10147 14.1908L4.8136 12.4807C5.1102 12.1845 5.59079 12.1848 5.88704 12.4814C6.18328 12.778 6.18298 13.2586 5.88638 13.5548L4.17426 15.2648C3.4481 15.9901 2.27116 15.9901 1.545 15.2648C0.818334 14.5391 0.818333 13.362 1.545 12.6362L1.70065 12.4807C1.99725 12.1845 2.47784 12.1848 2.77409 12.4814ZM7.29719 16.696C7.5903 16.9957 7.58495 17.4762 7.28525 17.7693L5.55508 19.4614C5.25538 19.7545 4.77481 19.7491 4.48171 19.4494C4.1886 19.1497 4.19395 18.6692 4.49365 18.3761L6.22382 16.684C6.52352 16.3909 7.00409 16.3963 7.29719 16.696ZM11.4811 18.118C11.7774 18.4146 11.7771 18.8952 11.4805 19.1915L9.76834 20.9015C9.63539 21.0343 9.63539 21.2492 9.76834 21.382C9.9018 21.5153 10.1186 21.5153 10.252 21.382L10.4077 21.2265C10.7043 20.9303 11.1849 20.9306 11.4811 21.2272C11.7774 21.5238 11.7771 22.0044 11.4805 22.3006L11.3248 22.4561C10.5987 23.1813 9.42171 23.1813 8.69556 22.4561C7.96889 21.7303 7.96889 20.5532 8.69556 19.8274L10.4077 18.1174C10.7043 17.8211 11.1849 17.8214 11.4811 18.118Z\" clip-rule=\"evenodd\"/><g opacity=\".5\"><path d=\"M10.8461 5.40925L8.65837 7.59037C8.25624 7.99126 7.88737 8.35901 7.59606 8.69145C7.40899 8.90494 7.22204 9.13861 7.06368 9.39679L7.04237 9.37554C7.00191 9.3352 6.98165 9.31501 6.96133 9.29529C6.58108 8.92635 6.1338 8.63301 5.64342 8.43097C5.61722 8.42018 5.59062 8.40964 5.53743 8.38856L5.2117 8.25949C4.77043 8.08464 4.65283 7.51659 4.9886 7.18184C5.95224 6.22112 7.10923 5.06765 7.6676 4.83597C8.16004 4.63166 8.692 4.56368 9.20505 4.6395C9.67514 4.70897 10.1198 4.95043 10.8461 5.40925Z\"/><path d=\"M14.5816 16.8934C14.7579 17.0723 14.8749 17.1987 14.9808 17.3337C15.1204 17.5119 15.2453 17.7012 15.3542 17.8996C15.4767 18.123 15.5718 18.3616 15.7621 18.8389C15.9169 19.2274 16.4315 19.3301 16.7303 19.0322L16.8026 18.9601C17.7662 17.9993 18.9232 16.8458 19.1556 16.2891C19.3605 15.7982 19.4287 15.2678 19.3526 14.7563C19.283 14.2877 19.0408 13.8444 18.5807 13.1205L16.3857 15.3089C15.9745 15.7189 15.5974 16.0949 15.2564 16.3894C15.052 16.5659 14.8284 16.7423 14.5816 16.8934Z\"/></g><g opacity=\".5\"><path d=\"M7.68621 14.5633C7.98263 14.2669 7.98263 13.7863 7.68621 13.4899C7.38979 13.1935 6.90919 13.1935 6.61277 13.4899L4.47036 15.6323C4.17394 15.9287 4.17394 16.4093 4.47036 16.7057C4.76679 17.0021 5.24738 17.0021 5.5438 16.7057L7.68621 14.5633Z\"/><path d=\"M10.4954 17.369C10.7918 17.0726 10.7918 16.592 10.4954 16.2956C10.1989 15.9992 9.71835 15.9992 9.42193 16.2956L7.29417 18.4233C6.99774 18.7198 6.99774 19.2003 7.29417 19.4968C7.59059 19.7932 8.07118 19.7932 8.36761 19.4968L10.4954 17.369Z\"/></g></g>", width: 24, height: 24 },
     "solar:settings-bold-duotone": { body: "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M14.2788 2.15224C13.9085 2 13.439 2 12.5 2C11.561 2 11.0915 2 10.7212 2.15224C10.2274 2.35523 9.83509 2.74458 9.63056 3.23463C9.53719 3.45834 9.50065 3.7185 9.48635 4.09799C9.46534 4.65568 9.17716 5.17189 8.69017 5.45093C8.20318 5.72996 7.60864 5.71954 7.11149 5.45876C6.77318 5.2813 6.52789 5.18262 6.28599 5.15102C5.75609 5.08178 5.22018 5.22429 4.79616 5.5472C4.47814 5.78938 4.24339 6.1929 3.7739 6.99993C3.30441 7.80697 3.06967 8.21048 3.01735 8.60491C2.94758 9.1308 3.09118 9.66266 3.41655 10.0835C3.56506 10.2756 3.77377 10.437 4.0977 10.639C4.57391 10.936 4.88032 11.4419 4.88029 12C4.88026 12.5581 4.57386 13.0639 4.0977 13.3608C3.77372 13.5629 3.56497 13.7244 3.41645 13.9165C3.09108 14.3373 2.94749 14.8691 3.01725 15.395C3.06957 15.7894 3.30432 16.193 3.7738 17C4.24329 17.807 4.47804 18.2106 4.79606 18.4527C5.22008 18.7756 5.75599 18.9181 6.28589 18.8489C6.52778 18.8173 6.77305 18.7186 7.11133 18.5412C7.60852 18.2804 8.2031 18.27 8.69012 18.549C9.17714 18.8281 9.46533 19.3443 9.48635 19.9021C9.50065 20.2815 9.53719 20.5417 9.63056 20.7654C9.83509 21.2554 10.2274 21.6448 10.7212 21.8478C11.0915 22 11.561 22 12.5 22C13.439 22 13.9085 22 14.2788 21.8478C14.7726 21.6448 15.1649 21.2554 15.3694 20.7654C15.4628 20.5417 15.4994 20.2815 15.5137 19.902C15.5347 19.3443 15.8228 18.8281 16.3098 18.549C16.7968 18.2699 17.3914 18.2804 17.8886 18.5412C18.2269 18.7186 18.4721 18.8172 18.714 18.8488C19.2439 18.9181 19.7798 18.7756 20.2038 18.4527C20.5219 18.2105 20.7566 17.807 21.2261 16.9999C21.6956 16.1929 21.9303 15.7894 21.9827 15.395C22.0524 14.8691 21.9088 14.3372 21.5835 13.9164C21.4349 13.7243 21.2262 13.5628 20.9022 13.3608C20.4261 13.0639 20.1197 12.558 20.1197 11.9999C20.1197 11.4418 20.4261 10.9361 20.9022 10.6392C21.2263 10.4371 21.435 10.2757 21.5836 10.0835C21.9089 9.66273 22.0525 9.13087 21.9828 8.60497C21.9304 8.21055 21.6957 7.80703 21.2262 7C20.7567 6.19297 20.522 5.78945 20.2039 5.54727C19.7799 5.22436 19.244 5.08185 18.7141 5.15109C18.4722 5.18269 18.2269 5.28136 17.8887 5.4588C17.3915 5.71959 16.7969 5.73002 16.3099 5.45096C15.8229 5.17191 15.5347 4.65566 15.5136 4.09794C15.4993 3.71848 15.4628 3.45833 15.3694 3.23463C15.1649 2.74458 14.7726 2.35523 14.2788 2.15224Z\" clip-rule=\"evenodd\" opacity=\".5\"/><path d=\"M15.5227 12C15.5227 13.6569 14.1694 15 12.4999 15C10.8304 15 9.47705 13.6569 9.47705 12C9.47705 10.3431 10.8304 9 12.4999 9C14.1694 9 15.5227 10.3431 15.5227 12Z\"/></g>", width: 24, height: 24 },
+    "solar:settings-linear": { body: "<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74457 2.35523 9.35522 2.74458 9.15223 3.23463C9.05957 3.45834 9.0233 3.7185 9.00911 4.09799C8.98826 4.65568 8.70226 5.17189 8.21894 5.45093C7.73564 5.72996 7.14559 5.71954 6.65219 5.45876C6.31645 5.2813 6.07301 5.18262 5.83294 5.15102C5.30704 5.08178 4.77518 5.22429 4.35436 5.5472C4.03874 5.78938 3.80577 6.1929 3.33983 6.99993C2.87389 7.80697 2.64092 8.21048 2.58899 8.60491C2.51976 9.1308 2.66227 9.66266 2.98518 10.0835C3.13256 10.2756 3.3397 10.437 3.66119 10.639C4.1338 10.936 4.43789 11.4419 4.43786 12C4.43783 12.5581 4.13375 13.0639 3.66118 13.3608C3.33965 13.5629 3.13248 13.7244 2.98508 13.9165C2.66217 14.3373 2.51966 14.8691 2.5889 15.395C2.64082 15.7894 2.87379 16.193 3.33973 17C3.80568 17.807 4.03865 18.2106 4.35426 18.4527C4.77508 18.7756 5.30694 18.9181 5.83284 18.8489C6.07289 18.8173 6.31632 18.7186 6.65204 18.5412C7.14547 18.2804 7.73556 18.27 8.2189 18.549C8.70224 18.8281 8.98826 19.3443 9.00911 19.9021C9.02331 20.2815 9.05957 20.5417 9.15223 20.7654C9.35522 21.2554 9.74457 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8477 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.902C15.0117 19.3443 15.2977 18.8281 15.781 18.549C16.2643 18.2699 16.8544 18.2804 17.3479 18.5412C17.6836 18.7186 17.927 18.8172 18.167 18.8488C18.6929 18.9181 19.2248 18.7756 19.6456 18.4527C19.9612 18.2105 20.1942 17.807 20.6601 16.9999C21.1261 16.1929 21.3591 15.7894 21.411 15.395C21.4802 14.8691 21.3377 14.3372 21.0148 13.9164C20.8674 13.7243 20.6602 13.5628 20.3387 13.3608C19.8662 13.0639 19.5621 12.558 19.5621 11.9999C19.5621 11.4418 19.8662 10.9361 20.3387 10.6392C20.6603 10.4371 20.8675 10.2757 21.0149 10.0835C21.3378 9.66273 21.4803 9.13087 21.4111 8.60497C21.3592 8.21055 21.1262 7.80703 20.6602 7C20.1943 6.19297 19.9613 5.78945 19.6457 5.54727C19.2249 5.22436 18.693 5.08185 18.1671 5.15109C17.9271 5.18269 17.6837 5.28136 17.3479 5.4588C16.8545 5.71959 16.2644 5.73002 15.7811 5.45096C15.2977 5.17191 15.0117 4.65566 14.9909 4.09794C14.9767 3.71848 14.9404 3.45833 14.8477 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224Z\"/></g>", width: 24, height: 24 },
+    "solar:sun-2-bold-duotone": { body: "<g fill=\"currentColor\"><path d=\"M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z\"/><path fill-rule=\"evenodd\" d=\"M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12ZM12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25Z\" clip-rule=\"evenodd\"/><g opacity=\".5\"><path d=\"M3.66919 3.7156C3.94869 3.4099 4.42309 3.38867 4.72879 3.66817L6.95081 5.69975C7.25651 5.97925 7.27774 6.45365 6.99824 6.75935C6.71874 7.06505 6.24434 7.08629 5.93865 6.80679L3.71663 4.7752C3.41093 4.4957 3.38969 4.0213 3.66919 3.7156Z\"/><path d=\"M20.3319 3.7156C20.6114 4.0213 20.5902 4.4957 20.2845 4.7752L18.0624 6.80679C17.7567 7.08629 17.2823 7.06505 17.0028 6.75935C16.7233 6.45365 16.7446 5.97925 17.0503 5.69975L19.2723 3.66817C19.578 3.38867 20.0524 3.4099 20.3319 3.7156Z\"/><path d=\"M17.0261 17.0247C17.319 16.7318 17.7938 16.7319 18.0867 17.0248L20.3087 19.2471C20.6016 19.54 20.6016 20.0148 20.3087 20.3077C20.0158 20.6006 19.5409 20.6006 19.248 20.3076L17.026 18.0854C16.7331 17.7924 16.7332 17.3176 17.0261 17.0247Z\"/><path d=\"M6.97521 17.0249C7.2681 17.3177 7.2681 17.7926 6.97521 18.0855L4.75299 20.3077C4.46009 20.6006 3.98522 20.6006 3.69233 20.3077C3.39943 20.0148 3.39943 19.54 3.69233 19.2471L5.91455 17.0248C6.20744 16.732 6.68232 16.732 6.97521 17.0249Z\"/></g></g>", width: 24, height: 24 },
+    "solar:tuning-2-bold": { body: "<g fill=\"currentColor\"><path d=\"M9.25 14C10.9069 14 12.25 15.3431 12.25 17C12.25 18.6569 10.9069 20 9.25 20C7.59315 20 6.25 18.6569 6.25 17C6.25 15.3431 7.59315 14 9.25 14Z\"/><path d=\"M14.25 4C12.5931 4 11.25 5.34315 11.25 7C11.25 8.65685 12.5931 10 14.25 10C15.9069 10 17.25 8.65685 17.25 7C17.25 5.34315 15.9069 4 14.25 4Z\"/><path d=\"M8.75 6.20852C9.16421 6.20852 9.5 6.54431 9.5 6.95852C9.5 7.37273 9.16421 7.70852 8.75 7.70852L1.75 7.70852C1.33579 7.70852 1 7.37273 1 6.95852C1 6.54431 1.33579 6.20852 1.75 6.20852H8.75Z\"/><path d=\"M14.75 16.2085C14.3358 16.2085 14 16.5443 14 16.9585C14 17.3727 14.3358 17.7085 14.75 17.7085H21.75C22.1642 17.7085 22.5 17.3727 22.5 16.9585C22.5 16.5443 22.1642 16.2085 21.75 16.2085H14.75Z\"/><path d=\"M1 16.9585C1 16.5443 1.33579 16.2085 1.75 16.2085H3.75C4.16421 16.2085 4.5 16.5443 4.5 16.9585C4.5 17.3727 4.16421 17.7085 3.75 17.7085H1.75C1.33579 17.7085 1 17.3727 1 16.9585Z\"/><path d=\"M21.75 6.20852C22.1642 6.20852 22.5 6.54431 22.5 6.95852C22.5 7.37273 22.1642 7.70852 21.75 7.70852L19.75 7.70852C19.3358 7.70852 19 7.37273 19 6.95852C19 6.54431 19.3358 6.20852 19.75 6.20852H21.75Z\"/></g>", width: 24, height: 24 },
+    "solar:user-linear": { body: "<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"6\" r=\"4\"/><path d=\"M20 17.5C20 19.9853 20 22 12 22C4 22 4 19.9853 4 17.5C4 15.0147 7.58172 13 12 13C16.4183 13 20 15.0147 20 17.5Z\"/></g>", width: 24, height: 24 },
 };
 
 export type IconName = keyof typeof icons;
diff --git a/ui/src/index.ts b/ui/src/index.ts
index f387d183..a327cc21 100644
--- a/ui/src/index.ts
+++ b/ui/src/index.ts
@@ -18,7 +18,12 @@ export { default as StButton } from './elements/StButton.vue';
 export { default as StCard } from './elements/StCard.vue';
 export { default as StEmptyState } from './elements/StEmptyState.vue';
 export { default as StIconButton } from './elements/StIconButton.vue';
+export { default as StInput } from './elements/StInput.vue';
+export { default as StModal } from './elements/StModal.vue';
 export { default as StSkeleton } from './elements/StSkeleton.vue';
+export { default as StSwitch } from './elements/StSwitch.vue';
+export { default as StTextarea } from './elements/StTextarea.vue';
+export { default as StThemeSwitcher } from './elements/StThemeSwitcher.vue';
 
 // Brand
 export { default as StBundleCard } from './brand/StBundleCard.vue';
@@ -26,6 +31,7 @@ export { default as StStatTile } from './brand/StStatTile.vue';
 
 // Shell
 export { default as StAppShell } from './shell/StAppShell.vue';
+export { default as StProfileMenu } from './shell/StProfileMenu.vue';
 export { default as StSidebarNav } from './shell/StSidebarNav.vue';
 
-export type { StNavGroup, StNavItem, StTone, StSize, StPadding, StElevation } from './types';
+export type { StNavGroup, StNavItem, StProfileMenuItem, StTheme, StTone, StSize, StPadding, StElevation } from './types';
diff --git a/ui/src/shell/StAppShell.vue b/ui/src/shell/StAppShell.vue
index 3a3abc43..6a3acd63 100644
--- a/ui/src/shell/StAppShell.vue
+++ b/ui/src/shell/StAppShell.vue
@@ -4,14 +4,9 @@
         :data-rail="collapsed ? 'collapsed' : 'expanded'"
         :style="{ '--sidebar-w': collapsed ? COLLAPSED_W : undefined }"
     >
-        <!--
-            Below md the sidebar is an off-canvas drawer. Left in flow it would eat 272px of a
-            375px viewport, squeezing the content column to a sliver that clips its own
-            children — they stay in the DOM but measure as hidden.
-        -->
         <div
             v-if="drawerOpen"
-            class="st-fixed st-inset-0 st-z-overlay st-bg-ink-950/40 md:st-hidden"
+            class="st-fixed st-inset-0 st-z-overlay st-bg-overlay/40 md:st-hidden"
             @click="drawerOpen = false"
         />
 
@@ -49,8 +44,11 @@
         </aside>
 
         <div class="st-flex-1 st-flex st-flex-col st-min-w-0 st-overflow-hidden">
+            <!-- The translucent fill is a finished token, not `bg-page/80`: dark wants a
+                 different base AND a different alpha (a translucent --surface-card). -->
             <header
-                class="st-shrink-0 st-flex st-items-center st-justify-between st-h-[68px] st-px-4 md:st-px-8 st-border-b st-border-subtle st-bg-page/80 st-backdrop-blur-[8px]"
+                class="st-relative st-z-sticky st-shrink-0 st-flex st-items-center st-justify-between st-h-[68px] st-px-4 md:st-px-8 st-border-b st-border-subtle st-backdrop-blur-[8px]"
+                :style="{ background: 'var(--surface-topbar)' }"
             >
                 <div class="st-flex st-items-center st-gap-3 st-min-w-0">
                     <button
@@ -69,17 +67,18 @@
                     <slot name="header-right" />
                 </div>
             </header>
-
-<!-- overflow-x must be clipped, not visible: the ambient blobs are positioned past the
-                 right edge, and a scrolling box cannot keep overflow-x visible — it would silently
-                 become auto and add a horizontal scrollbar. -->
             <main class="st-flex-1 st-overflow-y-auto st-overflow-x-clip st-relative">
+                <!-- Opacity comes from --blob-alpha rather than a Tailwind `/5` modifier: it is
+                     the one value that differs between themes here (5% light, 3% dark), and a
+                     class can only carry one. -->
                 <template v-if="ambient">
                     <div
-                        class="st-pointer-events-none st-absolute -st-top-[10%] -st-left-[6%] st-w-[36%] st-h-[36%] st-rounded-circle st-bg-primary/5 st-blur-[120px]"
+                        class="st-pointer-events-none st-absolute -st-top-[10%] -st-left-[6%] st-w-[36%] st-h-[36%] st-rounded-circle st-blur-[120px]"
+                        :style="{ background: 'rgb(var(--color-primary) / var(--blob-alpha))' }"
                     />
                     <div
-                        class="st-pointer-events-none st-absolute -st-bottom-[10%] -st-right-[6%] st-w-[36%] st-h-[36%] st-rounded-circle st-bg-accent/5 st-blur-[120px]"
+                        class="st-pointer-events-none st-absolute -st-bottom-[10%] -st-right-[6%] st-w-[36%] st-h-[36%] st-rounded-circle st-blur-[120px]"
+                        :style="{ background: 'rgb(var(--color-accent) / var(--blob-alpha))' }"
                     />
                 </template>
 
diff --git a/ui/src/shell/StProfileMenu.vue b/ui/src/shell/StProfileMenu.vue
new file mode 100644
index 00000000..54a8414a
--- /dev/null
+++ b/ui/src/shell/StProfileMenu.vue
@@ -0,0 +1,252 @@
+<template>
+    <div ref="wrapRef" class="st-relative st-inline-flex st-font-sans" @keydown="onKeydown">
+        <button
+            ref="triggerRef"
+            type="button"
+            aria-haspopup="menu"
+            :aria-expanded="isOpen"
+            :aria-label="labels.menu"
+            class="st-inline-flex st-p-0 st-border-none st-bg-transparent st-cursor-pointer st-rounded-circle st-transition-shadow st-duration-base st-ease-out"
+            :style="{ boxShadow: isOpen ? '0 0 0 3px var(--ring-focus)' : 'none' }"
+            @click="onTriggerClick"
+        >
+            <slot name="trigger">
+                <StAvatar :name="name" :src="avatarSrc" size="md" />
+            </slot>
+        </button>
+
+        <!--
+            Teleported to <body> and positioned `fixed` against the trigger rect. This is not a
+            style preference: the topbar sets `backdrop-filter`, which makes it a containing block
+            for its descendants AND bleeds its blur under them, so an absolutely-positioned panel
+            renders washed out. The design prototype hit exactly this and fixes it the same way.
+        -->
+        <Teleport to="body">
+            <div
+                v-if="isOpen"
+                ref="panelRef"
+                role="menu"
+                :aria-label="labels.menu"
+                class="st-fixed st-box-border st-font-sans st-bg-card st-border st-border-subtle st-rounded-lg st-shadow-lg st-p-[6px]"
+                :style="panelStyle"
+                @keydown="onKeydown"
+            >
+                <div class="st-flex st-items-center st-gap-3 st-px-[14px] st-pt-[14px] st-pb-3">
+                    <StAvatar :name="name" :src="avatarSrc" size="md" />
+                    <div class="st-flex st-min-w-0 st-flex-col st-gap-0.5">
+                        <div class="st-flex st-min-w-0 st-items-center st-gap-1.5">
+                            <span class="st-truncate st-text-base st-font-extrabold st-tracking-tight st-text-strong">{{ name }}</span>
+                            <span
+                                v-if="plan"
+                                class="st-shrink-0 st-rounded-pill st-bg-primary-soft st-px-1.5 st-py-[3px] st-text-2xs st-font-extrabold st-leading-none st-text-rose-700"
+                            >
+                                {{ plan }}
+                            </span>
+                        </div>
+                        <span :title="email" class="st-truncate st-text-sm st-font-semibold st-text-muted">{{ email }}</span>
+                    </div>
+                </div>
+
+                <template v-for="(item, index) in items" :key="index">
+                    <div v-if="item.dividerBefore" class="st-mx-2 st-my-1.5 st-h-px st-bg-ink-150" />
+                    <button
+                        :ref="(el) => setItemRef(el, index)"
+                        role="menuitem"
+                        type="button"
+                        tabindex="-1"
+                        class="st-flex st-w-full st-box-border st-min-h-[44px] st-cursor-pointer st-items-center st-gap-3 st-rounded-md st-border-none st-bg-transparent st-px-3 st-text-left st-font-sans st-text-base st-font-bold st-outline-none st-transition-colors st-duration-fast st-ease-out"
+                        :class="
+                            item.danger
+                                ? 'st-text-danger hover:st-bg-danger-soft focus-visible:st-bg-danger-soft'
+                                : 'st-text-body hover:st-bg-ink-100 focus-visible:st-bg-ink-100'
+                        "
+                        @click="activate(item)"
+                        @focus="focusIndex = index"
+                    >
+                        <StIcon :name="item.icon" :size="20" class="st-shrink-0" :class="item.danger ? 'st-text-danger' : 'st-text-muted'" />
+                        <span class="st-min-w-0 st-flex-1 st-truncate">{{ item.label }}</span>
+                        <span v-if="item.meta" class="st-shrink-0 st-text-xs st-font-bold st-text-faint">{{ item.meta }}</span>
+                    </button>
+                </template>
+            </div>
+        </Teleport>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+    import StAvatar from '../elements/StAvatar.vue';
+    import StIcon from '../icon/StIcon.vue';
+    import type { StProfileMenuItem } from '../types';
+
+    const props = withDefaults(
+        defineProps<{
+            name?: string;
+            email?: string;
+            avatarSrc?: string;
+            /** Optional pill beside the name, e.g. 'Learner'. */
+            plan?: string;
+            items?: StProfileMenuItem[];
+            align?: 'left' | 'right';
+            /** Panel width in px. 284 in the extension popup; the dashboard passes 296. */
+            width?: number;
+            /** v-model:open. Leave undefined to let the component own its own state. */
+            open?: boolean;
+            defaultOpen?: boolean;
+            /**
+             * Every user-visible string. The library has no i18n of its own — it ships to two
+             * apps with different setups — so the consumer passes translations in and the
+             * defaults keep it usable standalone.
+             */
+            labels?: Partial<Record<'menu', string>>;
+        }>(),
+        {
+            name: '',
+            align: 'right',
+            width: 284,
+            // Inlined rather than referencing a const: a withDefaults factory is hoisted out of
+            // the setup scope, so it cannot close over anything declared here.
+            items: () => [
+                { label: 'Profile', icon: 'solar:user-linear' },
+                { label: 'Study settings', icon: 'solar:settings-linear' },
+                { label: 'Sign out', icon: 'solar:logout-2-linear', danger: true, dividerBefore: true },
+            ],
+        }
+    );
+
+    const emit = defineEmits<{ 'update:open': [boolean] }>();
+
+    const DEFAULT_LABELS = { menu: 'Account menu' };
+    const labels = computed(() => ({ ...DEFAULT_LABELS, ...(props.labels ?? {}) }));
+
+    const wrapRef = ref<HTMLElement | null>(null);
+    const panelRef = ref<HTMLElement | null>(null);
+    const triggerRef = ref<HTMLButtonElement | null>(null);
+    const itemRefs = ref<(HTMLButtonElement | null)[]>([]);
+    const focusIndex = ref(-1);
+    /** Drives the entrance transition — flipped on the frame after the panel mounts. */
+    const shown = ref(false);
+    const pos = ref<{ top: number; left: number; right: number } | null>(null);
+
+    // Controlled when `open` is bound, uncontrolled otherwise — the .d.ts contract allows both.
+    const uncontrolled = ref(!!props.defaultOpen);
+    const isOpen = computed({
+        get: () => (props.open === undefined ? uncontrolled.value : props.open),
+        set: (v) => {
+            if (props.open === undefined) uncontrolled.value = v;
+            emit('update:open', v);
+        },
+    });
+
+    function setItemRef(el: unknown, index: number) {
+        itemRefs.value[index] = (el as HTMLButtonElement) ?? null;
+    }
+
+    function place() {
+        const el = wrapRef.value;
+        if (!el) return;
+        const r = el.getBoundingClientRect();
+        pos.value = { top: r.bottom + 10, left: r.left, right: window.innerWidth - r.right };
+    }
+
+    const panelStyle = computed(() => {
+        const p = pos.value;
+        const style: Record<string, string> = {
+            top: p ? `${p.top}px` : '-9999px',
+            // Below md the panel narrows and keeps a 12px viewport gutter (see the clamp below).
+            width: `min(${props.width}px, calc(100vw - 24px))`,
+            zIndex: 'var(--z-overlay)',
+            opacity: shown.value ? '1' : '0',
+            transform: shown.value ? 'translateY(0) scale(1)' : 'translateY(-6px) scale(0.98)',
+            transformOrigin: props.align === 'left' ? 'top left' : 'top right',
+            transition: 'opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)',
+        };
+        if (props.align === 'left') style.left = `${Math.max(12, p?.left ?? 12)}px`;
+        else style.right = `${Math.max(12, p?.right ?? 12)}px`;
+        return style;
+    });
+
+    function onDocumentMousedown(e: MouseEvent) {
+        const target = e.target as Node;
+        if (wrapRef.value?.contains(target) || panelRef.value?.contains(target)) return;
+        isOpen.value = false;
+    }
+
+    watch(isOpen, (open) => {
+        if (!open) {
+            shown.value = false;
+            focusIndex.value = -1;
+            pos.value = null;
+            window.removeEventListener('resize', place);
+            // `true` — must match the addEventListener options or the listener is never removed.
+            window.removeEventListener('scroll', place, true);
+            document.removeEventListener('mousedown', onDocumentMousedown);
+            return;
+        }
+        place();
+        window.addEventListener('resize', place);
+        // Capture phase, so scrolling an inner container (the app shell's <main>) repositions
+        // the panel too — a bubbling listener on window never sees those.
+        window.addEventListener('scroll', place, true);
+        document.addEventListener('mousedown', onDocumentMousedown);
+        requestAnimationFrame(() => {
+            shown.value = true;
+        });
+    });
+
+    onBeforeUnmount(() => {
+        window.removeEventListener('resize', place);
+        window.removeEventListener('scroll', place, true);
+        document.removeEventListener('mousedown', onDocumentMousedown);
+    });
+
+    function close(restoreFocus = true) {
+        isOpen.value = false;
+        if (restoreFocus) triggerRef.value?.focus();
+    }
+
+    function onTriggerClick(e: MouseEvent) {
+        const opening = !isOpen.value;
+        isOpen.value = opening;
+        // A click synthesised from Enter/Space reports detail 0. Opening by keyboard should land
+        // focus on the first row; opening by pointer should leave it on the trigger.
+        if (opening && e.detail === 0) nextTick(() => moveFocus(1));
+    }
+
+    function activate(item: StProfileMenuItem) {
+        item.onClick?.();
+        close(false);
+    }
+
+    /** Roving focus over the menuitems, wrapping at both ends. */
+    function moveFocus(step: number) {
+        const focusable = props.items.map((_, i) => i).filter((i) => itemRefs.value[i]);
+        if (!focusable.length) return;
+        const at = focusable.indexOf(focusIndex.value);
+        const next = focusable[(at + step + focusable.length * 2) % focusable.length] ?? focusable[step > 0 ? 0 : focusable.length - 1];
+        focusIndex.value = next;
+        itemRefs.value[next]?.focus();
+    }
+
+    // Bound to BOTH the wrapper and the panel: the panel is teleported to <body>, so its keydown
+    // events do not bubble through the wrapper the way they would in the same DOM subtree.
+    function onKeydown(e: KeyboardEvent) {
+        if (!isOpen.value) return;
+        if (e.key === 'Escape') {
+            e.stopPropagation();
+            close();
+            return;
+        }
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            moveFocus(e.key === 'ArrowDown' ? 1 : -1);
+            return;
+        }
+        if (e.key === 'Home' || e.key === 'End') {
+            e.preventDefault();
+            focusIndex.value = -1;
+            moveFocus(e.key === 'Home' ? 1 : -1);
+        }
+    }
+
+</script>
diff --git a/ui/src/shell/StSidebarNav.vue b/ui/src/shell/StSidebarNav.vue
index 7ab7f8d5..1764aa40 100644
--- a/ui/src/shell/StSidebarNav.vue
+++ b/ui/src/shell/StSidebarNav.vue
@@ -102,7 +102,8 @@
         padding: 6px 11px;
         border-radius: var(--radius-sm);
         background: rgb(var(--ink-950));
-        color: rgb(var(--white));
+        /* Literal, not var(--white): the dark layer redeclares that as the card neutral. */
+        color: #fff;
         font-size: var(--text-xs);
         font-weight: 700;
         box-shadow: var(--shadow-md);
diff --git a/ui/src/styles/index.css b/ui/src/styles/index.css
index f6749103..c93ca56f 100644
--- a/ui/src/styles/index.css
+++ b/ui/src/styles/index.css
@@ -1,6 +1,8 @@
 /* Google Fonts must be the first statement in the file, or browsers drop it. */
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');
 @import './tokens.css';
+/* MUST come after tokens.css — it re-points the same names under `html[data-theme='dark']`. */
+@import './theme-tokens.css';
 
 @tailwind base;
 @tailwind components;
diff --git a/ui/src/styles/theme-tokens.css b/ui/src/styles/theme-tokens.css
new file mode 100644
index 00000000..aec1f2a4
--- /dev/null
+++ b/ui/src/styles/theme-tokens.css
@@ -0,0 +1,193 @@
+/* ============================================================
+   Subturtle — theme layer (dark).
+
+   ⚠️ SUPERSEDED, AND STILL HERE ON PURPOSE.
+
+   The design system now ships `subturtle-theme.css` (its own tokens/dark.css plus three
+   patches), and THAT is the file this one has to be replaced by, wholesale. It was not
+   available when this was written, so the palette below is the earlier profile-menu
+   handoff's. The two genuinely disagree, so do not reconcile them by hand:
+
+     - ramps here invert step-for-step; there they invert around their MID-step, with
+       --rose-500 / --jade-500 keeping their exact brand values
+     - --paper #161219 here, #15111a there; --surface-card #211b28 here, #1e1826 there
+     - --white is NOT re-pointed here, but IS #1e1826 there ("the card neutral")
+
+   That last one reverses the meaning of --white, so the literal-white audit already done
+   in the components (`st-text-on-brand`, see tailwind.config.cjs) is correct for BOTH and
+   should survive the swap. Everything else in this file is placeholder-accurate only.
+
+   Loaded from index.css
+   immediately after tokens.css, which is the whole mechanism: this file re-points the
+   SAME token names under `html[data-theme='dark']`, so every component already styled with
+   var(--surface-card) / var(--text-body) / var(--ink-100) themes itself with no edits.
+
+   ONE DELIBERATE DIFFERENCE FROM THE HANDOFF FILE — and it is not optional. The handoff
+   writes colours as hex; tokens.css stores them as space-separated RGB channels so
+   Tailwind can compose `rgb(var(--token) / <alpha-value>)`. Shipping the hex verbatim
+   would emit `rgb(#211b28 / 1)` and silently break every `st-` colour utility in dark.
+   The VALUES below are the handoff's, converted channel-for-channel; the two tokens
+   tokens.css documents as finished colours (--ring-focus) or as caller-alpha channels
+   (--surface-overlay) keep their documented form.
+
+   The handoff's translucent tints (rgba(249,30,90,.18) and friends) cannot survive that
+   conversion — a channel token has no room for its own alpha. They are pre-composited
+   against --surface-card (#211b28), the surface they overwhelmingly appear on. The
+   original rgba is kept in a comment beside each so the intent is auditable.
+
+   Two flips make old components theme correctly, per the handoff:
+     1. The --ink-* ramp is INVERTED (ink-50 = darkest). Components use ink-100 as a hover
+        wash and ink-150/200 as hairlines; inverting keeps those roles intact.
+     2. --rose-700 / --jade-700 become LIGHT tints — components use them as "text on a
+        soft brand tint" (avatar initials, plan pill, streak pill), so they have to flip
+        to stay legible.
+
+   --white is NOT re-pointed in THIS file. Under subturtle-theme.css it becomes the card
+   neutral, which is why nothing that means literal white may say var(--white) any more —
+   those now say `st-*-on-brand`, a hard #fff. Never use --white as a surface either way;
+   use --surface-card.
+   ============================================================ */
+
+html[data-theme='dark'] {
+    color-scheme: dark;
+
+    /* ---- Neutrals: inverted warm mauve ramp ---------------- */
+    --ink-50: 34 28 41; /* #221c29 */
+    --ink-100: 42 35 50; /* #2a2332 — row hover wash */
+    --ink-150: 50 42 59; /* #322a3b — divider hairline */
+    --ink-200: 58 49 68; /* #3a3144 — subtle border */
+    --ink-300: 75 65 87; /* #4b4157 */
+    --ink-400: 108 97 121; /* #6c6179 */
+    --ink-500: 157 147 169; /* #9d93a9 — muted text, 5.9:1 on --surface-card */
+    --ink-600: 184 175 194; /* #b8afc2 */
+    --ink-700: 207 200 215; /* #cfc8d7 */
+    --ink-800: 229 224 234; /* #e5e0ea — body text, 13.1:1 */
+    --ink-900: 241 237 244; /* #f1edf4 */
+    --ink-950: 250 248 251; /* #faf8fb — strong text */
+    --paper: 22 18 25; /* #161219 */
+
+    /* ---- Brand ------------------------------------------- */
+    --color-primary: 255 47 102; /* #ff2f66 — +2% lift so rose holds on dark */
+    --color-primary-hover: 255 69 119; /* #ff4577 */
+    --color-primary-press: 227 11 75; /* #e30b4b */
+    --color-primary-soft: 72 28 49; /* rgba(249,30,90,.18) over --surface-card */
+    --color-primary-tint: 55 27 45; /* rgba(249,30,90,.10) over --surface-card */
+    /* Explicit literals, NOT var(--white): subturtle-theme.css redeclares --white as the card
+       neutral, and an alias declared at :root has already resolved by the time we get here. */
+    --color-on-primary: 255 255 255;
+    --color-on-accent: 255 255 255;
+    --rose-700: 255 179 200; /* #ffb3c8 — now "text on rose soft" */
+    --rose-800: 255 143 174; /* #ff8fae */
+    --rose-200: 106 18 49; /* #6a1231 — ::selection background */
+
+    --color-accent: 34 199 149; /* #22c795 */
+    --color-accent-hover: 52 205 156; /* #34cd9c */
+    --color-accent-soft: 31 55 57; /* rgba(20,180,133,.18) over --surface-card */
+    --color-accent-tint: 32 42 49; /* rgba(20,180,133,.10) over --surface-card */
+    --jade-700: 110 226 185; /* #6ee2b9 — "text on jade soft" */
+
+    /* ---- Text -------------------------------------------- */
+    --text-strong: var(--ink-950);
+    --text-body: var(--ink-800);
+    --text-muted: var(--ink-500);
+    --text-faint: var(--ink-400);
+    --text-on-dark: 255 255 255;
+    --text-link: 255 143 174; /* #ff8fae */
+
+    /* ---- Surfaces ---------------------------------------- */
+    --surface-page: 22 18 25; /* #161219 */
+    --surface-card: 33 27 40; /* #211b28 */
+    --surface-sunken: 27 22 32; /* #1b1620 */
+    --surface-raised: 42 35 49; /* #2a2331 */
+    --surface-inverse: 250 248 251; /* #faf8fb */
+    /* Channels, so callers pick their own alpha. The handoff's rgba(8,5,10,.66) is that
+       alpha applied at the call site; scrims here ask for their own. */
+    --surface-overlay: 8 5 10;
+
+    /* ---- Borders & rings --------------------------------- */
+    --border-subtle: 58 49 68; /* #3a3144 */
+    --border-default: 75 65 87; /* #4b4157 */
+    --border-strong: 108 97 121; /* #6c6179 */
+    /* A finished color, not channels — it is dropped straight into box-shadow. */
+    --ring-focus: rgb(255 47 102 / 0.45);
+
+    /* ---- Status ------------------------------------------ */
+    --color-success: 34 199 149; /* #22c795 */
+    --color-success-soft: 31 55 57; /* rgba(20,180,133,.18) over --surface-card */
+    --color-warning: 247 185 85; /* #f7b955 */
+    --color-warning-soft: 71 52 39; /* rgba(245,165,36,.18) over --surface-card */
+    --color-danger: 255 107 107; /* #ff6b6b */
+    --color-danger-soft: 69 40 51; /* rgba(255,107,107,.16) over --surface-card */
+    --color-info: 76 178 245; /* #4cb2f5 */
+    --color-info-soft: 33 50 76; /* rgba(31,156,240,.18) over --surface-card */
+
+    /* ---- Shadows: the warm light tint reads as nothing on dark ---- */
+    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
+    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.48), 0 2px 4px rgb(0 0 0 / 0.32);
+    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.55), 0 4px 12px rgb(0 0 0 / 0.38);
+    --shadow-xl: 0 28px 60px rgb(0 0 0 / 0.62), 0 10px 20px rgb(0 0 0 / 0.4);
+    --shadow-primary: 0 8px 22px rgb(249 30 90 / 0.38);
+    --shadow-accent: 0 8px 22px rgb(20 180 133 / 0.34);
+    --shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.45);
+
+    /* Repo-local additions (not in the handoff), both covering audit items whose only
+       per-theme difference is an alpha the markup cannot express as a token otherwise:
+       the ambient blobs "drop to ~3% in dark", and the topbar's backdrop-filter wants a
+       translucent --surface-card (the handoff's rgba(33,27,40,.72)). */
+    --blob-alpha: 0.03;
+    --surface-topbar: rgb(33 27 40 / 0.72);
+
+    /* ---- The -600 steps, same flip, same reason ------------
+       The handoff flips --rose-700 / --jade-700 because components use them as "text on a
+       soft brand tint". This codebase uses the -600 steps in exactly that role too, and the
+       handoff's audit did not enumerate them: StIconButton's soft variants
+       (st-text-rose-600 / st-text-jade-600), StBadge's soft variants (st-text-red-600,
+       st-text-amber-600, st-text-sky-600), the Progress lock tile and LoginBoardPreview.
+       Left unflipped they keep their light values and fail the handoff's own contrast bar —
+       measured #e30b4b on --color-primary-soft is 2.8:1, under the 3:1 it requires for icons.
+
+       Every value here is one the handoff already supplies for the adjacent step or the
+       status colour, reused rather than invented:
+         --rose-600  = the handoff's --rose-800 / --text-link  (#ff8fae), 6.2:1 on rose soft
+         --jade-600  = the handoff's --color-accent-hover      (#34cd9c), 5.9:1 on jade soft
+         --red-600 / --amber-600 / --sky-600 = the handoff's --color-danger / -warning / -info
+
+       NOTE for review: --red-600 on --color-danger-soft measures 4.4:1, marginally under AA
+       for the 11px badge label. Flagged rather than substituted — picking a different red
+       is a design call, not an implementation one. */
+    --rose-600: 255 143 174; /* #ff8fae */
+    --jade-600: 52 205 156; /* #34cd9c */
+    --red-600: 255 107 107; /* #ff6b6b */
+    --amber-600: 247 185 85; /* #f7b955 */
+    --sky-600: 76 178 245; /* #4cb2f5 */
+}
+
+/* Elevated dark surfaces get a 1px top highlight instead of a heavier shadow — keeps the
+   friendly, soft feel. */
+html[data-theme='dark'] .st-elevated,
+html[data-theme='dark'] [data-elevated] {
+    box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 0.06);
+}
+
+/* Themed images/illustrations: dim by 8% so nothing glares. */
+html[data-theme='dark'] img:not([data-no-dim]) {
+    filter: brightness(0.94);
+}
+
+/* No transition on the theme flip itself — only on hover/press — otherwise the whole page
+   cross-fades and feels laggy. The consumer adds this class for one frame around a change
+   (in the dashboard, plugins/theme.client.ts). Deliberately un-namespaced: it has to reach
+   the host app's own markup, not just `st-` components. */
+html.theme-switching *,
+html.theme-switching *::before,
+html.theme-switching *::after {
+    transition: none !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.01ms !important;
+    }
+}
diff --git a/ui/src/styles/tokens.css b/ui/src/styles/tokens.css
index d0818c0b..d353482b 100644
--- a/ui/src/styles/tokens.css
+++ b/ui/src/styles/tokens.css
@@ -99,6 +99,13 @@
     /* A finished color, not channels — it is dropped straight into box-shadow. */
     --ring-focus: rgb(249 30 90 / 0.35);
 
+    /* Opacity of the ambient page blobs. A token because it is the one thing that differs
+       between themes there — dark drops to 3% so they don't glow (see theme-tokens.css). */
+    --blob-alpha: 0.05;
+    /* Finished colors: the topbar is translucent over its own scroll content, so the alpha
+       is part of the value and differs per theme. */
+    --surface-topbar: rgb(248 245 247 / 0.8);
+
     --color-success: var(--jade-500);
     --color-success-soft: var(--jade-100);
     --color-warning: var(--amber-500);
diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
index d331aa2a..010f5035 100644
--- a/ui/src/types/index.ts
+++ b/ui/src/types/index.ts
@@ -14,6 +14,24 @@ export interface StNavGroup {
     items: StNavItem[];
 }
 
+/** One row in StProfileMenu. Mirrors ProfileMenuItem from the design system's .d.ts. */
+export interface StProfileMenuItem {
+    /** Row label — sentence case ("Sign out", not "Sign Out"). */
+    label: string;
+    /** Iconify Solar icon name, e.g. 'solar:settings-linear'. Must be in the generated set. */
+    icon: string;
+    /** Destructive row: rose-red text, red-tinted hover. */
+    danger?: boolean;
+    /** Draw a hairline divider above this row. */
+    dividerBefore?: boolean;
+    /** Optional trailing micro-label (counter, shortcut). Omit rather than showing a placeholder. */
+    meta?: string;
+    onClick?: () => void;
+}
+
+/** The three states of the appearance switch. `system` follows `prefers-color-scheme`. */
+export type StTheme = 'light' | 'dark' | 'system';
+
 export type StTone = 'primary' | 'accent' | 'neutral' | 'danger';
 export type StSize = 'sm' | 'md' | 'lg';
 export type StPadding = 'none' | 'sm' | 'md' | 'lg';
diff --git a/ui/tailwind.config.cjs b/ui/tailwind.config.cjs
index ec14a96b..63c00a18 100644
--- a/ui/tailwind.config.cjs
+++ b/ui/tailwind.config.cjs
@@ -17,7 +17,7 @@ const scale = (name, steps) => Object.fromEntries(steps.map((s) => [String(s), c
 
 module.exports = {
     prefix: 'st-',
-    darkMode: 'class',
+    darkMode: ['selector', '[data-theme="dark"]'],
     content: ['./src/**/*.{vue,ts}'],
     corePlugins: { preflight: false },
     theme: {
@@ -26,6 +26,12 @@ module.exports = {
             current: 'currentColor',
             inherit: 'inherit',
             white: c('--white'),
+            // Literal #fff, immune to theming. The design system's dark layer redeclares
+            // --white as the CARD NEUTRAL (#1e1826), so `white` is no longer a safe way to
+            // say "ink on a rose CTA" — that meaning lives here instead. Anything sitting on
+            // a brand or status fill uses `on-brand`; anything that is a SURFACE uses
+            // `bg-card`. Never `white` for either.
+            'on-brand': '#fff',
             paper: c('--paper'),
             rose: scale('rose', [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]),
             jade: scale('jade', [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]),
@@ -62,6 +68,9 @@ module.exports = {
                 faint: c('--text-faint'),
                 link: c('--text-link'),
                 'on-dark': c('--text-on-dark'),
+                // The readable pairing for `bg-inverse`: it is the page colour, so it flips
+                // with the surface instead of being a literal that only works in one theme.
+                page: c('--surface-page'),
             },
             backgroundColor: {
                 page: c('--surface-page'),
@@ -69,11 +78,18 @@ module.exports = {
                 sunken: c('--surface-sunken'),
                 raised: c('--surface-raised'),
                 inverse: c('--surface-inverse'),
+                // Scrims and image-overlay pills. NOT `ink-950` — that ramp inverts in dark,
+                // so a scrim written against it would turn into a white veil.
+                overlay: c('--surface-overlay'),
             },
             borderColor: {
                 DEFAULT: c('--border-subtle'),
                 subtle: c('--border-subtle'),
+                default: c('--border-default'),
                 strong: c('--border-strong'),
+                // For rings that punch a component out of whatever it sits on (the avatar's).
+                // `white` would be a literal, and literal white is only ever ink on a rose CTA.
+                card: c('--surface-card'),
             },
             fontFamily: {
                 sans: 'var(--font-sans)',
