.notification-bell{position:relative}
.notification-bell-link{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:700}
.notification-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:20px;background:#d83434;color:#fff;font-size:11px;padding:0 6px}
.notification-popover{display:none;position:absolute;right:0;top:28px;z-index:5;width:280px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px}
.notification-bell:hover .notification-popover{display:grid;gap:6px}
.notification-popover a{display:grid;gap:4px;padding:9px;border-radius:8px}
.notification-popover a:hover{background:#f2f6fb}
.notification-popover small{color:var(--muted)}
.notification-list{display:grid;gap:12px}
.notification-card{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.notification-card.is-unread{border-left:4px solid var(--blue)}
.notification-card[dir="rtl"]{text-align:right}
.notification-card[dir="rtl"].is-unread{border-left:1px solid var(--line);border-right:4px solid var(--blue)}
.notification-card h2{margin:10px 0 7px;font-size:17px}
.notification-card p{margin:0 0 8px;color:var(--text);line-height:1.45}
.notification-card small{color:var(--muted)}
.notification-meta{display:flex;gap:7px;flex-wrap:wrap}
.notification-actions{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.notification-card[dir="rtl"] .notification-meta,.notification-card[dir="rtl"] .notification-actions{direction:rtl}
.notification-actions form{margin:0}
@media(max-width:760px){.notification-card{grid-template-columns:1fr}.notification-actions{justify-content:flex-start}.notification-popover{display:none!important}}