html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.tg-webapp-safe {
  width: 100%;
  height: var(--tg-real-vh, 100vh);
  padding-top: 0 !important;
  overflow: hidden !important;
  background: #0a0b0f;
}

body.tg-webapp-safe #root {
  width: 100%;
  height: var(--tg-real-vh, 100vh) !important;
  overflow: hidden !important;
}

body.tg-webapp-safe #root > div {
  width: 100%;
  height: var(--tg-real-vh, 100vh) !important;
  overflow: hidden !important;
}

/* Верхняя панель сайта отдельно, не внутри скролла */
body.tg-webapp-safe header.fixed,
body.tg-webapp-safe .fixed.top-0 {
  position: fixed !important;
  top: var(--tg-header-top, 36px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 80 !important;
}

/* Контент скроллится только между верхней панелью и нижним меню */
body.tg-webapp-safe main {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--tg-main-top, 112px) !important;
  bottom: var(--tg-main-bottom, 92px) !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  box-sizing: border-box !important;
}

/* Нижнее меню отдельно */
body.tg-webapp-safe nav.fixed.bottom-0 {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 80 !important;
}