/* ==========================================================================
   用户登录页专用样式（view/index/login.html）
   - 背景仍为登录页自己的视频背景，本文件不改变背景
   - 左侧：可互动的卡通小人；右侧：参考风格的表单卡片
   - 仅前端样式，不涉及任何接口或服务端字段
   ========================================================================== */

.login-scene {
    --brand: #534686;
    --brand-deep: #3b3163;
    --brand-soft: #efeaf9;
    --ink: #221f33;
    --ink-2: #6f6b84;
    --line: #e7e4f0;
    --radius-card: 26px;

    --scene-scale: 1;
    --cover-eye: 0;
}

body.login-scene {
    margin: 0;
    min-height: 100vh;
    background: #14101f;
    color: var(--ink);
    font-family: 'Rubik', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
    overflow-x: hidden;
}

body.login-scene *,
body.login-scene *::before,
body.login-scene *::after {
    box-sizing: border-box;
}

/* 主题里有一条全局 label{margin-bottom:.5rem}，会让分段按钮里的文字被顶高 4px，
   这里统一清零；各表单项需要间距时自己单独给（见 .field > label） */
.login-scene label {
    margin: 0;
}

/* ==========================================================================
   一、页面骨架：左（卡通小人）右（表单）两栏
   ========================================================================== */

.login-scene .login-page {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 486px);
    align-items: center;
    gap: 32px;
    min-height: 100vh;
    padding: 44px 56px;
}

/* ---------- 左栏 ---------- */

.login-scene .stage-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 540px;
}

/* 左栏不铺任何遮罩，完全透出登录页自己的背景 */

.login-scene .stage-copy {
    position: relative;
    z-index: 2;
    max-width: 520px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(12, 6, 28, .55);
}

.login-scene .stage-copy h1 {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: .5px;
    color: #fff;
}

.login-scene .stage-copy h1 em {
    font-style: normal;
    background: linear-gradient(96deg, #ffe4a3, #9be8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 渐变文字用 text-shadow 会糊成一团，改用 drop-shadow 保持清晰 */
    text-shadow: none;
    filter: drop-shadow(0 2px 12px rgba(12, 6, 28, .85));
}

.login-scene .stage-copy p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
}

.login-scene .stage-tip {
    position: relative;
    z-index: 3;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-top: 4px;
    padding: 7px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    background: rgba(24, 14, 46, .42);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.login-scene .stage-tip::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: #9d8bff;
    box-shadow: 0 0 10px #9d8bff;
    animation: tipPulse 1.8s ease-in-out infinite;
}

.login-scene .stage-tip b {
    color: #cfc4ff;
    font-weight: 600;
}

@keyframes tipPulse {
    0%, 100% { opacity: .45; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* ==========================================================================
   二、卡通小人
   ========================================================================== */

.login-scene .characters-scene {
    position: relative;
    z-index: 2;
    width: 460px;
    height: 384px;
    margin: 6px auto 12px;
    transform: scale(var(--scene-scale));
    transform-origin: bottom center;
    transition: transform .4s ease;
}

.login-scene .character {
    position: absolute;
    bottom: 0;
    cursor: pointer;
    transform-origin: bottom center;
    transition: transform .45s cubic-bezier(.34, 1.5, .64, 1), filter .35s ease;
    will-change: transform;
}

/* 地面投影 */
.login-scene .character::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 116%;
    height: 30px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(14, 8, 30, .48) 0%, rgba(14, 8, 30, 0) 72%);
    z-index: 0;
}

.login-scene .character .body {
    position: absolute;
    inset: 0;
    overflow: visible;
    background: var(--skin);
    border-radius: 14px 14px 0 0;
    box-shadow: inset -16px -20px 0 rgba(0, 0, 0, .07), inset 10px 0 0 rgba(255, 255, 255, .06);
    transform: skewX(var(--skew, 0deg));
    transform-origin: bottom center;
    transition: transform .55s cubic-bezier(.33, 1, .68, 1), background .45s ease;
    animation: breathe 5s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { scale: 1; }
    50%      { scale: 1.014; }
}

/* 眼睛（白眼球 + 瞳孔），无眼白的角色改用透明眼球容器共享同一套定位 */
.login-scene .eyes {
    position: absolute;
    left: var(--eye-l);
    top: var(--eye-t);
    display: flex;
    gap: var(--eye-gap);
    z-index: 3;
    transform: translate3d(var(--face-x, 0px), var(--face-y, 0px), 0);
    transition: transform .35s ease-out;
}

