:root {
    --mobile-canvas-width: 480px;
    --mobile-canvas-gutter: 0px;
}

html {
    min-height: 100%;
    overflow-x: hidden;
    background: #e9edf3;
}

body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    background: #f7f7f9;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

#app,
uni-app,
uni-page,
uni-page-wrapper,
uni-page-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.login .top-img {
    display: block;
    max-width: 100%;
}

.login {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Keep fixed mobile navigation above iOS/Android gesture areas. */
.tabbar,
.footer {
    box-sizing: content-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Financial entry points stay hidden while the fail-closed payment switch is off. */
.recharge-box {
    display: none !important;
}

html.mobile-canvas-desktop body {
    max-width: var(--mobile-canvas-width);
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 0 28px rgba(25, 39, 65, 0.16);
}

@media (min-width: 481px) {
    html.mobile-canvas-desktop {
        --mobile-canvas-gutter: calc((100vw - var(--mobile-canvas-width)) / 2);
        --window-left: var(--mobile-canvas-gutter) !important;
        --window-right: var(--mobile-canvas-gutter) !important;
        --window-margin: var(--mobile-canvas-gutter) !important;
    }

    html.mobile-canvas-desktop .u-navbar-fixed,
    html.mobile-canvas-desktop .tabbar,
    html.mobile-canvas-desktop .footer,
    html.mobile-canvas-desktop .guide .sign-btn-box,
    html.mobile-canvas-desktop .confirm_btn,
    html.mobile-canvas-desktop .w-picker .mask,
    html.mobile-canvas-desktop .w-picker .w-picker-cnt,
    html.mobile-canvas-desktop .recharge-box .envelope-gif,
    html.mobile-canvas-desktop .recharge-box .mask-box,
    html.mobile-canvas-desktop .u-drawer,
    html.mobile-canvas-desktop .u-mask,
    html.mobile-canvas-desktop .uni-system-preview-image,
    html.mobile-canvas-desktop .uni-picker-container,
    html.mobile-canvas-desktop .uni-picker-container .uni-picker-custom {
        right: var(--mobile-canvas-gutter) !important;
        left: var(--mobile-canvas-gutter) !important;
        width: auto !important;
        max-width: none !important;
    }

    html.mobile-canvas-desktop uni-actionsheet .uni-actionsheet {
        right: calc(var(--mobile-canvas-gutter) + 6px) !important;
        left: calc(var(--mobile-canvas-gutter) + 6px) !important;
    }

    html.mobile-canvas-desktop .hb .hongbao,
    html.mobile-canvas-desktop .kefu {
        right: calc(var(--mobile-canvas-gutter) + 12px) !important;
    }
}