/* Unified mobile H5 shell — all viewports when FORCE_MOBILE_HOME_LAYOUT */
.uni-app-root.layout-mobile-home {
    --shell-vw: 100vw;
    --sub-vw: var(--shell-vw);
    --idx-vw: var(--shell-vw);
    --mkt-vw: var(--shell-vw);
    --rec-vw: var(--shell-vw);
    --assets-vw: var(--shell-vw);
    --app-bg: #f5f7f9;
    --app-card: #ffffff;
    --app-text: #24314f;
    --app-muted: #8a93a8;
    --app-blue: #2f73f6;
    --app-line: #e5ebf5;
    --app-radius: calc(16 * var(--shell-vw) / 750);
    --app-shadow: 0 calc(8 * var(--shell-vw) / 750) calc(28 * var(--shell-vw) / 750) rgba(33, 63, 124, 0.07);
    min-height: 100vh;
    background: var(--app-bg);
    color: var(--app-text);
}

html.device-pc .uni-app-root.layout-mobile-home {
    --shell-vw: min(100vw, 430px);
    background: #e8ecf2;
}

.uni-app-root.layout-mobile-home .uni-page {
    background: var(--app-bg);
    color: var(--app-text);
    padding-top: 0 !important;
    box-sizing: border-box;
}

/* Beat pc.css header offset (html.device-pc .index-page:not(:has(...))) */
html.device-pc .uni-app-root.layout-mobile-home .uni-page,
html.device-pc .uni-app-root.layout-mobile-home .index-page,
html.device-pc .uni-app-root.layout-mobile-home .index-page.index-page--exchange {
    padding-top: 0 !important;
}

html.device-pc .uni-app-root.layout-mobile-home .uni-page {
    width: min(430px, 100%);
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    box-shadow: 0 0 0 1px var(--app-line, #e5ebf5);
}

.uni-app-root.layout-mobile-home .uni-page > .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
    position: relative !important;
    box-sizing: border-box;
}