.login-scene .eye {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--eye-size);
    height: var(--eye-size);
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    transition: transform .16s ease, background .3s ease;
}

.login-scene .pupil {
    width: var(--pupil-size);
    height: var(--pupil-size);
    border-radius: 50%;
    background: var(--eye-ink, #221f33);
    transform: translate(var(--pupil-x, 0px), var(--pupil-y, 0px));
    transition: transform .12s ease-out;
}

/* 眨眼 */
.login-scene .character.is-blinking .eye {
    transform: scaleY(.08);
}

/* 嘴巴：默认平静的短横线，悬停变成笑弧，出错变成向下撇嘴 */
.login-scene .mouth {
    position: absolute;
    left: var(--mouth-l);
    top: var(--mouth-t);
    width: var(--mouth-w);
    height: 15px;
    border: 3px solid transparent;
    border-bottom-color: var(--eye-ink, #221f33);
    border-radius: 0 0 999px 999px;
    z-index: 3;
    transition: width .3s ease, height .3s ease, left .3s ease, border-color .3s ease, border-radius .3s ease;
}

/* 腮红 */
.login-scene .cheek {
    position: absolute;
    top: calc(var(--eye-t) + var(--eye-size) + 6px);
    width: 18px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    opacity: 0;
    z-index: 3;
    transition: opacity .3s ease;
}

.login-scene .cheek-l { left: calc(var(--eye-l) - 18px); }
.login-scene .cheek-r { left: calc(var(--eye-l) + var(--eye-size) + var(--eye-gap) + 8px); }

/* 小手：密码聚焦时抬起来捂住眼睛 */
.login-scene .hand {
    position: absolute;
    width: calc(var(--eye-size) + 14px);
    height: calc(var(--eye-size) + 14px);
    border-radius: 50%;
    background: var(--skin);
    box-shadow: inset -3px -4px 0 rgba(0, 0, 0, .08), 0 0 0 2px rgba(255, 255, 255, .30);
    opacity: 0;
    transform: translateY(26px) scale(.65);
    transition: transform .42s cubic-bezier(.34, 1.45, .64, 1), opacity .25s ease;
    z-index: 4;
}

.login-scene .hand-l {
    left: calc(var(--eye-l) - 7px);
    top: calc(var(--eye-t) - 5px);
}

.login-scene .hand-r {
    left: calc(var(--eye-l) + var(--eye-size) + var(--eye-gap) - 7px);
    top: calc(var(--eye-t) - 5px);
}

/* 手臂：平时自然下垂，悬停挥手，登录成功时举起来欢呼 */
.login-scene .arm {
    position: absolute;
    top: 52%;
    width: calc(var(--eye-size) * .58);
    height: 54px;
    border-radius: 999px;
    background: var(--skin);
    box-shadow: inset -2px -3px 0 rgba(0, 0, 0, .07);
    transform-origin: 50% 4px;
    z-index: 2;
    transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
}

.login-scene .arm-l { left: -6px;  transform: rotate(10deg); }
.login-scene .arm-r { right: -6px; transform: rotate(-10deg); }

/* 悬停时冒出的小星星 */
.login-scene .spark {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 6;
}

.login-scene .spark:nth-of-type(1) { left: -14px; top: 18%; }
.login-scene .spark:nth-of-type(2) { right: -12px; top: 6%; }
.login-scene .spark:nth-of-type(3) { left: 46%; top: -20px; }

/* ---------- 角色体型与颜色 ---------- */

.login-scene .char-purple {
    left: 70px;
    width: 168px;
    height: 350px;
    z-index: 1;
    --skin: #6B4EE6;
    --eye-size: 22px;
    --eye-l: 46px;
    --eye-t: 46px;
    --eye-gap: 32px;
    --pupil-size: 9px;
    --mouth-l: 67px;
    --mouth-t: 102px;
    --mouth-w: 34px;
}

.login-scene .char-dark {
    left: 226px;
    width: 110px;
    height: 268px;
    z-index: 2;
    --skin: #33304A;
    --eye-size: 18px;
    --eye-l: 27px;
    --eye-t: 38px;
    --eye-gap: 20px;
    --pupil-size: 7px;
    --mouth-l: 42px;
    --mouth-t: 82px;
    --mouth-w: 26px;
}

.login-scene .char-orange {
    left: 6px;
    width: 218px;
    height: 190px;
    z-index: 3;
    --skin: #FF9B6B;
    --eye-size: 24px;
    --eye-l: 70px;
    --eye-t: 88px;
    --eye-gap: 30px;
    --pupil-size: 12px;
    --mouth-l: 94px;
    --mouth-t: 134px;
    --mouth-w: 30px;
}

/* 橙色与黄色角色没有眼白，只留黑色瞳孔 */
.login-scene .char-orange .eye,
.login-scene .char-yellow .eye {
    background: transparent;
}

.login-scene .char-yellow {
    left: 296px;
    width: 128px;
    height: 208px;
    z-index: 4;
    --skin: #E8D754;
    --eye-size: 20px;
    --eye-l: 32px;
    --eye-t: 46px;
    --eye-gap: 24px;
    --pupil-size: 10px;
    --mouth-l: 50px;
    --mouth-t: 96px;
    --mouth-w: 28px;
}

/* 半圆、圆角造型 */
.login-scene .char-orange .body { border-radius: 999px 999px 0 0; }
.login-scene .char-yellow .body { border-radius: 999px 999px 0 0; }
.login-scene .char-dark .body   { border-radius: 10px 10px 0 0; }

/* ---------- 悬停：小人跳一下、眼睛睁大、笑、挥手、冒星星 ---------- */

.login-scene .character:hover {
    transform: translateY(-16px) scale(1.035);
    filter: drop-shadow(0 18px 22px rgba(14, 8, 30, .40));
}

.login-scene .character:hover .mouth {
    width: calc(var(--mouth-w) + 10px);
    height: 19px;
    left: calc(var(--mouth-l) - 5px);
    border-bottom-width: 4px;
}

.login-scene .character:hover .cheek {
    opacity: .62;
}

.login-scene .character:hover .pupil {
    transform: translate(var(--pupil-x, 0px), var(--pupil-y, 0px)) scale(1.22);
}

.login-scene .character:hover .arm-l { animation: waveLeft .95s ease-in-out infinite; }
.login-scene .character:hover .arm-r { animation: waveRight .95s ease-in-out infinite .1s; }

@keyframes waveLeft {
    0%, 100% { transform: rotate(6deg); }
    50%      { transform: rotate(-34deg); }
}

@keyframes waveRight {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(34deg); }
}

.login-scene .character:hover .spark { animation: sparkFloat 1.05s ease-out infinite; }
.login-scene .character:hover .spark:nth-of-type(2) { animation-delay: .18s; }
.login-scene .character:hover .spark:nth-of-type(3) { animation-delay: .34s; }

@keyframes sparkFloat {
    0%   { opacity: 0; transform: translateY(6px) scale(.4); }
    35%  { opacity: 1; transform: translateY(-6px) scale(1); }
    100% { opacity: 0; transform: translateY(-24px) scale(.3); }
}

/* ==========================================================================
   三、右侧表单卡片
   ========================================================================== */

.login-scene .form-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.login-scene .ls-card {
    width: 100%;
    max-width: 460px;
    /* 留出页面上下内边距和备案号的位置，矮屏时卡片内部滚动而不是整页滚动 */
    max-height: calc(100vh - 104px);
    padding: 30px 34px 26px;
    overflow-y: auto;
    background: rgba(255, 255, 255, .93);
    border: 1px solid rgba(255, 255, 255, .70);
    border-radius: var(--radius-card);
    box-shadow: 0 30px 70px rgba(20, 12, 44, .30), 0 2px 0 rgba(255, 255, 255, .6) inset;
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    scrollbar-width: thin;
}

.login-scene .ls-card::-webkit-scrollbar { width: 6px; }
.login-scene .ls-card::-webkit-scrollbar-thumb {
    background: rgba(83, 70, 134, .28);
    border-radius: 99px;
}

.login-scene .card-head {
    text-align: center;
    margin-bottom: 18px;
}

.login-scene .card-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 6px 12px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(83, 70, 134, .14);
}

