.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 250px;
  max-width: 78vw;
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .28);
}

.notification-card-badge {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: -.01em;
  color: var(--accent);
  background: var(--accent-tint);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.notification-card[data-tone="success"] .notification-card-badge {
  color: var(--green);
  background: var(--green-bg);
}

.notification-card-body { flex: 1; min-width: 0; }
.notification-card-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.notification-card-desc { font-size: 12px; line-height: 1.4; color: var(--text-muted); margin-top: 2px; }
.notification-card-time { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }