/**
 * auth.css
 * 认证页（登录 / 注册）共用样式
 * 基于 Layui 的主题/页面层样式，组件基础样式由 layui.css 提供
 *
 * 结构说明：
 *   1. 设计令牌（Design Tokens）
 *   2. 基础重置
 *   3. 独立大屏
 *   3.5 表单区（大屏下方）
 *   4. 卡片与头部
 *   5. 表单输入
 *   6. 登录方式选项卡（登录页）
 *   7. 主按钮与辅助链接
 *   8. 操作结果弹窗
 *   9. 注册页：字段提示与密码规则
 *  10. 找回密码：三步流程（步骤条 + 分步面板）
 *  11. 响应式适配
 */

/* ==========================================================================
   1. 设计令牌（Design Tokens）
   ========================================================================== */
:root {
  /* 主题色（与全站 common.css 科技蓝青体系一致: --blue #1684dd → --cyan #35c3e8） */
  --color-primary: #1684dd;
  --color-primary-dark: #0e6fb8;
  --color-primary-light: #35c3e8;
  --color-primary-lighter: #7fd4f0;
  --color-primary-shadow: rgba(22, 132, 221, 0.32);

  /* 文字色 */
  --color-title: #1f2d50;
  --color-text-secondary: #97a0b5;
  --color-icon: #b3bbcc;

  /* 边框与背景 */
  --color-border: #e6eaf2;
  --color-bg-input: #f7f9fc;
  --color-focus-ring: rgba(22, 132, 221, 0.12);
  --color-danger: #ff5722;
  --color-success: #22c55e;
  --color-success-bg: #eafaf1;

  /* 圆角 */
  --radius-card: 18px;
  --radius-input: 9px;
  --radius-button: 9px;

  /* 阴影 */
  --shadow-card: 0 24px 70px rgba(31, 45, 80, 0.22);
  --shadow-logo: 0 10px 22px rgba(22, 132, 221, 0.35);
  --shadow-button: 0 10px 20px rgba(22, 132, 221, 0.32);
  --shadow-button-hover: 0 14px 26px rgba(22, 132, 221, 0.38);

  /* 动效 */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}

/* ==========================================================================
   2. 基础重置
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: #fff;
}

/* ==========================================================================
   3. 表单区（公共大屏下方，白底）
   ========================================================================== */

/* 吸顶后白导航压在白底表单区上, 加强分隔（覆盖 common.css 较弱的阴影） */
body.scrolled #app-header {
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(31, 45, 80, 0.08);
}

.login-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 16px 110px;
  background: #fff;
}

.login-footer {
  margin-top: 26px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-align: center;
}

/* ==========================================================================
   4. 卡片与头部
   ========================================================================== */
.login-card {
  width: 100%;
  max-width: 424px;
  padding: 38px 40px 30px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  animation: cardIn 0.5s ease both;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-head {
  margin-bottom: 22px;
  text-align: center;
}

.login-head .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  box-shadow: var(--shadow-logo);
}

.login-head .logo .layui-icon {
  font-size: 30px;
  color: #fff;
}

.login-head h1 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-title);
}

.login-head p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   5. 表单输入
   ========================================================================== */

/* 6.1 输入框容器与左侧图标
   注意: quote.css(询价页,全站加载)也定义了 .input-wrap{display:inline-flex;width:200px},
   会在此处同名冲突, 必须显式恢复整行宽度。 */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-wrap > .layui-icon:not(.input-status) {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 2;
  font-size: 18px;
  color: var(--color-icon);
  transform: translateY(-50%);
}

.input-wrap .layui-input {
  height: 44px;
  line-height: 44px;
  padding-left: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-bg-input);
  transition: all var(--transition-base);
}

.input-wrap .layui-input:focus,
.input-wrap .layui-input.layui-unfocus:focus {
  border-color: var(--color-primary) !important;
  background: #fff;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: none;
}

.input-wrap input::placeholder {
  color: var(--color-icon);
}

/* 校验失败时输入框标红（layui 内置危险态类名，手动切换） */
.input-wrap .layui-input.layui-form-danger,
.input-wrap .layui-input.layui-form-danger:focus {
  border-color: var(--color-danger) !important;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.12);
}

