/* 寮哄埗瑕嗙洊椤圭洰涓彲鑳界殑骞叉壈鏍峰紡 */
#hpLoginModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  display: none; 
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

#hpLoginModalOverlay.active {
  opacity: 1;
  visibility: visible;
}

#hpLoginModalContainer {
  width: 425px;
  height: 688px;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: hidden !important; /* 纭繚骞崇Щ鍔ㄧ敾涓嶆孩鍑� */
  display: block;
  box-shadow: none !important;
  /* 鍒濆鍏抽棴鐘舵€侊細缂╁皬涓斿悜涓嬪亸绉� */
  transform: scale(0.9) translateY(40px);
  opacity: 0;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s;
  box-sizing: border-box;
}

/* 鐘舵€佺鐞嗭細灏哄鍜岀炕杞� */
#hpLoginModalContainer.step-2 {
  width: 424px;
  height: 331px;
}

#hpLoginModalContainer.step-3 {
  width: 424px;
  height: 640px; /* 楠岃瘉淇℃伅椤靛唴瀹硅緝澶氾紝璁句负 640px */
}

#hpLoginModalContainer.step-4 {
  width: 424px;
  height: 720px; /* 娉ㄥ唽琛ㄥ崟椤靛唴瀹硅緝澶氾紝璁句负 720px */
}

#hpLoginModalContainer.step-5 {
  width: 424px;
  height: 440px; /* 閲嶇疆瀵嗙爜椤甸€備腑楂樺害 */
}

/* 绉婚櫎缈昏浆閫昏緫锛岀敱鍐呴儴骞崇Щ鍔ㄧ敾鏇夸唬 */

.login-face .login-modal-left{
  position: relative;
}

.login-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* 绉婚櫎 transform 鍔ㄧ敾锛屾敼鐢卞唴閮ㄥ瓙鍏冪礌鎺у埗骞崇Щ */
}

#hpLoginModalContainer.active {
  opacity: 1;
}

#hpLoginModalOverlay.active #hpLoginModalContainer {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* 绉婚櫎鍐椾綑缈昏浆鏍峰紡 */

.login-face {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s, visibility 0.6s;
}

.login-front {
  display: flex !important;
  flex-direction: row;
  z-index: 2;
  transform: translateX(0);
}

