.root-coin-transaction-feedback-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  contain: layout style;
}

.root-coin-transaction-feedback {
  --root-coin-feedback-color: #177a46;
  --root-coin-feedback-glow: rgba(34, 197, 94, 0.28);
  position: fixed;
  left: 50%;
  top: 70%;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  min-width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 0.46rem 0.72rem 0.48rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--root-coin-feedback-color) 34%, white);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.96);
  box-shadow: 0 0.65rem 1.5rem rgba(21, 38, 27, 0.2), 0 0 1.2rem var(--root-coin-feedback-glow);
  color: var(--root-coin-feedback-color);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  animation: root-coin-feedback-rise 1.7s cubic-bezier(0.16, 0.82, 0.22, 1) forwards;
}

.root-coin-transaction-feedback.is-spend {
  --root-coin-feedback-color: #b62f3d;
  --root-coin-feedback-glow: rgba(220, 38, 38, 0.24);
}

.root-coin-transaction-feedback__coin {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 0.13rem solid #b87408;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff7ab 0 12%, #f5c242 38%, #d99112 100%);
  box-shadow: inset 0 0 0 0.12rem rgba(255, 247, 171, 0.5), 0 0.2rem 0.45rem rgba(105, 69, 4, 0.24);
  color: #794507;
  font: 800 0.95rem/1 system-ui, sans-serif;
  text-shadow: 0 1px rgba(255, 255, 255, 0.52);
  animation: root-coin-feedback-coin 1.7s cubic-bezier(0.16, 0.82, 0.22, 1) both;
}

.root-coin-transaction-feedback__copy {
  display: grid;
  min-width: 0;
  line-height: 1;
}

.root-coin-transaction-feedback__amount {
  color: var(--root-coin-feedback-color);
  font: 850 clamp(1rem, 3.8vw, 1.28rem)/1.05 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  text-shadow: 0 1px rgba(255, 255, 255, 0.7);
}

.root-coin-transaction-feedback__label {
  max-width: 13rem;
  margin-top: 0.18rem;
  overflow: hidden;
  color: #5d665f;
  font: 650 0.65rem/1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-coin-transaction-feedback__sparks {
  position: absolute;
  inset: 50% auto auto 0.92rem;
  width: 0;
  height: 0;
}

.root-coin-transaction-feedback__sparks i {
  --root-coin-spark-x: 0rem;
  --root-coin-spark-y: -2.2rem;
  position: absolute;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #f3ba2d;
  box-shadow: 0 0 0.55rem #f8d45e;
  opacity: 0;
  animation: root-coin-feedback-spark 0.78s ease-out 0.1s both;
}

.root-coin-transaction-feedback__sparks i:nth-child(2) { --root-coin-spark-x: 1.85rem; --root-coin-spark-y: -1.5rem; animation-delay: 0.15s; }
.root-coin-transaction-feedback__sparks i:nth-child(3) { --root-coin-spark-x: 2.3rem; --root-coin-spark-y: 0.25rem; animation-delay: 0.2s; }
.root-coin-transaction-feedback__sparks i:nth-child(4) { --root-coin-spark-x: -1.65rem; --root-coin-spark-y: -1.2rem; animation-delay: 0.18s; }
.root-coin-transaction-feedback__sparks i:nth-child(5) { --root-coin-spark-x: -1.9rem; --root-coin-spark-y: 0.45rem; animation-delay: 0.24s; }

.root-coin-transaction-feedback-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes root-coin-feedback-rise {
  0% {
    opacity: 0;
    transform: translate3d(-50%, calc(-30% - var(--root-coin-feedback-stack-offset, 0rem)), 0) scale(0.76);
  }
  14%, 66% { opacity: 1; }
  22% {
    transform: translate3d(-50%, calc(-72% - var(--root-coin-feedback-stack-offset, 0rem)), 0) scale(1.03);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, calc(-185% - var(--root-coin-feedback-stack-offset, 0rem)), 0) scale(0.98);
  }
}

@keyframes root-coin-feedback-coin {
  0% { transform: rotate(-18deg) scale(0.72); }
  22% { transform: rotate(8deg) scale(1.08); }
  100% { transform: rotate(22deg) scale(1); }
}

@keyframes root-coin-feedback-spark {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--root-coin-spark-x), var(--root-coin-spark-y), 0) scale(0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .root-coin-transaction-feedback {
    animation: root-coin-feedback-fade 0.42s ease-out forwards;
    animation-duration: 0.42s !important;
    animation-iteration-count: 1 !important;
  }

  .root-coin-transaction-feedback__coin { animation: none; }
  .root-coin-transaction-feedback__sparks { display: none; }
}

@keyframes root-coin-feedback-fade {
  0% { opacity: 0; transform: translate3d(-50%, -66%, 0) scale(1); }
  24%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-50%, -66%, 0) scale(1); }
}