.notification-bell { position: relative; background: transparent; border: 0; color: var(--ui-text); }
.notification-count[hidden] { display: none; }
html[data-theme] body .notification-menu {
    width: 360px; max-width: calc(100vw - 24px); padding: 0;
    background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border);
}
.notification-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-bottom: 1px solid var(--ui-border); }
.notification-read-all { color: var(--ui-accent); }
.notification-list { max-height: min(420px, 60vh); overflow-y: auto; }
html[data-theme] body a.notification-item { display: block; padding: 12px; white-space: normal; border-bottom: 1px solid var(--ui-border); color: var(--ui-text); }
.notification-item.unread { background: var(--ui-raised); border-left: 3px solid var(--ui-accent); }
.notification-item strong, .notification-item span, .notification-item small { display: block; }
.notification-item span { margin: 4px 0; font-size: 12px; }
.notification-item small { color: var(--ui-muted); }
.notification-empty, .notification-status { padding: 12px; margin: 0; font-size: 12px; color: var(--ui-muted); }
.notification-status:empty { display: none; }
.notification-item:focus-visible, .notification-bell:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
@media (max-width: 575.98px) {
    .account-notifications { position: static; }
    html[data-theme] body .notification-menu { position: absolute; right: 12px; left: auto; top: 100%; }
}