.team-panel {
  margin-top: 18px;
  overflow: hidden;
}

.team-summary {
  padding: 8px 12px;
  border-radius: 999px;
  background: #edf4f8;
  color: var(--blue) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

.team-copy {
  max-width: 850px;
  margin: 8px 0 18px;
}

.role-guide {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0 20px;
}

.role-guide article {
  padding: 14px;
  border: 1px solid rgba(23, 75, 118, .12);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(23, 75, 118, .08), rgba(223, 133, 31, .08));
}

.role-guide strong {
  display: block;
  margin-bottom: 7px;
  color: var(--blue);
}

.role-guide span {
  color: var(--muted) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

.team-invite-form {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px dashed rgba(23, 75, 118, .25);
  border-radius: 16px;
  background: #fbfdff;
}

.team-invite-form label {
  margin: 0;
}

.team-invite-form button {
  height: 48px;
  color: white;
  background: linear-gradient(110deg, var(--blue), #102d45 70%, var(--orange));
}

.team-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 16px;
}

.team-columns h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.team-list {
  display: grid;
  gap: 10px;
}

.team-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafb;
}

.team-row.pending {
  border-color: #f2dcc0;
  background: #fff8ef;
}

.member-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white !important;
  background: linear-gradient(135deg, var(--blue), #1f6b9f);
  font-size: 17px !important;
  letter-spacing: 0 !important;
}

.member-info {
  min-width: 0;
}

.member-info strong,
.member-info em,
.member-info small {
  display: block;
}

.member-info em {
  margin: 3px 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-info small {
  color: #7b8790;
}

.role-pill {
  padding: 8px 10px;
  border-radius: 999px;
  color: #fff !important;
  background: #6c7a84;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: .05em !important;
}

.role-pill.owner {
  background: #111315;
}

.role-pill.admin {
  background: var(--blue);
}

.role-pill.analyst {
  background: var(--orange);
}

.role-pill.viewer {
  background: var(--green);
}

.role-select-label {
  min-width: 150px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.role-select-label select {
  margin-top: 5px;
  padding: 9px;
}

@media (max-width: 980px) {
  .role-guide {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-columns,
  .team-invite-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .role-guide {
    grid-template-columns: 1fr;
  }

  .team-row {
    grid-template-columns: auto 1fr;
  }

  .team-row .role-pill,
  .team-row .role-select-label {
    grid-column: 1 / -1;
  }
}