.container {

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding:
        var(--space-6)
        var(--space-4);


    display: flex;

    flex-direction: column;

    gap:
        var(--space-6);

}




.pfc-card {

    padding:
        var(--space-6);


    display: flex;

    flex-direction: column;

    gap:
        var(--space-4);

}




.pfc-card form {

    display: flex;

    flex-direction: column;

    gap:
        var(--space-5);

}




.input-group {

    display: flex;

    flex-direction: column;

    gap:
        var(--space-2);

}



.input-group label,
.input-group input,
button {

    font-size: inherit;

}




.pfc-row {

    display: flex;

    gap:
        var(--space-4);

}



.pfc-row .input-group {

    flex: 1;

}




button {

    width: 160px;

    min-height: 44px;

    margin-top: var(--space-2);

    margin-inline: auto;


}




.result {

    margin-top:
        var(--space-2);


    padding:
        var(--space-4);


    background-color:
        var(--bg-secondary);


    border-radius:
        var(--radius-md);


    text-align:
        center;

}




.result p {

    margin:
        var(--space-2)
        0;

}




@media (max-width:600px) {


    .pfc-card {

        padding:
            var(--space-4);

    }



    .pfc-row {

        flex-direction:
            column;

    }



    button {

        width:100%;

    }


}