/* 页面容器（保证登录卡片垂直水平居中，贴合参考图页面布局） */
.login-page {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: #f8fafc;
}

/* 登录页整体卡片：精准还原参考图左右分栏布局（桌面端） */
.login-card {
  width: 100% !important;
  max-width: 950px !important; /* 精准匹配参考图卡片宽度 */
  display: flex;
  background-color: #fff !important;
  border-radius: 24px !important; /* 精准还原参考图圆角 */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important; /* 精准还原参考图阴影 */
  overflow: hidden; /* 保证子元素不超出圆角，贴合参考图视觉 */
}

/* 左侧表单区域：精准还原参考图布局、间距、样式 */
.login-form-section {
  width: 45%; /* 精准匹配参考图左右区域比例 */
  padding: 4rem 3rem; /* 精准还原参考图表单区域内边距 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 贴合参考图表单左对齐（除标题外） */
}

/* 保留你原有文字类名，样式精准还原参考图，不改动文字内容 */
.login-title {
  margin-bottom: 0.8rem; /* 贴合参考图标题与标语间距 */
  font-size: 2.4rem; /* 精准还原参考图标题字号 */
  font-weight: 700;
  color: #002EA6; /* 保留你原有文字颜色，不改动内容 */
  align-self: center;
}

/* 保留你原有标语类名，样式精准还原参考图，不改动文字内容 */
.login-slogan {
  margin-bottom: 3rem; /* 贴合参考图标语与表单间距 */
  font-size: 1rem; /* 精准还原参考图标语字号 */
  color: #86909c; /* 保留你原有文字颜色，不改动内容 */
  align-self: flex-start; /* 贴合参考图标语左对齐 */
}

/* 表单输入项：精准还原参考图标签+输入框布局、间距、样式 */
.form-item {
  width: 100%;
  margin-bottom: 1.8rem; /* 精准还原参考图表单项间距 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

/* 表单标签：精准还原参考图宽度、样式 */
.form-item label {
  width: 80px; /* 精准匹配参考图标签宽度，保证对齐 */
  font-size: 1.05rem; /* 精准还原参考图标签字号 */
  color: #333;
  font-weight: 500;
  margin-right: 0.5rem; /* 贴合参考图标签与输入框间距 */
}

/* 输入框样式：精准还原参考图，保留你原有.form-input类名 */
.form-item .form-input {
  flex: 1;
  height: 46px; /* 精准还原参考图输入框高度 */
  padding: 0 1.2rem; /* 精准还原参考图输入框内边距 */
  border: 1px solid #e2e8f0; /* 精准还原参考图输入框边框色 */
  border-radius: 10px; /* 精准还原参考图输入框圆角 */
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s;
}

/* 输入框聚焦样式：贴合参考图交互效果 */
.form-item .form-input:focus {
  border-color: #002EA6; /* 与标题颜色呼应，贴合参考图视觉 */
  box-shadow: 0 0 0 2px rgba(0, 46, 166, 0.1);
}

/* 登录按钮：精准还原参考图，保留你原有.btn-primary类名 */
.btn-primary {
  width: 100%;
  height: 50px; /* 精准还原参考图按钮高度 */
  font-size: 1.1rem !important; /* 精准还原参考图按钮字号 */
  font-weight: 600;
  border: none;
  border-radius: 10px !important; /* 精准还原参考图按钮圆角 */
  background-color: #002EA6; /* 贴合参考图按钮主色 */
  color: #fff;
  cursor: pointer;
  margin-top: 1.2rem; /* 贴合参考图按钮与最后一个表单项间距 */
  transition: background-color 0.3s;
}

/* 按钮hover效果：提升交互体验，贴合参考图视觉风格 */
.btn-primary:hover {
  background-color: #002288;
}

/* 右侧欢迎区域：精准还原参考图样式（背景、文字、布局） */
.login-welcome-section {
  width: 55%; /* 精准匹配参考图左右区域比例 */
  background: linear-gradient(135deg, #002EA6 0%, #4066D6 100%); /* 精准还原参考图渐变背景 */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  text-align: center;
  position: relative;
}

/* 右侧欢迎标题（贴合参考图，不影响你左侧原有文字内容） */
.welcome-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* 右侧欢迎描述（贴合参考图，不影响你左侧原有文字内容） */
.welcome-desc {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.9;
  max-width: 300px;
}

/* ---------------------- 手机端适配（保留样式一致性，优化布局） ---------------------- */
/* 断点设为 768px，小屏幕下保证样式不丢失，布局更合理 */
@media (max-width: 768px) {
  /* 手机端取消左右分栏，改为上下单列，保留卡片核心样式 */
  .login-card {
    max-width: 480px !important; /* 手机端最优宽度 */
    flex-direction: column; /* 纵向堆叠，避免横向挤压 */
  }

  /* 两个区域都占100%宽度，保留参考图视觉比例 */
  .login-form-section, .login-welcome-section {
    width: 100%;
  }

  /* 优化手机端表单区域内边距，避免过挤，保留核心样式 */
  .login-form-section {
    padding: 2.5rem 1.8rem;
  }

  /* 优化手机端欢迎区域，压缩高度，保留渐变背景和文字样式 */
  .login-welcome-section {
    padding: 2rem 1.5rem;
    min-height: 200px; /* 保证最低视觉效果，不丢失参考图风格 */
  }

  /* 微调手机端文字大小，适配小屏幕，不改动文字内容和颜色 */
  .login-title {
    font-size: 2rem;
  }

  .welcome-title {
    font-size: 1.8rem;
  }

  /* 手机端标签宽度微调，保证输入框足够点击区域 */
  .form-item label {
    width: 70px;
    font-size: 1rem;
  }
}