.notification-card { display: grid; gap: 14px; }
.notification-card--unread { border-left: 4px solid var(--primary); }
.notification-card--read { opacity: 0.82; }
.notification-card__status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notification-card__time { color: var(--muted); font-size: 13px; }
.notification-card__actions { display: flex; justify-content: flex-end; }
.notification-badge--unread { background: #e8f2ff; color: var(--primary-strong); }

@media (max-width: 720px) {
  .notification-card__actions { justify-content: flex-start; }
}