.system-pull-refresh {
    --system-pull-offset: 0px;
    position: fixed;
    z-index: 6000;
    top: max(10px, env(safe-area-inset-top));
    left: 50%;
    display: none;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    border: 1px solid #c8d8f3;
    border-radius: 999px;
    background: #fff;
    padding: 8px 14px;
    color: #1b58c8;
    box-shadow: 0 10px 26px rgba(25, 67, 139, .18);
    font: 800 12px/1 Inter, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-64px + var(--system-pull-offset)));
    transition: opacity .12s ease, border-color .15s ease, color .15s ease, transform .08s linear;
}

.system-pull-refresh.is-visible { opacity: 1; }
.system-pull-refresh.is-ready { border-color: #77d4af; color: #08764b; }
.system-pull-refresh__icon {
    display: grid;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    place-items: center;
    border-radius: 50%;
    background: #edf4ff;
    color: currentColor;
    transform-origin: center;
}
.system-pull-refresh__icon svg { display: block; width: 15px; height: 15px; overflow: visible; aspect-ratio: 1; }
.system-pull-refresh.is-ready .system-pull-refresh__icon { background: #e8f9f0; }
.system-pull-refresh.is-refreshing .system-pull-refresh__icon { animation: system-refresh-spin .7s linear infinite; }

@keyframes system-refresh-spin { to { transform: rotate(360deg); } }

@media (max-width: 768px), (pointer: coarse) {
    .system-pull-refresh { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .system-pull-refresh { transition: none; }
    .system-pull-refresh.is-refreshing .system-pull-refresh__icon { animation: none; }
}