* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 1180px;
  min-height: 100vh;
  color: #202124;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  background: #eef5ff;
}
.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: url('/static/i18n-auth/pc-login-bg.png') center/cover no-repeat;
}
.auth-card {
  position: absolute;
  right: 12.2vw;
  top: 50%;
  width: 720px;
  min-height: 620px;
  padding: 30px 76px 46px;
  border: 4px solid rgba(255,255,255,.88);
  border-radius: 16px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 24px 80px rgba(41,88,158,.16);
  transform: translateY(-50%);
}
.page--register .auth-card {
  min-height: 610px;
}
.lang {
  position: relative;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  color: #353942;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
}
.lang__globe {
  width: 21px;
  height: 21px;
  background: url('/static/i18n-auth/pc-lang-icon.png') center/contain no-repeat;
}
.lang__arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #343a46;
  border-bottom: 2px solid #343a46;
  transform: rotate(45deg) translateY(-2px);
}
.lang-menu {
  position: absolute;
  left: 0;
  top: 36px;
  z-index: 1001;
  width: 128px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(33,64,103,.14);
  display: none;
  pointer-events: auto;
}
.lang.is-open .lang-menu { display: block; }
.lang-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.lang-menu button {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 60px;
  border: 0;
  border-bottom: 1px solid #eef0f5;
  background: transparent;
  color: #202124;
  cursor: pointer;
  font-size: 15px;
  text-align: center;
}
.lang-menu button:last-child { border-bottom: 0; }
.pc-login-lang {
  position: relative;
  z-index: 1000;
  display: inline-block;
  height: 34px;
  color: #353942;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  line-height: 34px;
}
.pc-login-lang.is-open { z-index: 1010; }
.pc-login-lang__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  color: #353942;
  cursor: pointer;
  position: relative;
  z-index: 1004;
}
.pc-login-lang__icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  background: url('/static/i18n-auth/pc-lang-icon.png') center/contain no-repeat;
}
.pc-login-lang__arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #343a46;
  border-bottom: 2px solid #343a46;
  transform: rotate(45deg) translateY(-2px);
}
.pc-login-lang__menu {
  position: absolute;
  left: 0;
  top: 42px;
  z-index: 1011;
  display: none;
  visibility: hidden;
  opacity: 0;
  width: 128px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(33,64,103,.14);
  pointer-events: auto;
}
.pc-login-lang.is-open .pc-login-lang__menu {
  display: block;
  visibility: visible;
  opacity: 1;
}
.pc-login-lang__menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.pc-login-lang__menu a {
  position: relative;
  z-index: 1;
  display: block;
  height: 60px;
  border-bottom: 1px solid #eef0f5;
  color: #202124;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  line-height: 60px;
  cursor: pointer;
  user-select: none;
}
.pc-login-lang__menu a:last-child { border-bottom: 0; }
.pc-login-lang__menu a.on,
.pc-login-lang__menu a:hover {
  color: #3171F0;
  font-weight: 700;
}
.auth-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}
.auth-card__login-link {
  color: #2f7cff;
  text-decoration: none;
  font-size: 15px;
  line-height: 34px;
  white-space: nowrap;
}
.auth-card__login-link:hover {
  color: #1767ee;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
}
.logo img {
  max-width: 184px;
  max-height: 64px;
  object-fit: contain;
}
.logo__fallback {
  color: #162033;
  font-size: 26px;
  font-weight: 800;
}
.title {
  margin: 0 0 24px;
  color: #202124;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
}
.page--register .title {
  margin-top: 54px;
}
.field {
  position: relative;
  display: flex;
  align-items: center;
  height: 54px;
  margin-top: 18px;
  border: 1px solid #d9dee8;
  border-radius: 8px;
  background: #fff;
}
.field__icon {
  width: 54px;
  height: 52px;
  flex: 0 0 54px;
  color: #8f98a8;
  text-align: center;
  font-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
}
.field__icon--email { background-image: url('/static/userb/images/ico_email.png'); }
.field__icon--code { background-image: url('/static/userb/images/ico_yzm.png'); }
.field__icon--password { background-image: url('/static/userb/images/ico_password.png'); }
.field__icon--invite { background-image: url('/static/userb/images/ico_link.png'); }
.field input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 52px;
  border: 0;
  outline: none;
  color: #1f2633;
  font-size: 15px;
  background: transparent;
}
.field input::placeholder { color: #b6bdc9; }
.field input[disabled] { color: #717783; background: transparent; }
.field--code input {
  padding-right: 144px;
}
.field__action {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-width: 118px;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-left: 1px solid #eef0f5;
  color: #2f7cff;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  pointer-events: auto;
}
.field--code .field__action {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1;
}
.field__action[disabled] {
  color: #aab2c0;
  cursor: not-allowed;
}
.submit {
  width: 100%;
  height: 62px;
  margin-top: 34px;
  border: 0;
  border-radius: 34px;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(90deg,#147cff 0%,#4699ff 100%);
  box-shadow: 0 16px 32px rgba(41,126,255,.22);
}
.submit[disabled] { opacity: .72; cursor: not-allowed; }
.links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 22px;
}
.links a { color: #2f7cff; text-decoration: none; font-size: 15px; }
.message {
  min-height: 22px;
  margin-top: 12px;
  color: #e54b4b;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
}
.message:empty {
  min-height: 0;
  margin-top: 0;
}
.message.is-visible {
  margin-top: 12px;
}
.auth-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  min-width: 300px;
  max-width: 520px;
  padding: 13px 20px;
  border-radius: 6px;
  color: #fff;
  background: #d25151;
  box-shadow: 0 14px 38px rgba(42, 65, 105, .22);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity .18s ease;
}
.auth-toast.is-visible { opacity: 1; }
.auth-toast--success { background: #28a86b; }
.auth-toast--info { background: #2f7cff; }
.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  color: #6f7177;
  font-size: 14px;
}
.agreement input { width: 16px; height: 16px; }
.agreement button {
  border: 0;
  color: #ff8a1c;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
}
.modal.is-open { display: flex; }
.modal__panel {
  width: 620px;
  max-height: 76vh;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid #eef0f5;
  font-size: 20px;
  font-weight: 800;
}
.modal__close {
  border: 0;
  background: transparent;
  color: #7b8494;
  cursor: pointer;
  font-size: 24px;
}
.modal__content {
  max-height: 430px;
  padding: 22px 26px;
  overflow: auto;
  color: #333946;
  font-size: 15px;
  line-height: 1.8;
}
.modal__section {
  margin: 0 0 24px;
}
.modal__section:last-child {
  margin-bottom: 0;
}
.modal__section h3 {
  margin: 0 0 12px;
  color: #202124;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}
.modal__section p {
  margin: 0 0 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.modal__section p:last-child {
  margin-bottom: 0;
}
.modal__actions {
  display: flex;
  gap: 14px;
  padding: 20px 26px 24px;
}
.modal__actions button {
  flex: 1;
  height: 44px;
  border: 0;
  border-radius: 22px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}
.modal__ghost { background: #f2f5fb; color: #6f7177; }
.modal__primary { background: linear-gradient(90deg,#147bff 0%,#4095f4 100%); color: #fff; }
.download {
  position: fixed;
  right: 36px;
  top: 30px;
  z-index: 4;
  width: 132px;
  text-align: center;
}
.download__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  height: 34px;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  background: linear-gradient(90deg,#1178ff 0%,#4999ff 100%);
  box-shadow: 0 12px 26px rgba(22,115,255,.24);
  cursor: default;
}
.download__btn::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 5px;
  flex: 0 0 16px;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2.2v7.2' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M4.9 6.9 8 10l3.1-3.1' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.4 13.3h9.2' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.download__card {
  display: none;
  position: absolute;
  top: 34px;
  left: 50%;
  width: 136px;
  padding: 10px 10px 12px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(44,83,128,.16);
  transform: translateX(-50%);
}
.download:hover .download__card,
.download:focus-within .download__card {
  display: block;
}
.download__card img {
  display: block;
  width: 98px;
  height: 98px;
  margin: 0 auto 8px;
  object-fit: contain;
}
.download__text { color: #9aa2b1; font-size: 12px; line-height: 1; white-space: nowrap; }
.hidden { display: none; }
@media (max-width: 1440px) {
  .auth-card { right: 7vw; width: 660px; }
}