:root {
  --pc-mobile-frame-width: 520px;
  --pc-mobile-frame-scale: 1;
  --pc-mobile-frame-bg: #e8eef5;
  --pc-mobile-frame-page-bg: #020817;
  --tg-bottom-nav-height: 1.08rem;
  --tg-bottom-nav-gap: 0.5rem;
}

html body #app .tg-float,
html body uni-app .tg-float,
html body .tg-float.tg-float {
  bottom: calc(var(--tg-bottom-nav-height) + var(--tg-bottom-nav-gap)) !important;
  bottom: calc(var(--tg-bottom-nav-height) + var(--tg-bottom-nav-gap) + constant(safe-area-inset-bottom)) !important;
  bottom: calc(var(--tg-bottom-nav-height) + var(--tg-bottom-nav-gap) + env(safe-area-inset-bottom)) !important;
  z-index: 999 !important;
}

@media (min-width: 521px) {
  html {
    font-size: 52.26px !important;
    --tg-bottom-nav-height: 48px;
    --tg-bottom-nav-gap: 14px;
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: var(--pc-mobile-frame-bg) !important;
  }

  #app,
  body > uni-app {
    width: min(100vw, var(--pc-mobile-frame-width)) !important;
    max-width: var(--pc-mobile-frame-width) !important;
    min-height: 100vh !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    overflow-x: hidden !important;
    background: var(--pc-mobile-frame-page-bg) !important;
    box-shadow: 0 0 32px rgba(8, 18, 38, 0.16) !important;
    transform: none !important;
    transform-origin: top center !important;
  }

  #app > div,
  #app uni-page,
  #app uni-page-wrapper,
  #app uni-page-body,
  body > uni-page,
  body > uni-page-wrapper,
  body > uni-page-body,
  .uni-page-wrapper,
  .uni-page-body,
  .container,
  .content,
  .contentbg,
  .home-screen-frame,
  .profile-page,
  .mue_box {
    width: min(100vw, var(--pc-mobile-frame-width)) !important;
    max-width: var(--pc-mobile-frame-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  html body .vantabbar.van-tabbar--fixed,
  html body .vantabbar.van-tabbar,
  html body .van-tabbar.van-tabbar--fixed,
  html body .promotion-page .vantabbar.van-tabbar--fixed,
  body.promotion-page-active .vantabbar.van-tabbar--fixed,
  body.pages-index-Promotion .vantabbar.van-tabbar--fixed,
  html body uni-tabbar.uni-tabbar-bottom,
  html body uni-tabbar.uni-tabbar-top,
  html body uni-tabbar .uni-tabbar,
  html body .fixed_box,
  html body .van-nav-bar,
  html body .container .van-nav-bar,
  html body .fixed_title,
  html body .title_btn.home-header,
  html body .bottomButton,
  html body .mybutton {
    left: 50% !important;
    right: auto !important;
    width: min(100vw, var(--pc-mobile-frame-width)) !important;
    max-width: var(--pc-mobile-frame-width) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }

  html body.pc-mobile-frame-mode .vantabbar.vantabbar.van-tabbar.van-tabbar,
  html body.pc-mobile-frame-mode .vantabbar.vantabbar.van-tabbar--fixed.van-tabbar--fixed,
  html body.pc-mobile-frame-mode .van-tabbar.van-tabbar.van-tabbar--fixed.van-tabbar--fixed,
  html body.pc-mobile-frame-mode [data-pc-mobile-bottom-nav="1"] {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--pc-mobile-frame-width) !important;
    max-width: var(--pc-mobile-frame-width) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }

  html body .vantabbar.van-tabbar,
  html body .vantabbar .van-tabbar-item {
    height: 48px !important;
    min-height: 48px !important;
  }

  html body .vantabbar .van-tabbar-item {
    padding: 4px 2px 3px !important;
  }

  html body .vantabbar .van-tabbar-item__icon img {
    width: 20px !important;
    height: 20px !important;
  }

  html body .vantabbar .van-tabbar-item__text,
  html body .vantabbar .van-tabbar-item__text span,
  html body .vantabbar .van-tabbar-item__text font {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  html body .tg-float {
    right: max(0.08rem, calc((100vw - var(--pc-mobile-frame-width)) / 2 + 0.08rem)) !important;
  }

  html body .profile-page .topmenu,
  html body .profile-page .box_linetop,
  html body .profile-page .box_line,
  html body .profile-page .box_middle,
  html body .profile-page .my_nav_botton {
    width: calc(100% - 28px) !important;
    max-width: calc(var(--pc-mobile-frame-width) - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body .profile-page {
    min-height: 100vh !important;
  }

  html body .profile-page .box_middle .two,
  html body .profile-page .my_nav_botton .nav,
  html body .profile-page .user-vipBox-top-qjsLR,
  html body .profile-page .nav_vip,
  html body .profile-page .box_line .first {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }


  html body .btn:has(.logres),
  html body.us-login-redesign-page .btn {
    width: min(100vw, var(--pc-mobile-frame-width)) !important;
    max-width: var(--pc-mobile-frame-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  html body .van-dialog,
  html body uni-modal .uni-modal,
  html body uni-toast .uni-toast,
  html body uni-toast .uni-sample-toast {
    max-width: calc(var(--pc-mobile-frame-width) - 32px) !important;
  }

  html body .van-popup.van-popup--center,
  html body.pc-mobile-frame-mode .van-popup.van-popup--center {
    width: calc(var(--pc-mobile-frame-width) - 24px) !important;
    max-width: calc(var(--pc-mobile-frame-width) - 24px) !important;
    left: 50% !important;
    right: auto !important;
    box-sizing: border-box !important;
  }

  html body .van-popup.van-popup--center .popcontent,
  html body.pc-mobile-frame-mode .van-popup.van-popup--center .popcontent {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .van-popup.van-popup--center .popcontent .left-box,
  html body.pc-mobile-frame-mode .van-popup.van-popup--center .popcontent .left-box {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body .van-popup.van-popup--center .popcontent .left-box .left-box-item,
  html body.pc-mobile-frame-mode .van-popup.van-popup--center .popcontent .left-box .left-box-item {
    flex: 1 1 50% !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  html body .van-popup.van-popup--center .popcontent .left-box .title,
  html body.pc-mobile-frame-mode .van-popup.van-popup--center .popcontent .left-box .title {
    font-size: 12px !important;
    line-height: 16px !important;
  }
}