:root {
  --ww-blue: #2f7df6;
  --ww-blue-dark: #2369d8;
  --ww-blue-soft: #eaf2ff;
  --ww-text: #111827;
  --ww-muted: #6b7280;
  --ww-line: #eceff3;
  --ww-link: #075aa8;
}

html,
body,
uni-page-body {
  background: #fff !important;
}

.auth-page {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  background: #fff !important;
  color: var(--ww-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

.auth-shell {
  width: 100% !important;
  max-width: 480px !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding: calc(28px + env(safe-area-inset-top)) 24px calc(46px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

.auth-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 56px !important;
}

.auth-logo {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(47, 125, 246, .2) !important;
}

.auth-brand-name {
  color: #171b22 !important;
  font-size: 23px !important;
  font-weight: 750 !important;
  line-height: 32px !important;
  letter-spacing: .5px !important;
}

.auth-title {
  margin: 46px 0 36px !important;
  color: var(--ww-text) !important;
  font-size: 28px !important;
  font-weight: 750 !important;
  line-height: 40px !important;
  text-align: center !important;
  letter-spacing: .5px !important;
}

.auth-form {
  width: 100% !important;
  border-top: 1px solid var(--ww-line) !important;
}

.auth-row {
  width: 100% !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid var(--ww-line) !important;
  background: #fff !important;
}

.auth-label {
  width: 86px !important;
  flex: 0 0 86px !important;
  color: var(--ww-text) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 24px !important;
}

.auth-region-value,
.auth-prefix {
  color: #171b22 !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

.auth-region-value {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.auth-flag {
  width: 22px !important;
  height: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 1px !important;
  background: #e9292c !important;
  color: #ffd84a !important;
  font-size: 9px !important;
  line-height: 15px !important;
}

.auth-country-text {
  color: #171b22 !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

.auth-prefix {
  width: 52px !important;
  flex: 0 0 52px !important;
  text-align: left !important;
}

.auth-input {
  width: auto !important;
  min-width: 0 !important;
  height: 64px !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  background: transparent !important;
  color: var(--ww-text) !important;
  font-size: 16px !important;
  line-height: 64px !important;
}

.auth-input .uni-input-wrapper,
.auth-input .uni-input-form,
.auth-input .uni-input-input,
.auth-input input {
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  color: var(--ww-text) !important;
  font-size: 16px !important;
  line-height: 64px !important;
}

.auth-input .uni-input-placeholder,
.auth-input input::placeholder {
  color: #9aa2ad !important;
  opacity: 1 !important;
}

.auth-eye {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: #a0a7b0 !important;
  cursor: pointer !important;
}

.auth-eye::before {
  width: 18px !important;
  height: 11px !important;
  content: "" !important;
  box-sizing: border-box !important;
  border: 2px solid #9aa2ad !important;
  border-radius: 55% / 70% !important;
  background: radial-gradient(circle at center, #9aa2ad 0 2px, transparent 2.5px) !important;
}

.auth-eye::after {
  position: absolute !important;
  right: -1px !important;
  width: 23px !important;
  height: 2px !important;
  content: "" !important;
  border-radius: 2px !important;
  background: #9aa2ad !important;
  transform: rotate(-45deg) !important;
}

.auth-eye.is-visible::after {
  display: none !important;
}

.auth-code-btn {
  min-width: 96px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: var(--ww-link) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  cursor: pointer !important;
}

.auth-code-btn.is-disabled {
  color: #aab2bd !important;
}

.auth-link-row {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.auth-link,
.auth-register-entry,
.auth-agreement-link {
  color: var(--ww-link) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  cursor: pointer !important;
}

.auth-primary {
  width: 224px !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 32px auto 0 !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--ww-blue) !important;
  box-shadow: 0 10px 24px rgba(47, 125, 246, .2) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 56px !important;
}

.auth-primary::after {
  display: none !important;
}

.auth-primary:active {
  background: var(--ww-blue-dark) !important;
}

.auth-primary[disabled],
.auth-primary.uni-button[disabled] {
  background: #a9c8fb !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .9) !important;
}

.auth-register-entry {
  min-height: 52px !important;
  margin-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.auth-agreement {
  min-height: 58px !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
  color: #596273 !important;
  font-size: 13px !important;
  line-height: 22px !important;
  cursor: pointer !important;
}

.auth-check {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin: 2px 9px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 1.5px solid #aab2bd !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

.auth-check.is-checked {
  border-color: var(--ww-blue) !important;
  background: var(--ww-blue) !important;
}

.auth-agreement-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  color: #596273 !important;
  font-size: 13px !important;
  line-height: 22px !important;
}

@media screen and (min-width: 700px) {
  .auth-shell {
    padding-top: 42px !important;
  }

  .auth-title {
    margin-top: 42px !important;
  }
}

@media screen and (max-width: 360px) {
  .auth-shell {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .auth-label {
    width: 78px !important;
    flex-basis: 78px !important;
  }

  .auth-primary {
    width: 100% !important;
  }
}