.auth-panel {
  position: absolute;
  left: 53.76px;
  top: 18.2vh;
  width: 268.8px;
}

.login-panel .logo { margin-bottom: 22.4px; }

.page-title {
  margin: 0 0 15.68px;
  font-size: 14.56px;
  line-height: 14.56px;
  font-weight: 700;
  letter-spacing: 0.88px;
}

.form-label {
  display: block;
  margin-bottom: 6.16px;
  font-size: 7.84px;
  line-height: 7.84px;
  font-weight: 400;
  color: #000000;
}

.required::before {
  content: "* ";
  color: var(--error-color);
}

.input,
.select {
  width: 100%;
  height: 22.96px;
  border: 1px solid var(--border-color);
  border-radius: 2.24px;
  background: #ffffff;
  padding: 0 8.4px;
  outline: none;
  color: #111111;
  font-size: 7.84px;
}

.input::placeholder { color: #9aa3af; }

.input:focus,
.select:focus { border-color: var(--border-focus); }

.form-row { margin-bottom: 13.44px; }

.inline-row {
  display: flex;
  width: 100%;
}

.inline-row .input { border-radius: 2.24px 0 0 2.24px; }

.inline-action {
  width: 82.88px;
  min-width: 82.88px;
  height: 22.96px;
  border: 1px solid var(--border-color);
  border-left: 0;
  border-radius: 0 2.24px 2.24px 0;
  background: #ffffff;
  color: #0069ff;
  font-size: 7.84px;
  cursor: pointer;
}

.check-line {
  display: flex;
  align-items: center;
  gap: 4.48px;
  font-size: 7.84px;
  color: #000000;
}

.check-line input {
  appearance: none;
  width: 8.4px;
  height: 8.4px;
  border: 1px solid var(--border-color);
  border-radius: 1.12px;
  background: #ffffff;
}

.btn-main {
  width: 100%;
  height: 28px;
  border: 0;
  border-radius: 14px;
  background: var(--brand-yellow);
  color: #000000;
  font-size: 7.84px;
  font-weight: 400;
}

.btn-outline {
  width: 100%;
  height: 28px;
  border: 1px solid #e2e2e2;
  border-radius: 14px;
  background: #ffffff;
  color: #000000;
  font-size: 7.84px;
}

.btn-blue {
  width: 100%;
  min-height: 28px;
  border: 0;
  border-radius: 14px;
  background: var(--brand-blue);
  color: #ffffff;
  font-size: 7.84px;
  padding: 0 10.08px;
}

.link-blue {
  color: #0069ff;
  cursor: pointer;
}

.form-error {
  display: none;
  margin-top: 2.24px;
  font-size: 6.72px;
  color: var(--error-color);
}

.form-row.is-error .input,
.form-row.is-error .select { border-color: var(--error-color); }

.form-row.is-error .form-error { display: block; }

.login-actions { margin-top: 19.6px; }

.login-register {
  margin: 19.6px 0 11.2px;
  text-align: right;
  font-size: 6.72px;
}

.auth-panel .btn-main,
.auth-panel .btn-outline,
.auth-panel .btn-blue {
  margin-bottom: 6.16px;
}

.reset-panel { top: 24.9vh; }
.reset-panel .logo { margin-bottom: 22.4px; }
.reset-field-newpass .input { border-color: var(--brand-yellow); }

.register-panel {
  left: 53.76px;
  top: 24.64px;
  width: 258.16px;
}

.register-title {
  margin: 0 0 19.04px;
  font-size: 14.56px;
  line-height: 15.68px;
  font-weight: 700;
  letter-spacing: 1px;
}

.register-tabs {
  display: flex;
  width: 100%;
  height: 15.68px;
  margin-bottom: 8.96px;
  border-bottom: 1px solid #ffe100;
}

.register-tab {
  position: relative;
  flex: 1;
  height: 15.68px;
  border: 0;
  background: transparent;
  color: #000000;
  font-size: 7.28px;
}

.register-tab.active { color: #e5c900; }

.register-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: #ffe100;
}

.register-panel .form-row { margin-bottom: 11.76px; }
.register-panel .form-label { margin-bottom: 6.16px; font-size: 7.84px; }

.register-panel .input,
.register-panel .select,
.register-panel .inline-action {
  height: 21.28px;
  font-size: 7.28px;
}

.phone-row { display: flex; width: 100%; }

.phone-prefix {
  width: 54.32px;
  min-width: 54.32px;
  border-right: 0;
  border-radius: 2.24px 0 0 2.24px;
  color: #909399;
}

.phone-input { border-radius: 0 2.24px 2.24px 0; }

.register-code .inline-action {
  width: 59.92px;
  min-width: 59.92px;
}

.invite-row { margin-top: -1px; }

.agree-row {
  margin: -2.8px 0 20.16px;
  font-size: 7.28px;
  color: #666666;
}

.agree-row .check-line {
  font-size: 7.28px;
  color: #666666;
}

.register-bottom {
  margin-top: 10.64px;
  text-align: center;
  font-size: 7.28px;
}

.simple-panel {
  top: 30vh;
}

.simple-panel .page-title {
  display: block;
}

.simple-card {
  border: 1px solid #eee;
  border-radius: 6.72px;
  padding: 14.56px;
  background: #fff;
  color: #333;
  line-height: 1.6;
}



.reset-panel .logo {
  margin-bottom: 22.4px;
}

.reset-panel .form-row {
  margin-bottom: 12.32px;
}

.reset-panel .select {
  appearance: auto;
}

.password-control {
  position: relative;
}

.password-control .input {
  padding-right: 24.64px;
}

.password-eye {
  position: absolute;
  right: 0;
  top: 0;
  width: 23.52px;
  height: 22.96px;
  border: 0;
  background: transparent;
  color: #9aa3af;
  font-size: 7.84px;
}

.password-rule {
  margin-top: 3.36px;
  font-size: 6.72px;
  color: #909399;
  line-height: 1.35;
}

.reset-code-row {
  display: flex;
}

.reset-code-row .input {
  width: calc(100% - 89.6px);
}

.reset-code-row .inline-action {
  width: 89.6px;
  min-width: 89.6px;
}

.reset-submit-btn {
  margin-top: 3.92px;
}

.reset-back-btn {
  margin-top: 6.72px;
  display: none;
}

.reset-phone-row .phone-prefix {
  color: #606266;
  background: #fff;
}

.reset-phone-row .phone-input {
  width: calc(100% - 54.32px);
}



.register-panel {
  left: 53.76px;
  top: 24.64px;
  width: 278.32px;
  min-width: 278.32px;
}

.register-title {
  margin: 0 0 19.04px;
  font-size: 14.56px;
  line-height: 15.68px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #000;
}

.register-tabs {
  display: flex;
  width: 278.32px;
  height: 16.8px;
  margin-bottom: 7.84px;
  border-bottom: 1px solid #ffe100;
}

.register-tab {
  position: relative;
  flex: 1;
  height: 16.8px;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 7.28px;
  line-height: 16.8px;
  text-align: center;
}

.register-tab.active {
  color: #e5c900;
}

.register-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: #ffe100;
}