/* Index: hide legacy PC container so mobile template is visible */
.uni-app-root.layout-mobile-home .index-page--exchange > .container {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.uni-app-root.layout-mobile-home .index-page--exchange .container .banner_box,
.uni-app-root.layout-mobile-home .index-page--exchange .container .content {
    display: none !important;
}

/* Tab bar + mobile headers on PC (pc.css hides .mobile-only) */
.uni-app-root.layout-mobile-home .uni-tabbar {
    display: flex !important;
    background: #ffffff;
    border-top: 1px solid var(--app-line);
}

html.device-pc .uni-app-root.layout-mobile-home .uni-tabbar {
    left: 50%;
    right: auto;
    width: min(430px, 100%);
    transform: translateX(-50%);
}

.uni-app-root.layout-mobile-home .sub-page-header.mobile-only {
    display: flex !important;
}

.uni-app-root.layout-mobile-home .language-overlay {
    z-index: 10010;
}

html.device-pc .uni-app-root.layout-mobile-home .language-overlay {
    left: 50%;
    right: auto;
    width: min(430px, 100%);
    transform: translateX(-50%);
}

/* Record page — force mobile H5 layout (beat pc.css sidebar grid) */
html.device-pc .uni-app-root.layout-mobile-home .record-native-page {
    padding-top: 0 !important;
    padding-bottom: calc(110 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    background: var(--app-bg, #f5f7f9) !important;
}

html.device-pc .uni-app-root.layout-mobile-home .record-native-page .quotation-shell {
    display: block !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: calc(24 * var(--rec-vw, var(--shell-vw)) / 750) calc(26 * var(--rec-vw, var(--shell-vw)) / 750) calc(32 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    box-sizing: border-box !important;
}

html.device-pc .uni-app-root.layout-mobile-home .record-native-page .quotation-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-column: unset !important;
    grid-row: unset !important;
    align-items: center !important;
    align-self: stretch !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 calc(20 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    padding: calc(6 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    gap: calc(8 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    border-radius: calc(999 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    background: var(--app-blue-soft, #eef3ff) !important;
    border: 1px solid var(--app-line, #e5ebf5) !important;
    box-shadow: none !important;
    overflow-x: auto;
}

html.device-pc .uni-app-root.layout-mobile-home .record-native-page .quotation-tab {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: calc(52 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    padding: 0 calc(12 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    border: 0 !important;
    border-radius: calc(999 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    background: transparent !important;
    color: var(--app-muted, #8a93a8) !important;
    font-size: calc(24 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: normal !important;
    box-shadow: none !important;
}

html.device-pc .uni-app-root.layout-mobile-home .record-native-page .quotation-tab:hover {
    background: transparent !important;
    color: var(--app-muted, #8a93a8) !important;
}

html.device-pc .uni-app-root.layout-mobile-home .record-native-page .quotation-tab.active {
    color: #ffffff !important;
    background: var(--app-blue, #2f73f6) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-left: calc(12 * var(--rec-vw, var(--shell-vw)) / 750) !important;
}

html.device-pc .uni-app-root.layout-mobile-home .record-native-page .order-page-main-tabs,
html.device-pc .uni-app-root.layout-mobile-home .record-native-page .quotation-empty,
html.device-pc .uni-app-root.layout-mobile-home .record-native-page .order-trade-card,
html.device-pc .uni-app-root.layout-mobile-home .record-native-page .fund-order-card {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

html.device-pc .uni-app-root.layout-mobile-home .record-native-page .quotation-empty {
    display: block !important;
    padding: calc(40 * var(--rec-vw, var(--shell-vw)) / 750) calc(18 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    border-radius: calc(14 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    background: #ffffff !important;
    color: var(--app-muted, #8a93a8) !important;
    font-size: calc(26 * var(--rec-vw, var(--shell-vw)) / 750) !important;
    border: 1px solid var(--app-line, #e5ebf5) !important;
    box-shadow: 0 calc(8 * var(--rec-vw, var(--shell-vw)) / 750) calc(28 * var(--rec-vw, var(--shell-vw)) / 750) rgba(33, 63, 124, 0.07) !important;
}

html.device-pc .uni-app-root.layout-mobile-home .recharge-page .quotation-shell,
html.device-pc .uni-app-root.layout-mobile-home .recharge-page .recharge-pc-body {
    display: block !important;
    grid-template-columns: none !important;
    max-width: none !important;
}

html.device-pc .uni-app-root.layout-mobile-home .recharge-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .recharge-detail-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .withdrawal-page .sub-page-header {
    display: flex !important;
}

html.device-pc .uni-app-root.layout-mobile-home .fund-page.uni-page,
html.device-pc .uni-app-root.layout-mobile-home .recharge-page.sub-page,
html.device-pc .uni-app-root.layout-mobile-home .withdrawal-page.sub-page,
html.device-pc .uni-app-root.layout-mobile-home .record-native-page,
html.device-pc .uni-app-root.layout-mobile-home .user-page.uni-page,
html.device-pc .uni-app-root.layout-mobile-home .market-page.uni-page,
html.device-pc .uni-app-root.layout-mobile-home .spot-page.uni-page {
    padding-top: 0 !important;
    background: var(--app-bg, #f5f7f9) !important;
}

/* Scale vw-based spacing to shell width (not full browser viewport) */
.uni-app-root.layout-mobile-home .uni-page {
    padding-bottom: calc(var(--shell-vw) * 100 / 750) !important;
}

.uni-app-root.layout-mobile-home .uni-tabbar {
    padding: calc(8 * var(--shell-vw) / 750) 0 calc(16 * var(--shell-vw) / 750) !important;
    padding-bottom: calc(16 * var(--shell-vw) / 750 + env(safe-area-inset-bottom, 0px)) !important;
}

.uni-app-root.layout-mobile-home .uni-tabbar-item {
    font-size: calc(20 * var(--shell-vw) / 750) !important;
}

.uni-app-root.layout-mobile-home .uni-tabbar-item img {
    width: calc(48 * var(--shell-vw) / 750) !important;
    height: calc(48 * var(--shell-vw) / 750) !important;
    margin: 0 auto calc(4 * var(--shell-vw) / 750) !important;
}

/* Neutralize pc.css desktop-only visibility inside H5 shell */
html.device-pc .uni-app-root.layout-mobile-home .pc-only {
    display: none !important;
}

html.device-pc .uni-app-root.layout-mobile-home .uni-page > .container {
    height: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Sub-pages: force mobile layout on PC (beat pc.css per-page rules) ── */
html.device-pc .uni-app-root.layout-mobile-home .uni-page.sub-page {
    padding-top: 0 !important;
    min-height: 100vh !important;
    background: var(--app-bg, #f5f7f9) !important;
}

html.device-pc .uni-app-root.layout-mobile-home .sub-page > .container,
html.device-pc .uni-app-root.layout-mobile-home .uni-page.sub-page > .container {
    top: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: calc(24 * var(--sub-vw, var(--shell-vw)) / 750) !important;
    padding-left: calc(26 * var(--sub-vw, var(--shell-vw)) / 750) !important;
    padding-right: calc(26 * var(--sub-vw, var(--shell-vw)) / 750) !important;
}

html.device-pc .uni-app-root.layout-mobile-home .mobile-only.sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .sub-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .recharge-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .recharge-detail-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .withdrawal-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .fund-custody-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .about-us-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .sign-in-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .personal-info-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .wallet-address-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .bank-bind-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .security-settings-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .change-pwd-page .sub-page-header,
html.device-pc .uni-app-root.layout-mobile-home .placeholder-page .sub-page-header {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff !important;
    color: var(--app-text, #24314f) !important;
    border-bottom: 1px solid var(--app-line, #e5ebf5);
    box-shadow: none !important;
    min-height: auto;
}

html.device-pc .uni-app-root.layout-mobile-home .sub-page-header .sub-back,
html.device-pc .uni-app-root.layout-mobile-home .sub-page-header .sub-page-title,
html.device-pc .uni-app-root.layout-mobile-home .sub-page-header .sub-page-action {
    color: var(--app-text, #24314f) !important;
}

html.device-pc .uni-app-root.layout-mobile-home .wallet-address-page.sub-page,
html.device-pc .uni-app-root.layout-mobile-home .recharge-detail-page.sub-page,
html.device-pc .uni-app-root.layout-mobile-home .fund-custody-page.sub-page,
html.device-pc .uni-app-root.layout-mobile-home .about-us-page.sub-page,
html.device-pc .uni-app-root.layout-mobile-home .sign-in-page.sub-page,
html.device-pc .uni-app-root.layout-mobile-home .login-page.uni-page,
html.device-pc .uni-app-root.layout-mobile-home .register-page.uni-page,
html.device-pc .uni-app-root.layout-mobile-home .reset-pwd-page.uni-page {
    padding-top: 0 !important;
    min-height: 100vh !important;
    background: var(--app-bg, #f5f7f9) !important;
}

html.device-pc .uni-app-root.layout-mobile-home .login-page.uni-page,
html.device-pc .uni-app-root.layout-mobile-home .register-page.uni-page,
html.device-pc .uni-app-root.layout-mobile-home .reset-pwd-page.uni-page {
    display: block !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

html.device-pc .uni-app-root.layout-mobile-home .login-page .login-pc-wrap,
html.device-pc .uni-app-root.layout-mobile-home .register-page .login-pc-wrap {
    padding: 0 !important;
}

/* Sub-page headers: in-flow (not fixed) so PC shell has no phantom top gap */
.uni-app-root.layout-mobile-home .sub-page-header,
.uni-app-root.layout-mobile-home .wallet-address-header,
.uni-app-root.layout-mobile-home .wd-header,
.uni-app-root.layout-mobile-home .faq-header,
.uni-app-root.layout-mobile-home .borrowing-header,
.uni-app-root.layout-mobile-home .compliance-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: calc(88 * var(--shell-vw) / 750) !important;
    height: calc(88 * var(--shell-vw) / 750) !important;
    padding: env(safe-area-inset-top, 0) calc(24 * var(--shell-vw) / 750) 0 !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    align-items: center !important;
    box-shadow: none !important;
}

/* shell.css uses 100vw — on PC that blows up header text; scale to phone shell */
.uni-app-root.layout-mobile-home .sub-page-header .sub-back {
    font-size: calc(44 * var(--shell-vw) / 750) !important;
    line-height: 1 !important;
    padding: calc(8 * var(--shell-vw) / 750) calc(16 * var(--shell-vw) / 750) calc(8 * var(--shell-vw) / 750) 0 !important;
}

.uni-app-root.layout-mobile-home .sub-page-header .sub-page-title {
    flex: 1 !important;
    min-width: 0 !important;
    margin-left: calc(4 * var(--shell-vw) / 750) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: calc(32 * var(--shell-vw) / 750) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.uni-app-root.layout-mobile-home .sub-page-header .sub-page-action {
    font-size: calc(34 * var(--shell-vw) / 750) !important;
    line-height: 1 !important;
    padding: calc(8 * var(--shell-vw) / 750) !important;
}

.uni-app-root.layout-mobile-home .wallet-address-header .wallet-address-filter {
    font-size: calc(24 * var(--shell-vw) / 750) !important;
    padding: calc(8 * var(--shell-vw) / 750) calc(20 * var(--shell-vw) / 750) !important;
    border-radius: calc(999 * var(--shell-vw) / 750) !important;
    flex-shrink: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Beat pc.css html.device-pc .mobile-only { display: none } */
@media screen and (min-width: 992px) {
    html.device-pc .uni-app-root.layout-mobile-home .uni-tabbar.mobile-only,
    html.device-pc .uni-app-root.layout-mobile-home header.mobile-only,
    html.device-pc .uni-app-root.layout-mobile-home .sub-page-header.mobile-only,
    html.device-pc .uni-app-root.layout-mobile-home .wd-header.mobile-only,
    html.device-pc .uni-app-root.layout-mobile-home .faq-header.mobile-only,
    html.device-pc .uni-app-root.layout-mobile-home .borrowing-header.mobile-only,
    html.device-pc .uni-app-root.layout-mobile-home .compliance-header.mobile-only,
    html.device-pc .uni-app-root.layout-mobile-home .fund-mining-header.mobile-only {
        display: flex !important;
    }

    html.device-pc .uni-app-root.layout-mobile-home .recharge-page.sub-page,
    html.device-pc .uni-app-root.layout-mobile-home .recharge-detail-page.sub-page {
        padding-top: 0 !important;
        background: var(--app-bg, #f5f7f9) !important;
    }

    html.device-pc .uni-app-root.layout-mobile-home .recharge-page .sub-page-header,
    html.device-pc .uni-app-root.layout-mobile-home .recharge-detail-page .sub-page-header {
        display: flex !important;
    }

    html.device-pc .uni-app-root.layout-mobile-home .recharge-page .container,
    html.device-pc .uni-app-root.layout-mobile-home .recharge-detail-page .container {
        padding-top: calc(24 * var(--sub-vw, var(--shell-vw)) / 750) !important;
        padding-bottom: calc(40 * var(--sub-vw, var(--shell-vw)) / 750) !important;
    }
}