@media (max-width: 575px) {
    .auth-topbar {
        width: 100%;
        padding: 14px 16px 0;
    }

    .auth-brand {
        max-width: 100%;
        gap: 8px;
        font-size: 16px;
        line-height: 1.15;
    }

    .auth-brand span {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .auth-body .shell {
        min-height: calc(100dvh - 56px);
        width: 100%;
        padding: 16px;
        place-items: center;
        align-content: center;
    }

    .table-wrap:not(.responsive-cards) table {
        min-width: 760px;
    }

    .result-history-grid {
        min-width: 880px;
    }

    .login-card {
        width: 100%;
        max-width: 390px;
        gap: 16px;
        padding: 22px 18px;
        border-radius: 18px;
    }

    .login-card h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .login-card .form {
        gap: 14px;
    }

    .login-card .form input {
        min-height: 48px;
        padding: 11px 12px;
    }

    .login-card .primary {
        min-height: 50px;
        width: 100%;
    }

    .profile-dropdown {
        position: fixed;
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .shell {
        padding: 22px;
    }

    .number-grid,
    .triple-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .shell {
        padding: 28px 32px;
    }
}