:root {
  --ea-phone: 430px;
}

html,
body {
  margin: 0;
  background: #dcdcdc;
  overflow-x: hidden;
}

#app {
  width: 100% !important;
  max-width: var(--ea-phone) !important;
  min-height: 100vh;
  margin: 0 auto !important;
  background: #fff;
  overflow-x: hidden;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 10px 36px rgba(0, 0, 0, 0.14);
}

#ea-hard {
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

footer.w-full {
  width: 100% !important;
  max-width: 100% !important;
}

.van-tabbar,
.van-tabbar--fixed,
.van-nav-bar--fixed,
.van-sticky--fixed,
.van-overlay,
.van-popup--top,
.van-popup--bottom,
.van-notify,
.van-number-keyboard,
.van-action-sheet {
  left: 50% !important;
  right: auto !important;
  width: min(100vw, var(--ea-phone)) !important;
  max-width: var(--ea-phone) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

.van-popup--center,
.van-dialog {
  max-width: min(var(--ea-phone), calc(100vw - 24px)) !important;
}

.van-toast {
  max-width: min(var(--ea-phone), 80vw) !important;
}

.max-w-\[1000px\] {
  max-width: var(--ea-phone) !important;
}

.starting {
  padding-bottom: 8px;
}

@media all and (min-width: 640px) {
  #app {
    width: var(--ea-phone) !important;
    max-width: var(--ea-phone) !important;
  }

  .van-tabbar,
  .van-tabbar--fixed {
    left: 50% !important;
    right: auto !important;
    width: var(--ea-phone) !important;
    max-width: var(--ea-phone) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
}