@media (max-width: 630px) {
  :root { --left-w: 0; }

  html, body { background: #ffffff; }

  .auth-shell {
    display: block;
    min-height: 100vh;
    overflow: visible;
  }

  .brand-side { display: none; }

  .auth-right {
    width: 100%;
    min-height: 100vh;
    display: block;
  }

  .lang-box {
    right: 2.8px;
    top: 2.8px;
  }

  .lang-btn {
    min-width: 58.8px;
    height: 23.8px;
    font-size: 9.8px;
  }

  .auth-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 100vh;
    padding: 94.5px 7px 14px;
  }

  .login-panel .logo {
    margin-bottom: 28px;
    font-size: 16.1px;
  }

  .page-title { display: none; }

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

  .form-label {
    margin-bottom: 9.8px;
    font-size: 9.8px;
  }

  .input, .select {
    height: 30.1px;
    border-radius: 2.1px;
  }

  .inline-row { display: block; }

  .inline-row .input {
    width: 100%;
    border-radius: 2.1px;
  }

  .inline-action {
    margin-top: 11.2px;
    width: auto;
    min-width: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    color: #0069ff;
    background: transparent;
  }

  .login-register { margin: 25.2px 0 14px; }

  .btn-main,
  .btn-outline,
  .btn-blue {
    height: 33.6px;
    border-radius: 16.8px;
    margin-bottom: 8.4px;
  }

  .reset-panel {
    padding: 151.2px 9.8px 18.2px;
  }

  .reset-panel .logo {
    margin-bottom: 27.3px;
    font-size: 16.1px;
  }

  .reset-panel .inline-row { display: flex; }

  .reset-panel .inline-row .input {
    width: calc(100% - 128.1px);
    border-radius: 2.1px 0 0 2.1px;
  }

  .reset-panel .inline-action {
    width: 128.1px;
    min-width: 128.1px;
    height: 30.1px;
    margin-top: 0;
    border: 1px solid var(--border-color);
    border-left: 0;
    border-radius: 0 2.1px 2.1px 0;
  }

  .register-panel {
    padding: 30.1px 9.8px 16.8px;
  }

  .register-title {
    display: block;
    margin-bottom: 23.8px;
    font-size: 18.2px;
    line-height: 19.6px;
  }

  .register-tabs { margin-bottom: 11.2px; }

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

  .register-code {
    display: flex;
  }

  .register-code .input {
    width: calc(100% - 89.6px);
    border-radius: 2.1px 0 0 2.1px;
  }

  .register-code .inline-action {
    width: 89.6px;
    min-width: 89.6px;
    margin-top: 0;
    border: 1px solid var(--border-color);
    border-left: 0;
    border-radius: 0 2.1px 2.1px 0;
  }

  .simple-panel {
    padding-top: 84px;
  }

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


@media (max-width: 630px) {
  .reset-panel {
    padding: 117.6px 9.8px 18.2px;
  }

  .reset-panel .logo {
    margin-bottom: 27.3px;
    font-size: 16.1px;
  }

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

  .reset-panel .form-label {
    margin-bottom: 8.4px;
  }

  .reset-panel .input,
  .reset-panel .select {
    height: 30.1px;
    border-radius: 2.1px;
  }

  .reset-panel .phone-row {
    display: flex;
  }

  .reset-panel .phone-prefix {
    width: 68.6px;
    min-width: 68.6px;
    height: 30.1px;
    border-radius: 2.1px 0 0 2.1px;
  }

  .reset-panel .phone-input {
    width: calc(100% - 68.6px);
    height: 30.1px;
    border-radius: 0 2.1px 2.1px 0;
  }

  .password-eye {
    height: 30.1px;
  }

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

  .reset-panel .reset-code-row .input {
    width: calc(100% - 128.1px);
    border-radius: 2.1px 0 0 2.1px;
  }

  .reset-panel .reset-code-row .inline-action {
    width: 128.1px;
    min-width: 128.1px;
    height: 30.1px;
    margin-top: 0;
    border: 1px solid var(--border-color);
    border-left: 0;
    border-radius: 0 2.1px 2.1px 0;
    background: #fff;
    color: #0069ff;
  }

  .reset-submit-btn {
    height: 34.3px;
    margin-top: -1.4px;
    border-radius: 17.5px;
  }

  .reset-back-btn {
    display: block;
    height: 32.2px;
    margin-top: 9.8px;
    border-radius: 16.1px;
  }
}



@media (max-width: 630px) {
  .register-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 100vh;
    padding: 30.1px 9.8px 16.8px;
  }

  .register-title {
    display: block;
    margin: 0 0 23.8px;
    font-size: 18.2px;
    line-height: 19.6px;
    font-weight: 700;
  }

  .register-tabs {
    width: 100%;
    height: 21px;
    margin-bottom: 11.2px;
  }

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

  .register-panel .form-label {
    margin-bottom: 7.7px;
    font-size: 9.8px;
  }

  .register-panel .input,
  .register-panel .select {
    height: 30.1px;
    font-size: 9.8px;
    border-radius: 2.1px;
  }

  .register-panel .phone-prefix {
    width: 68.6px;
    min-width: 68.6px;
    border-radius: 2.1px 0 0 2.1px;
  }

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

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

  .register-panel .register-code .inline-action {
    width: 89.6px;
    min-width: 89.6px;
    height: 30.1px;
    border-radius: 0 2.1px 2.1px 0;
    font-size: 9.1px;
  }

  .register-panel .agree-row {
    margin: -3.5px 0 25.2px;
  }

  .register-panel .btn-main {
    height: 35px;
    border-radius: 17.5px;
  }
}



