/* Reference viewport and shared four-tab navigation; no business logic changes. */
html body #app {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-shadow: none !important;
}

/* Page shells fill the viewport. Dialogs and payment overlays retain their caps. */
html body #app > :not(dialog):not(.van-popup):not(.van-overlay):not(.pay-panel-container):not(.van-number-keyboard):not(.van-floating-panel):not(.van-share-sheet),
html body #app .container,
html body #app .container.safari_only,
html body #app .container[data-v-83f0220e],
html body #app .lb-profile-screen,
html body #app .lb-flow-shell,
html body #app .lb-personal-favorites,
html body #app .lb-personal-announcements,
html body #app .lb-personal-authorization,
html body #app .lb-ref-records-page,
html body #app .catalog-browser.catalog-browser--search,
html body #app .category-directory,
html body #app .platform-main,
html body #app .law-main,
html body #app .manual-topup-main,
html body #app .funding-history-main,
html body #app .lb-service-r16 {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

/* Follow the expanded page while preserving each bar's existing vertical layout. */
html body #app .van-tabbar--fixed,
html body #app .van-action-bar,
html body #app .van-submit-bar,
html body #app .mall-bag-checkout,
html body #app .container > form.van-form > .bottom,
html body #app .container > .top + .bottom,
html body #app .container > .checkout-bar {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html body #app .lb-profile-screen .lb-profile-settings-menu {
  right: 8px;
}

/* The reference title and navigation bands share the same cyan. */
html body #app .lb-profile-screen { --profile-accent: #67b8b9; }
html body #app .lb-flow-shell { --lb-flow-accent: #67b8b9; }
html body #app .lb-profile-screen .lb-profile-header,
html body #app .lb-flow-shell .lb-flow-header,
html body #app .lb-personal-favorites .lb-personal-extra-header,
html body #app .lb-personal-announcements .lb-personal-extra-header,
html body #app .lb-personal-authorization .lb-personal-extra-header,
html body #app .lb-ref-records-page .lb-ref-page-header,
html body #app .lb-reference-detail .lb-reference-detail__header {
  background: #67b8b9 !important;
}

/* Only the shared Home / Order / Query / Personal navigation has four items. */
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) {
  background: #67b8b9 !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child)::after {
  border: 0 !important;
}
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) > .van-tabbar-item {
  color: #182326 !important;
  background: transparent !important;
}
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) > .van-tabbar-item--active {
  color: #fff !important;
}
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) .van-tabbar-item__icon,
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) .van-tabbar-item__icon > *,
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) svg {
  color: inherit !important;
}
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) svg [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}

/* The legacy #4 symbol contains an opaque background path. Replace only the
   Personal item with the same vector mask on every shared main navigation. */
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) > .van-tabbar-item:last-child .van-tabbar-item__icon > * {
  display: none !important;
}
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) > .van-tabbar-item:last-child .van-tabbar-item__icon::after {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M4 22v-2a8 8 0 0 1 16 0v2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M4 22v-2a8 8 0 0 1 16 0v2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #app .van-tabbar:has(> .van-tabbar-item:nth-child(4):last-child) > .van-tabbar-item--active:last-child .van-tabbar-item__icon::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4.5'/%3E%3Cpath d='M3 23v-2a9 9 0 0 1 18 0v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4.5'/%3E%3Cpath d='M3 23v-2a9 9 0 0 1 18 0v2z'/%3E%3C/svg%3E");
}