.signup-lite-page {
  min-height: 100vh;
  overflow-x: clip;
  background: var(--ks-theme-page-bg);
  color: var(--ks-theme-text-primary);
  font-family: var(--ks-font-family-base);
}

.signup-lite-shell {
  width: var(--ks-signup-flow-shell-width);
  max-width: var(--ks-step-three-stage-width);
  box-sizing: border-box;
  margin-inline: auto;
  padding: var(--ks-page-start-gap) 0 64px;
}

.signup-lite-form,
.signup-lite-field,
.signup-lite-password-shell,
.signup-lite-field input,
.signup-lite-submit,
.signup-lite-social,
.signup-lite-divider {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.signup-lite-hero {
  display: grid;
  justify-items: center;
  gap: var(--ks-signup-flow-hero-gap);
  text-align: center;
}

.signup-lite-hero h1 {
  margin: 0;
  color: var(--ks-theme-text-primary);
  font-family: var(--ks-font-family-base);
  font-size: var(--ks-account-page-title-size);
  line-height: var(--ks-account-page-title-line-height);
  font-weight: var(--ks-account-page-title-weight);
  letter-spacing: 0;
}

.signup-lite-hero p {
  width: min(100%, 360px);
  margin: 0;
  color: var(--ks-theme-text-secondary);
  font-size: var(--ks-account-body-size);
  line-height: var(--ks-account-body-line-height);
  font-weight: var(--ks-account-body-weight);
}

.signup-lite-form {
  display: grid;
  gap: var(--ks-signup-flow-hero-gap);
  margin-top: var(--ks-signup-flow-section-top-gap);
}

.signup-lite-field {
  display: grid;
  gap: 10px;
}

.signup-lite-field > span:first-child,
.signup-lite-signin {
  font-size: var(--ks-account-helper-size);
  line-height: var(--ks-account-helper-line-height);
  font-weight: var(--ks-account-helper-weight);
}

.signup-lite-field > span:first-child {
  color: var(--ks-theme-text-primary);
}

.signup-lite-field input {
  width: 100%;
  min-height: var(--ks-auth-field-height, var(--ks-form-field-height, 48px));
  box-sizing: border-box;
  border: 1px solid var(--ks-theme-border);
  border-radius: 8px;
  background: var(--ks-theme-surface);
  color: var(--ks-theme-text-primary);
  font-family: var(--ks-font-family-field);
  font-size: var(--ks-field-font-size);
  line-height: var(--ks-field-line-height);
  font-weight: var(--ks-field-font-weight);
  letter-spacing: 0;
  padding: 0 14px;
  outline: none;
}

.signup-lite-field input::placeholder {
  color: var(--ks-field-placeholder-text);
  font-family: var(--ks-field-placeholder-font-family);
  font-size: var(--ks-field-placeholder-font-size);
  line-height: var(--ks-field-placeholder-line-height);
  font-weight: var(--ks-field-placeholder-font-weight);
}

.signup-lite-field input:focus {
  border-color: var(--ks-color-primary-500);
  box-shadow: 0 0 0 2px rgba(0, 161, 206, 0.12);
}

.signup-lite-field input.is-invalid,
.signup-lite-field input[aria-invalid="true"] {
  border-color: var(--ks-signup-flow-invalid-border);
  box-shadow: 0 0 0 3px var(--ks-signup-flow-invalid-halo);
}

.signup-lite-field input.is-invalid:focus,
.signup-lite-field input[aria-invalid="true"]:focus {
  border-color: var(--ks-signup-flow-invalid-border);
  box-shadow: 0 0 0 4px var(--ks-signup-flow-invalid-halo);
}

.signup-lite-helper {
  display: block;
  margin: -2px 0 0;
  color: var(--ks-color-accent-coral);
  font-size: var(--ks-account-secondary-size);
  line-height: var(--ks-account-secondary-line-height);
  font-weight: var(--ks-account-secondary-weight);
}

.signup-lite-helper[hidden] {
  display: none;
}

.signup-lite-password-shell {
  position: relative;
  display: block;
}

.signup-lite-password-shell input {
  padding-right: 48px;
}

.signup-lite-password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ks-theme-text-muted);
  transform: translateY(-50%);
  cursor: pointer;
}

.signup-lite-password-toggle svg {
  display: block;
  width: var(--ks-account-icon-sm);
  height: var(--ks-account-icon-sm);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ks-account-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signup-lite-submit,
.signup-lite-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ks-auth-primary-icon-gap, 12px);
  width: var(--ks-auth-action-button-width);
  min-height: var(--ks-auth-action-button-height);
  height: var(--ks-auth-action-button-height);
  box-sizing: border-box;
  border-radius: var(--ks-action-pill-radius);
  font-family: var(--ks-action-pill-font-family);
  font-size: var(--ks-action-pill-font-size);
  line-height: var(--ks-action-pill-line-height);
  font-weight: var(--ks-action-pill-font-weight);
  letter-spacing: var(--ks-action-pill-letter-spacing);
  text-decoration: none;
}

.signup-lite-submit {
  margin-top: 10px;
  border: var(--ks-action-pill-border-width) solid var(--ks-action-pill-primary-border);
  background: var(--ks-action-pill-primary-bg);
  color: var(--ks-action-pill-primary-text);
  cursor: pointer;
}

.signup-lite-submit__mark {
  width: var(--ks-auth-primary-icon-width, 25px);
  height: var(--ks-auth-primary-icon-height, 15px);
  color: currentColor;
  background-color: currentColor;
}

.signup-lite-social {
  gap: 12px;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
}

.signup-lite-social__mark,
.signup-lite-social__mark img {
  display: block;
  width: var(--ks-account-icon-sm);
  height: var(--ks-account-icon-sm);
}

.signup-lite-submit:hover,
.signup-lite-submit:focus-visible,
.signup-lite-social:hover,
.signup-lite-social:focus-visible,
.signup-lite-password-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 161, 206, 0.14);
}

.signup-lite-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--ks-space-16);
  align-items: center;
  margin: var(--ks-space-32) 0 var(--ks-signup-flow-hero-gap);
  color: var(--ks-theme-text-secondary);
}

.signup-lite-divider span {
  height: 1px;
  background: var(--ks-theme-divider);
}

.signup-lite-divider strong {
  font-size: var(--ks-account-secondary-size);
  line-height: var(--ks-account-secondary-line-height);
  font-weight: var(--ks-account-secondary-weight);
}

.signup-lite-signin {
  margin: var(--ks-space-40) 0 0;
  color: var(--ks-theme-text-secondary);
  text-align: center;
}

.signup-lite-status {
  margin: 0;
  color: var(--ks-theme-text-secondary);
  font-size: var(--ks-account-secondary-size);
  line-height: var(--ks-account-secondary-line-height);
  font-weight: var(--ks-account-secondary-weight);
  text-align: center;
}

.signup-lite-status[data-state="error"] {
  color: var(--ks-color-accent-coral);
}

.signup-lite-submit:disabled {
  opacity: 0.68;
  cursor: wait;
}

.signup-lite-signin a {
  color: var(--ks-color-primary-600);
  font-weight: var(--ks-font-weight-semibold);
  text-decoration: none;
}

.signup-lite-signin a:hover,
.signup-lite-signin a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.theme-dark .signup-lite-field input {
  border-color: var(--ks-theme-card-border);
  background: var(--ks-theme-card-fill);
}

html.theme-dark .signup-lite-social {
  border-color: #ffffff;
  background: #ffffff;
  color: #000000;
}

@media (max-width: 360px) {
  .signup-lite-shell {
    width: var(--ks-signup-flow-shell-width);
  }
}