/* =========================================================
   AUTH MODAL - FINAL (只作用于 #authModal)
   复制到 main.css 最底部
   ========================================================= */

/* =========================
   遮罩层样式
   ========================= */
/* 模态框遮罩层基础样式 */
#authModal.modal-overlay {
  position: fixed;
  inset: 0;
  /* 等同于 top: 0; right: 0; bottom: 0; left: 0; */
  background: rgba(0, 0, 0, .35);
  /* 半透明黑色背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* 默认隐藏 */
  visibility: hidden;
  /* 默认不可见 */
  transition: .18s ease;
  /* 平滑过渡效果 */
  z-index: 9999;
  /* 确保在其他元素之上 */
}

/* 遮罩层激活状态 */
#authModal.modal-overlay.active {
  opacity: 1;
  /* 显示 */
  visibility: visible;
  /* 可见 */
}

/* =========================
   弹窗容器样式
   ========================= */
/* 弹窗卡片本体 */
#authModal .auth-panel {
  width: 340px;
  /* 固定宽度 */
  max-width: calc(100vw - 28px);
  /* 响应式最大宽度，确保在小屏幕上有边距 */
  background: #fff;
  /* 白色背景 */
  border-radius: 12px;
  /* 圆角边框 */
  box-shadow: 0 16px 50px rgba(0, 0, 0, .22);
  /* 阴影效果 */
  padding: 18px 18px 14px;
  /* 内边距 */
  position: relative;
  /* 相对定位，用于子元素绝对定位 */
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 字体设置 */
}

/* 右上角关闭按钮 */
#authModal .auth-x {
  position: absolute;
  /* 绝对定位 */
  right: 12px;
  top: 10px;
  border: 0;
  /* 无边框 */
  background: transparent;
  /* 透明背景 */
  font-size: 18px;
  line-height: 1;
  color: #666;
  /* 灰色 */
  cursor: pointer;
  /* 指针样式 */
}

/* =========================
   视图切换样式
   ========================= */
/* 认证视图（登录/注册/重置密码）基础样式 */
#authModal .auth-view {
  display: none;
  /* 默认隐藏 */
}

/* 激活的认证视图 */
#authModal .auth-view.is-active {
  display: block;
  /* 显示当前视图 */
}

/* =========================
   标题和标签页样式
   ========================= */
/* 视图标题 */
#authModal .auth-h2 {
  text-align: center;
  /* 居中对齐 */
  font-size: 18px;
  font-weight: 700;
  /* 粗体 */
  color: #111;
  /* 深灰色文字 */
  margin: 2px 0 12px;
  /* 外边距 */
}

/* 标签页容器（密码登录 / 短信登录） */
#authModal .auth-tabs {
  display: flex;
  justify-content: space-between;
  margin: 0 18px 14px;
  /* 左右边距18px，底部边距14px */
}

/* 单个标签页 */
#authModal .auth-tab {
  flex: 1;
  /* 平均分配宽度 */
  border: 0;
  /* 无边框 */
  background: transparent;
  /* 透明背景 */
  padding: 8px 0;
  /* 上下内边距 */
  font-size: 13px;
  color: #111;
  /* 深灰色文字 */
  cursor: pointer;
  /* 指针样式 */
  position: relative;
  /* 相对定位，用于底部指示器 */
}

/* 激活的标签页 */
#authModal .auth-tab.is-active {
  color: var(--brand-auro);
  /* 使用品牌主色 */
  font-weight: 700;
  /* 粗体 */
}

/* 激活标签页的底部指示器 */
#authModal .auth-tab.is-active::after {
  content: "";
  /* 伪元素 */
  position: absolute;
  /* 绝对定位 */
  left: 38%;
  /* 左右边距38%，居中显示 */
  right: 38%;
  bottom: -2px;
  /* 位于标签页底部下方2px */
  height: 2px;
  /* 高度2px */
  background: var(--brand-auro);
  /* 使用品牌主色 */
  border-radius: 999px;
  /* 圆形边框 */
}

/* =========================
   表单元素样式
   ========================= */
/* 表单容器 */
#authModal .auth-form {
  margin-top: 6px;
  /* 顶部外边距 */
}

/* 输入框行容器 */
#authModal .auth-field {
  height: 44px;
  /* 固定高度 */
  border: 1px solid #e4e4e4;
  /* 浅灰色边框 */
  border-radius: 8px;
  /* 圆角边框 */
  background: #fff;
  /* 白色背景 */
  display: flex;
  /* 弹性布局 */
  align-items: center;
  /* 垂直居中 */
  gap: 10px;
  /* 子元素间距 */
  padding: 0 12px;
  /* 左右内边距 */
  margin-bottom: 12px;
  /* 底部外边距 */
}