.login-scene .card-logo img {
    display: block;
    max-height: 34px;
    width: auto;
}

.login-scene .card-head h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--ink);
}

.login-scene .card-head p {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
}

/* ---------- 表单项：参考稿的“下划线”输入风格 ---------- */

.login-scene .field {
    margin-bottom: 14px;
}

.login-scene .field > label {
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: #3c3950;
}

.login-scene .control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    border-bottom: 1.5px solid var(--line);
    transition: border-color .3s ease;
}

.login-scene .control.is-focus {
    border-bottom-color: var(--brand);
}

.login-scene .control .field-icon {
    flex: none;
    display: flex;
    color: #b3aec8;
    transition: color .3s ease;
}

.login-scene .control.is-focus .field-icon {
    color: var(--brand);
}

.login-scene .control .field-icon svg {
    width: 17px;
    height: 17px;
}

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

.login-scene .control input::placeholder {
    color: #bdb9cc;
}

.login-scene .control input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 40px #fff inset;
}

.login-scene .control input[type="password"]:not(:placeholder-shown) {
    letter-spacing: 2px;
}

/* 密码显隐按钮 */
.login-scene .toggle-password {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #9a95af;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.login-scene .toggle-password:hover {
    color: var(--brand);
    background: var(--brand-soft);
}

