/* Мобильные браузеры: вёрстка, iOS (zoom на input), safe-area */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: clip;
    margin: 0;
}

.main-container {
    box-sizing: border-box;
    max-width: min(1200px, 100%);
    width: calc(100% - 24px);
}

@media (max-width: 576px) {
    .main-container {
        margin: 8px auto !important;
        width: calc(100% - 16px) !important;
        border-radius: 14px !important;
    }

    .header-section {
        padding: 16px !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .btn-lg,
    .btn-demo,
    .btn-upload {
        min-height: 48px;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    h1 {
        font-size: 1.35rem !important;
    }

    h2, h3, h4 {
        word-break: break-word;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* iOS: шрифт < 16px на input даёт нежелательный zoom */
input,
select,
textarea,
.form-control {
    font-size: 16px !important;
}

@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}