@charset "UTF-8";

:root {
    --account-ink: #12233f;
    --account-muted: #6b7b92;
    --account-line: #dfe7f2;
    --account-brand: #466ef1;
    --account-accent: #29c5b6;
    --account-brand-bg: #eef4ff;
}

/* 账户页面基础布局：左侧统一展示平台能力，右侧承载登录或注册表单。 */
html,
body.account-page {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
}

body.account-page {
    overflow-x: hidden;
    color: var(--account-ink);
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    background: var(--account-brand-bg);
}

.account-page .wrap {
    display: flex;
    width: 100%;
    min-height: 100vh;
    height: auto;
    justify-content: flex-start;
    overflow: hidden;
    background: var(--account-brand-bg);
}

.account-page .card {
    order: 1;
    flex: 0 0 38%;
    width: 38%;
    min-width: 360px;
    min-height: 100vh;
    padding: clamp(32px, 4vw, 64px);
    box-sizing: border-box;
    color: var(--account-ink);
    background-color: var(--account-brand-bg) !important;
}

.account-page .container-box {
    order: 2;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 100vh;
    padding: 48px clamp(48px, 9vw, 160px);
    box-sizing: border-box;
    border-radius: 50px 0 0 50px;
    background: #fff;
}

.account-page .container {
    position: static;
    width: min(100%, 450px);
    margin: 0;
}

.account-page.register-page .container {
    width: min(100%, 500px);
}

/* 品牌宣传区域：保留后台可配置背景色，并使用新卡片呈现平台能力。 */
.account-page .card-box.account-brand {
    display: flex;
    width: 100%;
    min-height: calc(100vh - clamp(64px, 8vw, 128px));
    align-items: stretch;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible;
}

.account-page .display-booth {
    z-index: 1;
    width: 100%;
    max-width: 540px;
    margin: 48px 0;
    padding: 0;
}

