/* ==========================================================================
   Login / register / forgot password — visual layer only.
   Note: the login page binds every <button> to submit, so nothing here adds
   controls; the hero is decorative markup only.
   ========================================================================== */

/* ---------------------------------------------------------------- scene */
html:has(body.th-auth) { background: var(--th-bg) !important; }

body.th-auth,
body.th-auth #app,
body.th-auth .login__container,
body.th-auth .resgister__C,
body.th-auth .forgot__container,
body.th-auth .mian {
  background: transparent !important;
  font-family: var(--th-font) !important;
}

body.th-auth::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(300px 240px at 50% 8%, rgba(249, 115, 22, .38), transparent 70%),
    radial-gradient(240px 240px at 100% 70%, rgba(20, 184, 166, .2), transparent 70%),
    radial-gradient(240px 240px at 0% 90%, rgba(124, 58, 237, .2), transparent 70%),
    linear-gradient(180deg, rgba(15, 20, 33, .05) 0%, rgba(15, 20, 33, .5) 55%, var(--th-bg) 100%),
    url(/theme/img/ui/login-bg.webp) center top / cover no-repeat,
    var(--th-bg);
}

/* ---------------------------------------------------------------- top bar */
body.th-auth .navbar,
body.th-auth .navbar-fixed,
body.th-auth .navbar__content {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}

/* the logo moves into the hero */
body.th-auth .navbar .headLogo { visibility: hidden; }
body.th-auth .navbar-title { color: #fff !important; font-weight: 700 !important; }

/* ------------------------------------------------------------------ hero */
.th-auth-hero {
  position: relative;
  height: 168px;
  margin-top: 4px;
}

.th-auth-hero__glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 230px;
  height: 230px;
  margin: -115px 0 0 -115px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 77, .55) 0%, rgba(249, 115, 22, .2) 40%, transparent 70%);
  animation: th-auth-glow 3.6s ease-in-out infinite;
}

@keyframes th-auth-glow {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

.th-auth-hero__chest {
  --k: .78;
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: calc(162px * var(--k));
  height: calc(166px * var(--k));
  margin-left: calc(-81px * var(--k));
  background: url(/theme/img/ui/chest-anim.webp) no-repeat;
  background-size: calc(1024px * var(--k)) calc(647px * var(--k));
  background-position: calc(-281px * var(--k)) calc(-7px * var(--k));
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55));
  animation: th-float 3.4s ease-in-out infinite;
}

