.proseg-ptr {
    position: fixed;
    left: 50%;
    top: calc(10px + env(safe-area-inset-top, 0px));
    z-index: 2147483000;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid rgba(15, 76, 129, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
    color: #0b355b;
    font: 800 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -58px, 0) scale(.98);
    transition: opacity .16s ease, transform .16s ease;
    will-change: transform, opacity;
}

.proseg-ptr.proseg-ptr-visible {
    opacity: 1;
}

.proseg-ptr-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(15, 76, 129, .18);
    border-top-color: #0f4c81;
    flex: 0 0 auto;
    transform: rotate(var(--proseg-ptr-rotation, 0deg));
}

.proseg-ptr-ready .proseg-ptr-icon {
    border-top-color: #198754;
}

.proseg-ptr-refreshing .proseg-ptr-icon {
    animation: proseg-ptr-spin .78s linear infinite;
}

.proseg-ptr-blocked {
    border-color: rgba(217, 119, 6, .28);
    color: #92400e;
}

.proseg-ptr-blocked .proseg-ptr-icon {
    border-top-color: #d97706;
}

@keyframes proseg-ptr-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (hover: hover) and (pointer: fine) {
    .proseg-ptr {
        display: none;
    }
}