Guys.
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. 
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
trigger:
- platform: state
entity_id:
- light.landing
from: 'off'
to: 'on'
condition: []
action:
- service: browser_mod.popup
data:
title: ALERT. ACTION NEEDED
dismissable: true
autoclose: false
card:
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