.onboarding-card-body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.qr-connect-container {
    max-width: 420px;
    margin: auto;
}

.qr-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

.qr-box img {
    width: 260px;
    max-width: 100%;
    display: block;
}

.qr-instructions {

    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 20px;
    text-align: left;

}

.instruction-title {

    display: flex;
    align-items: center;
    font-size: 18px;
    margin-bottom: 4px;

}

.instruction-subtitle {

    color: #6c757d;
    font-size: 14px;
    margin-bottom: 18px;

}

.instruction-item {

    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;

}

.step-number {

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #25D366;
    color: #fff;

    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin-right: 14px;

    font-size: 14px;

    box-shadow: 0 3px 8px rgba(37, 211, 102, .25);

}

.instruction-item div:last-child {

    line-height: 1.45;
    color: #495057;

}

.qr-box:hover {

    transform: scale(1.02);
    transition: .2s;

}