/* ══════════════════════════════════════════════════════════════════════
   heima 模板 · 登录 / 注册 / 找回密码 公共样式
   ----------------------------------------------------------------------
   视觉口径跟用户中心、后台保持一致：极光浅底 + 玻璃卡 + 发丝边，
   主色 #007aff（文字链接用更深的 #0050c8，白底才够对比度）。
   命名空间 .hm-auth-*，不与站内其它样式冲突。

   ⚠ 卡片本身挂了 backdrop-filter，里面任何元素都**不能再挂** backdrop-filter：
     父级已经建了包含块 + 层叠上下文，子级再挂会被扁平化成一整块纯白。
     所以输入框只用半透明白 + 发丝边，不要 blur。
   ══════════════════════════════════════════════════════════════════════ */

.hm-auth,
.hm-auth * {
  box-sizing: border-box;
}

.hm-auth {
  --hm-primary: #007aff;
  --hm-primary-2: #409cff;
  --hm-deep: #0060df;
  --hm-link: #0050c8;                  /* 白底链接文字 7.0:1 */
  --hm-teal: #5ccdde;
  --hm-ink: #1c2530;
  --hm-ink-2: #55617a;                 /* 白底 6.9:1 */
  --hm-ink-3: #7b8699;                 /* 图标 / 次要文字，浅底 3.2:1 */
  --hm-hair: rgba(120, 140, 170, .20);
  --hm-hair-2: rgba(120, 140, 170, .12);
  --hm-field: rgba(255, 255, 255, .74);
  --hm-radius: 22px;
  --hm-field-h: 48px;

  min-height: 100vh;
  margin: 0;
  padding: 44px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  background: #eef1fb;
  font: 15px/1.5 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--hm-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── 极光底（取色同首页，别改成纯渐变：玻璃后面没有色块就看不出来） ── */
.hm-auth-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(72% 34% at 6% 4%, #a9dcff 0%, rgba(169, 220, 255, 0) 68%),
    radial-gradient(56% 28% at 82% 6%, #d9d5f5 0%, rgba(217, 213, 245, 0) 70%),
    radial-gradient(70% 32% at 92% 86%, #a7e5ea 0%, rgba(167, 229, 234, 0) 72%),
    radial-gradient(60% 28% at 14% 94%, #cfe6f7 0%, rgba(207, 230, 247, 0) 72%),
    linear-gradient(180deg, #f2f5ff 0%, #eaeffb 46%, #e6f4f6 100%);
}

/* ── 两栏外壳 ────────────────────────────────────────────────────── */
.hm-auth-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 26px;
  align-items: stretch;
}

/* ── 左：品牌面板 ───────────────────────────────────────────────── */
.hm-auth-brand {
  display: flex;
  flex-direction: column;
  /* 找回密码那页卡片高，品牌面板会被撑高：内容整体居中，别让底部留一个大空洞 */
  justify-content: center;
  padding: 40px 34px 30px;
  border-radius: var(--hm-radius);
  background: linear-gradient(158deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .44) 100%);
  border: 1px solid rgba(255, 255, 255, .70);
  box-shadow:
    0 1px 2px rgba(24, 42, 84, .05),
    0 20px 44px -24px rgba(31, 55, 96, .38);
  -webkit-backdrop-filter: blur(18px) saturate(1.10);
  backdrop-filter: blur(18px) saturate(1.10);
}

.hm-auth-logo {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(140deg, #0a84ff 0%, #0060df 100%);
  box-shadow:
    0 12px 24px -12px rgba(0, 96, 223, .85),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}

.hm-auth-logo svg {
  width: 27px;
  height: 27px;
}

.hm-auth-brand-name {
  margin: 20px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--hm-ink);
}

.hm-auth-brand-tag {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--hm-ink-2);
}

.hm-auth-feats {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 15px;
}

.hm-auth-feats li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hm-ink-2);
}

.hm-auth-feats strong {
  color: var(--hm-ink);
  font-weight: 600;
}

