.login-page {
  position: fixed;
  z-index: 1000;
  inset: 0;
  padding: clamp(22px, 5vw, 72px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(21, 32, 46, 0.48);
}
.login-page.login-page-embedded {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #f7fbff 0%, #eaf3ff 55%, #dbeaff 100%);
}
.login-page-embedded .login-dialog {
  width: 100%;
  height: 100%;
  max-height: none;
}
.login-page-embedded .login-dialog-compact {
  width: min(460px, calc(100% - 32px));
  height: min(660px, calc(100% - 32px));
  display: block;
  border: 1px solid #c9d9ee;
  border-radius: 22px;
  box-shadow: 0 22px 62px rgba(58, 118, 214, 0.18);
}
.login-page-embedded .login-promo {
  min-height: 0;
}
.login-page-embedded .login-form-panel {
  height: 100%;
  padding: 28px 46px 24px;
  overflow: hidden;
}
.login-page-embedded .login-tabs {
  margin-bottom: 18px;
}
.login-heading {
  margin-bottom: 24px;
  text-align: center;
}
.login-heading h1 {
  margin: 0;
  color: #071a44;
  font-size: 30px;
  line-height: 1.35;
}
.login-heading p {
  margin: 8px 0 0;
  color: #7a8ba6;
  font-size: 15px;
}
.login-page-embedded .login-form-panel .field {
  margin-bottom: 14px;
}
.login-page-embedded .login-agreement {
  margin-top: 16px;
  line-height: 1.55;
}
.login-agreement a {
  color: #0875df;
  text-decoration: none;
}
.login-agreement a:hover {
  text-decoration: underline;
}

.login-underlay {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  filter: blur(1px);
}

.login-dialog {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  height: min(620px, calc(100vh - 32px));
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(440px, 0.88fr);
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(16, 42, 76, 0.2);
}

.login-promo {
  position: relative;
  min-height: 0;
  padding: 42px 46px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background-color: #1764d6;
  background-image: url("/agent-bg-white-data-flow.png");
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
}

.login-promo-brand {
  align-self: flex-start;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  text-decoration: none;
}

.login-promo-eyebrow {
  margin: 0 0 12px;
  color: #d8e8ff;
  font-weight: 700;
}

.login-promo h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.24;
  letter-spacing: 0;
}

.login-promo-copy > p:not(.login-promo-eyebrow) {
  max-width: 420px;
  margin: 22px 0 24px;
  color: #edf5ff;
  font-size: 17px;
  line-height: 1.7;
}

.login-promo ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 650;
}

.login-promo li {
  position: relative;
  padding-left: 22px;
}

.login-promo li::before {
  position: absolute;
  left: 0;
  content: "•";
  color: #fff;
  font-size: 24px;
  line-height: 0.7;
}

.login-promo-foot {
  margin: 0;
  color: #dbeaff;
  font-size: 13px;
}

