.invite-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  border-radius: 14px;
  background: #f3f1fb;
}

.invite-box b,
.invite-box small { display: block; }
.invite-box small { color: #77747e; margin-top: 5px; }
.invite-result { display: flex; gap: 9px; }
.invite-result input { flex: 1; }
.users-label { margin: 4px 0 10px; color: #96919c; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.users-list { display: grid; gap: 8px; }
.user-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid #e6e3de; border-radius: 12px; }
.user-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #ebe8fb; color: #7767e8; font-weight: 800; }
.user-row b,
.user-row small { display: block; }
.user-row small { color: #918d96; margin-top: 3px; }
.user-actions { display: flex; align-items: center; gap: 4px; }
.reset-user,
.delete-user { border: 0; background: transparent; padding: 8px; cursor: pointer; }
.reset-user { color: #6555d8; }
.reset-user:hover { color: #4432c7; background: #f3f1fb; border-radius: 8px; }
.delete-user { color: #b36a6a; }
.delete-user:hover { color: #c64c4c; }
.reset-result { display: grid; gap: 7px; padding: 14px; border: 1px solid #dcd6fa; border-radius: 12px; background: #faf9ff; }
.reset-result > div { display: flex; gap: 9px; }
.reset-result input { flex: 1; min-width: 0; }
.reset-result small { color: #77747e; }

@media (max-width: 560px) {
  .invite-box { align-items: stretch; flex-direction: column; }
  .invite-result { flex-direction: column; }
  .user-row { grid-template-columns: 38px minmax(0, 1fr); }
  .user-actions { grid-column: 2; flex-wrap: wrap; }
  .reset-result > div { flex-direction: column; }
}