#notificationsButton{position:relative}
#notificationsUnreadBadge{position:absolute;right:-6px;top:-6px;min-width:20px;padding:2px 5px;background:#ad2537;color:#fff;border-radius:12px;font:700 11px/16px 'Nunito',sans-serif;text-align:center}
#notificationsUnreadBadge[hidden],#notificationsModal[hidden],#notificationsModal [hidden]{display:none!important}
#notificationsModal{--notification-text:#202938;--notification-muted:#526076;--notification-border:#d8dfe8;position:fixed;inset:0;z-index:75;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:20px;font-family:'Nunito',sans-serif;color:var(--notification-text)}
#notificationsModal *{box-sizing:border-box}
.notifications-panel{width:min(760px,100%);max-height:90dvh;background:#fff;border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.22)}
.notifications-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--notification-border)}
.notifications-heading h2{margin:0;font-size:23px}.notifications-heading p{margin:4px 0 0;color:var(--notification-muted);font-size:14px}
.notifications-toolbar{display:flex;gap:8px;padding:12px 24px}.notification-button{min-height:44px;padding:10px 14px;border:1px solid var(--notification-border);border-radius:10px;background:#fff;color:var(--notification-text);font:700 14px/1.4 'Nunito',sans-serif;cursor:pointer}
.notification-button:disabled{opacity:.55;cursor:wait}.notification-button:hover,.notification-card:hover{background:#f4f6f8}
#notificationsModal :focus-visible{outline:3px solid #608aba;outline-offset:2px}
.notifications-content{overflow:auto;overscroll-behavior:contain;padding:4px 24px 20px;min-height:120px}
.notification-card{display:block;text-align:left;width:100%;padding:16px;margin:0 0 10px;border:1px solid var(--notification-border);border-radius:12px;background:#fff;color:var(--notification-text);font:15px/1.5 'Nunito',sans-serif;cursor:pointer;overflow-wrap:anywhere}
.notification-card strong{display:block;font-size:17px}.notification-card p{margin:7px 0}.notification-card time,#notificationDetail time{font-size:13px;color:var(--notification-muted)}
.notification-read-state{font-size:12px;font-weight:700;color:var(--notification-muted)}
#notificationDetail{overflow-wrap:anywhere}#notificationDetail h3{margin:8px 0;font-size:22px}.notification-message{white-space:pre-wrap;font-size:16px;line-height:1.65}
.notifications-empty{color:var(--notification-muted);padding:20px 0}#notificationsStatus{padding:0 24px 16px;margin:0;font-size:14px;color:var(--notification-muted)}#notificationsStatus.error{color:#a21930}
@media(max-width:600px){#notificationsModal{padding:8px}.notifications-panel{max-height:96dvh;border-radius:14px}.notifications-heading{padding:16px}.notifications-toolbar{padding:12px 16px}.notifications-content{padding:4px 16px 16px}#notificationsStatus{padding:0 16px 12px}.notifications-heading h2{font-size:21px}}
