/* 登录弹层：验证码 / 密码 / 忘记密码，可被任意页面引入 */

/* 全屏遮罩：半透明灰底，弹层从顶部偏下居中 */
.login-modal {
  --login-blue: #0082c4;
  --login-blue-deep: #006eab;
  --login-cyan: #57c3e8;
  --login-cyan-soft: #9ad8f0;
  --login-red: #e53935;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: 120px 20px 24px;
  background: rgba(70, 70, 70, 0.48);
  animation: login-fade 0.2s ease;
}

/* 遮罩淡入 */
@keyframes login-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 白色内容面板：固定最大宽度，带阴影上浮 */
.login-modal__panel {
  position: relative;
  width: min(372px, 100%);
  padding: 28px 28px 22px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  animation: login-pop 0.22s ease;
}

/* 面板弹出：轻微上移 + 淡入 */
@keyframes login-pop {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 右上角圆形关闭按钮 */
.login-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--login-red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

/* 关闭按钮内的 × 符号垂直微调 */
.login-modal__close span {
  font-size: 15px;
  font-weight: 700;
  margin-top: -1px;
}

/* 关闭按钮悬停略提亮 */
.login-modal__close:hover {
  filter: brightness(1.06);
}

/* 弹层标题：居中加粗 */
.login-modal__title {
  margin: 4px 0 22px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
}

/* 表单纵向排列字段与按钮 */
.login-modal__form {
  display: flex;
  flex-direction: column;
}

/* 单个表单项：标签在上、控件在下 */
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 相邻表单项之间的间距 */
.login-field + .login-field {
  margin-top: 14px;
}

/* 字段标签文字 */
.login-field__label {
  font-size: 13px;
  font-weight: 700;
  color: #222;
}

/* 必填星号 */
.login-field__req {
  color: var(--login-red);
  margin-right: 2px;
}

/* 输入控件容器：用于绝对定位眼睛图标 */
.login-field__control {
  position: relative;
}

/* 邮箱 / 密码 / 验证码输入框 */
.login-field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--login-cyan);
  border-radius: 4px;
  background: #fff;
  color: #222;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
}

/* 占位符浅灰 */
.login-field input::placeholder {
  color: #b9b9b9;
  font-weight: 400;
}

/* 聚焦时蓝色描边 + 光晕 */
.login-field input:focus {
  border-color: var(--login-blue);
  box-shadow: 0 0 0 3px rgba(0, 130, 196, 0.12);
}

/* 校验失败时红色边框 */
.login-field input.is-error {
  border-color: var(--login-red);
}

/* 密码可见性切换按钮，叠在输入框右侧 */
.login-field__eyes {
  position: absolute;
  top: 0;
  right: 6px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  color: #9bb3c2;
}

/* 眼睛图标悬停变蓝 */
.login-field__eyes:hover { color: var(--login-blue); }

/* 眼睛 SVG 尺寸 */
.login-field__eyes svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* 带眼睛按钮的密码框预留右侧内边距 */
.login-field input.has-eye {
  padding-right: 54px;
}

/* 「忘记密码」文字链 */
.login-modal__forgot {
  align-self: flex-start;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #7a9eb8;
}

/* 忘记密码悬停下划线 */
.login-modal__forgot:hover {
  color: var(--login-blue);
  text-decoration: underline;
}

/* 错误 / 成功提示共用字号 */
.login-modal__msg {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* 错误提示红色 */
.login-modal__msg--error { color: var(--login-red); }

/* 成功 / 提示绿色 */
.login-modal__msg--ok { color: #2e9b57; }

/* 主提交按钮：满宽蓝底 */
.login-modal__submit {
  margin-top: 16px;
  width: 100%;
  height: 42px;
  border: 1px solid var(--login-blue);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  background: var(--login-blue);
  color: #fff;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* 可点击时悬停加深蓝色 */
.login-modal__submit:hover:not(:disabled) {
  background: var(--login-blue-deep);
  border-color: var(--login-blue-deep);
}

/* 禁用态：白底浅描边，不可点 */
.login-modal__submit:disabled {
  background: #fff;
  color: var(--login-cyan-soft);
  border-color: var(--login-cyan-soft);
  cursor: default;
}

/* 重发验证码链接 */
.login-modal__resend {
  margin-top: 10px;
  align-self: flex-start;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--login-blue);
}

/* 倒计时中禁用重发 */
.login-modal__resend:disabled {
  color: #9aa8b3;
  cursor: default;
}

/* 可重发时悬停下划线 */
.login-modal__resend:hover:not(:disabled) {
  text-decoration: underline;
}

/* 切换登录方式（密码 / 验证码 / 返回） */
.login-modal__switch {
  margin-top: 22px;
  align-self: flex-start;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--login-blue);
  text-decoration: underline;
}

/* 切换链接悬停加深 */
.login-modal__switch:hover {
  color: var(--login-blue-deep);
}

/* 小屏：缩小遮罩内边距，面板铺满宽度 */
@media (max-width: 560px) {
  /* 弹层更靠近顶部，左右边距收紧 */
  .login-modal {
    padding: 72px 14px 20px;
    place-items: start center;
  }
  /* 面板改为全宽 */
  .login-modal__panel {
    width: 100%;
    padding: 26px 20px 18px;
  }
}