.notification-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: .12rem .4rem; border-radius: 1rem; background: #e1eee5; color: #246143; font-size: .75rem; font-weight: 700; }
.notification-badge[hidden], .notification-compose [hidden] { display: none !important; }
.notifications-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr); gap: 1.5rem; align-items: start; }
.notification-list { display: grid; gap: 1rem; }
.notification-item { padding: 1.25rem; border: 1px solid var(--border, #d8dedb); border-radius: .65rem; }
.notification-item.unread { border-left: 4px solid #246143; background: #f1f6ef; }
.notification-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .85rem; color: var(--muted, #59665e); }
.notification-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.notification-compose { display: grid; gap: 1rem; }
.notification-compose textarea { min-height: 9rem; resize: vertical; }
.notification-groups { border: 1px solid var(--border, #d8dedb); border-radius: .5rem; padding: .85rem 1rem; }
.notification-groups summary { cursor: pointer; font-weight: 600; }
.notification-group-options { display: grid; gap: .65rem; padding-top: 1rem; max-height: 16rem; overflow-y: auto; }
.notification-group-options label { display: flex; align-items: center; gap: .65rem; }
.notification-group-options input { width: auto; }
.notification-history { margin-top: 1.5rem; }
.notification-empty { padding: 1.5rem 0; }
.notification-empty h3 { margin-top: 0; }
.notification-poll-status { margin: .35rem 0 0; font-size: .8rem; color: var(--muted, #59665e); }
.notification-device { margin-bottom: 1.5rem; }
.notification-device h2 { margin-top: 0; }
.notification-device-intro { margin: .5rem 0 1rem; color: var(--muted, #59665e); }
.notification-device-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.notification-device-actions .button { min-height: 2.75rem; }
.notification-device [hidden] { display: none !important; }
.notification-device .button:focus-visible, .notification-device summary:focus-visible { outline: 3px solid #246143; outline-offset: 3px; }
.notification-device-status { margin: .75rem 0; color: var(--muted, #59665e); font-size: .9rem; overflow-wrap: anywhere; }
.notification-device-help { border-top: 1px solid var(--border, #d8dedb); padding-top: .85rem; }
.notification-device-help summary { cursor: pointer; font-weight: 600; }
.notification-device-help ul { padding-left: 1.25rem; margin: .75rem 0; }
.notification-device-help li + li { margin-top: .5rem; }
.notification-device-privacy { margin-bottom: 0; }
.pwa-install-shortcut { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.pwa-install-shortcut .button { min-height: 2.75rem; white-space: normal; text-align: center; }
.pwa-install-help { box-sizing: border-box; width: calc(100% - 2rem); max-width: 35rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border, #d8dedb); border-radius: .65rem; background: #f8faf7; color: #243c2e; font-family: inherit; line-height: 1.55; }
.pwa-install-help::backdrop { background: rgb(24 42 31 / .48); }
.pwa-install-help-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pwa-install-help-heading h2 { margin: 0; font-size: 1.25rem; line-height: 1.35; }
.pwa-install-help-heading .button { flex-shrink: 0; min-height: 2.75rem; }
.pwa-install-help h3 { margin: 1.25rem 0 .5rem; font-size: 1rem; }
.pwa-install-help p { margin: .75rem 0; }
.pwa-install-help ol { margin: .5rem 0; padding-left: 1.4rem; }
.pwa-install-help li + li { margin-top: .5rem; }
.pwa-install-help [hidden] { display: none !important; }
.pwa-install-site { border-top: 1px solid var(--border, #d8dedb); margin-top: 1rem; padding-top: 1rem; }
.pwa-install-site input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.75rem; padding: .65rem .75rem; border: 1px solid var(--border, #d8dedb); border-radius: .4rem; background: #eef4ed; color: inherit; font: inherit; font-size: 1rem; user-select: text; -webkit-user-select: text; }
.pwa-install-site-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .65rem; }
.pwa-install-site-actions .button { min-height: 2.75rem; white-space: normal; }
.pwa-install-help .button:focus-visible, .pwa-install-help input:focus-visible, .pwa-install-shortcut .button:focus-visible { outline: 3px solid #246143; outline-offset: 3px; }
.pwa-install-help-status { color: var(--muted, #59665e); font-size: .9rem; overflow-wrap: anywhere; }
.pwa-install-help-status:empty { margin: 0; }
@media (max-width: 767px) {
  .notifications-layout { grid-template-columns: minmax(0, 1fr); }
  .notification-item { padding: 1rem; }
  .notification-compose .button { width: 100%; }
  .notification-device-actions { flex-direction: column; align-items: stretch; }
  .notification-device-actions .button { width: 100%; white-space: normal; }
  .pwa-install-shortcut { justify-content: flex-start; }
  .pwa-install-help { padding: 1rem; }
  .pwa-install-help-heading { gap: .65rem; }
  .pwa-install-site-actions { flex-direction: column; align-items: stretch; }
}