/* =============================================================
   AXUI · 登录 / 注册 页面专用样式  (Alibaba-Cloud Style)
   -------------------------------------------------------------
   依赖 axui.css 的 :root 变量；纯 CSS，无外部字体 / CDN。
   左侧品牌视觉区为深色（与首页 Hero 一致），右侧表单区为浅色。
   ============================================================= */

/* ---------- 页面骨架 ---------- */
.ax-auth-body{
    background: var(--ax-bg);
    min-height: 100vh;
}
.ax-auth-shell{
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--ax-auth-foot-h, 0px));
}
/* 登录页专用：内容固定一屏，不出现纵向滚动。
   ⚠️ 只在桌面端（≥992px，左侧 hero 显示时）锁一屏！
   移动端 hero 是隐藏的，只剩表单；若也给 body overflow:hidden + shell height:100vh，
   表单稍高一点（软键盘弹出 / 错误提示出现）就会被直接裁掉，底部按钮点不到。
   版权条已改为嵌在 hero 内部（见 .ax-auth-hero .ax-auth-copyright），
   所以 --ax-auth-foot-h = 0，hero 直接占满整屏。 */
@media (min-width: 992px){
    .ax-auth-body.is-fixed-vh{
        overflow: hidden;                   /* 切断小人绝对定位对 body 滚动高度的贡献 */
    }
    .ax-auth-body.is-fixed-vh .ax-auth-shell{
        height: calc(100vh - var(--ax-auth-foot-h, 0px));
        overflow: hidden;
    }
}

/* 注册页：表单远高于一屏，页面要能正常纵向滚动。
   让 hero 粘在视口左侧（sticky），小人才会一直停在"屏幕下沿探头"，
   而不是跟着页面滚到最底下去。 */
.ax-auth-body:not(.is-fixed-vh) .ax-auth-hero{
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: calc(100vh - var(--ax-auth-foot-h, 0px));
}
/* 注册页的 hero 比表单矮很多，stats 不需要 margin-top:auto 撑开 */
.ax-auth-body:not(.is-fixed-vh) .ax-auth-hero__stats{
    margin-top: auto;
    padding-top: 24px;
}
/* 注册页表单很长、用户注意力在右侧，小人一直缩着就没意义 —— 直接常态探头。 */
.ax-auth-body:not(.is-fixed-vh) .ax-figures{
    transform: translate3d(0, 0, 0);
}

/* ---------- 左侧品牌视觉区（仅桌面） ---------- */
.ax-auth-hero{
    position: relative;
    flex: 1 1 46%;
    display: none;
    flex-direction: column;
    padding: 44px 56px 32px;
    /* 底部预留：容纳【完全探出】的小人（按最高的小人 + 呼吸位算） */
    padding-bottom: 306px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(120% 120% at 80% 0%, #2b3a67 0%, #16203c 45%, #0b1226 100%);
}
.ax-auth-hero::before{
    content:"";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(22,119,255,.30), transparent 42%),
        radial-gradient(circle at 88% 78%, rgba(64,150,255,.26), transparent 46%);
    pointer-events: none;
}
.ax-auth-hero::after{
    content:"";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 20%, #000 5%, transparent 70%);
            mask-image: radial-gradient(ellipse at 60% 20%, #000 5%, transparent 70%);
    pointer-events: none;
}
@media (min-width: 992px){
    .ax-auth-hero{ display: flex; }
}

.ax-auth-hero__logo{
    position: relative; z-index: 2;
    display: block;
    height: 40px;
    width: auto;
    margin-bottom: 30px;
    filter: brightness(0) invert(1);
    opacity: .94;
}
.ax-auth-hero__eyebrow{
    position: relative; z-index: 2;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ax-primary-light);
    margin-bottom: 12px;
}
/* ⚠️ 选择器必须带父级提升优先级：axui.css 里有 `.ax-body h1{color:var(--ax-text)}`（0,1,1），
   若这里只写 `.ax-auth-hero__title`（0,1,0）会被它压掉，
   深色背景上渲染出深色标题 —— 用户反馈"登录页标题看不见"就是这个。 */