/* 6.2 密码可见性切换 */
.pwd-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.pwd-toggle svg {
  width: 19px;
  height: 19px;
  fill: var(--color-icon);
}

.pwd-toggle:hover svg {
  fill: var(--color-primary);
}

/* 密码可见性两态切换：
   默认（密码隐藏）显示睁眼图标；点击显示明文后按钮加 .is-visible，切换为闭眼图标 */
.pwd-toggle .icon-eye-off {
  display: none;
}

.pwd-toggle.is-visible .icon-eye {
  display: none;
}

.pwd-toggle.is-visible .icon-eye-off {
  display: block;
}

/* 6.3 邮箱验证码输入与发送按钮 */
.code-wrap .layui-input {
  padding-right: 118px;
}

.send-code-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
  border: none;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transform: translateY(-50%);
}

.send-code-btn:hover {
  color: var(--color-primary-dark);
}

.send-code-btn:disabled {
  color: #aeb6c6;
  border-left-color: #eef1f6;
  cursor: not-allowed;
}

/* 6.3b 图形验证码（PbootCMS 登录验证码图片）：输入框 + 图片并排 */
.captcha-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-wrap .layui-input {
  flex: 1;
  padding-right: 12px;
}

.captcha-img {
  position: static;
  flex-shrink: 0;
  height: 44px;
  border-radius: var(--radius-input);
  cursor: pointer;
  transform: none;
}

/* 6.3b 输入框状态图标（勾/叉） */
.input-status {
  position: absolute;
  top: 50%;
  left: auto;
  right: 12px;
  z-index: 3;
  font-size: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.input-status.is-ok { opacity: 1; color: #22c55e; }
.input-status.is-err { opacity: 1; color: #ff5722; }

/* 有状态图标时输入框右侧留出空间 */
.input-wrap:has(.input-status) .layui-input { padding-right: 36px; }

/* 正确：边框+图标绿色 */
.input-wrap:has(.input-status.is-ok) .layui-input {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

/* 错误：边框+图标红色 */
.input-wrap:has(.input-status.is-err) .layui-input {
  border-color: #ff5722 !important;
  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.12);
}

/* 6.5 注册已关闭提示 */
.register-closed {
  text-align: center;
  padding: 32px 24px 28px;
}

.register-closed .closed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffe8e0;
  margin-bottom: 16px;
}

.register-closed .closed-icon .layui-icon {
  font-size: 40px;
  color: #ff5722;
}

.register-closed h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-title);
}

.register-closed p {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--color-desc);
  line-height: 1.6;
}

.register-closed .closed-email {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-desc);
}

.register-closed .closed-email a {
  color: var(--color-primary);
  text-decoration: none;
}

.register-closed .closed-email a:hover {
  text-decoration: underline;
}

/* 登录页：注册关闭提示（替代"立即注册"链接） */
.register-closed-tip {
  font-size: 13px;
  color: var(--color-desc);
  line-height: 1.7;
  text-align: center;
}

.register-closed-tip .layui-icon {
  font-size: 14px;
  color: var(--color-primary);
  margin-right: 4px;
  vertical-align: middle;
}

.register-closed-tip a {
  color: var(--color-primary);
  text-decoration: none;
}

.register-closed-tip a:hover {
  text-decoration: underline;
}

/* 6.4 选项行（记住我 / 忘记密码） */
.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 18px;
  font-size: 13px;
}

.form-options a {
  color: var(--color-primary);
  text-decoration: none;
}

.form-options a:hover {
  text-decoration: underline;
}

.layui-form-checkbox[lay-skin="primary"] i {
  border-radius: 4px;
}

/* ==========================================================================
   6. 登录方式选项卡（登录页）
   ========================================================================== */
.login-tab {
  margin: 6px 0 18px;
}

.login-tab .layui-tab-title {
  height: 40px;
}

.login-tab .layui-tab-title li {
  width: 50%;
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  transition: color var(--transition-base);
}