.login-form-panel {
  position: relative;
  padding: 30px clamp(34px, 5vw, 62px) 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.login-close {
  position: absolute;
  top: 16px;
  right: 18px;
  color: #657180;
  font-size: 39px;
  font-weight: 300;
  line-height: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.login-tabs {
  display: flex;
  justify-content: center;
  margin: 4px auto 26px;
  border-bottom: 1px solid #e0e7ef;
}

.login-tabs > span {
  width: 1px;
  height: 22px;
  align-self: center;
  background: #dce4ef;
}

.login-tabs button {
  min-width: 160px;
  padding: 13px 10px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #7c8794;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.login-tabs button.active {
  border-bottom-color: var(--blue);
  color: #075dcc;
}

.login-form-panel .field {
  margin: 0 0 14px;
}

.login-form-panel .field label {
  display: flex;
  justify-content: space-between;
  color: #303944;
  font-size: 14px;
}

.login-form-panel .field label span {
  color: #99a3af;
  font-weight: 500;
}

.login-form-panel .field input {
  height: 48px;
  border-radius: 6px;
  font-size: 16px;
}

.verification-row {
  display: flex;
  overflow: hidden;
  border: 1px solid #cfdbe7;
  border-radius: 6px;
}

.verification-row input {
  min-width: 0;
  flex: 1;
  border: 0 !important;
  border-radius: 0 !important;
}

.text-button {
  min-width: 118px;
  border: 0;
  border-left: 1px solid #dfe7ef;
  background: #fff;
  color: var(--blue);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.text-button:disabled {
  color: #9aabbc;
  cursor: wait;
}

.login-form-panel .btn {
  height: 48px;
  border-radius: 6px;
  font-size: 17px;
}

.login-agreement {
  max-width: 390px;
  margin: 16px auto 0;
  color: #87909b;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

.wechat-login-state {
  min-height: 400px;
  margin: 0;
  padding: 0 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #708094;
  text-align: center;
}

.wechat-login-toolbar {
  width: 320px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #708094;
  font-size: 13px;
}

.wechat-login-copy {
  display: grid;
  gap: 6px;
}

.wechat-login-state strong {
  color: #263649;
  font-size: 20px;
}

.wechat-login-state span {
  font-size: 14px;
  line-height: 1.6;
}

.wechat-login-qr-shell {
  width: 320px;
  height: 340px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.wechat-login-qr-shell > i {
  color: #93a0b0;
  font-size: 13px;
  font-style: normal;
}

.wechat-login-qr {
  width: 320px;
  height: 340px;
  display: block;
  border: 0;
  background: #fff;
  object-fit: contain;
}

.wechat-login-refresh {
  padding: 6px 0 6px 12px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.wechat-login-refresh:disabled {
  color: #9ba9ba;
  cursor: wait;
}

.wechat-login-hint {
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #edf4ff;
  color: #316ed8;
  font-size: 14px;
}

.wechat-login-error {
  width: 260px;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
  color: #c44848;
  font-size: 13px;
}

.wechat-login-error strong {
  color: #263649;
  font-size: 18px;
}

.wechat-login-error span {
  color: #708094;
}

.wechat-login-error .btn {
  width: auto;
  height: 40px;
  padding: 0 20px;
  color: #fff;
}

.wechat-login-mock-complete {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Login value story and authentication are intentionally kept as two distinct
   regions: the left side explains the market, while the right side is purely
   task-focused. */
.login-page-embedded {
  background: #eff6ff !important;
}

.login-dialog {
  grid-template-columns: minmax(540px, 1.24fr) minmax(420px, .76fr);
  border-radius: 18px;
  box-shadow: 0 30px 84px rgba(17, 43, 84, .22);
}

.login-promo {
  isolation: isolate;
  padding: 36px 42px 28px;
  color: #0a3480;
  background: linear-gradient(155deg, #f9fcff 0%, #e4f2ff 49%, #c9e1ff 100%);
}

.login-promo::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 84% 12%, rgba(54, 144, 255, .2), transparent 28%), radial-gradient(circle at 16% 92%, rgba(10, 100, 236, .1), transparent 35%);
}

.login-promo-brand {
  color: #0758bf;
  font-size: 20px;
  letter-spacing: .02em;
}

.login-promo-copy {
  margin-top: 24px;
}

.login-promo h1 {
  max-width: 530px;
  color: #082866;
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.045em;
}

.login-promo-copy > p:not(.login-promo-eyebrow) {
  max-width: 430px;
  margin: 16px 0 0;
  color: #426494;
  font-size: 15px;
  line-height: 1.7;
}

.login-promo-workflow {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 5px -28px 0 -18px;
  overflow: hidden;
}

.login-promo-workflow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 54%;
  mix-blend-mode: multiply;
}

.login-workflow-labels {
  position: absolute;
  right: 46px;
  bottom: 27px;
  left: 44px;
  display: flex;
  justify-content: space-between;
  color: #1465c9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.login-promo-foot {
  color: #47709f;
  font-size: 12px;
  font-weight: 650;
}

.login-form-panel {
  padding: 48px clamp(36px, 4.3vw, 56px) 24px;
}

.login-heading {
  margin-bottom: 21px;
  text-align: left;
}

.login-heading h1 {
  color: #071e54;
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.login-heading p {
  margin-top: 7px;
  color: #7e8da3;
  font-size: 13px;
}

.login-close {
  top: 17px;
  right: 18px;
  color: #78879c;
  font-size: 32px;
}

.login-tabs {
  width: 100%;
  justify-content: stretch;
  margin: 0 auto 12px;
}

.login-tabs button {
  min-width: 0;
  flex: 1;
  padding: 12px 6px;
  font-size: 14px;
}

.wechat-login-state {
  min-height: 0;
  padding: 0;
}

.wechat-login-toolbar {
  width: 250px;
  min-height: 31px;
  font-size: 12px;
}

.wechat-login-refresh {
  font-size: 12px;
}

.wechat-login-qr-shell,
.wechat-login-qr {
  width: 250px;
  height: 270px;
}

.wechat-login-qr-shell {
  border: 1px solid #dce8f8;
  border-radius: 12px;
  background: #fff;
}

.wechat-login-qr-shell iframe {
  width: 250px !important;
  height: 270px !important;
  border: 0;
}

.wechat-login-hint {
  width: auto;
  margin: 8px 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #71839b;
  font-size: 12px;
}

.login-agreement {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid #e8eef6;
  color: #8794a8;
  font-size: 11px;
  line-height: 1.7;
}

.login-agreement span {
  display: block;
  margin-bottom: 2px;
}

.login-form-panel .success,
.login-form-panel .error {
  margin: 0 0 18px;
  font-size: 13px;
}

.captcha-popup[hidden] { display: none; }
.captcha-popup { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.captcha-popup-backdrop { position: absolute; inset: 0; background: rgba(9, 24, 45, .5); backdrop-filter: blur(4px); }
.captcha-popup-dialog { position: relative; width: min(400px, 100%); padding: 28px 40px 24px; border: 1px solid #d6e3f2; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(8, 37, 77, .26); }
.captcha-popup-dialog h2 { margin: 0 0 8px; color: #101828; font-size: 22px; }
.captcha-popup-dialog > p { margin: 0 0 20px; color: #66758a; font-size: 14px; line-height: 1.6; }
.captcha-popup-close { position: absolute; top: 13px; right: 15px; border: 0; background: transparent; color: #738196; font-size: 28px; cursor: pointer; }
.slider-captcha-widget { width: 320px; max-width: 100%; margin: 0 auto; }
.slider-captcha-widget .slider-captcha-stage { border-color: #c4d6ea; box-shadow: 0 8px 24px rgba(15,73,137,.12); }
.slider-captcha-widget .slider-captcha-bar { margin-top: 14px; border-color: #c4d6ea; border-radius: 9px; background: #edf4fc; }
.slider-captcha-widget .slider-captcha-track { border-radius: 9px; }
.slider-captcha-widget .slider-captcha-thumb { border-color: #0878ed; background: #fff; color: #0878ed; }
.slider-captcha-widget .slider-captcha-status { border: 0; background: transparent; color: #56677d; }
.captcha-popup-message { min-height: 20px; margin-top: 11px; color: #607087; font-size: 13px; text-align: center; }
.captcha-popup-message.is-success { color: #16845f; }
.captcha-popup-message.is-error { color: #b42318; }

@media (max-width: 860px) {
  .login-page { padding: 0; display: block; background: #fff; }
  .login-underlay { display: none; }
  .login-dialog { width: 100%; height: auto; min-height: 100vh; grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }
  .login-promo { min-height: 270px; padding: 30px; }
  .login-promo h1 { font-size: 30px; }
  .login-promo-copy > p:not(.login-promo-eyebrow) { margin: 12px 0 16px; font-size: 15px; }
  .login-promo ul { gap: 7px; font-size: 13px; }
  .login-promo-foot { display: none; }
  .login-form-panel { min-height: 520px; padding: 34px 28px; }
  .login-tabs { margin-bottom: 32px; }
  .login-close { top: 18px; right: 22px; font-size: 34px; }
  .login-page-embedded { display: grid; place-items: center; }
  .login-page-embedded .login-dialog { height: 100%; min-height: 0; grid-template-columns: 1fr; }
  .login-page-embedded .login-promo { display: none; }
  .login-page-embedded .login-dialog-compact { width: min(460px, calc(100% - 24px)); height: min(660px, calc(100% - 24px)); border-radius: 20px; }
  .login-page-embedded .login-form-panel { min-height: 0; padding: 42px 24px 20px; }
  .wechat-login-state { min-height: 390px; }
}

@media (max-width: 420px) {
  .login-promo { min-height: 240px; }
  .login-promo h1 { font-size: 27px; }
  .login-promo ul { display: none; }
  .login-tabs button { min-width: 0; flex: 1; }
  .login-form-panel { padding: 30px 20px; }
}
