fix fonts/white boxes when autofll auth page

src/app/pages/auth/styles.css.ts

@@ -285,6 +285,38 @@ globalStyle(`${AuthCardContent} input::placeholder`, {
   color: 'rgba(232, 228, 223, 0.35)',
 });
 
+/*
+ * Chromium's UA stylesheet paints a saved-credentials overlay on
+ * :-webkit-autofill inputs, forcing a light background and dark text. Without
+ * this block, the auth inputs render with an opaque rectangle on top of the
+ * glass card.
+ *
+ *   - `transition: background-color 9999s` defers the UA background animation
+ *      indefinitely (UA !important still sets the target, but the animated
+ *      value never reaches it).
+ *   - `-webkit-background-clip: text` clips any residual background to the
+ *      glyphs, keeping the glass blur visible behind the text.
+ *   - `-webkit-text-fill-color` / `caret-color` override the UA text color
+ *      (these aren't touched by UA !important, unlike `color`).
+ *
+ * There's a separate cosmetic quirk where autofilled text can render in the
+ * Arial web-font fallback until the user focuses the input (Chrome doesn't
+ * repaint autofill on font-swap). Not fixed — happens once per profile on
+ * cold cache, repeat visits hit HTTP cache and render Inter immediately.
+ */
+globalStyle(
+  `${AuthCardContent} input:-webkit-autofill,
+   ${AuthCardContent} input:-webkit-autofill:hover,
+   ${AuthCardContent} input:-webkit-autofill:focus,
+   ${AuthCardContent} input:-webkit-autofill:active`,
+  {
+    WebkitTextFillColor: '#e8e4df',
+    caretColor: '#e8e4df',
+    transition: 'background-color 9999s ease-in-out 0s',
+    WebkitBackgroundClip: 'text',
+  }
+);
+
 globalStyle(`${AuthCardContent} a`, {
   color: '#e8e4df',
   textDecoration: 'underline',