.pull-refresh-indicator {
  position: fixed;
  z-index: 110;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 24px)) scale(0.92);
  border: 1px solid var(--hairline, rgba(11, 11, 11, 0.12));
  border-radius: 999px;
  background: var(--surface, #fff);
  box-shadow: 0 5px 18px rgba(11, 11, 11, 0.16);
  padding: 8px 13px;
  color: var(--ink, #0b0b0b);
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 120ms ease-out, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pull-refresh-indicator.is-pulling,
.pull-refresh-indicator.is-refreshing {
  opacity: var(--pull-opacity, 0.35);
  transform: translate(-50%, 0) scale(var(--pull-scale, 0.92));
}

.pull-refresh-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--accent, #0153d7);
  transform: rotate(var(--pull-rotation, -110deg));
}

.pull-refresh-indicator.is-ready .pull-refresh-icon {
  transform: rotate(180deg);
}

.pull-refresh-indicator.is-refreshing {
  --pull-opacity: 1;
  --pull-scale: 1;
}

.pull-refresh-indicator.is-refreshing .pull-refresh-icon {
  animation: pull-refresh-spin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .pull-refresh-indicator { transition: none; }
  .pull-refresh-indicator.is-refreshing .pull-refresh-icon { animation-duration: 1.4s; }
}