.mud-startup-loader {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: radial-gradient(circle at top, rgba(89, 74, 226, 0.08), transparent 40%), #f5f5f5;
}

.mud-startup-title {
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: rgba(66,66,66,1)
}

.mud-progress-circle-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 20px; 
}

.loading-progress {
    width: 110px;
    height: 110px;
    transform: rotate(-90deg);
    display: block;
}

.loading-track {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 4;
}

.loading-bar {
    fill: none;
    stroke: #c9dd84;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 263.89;
    stroke-dashoffset: calc(263.89px - (263.89px * var(--blazor-load-percentage, 0)) / 100);
    transition: stroke-dashoffset 0.2s ease;
}

.loading-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c9dd84;
}

    .loading-progress-text::after {
        content: var(--blazor-load-percentage-text, "Loading");
    }