html[data-telegram-mini-app] {
  --mini-safe-top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --mini-safe-bottom: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --mini-safe-left: calc(var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
  --mini-safe-right: calc(var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));
}

html[data-telegram-mini-app] body {
  padding: var(--mini-safe-top) var(--mini-safe-right) var(--mini-safe-bottom) var(--mini-safe-left);
}

html[data-telegram-mini-app] .site-header {
  top: var(--mini-safe-top);
}

html[data-telegram-mini-app] .explore-shell {
  min-height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--mini-safe-top) - var(--mini-safe-bottom));
}

html[data-telegram-mini-app] .explore-shell .modal-backdrop {
  padding: max(12px, var(--mini-safe-top)) max(12px, var(--mini-safe-right)) max(12px, var(--mini-safe-bottom)) max(12px, var(--mini-safe-left));
}

html[data-telegram-mini-app] .explore-shell .modal {
  max-height: calc(var(--tg-viewport-stable-height, 100dvh) - max(12px, var(--mini-safe-top)) - max(12px, var(--mini-safe-bottom)));
}