:root {
  --tg-viewport-height: 100dvh;
  --tg-viewport-stable-height: 100dvh;
  --tg-app-height: 100dvh;
  --tg-app-width: 100vw;
  --tg-safe-inset-top: 0px;
  --tg-safe-inset-bottom: 0px;
  --tg-safe-inset-left: 0px;
  --tg-safe-inset-right: 0px;
}

html,
html body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html.tg-mini-app,
html.tg-mini-app body {
  min-height: var(--tg-app-height, var(--tg-viewport-stable-height, 100dvh));
  height: auto;
  max-height: none;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

html.tg-mini-app .app-root,
html.tg-mini-app #appView {
  width: 100%;
  min-height: var(--tg-app-height, var(--tg-viewport-stable-height, 100dvh));
  padding-left: var(--tg-safe-inset-left);
  padding-right: var(--tg-safe-inset-right);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html.is-browser,
html.is-browser body {
  min-height: 100dvh;
  overflow-x: hidden;
}

html.tg-repainting body {
  opacity: 0.999;
}

/* Mobil: kichik ekran */
@media (max-width: 480px) {
  html.tg-mini-app.platform-mobile body {
    font-size: 15px;
  }
}

/* Telegram Desktop */
html.tg-mini-app.platform-desktop .app-root {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

html.tg-mini-app.platform-android .top,
html.tg-mini-app.platform-android .sidebar {
  padding-top: max(8px, var(--tg-safe-inset-top));
}