@media (max-width: 630px) {
  .register-panel-demo {
    top: auto;
    width: 100%;
    min-width: 0;
    padding-top: 133px;
  }

  .register-panel-demo .register-tabs {
    width: 100%;
    margin-bottom: 11.2px;
  }

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

  .register-demo-form .password-eye {
    height: 30.1px;
    line-height: 30.1px;
  }
}






@media (max-width: 900px) {
  body[data-route="login"],
  body[data-route="forgot-password"],
  body[data-route="register"],
  body[data-route="wallet-login"],
  body[data-route="demo"] { background:#fff; min-height:100vh; overflow-x:hidden; }

  body[data-route="login"] .auth-shell,
  body[data-route="forgot-password"] .auth-shell,
  body[data-route="register"] .auth-shell,
  body[data-route="wallet-login"] .auth-shell,
  body[data-route="demo"] .auth-shell { display:block; width:100%; min-height:100vh; padding:0; background:#fff; }

  body[data-route="login"] .brand-side,
  body[data-route="forgot-password"] .brand-side,
  body[data-route="register"] .brand-side,
  body[data-route="wallet-login"] .brand-side,
  body[data-route="demo"] .brand-side { display:none !important; }

  body[data-route="login"] .auth-right,
  body[data-route="forgot-password"] .auth-right,
  body[data-route="register"] .auth-right,
  body[data-route="wallet-login"] .auth-right,
  body[data-route="demo"] .auth-right { width:100%; min-height:100vh; display:block; padding:0 15px 34px; box-sizing:border-box; background:#fff; }

  body[data-route="login"] .lang-box,
  body[data-route="forgot-password"] .lang-box,
  body[data-route="register"] .lang-box,
  body[data-route="wallet-login"] .lang-box,
  body[data-route="demo"] .lang-box { position:fixed !important; top:4px !important; right:6px !important; z-index:1500 !important; display:block !important; visibility:visible !important; opacity:1 !important; }

  body[data-route="login"] .lang-btn,
  body[data-route="forgot-password"] .lang-btn,
  body[data-route="register"] .lang-btn,
  body[data-route="wallet-login"] .lang-btn,
  body[data-route="demo"] .lang-btn { min-width:94px; height:34px; padding:0 12px; border:1px solid #dcdfe6; border-radius:3px; background:#fff; color:#222; font-size:14px; line-height:32px; text-align:center; }

  body[data-route="login"] .lang-menu,
  body[data-route="forgot-password"] .lang-menu,
  body[data-route="register"] .lang-menu,
  body[data-route="wallet-login"] .lang-menu,
  body[data-route="demo"] .lang-menu { top:38px !important; right:0 !important; width:150px; max-height:calc(100vh - 44px); overflow-y:auto; }

  body[data-route="login"] .lang-item,
  body[data-route="forgot-password"] .lang-item,
  body[data-route="register"] .lang-item,
  body[data-route="wallet-login"] .lang-item,
  body[data-route="demo"] .lang-item { height:33px; font-size:13px; padding:0 10px; }

  body[data-route="login"] .auth-panel,
  body[data-route="forgot-password"] .auth-panel,
  body[data-route="wallet-login"] .auth-panel,
  body[data-route="demo"] .auth-panel { width:100%; max-width:none; margin:0; padding:136px 0 0; box-sizing:border-box; }
  body[data-route="register"] .auth-panel { width:100%; max-width:none; margin:0; padding:188px 0 0; box-sizing:border-box; }

  body[data-route="login"] .logo,
  body[data-route="forgot-password"] .logo,
  body[data-route="register"] .logo,
  body[data-route="wallet-login"] .logo,
  body[data-route="demo"] .logo { display:flex; align-items:center; justify-content:center; margin:0 auto 40px; font-size:24px; line-height:1; font-weight:800; letter-spacing:-0.8px; }
  body[data-route="login"] .logo-mark,
  body[data-route="forgot-password"] .logo-mark,
  body[data-route="register"] .logo-mark,
  body[data-route="wallet-login"] .logo-mark,
  body[data-route="demo"] .logo-mark { margin-right:3px; }
  body[data-route="login"] .logo-mark i,
  body[data-route="forgot-password"] .logo-mark i,
  body[data-route="register"] .logo-mark i,
  body[data-route="wallet-login"] .logo-mark i,
  body[data-route="demo"] .logo-mark i { width:4px; }

  body[data-route="login"] .page-title { display:none; }
  body[data-route="login"] .form-row,
  body[data-route="forgot-password"] .form-row,
  body[data-route="register"] .form-row,
  body[data-route="wallet-login"] .form-row,
  body[data-route="demo"] .form-row { margin-bottom:25px; }

  body[data-route="login"] .form-label,
  body[data-route="forgot-password"] .form-label,
  body[data-route="register"] .form-label,
  body[data-route="wallet-login"] .form-label,
  body[data-route="demo"] .form-label { display:block; margin-bottom:11px; color:#000; font-size:16px; line-height:1.1; font-weight:400; }

  body[data-route="login"] .input,
  body[data-route="forgot-password"] .input,
  body[data-route="register"] .input,
  body[data-route="wallet-login"] .input,
  body[data-route="demo"] .input,
  body[data-route="register"] .select { width:100%; height:43px; border:1px solid #dcdfe6; border-radius:4px; padding:0 14px; box-sizing:border-box; font-size:16px; color:#111; background:#fff; }
  body[data-route="login"] .input::placeholder,
  body[data-route="forgot-password"] .input::placeholder,
  body[data-route="register"] .input::placeholder,
  body[data-route="wallet-login"] .input::placeholder,
  body[data-route="demo"] .input::placeholder { color:#9aa3b1; font-size:16px; }

  body[data-route="login"] #loginPasswordRow .inline-row { display:block; }
  body[data-route="login"] #loginPasswordRow .inline-row .input { border-radius:4px; }
  body[data-route="login"] #forgotBtn { width:auto; height:auto; border:0; background:transparent; display:inline-block; margin-top:16px; padding:0; color:#006eff; font-size:15px; line-height:1.2; text-align:left; }

  body[data-route="forgot-password"] .inline-row,
  body[data-route="register"] .inline-row { display:flex; align-items:stretch; width:100%; }
  body[data-route="forgot-password"] .inline-row .input,
  body[data-route="register"] .inline-row .input { flex:1; min-width:0; border-top-right-radius:0; border-bottom-right-radius:0; }
  body[data-route="forgot-password"] .inline-action,
  body[data-route="register"] .inline-action { width:152px; height:43px; border:1px solid #dcdfe6; border-left:0; border-radius:0 4px 4px 0; background:#fff; color:#006eff; font-size:14px; line-height:43px; text-align:center; }

  body[data-route="login"] .check-line,
  body[data-route="register"] .check-line { display:inline-flex; align-items:center; gap:8px; margin-top:8px; color:#000; font-size:16px; line-height:1.2; }
  body[data-route="login"] .check-line input,
  body[data-route="register"] .check-line input { width:16px; height:16px; margin:0; }

  body[data-route="login"] .login-register { margin-top:32px; margin-bottom:19px; text-align:right; color:#000; font-size:12px; line-height:1.2; }
  body[data-route="login"] .link-blue,
  body[data-route="register"] .link-blue { color:#006eff; }
  body[data-route="login"] .login-actions { display:block; }

  body[data-route="login"] .btn-main,
  body[data-route="login"] .btn-outline,
  body[data-route="login"] .btn-blue,
  body[data-route="forgot-password"] .btn-main,
  body[data-route="register"] .btn-main,
  body[data-route="wallet-login"] .btn-main,
  body[data-route="demo"] .btn-main { width:100%; height:49px; border-radius:25px; font-size:15px; line-height:49px; margin:0 0 13px; }
  body[data-route="login"] .btn-main,
  body[data-route="forgot-password"] .btn-main,
  body[data-route="register"] .btn-main,
  body[data-route="wallet-login"] .btn-main,
  body[data-route="demo"] .btn-main { background:#ffdf00; color:#000; border:0; }
  body[data-route="login"] .btn-outline { background:#fff; color:#000; border:1px solid #e4e7ed; }
  body[data-route="login"] .btn-blue { min-height:50px; height:auto; padding:0 20px; background:#0788ff; color:#fff; border:0; white-space:normal; line-height:1.45; font-size:15px; }

  body[data-route="register"] .register-title { display:none; }
  body[data-route="register"] .register-tabs { margin-bottom:25px; height:43px; }
  body[data-route="register"] .register-tab { height:43px; font-size:16px; }
  body[data-route="register"] .phone-row { display:grid; grid-template-columns:98px 1fr; }
  body[data-route="register"] .phone-prefix { height:43px; border-radius:4px 0 0 4px; }
  body[data-route="register"] .phone-input { border-radius:0 4px 4px 0; }
  body[data-route="register"] .register-bottom { margin-top:16px; text-align:center; font-size:13px; }
  body[data-route="register"] .agree-row { margin:5px 0 23px; }
  body[data-route="forgot-password"] .auth-panel { padding-top:214px; }
}

@media (max-width: 360px) {
  body[data-route="login"] .auth-right,
  body[data-route="forgot-password"] .auth-right,
  body[data-route="register"] .auth-right { padding-left:12px; padding-right:12px; }
  body[data-route="login"] .auth-panel { padding-top:122px; }
  body[data-route="login"] .logo,
  body[data-route="forgot-password"] .logo,
  body[data-route="register"] .logo { font-size:22px; }
  body[data-route="login"] .form-label,
  body[data-route="forgot-password"] .form-label,
  body[data-route="register"] .form-label { font-size:15px; }
}




@media (max-width: 900px) {
  body[data-route="forgot-password"] {
    background: #ffffff !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
  }

  body[data-route="forgot-password"] .auth-shell,
  body[data-route="forgot-password"] .auth-right {
    width: 100% !important;
    min-height: 100vh !important;
    display: block !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  body[data-route="forgot-password"] .brand-side {
    display: none !important;
  }

  
  body[data-route="forgot-password"] .lang-box {
    position: fixed !important;
    top: 4px !important;
    right: 6px !important;
    z-index: 1500 !important;
    display: block !important;
  }

  body[data-route="forgot-password"] .lang-btn {
    min-width: 94px !important;
    height: 33px !important;
    padding: 0 12px !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    color: #222222 !important;
    font-size: 14px !important;
    line-height: 31px !important;
    text-align: center !important;
  }

  
  body[data-route="forgot-password"] .reset-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 217px 13px 28px !important;
    box-sizing: border-box !important;
  }

  body[data-route="forgot-password"] .reset-panel .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 38px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
  }

  body[data-route="forgot-password"] .reset-panel .logo-mark {
    margin-right: 3px !important;
  }

  body[data-route="forgot-password"] .reset-panel .logo-mark i {
    width: 4px !important;
  }

  body[data-route="forgot-password"] .reset-panel form {
    width: 100% !important;
    margin: 0 !important;
  }

  body[data-route="forgot-password"] .reset-panel .form-row {
    margin: 0 0 28px !important;
  }

  body[data-route="forgot-password"] .reset-panel .form-label {
    display: block !important;
    margin: 0 0 12px !important;
    color: #000000 !important;
    font-size: 15px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
  }

  body[data-route="forgot-password"] .required::before {
    color: #f56c6c !important;
    margin-right: 3px !important;
  }

  body[data-route="forgot-password"] .reset-panel .input,
  body[data-route="forgot-password"] .reset-panel .select {
    width: 100% !important;
    height: 43px !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    color: #111111 !important;
    font-size: 15px !important;
    line-height: 41px !important;
    outline: none !important;
  }

  body[data-route="forgot-password"] .reset-panel .input::placeholder {
    color: #9aa3b1 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
  }

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

  body[data-route="forgot-password"] .reset-type-select .select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 44px !important;
    cursor: pointer !important;
  }

  body[data-route="forgot-password"] .reset-type-select.is-email::after {
    content: "" !important;
    position: absolute !important;
    right: 20px !important;
    top: 17px !important;
    width: 8px !important;
    height: 8px !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-select.is-phone .select {
    border-color: #ffdf00 !important;
  }

  body[data-route="forgot-password"] .reset-type-clear {
    display: none !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    border: 1px solid #c0c4cc !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #9aa3b1 !important;
    font-size: 11px !important;
    line-height: 11px !important;
    padding: 0 !important;
    text-align: center !important;
    cursor: pointer !important;
  }

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

  
  body[data-route="forgot-password"] .reset-panel .phone-row,
  body[data-route="forgot-password"] .reset-phone-row {
    display: grid !important;
    grid-template-columns: 123px 1fr !important;
    width: 100% !important;
    height: 43px !important;
  }

  body[data-route="forgot-password"] .reset-panel .phone-prefix {
    width: 123px !important;
    min-width: 123px !important;
    height: 43px !important;
    border: 1px solid #dcdfe6 !important;
    border-right: 0 !important;
    border-radius: 3px 0 0 3px !important;
    background: #f7f9fc !important;
    padding: 0 14px !important;
    color: #9aa3b1 !important;
    font-size: 15px !important;
    line-height: 41px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  body[data-route="forgot-password"] .reset-panel .phone-input {
    width: 100% !important;
    height: 43px !important;
    border-radius: 0 3px 3px 0 !important;
  }

  body[data-route="forgot-password"] .reset-phone-row {
    position: relative !important;
  }

  body[data-route="forgot-password"] .reset-phone-row::after {
    content: "" !important;
    position: absolute !important;
    left: 75px !important;
    top: 16px !important;
    width: 8px !important;
    height: 8px !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-panel .password-control {
    position: relative !important;
    width: 100% !important;
  }

  body[data-route="forgot-password"] .reset-panel .password-input {
    width: 100% !important;
    padding-right: 15px !important;
  }

  body[data-route="forgot-password"] .reset-panel .password-eye,
  body[data-route="forgot-password"] .reset-panel .password-rule {
    display: none !important;
  }

  
  body[data-route="forgot-password"] #resetConfirmRow {
    display: none !important;
  }

  
  body[data-route="forgot-password"] .reset-panel .inline-row.reset-code-row {
    display: grid !important;
    grid-template-columns: 1fr 121px !important;
    width: 100% !important;
    height: 43px !important;
  }

  body[data-route="forgot-password"] .reset-panel .reset-code-row .input {
    width: 100% !important;
    height: 43px !important;
    border-radius: 3px 0 0 3px !important;
  }

  body[data-route="forgot-password"] .reset-panel .reset-code-row .inline-action {
    width: 121px !important;
    min-width: 121px !important;
    height: 43px !important;
    margin: 0 !important;
    border: 1px solid #dcdfe6 !important;
    border-left: 0 !important;
    border-radius: 0 3px 3px 0 !important;
    background: #ffffff !important;
    color: #006eff !important;
    font-size: 15px !important;
    line-height: 41px !important;
    text-align: center !important;
    padding: 0 !important;
  }

  body[data-route="forgot-password"] .reset-panel .form-error {
    display: none !important;
    margin-top: 6px !important;
    color: #f56c6c !important;
    font-size: 12px !important;
  }

  body[data-route="forgot-password"] .reset-panel .form-row.is-error .form-error {
    display: block !important;
  }

  body[data-route="forgot-password"] .reset-panel .form-row.is-error .input,
  body[data-route="forgot-password"] .reset-panel .form-row.is-error .select {
    border-color: #f56c6c !important;
  }

  body[data-route="forgot-password"] .reset-submit-btn {
    width: 100% !important;
    height: 49px !important;
    margin: -4px 0 0 !important;
    border: 0 !important;
    border-radius: 25px !important;
    background: #ffdf00 !important;
    color: #000000 !important;
    font-size: 15px !important;
    line-height: 49px !important;
    font-weight: 400 !important;
    text-align: center !important;
  }

  body[data-route="forgot-password"] .reset-back-btn {
    display: none !important;
  }
}

@media (max-width: 360px) {
  body[data-route="forgot-password"] .reset-panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body[data-route="forgot-password"] .reset-panel .phone-row,
  body[data-route="forgot-password"] .reset-phone-row {
    grid-template-columns: 112px 1fr !important;
  }

  body[data-route="forgot-password"] .reset-panel .phone-prefix {
    width: 112px !important;
    min-width: 112px !important;
  }

  body[data-route="forgot-password"] .reset-panel .reset-code-row {
    grid-template-columns: 1fr 112px !important;
  }

  body[data-route="forgot-password"] .reset-panel .reset-code-row .inline-action {
    width: 112px !important;
    min-width: 112px !important;
    font-size: 14px !important;
  }
}




@media (max-width: 900px) {
  body[data-route="forgot-password"] .reset-type-select {
    position: relative !important;
    width: 100% !important;
    height: 43px !important;
    z-index: 30 !important;
  }

  body[data-route="forgot-password"] .reset-type-display {
    width: 100% !important;
    height: 43px !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 44px 0 15px !important;
    box-sizing: border-box !important;
    color: #111111 !important;
    font-size: 15px !important;
    line-height: 41px !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: 20px !important;
    top: 17px !important;
    width: 8px !important;
    height: 8px !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: 18px !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    border: 1px solid #c0c4cc !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #9aa3b1 !important;
    font-size: 11px !important;
    line-height: 11px !important;
    padding: 0 !important;
    text-align: center !important;
    cursor: pointer !important;
    z-index: 3 !important;
  }

  body[data-route="forgot-password"] .reset-type-select.is-phone .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: 56px !important;
    height: 86px !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-menu::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -6px !important;
    margin-left: -6px !important;
    width: 12px !important;
    height: 12px !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
    box-shadow: -2px -2px 4px rgba(0,0,0,.03) !important;
  }

  body[data-route="forgot-password"] .reset-type-option {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 43px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding: 0 22px !important;
    color: #111111 !important;
    font-size: 15px !important;
    line-height: 43px !important;
    font-weight: 400 !important;
    text-align: left !important;
    cursor: pointer !important;
  }

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

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

  body[data-route="forgot-password"] .reset-type-option + .reset-type-option {
    border-top: 0 !important;
  }

  
  body[data-route="forgot-password"] #resetTypeRow {
    margin-bottom: 132px !important;
  }

  body[data-route="forgot-password"] #resetTypeRow:has(.reset-type-select:not(.is-open)) {
    margin-bottom: 28px !important;
  }
}




@media (max-width: 900px) {
  body[data-route="forgot-password"] #resetTypeRow.dropdown-open {
    margin-bottom: 132px !important;
  }
}




@media (max-width: 900px) {
  body[data-route="forgot-password"] #resetTypeRow {
    margin-bottom: 28px !important;
  }

  body[data-route="forgot-password"] #resetTypeRow.dropdown-open {
    margin-bottom: 132px !important;
  }

  body[data-route="forgot-password"] #resetForm.type-dropdown-open #resetEmailRow,
  body[data-route="forgot-password"] #resetForm.type-dropdown-open #resetPhoneRow {
    display: none !important;
  }

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

  body[data-route="forgot-password"] .reset-type-display {
    width: 100% !important;
    height: 43px !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 44px 0 15px !important;
    box-sizing: border-box !important;
    color: #111111 !important;
    font-size: 15px !important;
    line-height: 41px !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: 20px !important;
    top: 17px !important;
    width: 8px !important;
    height: 8px !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: 18px !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    border: 1px solid #c0c4cc !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #9aa3b1 !important;
    font-size: 11px !important;
    line-height: 11px !important;
    padding: 0 !important;
    text-align: center !important;
    cursor: pointer !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: 56px !important;
    height: 86px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
    z-index: 80 !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-menu::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: -6px !important;
    margin-left: -6px !important;
    width: 12px !important;
    height: 12px !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
    box-shadow: -2px -2px 4px rgba(0,0,0,.03) !important;
  }

  body[data-route="forgot-password"] .reset-type-option {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 43px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    padding: 0 22px !important;
    color: #111111 !important;
    font-size: 15px !important;
    line-height: 43px !important;
    font-weight: 400 !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  body[data-route="forgot-password"] .reset-type-option:first-child {
    background: #f5f7fa !important;
  }

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

  body[data-route="forgot-password"] .reset-type-option:not(.active) {
    color: #111111 !important;
    font-weight: 400 !important;
  }
}



@media (max-width: 900px) {
  body[data-route="register"] .auth-right {
    padding: 0 20px 34px !important;
    background: #fff !important;
  }

  body[data-route="register"] .lang-box {
    top: 12px !important;
    right: 12px !important;
  }

  body[data-route="register"] .lang-btn {
    min-width: 96px !important;
    height: 36px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 34px !important;
    background: #fff !important;
  }

  body[data-route="register"] .auth-panel.register-panel,
  body[data-route="register"] .auth-panel.register-panel-demo,
  body[data-route="register"] .auth-panel.register-panel-email {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 72px 0 24px !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
  }

  body[data-route="register"] .auth-inline-status {
    margin-bottom: 0 !important;
  }

  body[data-route="register"] .register-title {
    display: none !important;
  }

  body[data-route="register"] .register-tabs {
    width: 100% !important;
    height: 52px !important;
    margin: 0 0 18px !important;
    border-bottom: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: end !important;
  }

  body[data-route="register"] .register-tab {
    height: 52px !important;
    font-size: 16px !important;
    line-height: 52px !important;
    color: #111 !important;
    font-weight: 500 !important;
    border-bottom: 2px solid transparent !important;
    padding: 0 !important;
  }

  body[data-route="register"] .register-tab.active {
    color: #f2c800 !important;
    border-bottom-color: #f2d100 !important;
  }

  body[data-route="register"] .register-tab.active::after {
    display: none !important;
  }

  body[data-route="register"] .register-form {
    width: 100% !important;
  }

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

  body[data-route="register"] .form-label {
    display: block !important;
    margin-bottom: 11px !important;
    color: #000 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
  }

  body[data-route="register"] .register-panel .input,
  body[data-route="register"] .register-panel .select,
  body[data-route="register"] .inline-action {
    height: 44px !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    color: #111 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  body[data-route="register"] .register-panel .input::placeholder,
  body[data-route="register"] .register-panel .select,
  body[data-route="register"] .register-panel .select option:first-child {
    color: #a9b1bf !important;
  }

  body[data-route="register"] .phone-row {
    display: grid !important;
    grid-template-columns: 102px 1fr !important;
    width: 100% !important;
  }

  body[data-route="register"] .phone-prefix {
    min-width: 102px !important;
    width: 102px !important;
    border-right: 0 !important;
    border-radius: 4px 0 0 4px !important;
    padding-right: 26px !important;
  }

  body[data-route="register"] .phone-input {
    width: 100% !important;
    border-radius: 0 4px 4px 0 !important;
  }

  body[data-route="register"] .inline-row.register-code {
    display: grid !important;
    grid-template-columns: 1fr 122px !important;
    width: 100% !important;
  }

  body[data-route="register"] .register-code .input {
    width: 100% !important;
    min-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  body[data-route="register"] .register-code .inline-action {
    width: 122px !important;
    min-width: 122px !important;
    border-left: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    color: #1c67ff !important;
    font-size: 14px !important;
    line-height: 42px !important;
    padding: 0 6px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

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

  body[data-route="register"] .agree-row {
    margin: -4px 0 28px !important;
  }

  body[data-route="register"] .register-optional-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #8c8c8c !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  body[data-route="register"] .register-optional-icon {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #8c8c8c !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 700 !important;
  }

  body[data-route="register"] .btn-main {
    width: 100% !important;
    height: 54px !important;
    border-radius: 27px !important;
    font-size: 20px !important;
    line-height: 54px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    background: #ffde00 !important;
    color: #000 !important;
  }

  body[data-route="register"] .register-bottom {
    margin-top: 16px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #000 !important;
  }

  body[data-route="register"] .form-error {
    margin-top: 6px !important;
    font-size: 12px !important;
  }
}