.hm-feat-ico {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hm-deep);
  background: rgba(0, 122, 255, .10);
  border: 1px solid rgba(0, 122, 255, .14);
}

.hm-feat-ico svg {
  width: 15px;
  height: 15px;
}

.hm-auth-brand-foot {
  margin: 26px 0 0;
  font-size: 12px;
  color: var(--hm-ink-3);
}

/* ── 右：表单卡 ─────────────────────────────────────────────────── */
.hm-auth-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--hm-radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 100%);
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow:
    0 1px 2px rgba(24, 42, 84, .05),
    0 18px 44px -20px rgba(31, 55, 96, .40),
    0 40px 80px -44px rgba(31, 55, 96, .30);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

/* 顶部品牌色细线：三段渐变，跟首页的青色条呼应 */
.hm-auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--hm-teal) 0%, var(--hm-primary) 48%, #7c5cff 100%);
}

.hm-auth-body {
  padding: 34px 32px 28px;
}

/* ── 卡片头部 ───────────────────────────────────────────────────── */
.hm-auth-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hm-auth-mark {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(140deg, #0a84ff 0%, #0060df 100%);
  box-shadow:
    0 10px 20px -11px rgba(0, 96, 223, .85),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

.hm-auth-mark svg {
  width: 20px;
  height: 20px;
}

.hm-auth-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.hm-auth-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.35;
  color: var(--hm-ink);
}

.hm-auth-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hm-ink-2);
}

.hm-auth-home {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--hm-hair);
  background: rgba(255, 255, 255, .66);
  color: var(--hm-ink-2);
  font-size: 12px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.hm-auth-home:hover,
.hm-auth-home:focus-visible {
  color: var(--hm-link);
  border-color: rgba(0, 122, 255, .38);
  background: rgba(0, 122, 255, .08);
  text-decoration: none;
}

/* ── 输入框 ─────────────────────────────────────────────────────── */
.hm-auth-form {
  margin: 24px 0 0;
}

.hm-field {
  display: flex;
  align-items: center;
  height: var(--hm-field-h);
  margin-bottom: 12px;
  padding: 0 4px 0 0;
  background: var(--hm-field);
  border: 1px solid var(--hm-hair);
  border-radius: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: text;
}

.hm-field:hover {
  border-color: rgba(0, 122, 255, .28);
}

.hm-field:focus-within {
  background: #ffffff;
  border-color: rgba(0, 122, 255, .55);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .12);
}

.hm-field-ico {
  flex: none;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hm-ink-3);
  transition: color .18s ease;
}

.hm-field:focus-within .hm-field-ico {
  color: var(--hm-deep);
}

.hm-field-ico svg {
  width: 17px;
  height: 17px;
}

.hm-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--hm-ink);
  padding: 0;
}

/* 占位符要能看清：太浅（#98a3b6）在浅底上不到 3:1，一行提示等于白放 */
.hm-input::placeholder {
  color: #6b7789;
}

/* 密码显示切换 */
.hm-eye {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--hm-ink-3);
  cursor: pointer;
  padding: 0;
  transition: color .18s ease, background .18s ease;
}

.hm-eye:hover {
  color: var(--hm-deep);
  background: rgba(0, 122, 255, .08);
}

.hm-eye svg {
  width: 17px;
  height: 17px;
}

/* 密码显示按钮的开启态 */
.hm-eye.is-on {
  color: var(--hm-deep);
}

/* 图形验证码 */
.hm-field--code {
  padding-right: 5px;
}

.hm-codeimg {
  flex: none;
  width: 104px;
  height: 38px;
  margin-left: 6px;
  border-radius: 10px;
  border: 1px solid var(--hm-hair);
  background: #fff;
  cursor: pointer;
  object-fit: contain;      /* code.php 出图约 3.2:1，contain 才不会切掉字符 */
  padding: 2px;
}

/* 短信验证码 */
.hm-sms {
  padding-right: 5px;
}