.account-brand-eyebrow {
    margin: 0 0 20px;
    color: var(--account-brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.account-page .display-booth h1 {
    max-width: 420px;
    margin: 0;
    color: var(--account-ink);
    font-size: clamp(36px, 3.4vw, 52px);
    line-height: 1.18;
    letter-spacing: -1.5px;
}

.account-brand-summary {
    max-width: 390px;
    margin: 24px 0 0;
    color: var(--account-muted);
    font-size: 15px;
    line-height: 1.8;
}

/* 登录页多端能力说明：保持纯文字层级，不使用卡片容器或装饰背景。 */
.account-brand-platform-copy {
    display: none;
    max-width: 500px;
    margin-top: 20px;
}

.login-page .account-brand-platform-copy {
    display: block;
}

.account-brand-platform-copy strong {
    display: block;
    margin-bottom: 6px;
    color: #25466f;
    font-size: 15px;
    line-height: 1.6;
}

.account-brand-platform-copy p {
    margin: 0;
    color: var(--account-muted);
    font-size: 13px;
    line-height: 1.75;
}

/* 登录页订单看板：仅展示静态经营示意，复用品牌色并避免引入图表依赖。 */
.account-order-dashboard {
    position: relative;
    display: none;
    width: 100%;
    max-width: 540px;
    margin-top: 24px;
    padding: 12px 5px 17px;
    box-sizing: border-box;
}

.login-page .account-order-dashboard {
    display: block;
}

.login-page .account-feature-card {
    display: none;
}

.account-order-window {
    display: flex;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border: 8px solid rgba(255, 255, 255, .82);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 52px rgba(34, 80, 143, .14);
    transform: rotate(-1deg);
}

.account-order-sidebar {
    display: flex;
    flex: 0 0 50px;
    width: 50px;
    padding: 18px 0;
    align-items: center;
    flex-direction: column;
    gap: 19px;
    background: #f3f6fc;
}

.account-order-sidebar-logo {
    display: flex;
    width: 20px;
    height: 21px;
    margin-bottom: 5px;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.account-order-sidebar-logo i {
    width: 5px;
    border-radius: 3px 3px 1px 1px;
    background: var(--account-brand);
    transform: skewY(-18deg);
}

.account-order-sidebar-logo i:nth-child(1) {
    height: 10px;
}

.account-order-sidebar-logo i:nth-child(2) {
    height: 15px;
}

.account-order-sidebar-logo i:nth-child(3) {
    height: 20px;
}

.account-order-side-dot {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #dce4f0;
}

.account-order-side-dot.active {
    position: relative;
    background: #dce7ff;
}

.account-order-side-dot.active::after {
    position: absolute;
    inset: 5px;
    content: "";
    border-radius: 2px;
    background: var(--account-brand);
}

.account-order-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 17px 20px 16px;
}

.account-order-topbar,
.account-order-heading,
.account-order-chart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.account-order-topbar {
    padding-bottom: 15px;
    border-bottom: 1px solid #edf1f7;
    color: var(--account-ink);
    font-size: 12px;
}

.account-order-topbar > span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e4eaf3;
}

.account-order-heading {
    padding: 16px 0 14px;
}

.account-order-heading small,
.account-order-chart-heading small {
    display: block;
    color: #8593a8;
    font-size: 9px;
    line-height: 1.5;
}

.account-order-heading strong {
    display: block;
    color: #1e304b;
    font-size: 15px;
    line-height: 1.5;
}

.account-order-heading > span {
    padding: 6px 9px;
    border-radius: 5px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    background: var(--account-brand);
}

.account-order-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.account-order-metric {
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #e6ecf5;
    border-radius: 7px;
}

.account-order-metric small {
    display: block;
    overflow: hidden;
    color: #8290a5;
    font-size: 9px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-order-metric strong {
    display: block;
    margin: 1px 0;
    color: var(--account-ink);
    font-size: 19px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.account-order-metric span {
    color: #2e9d6c;
    font-size: 9px;
    line-height: 1.4;
}

.account-order-chart {
    margin-top: 10px;
    padding: 11px 11px 8px;
    border: 1px solid #e6ecf5;
    border-radius: 7px;
}

.account-order-chart-heading strong {
    display: block;
    color: #263852;
    font-size: 11px;
    line-height: 1.5;
}

.account-order-chart-heading > span {
    color: #8e9aae;
    font-size: 11px;
    letter-spacing: 1px;
}

.account-order-chart svg {
    display: block;
    width: 100%;
    margin-top: 5px;
}

.account-order-grid-line {
    fill: none;
    stroke: #edf1f6;
    stroke-width: 1;
}

.account-order-chart-line {
    fill: none;
    stroke: var(--account-brand);
    stroke-width: 3;
    stroke-linecap: round;
}

.account-order-chart-point {
    fill: #fff;
    stroke: var(--account-brand);
    stroke-width: 3;
}

.account-order-chart-days {
    display: flex;
    color: #95a0b1;
    font-size: 8px;
    justify-content: space-between;
}

.account-order-floating-card {
    position: absolute;
    z-index: 2;
    display: flex;
    padding: 10px 12px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(221, 229, 240, .92);
    border-radius: 9px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 26px rgba(30, 65, 120, .15);
}

.account-order-floating-card small,
.account-order-floating-card strong {
    display: block;
    line-height: 1.4;
}

.account-order-floating-card small {
    color: #7b899f;
    font-size: 9px;
}

.account-order-floating-card strong {
    color: #1e304b;
    font-size: 11px;
}

.account-order-completed-card {
    bottom: 0;
    left: -10px;
}

.account-order-growth-card {
    top: -3px;
    right: -8px;
}

.account-order-check,
.account-order-growth-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.account-order-check {
    color: #2e9d6c;
    background: #e3f5ec;
}

.account-order-growth-icon {
    color: #e56a2e;
    background: #fdf0e8;
}

.account-feature-card {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 13px;
    max-width: 390px;
    margin-top: 22px;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid rgba(70, 110, 241, .12);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 26px rgba(34, 80, 143, .06);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.account-feature-card:hover {
    border-color: rgba(70, 110, 241, .28);
    background: #fff;
    box-shadow: 0 16px 34px rgba(34, 80, 143, .14);
    transform: translateY(-5px);
}

.account-feature-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    color: var(--account-brand);
    background: #dceaff;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .3s ease, background-color .3s ease;
}

.account-feature-card:hover .account-feature-icon {
    color: #fff;
    background: var(--account-brand);
    transform: translateY(-2px) scale(1.08);
}

.account-feature-card strong {
    display: block;
    margin-bottom: 5px;
    color: #25466f;
    font-size: 15px;
}

.account-feature-card p {
    margin: 0;
    color: var(--account-muted);
    font-size: 13px;
    line-height: 1.65;
}

.account-brand-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #53657f;
    font-size: 12px;
}

.account-brand-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.account-brand-trust b {
    display: inline-grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    background: var(--account-brand);
}

/* 旧动态图节点继续保留给既有脚本使用，新布局中不重复展示该视觉。 */
.account-page .pic1 {
    display: none !important;
}

/* 表单主体：登录和注册复用尺寸、边框、状态及操作反馈。 */
.account-page .register-box {
    position: static;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.account-heading {
    margin-bottom: 24px;
}

.account-heading h1 {
    margin: 0;
    color: var(--account-ink);
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -.8px;
}

.account-heading p {
    margin: 12px 0 0;
    color: var(--account-muted);
    font-size: 14px;
}

.account-page .reg-form {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 !important;
}

.account-page .reg-form .cell {
    position: relative;
    height: auto;
    margin-bottom: 19px;
    border: 0;
}

.account-page .reg-form .cell label {
    position: static;
    display: block;
    margin-bottom: 9px;
    padding: 0;
    color: #34435b;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.account-page .reg-form .cell input {
    position: static;
    width: 100%;
    height: 52px;
    padding: 0 16px 0 48px;
    box-sizing: border-box;
    border: 1px solid var(--account-line);
    border-radius: 12px;
    outline: none;
    color: var(--account-ink);
    font-size: 15px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

/* 密码显隐按钮：覆盖在输入框右侧，不改变表单字段尺寸及提交行为。 */
.account-page .reg-form .password-item input {
    padding-right: 52px;
}

.account-page .reg-form .password-toggle {
    position: absolute;
    z-index: 3;
    right: 15px;
    bottom: 16px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238292aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.account-page .reg-form .password-toggle:hover,
.account-page .reg-form .password-toggle:focus-visible {
    filter: brightness(.75);
}

.account-page .reg-form .password-toggle.is-visible {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23466ef1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.7a2 2 0 0 0 2.7 2.7'/%3E%3Cpath d='M9.9 5.2A10.8 10.8 0 0 1 12 5c6.5 0 10 7 10 7a17.7 17.7 0 0 1-2.2 3.1M6.6 6.6C3.6 8.3 2 12 2 12s3.5 7 10 7a10.4 10.4 0 0 0 4.1-.8'/%3E%3C/svg%3E");
}

/* 表单字段图标：仅增强输入识别，不改变现有字段、ID 或登录注册事件。 */
.account-page .reg-form .mobile-item::before,
.account-page .reg-form .register-mobile-item::before,
.account-page .reg-form .username-item::before,
.account-page .reg-form .inviter-item::before,
.account-page .reg-form .password-item::before,
.account-page .reg-form .register-code-item::before {
    position: absolute;
    z-index: 2;
    top: 44px;
    left: 16px;
    width: 20px;
    height: 20px;
    content: "";
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.account-page .reg-form .mobile-item::before,
.account-page .reg-form .register-mobile-item::before,
.account-page .reg-form .username-item::before,
.account-page .reg-form .inviter-item::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238292aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.account-page .reg-form .password-item::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238292aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.account-page .reg-form .register-code-item::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238292aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m7 9 2 2-2 2m5 0h5'/%3E%3C/svg%3E");
}

.account-page .reg-form .cell input::placeholder {
    color: #a1afc2;
}

.account-page .reg-form .cell input:focus {
    border-color: var(--account-brand);
    box-shadow: 0 0 0 4px rgba(70, 110, 241, .12);
}

.account-page #error-box {
    width: 100%;
    min-height: 20px;
    height: auto;
    margin: -4px 0 8px;
    color: var(--account-brand);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

/* 错误提示更新时轻微横向抖动，帮助用户快速定位校验结果。 */
.account-page #error-box.is-shaking {
    animation: account-error-shake .52s cubic-bezier(.36, .07, .19, .97);
}

@keyframes account-error-shake {
    0%, 100% {
        transform: translateX(0);
    }

    15%, 45%, 75% {
        transform: translateX(-10px);
    }

    30%, 60%, 90% {
        transform: translateX(10px);
    }
}

.account-page .reg-form .bottom {
    height: auto;
}

.account-page .reg-form .bottom .button {
    display: grid;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    background: var(--account-brand);
    box-shadow: 0 12px 24px rgba(70, 110, 241, .26);
    transition: transform .18s ease, box-shadow .18s ease;
}

.account-page .reg-form .bottom .button:hover {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 15px 28px rgba(70, 110, 241, .32);
    transform: translateY(-1px);
}

/* 登录提交中禁止再次点击，视觉状态与 login.js 的请求锁保持一致。 */
.account-page .reg-form .bottom .button.is-login-pending {
    pointer-events: none;
    cursor: wait;
    opacity: .72;
    transform: none;
    box-shadow: 0 8px 18px rgba(70, 110, 241, .2);
}

.account-page .go-reg,
.account-page .login-box .go-reg {
    position: static;
    margin: 0 0 22px;
    color: var(--account-muted);
    font-size: 13px;
    text-align: right;
}

.account-page .go-reg a {
    color: var(--account-brand);
    font-weight: 600;
}

.account-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
    color: #8c9ab0;
    font-size: 12px;
}

.account-security-note svg {
    width: 15px;
    height: 15px;
    color: var(--account-accent);
}

.account-copyright {
    margin: 48px 0 0;
    color: #9aa8bb;
    font-size: 12px;
    text-align: center;
}

/* 登录身份切换：继续由既有 login.js 切换 active，只用 CSS 增加跟随底板。 */
.account-page .login-box .tab-box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 26px;
    padding: 4px;
    border-radius: 12px;
    overflow: visible;
    list-style: none;
    background: #edf2f9;
    isolation: isolate;
}

.account-page .login-box .tab-box li {
    position: relative;
    z-index: 1;
    float: none;
    width: auto;
    height: 38px;
    border-radius: 9px;
    color: #71819a;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    background: transparent;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.account-page .login-box .tab-box li:first-child,
.account-page .login-box .tab-box li:last-child {
    border-radius: 9px;
}

.account-page .login-box .tab-box li.active {
    color: var(--account-brand);
    background: #fff;
    box-shadow: 0 2px 7px rgba(40, 64, 101, .12);
}

.account-page .login-box .tab-box li:hover {
    color: var(--account-brand);
    background: rgba(255, 255, 255, .45);
}

@supports selector(.tab-box:has(li.active)) {
    .account-page .login-box .tab-box::before {
        position: absolute;
        z-index: 0;
        top: 4px;
        left: 4px;
        width: calc((100% - 12px) / 2);
        height: calc(100% - 8px);
        content: "";
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 2px 7px rgba(40, 64, 101, .12);
        transition: left .55s cubic-bezier(.22, 1, .36, 1);
    }

    .account-page .login-box .tab-box:has(li:nth-child(2).active)::before {
        left: calc(50% + 2px);
    }

    .account-page .login-box .tab-box li.active {
        background: transparent;
        box-shadow: none;
    }
}

/* 注册验证码：保持既有发送按钮和倒计时 ID，仅调整到输入框内部右侧。 */
.account-page .reg-form .vcode input {
    width: 100%;
    padding-right: 145px;
}

.account-page .reg-form .vcode .mo-send-code-btn {
    top: 38px;
    right: 8px;
    bottom: auto;
    padding: 0 8px;
    color: var(--account-brand);
    line-height: 34px;
}

.account-page .reg-form .vcode .mo-send-code-btn-dis {
    color: #8eb4cb;
}

/* 本地开发测试账号：保留服务端环境控制与原点击逻辑，仅改善大量入口的可读性。 */
.local-test-accounts {
    margin-top: 24px;
    padding: 14px;
    border: 1px dashed #c9d8ee;
    border-radius: 12px;
    background: #f8fbff;
}

.local-test-accounts::before {
    display: block;
    margin-bottom: 9px;
    color: #71819a;
    font-size: 12px;
    content: "本地开发快捷登录";
}

.local-test-accounts .testLogin {
    display: inline-flex;
    margin: 3px;
    padding: 5px 8px;
    border-radius: 7px;
    color: #3f5f88;
    font-size: 12px;
    background: #eaf2ff;
}

.local-test-accounts .testLogin:hover {
    color: var(--account-brand);
    text-decoration: none;
    background: #dceaff;
}

.wx-work-login {
    margin-top: 24px;
    text-align: center;
}

/* 较矮桌面窗口优先保证左侧信息完整，正常高度仍使用 540px 大尺寸看板。 */
@media (min-width: 901px) and (max-height: 850px) {
    .account-page .card {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .account-page .card-box.account-brand {
        min-height: calc(100vh - 48px);
    }

    .account-page .display-booth {
        max-width: 460px;
        margin: 0;
    }

    .account-brand-eyebrow {
        margin-bottom: 12px;
    }

    .account-page .display-booth h1 {
        font-size: 36px;
    }

    .account-brand-summary {
        margin-top: 14px;
    }

    .account-brand-platform-copy {
        margin-top: 12px;
    }

    .account-order-dashboard {
        max-width: 460px;
        margin-top: 16px;
    }
}

/* 中等宽度下压缩看板内部密度，避免左侧栏刚显示时订单文案被过度换行。 */
@media (min-width: 901px) and (max-width: 1100px) {
    .account-order-dashboard {
        margin-top: 26px;
        padding: 10px 4px 14px;
    }

    .account-order-window {
        border-width: 7px;
        border-radius: 16px;
    }

    .account-order-sidebar {
        flex-basis: 42px;
        width: 42px;
        padding: 15px 0;
        gap: 16px;
    }

    .account-order-content {
        padding: 14px 16px 13px;
    }

    .account-order-topbar {
        padding-bottom: 12px;
        font-size: 10px;
    }

    .account-order-heading {
        padding: 13px 0 11px;
    }

    .account-order-heading small,
    .account-order-chart-heading small,
    .account-order-heading > span,
    .account-order-metric small,
    .account-order-metric span {
        font-size: 7px;
    }

    .account-order-heading strong {
        font-size: 12px;
    }

    .account-order-heading > span {
        padding: 5px 7px;
    }

    .account-order-metrics {
        gap: 7px;
    }

    .account-order-metric {
        padding: 8px;
    }

    .account-order-metric strong {
        font-size: 15px;
    }

    .account-order-chart {
        margin-top: 8px;
        padding: 9px 9px 6px;
    }

    .account-order-chart-heading strong,
    .account-order-chart-heading > span {
        font-size: 9px;
    }

    .account-order-chart-days {
        font-size: 6px;
    }

    .account-order-floating-card {
        padding: 8px 10px;
    }

    .account-order-floating-card small {
        font-size: 7px;
    }

    .account-order-floating-card strong {
        font-size: 9px;
    }
}

/* 小屏幕只显示操作区域，避免宣传内容压缩表单宽度。 */
@media (max-width: 900px) {
    .account-page .card {
        display: none;
    }

    .account-page .container-box {
        width: 100%;
        min-height: 100vh;
        padding: 32px 24px;
        border-radius: 0;
    }

    .account-page .container,
    .account-page.register-page .container {
        width: min(100%, 500px) !important;
    }

    /* 覆盖旧版移动端按钮的 60% 宽度，并确保内边距计入容器宽度。 */
    .account-page .reg-form .bottom .button {
        width: 100% !important;
        margin: 0;
        box-sizing: border-box;
    }

    .account-heading h1 {
        font-size: 27px;
    }
}

@media (max-width: 420px) {
    .account-page .container-box {
        padding: 28px 20px;
    }

    .account-page .reg-form .vcode input {
        padding-right: 124px;
    }

    .account-page .reg-form .vcode .mo-send-code-btn {
        font-size: 12px;
    }
}