/* Overlay de envio DevMakers (UX4): camada puramente visual sobre o
   pipeline real. Fundo escuro tecnológico + grid + chip pulsante + bits
   convergindo + barra/percentual/mensagens. Sem mascote, sem imagens. */
.upload-progress {
  border: 0;
  border-radius: 18px;
  padding: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden auto;
  background: #0a1430;
  color: #eaf2ff;
}
.upload-progress::backdrop { background: #060b1ecc; backdrop-filter: blur(4px); }
.up-scene {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 20px;
  text-align: center;
  background-image:
    repeating-linear-gradient(0deg, #ffffff09 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, #ffffff09 0 1px, transparent 1px 28px);
}
.up-title { margin: 0 0 14px; font-size: 1.05rem; }
.up-chipzone { position: relative; height: 132px; margin: 0 auto; max-width: 340px; }
.up-chip { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); animation: up-pulse 1.6s ease-in-out infinite; }
.upload-progress[data-state="success"] .up-chip { animation: none; }
.upload-progress[data-state="error"] .up-chip { animation: none; filter: saturate(.4); }
@keyframes up-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 #51e2c500); }
  50% { filter: drop-shadow(0 0 14px #51e2c5aa); }
}
.up-chipmark {
  position: absolute; left: 50%; top: 44px; transform: translateX(-50%);
  font: 700 22px/1 system-ui, sans-serif; color: #afffee;
}
.upload-progress[data-state="success"] .up-chipmark { color: #0a1430; }
.up-boardtag {
  position: absolute; left: 50%; top: 108px; transform: translateX(-50%);
  font: 700 .68rem/1 system-ui, sans-serif; letter-spacing: .22em;
  color: #0a1430; background: #ffda54; border-radius: 4px; padding: 3px 8px;
}
.up-boardtag[hidden] { display: none; }
.up-bit {
  position: absolute; top: var(--y);
  font: 700 15px/1 ui-monospace, monospace; color: #7df3dd;
  opacity: 0; animation: up-bit-in 2.4s linear infinite;
  animation-delay: var(--d);
}
.up-bit.from-left { left: 0; --tx: 150px; }
.up-bit.from-right { right: 0; --tx: -150px; }
@keyframes up-bit-in {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translateX(var(--tx)); }
  100% { opacity: 0; transform: translateX(var(--tx)); }
}
.upload-progress[data-flow="strong"] .up-bit { animation-duration: 1.4s; color: #d6fff5; }
.up-message { margin: 10px 0 4px; font-size: .98rem; min-height: 1.4em; }
.up-step { margin: 0 0 12px; font-size: .78rem; color: #9db4dd; min-height: 1.2em; }
.up-bar { height: 10px; border-radius: 6px; background: #ffffff1f; overflow: hidden; }
.up-bar-fill {
  display: block; height: 100%; width: 0%;
  border-radius: 6px; background: linear-gradient(90deg, #51e2c5, #ffda54);
  transition: width .45s ease;
}
.up-percent { margin: 6px 0 0; font-size: .8rem; color: #9db4dd; }
.up-steps {
  display: flex; gap: 4px; justify-content: center;
  list-style: none; margin: 14px 0 0; padding: 0 0 4px;
  font-size: .68rem; color: #8ba3cf;
}
.up-steps li { padding: 3px 7px; border-radius: 20px; background: #ffffff12; }
.up-steps li.is-active { background: #51e2c533; color: #d6fff5; }
.up-steps li.is-done { background: #51e2c522; color: #afffee; }
.up-error { margin: 10px 0 0; color: #ffb4b4; font-size: .86rem; }
.up-error[hidden] { display: none; }
.up-back {
  margin: 12px 0 2px; padding: 9px 22px; border: 0; border-radius: 10px;
  background: #ffda54; color: #0a1430; font-weight: 700; cursor: pointer;
}
.up-back[hidden] { display: none; }
@media (max-width: 480px) {
  .up-scene { padding: 22px 16px 16px; }
  .up-title { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-progress *, .upload-progress::backdrop { animation: none !important; transition: none !important; }
  .up-bit { display: none; }
}