@keyframes pp-new-order-light {
  0% { background-color: #ede9fe; box-shadow: inset 4px 0 0 #7c3aed; }
  65% { background-color: #f5f3ff; box-shadow: inset 4px 0 0 #a78bfa; }
  100% { background-color: transparent; box-shadow: inset 4px 0 0 transparent; }
}

@keyframes pp-new-order-dark {
  0% { background-color: #312e81; box-shadow: inset 4px 0 0 #a78bfa; }
  100% { background-color: transparent; box-shadow: inset 4px 0 0 transparent; }
}

@keyframes pp-status-light {
  0% { background-color: #dbeafe; box-shadow: inset 0 0 0 2px #60a5fa; }
  100% { background-color: transparent; box-shadow: inset 0 0 0 2px transparent; }
}

@keyframes pp-status-dark {
  0% { background-color: #1e3a5f; box-shadow: inset 0 0 0 2px #60a5fa; }
  100% { background-color: transparent; box-shadow: inset 0 0 0 2px transparent; }
}

@keyframes pp-mobile-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes pp-mobile-status-flash {
  from { box-shadow: 0 0 0 2px #60a5fa, 0 0 0 5px #60a5fa44; }
  to { box-shadow: 0 0 0 2px transparent, 0 0 0 5px transparent; }
}

.mobile-card.pp-new-card { position: relative; }
.mobile-card.pp-new-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: #8b5cf633;
  box-shadow: inset 0 0 0 2px #8b5cf6;
}
html.dark .mobile-card.pp-new-card::after {
  background: #818cf844;
  box-shadow: inset 0 0 0 2px #a78bfa;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.dark) tr.pp-new-order > td { animation: pp-new-order-light 1.6s ease-out both; }
  html.dark tr.pp-new-order > td { animation: pp-new-order-dark 1.6s ease-out both; }
  html:not(.dark) td.pp-status-updated { animation: pp-status-light 1.25s ease-out both; }
  html.dark td.pp-status-updated { animation: pp-status-dark 1.25s ease-out both; }
  .mobile-card.pp-new-card::after { animation: pp-mobile-flash 1.6s ease-out both; }
  .mobile-status.pp-mobile-status-updated { animation: pp-mobile-status-flash 1.25s ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.dark) tr.pp-new-order > td { box-shadow: inset 4px 0 0 #7c3aed; }
  html.dark tr.pp-new-order > td { box-shadow: inset 4px 0 0 #a78bfa; }
  td.pp-status-updated { outline: 2px solid #60a5fa; outline-offset: -2px; }
  .mobile-status.pp-mobile-status-updated { outline: 2px solid #60a5fa; }
}