.login-scene .toggle-password svg {
    width: 18px;
    height: 18px;
}

.login-scene .toggle-password .icon-eye-off { display: none; }
.login-scene .toggle-password.is-visible .icon-eye { display: none; }
.login-scene .toggle-password.is-visible .icon-eye-off { display: block; }

/* 验证码一行 */
.login-scene .captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-scene .captcha-row .control {
    flex: 1 1 auto;
    min-width: 0;
}

.login-scene .captcha-img {
    flex: none;
    width: 124px;
    height: 41px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
    /* 手机上长按不要弹出「存储图片 / 复制」这类系统菜单，会盖住验证码 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.login-scene .captcha-img:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}

.login-scene .captcha-refresh {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, transform .4s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* 悬停时只让图标转，整个按钮不转——按钮一旦带 transform，
   里面的自绘气泡会跟着一起旋转、被甩到下方 */
.login-scene .captcha-refresh:hover {
    color: var(--brand);
    border-color: var(--brand);
}

/* 提示气泡改成只在有鼠标的设备上自己画，不再用原生 title：
   手机上长按会弹出系统提示框，正好压在验证码上看不清。
   只作用于按钮/链接，左侧小人也带 data-tip，不排除的话悬停小人也冒气泡 */
@media (hover: hover) and (pointer: fine) {
    .login-scene button[data-tip],
    .login-scene a[data-tip] {
        position: relative;
    }

    .login-scene button[data-tip]:hover::after,
    .login-scene a[data-tip]:hover::after {
        content: attr(data-tip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        white-space: nowrap;
        color: #fff;
        background: rgba(34, 31, 51, .94);
        border-radius: 8px;
        box-shadow: 0 8px 18px rgba(14, 8, 30, .28);
        pointer-events: none;
        z-index: 30;
    }
}

.login-scene .captcha-refresh svg {
    width: 16px;
    height: 16px;
    transition: transform .4s ease;
}

.login-scene .captcha-refresh:hover svg {
    transform: rotate(180deg);
}

/* ---------- 用户端 / 管理端 分段选择（位于表单项上方） ---------- */

.login-scene .segmented {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 20px;
    padding: 4px;
    background: #f2f0f9;
    border-radius: 999px;
}

.login-scene .segmented-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 6px);
    height: calc(100% - 8px);
    background: var(--brand);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(83, 70, 134, .30);
    transition: transform .32s cubic-bezier(.4, 1.3, .5, 1);
}

.login-scene .segmented.is-admin .segmented-thumb {
    transform: translateX(calc(100% + 4px));
}

.login-scene .segmented label {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 0;
    font-size: 14px;
    font-weight: 500;
    color: #5d5878;
    cursor: pointer;
    transition: color .3s ease;
}

.login-scene .segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.login-scene .segmented input:checked + span {
    color: #fff;
}

.login-scene .segmented input:focus-visible + span {
    text-decoration: underline;
}

/* ---------- 记住我 / 忘记密码 ---------- */

.login-scene .form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 16px;
    font-size: 13px;
}

.login-scene .remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #55516b;
    cursor: pointer;
    user-select: none;
}

.login-scene .remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}

.login-scene .forgot-link {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
    transition: opacity .2s ease;
}

.login-scene .forgot-link:hover {
    opacity: .72;
    text-decoration: underline;
}

/* ---------- 按钮 ---------- */

.login-scene .btn-login {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    margin-bottom: 12px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(120deg, var(--brand), #6d5aa8);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .3s ease, transform .2s ease;
}

.login-scene .btn-login:hover {
    box-shadow: 0 14px 26px rgba(83, 70, 134, .34);
    transform: translateY(-1px);
}

.login-scene .btn-login:active {
    transform: translateY(0);
}

.login-scene .btn-login[disabled] {
    cursor: progress;
    opacity: .82;
}

.login-scene .btn-login .btn-label {
    display: inline-block;
    transition: transform .3s ease, opacity .3s ease;
}

.login-scene .btn-login .btn-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: var(--brand-deep);
    border-radius: 999px;
    opacity: 0;
    transition: opacity .3s ease;
}

