/* Shared viewport and safe-area rules for all Telegram modes. */
:root {
  --vx-miniapp-safe-top:max(env(safe-area-inset-top,0px),var(--vx-host-safe-top,0px));
  --vx-miniapp-safe-right:max(env(safe-area-inset-right,0px),var(--vx-host-safe-right,0px));
  --vx-miniapp-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--vx-host-safe-bottom,0px));
  --vx-miniapp-safe-left:max(env(safe-area-inset-left,0px),var(--vx-host-safe-left,0px));
  --safe-bottom:var(--vx-miniapp-safe-bottom);
  --vx-tg-top-safe:var(--vx-miniapp-safe-top);
  --vx-tg-right-safe:var(--vx-miniapp-safe-right);
  --vx-tg-bottom-safe:var(--vx-miniapp-safe-bottom);
  --vx-tg-left-safe:var(--vx-miniapp-safe-left);
}
html,body { min-height:var(--vx-miniapp-height,100dvh); }
body { padding-left:var(--vx-miniapp-safe-left); padding-right:var(--vx-miniapp-safe-right); }
.topbar { padding-top:calc(10px + var(--vx-miniapp-safe-top)); }
.bottom-nav { padding-left:max(8px,var(--vx-miniapp-safe-left)); padding-right:max(8px,var(--vx-miniapp-safe-right)); }
.vx-mode-overlay { padding:calc(16px + var(--vx-miniapp-safe-top)) max(16px,var(--vx-miniapp-safe-right)) calc(16px + var(--vx-miniapp-safe-bottom)) max(16px,var(--vx-miniapp-safe-left)); }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}