.login-back {
  transform: translateX(100%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 40px !important;
}

.login-third {
  transform: translateX(100%);
  z-index: 3;
  width: 100%; 
  padding: 38px 40px !important;
  top: 0;
  left: 0;
}

.login-fourth {
  transform: translateX(100%);
  z-index: 4;
  width: 100%; 
  padding: 49px 42px 32px 42px !important;
  top: 0;
  left: 0;
}

.login-fifth {
  transform: translateX(100%);
  z-index: 5;
  width: 100%; 
  padding: 38px 40px !important;
  top: 0;
  left: 0;
}


/* 浼樺寲鍚勯潰鐨勫彲瑙佹€х鐞嗭紝瑙ｅ喅缈昏浆杩囩▼涓殑闂幇闂 */

/* 鎵€鏈夐潰閫氱敤锛氬鍔犻€忔槑搴﹁繃搴︼紝璁╁垏鎹㈡洿鏌斿拰 */
/* --- 骞崇Щ鍔ㄧ敾鐘舵€佺鐞� --- */

/* Step 1 鐘舵€� */
#hpLoginModalContainer.step-1 .login-front { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; }
#hpLoginModalContainer.step-1 .login-back { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-1 .login-third { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-1 .login-fourth { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; }

/* Step 2 鐘舵€� */
#hpLoginModalContainer.step-2 .login-front { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-2 .login-back { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; width: 420px;}
#hpLoginModalContainer.step-2 .login-third { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-2 .login-fourth { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; }

/* Step 3 鐘舵€� */
#hpLoginModalContainer.step-3 .login-front { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-3 .login-back { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-3 .login-third { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; }
#hpLoginModalContainer.step-3 .login-fourth { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; }

/* Step 4 鐘舵€侊紙娉ㄥ唽椤碉級 */
#hpLoginModalContainer.step-4 .login-front { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-4 .login-back { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-4 .login-third { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-4 .login-fourth { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; }
#hpLoginModalContainer.step-4 .login-fifth { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; }

/* Step 5 鐘舵€侊紙閲嶇疆瀵嗙爜锛� */
#hpLoginModalContainer.step-5 .login-front { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-5 .login-back { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-5 .login-third { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-5 .login-fourth { transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
#hpLoginModalContainer.step-5 .login-fifth { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; }



.login-back .modal-close-btn{
  position: absolute;
}

.verify-content {
  position: relative;
  width: 100%;
}


.verify-inner {
  width: 100%;
}

.info-step .modal-title {
  font-size: 24px;
  font-weight: 600; 
  margin-bottom: 24px;
}


.email-info-card {
  background: #F3FBFE;
  border: 1px solid #D8DFE2;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  text-align: left;
  margin-bottom: 0;
  overflow: hidden; /* 淇濊瘉瀛愬厓绱犱笉婧㈠嚭鍗＄墖 */
}

.email-details {
  flex: 1;
  min-width: 0; /* 鍏佽 flex 椤圭洰缂╁皬鑷冲唴瀹逛箣涓嬶紝浠ヤ究瀛愬厓绱犳樉绀虹渷鐣ュ彿 */
  margin: 0 16px; /* 琛ュ伩 gap 鐨勭己澶憋紝淇濇寔鍐呭鍛煎惛鎰� */
}

.email-icon img {
  width: 36px;
  height: 36px;
  margin-top: -30px;
}

.email-desc {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: #777;
  margin-bottom: 4px;
}

.email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.email-hook-icon{
  width: 24px;
}
.email-hook-icon img{
  width: 24px;
}

.displayed-email {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #111;
  /* 鎴柇澶勭悊 */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.change-email-link {
  font-size: 12px;
  line-height: 1.5;
  color: #ff8c00;
  text-decoration: none;
  font-weight: 400;
  display: block;
}

.code-input-group {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 20px 0 30px 0;
}

.code-input {
  width: 48px;
  height: 48px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  outline: none;
  transition: all 0.2s;
}

.code-input:focus {
  border-color: #ffda00;
  box-shadow: 0 0 0 1px #ffda00;
}

.info-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.resend-link {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: #999;
  text-decoration: none;
  cursor: default;
  transition: all 0.3s;
  pointer-events: none; /* 鍊掕鏃朵腑绂佺敤鐐瑰嚮 */
}

.resend-link:hover {
  color: #999;
  text-decoration: none;
}

.resend-link.active {
  color: #111;
  cursor: pointer;
  font-weight: 500;
  pointer-events: auto; /* 鍊掕鏃剁粨鏉熷悗杩樺師鐐瑰嚮 */
}

.resend-link.active:hover {
  text-decoration: underline;
}

.back-to-verify {
  font-size: 14px;
  line-height: 1.5;
  color: #111;
  text-decoration: underline;
  font-weight: 400;
}

.help-section {
  text-align: left;
}

.help-title {
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 2px;
  color: #212121;
}

.help-text {
  font-size: 12px;
  color: #6B6B6B;
  line-height: 1.6;
}

.help-text a {
  color: #6B6B6B;
  text-decoration: underline;
}

.verify-inner .modal-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 20px;
}

.verify-inner .login-submit-btn {
  margin-bottom: 20px !important;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  padding: 14px 32px;
  background-color: #9f9fa1;
  pointer-events: none;
}



.back-footer {
  margin-top: 8px;
  text-align: center;
}

.back-to-login {
  color: #111;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.2s;
}


.back-to-login:hover {
  color: #444;
}

.back-close-btn {
  background: #f5f5f5 !important;
}


/* 宸︿晶鍐呭*/
#loginModalLeft {
  padding: 44px 41px 25px 41px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;

}

.login-content {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.modal-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  color: #000000;
  text-align: center;
  margin-bottom: 33px !important;
}

.modal-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #777;
  margin-bottom: 32px;
}

/* 鎸夐挳鍙婅緭鍏ユ */
.google-login-btn {
  width: 100%;
  padding: 17px 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 60px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}
.google-login-btn img{
  width: 20px;
  height: 20px;
}

