.unread-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:22px;height:22px;box-sizing:border-box;padding:0 6px;border-radius:999px;background:#dc2626;color:white;font-size:12px;font-weight:700;line-height:1}
#nav .unread-badge{margin-left:auto}
.notification-item{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px;border:1px solid #dce5ef;border-radius:12px;min-width:0}
.notification-item.notification-new{background:#e5f2ff;border-color:#82b9e8;border-left:4px solid #2379b5}.notification-item.notification-read{background:#f5f7fa}
.notification-open{flex:1;min-width:0;text-align:left;border:0;background:transparent;color:#23445f;padding:8px;white-space:normal;overflow-wrap:anywhere}
.notification-open strong,.notification-state{display:block}.notification-state{font-size:11px;margin-bottom:8px;color:#637b8f}.notification-new .notification-state{font-weight:700;color:#17649b}.notification-read .notification-open{color:#52677a}.notification-open p{white-space:pre-wrap;overflow-wrap:anywhere}.notification-open small{color:#637b8f}
.notification-delete{flex:0 0 auto;background:#fef2f2;border:1px solid #e5a4a4;color:#b91c1c}.notification-delete:hover{background:#fee2e2}
@media(max-width:600px){.notification-item{align-items:stretch;flex-direction:column}.notification-delete{align-self:flex-end}}