main {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    min-height: 100vh;
}

.card--security {
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: none;

    .card__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-4);
        padding: 30px;

        .logo {
            max-width: 147px;
            max-height: 36px;
        }

        .title {
            font-size: 18px;
            font-weight: 500;
            line-height: normal;
            color: var(--color-blue-900);
        }

        hr {
            width: 100%;
            height: 1px;
            border: 0;
            border-top: 1px solid var(--color-blue-300);
        }
    }

    .card__footer {
        border-top: 0;
        background-color: var(--color-blue-50);
        text-align: right;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        color: var(--color-blue-300);

        border-bottom-left-radius: var(--sp-2);
        border-bottom-right-radius: var(--sp-2);
    }
}

.password-strength {
    height: 6px;
    background: #eee;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;

    .password-strength-bar {
        height: 100%;
        width: 0;
        background: var(--color-pink-600);
        transition: width 0.3s;
    }
}

.password-hints {
    text-align: left;

    li {
        font-size: 14px!important;;
        list-style: none;
        color: var(--color-blue-900)!important;

        &.valid {
            color: var(--color-blue-900);
        }
    }
}
.password-match-hint {
    font-size: 14px;
    margin-top: 8px;
}

.security__back-link {
    margin-top: var(--sp-4);
    text-align: center;
}