.hm-send {
  flex: none;
  height: 36px;
  padding: 0 13px;
  margin-left: 6px;
  border: 1px solid rgba(0, 122, 255, .26);
  border-radius: 10px;
  background: rgba(0, 122, 255, .09);
  color: var(--hm-link);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}

.hm-send:hover:not(:disabled) {
  background: rgba(0, 122, 255, .16);
  border-color: rgba(0, 122, 255, .44);
}

.hm-send:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* 极限验证容器 */
.hm-captcha {
  margin-bottom: 12px;
}

.hm-captcha-loading {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--hm-hair);
  border-radius: 14px;
  color: var(--hm-ink-3);
  font-size: 13px;
}

/* ── 主按钮 ─────────────────────────────────────────────────────── */
.hm-submit {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a84ff 0%, #0060df 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
  box-shadow: 0 12px 26px -12px rgba(0, 96, 223, .85);
}

.hm-submit:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 30px -12px rgba(0, 96, 223, .92);
}

.hm-submit:active {
  transform: translateY(1px);
}

.hm-submit:disabled {
  opacity: .62;
  cursor: not-allowed;
  box-shadow: none;
}

.hm-submit:focus-visible {
  outline: 2px solid rgba(0, 122, 255, .6);
  outline-offset: 2px;
}

/* ── 底部链接 ───────────────────────────────────────────────────── */
.hm-auth-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hm-hair-2);
}

.hm-auth-links a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--hm-hair);
  background: rgba(255, 255, 255, .62);
  color: var(--hm-ink-2);
  font-size: 13px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.hm-auth-links a:hover,
.hm-auth-links a:focus-visible {
  color: var(--hm-link);
  border-color: rgba(0, 122, 255, .35);
  background: rgba(0, 122, 255, .08);
  text-decoration: none;
}

.hm-auth-links svg {
  width: 14px;
  height: 14px;
}

/* ── 页脚 ───────────────────────────────────────────────────────── */
.hm-auth-foot {
  position: relative;
  z-index: 1;
  margin: 20px 0 0;
  font-size: 12px;
  color: #5d6b84;                      /* 极光浅底 4.6:1 */
  text-align: center;
}

.hm-auth-foot a {
  color: inherit;
  text-decoration: none;
}

.hm-auth-foot a:hover {
  color: var(--hm-link);
}

/* ── 说明文字 / 提示 ────────────────────────────────────────────── */
.hm-tips {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--hm-ink-2);
}

.hm-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--hm-hair);
  border-radius: 14px;
  background: rgba(255, 255, 255, .58);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--hm-ink-2);
}

.hm-note p {
  margin: 0;
}

.hm-note p + p {
  margin-top: 4px;
}

.hm-note strong {
  color: var(--hm-ink);
  font-weight: 600;
}

/* ── 分段标签页（找回密码） ─────────────────────────────────────── */
.hm-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 18px 0 0;
  background: rgba(255, 255, 255, .58);
  border: 1px solid var(--hm-hair-2);
  border-radius: 14px;
}

.hm-tab {
  flex: 1 1 0;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hm-ink-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.hm-tab:hover {
  color: var(--hm-link);
}

.hm-tab.is-active {
  background: #ffffff;
  color: var(--hm-link);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(24, 42, 84, .12);
}

.hm-tab:focus-visible {
  outline: 2px solid rgba(0, 122, 255, .45);
  outline-offset: 1px;
}

.hm-pane[hidden] {
  display: none !important;
}

/* 标签页下面那块表单不再需要顶部留白（标签页自己带 margin） */
.hm-tabs + .hm-pane .hm-auth-form {
  margin-top: 16px;
}

/* ── 扫码找回 ───────────────────────────────────────────────────── */
.hm-qr {
  margin-top: 18px;
  text-align: center;
}

.hm-qr-status {
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid var(--hm-hair-2);
  font-size: 13px;
  color: var(--hm-ink-2);
}

.hm-qr-status #loginmsg {
  color: var(--hm-ink);
}

.hm-qr-dot {
  color: var(--hm-deep);
  font-weight: 700;
}

