/* TungstenCloud Forget Password V5.6
 * Makes forget.htm use the same auth visual system as login/regist.
 * Scoped to #forget only; no business logic changes.
 */

body.tc-auth-page #forget {
  --tc-forget-bg: #f4f7fb;
  --tc-forget-surface: #ffffff;
  --tc-forget-text: #172033;
  --tc-forget-muted: #667085;
  --tc-forget-line: #e4e9f0;
  --tc-forget-line-2: #d8dee8;
  --tc-forget-primary: #1769e0;
}

@media (min-width: 751px) {
  body.tc-auth-page {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--tc-forget-bg) !important;
  }

  body.tc-auth-page #forget {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 16px 22px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 13% 18%, rgba(23,105,224,.10), transparent 28%),
      radial-gradient(circle at 88% 82%, rgba(20,177,208,.08), transparent 30%),
      var(--tc-forget-bg) !important;
  }

  body.tc-auth-page #forget .login-container {
    position: relative !important;
    inset: auto !important;
    width: min(1080px, calc(100vw - 44px)) !important;
    height: min(680px, calc(100vh - 32px)) !important;
    min-height: 540px !important;
    max-height: calc(100vh - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    border: 1px solid var(--tc-forget-line) !important;
    border-radius: 20px !important;
    background: var(--tc-forget-surface) !important;
    box-shadow: 0 16px 44px rgba(15,23,42,.08) !important;
  }

  body.tc-auth-page #forget .container-back {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
      linear-gradient(140deg, #07182b 0%, #0b3f78 62%, #087c9f 100%) !important;
    background-size: 44px 44px, 44px 44px, auto !important;
  }

  body.tc-auth-page #forget .container-back::after {
    content: "TC" !important;
    position: absolute !important;
    right: -20px !important;
    bottom: -62px !important;
    color: rgba(255,255,255,.06) !important;
    font-size: 300px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  body.tc-auth-page #forget .back-line1,
  body.tc-auth-page #forget .back-line2,
  body.tc-auth-page #forget .back-line3 { opacity: .35 !important; }

  body.tc-auth-page #forget .back-text {
    position: relative !important;
    z-index: 3 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 88px 40px 48px !important;
    color: #fff !important;
    box-sizing: border-box !important;
  }

  body.tc-auth-page #forget .text-welcome {
    color: #fff !important;
    font-size: clamp(38px,4vw,52px) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    font-weight: 700 !important;
  }

  body.tc-auth-page #forget .text-welcome::after {
    content: " / TUNGSTENCLOUD" !important;
    display: block !important;
    margin-top: 12px !important;
    color: rgba(255,255,255,.48) !important;
    font-size: 11px !important;
    letter-spacing: .17em !important;
    font-weight: 600 !important;
  }

  body.tc-auth-page #forget .text-title {
    max-width: 94% !important;
    margin-top: 46px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 21px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }

  body.tc-auth-page #forget .text-level {
    max-width: 400px !important;
    margin-top: 22px !important;
    color: rgba(255,255,255,.68) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
  }

  body.tc-auth-page #forget .container-before {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 58px 54px 32px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 0 !important;
    border-left: 1px solid var(--tc-forget-line) !important;
    border-radius: 0 !important;
    background: var(--tc-forget-surface) !important;
    box-shadow: none !important;
  }

  body.tc-auth-page #forget .login {
    position: relative !important;
    width: 100% !important;
    max-width: 400px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 5px 0 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--tc-forget-text) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d7dde6 transparent !important;
  }
  body.tc-auth-page #forget .login::-webkit-scrollbar { width: 5px !important; }
  body.tc-auth-page #forget .login::-webkit-scrollbar-thumb { background: #d7dde6 !important; border-radius: 999px !important; }

  body.tc-auth-page #forget .login-text-title {
    color: var(--tc-forget-text) !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
  }
  body.tc-auth-page #forget .login-text-regist {
    margin-top: 8px !important;
    color: var(--tc-forget-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  body.tc-auth-page #forget .login-text-regist a,
  body.tc-auth-page #forget .read-item a { color: var(--tc-forget-primary) !important; cursor: pointer !important; }

  body.tc-auth-page #forget .login-form { margin-top: 28px !important; }
  body.tc-auth-page #forget .login-top {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--tc-forget-line) !important;
  }
  body.tc-auth-page #forget .login-email,
  body.tc-auth-page #forget .login-phone {
    width: auto !important;
    min-width: 72px !important;
    height: 38px !important;
    margin: 0 22px 0 0 !important;
    padding: 0 !important;
    color: var(--tc-forget-muted) !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    line-height: 38px !important;
    text-align: left !important;
    cursor: pointer !important;
  }
  body.tc-auth-page #forget .login-email.active,
  body.tc-auth-page #forget .login-phone.active {
    color: var(--tc-forget-primary) !important;
    border-bottom-color: var(--tc-forget-primary) !important;
  }
  body.tc-auth-page #forget .form-main { margin-top: 18px !important; }
  body.tc-auth-page #forget .form-item,
  body.tc-auth-page #forget .read-item { margin-top: 14px !important; }

  body.tc-auth-page #forget .el-input__inner {
    height: 44px !important;
    line-height: 44px !important;
    border-color: var(--tc-forget-line-2) !important;
    border-radius: 8px !important;
    background: #fff !important;
  }
  body.tc-auth-page #forget .el-input__inner:focus { border-color: var(--tc-forget-primary) !important; }

  body.tc-auth-page #forget .input-with-select.el-input-group--prepend {
    display: inline-table !important;
    width: 100% !important;
    height: 44px !important;
    border: 1px solid var(--tc-forget-line-2) !important;
    border-radius: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body.tc-auth-page #forget .input-with-select.el-input-group--prepend:focus-within { border-color: var(--tc-forget-primary) !important; }
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend {
    position: relative !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    top: 8px !important;
    right: 0 !important;
    width: 1px !important;
    height: 26px !important;
    background: var(--tc-forget-line) !important;
    pointer-events: none !important;
  }
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend .el-select,
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend .el-input {
    width: 112px !important;
    margin: 0 !important;
  }
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend .el-input__inner {
    width: 112px !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 29px 0 42px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--tc-forget-flag-image, none) !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 19px 13px !important;
    box-shadow: none !important;
    font-size: 12px !important;
  }
  body.tc-auth-page #forget .input-with-select.el-input-group--prepend > .el-input__inner {
    height: 42px !important;
    line-height: 42px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  body.tc-auth-page #forget .code-item { display: flex !important; gap: 8px !important; }
  body.tc-auth-page #forget .code-item > .el-input { min-width: 0 !important; flex: 1 1 auto !important; }
  body.tc-auth-page #forget .code-btn {
    min-width: 112px !important;
    height: 44px !important;
    margin-left: 0 !important;
    border-radius: 8px !important;
  }
  body.tc-auth-page #forget .login-btn {
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border-color: var(--tc-forget-primary) !important;
    background: var(--tc-forget-primary) !important;
    font-size: 14px !important;
  }
  body.tc-auth-page #forget .read-item { color: var(--tc-forget-muted) !important; font-size: 12px !important; line-height: 1.55 !important; }

  body.tc-auth-page #forget .login-jump-btn { top: 18px !important; right: 22px !important; z-index: 8 !important; }
}

