diff --git a/frontend/src/index.css b/frontend/src/index.css
index 487e6d2..d4d417e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -125,6 +125,16 @@ body {
     color: var(--color-text-primary);
 }
 
+/* Google Identity Services renders its sign-in button in a cross-origin iframe
+   whose document is light-scheme with a transparent background. Left to inherit
+   our `color-scheme: dark`, Chrome cannot honour dark there and paints an opaque
+   white canvas behind it instead — framing the pill in a white box on every dark
+   page. Pinning the iframe back to light keeps it transparent; the button's own
+   colours come from the `theme` prop in Topbar.tsx. */
+iframe[src*="accounts.google.com/gsi/"] {
+    color-scheme: light;
+}
+
 /* Clip trim slider (react-range-slider-input). Its own stylesheet ships blue
    defaults; the #id beats those class selectors regardless of import order. */
 #range-slider {