/* PC 端居中显示 H5 手机壳，两侧深色留白 */
:root {
    --h5-shell-width: 430px;
    --h5-shell-outer-bg: #1f2937;
}

@media (min-width: 768px) {
    html {
        background: var(--h5-shell-outer-bg);
    }

    body.bg-custom,
    body.overlay,
    body.h5-shell {
        width: 100%;
        max-width: var(--h5-shell-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: 100vh;
        background-attachment: scroll !important;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.05),
            0 18px 60px rgba(0, 0, 0, 0.42);
        overflow-x: hidden;
        position: relative;
    }

    body.bg-custom::before {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100%;
    }

    body.bg-custom > *:not(footer):not(#customerServiceFloat):not(.login-success-backdrop):not(.credit-modal):not(.fixed) {
        position: relative;
        z-index: 1;
    }

    body > footer,
    footer.fixed,
    footer[class*="fixed"] {
        position: fixed !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: var(--h5-shell-width) !important;
        max-width: 100% !important;
        z-index: 10 !important;
    }

    #customerServiceFloat {
        position: fixed !important;
    }

    .home-header {
        width: 100%;
    }

    #customerServiceFloat {
        right: auto !important;
        left: calc(50% + (var(--h5-shell-width) / 2) - 90px) !important;
    }

    .login-success-backdrop {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: var(--h5-shell-width) !important;
        max-width: 100% !important;
    }

    .language-btn,
    .language-switcher {
        right: calc(50% - (var(--h5-shell-width) / 2) + 16px) !important;
    }
}