.hm-qr-box {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hm-qr-box img {
  width: 160px;
  height: 160px;
  border-radius: 14px;
  border: 1px solid var(--hm-hair);
  background: #fff;
  padding: 6px;
  cursor: pointer;
}

.hm-submit--ghost {
  margin-top: 8px;
  height: 42px;
  background: rgba(0, 122, 255, .09);
  color: var(--hm-link);
  border: 1px solid rgba(0, 122, 255, .26);
  box-shadow: none;
  font-size: 13px;
  letter-spacing: .02em;
}

.hm-submit--ghost:hover {
  background: rgba(0, 122, 255, .16);
  box-shadow: none;
}

/* ── layer 弹层：贴合 heima 配色（本模板所有页面统一） ───────────── */
.hm-auth .layui-layer {
  border-radius: 14px;
  box-shadow: 0 18px 48px -12px rgba(24, 42, 84, .35);
}

.hm-auth .layui-layer .layui-layer-title {
  background: #f6f8fc;
  border-bottom: 1px solid var(--hm-hair);
  border-radius: 14px 14px 0 0;
  color: var(--hm-ink);
  font-weight: 600;
}

.hm-auth .layui-layer .layui-layer-content {
  color: var(--hm-ink-2);
  font-size: 14px;
}

/* ⚠ 上面那条会连带作用到 layer.msg —— 而 layer 自带的提示条（`.layui-layer-hui`）是
   rgba(0,0,0,.6) 黑底 + 白字，被染成「黑底深灰字」后实测对比度只有 1.08:1，整条看不见
   （「登录成功，正在进入后台…」就是这么消失的）。msg 单独回到浅色玻璃，别跟弹窗共用一套字色。 */
.hm-auth .layui-layer-msg,
.hm-auth .layui-layer-hui {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--hm-hair);
  box-shadow: 0 14px 34px -12px rgba(24, 42, 84, .30);
  color: var(--hm-ink);
}

.hm-auth .layui-layer-msg .layui-layer-content,
.hm-auth .layui-layer-hui .layui-layer-content {
  color: var(--hm-ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
}

.hm-auth .layui-layer .layui-layer-btn a {
  border-radius: 10px;
  height: 34px;
  line-height: 32px;
  font-size: 13px;
}

.hm-auth .layui-layer .layui-layer-btn .layui-layer-btn0 {
  background: linear-gradient(135deg, #0a84ff 0%, #0060df 100%);
  border-color: var(--hm-deep);
  color: #fff;
}

/* ── 入场动效（别超过 .5s，验收探针等不到就成假红） ─────────────── */
@keyframes hmAuthRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.hm-auth-brand {
  animation: hmAuthRise .42s cubic-bezier(.2, .7, .3, 1) both;
}

.hm-auth-card {
  animation: hmAuthRise .42s .05s cubic-bezier(.2, .7, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .hm-auth-brand,
  .hm-auth-card {
    animation: none;
  }
}

/* ── 窄屏：品牌面板压成一条抬头，卡片独占一列 ───────────────────── */
@media (max-width: 979px) {
  .hm-auth {
    padding: 28px 16px;
    justify-content: flex-start;
  }

  .hm-auth-shell {
    max-width: 460px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hm-auth-brand {
    flex-direction: row;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
  }

  .hm-auth-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .hm-auth-logo svg {
    width: 22px;
    height: 22px;
  }

  .hm-auth-brand-name {
    margin: 0 0 0 12px;
    font-size: 18px;
  }

  .hm-auth-brand-tag {
    display: none;
  }

  .hm-auth-feats,
  .hm-auth-brand-foot {
    display: none;
  }

  .hm-auth-body {
    padding: 28px 24px 24px;
  }
}

@media (max-width: 480px) {
  .hm-auth {
    padding: 20px 14px;
  }

  .hm-auth-body {
    padding: 26px 20px 22px;
  }

  .hm-auth-title {
    font-size: 18px;
  }

  .hm-auth-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .hm-auth-mark svg {
    width: 18px;
    height: 18px;
  }
}