:root{
--bar-fill: #b32317;
--bar-track: #00467f;
--text: #0f172a;
--muted: #475569;
--radius: 14px;
}


.progress-card{
width: 100%;
max-width: 600px;
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
padding: 20px;
margin: 50px auto 20px auto;
color: var(--text);
}


.progress-header{
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}


.progress-title{
font-weight: 700;
}


.progress-numbers{
display: flex;
align-items: center;
gap: 10px;
}


.progress-percent{
font-weight: 800;
}


.progress-detail{
color: var(--muted);
}


.progress-bar{
position: relative;
height: 22px;
border-radius: var(--radius);
background: color-mix(in oklab, var(--bar-track) 84%, white);
box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--bar-track) 65%, transparent);
overflow: hidden;
}


.progress-bar-track{
position: absolute;
inset: 0;
background: var(--bar-track);
opacity: 0.2;
}


.progress-bar-fill{
position: relative;
height: 100%;
width: 0%;
background: var(--bar-fill);
border-radius: inherit;
transition: width 300ms ease-in-out;
}


.progress-bar-fill::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%);
pointer-events: none;
}