.center-inputs {
  display: flex;
  flex-direction: column;    /* stack inputs vertically */
  align-items: center;       /* center horizontally */
  gap: 0px;                 /* space between inputs */
  width: 100%;
  max-width: 338px;          /* max width of the container */
  margin: 0 auto;            /* center container horizontally */
  margin-bottom: 25px; /* space between email and password inputs */
}

.center-inputs input[type="email"],
.center-inputs input[type="text"] {
  width: 100%;               /* full width of container */
  padding: 12px;
  box-sizing: border-box;
  text-transform: uppercase; /* keep uppercase for email input */
}

.security.code {
  display: flex;
  flex-direction: column;    /* stack items vertically */
  align-items: center;       /* center horizontally */
  gap: 0px;                 /* spacing between elements */
}

.security.code input[type="text"] {
  width: 200px;
  height: 150; /* or remove this line to keep default */
  margin-bottom: 25px; /* space between image and security code input */
}