.profile-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: end;
  gap: 8px;
}

.profile-auth,
.profile-signed-in,
.profile-onboarding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.profile-auth small,
.profile-onboarding-copy small,
.profile-identity small {
  display: block;
  color: #8994bd;
  font-size: 11px;
}

.profile-auth small { max-width: 240px; }

.pi-sign-in,
.profile-save,
.profile-sign-out {
  border: 1px solid #5666a8;
  border-radius: 10px;
  padding: 9px 12px;
  background: #171f48;
  color: #f6f7ff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.pi-sign-in { border-color: #7bf1db; background: linear-gradient(135deg, #25356d, #145d62); }
.profile-save:disabled { cursor: wait; opacity: .65; }
.profile-sign-out { padding: 7px 9px; font-size: 11px; }

.profile-signed-in { text-align: left; }
.profile-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #f3d36b; color: #30213c; font-weight: 900; }
.profile-identity { display: grid; gap: 2px; }
.profile-identity strong { color: #f6f7ff; font-size: 12px; }
.profile-onboarding { justify-content: end; }
.profile-onboarding-copy { display: grid; gap: 3px; max-width: 255px; text-align: left; }

.profile-control {
  display: grid;
  gap: 4px;
}

.profile-control label {
  color: #8994bd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.profile-control input,
.profile-control select {
  min-width: 112px;
  padding: 8px 10px;
  border: 1px solid #394574;
  border-radius: 10px;
  background: #111a3a;
  color: #f6f7ff;
  font: inherit;
  font-size: 12px;
}

.profile-control select option { background: #111a3a; color: #f6f7ff; }

.profile-control input {
  width: 132px;
}

.profile-control input:focus,
.profile-control select:focus {
  outline: 2px solid #7bf1db;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .profile-controls {
    justify-content: start;
  }

  .profile-auth,
  .profile-signed-in,
  .profile-onboarding { justify-content: start; }
}