/* 登录 / 注册页 */
.auth { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 14rem); padding: 3rem 1rem; background: radial-gradient(60rem 30rem at 50% -10%, #e8eeff 0%, rgba(232,238,255,0) 70%), #f7f9fc; }
.auth-card { width: 100%; max-width: 26rem; background: #fff; border: 1px solid #e6ebf2; border-radius: 1rem; box-shadow: 0 12px 32px rgba(18,38,63,.08); padding: 2rem 2rem 1.5rem; }
@media (max-width: 575.98px) {
  .auth { padding: 1.5rem .75rem; align-items: flex-start; }
  .auth-card { padding: 1.5rem 1.25rem 1.25rem; border-radius: .85rem; }
}

.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .85rem; background: #eef3ff; color: #335eea; font-size: 1.35rem; margin-bottom: .85rem; }
/* 主题标题字体不含中文字形，会回退成宋体，这里指定中文字体 */
.auth-title { font-family: "HK Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif; font-size: 1.6rem; font-weight: 700; color: #1b2a41; margin: 0 0 .35rem; }
.auth-sub { font-size: .9rem; color: #869ab8; margin: 0; }

.auth-error { border-radius: .6rem; padding: .6rem .85rem; margin-bottom: 1rem; font-size: .875rem; line-height: 1.5; background: #fdeef1; border: 1px solid #f4c2cb; color: #a3283b; }

.auth .form-group { margin-bottom: 1rem; }
.auth .form-label { font-size: .85rem; font-weight: 600; color: #1b2a41; margin-bottom: .35rem; }
.auth-input { position: relative; }
.auth-input > .fe { position: absolute; left: .9rem; top: 1.45rem; transform: translateY(-50%); color: #95aac9; font-size: 1rem; pointer-events: none; }
.auth .auth-input .form-control { height: 2.9rem; min-height: 0; padding: .5rem 2.75rem .5rem 2.5rem; font-size: .95rem; border: 1px solid #d9e1ec; border-radius: .6rem; background: #fff; box-shadow: none; }
.auth .auth-input .form-control:focus { border-color: #335eea; box-shadow: 0 0 0 3px rgba(51,94,234,.12); }
.auth .auth-input .form-control::placeholder { color: #a4b1c5; }
.auth-toggle { position: absolute; right: .35rem; top: 1.45rem; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: .45rem; background: transparent; color: #95aac9; cursor: pointer; }
.auth-toggle:hover { color: #335eea; background: #f1f4f9; }
.auth-toggle .fe-eye-off { display: none; }
.auth-toggle.on .fe-eye { display: none; }
.auth-toggle.on .fe-eye-off { display: inline; }
.auth .form-text { display: block; font-size: .78rem; color: #869ab8; margin-top: .3rem; }
.auth .invalid-feedback { font-size: .8rem; }

.auth .form-check { display: flex; align-items: center; gap: .5rem; padding-left: 0; margin-bottom: 1.25rem; font-size: .875rem; flex-wrap: wrap; }
.auth .form-check-input { float: none; margin: 0; }
.auth .form-check .invalid-feedback { flex-basis: 100%; margin-top: 0; }

.auth-submit { height: 2.9rem; font-size: 1rem; font-weight: 600; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.auth-submit:disabled { opacity: .7; }

.auth-foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #eef2f7; text-align: center; font-size: .875rem; color: #869ab8; }
.auth-foot a { font-weight: 600; }
/* 校验状态：去掉 Bootstrap 在输入框右侧加的图标，避免和“显示密码”按钮重叠，只保留边框颜色 */
.auth .was-validated .auth-input .form-control:invalid, .auth .was-validated .auth-input .form-control:valid { background-image: none; padding-right: 2.75rem; }
.auth .was-validated .auth-input .form-control:invalid { border-color: #e63757; }
.auth .was-validated .auth-input .form-control:invalid:focus { box-shadow: 0 0 0 3px rgba(230,55,87,.12); }
.auth .was-validated .auth-input .form-control:valid { border-color: #d9e1ec; }

/* 通行密钥登录 */
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; font-size: .8rem; color: #a4b1c5; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid #eef2f7; }
/* 主题对类名不含 btn-outline 的按钮强制 border-color:transparent!important，所以类名需含 btn-outline；颜色用主题按钮变量，悬停/按下/禁用状态一致 */
.auth-passkey-btn-outline {
  height: 2.9rem; font-size: .95rem; font-weight: 600; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  --bs-btn-bg: #fff; --bs-btn-color: #1b2a41; --bs-btn-border-color: #d9e1ec;
  --bs-btn-hover-bg: #f5f8ff; --bs-btn-hover-color: #335eea; --bs-btn-hover-border-color: #335eea;
  --bs-btn-active-bg: #eef3ff; --bs-btn-active-color: #335eea; --bs-btn-active-border-color: #335eea;
  --bs-btn-disabled-bg: #fff; --bs-btn-disabled-color: #1b2a41; --bs-btn-disabled-border-color: #d9e1ec;
  box-shadow: 0 1px 2px rgba(18,38,63,.04);
}
.auth-passkey-btn-outline .fe { font-size: 1.05rem; color: #335eea; }