.login-scene .btn-login .btn-hover svg {
    width: 17px;
    height: 17px;
    transition: transform .3s ease;
}

.login-scene .btn-login:hover .btn-label {
    transform: translateX(46px);
    opacity: 0;
}

.login-scene .btn-login:hover .btn-hover {
    opacity: 1;
}

.login-scene .btn-login:hover .btn-hover svg {
    transform: translateX(3px);
}

/* 次要入口：立即注册 / APP下载 / 返回主页 */
.login-scene .link-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.login-scene .btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 13px;
    font-weight: 500;
    color: #4b4763;
    text-decoration: none;
    background: #f6f5fb;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.login-scene .btn-ghost:hover {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand);
    transform: translateY(-2px);
}

.login-scene .btn-ghost svg {
    width: 14px;
    height: 14px;
    margin-right: 5px;
}

/* 在线客服 */
.login-scene .service-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    font-size: 13px;
    color: var(--ink-2);
    border-top: 1px dashed var(--line);
}

.login-scene .btn-service {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #8a6d1f;
    text-decoration: none;
    background: #fff4d6;
    border: 1.5px solid #f2d68a;
    border-radius: 999px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.login-scene .btn-service:hover {
    color: #6d5413;
    background: #ffeab3;
    transform: translateY(-1px);
}

.login-scene .btn-service svg {
    width: 15px;
    height: 15px;
}

/* 页脚备案 */
.login-scene .page-footer {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
    text-shadow: 0 1px 10px rgba(12, 6, 28, .6);
}

.login-scene .page-footer a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.login-scene .page-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ==========================================================================
   四、小人随表单状态的联动效果
   ========================================================================== */

/* 密码输入中：双手抬起捂住眼睛，嘴巴变成小小的“哦” */
.login-scene .is-covering .hand {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.login-scene .is-covering .eye {
    transform: scaleY(.08);
}

.login-scene .is-covering .mouth {
    left: calc(var(--mouth-l) + var(--mouth-w) / 2 - 8px);
    width: 16px;
    height: 13px;
    border-width: 3px;
    border-color: var(--eye-ink, #221f33);
    border-radius: 50%;
}

/* 点了小眼睛把密码显示出来：手指张开一条缝，偷看一眼 */
.login-scene .is-peeking .hand {
    opacity: 1;
}

.login-scene .is-peeking .hand-l { transform: translate(-11px, 3px) rotate(-12deg) scale(.94); }
.login-scene .is-peeking .hand-r { transform: translate(11px, 3px) rotate(12deg) scale(.94); }

.login-scene .is-peeking .eye {
    transform: scaleY(1);
}

/* 聚焦验证码：一起歪头帮你盯 */
.login-scene .is-tilt .character .body {
    transform: skewX(var(--skew, 0deg)) rotate(-4deg);
}

.login-scene .is-tilt .char-dark .body { transform: skewX(var(--skew, 0deg)) rotate(5deg); }
.login-scene .is-tilt .char-yellow .body { transform: skewX(var(--skew, 0deg)) rotate(4deg); }

/* 登录失败：摇头 + 撇嘴 */
.login-scene .is-error .eyes,
.login-scene .is-error .mouth,
.login-scene .is-error .cheek {
    animation: shakeHead .82s cubic-bezier(.36, .07, .19, .97) both;
    animation-iteration-count: 2;
}

@keyframes shakeHead {
    0%, 100% { translate: 0 0; }
    12%      { translate: -9px 0; }
    26%      { translate: 7px 0; }
    40%      { translate: -6px 0; }
    54%      { translate: 5px 0; }
    68%      { translate: -4px 0; }
    82%      { translate: 2px 0; }
}

.login-scene .is-error .mouth {
    border-bottom-color: transparent;
    border-top-color: var(--eye-ink, #221f33);
    border-radius: 999px 999px 0 0;
    height: 13px;
}

.login-scene .is-error .character {
    animation: shakeBody .82s cubic-bezier(.36, .07, .19, .97) both;
    animation-iteration-count: 2;
}

@keyframes shakeBody {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    60%      { transform: translateX(4px); }
}

/* 登录成功：一起蹦一下、举手欢呼 */
.login-scene .is-success .character {
    animation: cheerJump .62s cubic-bezier(.3, 1.4, .5, 1) both;
}

.login-scene .is-success .char-dark   { animation-delay: .08s; }
.login-scene .is-success .char-orange { animation-delay: .16s; }
.login-scene .is-success .char-yellow { animation-delay: .12s; }

@keyframes cheerJump {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-26px) scale(1.04); }
    62%  { transform: translateY(0) scale(.97); }
    80%  { transform: translateY(-8px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
}

.login-scene .is-success .arm-l { transform: rotate(-138deg); }
.login-scene .is-success .arm-r { transform: rotate(138deg); }

.login-scene .is-success .mouth,
.login-scene .is-happy .mouth {
    width: calc(var(--mouth-w) + 8px);
    height: 18px;
    left: calc(var(--mouth-l) - 4px);
    border-bottom-width: 4px;
}

/* 切到管理端：立正站好，表情严肃 */
.login-scene .is-serious .mouth {
    width: var(--mouth-w);
    height: 0;
    border-bottom-width: 3px;
    border-bottom-color: var(--eye-ink, #221f33);
    border-radius: 999px;
}

.login-scene .is-serious .cheek {
    opacity: 0;
}

/* ==========================================================================
   四·B、注册页：屏幕居中一张卡片（没有卡通小人）
   ========================================================================== */

.login-scene .centered-page {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 32px 20px;
}

/* 用 auto 外边距而不是 justify-content:center —— 内容比屏幕高时
   flex 居中会把顶部顶出可视区且滚不上去，auto 外边距没有这个问题 */
.login-scene .centered-page .ls-card {
    width: 100%;
    max-width: 520px;
    max-height: none;
    margin-top: auto;
}

.login-scene .centered-page .page-footer {
    margin-top: 14px;
    margin-bottom: auto;
}

/* ==========================================================================
   四·D、找回密码页：三步流程（步骤条 / 强度条 / 错误提示 / 成功态）
   ========================================================================== */

.login-scene .reset-card {
    max-width: 480px;
}

/* ---------- 步骤条：三个圆点 + 连接进度 ---------- */

.login-scene .reset-steps {
    position: relative;
    display: flex;
    margin: 4px 0 4px;
}

.login-scene .reset-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2;
}

/* 连接轨道：只铺在第一个圆点到第三个圆点之间，进度填充按 0/50/100% 走 */
.login-scene .reset-track {
    position: absolute;
    top: 13px;
    left: 16.666%;
    right: 16.666%;
    height: 3px;
    background: #ece9f4;
    border-radius: 99px;
    z-index: 1;
}

.login-scene .reset-track-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--brand), #6d5aa8);
    border-radius: 99px;
    transition: width .4s ease;
}

.login-scene .reset-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 13px;
    font-weight: 600;
    color: #9a95af;
    background: #f4f2fa;
    border: 2px solid #e7e4f0;
    border-radius: 50%;
    transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.login-scene .reset-label {
    font-size: 12px;
    line-height: 1.3;
    color: #9a95af;
    transition: color .3s ease;
}

/* 已走到过的步骤：填色 + 打勾 */
.login-scene .reset-step.completed .reset-dot {
    color: transparent;
    background: var(--brand);
    border-color: var(--brand);
}

.login-scene .reset-step.completed:not(.active) .reset-dot::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 11px;
    margin-top: -3px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

.login-scene .reset-step.completed .reset-label {
    color: var(--brand);
}

/* 当前步骤：更醒目（写在 completed 之后，优先级靠顺序取胜） */
.login-scene .reset-step.active .reset-dot {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), #6d5aa8);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(83, 70, 134, .34);
}

.login-scene .reset-step.active .reset-dot::after {
    content: none;
}

.login-scene .reset-step.active .reset-label {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 当前步骤的标题与说明 ---------- */

.login-scene .reset-head {
    margin: 20px 0 16px;
    text-align: center;
}

.login-scene .reset-head h3 {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.login-scene .reset-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
    word-break: break-all;
}

/* ---------- 步骤内容：同一时刻只显示一步 ---------- */

.login-scene .step-content {
    display: none;
}

.login-scene .step-content.active {
    display: block;
}

/* ---------- 验证码一行：输入框 + 重新发送 ---------- */

.login-scene .code-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-scene .code-row .control {
    flex: 1 1 auto;
    min-width: 0;
}

.login-scene .btn-send {
    flex: none;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1.5px solid #ded4f5;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
}

.login-scene .btn-send:hover:not([disabled]) {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.login-scene .btn-send[disabled] {
    color: #aaa5bd;
    background: #f4f2fa;
    border-color: #e7e4f0;
    cursor: default;
}

/* ---------- 密码强度 ---------- */

.login-scene .strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.login-scene .strength-track {
    flex: 1 1 auto;
    height: 5px;
    background: #ece9f4;
    border-radius: 99px;
    overflow: hidden;
}

.login-scene .strength-fill {
    width: 0;
    height: 100%;
    border-radius: 99px;
    transition: width .3s ease, background-color .3s ease;
}

.login-scene .strength-text {
    flex: none;
    min-width: 28px;
    font-size: 12px;
    text-align: right;
    color: var(--ink-2);
}

/* ---------- 行内错误提示（脚本用 display 控制显隐） ---------- */

.login-scene .error-message {
    display: none;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #d64545;
}

.login-scene .error-message::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #d64545;
    border-radius: 50%;
    vertical-align: -2px;
}

/* ---------- 重置成功 ---------- */

.login-scene .reset-success {
    display: none;
    padding: 8px 4px 4px;
    text-align: center;
}

.login-scene .reset-success .success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), #6d5aa8);
    border-radius: 50%;
    box-shadow: 0 12px 26px rgba(83, 70, 134, .32);
}