.login-tab .layui-tab-title li.layui-this {
  font-weight: 600;
  color: var(--color-primary);
}

.login-tab .layui-tab-title .layui-bar {
  height: 3px;
  border-radius: 3px;
  background-color: var(--color-primary);
}

.login-tab .layui-tab-content {
  padding: 0;
}

.login-tab .layui-tab-item {
  margin-top: 16px;
}

/* ==========================================================================
   7. 主按钮与辅助链接（登录 / 注册共用）
   ========================================================================== */
.btn-login {
  width: 100%;
  height: 46px;
  line-height: 46px;
  font-size: 15px;
  letter-spacing: 2px;
  border: none;
  border-radius: var(--radius-button);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  box-shadow: var(--shadow-button);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-login:hover {
  opacity: 0.95;
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}

.btn-login:active {
  transform: translateY(0);
}

.register-tip {
  margin-top: 18px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}

.register-tip a {
  color: var(--color-primary);
  text-decoration: none;
}

.register-tip a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   8. 操作结果弹窗（登录 / 注册共用）
   ========================================================================== */
.success-box {
  padding: 34px 24px 26px;
  text-align: center;
}

.success-box .ok-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--color-success-bg);
}

.success-box .ok-icon svg {
  width: 34px;
  height: 34px;
}

.success-box h2 {
  margin: 0 0 8px;
  font-size: 19px;
  color: var(--color-title);
}

.success-box p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.success-box .enter-btn {
  height: 40px;
  line-height: 40px;
  margin-top: 22px;
  font-size: 14px;
  color: #fff;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

/* ==========================================================================
   9. 注册页：字段提示与密码规则
   ========================================================================== */

/* 注册表单字段较多，适当拉开间距 */
.register-form .layui-form-item {
  margin-bottom: 16px;
}

/* 输入框下方的格式说明 / 校验提示 */
.form-hint {
  margin: 6px 0 0 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.form-hint.is-error {
  color: var(--color-danger);
}

/* 密码规则实时清单 */
.pwd-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 0 2px;
}

.pwd-rules .rule-item {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--color-icon);
  transition: color var(--transition-base);
}

.pwd-rules .rule-item::before {
  margin-right: 5px;
  font-size: 10px;
  content: "\25CB"; /* ○ 未满足 */
}

.pwd-rules .rule-item.is-ok {
  color: var(--color-success);
}

.pwd-rules .rule-item.is-ok::before {
  content: "\2713"; /* ✓ 已满足 */
}

/* 建议项视觉弱化（不阻止提交，达成时仍变绿） */
.pwd-rules .rule-optional {
  font-style: italic;
}

/* 密码强度条：data-level 0 隐藏 / 1 弱 / 2 中 / 3 强 / 4 极强 */
.pwd-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 2px 0;
}

.pwd-strength[data-level="0"] {
  visibility: hidden; /* 无输入时保留占位，避免布局跳动 */
}

.pwd-strength .strength-bar {
  flex: 1;
  display: flex;
  gap: 5px;
}

.pwd-strength .strength-bar span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--color-border);
  transition: background var(--transition-base);
}

.pwd-strength .strength-text {
  flex: 0 0 32px;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  color: var(--color-icon);
}

/* 弱：红色，点亮 1 段 */
.pwd-strength[data-level="1"] .strength-bar span:nth-child(-n+1) {
  background: #f56c6c;
}

.pwd-strength[data-level="1"] .strength-text {
  color: #f56c6c;
}

/* 中：橙色，点亮 2 段 */
.pwd-strength[data-level="2"] .strength-bar span:nth-child(-n+2) {
  background: #faad14;
}

.pwd-strength[data-level="2"] .strength-text {
  color: #faad14;
}

/* 强：主题蓝，点亮 3 段 */
.pwd-strength[data-level="3"] .strength-bar span:nth-child(-n+3) {
  background: var(--color-primary);
}

.pwd-strength[data-level="3"] .strength-text {
  color: var(--color-primary);
}

/* 极强：绿色，点亮 4 段 */
.pwd-strength[data-level="4"] .strength-bar span:nth-child(-n+4) {
  background: var(--color-success);
}