@media (min-width: 751px) and (max-height: 620px) {
  body.tc-auth-page #forget { padding: 10px 18px !important; }
  body.tc-auth-page #forget .login-container { min-height: 0 !important; height: calc(100vh - 20px) !important; max-height: calc(100vh - 20px) !important; }
  body.tc-auth-page #forget .container-before { padding-top: 42px !important; padding-bottom: 22px !important; }
  body.tc-auth-page #forget .back-text { padding-top: 66px !important; }
}

@media (max-width: 900px) {
  body.tc-auth-page #forget {
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    padding: 12px 9px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    background: #f4f7fb !important;
  }
  body.tc-auth-page #forget .login-container {
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border: 1px solid #e6ebf2 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(18,38,67,.10) !important;
  }
  body.tc-auth-page #forget .container-back {
    position: relative !important;
    width: calc(100% - 20px) !important;
    height: 148px !important;
    margin: 10px 10px 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background-color: #07182b !important;
    background-image:
      linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
      linear-gradient(140deg,#07182b 0%,#0b3f78 62%,#087c9f 100%) !important;
    background-size: 38px 38px, 38px 38px, auto !important;
  }
  body.tc-auth-page #forget .container-back::after {
    content: "TC" !important;
    position: absolute !important;
    right: 12px !important;
    bottom: -26px !important;
    color: rgba(255,255,255,.065) !important;
    font-size: 108px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    pointer-events: none !important;
  }
  body.tc-auth-page #forget .back-line1,
  body.tc-auth-page #forget .back-line2,
  body.tc-auth-page #forget .back-line3 { display: none !important; }
  body.tc-auth-page #forget .back-text {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 31px 21px 0 !important;
    color: #fff !important;
  }
  body.tc-auth-page #forget .text-welcome {
    color: #fff !important;
    font-size: 29px !important;
    line-height: 1 !important;
    font-weight: 680 !important;
    letter-spacing: -.03em !important;
  }
  body.tc-auth-page #forget .text-title {
    max-width: 84% !important;
    margin-top: 12px !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  body.tc-auth-page #forget .text-level { display: none !important; }
  body.tc-auth-page #forget .container-before {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  body.tc-auth-page #forget .login {
    width: 100% !important;
    margin: 0 !important;
    padding: 25px 18px 28px !important;
    box-sizing: border-box !important;
    position: relative !important;
    color: var(--tc-forget-text) !important;
  }
  body.tc-auth-page #forget .login-text-title {
    padding-right: 0 !important;
    color: var(--tc-forget-text) !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 760 !important;
  }
  body.tc-auth-page #forget .login-text-regist { margin-top: 7px !important; color: var(--tc-forget-muted) !important; font-size: 13px !important; }
  body.tc-auth-page #forget .login-form { margin-top: 28px !important; }
  body.tc-auth-page #forget .form-main { margin-top: 19px !important; }
  body.tc-auth-page #forget .form-item,
  body.tc-auth-page #forget .read-item { width: 100% !important; margin-top: 14px !important; }
  body.tc-auth-page #forget .el-input__inner { height: 44px !important; line-height: 44px !important; border-radius: 9px !important; }
  body.tc-auth-page #forget .input-with-select.el-input-group--prepend {
    width: 100% !important;
    height: 44px !important;
    border: 1px solid var(--tc-forget-line-2) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend {
    position: relative !important;
    width: 104px !important;
    min-width: 104px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    top: 8px !important;
    right: 0 !important;
    width: 1px !important;
    height: 26px !important;
    background: var(--tc-forget-line) !important;
    pointer-events: none !important;
  }
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend .el-select,
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend .el-input { width: 104px !important; margin: 0 !important; }
  body.tc-auth-page #forget .input-with-select .el-input-group__prepend .el-input__inner {
    width: 104px !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 27px 0 37px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: var(--tc-forget-flag-image, none) !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 18px 12px !important;
    box-shadow: none !important;
    font-size: 12px !important;
  }
  body.tc-auth-page #forget .input-with-select.el-input-group--prepend > .el-input__inner {
    height: 42px !important;
    line-height: 42px !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  body.tc-auth-page #forget .code-item { display: flex !important; gap: 8px !important; }
  body.tc-auth-page #forget .code-item > .el-input { min-width: 0 !important; flex: 1 1 auto !important; }
  body.tc-auth-page #forget .code-btn { min-width: 104px !important; height: 44px !important; margin-left: 0 !important; border-radius: 9px !important; }
  body.tc-auth-page #forget .login-btn { width: 100% !important; height: 46px !important; min-height: 46px !important; margin-left: 0 !important; border-radius: 9px !important; border-color: var(--tc-forget-primary) !important; background: var(--tc-forget-primary) !important; }
  body.tc-auth-page #forget .read-item { color: var(--tc-forget-muted) !important; font-size: 12px !important; line-height: 1.55 !important; }
}

.tc-forget-country-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.tc-forget-country-option img {
  width: 19px !important;
  height: 13px !important;
  border-radius: 2px !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
  box-shadow: 0 0 0 1px rgba(15,23,42,.10) !important;
}