Browser Mod Popup - Status Bar Theme

Hello good people! I’m hoping to theme my iPhone status bar to match the background of my browser mod popups but seem to be coming up empty. In my theme, I know I can change the app-header-background-color element, which I have defined as black in the theme so it blends well in the iOS dark mode. However, for my pop-ups specifically, I want to override this with the color of my pop-up background using --app-header-background-color: rgba(255,255,255,0.1).

Obviously I’m doing something wrong so hoping someone more experienced with YAML / Card Mod / CSS can chime in. I’ve included a code snippet below of what I’ve attempted. Thank you in advance for your help!

type: custom:button-card
icon: mdi:lightning-bolt
aspect_ratio: 1/1
  action: fire-dom-event
    service: browser_mod.popup
          ha-dialog$: |
            :host {
              --mdc-theme-surface: transparent;
              --app-header-background-color: rgba(255,255,255,0.1);

            div.mdc-dialog__scrim {
              backdrop-filter: blur(30px) !important;
              -webkit-backdrop-filter: blur(30px) !important;
              background-color: rgba(255, 255, 255, 0.1) !important;