/* Shared login presentation based on the current yuvwfd.cn layout. */
.login-page {
  position: relative !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #333 !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

.login-page::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: calc(790 / 1260 * 100vw) !important;
  max-height: 260px !important;
  background: linear-gradient(180deg, #d8342f 0%, #e96e78 48%, #f2a4aa 100%) !important;
  z-index: 0 !important;
}

.login-page::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(664 / 1260 * 100vw) !important;
  bottom: 0 !important;
  height: auto !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: none !important;
  z-index: 0 !important;
}

.login-brand-dynamic {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 34px;
  z-index: 3;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.login-logo-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.login-welcome {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.login-subtitle {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.92;
}

.login-page .hotspot {
  z-index: 4 !important;
  color: #333 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

.login-page .tab-hotspot {
  top: calc(664 / 1260 * 100vw) !important;
  width: 50% !important;
  height: calc(130 / 1260 * 100vw) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.login-page .wechat-tab {
  left: 0 !important;
  right: auto !important;
  border-radius: 18px 0 0 0 !important;
}

.login-page .account-tab {
  left: auto !important;
  right: 0 !important;
  border-radius: 0 18px 0 0 !important;
}

.login-page.wechat .wechat-tab,
.login-page.account .account-tab {
  z-index: 5 !important;
  background: #fff !important;
  color: #e32920 !important;
}

.login-page.wechat .account-tab,
.login-page.account .wechat-tab {
  z-index: 4 !important;
  background: #e9231c !important;
  color: #fff !important;
}

.login-page.wechat .wechat-tab::after,
.login-page.account .account-tab::before {
  content: "";
  position: absolute;
  top: 0;
  width: 44px;
  height: calc(100% + 3px);
  background: #fff;
  pointer-events: none;
  box-shadow: 0 2px 0 #fff;
}

.login-page.wechat .wechat-tab::after {
  right: -30px;
  transform: skewX(28deg);
  border-radius: 0 18px 0 0;
}

.login-page.account .account-tab::before {
  left: -30px;
  transform: skewX(-28deg);
  border-radius: 18px 0 0 0;
}

.login-page .wechat-login-hotspot,
.login-page .account-login-hotspot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e32920 !important;
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 20px rgba(227, 41, 32, 0.2) !important;
}

.login-page .wechat-login-hotspot {
  top: calc(1368 / 1260 * 100vw) !important;
}

.login-page .wechat-login-hotspot::before {
  content: "请点击下方授权微信登录";
  position: absolute;
  left: 0;
  right: 0;
  top: -48px;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.login-page .wechat-login-hotspot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -118px;
  width: 58px;
  height: 50px;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 80'%3E%3Cpath fill='%2351bf6a' d='M36 5C18.9 5 5 15.8 5 29.1c0 8.2 5.3 15.5 13.5 19.9L15 61l13-7c2.6.6 5.3.9 8 .9 17.1 0 31-10.8 31-24.9S53.1 5 36 5Z'/%3E%3Ccircle cx='27' cy='26' r='3.3' fill='%23fff'/%3E%3Ccircle cx='44' cy='26' r='3.3' fill='%23fff'/%3E%3Cpath fill='%2351bf6a' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round' d='M64 27.5c15.5 0 28 9.8 28 21.8 0 7.2-4.4 13.6-11.3 17.5L84 78l-11.5-6.1c-2.7.5-5.5.8-8.5.8-15.5 0-28-9.8-28-21.8s12.5-23.4 28-23.4Z'/%3E%3Ccircle cx='57' cy='48' r='3' fill='%23fff'/%3E%3Ccircle cx='72' cy='48' r='3' fill='%23fff'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.login-page.account .wechat-login-hotspot {
  display: none !important;
}

.login-page .value-mask {
  display: none !important;
}

.login-page .exact-input {
  z-index: 12 !important;
  height: 48px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(227, 41, 32, 0.14) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #333 !important;
  caret-color: #e32920 !important;
  font-size: 15px !important;
  line-height: 48px !important;
}

.login-page .exact-input::placeholder {
  color: #c7c7c7 !important;
}

.login-page.account .phone-input {
  left: 24px !important;
  right: 24px !important;
  top: 276px !important;
  width: calc(100% - 48px) !important;
}

.login-page.account .password-input {
  left: 24px !important;
  right: 76px !important;
  top: 334px !important;
  width: calc(100% - 100px) !important;
}

.login-page.account .eye-hotspot,
.login-page.account .forget-hotspot,
.login-page.account .register-hotspot,
.login-page.account .account-login-hotspot {
  z-index: 14 !important;
  pointer-events: auto !important;
}

.login-page.account .eye-hotspot {
  left: auto !important;
  right: 28px !important;
  top: 338px !important;
  width: 32px !important;
  height: 32px !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324362b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important;
}

.login-page.account .forget-hotspot {
  left: auto !important;
  right: 24px !important;
  top: 382px !important;
  width: 96px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.login-page.account .account-login-hotspot {
  left: 24px !important;
  right: 24px !important;
  top: 448px !important;
  width: calc(100% - 48px) !important;
  height: 49px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
}

.login-page.account .register-hotspot {
  left: 50% !important;
  top: 520px !important;
  width: 180px !important;
  height: 36px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.login-page.account .register-hotspot::before {
  content: "没有账号，";
  color: #555;
}

.login-page.account .register-hotspot {
  color: #c43a31 !important;
}

@media (max-width: 340px) {
  .login-page.account .phone-input { top: 260px !important; }
  .login-page.account .password-input { top: 316px !important; }
  .login-page.account .eye-hotspot { top: 320px !important; }
  .login-page.account .forget-hotspot { top: 360px !important; }
  .login-page.account .account-login-hotspot { top: 420px !important; }
  .login-page.account .register-hotspot { top: 490px !important; }
}

@media (min-width: 769px) {
  .login-page::before {
    height: 260px !important;
  }

  .login-page::after {
    top: 220px !important;
  }

  .login-page .tab-hotspot {
    top: 220px !important;
    width: 210px !important;
    height: 48px !important;
  }

  .login-page .wechat-tab {
    left: calc(50% - 210px) !important;
  }

  .login-page .account-tab {
    left: 50% !important;
    right: auto !important;
  }

  .login-page .wechat-login-hotspot {
    left: 50% !important;
    right: auto !important;
    top: 470px !important;
    width: 360px !important;
    height: 54px !important;
    border-radius: 27px !important;
    transform: translateX(-50%) !important;
  }

  .login-page.account .phone-input {
    left: 50% !important;
    right: auto !important;
    top: 276px !important;
    width: 372px !important;
    transform: translateX(-50%) !important;
  }

  .login-page.account .password-input {
    left: calc(50% - 186px) !important;
    right: auto !important;
    top: 334px !important;
    width: 320px !important;
  }

  .login-page.account .eye-hotspot {
    left: calc(50% + 145px) !important;
    right: auto !important;
  }

  .login-page.account .forget-hotspot {
    left: calc(50% + 90px) !important;
    right: auto !important;
  }

  .login-page.account .account-login-hotspot {
    left: 50% !important;
    right: auto !important;
    width: 372px !important;
    transform: translateX(-50%) !important;
  }
}