.register-panel .form-row {
  margin-bottom: 10.08px;
}

.register-panel .form-label {
  margin-bottom: 5.04px;
  font-size: 7.84px;
  line-height: 8.4px;
  color: #000;
  font-weight: 400;
}

.register-panel .input,
.register-panel .select {
  height: 22.4px;
  border-radius: 2.24px;
  font-size: 7.28px;
  color: #111;
  padding: 0 8.4px;
}

.register-panel .input::placeholder {
  color: #9aa3af;
}

.register-panel .phone-row {
  display: flex;
  width: 100%;
}

.register-panel .phone-prefix {
  width: 58.24px;
  min-width: 58.24px;
  border-right: 0;
  border-radius: 2.24px 0 0 2.24px;
  color: #909399;
  background: #fff;
}

.register-panel .phone-input {
  width: calc(100% - 58.24px);
  border-radius: 0 2.24px 2.24px 0;
}

.register-panel .register-code {
  display: flex;
}

.register-panel .register-code .input {
  width: calc(100% - 66.08px);
  border-radius: 2.24px 0 0 2.24px;
}

.register-panel .register-code .inline-action {
  width: 66.08px;
  min-width: 66.08px;
  height: 22.4px;
  margin-top: 0;
  border: 1px solid var(--border-color);
  border-left: 0;
  border-radius: 0 2.24px 2.24px 0;
  background: #fff;
  color: #0069ff;
  font-size: 7.28px;
  line-height: 8.96px;
  white-space: normal;
  padding: 0 4.48px;
}

