.teamMemberCard {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(300px, .9fr);
  align-items: center;
  gap: 22px;
  min-height: 112px;
  padding: 20px 22px;
  border: 1px solid #dce6ef;
  border-left: 4px solid #2a7de1;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, #f8fbfe 100%);
  box-shadow: 0 8px 24px rgba(13, 48, 84, .07);
}

.teamMemberCard[data-status="suspended"] { border-left-color: #d7921e; }
.teamMemberCard[data-status="removed"] { border-left-color: #9aa8b7; opacity: .78; }
.teamMemberIdentity,
.teamMemberMeta,
.teamMemberControls,
.teamMemberActions { display: flex; align-items: center; }
.teamMemberIdentity { gap: 14px; min-width: 0; }
.teamMemberIdentity h3 { margin: 0 0 4px; color: #142f4f; font-size: 1rem; }
.teamMemberIdentity a { color: #637a92; font-size: .84rem; text-decoration: none; overflow-wrap: anywhere; }
.teamAvatar {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #0e4e91, #2c8fe7);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.teamMemberMeta { justify-content: center; gap: 8px; flex-wrap: wrap; }
.teamStatus,
.teamSelf {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}
.teamStatus--active { color: #08715c; background: #e4f7f1; }
.teamStatus--suspended { color: #8a5600; background: #fff2d8; }
.teamStatus--removed { color: #566677; background: #edf1f5; }
.teamSelf { color: #1f5f9f; background: #e8f2fd; }
.teamMemberControls { justify-content: flex-end; gap: 12px; }
.teamMemberControls label { display: grid; gap: 5px; min-width: 150px; color: #61758a; font-size: .72rem; font-weight: 800; }
.teamMemberControls select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid #cddae7;
  border-radius: 10px;
  color: #173653;
  background: #fff;
  font: inherit;
}
.teamMemberActions { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.teamMemberActions .btn { min-height: 40px; padding: 8px 12px; }
.teamMemberActions .danger { color: #a32828; border-color: #edc5c5; background: #fff7f7; }
.teamLoading,
.teamEmpty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 190px;
  padding: 28px;
  border: 1px dashed #c7d6e4;
  border-radius: 16px;
  color: #6b7f93;
  background: #f8fbfd;
  text-align: center;
}
.teamEmpty strong { color: #1c3a57; }
.teamEmpty--error { color: #9a3030; border-color: #ebc5c5; background: #fff8f8; }

@media (max-width: 1180px) {
  .teamMemberCard { grid-template-columns: minmax(230px, 1fr) auto; }
  .teamMemberControls { grid-column: 1 / -1; justify-content: space-between; padding-top: 14px; border-top: 1px solid #e6edf3; }
}

@media (max-width: 720px) {
  .teamMemberCard { grid-template-columns: 1fr; gap: 16px; padding: 17px; }
  .teamMemberMeta { justify-content: flex-start; }
  .teamMemberControls { grid-column: auto; display: grid; justify-content: stretch; }
  .teamMemberControls label,
  .teamMemberControls select,
  .teamMemberActions .btn { width: 100%; }
  .teamMemberActions { display: grid; grid-template-columns: 1fr; }
}