.account-notification-summary,
.account-notification-list {
  display: grid;
  gap: .8rem;
}

.account-notification-card {
  display: grid;
  gap: .5rem;
  padding: 1rem;
  border: 1px solid rgba(20, 20, 20, .12);
  border-radius: 14px;
  background: #fff;
}

.account-notification-card.is-unread {
  border-left: 4px solid #161616;
  background: #fffdf7;
}

.account-notification-card header {
  display: flex;
  gap: .75rem;
  align-items: start;
  justify-content: space-between;
}

.account-notification-card h3,
.account-notification-card p {
  margin: 0;
}

.account-notification-card p {
  color: #555;
  line-height: 1.55;
}

.account-notification-meta {
  color: #777;
  font-size: .78rem;
}

.account-notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}

.account-notification-badge {
  display: inline-flex;
  min-width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}

.account-notification-empty {
  padding: 1rem;
  border-radius: 12px;
  background: #f5f5f2;
  color: #666;
}

.network-target-invite {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
}

.network-target-invite label {
  font-weight: 800;
}

.network-target-invite input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: .82rem .9rem;
  border: 1px solid rgba(20, 20, 20, .22);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.network-generic-invite {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(20, 20, 20, .1);
}

.network-generic-invite summary {
  cursor: pointer;
  font-weight: 700;
}

.network-generic-invite .network-share-row {
  margin-top: .75rem;
}