.register-panel .invite-row {
  margin-bottom: 7.84px;
}

.register-panel .agree-row {
  margin: -1px 0 20.16px;
  font-size: 7.28px;
  color: #666;
}

.register-panel .agree-row .check-line {
  font-size: 7.28px;
  color: #666;
}

.register-panel .btn-main {
  height: 28px;
  border-radius: 14px;
  font-size: 7.84px;
  font-weight: 400;
}

.register-bottom {
  margin-top: 10.64px;
  text-align: center;
  font-size: 7.28px;
  color: #000;
}

.register-bottom .link-blue {
  margin-left: 2.24px;
}

body[data-route="register"] .brand-copy {
  top: 42.8vh;
}

body[data-route="register"] .brand-copy h1 {
  font-size: 20.72px;
  letter-spacing: 4.144px;
}

body[data-route="register"] .brand-copy p {
  margin-top: 17.36px;
}



.register-panel-demo {
  top: 133.28px;
  width: 258.16px;
  min-width: 258.16px;
}

.register-panel-demo .register-title {
  margin-bottom: 19.04px;
}

.register-panel-demo .register-tabs {
  width: 258.16px;
  margin-bottom: 9.52px;
}

.register-panel-demo .form-row {
  margin-bottom: 14px;
}

.register-panel-demo .form-label {
  margin-bottom: 5.6px;
}

.register-demo-form .password-control {
  position: relative;
}

.register-demo-form .password-control .input {
  padding-right: 23.52px;
}

.register-demo-form .password-eye {
  position: absolute;
  right: 0;
  top: 0;
  width: 23.52px;
  height: 22.4px;
  border: 0;
  background: transparent;
  color: #b8bec9;
  font-size: 8.4px;
  line-height: 22.4px;
}

.register-demo-form .demo-register-submit {
  margin-top: -1.12px;
}

.register-demo-form .demo-register-bottom {
  margin-top: 10.64px;
}

html[dir="rtl"] .register-demo-form .password-control .input {
  padding-right: 8.4px;
  padding-left: 23.52px;
}

html[dir="rtl"] .register-demo-form .password-eye {
  right: auto;
  left: 0;
}








.auth-panel .btn-back-home {
  margin-bottom: 0;
}

@media (max-width: 630px) {
  body[data-route="login"] .auth-shell,
  body[data-route="login"] .auth-right,
  body[data-route="login"] #app {
    min-height: 100svh;
  }

  body[data-route="login"] .auth-panel.login-panel {
    width: 100%;
    max-width: 362px;
    min-height: 100svh;
    margin: 0 auto;
    padding: 86px 0 14px;
  }

  body[data-route="login"] .login-panel .logo {
    margin-bottom: 36px;
    font-size: 15px;
    line-height: 18px;
  }

  body[data-route="login"] .logo-mark {
    margin-right: 2px;
  }

  body[data-route="login"] .logo-mark i {
    width: 2px;
  }

  body[data-route="login"] .logo-mark i:nth-child(1) { height: 4px; }
  body[data-route="login"] .logo-mark i:nth-child(2) { height: 6px; }
  body[data-route="login"] .logo-mark i:nth-child(3) { height: 8px; }

  body[data-route="login"] .form-row {
    margin-bottom: 22px;
  }

  body[data-route="login"] .form-label {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1;
  }

  body[data-route="login"] .input,
  body[data-route="login"] .select {
    height: 44px;
    border-radius: 3px;
    padding: 0 14px;
    font-size: 14px;
  }

  body[data-route="login"] .inline-row {
    display: block;
  }

  body[data-route="login"] .inline-row .input {
    border-radius: 3px;
  }

  body[data-route="login"] .inline-action {
    display: inline-block;
    height: auto;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0069ff;
    font-size: 13px;
    line-height: 1;
  }

  body[data-route="login"] .check-line {
    gap: 8px;
    font-size: 14px;
    line-height: 1;
  }

  body[data-route="login"] .check-line input {
    width: 16px;
    height: 16px;
    border-radius: 2px;
  }

  body[data-route="login"] .login-register {
    margin: 30px 0 20px;
    text-align: right;
    font-size: 12px;
    line-height: 1;
  }

  body[data-route="login"] .login-actions {
    margin-top: 0;
  }

  body[data-route="login"] .btn-main,
  body[data-route="login"] .btn-outline,
  body[data-route="login"] .btn-blue {
    min-height: 52px;
    height: 52px;
    border-radius: 26px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.2;
  }

  body[data-route="login"] .btn-blue {
    padding: 0 16px;
  }

  body[data-route="login"] .btn-back-home {
    margin-top: 6px;
    margin-bottom: 0;
  }
}

