/* Custom animations and effects */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
  }
}
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.float-animation {
  animation: float 3s ease-in-out infinite;
}

.glow-effect {
  animation: glow 2s ease-in-out infinite;
}

.gradient-bg {
  background: linear-gradient(-45deg, #8b5cf6, #ec4899, #06b6d4, #10b981);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

.glass-effect {
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.login-background {
  width: 100%;
  height: 100%;
}

.login-form .arco-form-label-item label {
  display: flex;
  align-items: center;
}
.login-form .country-code-select {
  line-height: 36px;
  height: 36px;
  width: 120px;
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
  border: 1px solid transparent;
  background-color: var(--color-fill-2);
}
.login-form .login-title {
  text-align: center;
  margin-bottom: 32px;
}
.login-form .login-form-content .phone-input-wrapper {
  display: flex;
  overflow: hidden;
  transition: all 0.2s ease;
  background: var(--color-fill-2);
  border: 1px solid transparent;
}
.login-form .login-form-content .phone-input-wrapper:focus-within {
  border-color: rgb(var(--primary-6));
  box-shadow: 0 0 0 2px var(--color-primary-2);
  background-color: #fff;
}
.login-form .login-form-content .phone-input-wrapper .country-code-select {
  z-index: 2;
  position: relative;
  width: 120px;
}
.login-form .login-form-content .phone-input-wrapper .country-code-select .arco-select-view {
  background: transparent;
  border: 0 solid transparent;
  box-shadow: none;
}
.login-form .login-form-content .phone-input-wrapper .country-code-select .arco-select-view:hover, .login-form .login-form-content .phone-input-wrapper .country-code-select .arco-select-view:focus {
  border: 0 solid transparent;
  box-shadow: none;
  background: transparent;
  outline: none;
}
.login-form .login-form-content .phone-input-wrapper .country-code-select .country-option {
  display: flex;
  align-items: center;
  gap: 6px;
}
.login-form .login-form-content .phone-input-wrapper .country-code-select .country-option .flag {
  font-size: 16px;
}
.login-form .login-form-content .phone-input-wrapper .country-code-select .country-option .code {
  font-weight: 500;
}
.login-form .login-form-content .phone-input-wrapper .phone-number-input.arco-input {
  flex: 1 1;
  z-index: 1;
  background: transparent;
  border: 0 solid transparent;
  box-shadow: none;
  transition: all 0.2s ease;
}
.login-form .login-form-content .phone-input-wrapper .phone-number-input.arco-input:hover, .login-form .login-form-content .phone-input-wrapper .phone-number-input.arco-input:focus {
  border: 0 solid transparent;
  box-shadow: none;
  background: transparent;
  outline: none;
}
.login-form .login-form-content .phone-input-wrapper .phone-number-input.arco-input.arco-input-status-success {
  border-right: 3px solid var(--color-success-6);
}
.login-form .login-form-content .phone-input-wrapper .phone-number-input.arco-input.arco-input-status-error {
  border-right: 3px solid var(--color-danger-6);
}
.login-form .login-form-content .code-input-wrapper .code-input {
  flex: 1 1;
}
.login-form .login-form-content .code-input-wrapper .send-code-btn {
  white-space: nowrap;
  min-width: 100px;
}
.login-form .login-form-content .login-btn {
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
}
.login-form .shake-animation {
  animation: shake 0.6s ease-in-out;
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

/*# sourceMappingURL=main.3d795372.css.map*/