.login-container {
  min-height: 100vh;
  background-color: #4555FF;
  padding: 0 40rpx;
  position: relative;
}

.nav-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 120rpx;
}

.home-icon,
.more-icon {
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-icon image,
.more-icon image {
  width: 36rpx;
  height: 36rpx;
}

.title-area {
  margin-top: 120rpx;
  color: #fff;
}

.main-title {
  font-size: 72rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  letter-spacing: 4rpx;
}

.sub-title {
  font-size: 36rpx;
  opacity: 0.9;
}

.login-area {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 80rpx;
}

.agreement {
  color: #fff;
  font-size: 26rpx;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
}

.agreement checkbox-group {
  display: flex;
  align-items: center;
}

.agreement .link {
  color: #fff;
  text-decoration: underline;
  padding: 0 4rpx;
}

.login-btn {
  background: linear-gradient(90deg, #0BBFF5 0%, #4285FF 100%);
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 45rpx;
  height: 100rpx;
  line-height: 100rpx;
  box-shadow: 0 8rpx 20rpx rgba(66, 133, 255, 0.3);
}

.login-btn::after {
  border: none;
}

checkbox .wx-checkbox-input {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, 0.8);
  margin-right: 12rpx;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background-color: #fff;
  border-color: #fff;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: #4555FF;
  font-size: 24rpx;
}