@media (max-width: 390px) {
  body[data-route="login"] .auth-panel.login-panel {
    max-width: calc(100vw - 34px);
    padding-top: 78px;
  }

  body[data-route="login"] .login-panel .logo {
    margin-bottom: 30px;
  }

  body[data-route="login"] .form-row {
    margin-bottom: 18px;
  }

  body[data-route="login"] .login-register {
    margin: 24px 0 16px;
  }

  body[data-route="login"] .btn-main,
  body[data-route="login"] .btn-outline,
  body[data-route="login"] .btn-blue {
    min-height: 48px;
    height: 48px;
    margin-bottom: 9px;
  }
}


.ic-brand-logo,
.ic-brand-logo * {
  translate: no;
  -webkit-user-select: none;
  user-select: none;
}
.ic-brand-logo {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}
.logo .logo-main {
  color: #111111;
  margin: 0 4px 0 3px;
}
.logo .logo-ic,
.logo .logo-global {
  color: var(--brand-green);
}
.form-error {
  color: var(--error-color) !important;
}

@media (max-width: 900px) {
  body[data-route="login"] .logo.ic-brand-logo,
  body[data-route="forgot-password"] .logo.ic-brand-logo,
  body[data-route="register"] .logo.ic-brand-logo,
  body[data-route="wallet-login"] .logo.ic-brand-logo,
  body[data-route="demo"] .logo.ic-brand-logo {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 auto 40px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
    white-space: nowrap !important;
  }

  body[data-route="login"] .logo.ic-brand-logo .logo-mark,
  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark,
  body[data-route="register"] .logo.ic-brand-logo .logo-mark,
  body[data-route="wallet-login"] .logo.ic-brand-logo .logo-mark,
  body[data-route="demo"] .logo.ic-brand-logo .logo-mark {
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 1px !important;
    height: 16px !important;
    margin-right: 3px !important;
    transform: translateY(-2px) !important;
  }

  body[data-route="login"] .logo.ic-brand-logo .logo-mark i,
  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark i,
  body[data-route="register"] .logo.ic-brand-logo .logo-mark i,
  body[data-route="wallet-login"] .logo.ic-brand-logo .logo-mark i,
  body[data-route="demo"] .logo.ic-brand-logo .logo-mark i {
    display: block !important;
    width: 3px !important;
    border-radius: 0 !important;
    background: #111111 !important;
  }

  body[data-route="login"] .logo.ic-brand-logo .logo-mark i:nth-child(1),
  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark i:nth-child(1),
  body[data-route="register"] .logo.ic-brand-logo .logo-mark i:nth-child(1),
  body[data-route="wallet-login"] .logo.ic-brand-logo .logo-mark i:nth-child(1),
  body[data-route="demo"] .logo.ic-brand-logo .logo-mark i:nth-child(1) { height: 5px !important; }

  body[data-route="login"] .logo.ic-brand-logo .logo-mark i:nth-child(2),
  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark i:nth-child(2),
  body[data-route="register"] .logo.ic-brand-logo .logo-mark i:nth-child(2),
  body[data-route="wallet-login"] .logo.ic-brand-logo .logo-mark i:nth-child(2),
  body[data-route="demo"] .logo.ic-brand-logo .logo-mark i:nth-child(2) { height: 8px !important; }

  body[data-route="login"] .logo.ic-brand-logo .logo-mark i:nth-child(3),
  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark i:nth-child(3),
  body[data-route="register"] .logo.ic-brand-logo .logo-mark i:nth-child(3),
  body[data-route="wallet-login"] .logo.ic-brand-logo .logo-mark i:nth-child(3),
  body[data-route="demo"] .logo.ic-brand-logo .logo-mark i:nth-child(3) { height: 12px !important; }

  body[data-route="login"] .form-error,
  body[data-route="forgot-password"] .form-error,
  body[data-route="register"] .form-error,
  body[data-route="wallet-login"] .form-error,
  body[data-route="demo"] .form-error {
    margin-top: 3px !important;
    min-height: 17px !important;
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--error-color) !important;
    transform: none !important;
  }

  body[data-route="login"] .form-row.is-error {
    margin-bottom: 8px !important;
  }
}



