.notification-bell { position: relative; flex: 0 0 48px; width: 48px; height: 48px; padding: 12px; }
.notification-count { position: absolute; top: 1px; right: 0; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 12px; background: #bd1520; color: #fff; font-size: 14px; font-weight: 700; line-height: 22px; text-align: center; }
.notification-count[hidden] { display: none; }
body.notifications-open { overflow: hidden; }
.notification-backdrop { position: fixed; z-index: 109; inset: 0; background: rgb(23 34 29 / 30%); }
.notification-panel { position: fixed; z-index: 110; top: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; width: min(480px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-subtle, #dce3df); border-radius: 16px; box-shadow: 0 16px 48px rgb(23 34 29 / 18%); overflow: hidden; }
.notification-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 20px 16px; }
.notification-heading h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; }
.notification-heading p, .notification-item p, .notification-popup p { margin: 0; color: var(--muted, #59665f); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.notification-heading > .btn, .notification-item-actions > .btn:last-child, .notification-popup .notification-item-heading > .btn { flex: 0 0 48px; width: 48px; min-height: 48px; padding: 12px; }
.notification-toolbar { padding: 0 20px 12px; border-bottom: 1px solid var(--border-subtle, #dce3df); }
.notification-filters { display: flex; gap: 8px; }
.notification-filter { min-height: 48px; padding: 10px 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted, #59665f); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.notification-filter.active { background: var(--green-soft, #eaf3ee); color: var(--green, #1e674c); border-color: var(--green-border, #c9dcd1); }
.notification-read-all { margin-top: 4px; padding-left: 0; font-size: 14px; }
.notification-list { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.notification-item { padding: 20px; border-bottom: 1px solid var(--border-subtle, #e7ece9); }
.notification-item.is-unread { background: var(--surface-hover, #f7faf8); }
.notification-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notification-item h3, .notification-popup strong { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.notification-unread-label { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; background: var(--green-soft, #eaf3ee); color: var(--green, #1e674c); font-size: 14px; font-weight: 600; line-height: 1.5; }
.notification-item time { display: block; margin-top: 8px; color: var(--muted, #65716a); font-size: 14px; }
.notification-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.notification-target { font-size: 14px; text-align: left; white-space: normal; }
.notification-read-label { color: var(--muted, #65716a); font-size: 14px; }
.notification-footer { padding: 12px 20px; border-top: 1px solid var(--border-subtle, #dce3df); color: var(--muted, #65716a); font-size: 14px; }
.notification-empty { padding: 48px 24px; text-align: center; color: var(--muted, #59665f); }
.notification-empty > svg { width: 32px; height: 32px; margin-bottom: 16px; }
.notification-empty h3 { margin: 0 0 12px; color: var(--text, #17221d); font-size: 18px; }
.notification-empty p { margin: 0; font-size: 16px; line-height: 1.5; }
.notification-popups { position: fixed; z-index: 95; top: calc(var(--header-height, 72px) + 12px); right: 16px; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; }
.notification-live { display: grid; gap: 12px; }
.notification-popup { padding: 16px; border: 1px solid var(--green-border, #c9dcd1); border-left: 4px solid var(--green, #1e674c); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 28px rgb(23 34 29 / 15%); }
.notification-popup strong { padding-top: 8px; }
.notification-popup .notification-target { margin-top: 8px; }
.notification-more { width: 100%; margin-top: 12px; background: var(--surface); }
@media (max-width: 1023px) {
  .notification-popups { max-height: calc(100dvh - var(--header-height, 72px) - 112px); }
}
@media (max-width: 479px) {
  .notification-panel { inset: 8px; width: auto; border-radius: 12px; }
  .notification-heading { padding: 20px 16px 12px; }
  .notification-heading h2 { font-size: 22px; }
  .notification-toolbar { padding: 0 16px 8px; }
  .notification-item { padding: 16px; }
  .notification-popups { right: 8px; width: calc(100vw - 16px); }
}