.startup-loader {
    position: fixed;
    inset: 0;
    background: var(--palette-startup-background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Inter, system-ui, sans-serif;
    color: var(--palette-startup-text);
}

.spinner-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 24px;
}

.spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: conic-gradient( from 0deg, var(--palette-transparent) 0deg, var(--palette-dark-blue) 90deg, var(--palette-transparent) 180deg, var(--palette-transparent) 360deg );
    animation: spin 1.2s linear infinite;
}

.spinner-content {
    position: absolute;
    inset: 3px;
    background: var(--palette-white);
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 16px 32px var(--palette-startup-shadow);
}

.title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
}

.subtitle {
    font-size: 14px;
    color: var(--palette-startup-secondary);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.startup-logo {
    width: 60px;
    position: relative;
}

#blazor-error-ui .reload {
    color: var(--palette-error-reload);
    text-decoration: none;
}