.google-login-btn:hover {
  background: #fafafa;
  border-color: #d0d0d0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.google-login-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.separator {
  position: relative;
  text-align: center;
  margin: 10px 0;
  width: 100%;
}

.separator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #efefef;
}

.separator span {
  font-size: 14px;
  color: #bbb;
  background: #fff;
  padding: 0 15px;
  position: relative;
}

.login-input-group {
  margin-bottom: 20px;
  position: relative;
}

#hpLoginModalContainer .login-input-group input {
  width: 100%;
  padding: 12px 20px;
  border: 1.5px solid #f0f0f0;
  border-radius: 6px; /* 鏄惧紡璁剧疆鍏ㄩ儴鍦嗚浠ラ槻琚鐩� */
  font-size: 15px;
  outline: none;
  box-sizing: border-box; /* 纭繚涓嶅奖鍝嶅竷灞€ */
}

.login-input-group input:focus {
  border-color: #000;
  background: #fff;
}

.login-input-group {
  margin-bottom: 5px; /* 鍑忓皬搴曢儴杈硅窛锛屽洜涓轰吉鍏冪礌浼氬崰浣� */
  position: relative;
  width: 100%;
}

.login-input-group::after {
  content: attr(data-error);
  display: block;
  min-height: 16px; /* 濮嬬粓鍗犵敤 16px 楂樺害锛岄槻姝㈠竷灞€鎶栧姩 */
  color: red;
  font-size: 11px;
  margin: 0 0 0 2px;
  text-align: left;
}

.code-input-group::after{
  content: attr(data-error);
  position: absolute;
  display: block;
  min-height: 16px; /* 濮嬬粓鍗犵敤 16px 楂樺害锛岄槻姝㈠竷灞€鎶栧姩 */
  color: red;
  font-size: 11px;
  margin: 0 0 0 2px;
  text-align: left;
  left: 0;
  top: 100%;
}

.password-toggle {
  position: absolute;
  right: 25px;
  top: 10px; 
  cursor: pointer;
  color: #bbb;
  z-index: 10;
  display: none; /* 鍒濆闅愯棌锛屾湁杈撳叆鏃跺啀鏄剧ず */
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 30px;
}
.password-toggle img{
  max-width: 32px;
}
.input-clear {
  position: absolute;
  right: 0px;
  top: 8px; 
  cursor: pointer;
  z-index: 10;
  display: none; /* 鍒濆闅愯棌锛屾湁杈撳叆鏃跺啀鏄剧ず */
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 30px;
}
.input-clear img {
  width: 32px;
  height: 32px;
}
#hpLoginModalContainer input[type="email"],
#hpLoginModalContainer #regCodeInput {
  padding-right: 45px; /* 涓烘竻闄ゅ浘鏍囩暀鍑虹┖闂� */
}
#hpLoginModalContainer input[type="password"] {
  padding-right: 45px; /* 涓虹溂鐫涘浘鏍囩暀鍑虹┖闂� */
}
.pp-password-container {
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  display: block;
}

.pp-input-field {
  width: 100%;
  padding: 16px 50px 16px 20px; /* 鍙充晶鐣欏嚭鐪肩潧鍥炬爣鐨勪綅?*/
  border: 1.5px solid #f0f0f0;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  background: #fafafa;
  box-sizing: border-box;
}

.pp-input-field:focus {
  border-color: #000;
  background: #fff;
}

.pp-eye-toggle {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #bbb;
  display: flex;
  align-items: center;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -5px 0 30px 0;
  font-size: 14px;
  font-weight: 500;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(0, 0, 0, .75);
}

.checkbox-container input { display: none; }

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #000; /* 鏈嬀閫夋椂鏄粦鑹茬殑鏂规锛堣竟妗嗭級 */
  border-radius: 4px;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}

.checkbox-container input:checked + .checkmark {
  background: #6B57FF; /* 鍕鹃€夋椂鏄粦鑹茬殑瀹炲績鑳屾櫙 */
  border-color: #6B57FF;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container input:checked + .checkmark::after {
  display: block;
}