.login-scene .reset-success .success-icon svg {
    width: 28px;
    height: 28px;
}

.login-scene .reset-success h4 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.login-scene .reset-success p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
}

/* 按钮处于加载/禁用态时，别再叠 hover 效果 */
.login-scene .btn-login[disabled] .btn-hover,
.login-scene .btn-login[disabled]:hover .btn-hover {
    opacity: 0;
}

.login-scene .btn-login[disabled]:hover .btn-label {
    transform: none;
    opacity: 1;
}

.login-scene .btn-login[disabled]:hover {
    box-shadow: none;
    transform: none;
}

/* ==========================================================================
   四·C、注册页补充：两列字段、协议勾选、提示条、底部入口
   ========================================================================== */

/* 手机号/邮箱、登录密码/确认密码 两列并排，字段多的时候卡片才放得下 */
.login-scene .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}

/* 协议勾选 */
.login-scene .agreement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 16px;
    font-size: 12.5px;
    line-height: 1.65;
    color: #55516b;
    cursor: pointer;
}

.login-scene .agreement input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--brand);
    cursor: pointer;
}

.login-scene .agreement a {
    color: var(--brand);
    text-decoration: none;
}

.login-scene .agreement a:hover {
    text-decoration: underline;
}

/* 提示条：注册后需审核、账号自动清理 */
.login-scene .notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.65;
    color: #8a6d1f;
    background: #fff8e6;
    border: 1px solid #f3e0ab;
    border-radius: 12px;
}

