Unable to get CSS styles to apply to automated markdown card (initiated by browser_mod.popup

There was a thread open about this some time ago, but it seems to have been closed (and the stated fix in the thread didn’t make any difference to my issue).

Caveat: I’m not a software developer, so I have limited coding abilities!

Aim: I want a popup card to appear when an entity state changes. This will be an alert that something is amiss, and is dismissable by the user. The CSS for popup card should be tailorable, so I can have it stand out from the dark background.

Scenario: The final use of this will be for a freezer door left open for some period of time. However, as I don’t have the hardware yet for the freezer, I was using a light as a template - i.e. when the light comes on, the popup card is triggered. (The ability to have it jump up in the middle of the screen would be great, but not essential.)

Results: When the event is triggered (i.e. light switches on), a markup card indeed does pop up on the screen - Yea! However, it is a generic black box with white text and hard to see against the dark background. Clearly, my ‘style’ CSS commands are being ignored. I’ve tried various changes to the CSS, but to no avail. :frowning:

Any guidance would be appreciated. Code of the automation is given below (although the cut-n-paste may have screwed up the indentations).

- id: '1680206256594'
  alias: Test Popup for Light
  description: Tests Popup if Light Comes On
    - platform: state
      - light.landing
    from: 'off'
    to: 'on'
  condition: []
    - service: browser_mod.popup
      dismissable: true
      autoclose: false
        type: markdown
        style: |
          ha-card {
          color: red;
          width: 100%;
          height: 100%;
          background-color: #3C4048;
          text-align: center;
          padding-top: 0px;
          font-size: 30px;
    content: Alcove Light is On
    size: normal
  mode: single


First step for you to get helpful reactions is to correctly format the code in you post.
See: How to help us help you - or How to ask a good question and specifically Format it properly.

What I don’t understand from your automation code is that there only is a Trigger defined, and no Action?

Mea Culpa (on the formatting). My bad, sorry.

There is an action (a service call for a browser mod.popup). As I said, this works fine, but I’m trying to understand why the CSS formatting is ignored