diff --git a/apps/player/src/components/desktop/DesktopAuthLayout.vue b/apps/player/src/components/desktop/DesktopAuthLayout.vue
index a0fc389..25407fd 100644
--- a/apps/player/src/components/desktop/DesktopAuthLayout.vue
+++ b/apps/player/src/components/desktop/DesktopAuthLayout.vue
@@ -112,6 +112,8 @@ withDefaults(
 }
 
 .auth-card {
+  position: relative;
+  isolation: isolate;
   width: 100%;
   max-width: 720px;
   background:
@@ -123,6 +125,48 @@ withDefaults(
   border-radius: 0;
   box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
   overflow: hidden;
+  transition:
+    filter 0.22s ease,
+    transform 0.22s ease;
+}
+
+.auth-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0;
+  background: url('../../assets/images/generated/auth-panel-bg-v1.webp') center / 100% 100% no-repeat;
+  filter: brightness(1.28) saturate(1.16);
+  mix-blend-mode: screen;
+  transition: opacity 0.22s ease;
+}
+
+.auth-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0;
+  background:
+    linear-gradient(90deg, transparent 8%, rgba(255, 226, 156, 0.08) 50%, transparent 92%),
+    radial-gradient(circle at 72% 48%, rgba(212, 175, 55, 0.1), transparent 34%);
+  transition: opacity 0.22s ease;
+}
+
+.auth-card:focus-within {
+  transform: translateY(-2px);
+  filter: brightness(1.04) saturate(1.05);
+}
+
+.auth-card:focus-within::before {
+  opacity: 0.2;
+}
+
+.auth-card:focus-within::after {
+  opacity: 1;
 }
 
 .auth-card--wide {
@@ -130,12 +174,16 @@ withDefaults(
 }
 
 .form-lang {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: flex-end;
   padding: 14px 24px 0;
 }
 
 .form-body {
+  position: relative;
+  z-index: 1;
   display: grid;
   grid-template-columns: minmax(200px, 260px) 1fr;
   gap: 24px;
diff --git a/apps/player/src/views/ForgotPasswordView.vue b/apps/player/src/views/ForgotPasswordView.vue
index 608f8e5..5c0da15 100644
--- a/apps/player/src/views/ForgotPasswordView.vue
+++ b/apps/player/src/views/ForgotPasswordView.vue
@@ -274,16 +274,21 @@ label {
 }
 
 .field-input {
+  appearance: none;
+  -webkit-appearance: none;
   width: 100%;
   height: 36px;
   padding: 0 10px;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: #0d0d0d;
+  background-color: #0d0d0d;
   color: var(--text);
+  -webkit-text-fill-color: var(--text);
   font-size: 14px;
   font-family: inherit;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  caret-color: var(--primary-light, #f0d875);
 }
 
 .field-input::placeholder {
@@ -304,7 +309,26 @@ label {
 
 .login-page--desktop .field-input:focus {
   border-color: var(--border-gold, #d4af37);
-  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
+  color: var(--text);
+  -webkit-text-fill-color: var(--text);
+  background:
+    linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 72%),
+    #0d0d0d;
+  background-color: #0d0d0d;
+  box-shadow:
+    inset 0 0 18px rgba(212, 175, 55, 0.08),
+    0 0 14px rgba(212, 175, 55, 0.14);
+}
+
+.login-page--desktop .field-input:-webkit-autofill,
+.login-page--desktop .field-input:-webkit-autofill:hover,
+.login-page--desktop .field-input:-webkit-autofill:focus {
+  border-color: var(--border-gold, #d4af37);
+  -webkit-text-fill-color: var(--text);
+  box-shadow:
+    0 0 0 1000px #0d0d0d inset,
+    inset 0 0 18px rgba(212, 175, 55, 0.08);
+  transition: background-color 9999s ease-out;
 }
 
 .login-page--desktop .field-input:hover:not(:focus) {
diff --git a/apps/player/src/views/LoginView.vue b/apps/player/src/views/LoginView.vue
index ae7a5de..29bbbc7 100644
--- a/apps/player/src/views/LoginView.vue
+++ b/apps/player/src/views/LoginView.vue
@@ -286,16 +286,21 @@ function goRegister() {
 }
 
 .field-input {
+  appearance: none;
+  -webkit-appearance: none;
   width: 100%;
   height: 36px;
   padding: 0 10px;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: #0d0d0d;
+  background-color: #0d0d0d;
   color: var(--text);
+  -webkit-text-fill-color: var(--text);
   font-size: 14px;
   font-family: inherit;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  caret-color: var(--primary-light, #f0d875);
 }
 
 .field-input:focus {
@@ -313,7 +318,26 @@ function goRegister() {
 
 .login-page--desktop .field-input:focus {
   border-color: var(--border-gold, #D4AF37);
-  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
+  color: var(--text);
+  -webkit-text-fill-color: var(--text);
+  background:
+    linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 72%),
+    #0d0d0d;
+  background-color: #0d0d0d;
+  box-shadow:
+    inset 0 0 18px rgba(212, 175, 55, 0.08),
+    0 0 14px rgba(212, 175, 55, 0.14);
+}
+
+.login-page--desktop .field-input:-webkit-autofill,
+.login-page--desktop .field-input:-webkit-autofill:hover,
+.login-page--desktop .field-input:-webkit-autofill:focus {
+  border-color: var(--border-gold, #D4AF37);
+  -webkit-text-fill-color: var(--text);
+  box-shadow:
+    0 0 0 1000px #0d0d0d inset,
+    inset 0 0 18px rgba(212, 175, 55, 0.08);
+  transition: background-color 9999s ease-out;
 }
 
 .login-page--desktop .field-input:hover:not(:focus) {
diff --git a/apps/player/src/views/RegisterView.vue b/apps/player/src/views/RegisterView.vue
index e09b5a1..74a0b3b 100644
--- a/apps/player/src/views/RegisterView.vue
+++ b/apps/player/src/views/RegisterView.vue
@@ -358,16 +358,21 @@ label {
 }
 
 .field-input {
+  appearance: none;
+  -webkit-appearance: none;
   width: 100%;
   height: 36px;
   padding: 0 10px;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: #0d0d0d;
+  background-color: #0d0d0d;
   color: var(--text);
+  -webkit-text-fill-color: var(--text);
   font-size: 14px;
   font-family: inherit;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  caret-color: var(--primary-light, #f0d875);
 }
 
 .field-input::placeholder {
@@ -389,7 +394,26 @@ label {
 
 .login-page--desktop .field-input:focus {
   border-color: var(--border-gold, #D4AF37);
-  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
+  color: var(--text);
+  -webkit-text-fill-color: var(--text);
+  background:
+    linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent 72%),
+    #0d0d0d;
+  background-color: #0d0d0d;
+  box-shadow:
+    inset 0 0 18px rgba(212, 175, 55, 0.08),
+    0 0 14px rgba(212, 175, 55, 0.14);
+}
+
+.login-page--desktop .field-input:-webkit-autofill,
+.login-page--desktop .field-input:-webkit-autofill:hover,
+.login-page--desktop .field-input:-webkit-autofill:focus {
+  border-color: var(--border-gold, #D4AF37);
+  -webkit-text-fill-color: var(--text);
+  box-shadow:
+    0 0 0 1000px #0d0d0d inset,
+    inset 0 0 18px rgba(212, 175, 55, 0.08);
+  transition: background-color 9999s ease-out;
 }
 
 .login-page--desktop .field-input:hover:not(:focus) {