.th-auth-hero__logo {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 206, 97, .55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.th-auth-hero__logo img { display: block; height: 28px; width: auto; }

.th-auth-hero__coin {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #fbbf24 45%, #b45309);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 6px 12px rgba(0, 0, 0, .35);
  color: #92400e;
  font-weight: 900;
  animation: th-float 3s ease-in-out infinite;
}

.th-auth-hero__coin--a { width: 34px; height: 34px; left: 16%; top: 62px; font-size: 15px; }
.th-auth-hero__coin--b { width: 26px; height: 26px; right: 17%; top: 52px; font-size: 12px; animation-delay: -1.2s; }
.th-auth-hero__coin--c { width: 20px; height: 20px; right: 26%; top: 118px; font-size: 10px; animation-delay: -2.1s; }

/* --------------------------------------------------------------- heading */
body.th-auth .login__container-heading,
body.th-auth .resgister__C-heading {
  background: transparent !important;
  text-align: center;
  padding: 8px 16px 4px !important;
  height: auto !important;
}

body.th-auth .login__container-heading__title,
body.th-auth .resgister__C-heading__title {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

body.th-auth .login__container-heading__subTitle,
body.th-auth .resgister__C-heading__subTitle {
  color: #cbd5e1 !important;
  font-size: 11px !important;
}

/* "log in with phone" tab → glass pill */
body.th-auth .login_container-tab[class][class] {
  width: auto !important;
  height: auto !important;
  margin: 10px auto 12px;
  padding: 6px 18px !important;
  display: flex !important;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 206, 97, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  max-width: 220px;
}

body.th-auth .login_container-tab[class] .tab[class][class] {
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: var(--th-orange-1) !important;
  border: 0 !important;
}

body.th-auth .login_container-tab .tab::after { display: none !important; }
body.th-auth .login_container-tab img { width: 18px !important; height: 18px !important; margin: 0 !important; }
body.th-auth .login_container-tab[class] .font30[class],
body.th-auth .login_container-tab[class] div[class] { margin: 0 !important; font-size: 13px !important; color: var(--th-orange-1) !important; }

/* ------------------------------------------------------------- form card */
body.th-auth .login__container-form,
body.th-auth .resgister__C-form,
body.th-auth .forgot-box .mian-from {
  position: relative;
  isolation: isolate;
  margin: 0 14px;
  padding-bottom: 10px;
  border-radius: 22px;
  background: var(--th-glass) !important;
  border: 1px solid var(--th-glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 44px rgba(0, 0, 0, .55);
  animation: th-fade-in .5s .1s ease-out backwards;
}

/* blur lives on a pseudo-element: a backdrop-filter on the card itself
   would trap the page's full-screen alert dialog, which sits inside it */
body.th-auth .login__container-form::before,
body.th-auth .resgister__C-form::before,
body.th-auth .forgot-box .mian-from::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: var(--th-glass-blur);
  backdrop-filter: var(--th-glass-blur);
  pointer-events: none;
}

body.th-auth .forgot-box .mian-from { padding: 16px 14px; }

body.th-auth .phoneInput__container-label,
body.th-auth .passwordInput__container-label,
body.th-auth .register__container-invitation__label,
body.th-auth .forgot-box .lab {
  color: #e2e8f0 !important;
  font-weight: 600;
}

/* tint the blue label icons orange */
body.th-auth .phoneInput__container-label__icon,
body.th-auth .passwordInput__container-label__icon,
body.th-auth .register__container-invitation__label img,
body.th-auth .signIn_footer img,
body.th-auth .forgetbg,
body.th-auth .custombg {
  filter: hue-rotate(185deg) saturate(1.6) brightness(1.1);
}

/* inputs */
body.th-auth input,
body.th-auth .dropdown,
body.th-auth .forgot-box .item {
  background: rgba(15, 20, 33, .55) !important;
  border: 1px solid rgba(124, 147, 183, .45) !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.th-auth .forgot-box .item input { border: 0 !important; box-shadow: none; background: transparent !important; }
body.th-auth input::placeholder { color: #7c8aa3 !important; }

body.th-auth input:focus {
  outline: none;
  border-color: var(--th-orange-2) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .25), inset 0 2px 6px rgba(0, 0, 0, .35);
}

body.th-auth .dropdown__value,
body.th-auth .dropdown span { color: #fff !important; }
body.th-auth .dropdown__list { background: var(--th-card) !important; border: 1px solid var(--th-glass-border); border-radius: 12px; }
body.th-auth .dropdown__list-item { color: #e2e8f0 !important; }

body.th-auth .van-checkbox__icon--checked .van-icon {
  background: var(--th-orange-2) !important;
  border-color: var(--th-orange-2) !important;
}

body.th-auth .signIn__container-remember,
body.th-auth .register__container-remember,
body.th-auth .register__container-tip { color: #cbd5e1 !important; }

/* ---------------------------------------------------------------- buttons */
body.th-auth .signIn__container-button button,
body.th-auth .register__container-button button,
body.th-auth .forgot-box button {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 14px !important;
  font-family: var(--th-font) !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  transition: transform .15s ease;
}

body.th-auth .signIn__container-button button:active,
body.th-auth .register__container-button button:active { transform: scale(.97); }

body.th-auth .signIn__container-button button.active,
body.th-auth .register__container-button button#submit,
body.th-auth .forgot-box button {
  background: var(--th-orange) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(249, 115, 22, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}

body.th-auth .signIn__container-button button.active::after,
body.th-auth .register__container-button button#submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: th-shine 3s ease-in-out infinite;
}

body.th-auth .signIn__container-button button:not(.active),
body.th-auth .register__container-button button:not(.active):not(#submit) {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--th-orange-2) !important;
  color: var(--th-orange-1) !important;
}

body.th-auth .signIn_footer,
body.th-auth .signIn_footer * { color: #cbd5e1 !important; }

/* --------------------------------------------------- page alert dialog */
body.th-auth .dialog__container {
  background: var(--th-card) !important;
  border: 1px solid var(--th-glass-border);
  border-radius: 16px !important;
}

body.th-auth .dialogBtn { background: var(--th-orange) !important; }

/* original header and forgot-page panels use high-specificity backgrounds */
body.th-auth .navbar-fixed[class][class],
body.th-auth .navbar[class][class] {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.th-auth .forgot-box[class],
body.th-auth .forgot-box[class]::before,
body.th-auth .forgot-box[class]::after {
  background: transparent !important;
  box-shadow: none !important;
}

body.th-auth .forgot-box .item .txt,
body.th-auth .forgot-box .tip,
body.th-auth .forgot-box .mian-from > div:not(.item) { color: #cbd5e1 !important; }

/* --------------------------------------------------------------------------
   Spacing: logo badge above the chest (not on it), roomier card padding, and
   a shorter hero so the whole login fits on one screen
   -------------------------------------------------------------------------- */
.th-auth-hero { height: 150px; margin-top: 0; }
.th-auth-hero__logo { top: 0; padding: 6px 16px; }
.th-auth-hero__logo img { height: 24px; }
.th-auth-hero__chest { --k: .62; bottom: 0; }
.th-auth-hero__glow { top: 64%; width: 190px; height: 190px; margin: -95px 0 0 -95px; }
.th-auth-hero__coin--a { top: 70px; left: 20%; }
.th-auth-hero__coin--b { top: 58px; right: 21%; }
.th-auth-hero__coin--c { top: 116px; right: 28%; }

body.th-auth .login__container-heading,
body.th-auth .resgister__C-heading { padding: 4px 16px 0 !important; }
body.th-auth .login__container-heading__title,
body.th-auth .resgister__C-heading__title { font-size: 22px !important; }
body.th-auth .login_container-tab[class][class] { margin: 8px auto 10px; }

/* card: inner padding so labels and fields never touch the border */
body.th-auth .login__container-form,
body.th-auth .resgister__C-form { padding: 16px 14px 12px !important; }
body.th-auth .signIn__container[class],
body.th-auth .register__container[class] { padding: 0 !important; }
body.th-auth .phoneInput__container-label[class],
body.th-auth .passwordInput__container-label[class],
body.th-auth .register__container-invitation__label[class] { margin: 0 0 8px !important; padding: 0 2px !important; }
body.th-auth .phoneInput__container[class],
body.th-auth .passwordInput__container[class] { margin-bottom: 14px !important; }
body.th-auth .signIn__container-remember[class] { margin: 4px 0 14px !important; }
body.th-auth .signIn__container-button button[class] { height: 46px !important; margin-bottom: 10px !important; }
body.th-auth .signIn_footer[class] { margin-top: 6px !important; padding: 0 !important; }
body.th-auth .login__container-heading[class],
body.th-auth .resgister__C-heading[class] { min-height: 0 !important; height: auto !important; }
body.th-auth .login__container-heading__subTitle[class],
body.th-auth .resgister__C-heading__subTitle[class] { margin: 6px 0 0 !important; }
body.th-auth .signIn_footer[class] img,
body.th-auth .signIn_footer[class] .forgetbg,
body.th-auth .signIn_footer[class] .custombg { width: 30px !important; height: 30px !important; }
body.th-auth .resgister__C-form .phoneInput__container[class][class] { margin-bottom: 0 !important; padding-bottom: 14px !important; height: auto !important; }
body.th-auth .resgister__C-form .passwordInput__container[class][class] { margin-top: 0 !important; height: auto !important; }
body.th-auth .resgister__C-form .tip[class] { margin: 0 0 4px !important; color: #fca5a5 !important; font-size: 11px; }