/* 输入框左侧图标容器 */
#authModal .auth-ico {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .65;
  /* 半透明 */
  font-size: 14px;
}

/* 输入框本体 */
#authModal .auth-input {
  flex: 1;
  /* 占据剩余空间 */
  border: 0 !important;
  /* 覆盖默认边框（重要） */
  outline: none !important;
  /* 移除默认轮廓（重要） */
  font-size: 13px;
  color: #111;
  /* 深灰色文字 */
  background: transparent;
  /* 透明背景 */
}

/* 输入框占位符样式 */
#authModal .auth-input::placeholder {
  color: #b7b7b7;
  /* 浅灰色占位符文字 */
}

/* 获取验证码按钮（右侧蓝字） */
#authModal .auth-codebtn {
  border: 0;
  /* 无边框 */
  background: transparent;
  /* 透明背景 */
  color: var(--brand-auro);
  /* 使用品牌主色 */
  font-size: 12px;
  cursor: pointer;
  /* 指针样式 */
  padding: 0 2px;
  /* 左右内边距 */
  white-space: nowrap;
  /* 防止换行 */
}

/* 密码可见性切换按钮（小眼睛） */
#authModal .auth-eye {
  border: 0;
  /* 无边框 */
  background: transparent;
  /* 透明背景 */
  cursor: pointer;
  /* 指针样式 */
  opacity: .75;
  /* 半透明 */
  padding: 0 2px;
  /* 左右内边距 */
}

/* =========================
   按钮样式
   ========================= */
/* 主按钮（登录/注册/重置密码） */
#authModal .auth-btn {
  width: 100%;
  /* 宽度100% */
  height: 44px;
  /* 固定高度 */
  border: 0;
  /* 无边框 */
  border-radius: 8px;
  /* 圆角边框 */
  background: var(--brand-auro);
  /* 使用品牌主色 */
  color: #000000;
  /* 黑色文字 */
  font-size: 15px;
  font-weight: 700;
  /* 粗体 */
  cursor: pointer;
  /* 指针样式 */
  margin-top: 2px;
  /* 顶部外边距 */
}

/* 主按钮悬停效果 */
#authModal .auth-btn:hover {
  opacity: .96;
  /* 略微降低透明度 */
}

/* 主按钮点击效果 */
#authModal .auth-btn:active {
  transform: translateY(1px);
  /* 向下移动1px，模拟按下效果 */
}

/* =========================
   链接和提示文本样式
   ========================= */
/* 链接容器（立即注册 | 忘记密码） */
#authModal .auth-links {
  display: flex;
  justify-content: center;
  /* 居中对齐 */
  align-items: center;
  gap: 14px;
  /* 子元素间距 */
  margin: 10px 0 6px;
  /* 上下外边距 */
  font-size: 12px;
}

/* 链接样式 */
#authModal .auth-links a {
  color: var(--brand-auro);
  /* 使用品牌主色 */
  text-decoration: none;
  /* 无下划线 */
}

/* 链接分隔符 */
#authModal .auth-links .sep {
  width: 1px;
  height: 10px;
  /* 高度10px，与文字居中对齐 */
  background: #ddd;
  /* 浅灰色 */
}

/* 底部提示文本 */
#authModal .auth-tip {
  text-align: center;
  /* 居中对齐 */
  font-size: 12px;
  color: #666;
  /* 灰色文字 */
  line-height: 1.35;
  /* 行高 */
  margin-top: 6px;
  /* 顶部外边距 */
}

/* 底部提示文本中的链接 */
#authModal .auth-tip a {
  color: var(--brand-auro);
  /* 使用品牌主色 */
  text-decoration: none;
  /* 无下划线 */
}

/* 粉色“咨询企业版”链接 */
#authModal .auth-tip-strong a {
  color: #ff3fa3;
  /* 粉色文字 */
  font-weight: 700;
  /* 粗体 */
}

/* 注册/重置页底部链接 */
#authModal .auth-bottom {
  text-align: center;
  /* 居中对齐 */
  margin: 10px 0 6px;
  /* 上下外边距 */
  font-size: 12px;
  color: #666;
  /* 灰色文字 */
}

/* 注册/重置页底部链接样式 */
#authModal .auth-bottom a {
  color: var(--brand-auro);
  /* 使用品牌主色 */
  text-decoration: none;
  /* 无下划线 */
}

/* =========================
   面板切换样式
   ========================= */
/* 密码/短信登录面板基础样式 */
#authModal .auth-pane {
  display: none;
  /* 默认隐藏 */
}

/* 激活的面板 */
#authModal .auth-pane.is-active {
  display: block;
  /* 显示当前面板 */
}