diff --git a/src/lib/app_components/e_app_sys_bar.svelte b/src/lib/app_components/e_app_sys_bar.svelte
index 8f3b27ad..55dba955 100644
--- a/src/lib/app_components/e_app_sys_bar.svelte
+++ b/src/lib/app_components/e_app_sys_bar.svelte
@@ -258,11 +258,17 @@ function apply_theme(value: string) {
             ae_sys_panel
             flex max-h-[80vh] w-80 max-w-[94vw]
             flex-col items-stretch
-            gap-0 overflow-x-hidden overflow-y-auto
-            rounded-xl border border-gray-200/70 bg-white/85 text-sm
-            text-gray-900 shadow-2xl backdrop-blur-md
-            dark:border-gray-700/70 dark:bg-gray-900/85
-            dark:text-gray-100
+            gap-0
+            overflow-x-hidden overflow-y-auto
+            rounded-xl border
+            border-primary-400-600/50
+            bg-white/0 dark:bg-gray-900/60
+            shadow-2xl backdrop-blur-md
+            text-sm
+            text-gray-950-50
+            transition-all
+            duration-300
+
         ">
             <!-- Panel header: person info + close -->
             <div
@@ -285,9 +291,9 @@ function apply_theme(value: string) {
                 </div>
                 <button
                     type="button"
-                    class="btn btn-icon btn-sm preset-tonal-surface hover:preset-filled-error ml-2 shrink-0 transition-all"
+                    class="btn btn-icon btn-sm preset-filled-tertiary-200-800 hover:preset-filled-error ml-2 shrink-0 transition-all"
                     onclick={toggle_expand}
-                    title="Close menu">
+                    title="Close the Aether system menu">
                     <CircleX size="1.1em" />
                 </button>
             </div>
@@ -297,7 +303,7 @@ function apply_theme(value: string) {
                 <div class="border-b border-gray-100 dark:border-gray-800">
                     <button
                         type="button"
-                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
+                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                         onclick={() => (sec_signin = !sec_signin)}>
                         <span class="flex min-w-0 items-center gap-1.5">
                             {#if $ae_loc?.person_id && $ae_loc?.user_id}
@@ -337,7 +343,7 @@ function apply_theme(value: string) {
                 <div class="border-b border-gray-100 dark:border-gray-800">
                     <button
                         type="button"
-                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
+                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                         onclick={() => (sec_access = !sec_access)}>
                         <span class="flex min-w-0 items-center gap-1.5">
                             {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'}
@@ -391,7 +397,7 @@ function apply_theme(value: string) {
             <div class="border-b border-gray-100 dark:border-gray-800">
                 <button
                     type="button"
-                    class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
+                    class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                     onclick={() => (sec_appearance = !sec_appearance)}>
                     <span class="flex items-center gap-1">
                         <Palette size="1em" class="opacity-60" />
@@ -411,8 +417,8 @@ function apply_theme(value: string) {
                                 type="button"
                                 class="btn btn-sm flex-1 transition-all
                                 {$ae_loc?.theme_mode === 'dark'
-                                    ? 'preset-tonal-secondary hover:preset-filled-secondary-500'
-                                    : 'preset-tonal-warning hover:preset-filled-warning-500'}"
+                                    ? 'preset-tonal-secondary hover:preset-filled-secondary-400-600'
+                                    : 'preset-tonal-secondary hover:preset-filled-secondary-400-600'}"
                                 onclick={toggle_theme_mode}
                                 title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
                                     'unknown'})">
@@ -426,7 +432,7 @@ function apply_theme(value: string) {
                             </button>
                             <button
                                 type="button"
-                                class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary flex-1 transition-all"
+                                class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-400-600 flex-1 transition-all"
                                 onclick={cycle_font_size}
                                 title={font_title}>
                                 <span class="text-sm leading-none font-bold"
@@ -438,11 +444,11 @@ function apply_theme(value: string) {
 
                         <!-- Theme picker: compact grouped select -->
                         <div class="flex items-center gap-2">
-                            <span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">Theme</span>
+                            <span class="shrink-0 text-xs text-surface-600-400">Theme</span>
                             <select
                                 bind:value={$ae_loc.theme_name}
                                 onchange={(e) => apply_theme((e.target as HTMLSelectElement).value)}
-                                class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-1 text-xs text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                                class="flex-1 rounded-md border border-gray-200 px-2 py-1 text-xs text-surface-800-200 dark:border-gray-600 bg-surface-200-800"
                                 title="Select theme (current: {$ae_loc.theme_name ?? 'default'})">
                                 <optgroup label="System">
                                     {#each skeleton_themes as opt (opt.value)}
@@ -470,7 +476,7 @@ function apply_theme(value: string) {
                 <div class="border-b border-gray-100 dark:border-gray-800">
                     <button
                         type="button"
-                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800"
+                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                         onclick={() => (sec_dev = !sec_dev)}>
                         <span class="flex items-center gap-1">
                             <Bug size="0.9em" class="opacity-60" />
@@ -596,16 +602,16 @@ function apply_theme(value: string) {
             class="
                 ae_sys_bar__strip
                 flex h-9 flex-row items-center
-                gap-1
+                gap-1 px-2
                 rounded-xl border
-                border-gray-200/60
-                bg-white/30 px-2 shadow-lg
-                backdrop-blur-sm
-                transition-colors
+                border-primary-400-600/50
+                bg-white/30  dark:bg-gray-900/30
+                shadow-lg backdrop-blur-sm
+                text-gray-900-100
+                transition-all
                 duration-300
-                dark:border-gray-700/60 dark:bg-gray-900/30
             "
-            class:border-primary-400={expand}>
+            class:border-primary-400-600={expand}>
             <!-- AUTH STATUS SHIELD — hidden in iframe; host page manages auth context -->
             {#if !$ae_loc?.iframe}
                 {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous' && expand}
@@ -613,13 +619,14 @@ function apply_theme(value: string) {
                     type="button"
                     class="
                         btn btn-sm group/shield transition-all duration-200
+                        preset-tonal-surface preset-outlined-surface
                         {$ae_loc?.access_type &&
                     $ae_loc?.access_type !== 'anonymous'
                         ? $ae_loc?.user_access_type &&
                           $ae_loc?.access_type === $ae_loc?.user_access_type
-                            ? 'variant-outline-surface hover:variant-ghost-warning'
-                            : 'variant-outline-warning hover:variant-ghost-warning'
-                        : 'variant-outline-surface hover:variant-ghost-success'}
+                            ? 'hover:preset-tonal-success'
+                            : 'preset-tonal-warning hover:preset-tonal-warning'
+                        : 'preset-outlined-surface hover:preset-tonal-success'}
                     "
                     onclick={handle_shield_click}
                     title={$ae_loc?.access_type &&
@@ -721,9 +728,9 @@ function apply_theme(value: string) {
             <!-- MENU EXPAND / COLLAPSE ───────────────────────────────────── -->
             <button
                 type="button"
-                class="btn btn-sm preset-filled-tertiary-400-600 hover:preset-filled-success group/menu transition-all duration-200"
+                class="btn btn-sm preset-filled-tertiary-200-800 hover:preset-filled-success group/menu transition-all duration-200"
                 onclick={toggle_expand}
-                title={expand ? 'Close menu' : 'Open menu'}>
+                title={expand ? 'Close the Aether system menu' : 'Open menu'}>
                 {#if expand}
                     <CircleX size="1.1em" class="shrink-0" />
                     <span