.ax-auth-hero .ax-auth-hero__title{
    position: relative; z-index: 2;
    color: #fff;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 14px;
}
.ax-auth-hero__sub{
    position: relative; z-index: 2;
    color: #b9c3da;
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 380px;
}
.ax-auth-hero__map{
    position: relative; z-index: 2;
    width: 100%;
    max-width: 330px;
    height: auto;
    margin: 8px auto 0;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 190px;
    object-fit: contain;
}

/* 节点动画 */
.ax-auth-node{ animation: axAuthPulse 2.6s ease-in-out infinite; transform-origin: center; }
.ax-auth-node-line{ stroke-dasharray: 6 5; animation: axAuthFlow 4.5s linear infinite; }
@keyframes axAuthPulse{
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.35); }
}
@keyframes axAuthFlow{ to { stroke-dashoffset: -110; } }

/* 小人在 hero 底部的"探出高度"。
   头部约占整排高度的 1/4，hero 在下沿留出空白后，
   统计栏被 margin-top:auto 顶到留白之上，两者互不遮挡。
   ⚠️ 留白要按【完全探出】时的小人高度算，否则计数栏会压到头顶。 */
.ax-auth-hero__stats{
    position: relative; z-index: 4;
    display: flex;
    gap: 36px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.ax-auth-hero__stat b{
    display: block;
    font-size: 26px;
    font-weight: 700;
    background: var(--ax-grad);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ax-auth-hero__stat span{ font-size: 12.5px; color: #8f9cb8; }

/* ---------- 右侧表单区 ---------- */
.ax-auth-main{
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.ax-auth-card{
    width: 100%;
    max-width: 460px;
    background: var(--ax-surface);
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-radius);
    box-shadow: var(--ax-shadow-lg);
    padding: 36px 34px 32px;
    animation: axAuthCardIn .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes axAuthCardIn{
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ax-auth-card--wide{ max-width: 520px; }

.ax-auth-logo-mobile{
    display: block;
    height: 40px;
    width: auto;
    margin: 0 auto 20px;
}
@media (min-width: 992px){
    .ax-auth-logo-mobile{ display: none; }
}

.ax-auth-eyebrow{
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ax-primary);
    margin-bottom: 6px;
}
.ax-auth-title{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 22px;
}

/* ---------- 提示条 ---------- */
.ax-auth-notice{
    display: flex;
    gap: 10px;
    background: var(--ax-blue-soft);
    border: 1px solid #d6e4ff;
    border-radius: var(--ax-radius-sm);
    padding: 12px 14px;
    margin-bottom: 22px;
}
.ax-auth-notice i{ flex: none; color: var(--ax-blue); font-size: 16px; margin-top: 1px; }
.ax-auth-notice p{ font-size: 12.5px; line-height: 1.65; color: var(--ax-text-2); }
.ax-auth-notice p + p{ margin-top: 4px; }
.ax-auth-notice b{ color: var(--ax-text); font-weight: 600; }

/* ---------- 表单 ---------- */
.ax-auth-form{ display: flex; flex-direction: column; gap: 16px; }
.ax-auth-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ax-auth-field{ position: relative; }
.ax-auth-field > label{
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ax-text-2);
    margin-bottom: 7px;
}
.ax-auth-field input[type="text"],
.ax-auth-field input[type="email"],
.ax-auth-field input[type="password"],
.ax-auth-field input[type="number"],
.ax-auth-field select{
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    font-family: var(--ax-font);
    color: var(--ax-text);
    background: #fff;
    border: 1px solid var(--ax-line);
    border-radius: var(--ax-radius-sm);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ax-auth-field input::placeholder{ color: var(--ax-text-3); }
.ax-auth-field input:focus,
.ax-auth-field select:focus{
    border-color: var(--ax-primary);
    box-shadow: 0 0 0 3px rgba(22,119,255,.12);
}
.ax-auth-field select{
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2386909c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* 密码显隐 */
.ax-auth-pw{ position: relative; }
.ax-auth-pw input{ padding-right: 44px !important; }
.ax-auth-pw__toggle{
    position: absolute;
    right: 4px; bottom: 0;
    width: 38px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--ax-text-3);
    transition: color .18s ease;
}
.ax-auth-pw__toggle:hover{ color: var(--ax-primary); }
.ax-auth-pw__toggle svg{ width: 18px; height: 18px; }
.ax-auth-pw__toggle .ax-eye-off{ display: none; }
.ax-auth-pw__toggle.is-visible .ax-eye-on{ display: none; }
.ax-auth-pw__toggle.is-visible .ax-eye-off{ display: block; }

/* 手机号前缀徽章 */
.ax-auth-phone{ display: flex; align-items: center; }
.ax-auth-phone input{ flex: 1; min-width: 0; }
.ax-auth-phone__badge{
    display: inline-flex; align-items: center; justify-content: center;
    height: 24px;
    font-size: 11.5px; font-weight: 700;
    color: #fff;
    background: var(--ax-grad);
    border-radius: 0;
    white-space: nowrap;
    max-width: 0; padding: 0; margin-right: 0;
    overflow: hidden; opacity: 0;
    transition: max-width .25s ease, opacity .2s ease, margin-right .25s ease, padding .25s ease;
}
.ax-auth-phone__badge.show{ max-width: 90px; opacity: 1; margin-right: 8px; padding: 0 10px; }

/* 邀请码打勾 */
.ax-auth-invite{ position: relative; }
.ax-auth-invite input{ padding-right: 40px !important; }
.ax-auth-invite__check{
    position: absolute;
    right: 10px; bottom: 12px;
    width: 20px; height: 20px;
    transform: scale(0); opacity: 0;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    pointer-events: none;
}
.ax-auth-invite__check.show{ transform: scale(1); opacity: 1; }
.ax-auth-invite__check svg{ width: 100%; height: 100%; display: block; }
.ax-auth-invite__check circle{ fill: var(--ax-success); }
.ax-auth-invite__check path{
    fill: none; stroke: #fff; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 16; stroke-dashoffset: 16;
    transition: stroke-dashoffset .25s ease .1s;
}
.ax-auth-invite__check.show path{ stroke-dashoffset: 0; }

/* 密码强度 */
.ax-auth-hints{ display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.ax-auth-hint{
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--ax-text-3);
}
.ax-auth-hint__icon{
    flex: none;
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid var(--ax-line);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: background .2s ease, border-color .2s ease;
}
.ax-auth-hint__icon svg{ width: 9px; height: 9px; display: none; }
.ax-auth-hint.ok{ color: var(--ax-text); }
.ax-auth-hint.ok .ax-auth-hint__icon{ border-color: var(--ax-success); background: var(--ax-success); }
.ax-auth-hint.ok .ax-auth-hint__icon svg{ display: block; }
.ax-auth-hint.ok .ax-auth-hint__icon svg path{ stroke: #fff; }

.ax-auth-match{
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--ax-text-3);
    margin-top: 9px; min-height: 16px;
}
.ax-auth-match.match{ color: var(--ax-text); }
.ax-auth-match.match .ax-auth-hint__icon{ border-color: var(--ax-success); background: var(--ax-success); }
.ax-auth-match.match .ax-auth-hint__icon svg{ display: block; }
.ax-auth-match.match .ax-auth-hint__icon svg path{ stroke: #fff; }
.ax-auth-match.mismatch{ color: var(--ax-danger); }
.ax-auth-match.mismatch .ax-auth-hint__icon{ border-color: var(--ax-danger); }
.ax-auth-match.mismatch .ax-auth-hint__icon::before,
.ax-auth-match.mismatch .ax-auth-hint__icon::after{
    content: ""; position: absolute; width: 8px; height: 1.6px; background: var(--ax-danger);
}
.ax-auth-match.mismatch .ax-auth-hint__icon::before{ transform: rotate(45deg); }
.ax-auth-match.mismatch .ax-auth-hint__icon::after{ transform: rotate(-45deg); }

/* 强度条 */
.ax-auth .progress{
    background: var(--ax-bg-2) !important;
    border-radius: 999px !important;
    height: 6px !important;
    overflow: hidden;
    margin: 0 !important;
}
.ax-auth .progress-bar{ background: var(--ax-grad) !important; }

/* 协议勾选 */
.ax-auth-tos{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.ax-auth-check{
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--ax-text-2); cursor: pointer;
}
.ax-auth-check input[type="checkbox"]{
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--ax-line);
    border-radius: 0;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none;
    transition: border-color .18s ease, background .18s ease;
}
.ax-auth-check input[type="checkbox"]:checked{ background: var(--ax-grad); border-color: transparent; }
.ax-auth-check input[type="checkbox"]:checked::after{
    content: "";
    width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px,-1px);
}
.ax-auth-link{ color: var(--ax-primary); font-size: 12.5px; }
.ax-auth-link:hover{ text-decoration: underline; }

/* 记住我 / 附加行 */
.ax-auth-options{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}

/* 提交按钮 */
.ax-auth-submit{
    width: 100%;
    height: 46px;
    border: none;
    border-radius: var(--ax-radius-sm);
    font-size: 15px; font-weight: 600;
    font-family: var(--ax-font);
    color: #fff;
    background: var(--ax-grad);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(22,119,255,.26);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ax-auth-submit:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22,119,255,.34); filter: brightness(1.04); }
.ax-auth-submit:active{ transform: translateY(0); }
.ax-auth-submit:disabled{ opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* 底部链接 */
.ax-auth-foot{
    text-align: center;
    font-size: 13px;
    color: var(--ax-text-3);
    margin-top: 18px;
}
.ax-auth-foot a{ color: var(--ax-primary); font-weight: 600; }
.ax-auth-foot a:hover{ text-decoration: underline; }
.ax-auth-foot .sep{ color: var(--ax-line); margin: 0 8px; }

/* 版权条：**嵌在 .ax-auth-hero 内部**（不是 shell 之后的独立模块）。
   原因：人物是"鼠标一动就探头、静止 1.6s 缩回"。
   如果版权条在 hero 外面，鼠标滑到版权条上就离开了 hero → 人物立刻缩回，
   用户会觉得"人物很敏感/乱缩"。
   放在 hero 里并绝对定位到底部，鼠标扫过这一条时仍算在 hero 内，人物保持探头。
   z-index 要高于 .ax-figures(3)，免得被人物的腿压住。 */
.ax-auth-hero .ax-auth-copyright{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 5;
    text-align: center;
    padding: 10px 20px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,.42);
    /* 上方加一层渐变，让文字压在人物腿上时仍清晰 */
    background: linear-gradient(to top, rgba(11,18,38,.92) 0%,
                rgba(11,18,38,.72) 55%, rgba(11,18,38,0) 100%);
    pointer-events: auto;
}
/* 独立/兜底：万一有页面把版权条放在 hero 外面（旧结构），保持可用 */
.ax-auth-copyright{
    text-align: center;
    padding: 6px 20px 28px;
    font-size: 12px;
    color: var(--ax-text-3);
    line-height: 1.5;
}

/* 语言切换分段控件 */
.ax-lang-switch{
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--ax-bg-2);
    border: 1px solid var(--ax-line);
    border-radius: 0;
    padding: 3px;
    margin-left: auto;
}
.ax-lang-btn{
    background: none; border: none;
    padding: 4px 12px;
    font-size: 11.5px; font-weight: 600;
    font-family: var(--ax-font);
    color: var(--ax-text-3);
    border-radius: 0;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
.ax-lang-btn:hover:not(.is-active){ color: var(--ax-text-2); }
.ax-lang-btn.is-active{ color: #fff; background: var(--ax-grad); cursor: default; }
.ax-auth-bar{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 20px;
}
.ax-auth-bar__dot{ width: 9px; height: 9px; border-radius: 50%; }
.ax-auth-bar__name{ font-size: 12.5px; color: var(--ax-text-3); }

/* 弹窗（验证码 / 通用模态） */
.ax-modal-overlay{
    display: none;
    position: fixed; inset: 0;
    background: rgba(4,7,14,.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center; justify-content: center;
}
.ax-modal-box{
    background: #fff;
    border: 1px solid var(--ax-line);
    width: 340px; max-width: 90%;
    border-radius: var(--ax-radius);
    padding: 30px 26px 26px;
    position: relative;
    box-shadow: var(--ax-shadow-lg);
    animation: axModalPop .25s ease;
    text-align: center;
}
@keyframes axModalPop{
    0%   { transform: scale(.94); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.ax-modal-close{
    position: absolute; top: 12px; right: 14px;
    background: none; border: none;
    font-size: 22px; line-height: 1;
    color: var(--ax-text-3); cursor: pointer;
    transition: color .2s ease;
}
.ax-modal-close:hover{ color: var(--ax-text); }
.ax-modal-title{ font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.ax-modal-desc{ font-size: 12.5px; color: var(--ax-text-3); margin-bottom: 20px; line-height: 1.6; }
.ax-captcha-q{
    font-size: 26px; font-weight: 700;
    color: var(--ax-primary);
    margin-bottom: 18px;
    letter-spacing: 1px;
}
.ax-captcha-input{
    width: 100%; height: 44px;
    text-align: center;
    font-size: 16px;
    padding: 0 12px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--ax-line);
    color: var(--ax-text);
    border-radius: var(--ax-radius-sm);
    outline: none;
}
.ax-captcha-input:focus{ border-color: var(--ax-primary); box-shadow: 0 0 0 3px rgba(22,119,255,.12); }
.ax-captcha-error{ color: var(--ax-danger); font-size: 12.5px; margin-bottom: 12px; }
.ax-captcha-submit{
    width: 100%; height: 44px;
    border: none; border-radius: var(--ax-radius-sm);
    font-size: 14px; font-weight: 600;
    font-family: var(--ax-font);
    color: #fff; background: var(--ax-grad);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ax-captcha-submit:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(22,119,255,.3); }
.ax-captcha-submit:disabled{ opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* 加载遮罩 */
.ax-loading-overlay{
    display: none;
    position: fixed; inset: 0;
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    z-index: 10000;
    align-items: center; justify-content: center;
    flex-direction: column;
}
.ax-loading-spinner{
    width: 32px; height: 32px;
    border: 3px solid rgba(22,119,255,.18);
    border-top-color: var(--ax-primary);
    border-radius: 50%;
    animation: axAuthSpin .7s linear infinite;
    margin-bottom: 12px;
}
@keyframes axAuthSpin{ to { transform: rotate(360deg); } }
.ax-loading-text{ color: var(--ax-text-2); font-size: 12.5px; }

/* =============================================================
   扁平插画小人「视线跟随 + 头身倾斜 + 探头」（左侧 hero 装饰，仅桌面端）
   -------------------------------------------------------------
   结构：.ax-figures > .ax-figure（3 个）> svg.ax-fig-svg
           > g.ax-fig-tilt   ← 头+身同体，以脚底为支点整体倾斜
              > g.ax-fig-head（头发/脸/五官/耳机）
              > g.ax-fig-body（脖子/上衣）
   · 头与身同一坐标系、同一支点 → 结构上杜绝"头身错位"
   · viewBox 高度统一，靠 svg height 缩放 → 无 margin 负值，杜绝分辨率漂移
   · .ax-figures 用 translate3d + 独立合成层 → 探头动画不抖
   ============================================================= */
.ax-figures{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 64px;
    /* 高度 = 最高的小人。用 --ax-figs-h 统一控制，三个断点各设一次，
       避免"wrapper 高 292 但 svg 只有 240"导致的裁切/露出量算错。 */
    height: var(--ax-figs-h, 292px);
    padding-bottom: 0;
    pointer-events: none;
    /* 默认下沉。--ax-figs-sink 由各断点给定：
       露出高度 = --ax-figs-h − --ax-figs-sink，目标 = 露出头顶到下巴再多一点。
       用 translate3d 走 GPU 合成，避免 sub-pixel 抖动。 */
    transform: translate3d(0, var(--ax-figs-sink, 150px), 0);
    transition: transform .8s cubic-bezier(.22,1,.36,1);
    will-change: transform;
    backface-visibility: hidden;
    opacity: 0;
    animation: axFiguresIn .9s cubic-bezier(.22,1,.36,1) .3s forwards;
}
/* 鼠标一动 → 整排上探到完全站出 */
.ax-figures.is-peeking{
    transform: translate3d(0, 0, 0);
}
@keyframes axFiguresIn{
    from{ opacity: 0; }
    to  { opacity: 1; }
}

/* 底部渐隐遮罩：让身体下段融进 hero 底色，营造"站在下方"的纵深 */
.ax-figures::after{
    content:"";
    position: absolute;
    left: -10%; right: -10%;
    bottom: -1px;
    height: 96px;
    background: linear-gradient(to bottom,
        rgba(11,18,38,0) 0%,
        rgba(11,18,38,.32) 50%,
        rgba(11,18,38,.72) 82%,
        rgba(11,18,38,.95) 100%);
    pointer-events: none;
    z-index: 2;
}

/* 每个小人：底部对齐（不再用 margin 负值，避免缩放时位置漂移） */
/* 小人：必须脱离文档流，否则它会撑高 body 的滚动高度（hero 的 overflow:hidden 只裁"画"，
   不裁祖先的 scrollHeight）。同时 SVG 设 overflow:visible 是为了让阴影/下摆不被切，
   所以这里靠绝对定位 + 容器裁剪来彻底隔离。 */
.ax-figure{
    display: block;
    flex: 0 0 auto;
    position: relative;
}

/* 头 + 身同体：以脚底为支点整体倾斜，头与身体永不分离。
   ⚠️ 支点必须用【SVG 用户坐标】写死，不能用 50% 100%：
   身子的 path 比头宽，tilt 组的 bbox 中心会偏离头部中轴，
   用百分比支点会导致头绕着"偏了 5 单位"的轴转 → 头身看起来错位。 */
.ax-fig-tilt{
    transform-box: view-box;          /* 让 transform-origin 用 viewBox 坐标系 */
    transform: rotate(0deg);
    transition: transform .18s cubic-bezier(.33,.9,.4,1);
    will-change: transform;
}
.ax-figure--1 .ax-fig-tilt{ transform-origin: 80px 340px; }   /* viewBox 160x340 */
.ax-figure--2 .ax-fig-tilt{ transform-origin: 70px 340px; }   /* viewBox 140x340 */
.ax-figure--3 .ax-fig-tilt{ transform-origin: 62px 340px; }   /* viewBox 124x340 */

/* 头：只承载眨眼与瞪眼（倾斜交给 .ax-fig-tilt） */
.ax-fig-head{
    transform-box: view-box;
    transform-origin: 80px 80px;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.ax-figure--1 .ax-fig-head{ transform-origin: 80px 80px; }    /* 脸底 y=119，支点取下巴上一点 */
.ax-figure--2 .ax-fig-head{ transform-origin: 70px 74px; }
.ax-figure--3 .ax-fig-head{ transform-origin: 62px 72px; }
/* ⚠️ 眨眼必须只压【眼睛内部】，不能压 .ax-fig-head，也不能压 .ax-fig-eye：
   - 压 .ax-fig-head → 整颗头（脸/头发/耳朵/耳机）一起被压扁，
     用户反馈的"头会突然变扁"就是这个。
   - 压 .ax-fig-eye → 该组的 transform 每帧被 JS 写入视线偏移，会互相覆盖。
   所以改用只受 CSS 控制的 .ax-fig-socket / .ax-fig-pupil / .ax-fig-glint。 */
.ax-fig-head.is-blinking .ax-fig-socket{
    transform: scaleY(.62);
    transition: transform .11s ease-in-out;
}
.ax-fig-head.is-blinking .ax-fig-pupil{
    transform: scaleY(.16) scale(var(--ax-eye-scale, 1));
    transition: transform .11s ease-in-out;
}
.ax-fig-head.is-blinking .ax-fig-glint{
    opacity: 0;
    transition: opacity .11s ease-in-out;
}

/* 眼球组（JS 写 transform 做视线偏移） */
.ax-fig-eye{
    transition: transform .12s cubic-bezier(.33,.9,.4,1);
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

/* ---------- 扁平插画配色（阿里云风：实色 + 暖橙点缀） ---------- */
.ax-fig-skin   { fill: #ffd9b8; }
.ax-fig-face   { fill: #ffe0c4; }
.ax-fig-ear    { fill: #ffd0a8; }
.ax-fig-hair   { fill: #3a4a75; }
.ax-fig-bun    { fill: #ff6a00; }
.ax-fig-neck   { fill: #f7c69f; }
.ax-fig-shirt  { fill: #4a6cf7; }
/* 手臂用主色压暗 12%，才能在躯干上"看得见"；否则同色=一团色块 */
.ax-fig-sleeve { fill: #3d5ce0; }
.ax-fig-shirt-line{ stroke: rgba(255,255,255,.34); stroke-width: 2.4; }
.ax-fig-collar { stroke: rgba(255,255,255,.6); stroke-width: 3; stroke-linecap: round; }
.ax-fig-badge  { fill: #ff8a33; }
/* 耳机：耳罩用亮橙实色（在深色头发上才看得见）。
   ⚠️ 头梁是圆弧描边，必须单独用 .ax-fig-phones-band：
   早期给它套 .ax-fig-phones 的 fill，CSS 的 fill 会压掉标记里的 fill="none"，
   于是整条弧被填成橙色半圆盘，把整个头发盖住 —— 头发看起来就是橙色的。 */
.ax-fig-phones      { fill: #ff8a33; stroke: #ff8a33; stroke-width: 3; }
.ax-fig-phones-band { fill: none; stroke: #ff8a33; stroke-width: 5; stroke-linecap: round; }
.ax-fig-blush  { fill: #ff9d7a; opacity: .5; }
.ax-fig-mouth  { stroke: #a2603c; stroke-width: 2.6; stroke-linecap: round; }

/* 眼白 + 瞳孔 + 高光 */
.ax-fig-socket{
    fill: #ffffff;
    transform-box: fill-box;
    transform-origin: center;
}
.ax-fig-pupil{
    fill: #1c2340;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(var(--ax-eye-scale, 1));
    transition: transform .12s cubic-bezier(.34,1.4,.52,1), opacity .18s ease;
}
.ax-fig-glint{
    fill: #ffffff;
    opacity: .92;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(var(--ax-eye-scale, 1));
    transition: transform .12s cubic-bezier(.34,1.4,.52,1), opacity .18s ease;
}

/* 三个小人的上衣主色各不相同（阿里云风的暖色系点缀）
   袖子同步跟随主色压暗，保持"同色系但能分辨"。 */
.ax-figure--1 .ax-fig-shirt { fill: #4a6cf7; }
.ax-figure--1 .ax-fig-sleeve{ fill: #3d5ce0; }
.ax-figure--2 .ax-fig-shirt { fill: #ff8a33; }
.ax-figure--2 .ax-fig-sleeve{ fill: #ec7519; }
.ax-figure--3 .ax-fig-shirt { fill: #22b8a6; }
.ax-figure--3 .ax-fig-sleeve{ fill: #17a191; }

/* 移动时眼睛微微瞪大（eager），让"在看你"的感觉更明确 */
.ax-figures.is-peeking .ax-fig-socket{
    transition: transform .2s cubic-bezier(.34,1.4,.52,1);
    transform: scale(1.05);
}

/* ---------- 密码聚焦：缩回 + 扭头（头身同体反向）+ 闭眼 ---------- */
.ax-auth-hero.is-pw-focus .ax-figures{
    /* 比默认态再下沉 40px，但仍保证整个头露在外面（扭头闭眼要看得见） */
    transform: translate3d(0, calc(var(--ax-figs-sink, 160px) + 40px), 0);
    transition: transform .65s cubic-bezier(.4,0,.2,1);
}
/* 头身一起朝反方向侧倾（躲开密码框方向） */
.ax-auth-hero.is-pw-focus .ax-fig-tilt{
    transform: rotate(-7deg);
    transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.ax-auth-hero.is-pw-focus .ax-fig-head{
    transform: rotate(-8deg) !important;
    transform-origin: 50% 86%;         /* 绕下巴转，缩回时不会甩出头身缝 */
}
.ax-auth-hero.is-pw-focus .ax-fig-pupil{
    transform: scaleY(.14) scaleX(.9) scale(var(--ax-eye-scale, 1));
    opacity: .85;
}
.ax-auth-hero.is-pw-focus .ax-fig-glint{
    transform: scale(0);
    opacity: 0;
}
.ax-auth-hero.is-pw-focus .ax-fig-socket{
    transform: scaleY(.84);
}
.ax-auth-hero.is-pw-focus .ax-fig-mouth{
    stroke-width: 1.5;
    opacity: .6;
}

/* 三个尺寸：viewBox 160/140/124 × 340（≈1:2.1 真人比例），只给 height，宽度靠 SVG 等比推出来。
   ⚠️ 宽度必须按 height × (vbW/340) 反推验证：过窄会让人像被压成"香肠"。
   --ax-figs-h / --ax-figs-sink 必须与这里的最高小人同步：
   露出高度 = h − sink，约束是 sink ≤ h − 下巴位置(102×h/292)，否则下巴会被裁。 */
.ax-figures{ --ax-figs-h: 292px; --ax-figs-sink: 160px; }   /* 露出 132px */
.ax-figure--1 .ax-fig-svg{ height: 292px; }   /* → 宽 137px */
.ax-figure--2 .ax-fig-svg{ height: 244px; }   /* → 宽 100px */
.ax-figure--3 .ax-fig-svg{ height: 204px; }   /* → 宽  74px */

/* 高低错落：用 margin 微调基线 */
.ax-figure--2{ margin-bottom: 8px; }
.ax-figure--3{ margin-bottom: 34px; }

.ax-fig-svg{
    display: block;
    width: auto;
    overflow: visible;
    filter: drop-shadow(0 14px 28px rgba(0,0,0,.38));
}

/* 仅在桌面端显示（与 .ax-auth-hero 一致断点） */
@media (max-width: 991px){
    .ax-figures{ display: none; }
}

/* 视口较矮时收紧排版 */
@media (min-width: 992px) and (max-height: 900px){
    .ax-auth-hero{ padding-top: 30px; padding-bottom: 248px; }
    .ax-auth-hero__logo{ height: 34px; margin-bottom: 18px; }
    .ax-auth-hero__title{ font-size: 29px; margin-bottom: 9px; }
    .ax-auth-hero__sub{ font-size: 13px; line-height: 1.55; }
    .ax-auth-hero__map{ max-height: 96px; max-width: 190px; margin-top: 2px; }
    .ax-auth-hero__stats{ padding-top: 12px; gap: 30px; }
    .ax-auth-hero__stat b{ font-size: 20px; }
    .ax-figure--1 .ax-fig-svg{ height: 240px; }
    .ax-figure--2 .ax-fig-svg{ height: 200px; }
    .ax-figure--3 .ax-fig-svg{ height: 166px; }
    /* 最高小人 240 → 下巴在 84 → sink ≤ 156；取 132（露出 108px） */
    .ax-figures{ --ax-figs-h: 240px; --ax-figs-sink: 132px; gap: 40px; }
}
@media (min-width: 992px) and (max-height: 760px){
    .ax-auth-hero{ padding-bottom: 218px; }
    .ax-auth-hero__map{ display: none; }
    .ax-auth-hero__title{ font-size: 27px; }
    .ax-figure--1 .ax-fig-svg{ height: 218px; }
    .ax-figure--2 .ax-fig-svg{ height: 180px; }
    .ax-figure--3 .ax-fig-svg{ height: 150px; }
    /* 最高小人 218 → 下巴在 76 → sink ≤ 142；取 120（露出 98px） */
    .ax-figures{ --ax-figs-h: 218px; --ax-figs-sink: 120px; gap: 36px; }
}

/* 无障碍：减少动效时静态呈现（保持在探头位置） */
@media (prefers-reduced-motion: reduce){
    .ax-figures{
        animation: none;
        opacity: 1;
        transform: translate3d(0, 0, 0) !important;   /* 始终露出 */
        transition: none;
    }
    .ax-fig-tilt,
    .ax-fig-head,
    .ax-fig-eye,
    .ax-fig-pupil,
    .ax-fig-glint,
    .ax-fig-socket{ transition: none !important; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 620px){
    .ax-auth-card{ padding: 28px 22px 24px; }
    .ax-auth-row{ grid-template-columns: 1fr; }
    .ax-auth-title{ font-size: 21px; }
}

/* 无障碍：尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce){
    .ax-auth-card,
    .ax-modal-box,
    .ax-auth-node,
    .ax-auth-node-line{ animation: none !important; }
    .ax-auth-hero__stat b{
        -webkit-text-fill-color: #4096ff;
        color: #4096ff;
    }
}