.auth-inline-status {
  display: none;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #ffe0e4;
  border-radius: 8px;
  background: #fff7f8;
  color: #d94f5f;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}
.auth-inline-status.is-visible { display: block; }
.auth-inline-status[data-status-type="success"] {
  border-color: #c8f1d7;
  background: #f3fff7;
  color: #07814f;
}

/* DESKTOP_LOGIN_LAYOUT_PREVIOUS: match reference desktop login screenshot. Mobile rules stay untouched. */
@media (min-width: 901px) {
  body[data-route="login"] .auth-panel.login-panel {
    left: clamp(90px, 5.89vw, 113px);
    top: clamp(90px, 13.65vh, 126px);
    width: clamp(500px, 28.14vw, 540px);
  }

  body[data-route="login"] .login-panel .logo.ic-brand-logo,
  body[data-route="login"] .login-panel .logo {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 auto 44px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(22px, 1.35vw, 25px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
    white-space: nowrap !important;
  }

  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark,
  body[data-route="login"] .login-panel .logo .logo-mark {
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 1px !important;
    height: 16px !important;
    margin-right: 3px !important;
    transform: translateY(-2px) !important;
  }

  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark i,
  body[data-route="login"] .login-panel .logo .logo-mark i {
    display: block !important;
    width: 3px !important;
    border-radius: 0 !important;
    background: #111111 !important;
  }

  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark i:nth-child(1),
  body[data-route="login"] .login-panel .logo .logo-mark i:nth-child(1) { height: 5px !important; }
  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark i:nth-child(2),
  body[data-route="login"] .login-panel .logo .logo-mark i:nth-child(2) { height: 8px !important; }
  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark i:nth-child(3),
  body[data-route="login"] .login-panel .logo .logo-mark i:nth-child(3) { height: 12px !important; }

  body[data-route="login"] .page-title {
    margin: 0 0 30px;
    font-size: clamp(28px, 1.64vw, 30px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.2px;
  }

  body[data-route="login"] .form-row {
    margin-bottom: 27px;
  }

  body[data-route="login"] .form-label {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1;
  }

  body[data-route="login"] .input,
  body[data-route="login"] .select {
    height: 44px;
    border-radius: 4px;
    padding: 0 16px;
    font-size: 16px;
  }

  body[data-route="login"] .inline-row {
    display: flex;
    width: 100%;
  }

  body[data-route="login"] .inline-row .input {
    border-radius: 4px 0 0 4px;
  }

  body[data-route="login"] .inline-action {
    width: 119px;
    min-width: 119px;
    height: 44px;
    margin-top: 0;
    border: 1px solid var(--border-color);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: #ffffff;
    color: #0069ff;
    font-size: 14px;
    line-height: 42px;
  }

  body[data-route="login"] .check-line {
    gap: 8px;
    font-size: 16px;
    line-height: 1;
  }

  body[data-route="login"] .check-line input {
    width: 16px;
    height: 16px;
    border-radius: 2px;
  }

  body[data-route="login"] .login-register {
    margin: 38px 0 22px;
    text-align: right;
    font-size: 14px;
    line-height: 1;
  }

  body[data-route="login"] .login-actions {
    margin-top: 0;
  }

  body[data-route="login"] .btn-main,
  body[data-route="login"] .btn-outline,
  body[data-route="login"] .btn-blue {
    min-height: 55px;
    height: 55px;
    border-radius: 28px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.2;
  }

  body[data-route="login"] .btn-blue {
    padding: 0 18px;
  }

  body[data-route="login"] .form-error {
    margin-top: 4px;
    min-height: 18px;
    font-size: 13px;
    line-height: 18px;
  }
}

/* DESKTOP_LOGIN_LAYOUT_V402: tighten the desktop login panel to match the provided reference screenshot. */
@media (min-width: 901px) {
  body[data-route="login"] .auth-panel.login-panel {
    left: clamp(88px, 4.95vw, 95px) !important;
    top: clamp(92px, 12.1vh, 112px) !important;
    width: clamp(382px, 20.25vw, 389px) !important;
  }

  body[data-route="login"] .login-panel .logo.ic-brand-logo,
  body[data-route="login"] .login-panel .logo {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 34px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(16px, .94vw, 18px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
    white-space: nowrap !important;
    transform: translateX(-7px) !important;
  }

  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark,
  body[data-route="login"] .login-panel .logo .logo-mark {
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 1px !important;
    height: 12px !important;
    margin-right: 3px !important;
    transform: translateY(-1px) !important;
  }

  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark i,
  body[data-route="login"] .login-panel .logo .logo-mark i {
    display: block !important;
    width: 2px !important;
    border-radius: 0 !important;
    background: #111111 !important;
  }

  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark i:nth-child(1),
  body[data-route="login"] .login-panel .logo .logo-mark i:nth-child(1) { height: 4px !important; }
  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark i:nth-child(2),
  body[data-route="login"] .login-panel .logo .logo-mark i:nth-child(2) { height: 6px !important; }
  body[data-route="login"] .login-panel .logo.ic-brand-logo .logo-mark i:nth-child(3),
  body[data-route="login"] .login-panel .logo .logo-mark i:nth-child(3) { height: 9px !important; }

  body[data-route="login"] .page-title {
    margin: 0 0 21px !important;
    font-size: clamp(20px, 1.15vw, 22px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
  }

  body[data-route="login"] .form-row {
    margin-bottom: 19px !important;
  }

  body[data-route="login"] .form-label {
    margin-bottom: 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  body[data-route="login"] .input,
  body[data-route="login"] .select {
    height: 31px !important;
    border-radius: 3px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }

  body[data-route="login"] .inline-row {
    display: flex !important;
    width: 100% !important;
  }

  body[data-route="login"] .inline-row .input {
    border-radius: 3px 0 0 3px !important;
  }

  body[data-route="login"] .inline-action {
    width: 84px !important;
    min-width: 84px !important;
    height: 31px !important;
    margin-top: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
    background: #ffffff !important;
    color: #0069ff !important;
    font-size: 10px !important;
    line-height: 29px !important;
  }

  body[data-route="login"] .check-line {
    gap: 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body[data-route="login"] .check-line input {
    width: 11px !important;
    height: 11px !important;
    border-radius: 2px !important;
  }

  body[data-route="login"] .login-register {
    margin: 27px 0 16px !important;
    text-align: right !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body[data-route="login"] .login-actions {
    margin-top: 0 !important;
  }

  body[data-route="login"] .btn-main,
  body[data-route="login"] .btn-outline,
  body[data-route="login"] .btn-blue {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 19px !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body[data-route="login"] .btn-blue {
    padding: 0 12px !important;
  }

  body[data-route="login"] .form-error {
    margin-top: 3px !important;
    min-height: 13px !important;
    font-size: 9px !important;
    line-height: 13px !important;
  }
}

/* DESKTOP_AUTH_RIGHT_UNIFIED_V408: keep every desktop auth right-side page at the same scale as the current login page. */
@media (min-width: 901px) {
  body[data-route="forgot-password"] .auth-panel.reset-panel,
  body[data-route="register"] .auth-panel.register-panel,
  body[data-route="wallet-login"] .auth-panel.simple-panel,
  body[data-route="demo"] .auth-panel.simple-panel {
    left: clamp(88px, 4.95vw, 95px) !important;
    top: clamp(92px, 12.1vh, 112px) !important;
    width: clamp(382px, 20.25vw, 389px) !important;
    min-width: 0 !important;
  }

  body[data-route="forgot-password"] .logo.ic-brand-logo,
  body[data-route="forgot-password"] .logo {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 34px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(16px, .94vw, 18px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
    white-space: nowrap !important;
    transform: translateX(-7px) !important;
  }

  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark,
  body[data-route="forgot-password"] .logo .logo-mark {
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 1px !important;
    height: 12px !important;
    margin-right: 3px !important;
    transform: translateY(-1px) !important;
  }

  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark i,
  body[data-route="forgot-password"] .logo .logo-mark i {
    display: block !important;
    width: 2px !important;
    border-radius: 0 !important;
    background: #111111 !important;
  }

  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark i:nth-child(1),
  body[data-route="forgot-password"] .logo .logo-mark i:nth-child(1) { height: 4px !important; }
  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark i:nth-child(2),
  body[data-route="forgot-password"] .logo .logo-mark i:nth-child(2) { height: 6px !important; }
  body[data-route="forgot-password"] .logo.ic-brand-logo .logo-mark i:nth-child(3),
  body[data-route="forgot-password"] .logo .logo-mark i:nth-child(3) { height: 9px !important; }

  body[data-route="register"] .register-title,
  body[data-route="wallet-login"] .page-title,
  body[data-route="demo"] .page-title {
    margin: 0 0 21px !important;
    font-size: clamp(20px, 1.15vw, 22px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    color: #000000 !important;
  }

  body[data-route="register"] .register-tabs {
    width: 100% !important;
    height: 31px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #ffe100 !important;
  }

  body[data-route="register"] .register-tab {
    height: 31px !important;
    font-size: 11px !important;
    line-height: 31px !important;
  }

  body[data-route="forgot-password"] .form-row,
  body[data-route="register"] .form-row {
    margin-bottom: 19px !important;
  }

  body[data-route="register"] .invite-row {
    margin-bottom: 12px !important;
  }

  body[data-route="forgot-password"] .form-label,
  body[data-route="register"] .form-label {
    margin-bottom: 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  body[data-route="forgot-password"] .input,
  body[data-route="forgot-password"] .select,
  body[data-route="register"] .input,
  body[data-route="register"] .select {
    height: 31px !important;
    border-radius: 3px !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }

  body[data-route="forgot-password"] .inline-row,
  body[data-route="register"] .inline-row {
    display: flex !important;
    width: 100% !important;
  }

  body[data-route="forgot-password"] .inline-row .input,
  body[data-route="register"] .inline-row .input {
    border-radius: 3px 0 0 3px !important;
  }

  body[data-route="forgot-password"] .inline-action,
  body[data-route="register"] .inline-action,
  body[data-route="register"] .register-code .inline-action,
  body[data-route="forgot-password"] .reset-code-row .inline-action {
    width: 84px !important;
    min-width: 84px !important;
    height: 31px !important;
    margin-top: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
    background: #ffffff !important;
    color: #0069ff !important;
    font-size: 10px !important;
    line-height: 29px !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
  }

  body[data-route="forgot-password"] .reset-code-row .input,
  body[data-route="register"] .register-code .input {
    width: calc(100% - 84px) !important;
  }

  body[data-route="register"] .phone-row,
  body[data-route="forgot-password"] .phone-row {
    display: flex !important;
    width: 100% !important;
  }

  body[data-route="register"] .phone-prefix,
  body[data-route="forgot-password"] .phone-prefix {
    width: 84px !important;
    min-width: 84px !important;
    border-right: 0 !important;
    border-radius: 3px 0 0 3px !important;
    color: #606266 !important;
    background: #ffffff !important;
  }

  body[data-route="register"] .phone-input,
  body[data-route="forgot-password"] .phone-input {
    width: calc(100% - 84px) !important;
    border-radius: 0 3px 3px 0 !important;
  }

  body[data-route="forgot-password"] .password-control .input,
  body[data-route="register"] .password-control .input {
    padding-right: 35px !important;
  }

  body[data-route="forgot-password"] .password-eye,
  body[data-route="register"] .password-eye {
    width: 34px !important;
    height: 31px !important;
    font-size: 11px !important;
    line-height: 31px !important;
  }

  body[data-route="forgot-password"] .password-rule {
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  body[data-route="forgot-password"] .reset-type-select {
    position: relative !important;
    width: 100% !important;
    height: 31px !important;
    z-index: 30 !important;
  }

  body[data-route="forgot-password"] .reset-type-display {
    width: 100% !important;
    height: 31px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    padding: 0 35px 0 11px !important;
    box-sizing: border-box !important;
    color: #111111 !important;
    font-size: 11px !important;
    line-height: 29px !important;
    font-weight: 400 !important;
    text-align: left !important;
    outline: none !important;
  }

  body[data-route="forgot-password"] .reset-type-select.is-phone .reset-type-display,
  body[data-route="forgot-password"] .reset-type-select.is-open .reset-type-display {
    border-color: #ffdf00 !important;
  }

  body[data-route="forgot-password"] .reset-type-select.is-email .reset-type-display::after {
    content: "" !important;
    position: absolute !important;
    right: 15px !important;
    top: 11px !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 1px solid #aeb6c2 !important;
    border-bottom: 1px solid #aeb6c2 !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
  }

  body[data-route="forgot-password"] .reset-type-clear {
    display: none !important;
    position: absolute !important;
    right: 13px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -6px !important;
    border: 1px solid #c0c4cc !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #9aa3b1 !important;
    font-size: 10px !important;
    line-height: 10px !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  body[data-route="forgot-password"] .reset-type-select.is-phone .reset-type-clear,
  body[data-route="forgot-password"] .reset-type-select.is-open .reset-type-clear {
    display: block !important;
  }

  body[data-route="forgot-password"] .reset-type-menu {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 40px !important;
    height: 62px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12) !important;
    z-index: 50 !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body[data-route="forgot-password"] .reset-type-select.is-open .reset-type-menu {
    display: block !important;
  }

  body[data-route="forgot-password"] .reset-type-option {
    display: block !important;
    width: 100% !important;
    height: 31px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding: 0 16px !important;
    color: #111111 !important;
    font-size: 11px !important;
    line-height: 31px !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  body[data-route="forgot-password"] .reset-type-option.active {
    color: #ffdf00 !important;
    font-weight: 600 !important;
  }

  body[data-route="register"] .agree-row {
    margin: -2px 0 20px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  body[data-route="register"] .agree-row .check-line,
  body[data-route="register"] .register-optional-hint {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  body[data-route="register"] .register-bottom {
    margin-top: 11px !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  body[data-route="forgot-password"] .btn-main,
  body[data-route="forgot-password"] .btn-outline,
  body[data-route="register"] .btn-main,
  body[data-route="register"] .btn-outline,
  body[data-route="register"] .btn-blue,
  body[data-route="wallet-login"] .btn-main,
  body[data-route="demo"] .btn-main {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 19px !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body[data-route="wallet-login"] .simple-card,
  body[data-route="demo"] .simple-card {
    border: 1px solid #eeeeee !important;
    border-radius: 7px !important;
    padding: 21px !important;
    background: #ffffff !important;
    color: #333333 !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
  }

  body[data-route="forgot-password"] .form-error,
  body[data-route="register"] .form-error {
    margin-top: 3px !important;
    min-height: 13px !important;
    font-size: 9px !important;
    line-height: 13px !important;
  }
}



/* DESKTOP_REGISTER_RESET_SCALE_V411: only shrink register and forgot-password right panels to 90% of the current desktop size so full forms remain visible. */
.reset-home-desktop {
  display: none !important;
}

@media (min-width: 901px) {
  body[data-route="register"] .auth-panel.register-panel,
  body[data-route="forgot-password"] .auth-panel.reset-panel {
    width: clamp(424px, 22.5vw, 432px) !important;
    transform: scale(.9) !important;
    transform-origin: left top !important;
  }

  body[data-route="register"] .auth-panel.register-panel * ,
  body[data-route="forgot-password"] .auth-panel.reset-panel * {
    box-sizing: border-box !important;
  }

  body[data-route="forgot-password"] .reset-home-desktop {
    display: block !important;
  }

  body[data-route="forgot-password"] .reset-home-btn {
    width: 100% !important;
  }
}


/* LOGIN_REMEMBER_REAL_CHECKBOX_V418: make remember-account visibly clickable and keep native checked state. */
body[data-route="login"] .check-line,
body[data-route="login"] #rememberLine{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  cursor:pointer!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  pointer-events:auto!important;
}
body[data-route="login"] #remember{
  appearance:auto!important;
  -webkit-appearance:checkbox!important;
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  margin:0!important;
  accent-color:#0069ff!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  opacity:1!important;
  position:relative!important;
  z-index:2!important;
}
body[data-route="login"] .check-line span{
  cursor:pointer!important;
}
body[data-route="login"] .check-line.is-checked span{
  color:#005ee6!important;
  font-weight:700!important;
}