/* ========== 页面容器 ========== */
.userlogin {
  width: 100%;
  min-height: 100vh;
  background: #ffffff url('https://ndnd.duiduiedu.com/uploads/pics/phonenumber.png') no-repeat center 80px;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100rpx 60rpx 80rpx;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* ========== 顶部 Logo 和标题区域 ========== */
.login-header {
  position: relative;
  z-index: 1;
  text-align: center;
  animation: fadeInDown 0.8s ease-out;
}

.logo-container {
  width: 160rpx;
  height: 160rpx;
  margin: 0 auto 40rpx;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
  animation: scaleIn 0.6s ease-out;
}

.logo {
  width: 100rpx;
  height: 100rpx;
}

.app-title {
  font-size: 56rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
  letter-spacing: 4rpx;
  text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.8);
}

.app-subtitle {
  font-size: 28rpx;
  color: #666666;
  letter-spacing: 2rpx;
}

/* ========== 底部登录区域 ========== */
.login-bottom {
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.8s ease-out;
}

/* 登录按钮包装器 */
.login-btn-wrapper {
  margin-bottom: 40rpx;
}

.login-button {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(to right, #1ccfd6, #17b3b8);
  color: #ffffff;
  border: none;
  border-radius: 48rpx;
  box-shadow: 0 10rpx 30rpx rgba(28, 207, 214, 0.3);
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

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

/* 协议勾选区域 */
.agreement-check {
  display: flex;
  justify-content: center;
  align-items: center;
}

.agreement-text {
  font-size: 24rpx;
  color: #666666;
}

.agreement-link {
  font-size: 24rpx;
  color: #1ccfd6;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

/* 协议弹窗内容 */
.usercontian {
  height: 750rpx;
  overflow-y: scroll;
  padding: 30rpx 40rpx;
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
  word-break: break-all;
}

.usercontian text {
  display: block;
  text-align: justify;
}

/* 协议段落标题 */
.agreement-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1ccfd6;
  margin: 30rpx 0 20rpx;
  line-height: 1.5;
}

.agreement-item {
  margin: 20rpx 0;
  padding-left: 20rpx;
  line-height: 1.8;
}

/* ========== 动画效果 ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-60rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========== 响应式设计 ========== */
@media (max-height: 600px) {
  .userlogin {
    padding: 60rpx 60rpx 50rpx;
  }
  
  .logo-container {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
  }
  
  .logo {
    width: 80rpx;
    height: 80rpx;
  }
  
  .app-title {
    font-size: 48rpx;
  }
  
  .login-button {
    height: 88rpx;
    line-height: 88rpx;
  }
}