/* ===========================
   登录页整体布局
=========================== */
.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 60px;
  overflow: hidden;
}

/* 背景图 */
.auth-page__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ===========================
   表单容器
=========================== */
.auth-wrap {
  width: 520px;
  max-width: 100%;
  position: relative;
  z-index: 2;
}

/* 面板控制显示/隐藏（你后续用 JS 切换） */
.auth-panel {
  display: none;
}

.auth-panel--active {
  display: block;
}

/* ===========================
   标题
=========================== */
.auth-header {
  margin-bottom: 24px;
}

.auth-title {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  color: #04445f;
  letter-spacing: 0.5px;
}

/* 小屏适配 */
@media (max-width: 768px) {
  .auth-page {
    padding-top: 8vh;
  }
  .auth-title {
    font-size: 30px;
  }
}

/* ===========================
   表单结构
=========================== */
.auth-form {
  width: 100%;
}

/* 每一项 */
.form-item {
  margin-bottom: 18px;
}

/* label */
.form-label {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #04445f;
  margin-bottom: 10px;
}

/* 输入框外壳 */
.form-control {
  width: 100%;
  height: 56px;
  border-radius: 999px;
  border: 1px solid #ebeaed;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  position: relative;
}

/* input */
.form-control input {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  font-size: 16px;
  color: #111;
  border-radius: 999px;
  border: none;
  outline: none;
  background: transparent;
}

.form-control input::placeholder {
  color: #a8a7af;
}

/* 带 icon 的输入框 */
.form-control--icon input {
  padding-right: 54px;
}

/* icon button */
.form-icon-btn {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  color: #8a8a8a;

  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-icon-btn .icon {
  width: 18px;
  height: 18px;
  display: block;
}

.form-icon-btn .icon-hide {
  display: none;
}

/* 当按钮处于显示密码状态（JS 会加上 is-visible） */
.form-icon-btn.is-visible .icon-show {
  display: none;
}

.form-icon-btn.is-visible .icon-hide {
  display: block;
}

/* ===========================
   验证码行
=========================== */
.form-inline {
  display: flex;
  align-items: center;
  gap: 14px;
}

.captcha-box {
  width: 140px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid #ebeaed;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  padding: 0;
}

.captcha-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===========================
   链接区域
=========================== */
.auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0 14px;
  font-size: 14px;
  color: #a8a7af;
}

.auth-links__left {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.auth-link {
  font-size: 14px;
  color: #1e0e62;
  text-decoration: underline;
  font-weight: 500;
}

/* ===========================
   主按钮
=========================== */
.auth-submit {
  width: 220px;
  height: 56px;
  border-radius: 999px;
  border: none;
  background: #456a76;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-submit:hover {
  opacity: 0.92;
}

/* ===========================
   次按钮（发送验证码）
=========================== */
.auth-outline-btn {
  width: 140px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid #456a76;
  background: #fff;
  color: #456a76;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.auth-outline-btn:hover {
  background: rgba(69, 106, 118, 0.06);
}


/* 按钮 loading */
.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 验证码按钮 loading */
.captcha-box.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* 倒计时 */
.is-countdown {
  opacity: 0.7;
  cursor: not-allowed;
}


/* ===========================
   小屏布局调整
=========================== */
@media (max-width: 480px) {
  .auth-wrap {
    width: 100%;
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .captcha-box,
  .auth-outline-btn {
    width: 100%;
  }

  .auth-submit {
    width: 100%;
  }
}