/* Responsive viewport and iOS safe-area adjustments. Keep the existing layout and data flow intact. */
:root {
  --ios-tabbar-content-height: 60px;
  --ios-tabbar-total-height: calc(var(--ios-tabbar-content-height) + env(safe-area-inset-bottom, 0px));
}

html,
body,
#app {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
}

body {
  height: 100dvh;
  max-height: 100dvh;
  inset: 0;
  width: 100%;
}

#app > .app-wrapper > .bj {
  z-index: 0 !important;
}

.main,
.main1 {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overscroll-behavior-y: contain;
}

.main_content {
  height: calc(100dvh - var(--ios-tabbar-total-height)) !important;
  min-height: 0 !important;
}

.mine-page {
  min-height: 100dvh !important;
}

.mine-page .page-inner {
  min-height: 100dvh !important;
  padding-left: calc(15px + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(15px + env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

.mine-page .logout-card {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.van-tabbar.van-tabbar--fixed {
  bottom: 0 !important;
  height: var(--ios-tabbar-content-height) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  padding-left: env(safe-area-inset-left, 0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
  box-sizing: content-box !important;
}

.van-tabbar.van-tabbar--fixed .van-tabbar-item {
  min-width: 0;
  box-sizing: border-box;
}

.mine-page .profile-main,
.mine-page .profile-left,
.mine-page .profile-copy,
.mine-page .wallet-copy,
.mine-page .honor-copy,
.mine-page .quick-action-copy {
  min-width: 0;
}

.mine-page .profile-copy,
.mine-page .wallet-copy,
.mine-page .honor-copy,
.mine-page .quick-action-copy {
  overflow-wrap: anywhere;
}

.mine-page .invite-row {
  min-width: 0;
  flex-wrap: wrap;
}

.mine-page .quick-action-title,
.mine-page .quick-action-desc,
.mine-page .menu-text {
  overflow-wrap: anywhere;
}

@media (max-width: 599px) {
  .main,
  .main1 {
    width: 100% !important;
  }
}

@supports not (height: 100dvh) {
  html,
  body,
  #app,
  .main,
  .main1,
  .mine-page,
  .mine-page .page-inner {
    min-height: 100vh;
  }

  body,
  .main,
  .main1 {
    height: 100vh;
    max-height: 100vh;
  }

  .main_content {
    height: calc(100vh - 60px - env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 390px) {
  .mine-page .page-inner {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .mine-page .profile-card,
  .mine-page .balance-card,
  .mine-page .honor-card,
  .mine-page .menu-card {
    border-radius: 18px;
  }

  .mine-page .profile-card {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mine-page .avatar {
    width: 64px;
    height: 64px;
  }

  .mine-page .user-name {
    font-size: 17px;
  }

  .mine-page .balance-value {
    font-size: 22px;
  }

  .mine-page .menu-grid {
    gap: 12px 4px;
  }
}

@media (max-width: 360px) {
  .mine-page .profile-card,
  .mine-page .balance-card,
  .mine-page .honor-card,
  .mine-page .menu-card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .mine-page .profile-main {
    gap: 6px;
  }

  .mine-page .avatar {
    width: 56px;
    height: 56px;
  }

  .mine-page .profile-copy {
    margin-left: 8px;
  }

  .mine-page .profile-right {
    gap: 3px;
  }

  .mine-page .grade-img {
    width: 52px;
    height: 52px;
  }

  .mine-page .user-name {
    font-size: 16px;
  }

  .mine-page .auth-row,
  .mine-page .invite-row {
    gap: 4px;
  }

  .mine-page .balance-grid,
  .mine-page .quick-actions {
    gap: 8px;
  }

  .mine-page .balance-item {
    padding: 12px 10px;
  }

  .mine-page .balance-value {
    font-size: 20px;
  }

  .mine-page .quick-action {
    padding-left: 9px;
    padding-right: 9px;
  }

  .mine-page .quick-action-icon {
    width: 30px;
    height: 30px;
  }

  .mine-page .quick-action-title {
    font-size: 14px;
  }

  .mine-page .menu-grid {
    gap: 10px 2px;
  }
}

@media (max-width: 330px) {
  .mine-page .page-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .mine-page .profile-card {
    padding-left: 10px;
    padding-right: 10px;
  }

  .mine-page .balance-label,
  .mine-page .menu-text {
    font-size: 11px;
  }

  .mine-page .balance-value {
    font-size: 18px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .mine-page .page-inner {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .van-tabbar.van-tabbar--fixed {
    --ios-tabbar-content-height: 54px;
  }
}