diff --git a/frontend/src/components/layout/AuthLayout.vue b/frontend/src/components/layout/AuthLayout.vue
index 3b02a926..4da00aa4 100644
--- a/frontend/src/components/layout/AuthLayout.vue
+++ b/frontend/src/components/layout/AuthLayout.vue
@@ -73,6 +73,10 @@ onMounted(() => {
 .auth-shell-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  background: var(--bg-0);
+  color: var(--text-0);
+  font-family: var(--font-sans);
+  min-height: 100vh;
 }
 @media (max-width: 900px) {
   .auth-shell-split {
@@ -106,6 +110,63 @@ onMounted(() => {
   max-width: 420px;
 }
 
+/* bg-glow primitives for split mode (not in .puro-page ancestor, so puro.css rules don't apply) */
+.auth-shell-split .bg-glow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+.auth-shell-split .bg-glow::before,
+.auth-shell-split .bg-glow::after {
+  content: "";
+  position: absolute;
+  width: 900px;
+  height: 900px;
+  border-radius: 50%;
+  filter: blur(120px);
+  opacity: 0.15;
+}
+.auth-shell-split .bg-glow::before {
+  background: radial-gradient(circle, #22d3ee 0%, transparent 60%);
+  top: -300px;
+  left: -200px;
+}
+.auth-shell-split .bg-glow::after {
+  background: radial-gradient(circle, #a855f7 0%, transparent 60%);
+  top: 200px;
+  right: -300px;
+}
+
+/* Right-side form area (split mode) inherits --text-0 for headings */
+.auth-shell-split .auth-main {
+  position: relative;
+  z-index: 2;
+}
+
+/* In split mode, force Tailwind's light-mode text grays to light colors for dark shell readability.
+ * Uses :deep() to reach slotted LoginView/RegisterView content. */
+.auth-shell-split :deep(.input-label),
+.auth-shell-split :deep(label) {
+  color: var(--text-1) !important;
+}
+.auth-shell-split :deep(.input) {
+  background: var(--bg-1) !important;
+  border-color: var(--border) !important;
+  color: var(--text-0) !important;
+}
+.auth-shell-split :deep(.input::placeholder) {
+  color: var(--text-3) !important;
+}
+.auth-shell-split :deep(.btn-primary) {
+  /* keep existing — should still look good */
+}
+.auth-shell-split :deep(.text-gray-500),
+.auth-shell-split :deep(.text-gray-400) {
+  color: var(--text-2) !important;
+}
+
 /* Legacy-mode (no narrative slot) background — keep existing gradient decorative look */
 .auth-shell:not(.auth-shell-split) {
   display: flex;
diff --git a/frontend/src/views/auth/LoginView.vue b/frontend/src/views/auth/LoginView.vue
index 99260615..d57c80fb 100644
--- a/frontend/src/views/auth/LoginView.vue
+++ b/frontend/src/views/auth/LoginView.vue
@@ -21,8 +21,8 @@
     <div class="space-y-6">
       <!-- Title -->
       <div class="text-center">
-        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('auth.puroLoginTitle') }}</h2>
-        <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">{{ t('auth.puroLoginSub') }}</p>
+        <h2 class="text-2xl font-bold text-slate-50">{{ t('auth.puroLoginTitle') }}</h2>
+        <p class="mt-2 text-sm text-slate-400">{{ t('auth.puroLoginSub') }}</p>
       </div>
 
   <div v-if="!backendModeEnabled && (linuxdoOAuthEnabled || oidcOAuthEnabled)" class="space-y-4">
diff --git a/frontend/src/views/auth/RegisterView.vue b/frontend/src/views/auth/RegisterView.vue
index 11ed0f11..de780ea8 100644
--- a/frontend/src/views/auth/RegisterView.vue
+++ b/frontend/src/views/auth/RegisterView.vue
@@ -21,8 +21,8 @@
     <div class="space-y-6">
       <!-- Title -->
       <div class="text-center">
-        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('auth.puroRegisterTitle') }}</h2>
-        <p class="mt-2 text-sm text-gray-500 dark:text-dark-400">{{ t('auth.puroRegisterSub') }}</p>
+        <h2 class="text-2xl font-bold text-slate-50">{{ t('auth.puroRegisterTitle') }}</h2>
+        <p class="mt-2 text-sm text-slate-400">{{ t('auth.puroRegisterSub') }}</p>
       </div>
 
       <div v-if="linuxdoOAuthEnabled || oidcOAuthEnabled" class="space-y-4">