.pwd-strength[data-level="4"] .strength-text {
  color: var(--color-success);
}

/* ==========================================================================
   9.5 顶部通知（layui layer.msg 皮肤：贴顶留白 + 圆角柔化，保持原生白底风格）
   ========================================================================== */
.layui-layer.auth-top-msg {
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(31, 45, 80, 0.14);
  /* 槽位重排时（新消息加入/旧消息消失）平滑滑动 */
  transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  /* 入场：从槽位正上方固定距离处下滑就位（与 top 过渡同曲线/同时长，保证队列锁步） */
  animation: authNoticeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* 出场：槽位移位交由与其余条目相同的 top 过渡完成（锁步上移，节奏一致不跳动），
   这里只做同步淡出；不可点击 */
.layui-layer.auth-top-msg.is-leaving {
  pointer-events: none;
  animation: authNoticeFadeOut 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes authNoticeFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 入场挂载瞬间：屏蔽 top 过渡，防止 layer 默认定位→目标槽位的修正与入场动画叠加跳动 */
.layui-layer.auth-top-msg.is-entering {
  transition: none;
}

/* 满队替换时其余条目瞬时补位：位置变化无动画 */
.layui-layer.auth-top-msg.no-anim {
  transition: none;
}

/* 入场位移：固定 72px，与 JS 中 NOTICE_SLOT_GAP 槽间距保持一致（起始点对齐上一格） */
@keyframes authNoticeIn {
  from {
    transform: translateY(-72px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==========================================================================
   10. 找回密码：三步流程（步骤条 + 分步面板）
   ========================================================================== */

/* 11.1 步骤条：已完成=绿、当前=主题蓝、未到达=灰 */
.steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 26px;
}

.step {
  flex: 0 0 auto;
}

.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  border-radius: 50%;
  background: #d6dbe6;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.step-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--transition-base);
}

.step-line {
  flex: 1;
  height: 2px;
  margin: 16px 10px 0;
  border-radius: 2px;
  background: var(--color-border);
  transition: background var(--transition-base);
}

.step.active .step-dot {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  box-shadow: 0 6px 14px var(--color-primary-shadow);
}

.step.active .step-label {
  font-weight: 600;
  color: var(--color-primary);
}

.step.done .step-dot {
  background: var(--color-success);
}

.step.done .step-label {
  color: var(--color-success);
}

.step-line.done {
  background: var(--color-success);
}

/* 11.2 分步面板：仅当前步骤显示，带淡入 */
.step-pane {
  display: none;
}

.step-pane.active {
  display: block;
  animation: paneIn 0.3s ease both;
}

@keyframes paneIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 11.3 已验证邮箱信息条 */
.verified-email {
  margin-bottom: 16px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--color-primary);
  word-break: break-all;
  border-radius: 8px;
  background: rgba(22, 132, 221, 0.08);
}

/* 11.4 双按钮行（上一步 / 确认重置） */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.form-actions .btn-login,
.btn-secondary {
  flex: 1;
  width: auto;
  height: 46px;
  line-height: 44px;
  font-size: 15px;
  letter-spacing: 1px;
  border-radius: var(--radius-button);
  cursor: pointer;
}

.btn-secondary {
  border: 1px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  transition: background var(--transition-fast);
}

.btn-secondary:hover {
  background: rgba(22, 132, 221, 0.08);
}

/* 完成步骤的按钮宽度与卡片对齐 */
.step-pane .enter-btn {
  width: 100%;
  height: 46px;
  line-height: 46px;
  margin-top: 22px;
  font-size: 15px;
  letter-spacing: 1px;
  border-radius: var(--radius-button);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
}

/* ==========================================================================
   11. 响应式适配
   ========================================================================== */
@media screen and (max-width: 480px) {
  .login-card {
    padding: 30px 22px 24px;
    border-radius: 14px;
  }

  .login-head h1 {
    font-size: 20px;
  }

  /* 小屏下密码规则每行两条，避免过度拥挤 */
  .pwd-rules .rule-item {
    flex: 0 0 calc(50% - 7px);
  }
}