.forgot-password {
  color: #6B57FF;
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.login-submit-btn {
  width: 100%;
  padding: 16px 32px;
  color: #fff;
  background-color: #6B57FF;
  gap: 10px;
  border: none;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 16px;
  line-height: 1.5;
}

#modalSubmitBtn{
  background: #9f9fa1;
  pointer-events: none
}

.login-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.login-submit-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.signup-prompt {
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  margin-bottom: 30px;
  text-align: center;
  color: #404040;
}

/* .signup-prompt a {
  text-decoration: none;
} */

.to-agreement-by-Agreement,
.to-agreement-by-Policy{
  text-decoration: none !important;
  border-bottom: 1px solid #a6a6a6;
  color: #3d3d3d;
}
.legal-text {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  color: #3d3d3d;
  margin-bottom: 0;
  text-align: center;
}

.legal-text a.legal-link {
  color: #3d3d3d;
  text-decoration: underline;
  transition: color 0.2s;
}

.legal-text a.legal-link:hover {
  color: #FF5C00;
}


/* --- 鍏抽棴鎸夐挳鍗曠嫭鏍峰紡绠＄悊 --- */

/* 1. 椤甸潰涓€锛氱櫥褰曢〉鍙充笂瑙掞紙浣嶄簬鍙充晶鎻掑浘涓婏級 */
.login-front .modal-close-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 99;
}

.login-fifth .modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  z-index: 99;
}

.login-front .modal-close-btn:hover {
  transform: rotate(90deg);
}

/* 2. 椤甸潰浜岋細鎵惧洖瀵嗙爜椤靛彸涓婅锛堢櫧鑹茶儗鏅級 */
.login-back .modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  z-index: 99;
}

.login-back .modal-close-btn img {
  width: 15px;
  height: 15px;
}

.login-back .modal-close-btn:hover {
  opacity: 0.7;
}

/* 3. 椤甸潰涓�/鍥涳細楠岃瘉/娉ㄥ唽椤靛彸涓婅锛堢櫧鑹茶儗鏅級 */
.login-third .modal-close-btn,
.login-fourth .modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  z-index: 99;
}

.login-third .modal-close-btn img,
.login-fourth .modal-close-btn img {
  width: 15px;
  height: 15px;
}

.login-third .modal-close-btn:hover,
.login-fourth .modal-close-btn:hover {
  opacity: 0.7;
}
.change-email-icon{
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
}
.change-email-icon img{
  width: 18px;
}

/* 娉ㄥ唽椤甸潰涓撶敤甯冨眬 */
.register-step .modal-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: #121212;
  padding: 0 20px;
}

.register-step .modal-subtitle {
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #6B6B6B;
  text-align: left;
}

.code-row {
  display: flex;
  gap: 12px;
  margin-bottom: 5px; /* 瀵归綈涔嬪墠鐨� login-input-group */
}

.code-row .login-input-group {
  flex: 1;
}

.get-code-btn {
  height: 48px;
  width: 138px;
  padding: 0 24px;
  background: #fff;
  border: 1px solid #D8DFE2;
  color: #9C9C9C;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.get-code-btn.active:hover {
  color: #6B57FF;
  border-color: #6B57FF;
  background-color: rgba(107, 87, 255, 10%);
}

.get-code-btn.disabled {
  border: 1px solid #D8DFE2;
  color: #777;
  cursor: default;
  pointer-events: none;
  font-weight: 600;
}

.register-google-btn {
  margin-bottom: 24px;
}

.register-legal {
  text-align: center;
}
@media(max-width: 992px){
  #hpLoginModalContainer.step-2 .login-back{
    width: 100%;
  }
  #loginModalLeft{
    padding: 40px 24px;
  }
  .login-face{
    top: unset;
    bottom: 0;
  }
  #hpLoginModalOverlay{
    align-items: end;
  }
}

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 500px;
  padding: 12px 20px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  z-index: 999999;
  opacity: 0;
  transition: all 0.3s ease;
}

.toast.show {
  opacity: 1;
  top: 40px;
}

.toast.success {
  background: #67c23a;
}

.toast.error {
  background: #f56c6c;
}

.toast.warning {
  background: #e6a23c;
}

@media (max-width: 992px)
{
  .login-face{
    border-radius: 12px 12px 0 0;
  }
}