/* Shared login dialog. Open with $(".loginDialogPop").show(). */
.loginDialogPop {
    display: none;position: fixed;  inset: 0;  z-index: 100; box-sizing: border-box;
    width: 100%; height: 100%;  top: 0; left: 0; background: rgba(0, 0, 0, .5);
}
.loginDialogPop .loginDialog {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at 24% 48%, #d8f2ff80, transparent 48%), radial-gradient(ellipse at 0 0, #fff, transparent 65%), linear-gradient(120deg, #f6fcff, #eaf5ff 60%, #f8fcff);
    box-shadow: 0 20px 80px #10284430; border-radius: 18px; overflow: auto;
    width: 980px;max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
    display: grid; grid-template-columns: 1.18fr 1fr; padding: 26px; gap: 36px; align-items: start;
}
.loginDialogPop .closeBtn {position: absolute;}
.loginDialogPop .login-brand img {display: block; width: 120px; height: auto; mix-blend-mode: multiply;}
.loginDialogPop .login-story h2 {margin: 18px 0 5px; font-size: 28px; line-height: 1.4; white-space: normal; font-weight: 700;}
.loginDialogPop .login-story h2 > span {color: #0869ff;}
.loginDialogPop .story-copy {color: #677e97;  font-size: 13px;}
.loginDialogPop .platform-visual {margin-top: 8px;}
.loginDialogPop .platform-scene {display: block;width: 100%; height: auto;}
.loginDialogPop .platform-products {display: flex; flex-wrap: wrap;justify-content: center; gap: 7px 8px;margin: 2px auto 0; max-width: 340px;}
.loginDialogPop .platform-products span {padding: 6px 13px; background: #ffffffc4; border: 1px solid #d9eafb; border-radius: 6px; color: #537895; font-size: 12px;line-height: 1.4; box-shadow: 0 2px 7px #2d85bd04;}
.loginDialogPop .platform-value {display:flex;align-items:center;justify-content:center;gap:15px;margin:16px 0 5px;color:#7796ae;font-size:12px;letter-spacing:.4px}
.loginDialogPop .platform-value i {width:3px;height:3px;border-radius:50%;background:#afd0e8}
.loginDialogPop .login-card {margin-top: 40px;background:#fff;border:1px solid #fff;border-radius:18px;box-shadow:0 12px 40px #6a9fcc15,0 0 0 1px #e2effa;display:flex;flex-direction:column;overflow:hidden}

.loginDialogPop .login-card-content { padding: 32px 29px 15px; flex: 1;}
.loginDialogPop .login-card form {margin-top: 20px;}
.loginDialogPop .login-field-label {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.loginDialogPop .login-card .phone-wrap {position:relative}
.loginDialogPop .login-card .phone-prefix {position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;color:#7c8ba2;border-right:1px solid #dbe1eb;padding-right:12px;line-height:18px}
.loginDialogPop .login-card .login-input {width:100%;height:42px;border:1px solid #d6deea;border-radius:5px;font:13px "Microsoft YaHei",Arial,sans-serif;padding:0 12px;color:#25405e;background:#fff}
.loginDialogPop .login-card .phone-wrap .login-input {padding-left:61px}
.loginDialogPop .login-card .login-input::placeholder {color:#a8b3c5}
.loginDialogPop .login-card .login-input:focus {outline:0;border-color:#4382ff;box-shadow:0 0 0 2px #2277ff08}
.loginDialogPop #sms-login-fields, .loginDialogPop #password-login-fields {margin-top:16px}
.loginDialogPop .login-card .login-code-row {display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:12px;margin:0}
.loginDialogPop .login-card .login-code-button {font:12px "Microsoft YaHei";border:1px solid #076bff;border-radius:5px;background:#fff;color:#076bff;padding:0 4px;cursor:pointer}
.loginDialogPop .login-card .login-code-button:disabled {color:#93a1b6;border-color:#cbd5e2;cursor:default;background:#f8faff}
.loginDialogPop .login-agreement {margin: 12px 0;font-size: 12px; line-height: 1.8; color: #536980; gap: 6px; display: flex;align-items: flex-start;}
.loginDialogPop .login-card .login-agreement input { width: 13px;height: 13px; margin: 3px 0 0; accent-color: #0869ff; flex-shrink: 0; -webkit-appearance: auto;}
.loginDialogPop .login-card .login-agreement a {color:#0869ff}
.loginDialogPop .login-card .login-submit {width: 100%;position:relative;height:42px;border-radius:5px;background:#0869ff;color:#fff;font:14px "Microsoft YaHei",Arial,sans-serif;box-shadow:none}
.loginDialogPop .login-card .login-submit:disabled {background:#6b9ff7;cursor:default}
.loginDialogPop .login-card .login-submit span {position:absolute;right:16px;font-size:19px;top:8px}
.loginDialogPop .login-methods {display: flex; align-items: center; justify-content: right;}
.loginDialogPop .login-methods button {background: none; color: #999; margin-top: 8px;}

.loginDialogPop .dialog-captcha-refresh {flex: 0 0 110px;height: 46px;padding: 0;border: 1px solid #dce3ed;border-radius: 7px;overflow: hidden;background: #fff;cursor: pointer;}
.loginDialogPop .dialog-captcha-refresh img {display: block;width: 110px;height: 46px;}
.loginDialogPop .red {font-size: 12px;}
.loginDialogPop .dialog-password-fields input {margin-bottom: 10px;}
.loginDialogPop .loginCloseBtn {position: absolute;right: 10px; top: 10px; font-size: 18px;padding: 0 6px; cursor: pointer;}

.loginDialogPop [hidden] {display: none !important;}
.loginDialogPop .dialog-sms-verification {position: fixed;inset: 0;z-index: 5;display: flex;align-items: center;justify-content: center;background: rgba(0,0,0,.35);}
.loginDialogPop .dialog-verification-card {position: relative;width: 280px;padding: 28px 24px 24px;border-radius: 14px;background: #fff;}
.loginDialogPop .dialog-verification-card > p {margin: 0 0 18px;text-align: center;color: #333;}
.loginDialogPop .dialog-verification-close {position: absolute;right: 10px;top: 6px;border: 0;background: transparent;font-size: 24px;cursor: pointer;}
.loginDialogPop .dialog-rotate-host .control-wrap {margin-top: 18px;}
/* Keep dialog sizing independent of product and responsive form rules. */
.loginDialogPop *, .loginDialogPop *::before, .loginDialogPop *::after {box-sizing: border-box;}
.loginDialogPop .loginDialog {grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);max-height: calc(100vh - 32px);max-height: calc(100dvh - 32px);overscroll-behavior: contain;}
.loginDialogPop .login-story, .loginDialogPop .login-card, .loginDialogPop .login-card-content {min-width: 0;}
.loginDialogPop .login-card .login-input {min-width: 0;max-width: 100%;}
.loginDialogPop .login-agreement > span {min-width: 0;overflow-wrap: anywhere;}
.loginDialogPop .login-feedback {overflow-wrap: anywhere;}
.loginDialogPop .dialog-captcha-refresh {width: 100%;min-width: 0;}
.loginDialogPop .dialog-captcha-refresh img {width: 100%;height: 100%;object-fit: contain;}
.loginDialogPop .loginCloseBtn {z-index: 6;display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;line-height: 1;}

@media (max-width: 1023px) {
  .loginDialogPop {overflow-y: auto;overscroll-behavior: contain;}
  .loginDialogPop .loginDialog {width: 480px;max-width: calc(100vw - 32px);grid-template-columns: minmax(0, 1fr);gap: 18px;padding: 24px;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;}
  .loginDialogPop .loginDialog > .login-story {width: 100%;margin: 0;padding: 0 30px 0 0;}
  .loginDialogPop .login-story .platform-visual {display: none;}
  .loginDialogPop .login-story h2 {font-size: 24px;margin-top: 12px;}
  .loginDialogPop .login-story .story-copy {margin: 0;line-height: 1.6;}
  .loginDialogPop .loginDialog > .login-card {width: 100%;margin: 0;}
  .loginDialogPop .login-card-content {padding: 24px 20px 18px;}
  .loginDialogPop .login-card-content h2 {margin: 0;font-size: 20px;line-height: 1.5;}
  .loginDialogPop .login-card .login-input {height: 46px;font-size: 16px;}
  .loginDialogPop .login-card .login-submit {height: 46px;font-size: 16px;}
  .loginDialogPop .login-card .login-code-row {grid-template-columns: minmax(0, 1fr) 108px;gap: 8px;}
  .loginDialogPop .login-card .login-code-button {min-height: 46px;white-space: nowrap;}
  .loginDialogPop .login-methods button {min-height: 40px;}
  .loginDialogPop .dialog-verification-card {width: 280px;max-width: calc(100% - 16px);max-height: 100%;overflow-y: auto;}
}
@media (max-width: 480px) {
  .loginDialogPop .loginDialog {max-width: calc(100vw - 24px);padding: 18px 12px;gap: 14px;border-radius: 14px;max-height: calc(100vh - 24px);max-height: calc(100dvh - 24px);}
  .loginDialogPop .loginDialog > .login-story {padding-left: 8px;}
  .loginDialogPop .login-brand img {width: 100px;}
  .loginDialogPop .login-story h2 {font-size: 21px;}
  .loginDialogPop .login-card-content {padding: 20px 12px 14px;}
  .loginDialogPop .login-card-content h2 {font-size: 18px;}
  .loginDialogPop .loginCloseBtn {right: 6px;top: 6px;}
}