.card{
    border-radius:12px;
}

.card-header{
    font-weight:bold;
}

code{
    font-size:15px;
    color:#198754;
}

.table td{
    vertical-align:middle;
}

h3{
    letter-spacing:2px;
}

.timeline{

display:flex;

flex-direction:column;

align-items:center;

}

.step-card{

background:#ffffff;

border-left:6px solid #198754;

border-radius:12px;

padding:20px;

margin:15px;

width:100%;

box-shadow:0px 3px 8px rgba(0,0,0,.15);

transition:.3s;

}

.step-card:hover{

transform:scale(1.02);

}

.step-card h5{

font-weight:bold;

color:#198754;

margin-bottom:10px;

}

.step-value{

font-family:monospace;

font-size:20px;

background:#f8f9fa;

padding:10px;

border-radius:8px;

word-break:break-all;

}

.arrow{

font-size:32px;

font-weight:bold;

color:#198754;

}

.flow-box{

    width:280px;

    text-align:center;

    padding:15px;

    border-radius:12px;

    border:2px solid #0d6efd;

    background:white;

    font-weight:bold;

    transition:0.3s;

}

.flow-arrow{

    font-size:30px;

    color:#0d6efd;

    margin:5px;

}

.flow-active{

    background:#0d6efd;

    color:white;

    transform:scale(1.05);

    box-shadow:0px 0px 15px rgba(13,110,253,.4);

}

.flow-complete{

    background:#198754;

    color:white;

    border-color:#198754;

    box-shadow:0 0 12px rgba(25,135,84,.4);

}

.flow-arrow-active{

    color:#198754;

    font-weight:bold;

}

.step-card{

    opacity:0;

    transform:translateY(30px);

    transition:.5s;

}

.step-card.show{

    opacity:1;

    transform:translateY(0);

}

.result-card{

    animation:pop .5s;

}

@keyframes pop{

0%{

transform:scale(.8);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}