/* ===== Page Container ===== */
.view-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  background-image: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
  padding: 0 var(--page-padding);
  padding-top: var(--nav-height);
  padding-bottom: var(--tabbar-height);
}

body {
  background-color: var(--bg-secondary);
}

/* Center nav bar and tabbar on desktop */
.nav-bar,
.tabbar {
  left: 50% !important;
  transform: translateX(-50%);
  max-width: 500px;
  right: auto;
}

/* ===== Utility: flex row center ===== */
.flex {
  display: flex;
  align-items: center;
}