.login-scene .notice svg {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
}

/* 注册功能关闭时的整块提示 */
.login-scene .notice-closed {
    margin: 6px 0 4px;
    padding: 26px 20px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: #8a6d1f;
    background: #fff8e6;
    border: 1px solid #f3e0ab;
    border-radius: 14px;
}

/* 卡片底部入口：返回登录 */
.login-scene .card-links {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-2);
}

.login-scene .card-links a {
    margin-left: 4px;
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
}

.login-scene .card-links a:hover {
    text-decoration: underline;
}

/* 注册页字段多（账号/手机号/邮箱/密码/确认密码/验证码），纵向留白再收紧一点，
   保证卡片一屏放得下、不用内部滚动 */
.register-scene .ls-card {
    padding: 24px 30px 20px;
}

.register-scene .card-head {
    margin-bottom: 12px;
}

.register-scene .card-logo {
    min-height: 38px;
    margin-bottom: 8px;
    padding: 4px 10px;
}

.register-scene .card-logo img {
    max-height: 28px;
}

.register-scene .card-head h2 {
    font-size: 21px;
}

.register-scene .field {
    margin-bottom: 11px;
}

.register-scene .control {
    height: 41px;
}

.register-scene .agreement {
    margin-bottom: 12px;
}

.register-scene .notice {
    margin-bottom: 10px;
    padding: 8px 12px;
}

.register-scene .btn-login {
    height: 46px;
    margin-bottom: 10px;
}

.register-scene .service-row {
    margin-top: 12px;
    padding-top: 11px;
}

/* ==========================================================================
   五、响应式
   ========================================================================== */

