.upd {
  --upd-step: 520ms;
  --upd-ease: cubic-bezier(0.45, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  padding: 20px 16px 16px;
  text-align: center;
}

.upd-orb { position: relative; width: 88px; height: 88px; margin-bottom: 10px; color: var(--purple-bright); }
.upd-orb > svg:first-child { width: 100%; height: 100%; transform: rotate(-90deg); }
.upd-track, .upd-ring { fill: none; stroke-width: 2.2; }
.upd-track { stroke: var(--line-strong); }
.upd-ring {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  opacity: 0;
  transition: stroke-dashoffset var(--upd-step) var(--upd-ease), opacity 200ms var(--upd-ease);
}
.upd:not([data-state="idle"]) .upd-ring { opacity: 1; }
.upd-orb::before {
  content: '';
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--purple-glow) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
  transition: background-color 420ms var(--upd-ease);
}
.upd[data-state="done"] .upd-orb::before { background: color-mix(in srgb, var(--purple-glow) 22%, transparent); }
.upd-icon {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 260ms var(--upd-ease), transform 420ms var(--upd-ease);
}
.upd[data-state="running"] .upd-icon-arrow { animation: upd-drift 1.1s var(--upd-ease) infinite; }
.upd-icon-check { opacity: 0; transform: scale(0.7); }
.upd-icon-check path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 420ms var(--upd-ease) 120ms; }
.upd[data-state="done"] .upd-icon-arrow { opacity: 0; transform: translateY(6px) scale(0.85); }
.upd[data-state="done"] .upd-icon-check { opacity: 1; transform: scale(1); }
.upd[data-state="done"] .upd-icon-check path { stroke-dashoffset: 0; }
@keyframes upd-drift { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2.5px); } }

.upd-info { display: grid; width: 100%; margin-bottom: 14px; }
.upd-note, .upd-progress { grid-area: 1 / 1; align-self: center; transition: opacity 280ms var(--upd-ease), visibility 0s linear 280ms; }
.upd-note { margin: 0; font-size: 14px; color: var(--text-mid); }
.upd:not([data-state="idle"]) .upd-note { opacity: 0; visibility: hidden; }
.upd[data-state="idle"] .upd-progress { opacity: 0; visibility: hidden; }
.upd:not([data-state="idle"]) .upd-progress, .upd[data-state="idle"] .upd-note { transition-delay: 0s; }
.upd-stage { min-height: 1.4em; margin: 0 0 8px; font-size: 14px; color: var(--text-hi); }

.upd-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.upd:not([data-state="idle"]) .upd-steps { animation: upd-steps-in 360ms var(--upd-ease) both; }
@keyframes upd-steps-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.upd-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-faint);
  transition: color 260ms var(--upd-ease);
}
.upd-step i {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.2px solid currentColor;
  transition: background-color 260ms var(--upd-ease), border-color 260ms var(--upd-ease), transform 260ms var(--upd-ease);
}
.upd-step[data-step="active"] { color: var(--text-hi); }
.upd-step[data-step="active"] i { border-color: var(--purple-bright); transform: scale(1.12); }
.upd-step[data-step="done"] { color: var(--text-mid); }
.upd-step[data-step="done"] i { background: var(--purple-bright); border-color: var(--purple-bright); }
.upd-step[data-step="done"] i::after {
  content: '';
  position: absolute;
  left: 3.3px; top: 1.4px;
  width: 3px; height: 5.6px;
  border: solid var(--bg-deep);
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(45deg);
}

.upd-go { width: 77%; margin: 0 auto; }
.upd .update-status { margin: 12px 0 0; }
.upd-installed { margin-top: 12px; padding-block: 2px; }
.upd-version-tap { padding: 0; color: var(--text-hi); font: inherit; font-weight: 500; text-align: end; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.upd-debug { margin-top: 12px; }
.upd-debug[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .upd-ring, .upd-icon, .upd-icon-check path, .upd-step, .upd-step i, .upd-orb::before, .upd-note, .upd-progress { transition: none; }
  .upd[data-state="running"] .upd-icon-arrow { animation: none; }
  .upd:not([data-state="idle"]) .upd-steps { animation: none; }
}