.app-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--page-bg);
}

.page {
  min-height: 100vh;
  padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
  background: var(--page-bg);
}

.scroll-content {
  min-height: calc(100vh - 1.4rem - env(safe-area-inset-bottom));
  padding: 0.24rem 0.2rem 0.4rem;
}

.fixed-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  height: calc(1.4rem + env(safe-area-inset-bottom));
  justify-content: center;
  padding: 0.26rem 0.16rem 0;
  background: var(--surface);
}

@media (min-width: 750px) {
  .app-shell,
  .fixed-footer,
  .tabbar {
    max-width: 750px;
  }

  .fixed-footer,
  .tabbar {
    right: auto;
    left: 50%;
    width: 750px;
    transform: translateX(-50%);
  }
}