.opal-notifications { position: fixed; inset: 0; z-index: 75; overflow-y: auto; background: #fff; color: #171717; padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom)); }
.opal-notifications[hidden] { display: none; }
.opal-notifications > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 620px; margin: 0 auto 48px; }
.opal-notifications h1 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(27px, 6vw, 36px); }
.notifications-close { border: 0; background: none; color: #666; font: inherit; cursor: pointer; padding: 12px 0; }
.notifications-state, .notifications-detail, .notifications-message { max-width: 620px; margin: 0 auto; line-height: 1.6; }
.notifications-state { font-size: 20px; margin-bottom: 14px; }
.notifications-detail { color: #666; }
.notifications-message { min-height: 26px; color: #666; margin-top: 18px; }
.notifications-toggle { display: block; width: min(100%, 620px); margin: 30px auto 0; padding: 16px 24px; min-height: 52px; border: 1px solid #171717; border-radius: 16px; background: #171717; color: #fff; font: inherit; cursor: pointer; }
.notifications-toggle:disabled { opacity: .5; cursor: default; }
.notifications-toggle:focus-visible, .notifications-close:focus-visible { outline: 2px solid #777; outline-offset: 4px; }