* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 背景：渐变轻奢时尚风 */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf5 100%);
  font-family: "Microsoft YaHei", sans-serif;
  position: relative;
}

/* 登录大卡片：调整为宽屏左右双栏 */
.login-box {
  width: 850px; /* 扩展整体宽度适配双栏布局 */
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  padding: 0; /* 移除原本的整体内边距，交给左右子区控制 */
}

/* 双栏弹性容器 */
.login-container {
  display: flex;
  width: 100%;
  min-height: 480px;
}

/* ================= 左侧蓝色视觉区域 ================= */
.login-left {
  flex: 1.1; /* 左侧占稍宽比例 */
  background: #2181e5; /* 选用主流柔和蓝渐变，匹配原按钮 */
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
}

/* 左侧标题 */
.left-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-align: center;
  margin-top: 10px;
}

/* 左侧插图盒子 */
.left-illustration {
  width: 80%;
  max-width: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-illustration img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 左侧系统四大特点网格 */
.left-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 30px;
  width: 80%;
  text-align: center;
}

.feature-item {
  font-size: 14px;
  opacity: 0.9;
  letter-spacing: 1px;
}

/* ================= 右侧表单区域 ================= */
.login-right {
  flex: 1; /* 右侧表单区域比例 */
  background: #ffffff;
  padding: 45px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 右侧大标题 */
.right-title {
  font-size: 22px;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

/* ================= 以下为您原本保留的表单样式 ================= */

/* 输入框间距 */
.el-form-item {
  margin-bottom: 20px !important;
}

/* 输入框样式 */
.el-input__wrapper {
  border-radius: 8px !important;
  box-shadow: none !important;
  border: 1px solid #e1e8ed !important;
  transition: all 0.3s;
}

.el-input__wrapper:hover {
  border-color: #409eff !important;
}

/* 按钮：保持原样 */
.full-width {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

/* 找回密码 */
.find-pwd {
  text-align: right;
  margin-bottom: 20px;
}

.find-pwd a {
  color: #409eff;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}

.find-pwd a:hover {
  color: #2979ff;
  text-decoration: underline;
  cursor: pointer;
}

/* 消除浏览器自动填充背景 */
input:-webkit-autofill,
.el-input__inner:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  background-color: #ffffff !important;
  -webkit-text-fill-color: #333 !important;
}

/* 底部版权固定到页面最底端 */
.copyright-footer {
  position: fixed;
  left: 0;
  bottom: 12px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.copyright-footer a {
  color: #999;
  text-decoration: none;
}

/* 登录框底部工具栏优化 */
.login-footer-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  margin-top: 12px !important;
  width: 100% !important;
  white-space: nowrap !important;
}

.login-footer-bar .bar-left,
.login-footer-bar .bar-right {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.login-footer-bar .tip-text {
  color: #909399;
}

.login-footer-bar .clickable-text {
  cursor: pointer !important;
}

.login-footer-bar .support-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* 安全验证弹窗样式 */
.captcha-dialog-wrap {
  padding: 10px 0;
}
.captcha-tip-text {
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
}
.captcha-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.captcha-img-box {
  width: 100px;
  height: 32px;
  background: #f4f4f5;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.captcha-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.captcha-empty-txt {
  font-size: 12px;
  color: #909399;
}

/* 客服弹窗样式 */
.support-dialog-body {
  text-align: center;
  padding: 15px 0 5px 0;
}
.support-dialog-title-txt {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}
.support-dialog-desc {
  font-size: 13px;
  color: #999;
  margin-bottom: 20px;
}
.support-qrcode-box {
  width: 180px;
  height: 180px;
  margin: 0 auto 15px auto;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.support-qrcode-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.support-service-time {
  color: #666;
  font-size: 13px;
}
.support-dialog-footer .el-button {
  width: 100px;
}