#notifications-main { max-width: 1000px; margin: auto; padding-inline: 24px; }
#notifications-main h1 { font-size: clamp(2rem,5vw,3rem); color: #214742; margin-block: 24px 16px; text-wrap: balance; }
#notifications-main .commerce-note { margin-inline: 0; max-width: 70ch; }
.notification-sources { display: flex; flex-wrap: wrap; gap: 24px; margin-block: 28px; border-bottom: 1px solid #799f90; }
.notification-sources a { padding-block: 12px; text-decoration-thickness: 1px; }
.notification-sources a[aria-current=page] { color: #1c6558; text-decoration-thickness: 3px; }
.notification-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 20px; }
.notification-filters label { min-width: min(100%,180px); flex: 1; }
.notification-actions { margin-block: 24px; }
.notification-row { padding-block: 24px; border-bottom: 1px solid #799f90; overflow-wrap: anywhere; }
.notification-row h2 { color: #214742; font-size: 1.2rem; line-height: 1.5; margin-bottom: 10px; }
.notification-row p { max-width: 70ch; white-space: pre-wrap; margin-block: 12px; color: #496960; }
.notification-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 12px; color: #496960; }
.notification-meta time { font-variant-numeric: tabular-nums; }
.notification-meta strong { color: #1c6558; }
.notification-row .commerce-actions { margin-top: 16px; }
#notif-list:empty { min-height: 40px; }
#notif-page { color: #496960; }
#notif-scope { margin-top: 32px; }
@media(max-width:600px) { #notifications-main { padding-inline: 16px; } .notification-filters { gap: 12px; } .notification-actions { align-items: stretch; } }