html[data-telegram-miniapp] {
    --miniapp-top:calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
    --miniapp-bottom:calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
    --miniapp-left:calc(var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
    --miniapp-right:calc(var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));
    scroll-padding-top:calc(80px + var(--miniapp-top));
}
html[data-telegram-miniapp] body { min-height:var(--tg-viewport-stable-height, 100dvh); }
html[data-telegram-miniapp] .ui-topbar {
    height:calc(64px + var(--miniapp-top));
    padding-top:var(--miniapp-top);
    padding-left:max(12px, var(--miniapp-left));
    padding-right:max(12px, var(--miniapp-right));
}
html[data-telegram-miniapp] .workspace main {
    padding-top:calc(86px + var(--miniapp-top));
    padding-bottom:max(32px, var(--miniapp-bottom));
    padding-left:max(16px, var(--miniapp-left));
    padding-right:max(16px, var(--miniapp-right));
}
html[data-telegram-miniapp] :is(.ui-dialog-shell, .ui-quick-dialog, .inline-deal .partner-select, dialog[open]) {
    top:calc(var(--miniapp-offset-top, 0px) + var(--miniapp-top) + 12px);
    left:calc(50% + (var(--miniapp-left) - var(--miniapp-right)) / 2);
    right:auto;
    bottom:auto;
    margin:0;
    translate:-50% 0;
    transform:none;
    max-height:calc(var(--miniapp-height, 100dvh) - var(--miniapp-top) - var(--miniapp-bottom) - 24px) !important;
    max-width:calc(100vw - var(--miniapp-left) - var(--miniapp-right) - 24px) !important;
}
html[data-telegram-miniapp] .ui-dialog-shell .popup-container {
    max-height:calc(var(--miniapp-height, 100dvh) - var(--miniapp-top) - var(--miniapp-bottom) - 28px);
}
html[data-telegram-miniapp] .ui-quick-dialog { overflow-y:auto; }
html[data-telegram-miniapp] #notification-container {
    top:calc(76px + var(--miniapp-top)) !important;
    right:max(12px, var(--miniapp-right)) !important;
    left:max(12px, var(--miniapp-left));
    max-width:none;
}
html[data-telegram-miniapp] .notification {
    min-width:0;
    width:min(100%, 400px);
    max-width:100%;
    margin-left:auto;
    overflow-wrap:anywhere;
}
html[data-telegram-miniapp] .ui-menu-sheet {
    top:calc(64px + var(--miniapp-top)) !important;
    bottom:auto !important;
    height:calc(var(--miniapp-height, 100dvh) - 64px - var(--miniapp-top));
}
html[data-telegram-miniapp] .ui-menu-sheet #sidebar {
    padding-bottom:max(20px, var(--miniapp-bottom));
    padding-left:max(16px, var(--miniapp-left));
    padding-right:max(16px, var(--miniapp-right));
}
html[data-telegram-miniapp] .login-page {
    padding:calc(24px + var(--miniapp-top)) max(16px, var(--miniapp-right)) max(24px, var(--miniapp-bottom)) max(16px, var(--miniapp-left));
}
html[data-telegram-miniapp] .inline-deal {
    padding:calc(16px + var(--miniapp-top)) max(14px, var(--miniapp-right)) max(20px, var(--miniapp-bottom)) max(14px, var(--miniapp-left));
}
html[data-telegram-miniapp] body.telegram-actions main {
    padding:calc(20px + var(--miniapp-top)) max(18px, var(--miniapp-right)) max(20px, var(--miniapp-bottom)) max(18px, var(--miniapp-left));
}
@media(min-width:769px) {
    html[data-telegram-miniapp] .workspace>.container>#sidebar {
        padding-top:calc(24px + var(--miniapp-top));
        padding-left:max(16px, var(--miniapp-left));
        padding-bottom:max(24px, var(--miniapp-bottom));
    }
}