/* 登录 / 注册 / 找回密码：左侧跟着鼠标看的小人，右侧表单 */
body.auth-body { min-height: 100vh; background: #fff; }
.auth-page { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* ---------- 左侧小人面板 ---------- */
.auth-left {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 36px 48px;
    overflow: hidden;
    background: linear-gradient(135deg, #dae5fc 0%, #c9d7f6 50%, #b6c9f2 100%);
}
.auth-left::after,
.auth-left::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.auth-left::after { top: 18%; right: 12%; width: 260px; height: 260px; background: rgba(66, 120, 237, .22); filter: blur(80px); }
.auth-left::before { bottom: 12%; left: 8%; width: 350px; height: 350px; background: rgba(255, 255, 255, .45); filter: blur(100px); }
.auth-brand {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #34383f;
}
.auth-brand:hover { color: var(--primary); }
.auth-brand-dot {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), #8aacf4);
    box-shadow: 0 4px 12px rgba(66, 120, 237, .3);
}
.auth-scene-wrap { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; height: 420px; }
.auth-left-foot { position: relative; z-index: 2; display: flex; gap: 28px; font-size: 14px; }
.auth-left-foot a { color: rgba(52, 56, 63, .65); }
.auth-left-foot a:hover { color: #34383f; }

/* 四个小人 */
.auth-scene { position: relative; width: 480px; height: 360px; }
.auth-char { position: absolute; bottom: 0; transform-origin: bottom center; transition: transform .7s cubic-bezier(.4, 0, .2, 1), height .7s cubic-bezier(.4, 0, .2, 1); will-change: transform, height; }
.char-purple { left: 60px; z-index: 1; width: 170px; height: 370px; border-radius: 10px 10px 0 0; background: #3B82F6; }
.char-black { left: 220px; z-index: 2; width: 115px; height: 290px; border-radius: 8px 8px 0 0; background: #2D2D2D; }
.char-orange { left: 0; z-index: 3; width: 230px; height: 190px; border-radius: 115px 115px 0 0; background: #FF9B6B; }
.char-yellow { left: 290px; z-index: 4; width: 135px; height: 215px; border-radius: 68px 68px 0 0; background: #E8D754; }
.auth-eyes { position: absolute; display: flex; transition: all .7s ease-in-out; }
.auth-eyeball { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #fff; transition: height .15s ease; }
.auth-pupil { border-radius: 50%; background: #2D2D2D; transition: transform .1s ease-out; }
.auth-bare-pupil { width: 12px; height: 12px; border-radius: 50%; background: #2D2D2D; transition: transform .7s ease-in-out; }
/* 姿态切换（输密码回避、偷看、互看、摇头、恢复）时眼珠和身体同步慢慢转 */
.auth-scene.is-easing .auth-pupil { transition: transform .6s ease-in-out; }
.auth-yellow-mouth { position: absolute; width: 50px; height: 4px; border-radius: 2px; background: #2D2D2D; transition: all .7s ease-in-out; }
.auth-orange-mouth {
    position: absolute;
    width: 28px;
    height: 14px;
    border: 3px solid #2D2D2D;
    border-top: none;
    border-radius: 0 0 14px 14px;
    opacity: 0;
    transition: all .7s ease-in-out;
}
.auth-orange-mouth.visible { opacity: 1; }
@keyframes authShakeHead {
    0%, 100% { translate: 0 0; }
    10% { translate: -9px 0; }
    20% { translate: 7px 0; }
    30% { translate: -6px 0; }
    40% { translate: 5px 0; }
    50% { translate: -4px 0; }
    60% { translate: 3px 0; }
    70% { translate: -2px 0; }
    80% { translate: 1px 0; }
    90% { translate: -.5px 0; }
}
.auth-shake { animation: authShakeHead .8s cubic-bezier(.36, .07, .19, .97) both; }

/* ---------- 右侧表单 ---------- */
.auth-right { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; }
.auth-brand-mobile { display: none; }
.auth-form-box { width: 100%; max-width: 400px; }
.auth-hd { margin-bottom: 34px; text-align: center; }
.auth-hd h1 { margin-bottom: 6px; font-size: 28px; font-weight: 700; letter-spacing: -.5px; color: #212327; }
.auth-hd p { font-size: 15px; color: #888; }
.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #333; }
.auth-field.is-error label { color: var(--danger); }
.auth-input-wrap { position: relative; }
.auth-input {
    width: 100%;
    height: 46px;
    padding: 0;
    border: none;
    border-bottom: 1.5px solid #E0E0E0;
    background: transparent;
    color: #212327;
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color .3s;
}
.auth-input:focus { border-bottom-color: var(--primary); }
.auth-input::placeholder { color: #C4C4C4; }
.auth-field.is-error .auth-input { border-bottom-color: var(--danger); }
.auth-input-wrap .auth-input { padding-right: 40px; }
.auth-input-wrap .auth-input-code { padding-right: 116px; }
.auth-input[type="password"]:not(:placeholder-shown) { letter-spacing: 2px; }
.auth-input[type="password"]::-ms-reveal,
.auth-input[type="password"]::-ms-clear { display: none; }
.auth-pwd-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 6px;
    border: 0;
    background: none;
    color: #888;
    cursor: pointer;
    transform: translateY(-50%);
}
.auth-pwd-toggle:hover { color: #333; }
.auth-pwd-toggle .icon-eye-off { display: none; }
.auth-pwd-toggle.is-on .icon-eye { display: none; }
.auth-pwd-toggle.is-on .icon-eye-off { display: block; }
.auth-code-btn {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 16px;
    background: var(--primary-light);
    color: var(--primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transform: translateY(-50%);
}
.auth-code-btn:hover { background: var(--primary-soft); }
.auth-code-btn:disabled { opacity: .6; cursor: default; }
.auth-row-end { margin: -8px 0 16px; text-align: right; font-size: 14px; }
.auth-row-end a { color: #888; }
.auth-row-end a:hover { color: var(--primary); }
.auth-submit {
    position: relative;
    width: 100%;
    height: 50px;
    margin-top: 8px;
    overflow: hidden;
    border: 1.5px solid #212327;
    border-radius: 25px;
    background: #212327;
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s;
}
.auth-submit:disabled { opacity: .7; cursor: not-allowed; }
.auth-submit-text { display: inline-block; transition: all .3s; }
.auth-submit-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 25px;
    background: var(--primary);
    opacity: 0;
    transition: all .3s;
}
.auth-submit:not(:disabled):hover .auth-submit-text { opacity: 0; transform: translateX(40px); }
.auth-submit:not(:disabled):hover .auth-submit-hover { opacity: 1; }
.auth-foot { margin-top: 26px; text-align: center; font-size: 14px; color: #888; }
.auth-foot a { color: var(--primary); font-weight: 600; }

/* 屏幕不够高时把小人整体缩小，别顶出面板 */
@media (max-height: 760px) {
    .auth-scene-wrap { height: 330px; }
    .auth-scene { transform: scale(.8); transform-origin: bottom center; }
}
@media (max-width: 1100px) {
    .auth-left { padding: 32px 28px; }
    .auth-scene { transform: scale(.8); transform-origin: bottom center; }
}
@media (max-width: 900px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-left { display: none; }
    .auth-right { justify-content: flex-start; padding: 28px 20px 40px; }
    .auth-brand-mobile { display: inline-flex; align-self: flex-start; margin-bottom: 40px; }
    .auth-input { font-size: 17px; }
}
/* 系统开了「减少动态效果」时不直接关过渡（会变成瞬间跳变，更突兀），改成短一点的缓动 */
/* 手机端底部有悬浮 Tab，表单底部留出位置 */
@media (max-width: 768px) {
    .auth-right { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-char, .auth-eyes, .auth-bare-pupil, .auth-yellow-mouth, .auth-orange-mouth { transition-duration: .45s; }
    .auth-shake { animation: none; }
}
/* 后台设置了站点 logo 就用它，没设置时退回小方块 + 站名 */
.auth-brand-logo { display: block; height: 36px; width: auto; }