@media (max-width: 1280px) {
    .login-scene .login-page {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
        padding: 32px 36px;
    }

    .login-scene .characters-scene {
        --scene-scale: .9;
        height: 350px;
    }

    .login-scene .stage-copy h1 {
        font-size: 28px;
    }
}

@media (max-width: 1024px) {
    .login-scene .login-page {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 10px;
        padding: 26px 20px 32px;
    }

    .login-scene .stage-panel {
        min-height: 0;
        align-items: center;
        text-align: center;
    }

    .login-scene .stage-copy {
        order: -1;
    }

    .login-scene .stage-copy h1 {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .login-scene .stage-copy p {
        display: none;
    }

    .login-scene .characters-scene {
        --scene-scale: .58;
        width: 460px;
        height: 226px;
        margin: 0 auto 6px;
    }

    .login-scene .stage-tip {
        align-self: center;
    }

    .login-scene .ls-card {
        max-height: none;
        padding: 24px 22px 22px;
    }
}

/* 手机端没有位置放小人：整块场景和它的提示条一起隐藏，只留标题和登录卡片 */
@media (max-width: 768px) {
    .login-scene .characters-scene,
    .login-scene .stage-tip {
        display: none;
    }
}

@media (max-width: 560px) {
    /* 窄屏两列字段会挤，改成一行一个 */
    .login-scene .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* 手机上验证码图别缩太小，数字要看得清 */
    .login-scene .captcha-img {
        width: 112px;
    }

    .login-scene .captcha-row {
        gap: 8px;
    }

    .login-scene .link-row {
        gap: 6px;
    }

    .login-scene .btn-ghost {
        font-size: 12.5px;
    }

    .login-scene .btn-ghost svg {
        display: none;
    }
}

/* 矮屏（笔记本 768/800 高）时收紧纵向留白，保证卡片完整露出 */
@media (max-height: 880px) and (min-width: 1025px) {
    .login-scene .login-page {
        padding: 26px 48px;
    }

    .login-scene .ls-card {
        padding: 22px 30px 20px;
    }

    .login-scene .card-head {
        margin-bottom: 12px;
    }

    .login-scene .card-logo {
        min-height: 38px;
        margin-bottom: 8px;
        padding: 4px 10px;
    }

    .login-scene .card-logo img {
        max-height: 28px;
    }

    .login-scene .card-head h2 {
        font-size: 20px;
    }

    .login-scene .field {
        margin-bottom: 11px;
    }

    .login-scene .control {
        height: 41px;
    }

    .login-scene .segmented {
        margin-bottom: 15px;
    }

    .login-scene .segmented label {
        padding: 8px 0;
    }

    .login-scene .form-options {
        margin-bottom: 13px;
    }

    .login-scene .btn-login {
        height: 46px;
        margin-bottom: 10px;
    }

    .login-scene .btn-ghost {
        height: 37px;
    }

    .login-scene .service-row {
        margin-top: 12px;
        padding-top: 11px;
    }

    .login-scene .characters-scene {
        --scene-scale: .88;
        height: 330px;
    }

    .login-scene .stage-copy h1 {
        font-size: 28px;
    }

    /* 注册页字段多，矮屏再收紧一档，保证卡片不用内部滚动 */
    .register-scene .ls-card {
        max-height: calc(100vh - 84px);
        padding: 18px 28px 16px;
    }

    .register-scene .card-head {
        margin-bottom: 10px;
    }

    .register-scene .card-logo {
        min-height: 30px;
        margin-bottom: 4px;
        padding: 2px 8px;
    }

    .register-scene .card-logo img {
        max-height: 24px;
    }

    .register-scene .card-head h2 {
        font-size: 19px;
    }

    .register-scene .notice {
        margin-bottom: 8px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .register-scene .field {
        margin-bottom: 8px;
    }

    .register-scene .control {
        height: 38px;
    }

    .register-scene .agreement {
        margin-bottom: 10px;
        font-size: 12px;
    }

    .register-scene .btn-login {
        height: 43px;
        margin-bottom: 8px;
    }

    .register-scene .card-links {
        margin-top: 10px;
    }

    .register-scene .service-row {
        margin-top: 9px;
        padding-top: 9px;
    }

}

/* 尊重系统的“减弱动效”设置 */
@media (prefers-reduced-motion: reduce) {
    .login-scene .body,
    .login-scene .character,
    .login-scene .spark,
    .login-scene .stage-tip::before {
        animation: none !important;
    }
}