.portal-progress {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 35, 55, .28);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .3s ease;
}

.portal-progress[hidden] { display: none; }
.portal-progress.show { opacity: 1; }
.portal-progress-box {
    width: min(620px, 100%);
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid rgba(218, 228, 239, .9);
    border-radius: 1.25rem;
    background: #fff;
    color: #17324d;
    box-shadow: 0 24px 70px rgba(20, 45, 70, .2);
}
.portal-progress-box h2 { color: #17324d; }
.portal-progress-status { min-height: 1.5rem; color: #526579; }
.portal-progress-percent { color: #2264a1; font-size: 1rem; font-variant-numeric: tabular-nums; }
.portal-progress-bar { height: .55rem; overflow: hidden; border-radius: 1rem; background: #e8eff6; }
.portal-progress-bar > div {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #2b79bd, #45b9c9);
    transition: width .35s ease;
}
.portal-progress-steps { padding: 0; margin: 1rem 0 0; list-style: none; color: #6a7c8e; }
.portal-progress-steps li { padding: .2rem 0; }
.portal-progress-steps li::before { content: "\25CB  "; color: #9aabba; }
.portal-progress-steps li.active { color: #17324d; font-weight: 700; }
.portal-progress-steps li.active::before { content: "\25C9  "; color: #2582bf; }
.portal-progress-steps li.done { color: #287452; }
.portal-progress-steps li.done::before { content: "\2713  "; color: #27966a; }

.portal-progress-box--branded {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.25rem, 4vw, 2.25rem);
}
.portal-progress-visual { position: relative; width: 150px; aspect-ratio: 1; }
.portal-progress-ring { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.portal-progress-ring circle { fill: none; stroke-width: 7; }
.portal-progress-ring .track { stroke: #e6eef5; }
.portal-progress-ring [data-progress-ring] {
    stroke: #2582bf;
    stroke-linecap: round;
    stroke-dasharray: 226.2;
    stroke-dashoffset: 226.2;
    transition: stroke-dashoffset .4s ease;
}
.portal-progress-logo {
    position: absolute;
    inset: 20px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #f3f8fc;
}
.portal-progress-logo img { display: block; width: 76%; height: 76%; object-fit: contain; }

@media (max-width: 520px) {
    .portal-progress-box--branded { grid-template-columns: 1fr; gap: 1rem; }
    .portal-progress-visual { width: 112px; margin: 0 auto; }
    .portal-progress-details { text-align: center; }
    .portal-progress-steps { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-progress, .portal-progress-bar > div, .portal-progress-ring [data-progress-ring] { transition: none; }
}