/* ══════════════════════════════════════════════════════
   登录弹窗  .login-pop(全站组件,固定首屏右上,不随页面滚动)
   触发:任意 href 以 #login 结尾的链接(导航「登录」),
        交互脚本在 index.html 底部 script 块
   背景手写半透明(用户指定零切图),玻璃底/描边与 .contact-pop 同参;
   手机图标 = 内联 SVG,勾选框 = 纯 CSS input
   设计稿 1920×1080:卡 392×464 圆角30,右 54 顶 150(导航正下方);
   内边距 上下50 左右41,输入条 311×48 圆角24,主色 #916EFF
   ══════════════════════════════════════════════════════ */

.login-pop {
  position: fixed;
  top: 150px;
  right: 54px;
  z-index: 1100; /* 压过导航(1000):用户主动唤起的层 */
  width: 392px;
  max-width: calc(100vw - 32px);
  padding: 50px 41px;
  background: rgba(32, 22, 70, 0.6);
  border: 1px solid rgba(197, 184, 237, 0.22);
  border-radius: 30px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  /* 关闭态:淡出下沉,动画结束后再隐藏 */
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.login-pop.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.login-pop__close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 32px;
  color: #C5B8ED;
  cursor: pointer;
}
.login-pop__close:hover { color: #FFFFFF; }

.login-pop__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  color: #FCEEFF;
}
.login-pop__sub {
  margin-top: 8px;
  font-size: 13px;
  line-height: 16px;
  color: #7C6EA1;
}

/* ── 输入条(手机号整条 / 验证码短条共用胶囊底)── */
.login-pop__field {
  display: flex;
  align-items: center;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.login-pop__field:focus-within {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(145, 110, 255, 0.6);
}
.login-pop__field--phone { margin-top: 49px; }
.login-pop__field--phone svg {
  flex-shrink: 0;
  margin-left: 16px;
}
.login-pop__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 16px 0 8px;
  background: none;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 16px;
  color: #FCEEFF;
}
.login-pop__input::placeholder { color: #C5B8ED; }
/* Chrome 回填记住的手机号会强刷浅底黑字(UA 的 :-webkit-autofill 样式,普通 background 盖不掉):
   底色裁进字形内使其不可见 + 文字色回填 + 背景色过渡无限延迟兜底,保住玻璃胶囊观感 */
.login-pop__input:-webkit-autofill,
.login-pop__input:-webkit-autofill:hover,
.login-pop__input:-webkit-autofill:focus {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #FCEEFF;
  caret-color: #FCEEFF;
  transition: background-color 9999999s ease-out;
}
.login-pop__field--code .login-pop__input { padding-left: 21px; }

/* ── 验证码行:短输入条 + 获取验证码按钮 ── */
.login-pop__code-row {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.login-pop__field--code { width: 180px; }
.login-pop__send {
  width: 120px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #916EFF;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.login-pop__send:hover { filter: brightness(1.1); }

/* ── 协议勾选行 ── */
.login-pop__agree {
  margin: 30px 0 0 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 16px;
  color: #7C6EA1;
  cursor: pointer;
}
/* 13px 汉字在 16px 行盒内基线偏下,flex 居中后文案仍比勾选框低 1~2px,相对定位光学回正 */
.login-pop__agree span {
  position: relative;
  top: 2px;
}
.login-pop__agree a {
  color: #916EFF;
  text-decoration: none;
}
.login-pop__agree a:hover { text-decoration: underline; }

/* 勾选框:纯 CSS,选中态紫底 + 边框描出的白钩 */
.login-pop__check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  position: relative;
  border: 1px solid #7C6EA1;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.login-pop__check:checked {
  background: #916EFF;
  border-color: #916EFF;
}
.login-pop__check:checked::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── 提示行:常驻占位(高度计入原 37px 间距,出提示不跳版)── */
.login-pop__msg {
  height: 16px;
  margin: 9px 0 0 7px;
  font-size: 12px;
  line-height: 16px;
  color: #FF6E87;
}
.login-pop__msg.ok { color: #C5B8ED; }

/* ── 登录按钮 ── */
.login-pop__submit {
  margin-top: 12px;
  width: 100%;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #916EFF;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.login-pop__submit:hover { filter: brightness(1.1); }

/* 请求中 / 倒计时中 */
.login-pop__send:disabled,
.login-pop__submit:disabled {
  opacity: 0.55;
  cursor: default;
  filter: none;
}

/* ── 图形验证步骤(点「获取验证码」→ 先过图形验证再发短信,同卡替换表单显示;
   输入条/紫按钮/提示行复用上方既有类,这里只写专属件)── */
.login-pop__captcha-tip {
  margin-top: 42px;
  font-size: 14px;
  line-height: 20px;
  color: #C5B8ED;
}
.login-pop__captcha-row {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.login-pop__field--captcha { flex: 1; min-width: 0; }
/* 图形码:原生 120×40,白托底垫图(码图多为白底,融进玻璃卡会发灰);点击刷新。
   img 默认 hidden,接口回图后才显示(空 src 会渲染破图),占位 span 顶加载/失败态 */
.login-pop__captcha-img {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 48px;
  padding: 4px 6px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: filter 0.2s ease;
}
.login-pop__captcha-img span {
  font-size: 12px;
  line-height: 16px;
  color: #7C6EA1;
}
.login-pop__captcha-img:hover { filter: brightness(0.95); }
.login-pop__captcha-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9px;
}
/* 显式 display:block 会压掉 UA 的 [hidden]{display:none}(features 面板同款坑),
   必须补写,否则解码完成前的破图态照样上屏 */
.login-pop__captcha-img img[hidden] { display: none; }
.login-pop__captcha-refresh {
  margin: 10px 7px 0 0;
  text-align: right;
}
.login-pop__captcha-refresh button {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  color: #916EFF;
  cursor: pointer;
}
.login-pop__captcha-refresh button:hover { text-decoration: underline; }
.login-pop__captcha-back {
  display: block;
  margin: 14px auto 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  line-height: 16px;
  color: #7C6EA1;
  cursor: pointer;
  transition: color 0.15s ease;
}
.login-pop__captcha-back:hover { color: #C5B8ED; }

/* ── 响应式 ── */
@media (max-width: 560px) {
  .login-pop {
    top: 90px;
    right: 16px;
    padding: 36px 24px;
    border-radius: 24px;
  }
  .login-pop__title { font-size: 22px; line-height: 28px; }
  .login-pop__field--phone { margin-top: 32px; }
  .login-pop__field--code { width: calc(100% - 132px); }
}