#transactions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.activity-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 2px 0 18px;
}

.filter-group {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 13px;
  background: #edf0f4;
}

.filter-group button {
  border: 0;
  border-radius: 10px;
  padding: 9px 13px;
  color: #647087;
  background: transparent;
  font-weight: 750;
}

.filter-group button.active {
  color: #183153;
  background: white;
  box-shadow: 0 2px 7px #24324b22;
}

.period-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #647087;
  font-size: .84rem;
}

.period-filter select {
  width: auto;
  min-width: 130px;
  margin: 0;
  padding: 9px 34px 9px 11px;
  border-width: 1px;
  font-size: .88rem;
}

.child-activity {
  min-width: 0;
  border: 1px solid #e7eaf0;
  border-radius: 20px;
  padding: 16px;
}

.child-activity-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.child-activity-title h3 {
  margin: 0;
  font-size: 1.12rem;
}

.activity-dot {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--child-color);
}

.child-activity .tx {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
}

.child-activity .tx-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: .9rem;
}

.child-activity .tx strong {
  overflow-wrap: anywhere;
}

.child-activity .amount {
  font-size: .88rem;
}

.empty {
  color: #7c8799;
  font-size: .9rem;
  margin: 18px 0 4px;
}

.celebration {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
}

.celebration.show { visibility: visible; }

.celebration-message {
  position: relative;
  z-index: 2;
  padding: 13px 20px;
  border-radius: 999px;
  color: white;
  background: #183153;
  font-size: 1.05rem;
  font-weight: 850;
  box-shadow: 0 12px 36px #17233c42;
  animation: message-pop 1.7s both;
}

.celebration.give .celebration-message { background: #9b5de5; }
.celebration.save .celebration-message { background: #258a61; }
.celebration.spend.withdrawal .celebration-message { background: #6d7788; }

.celebration i {
  position: absolute;
  left: 50%;
  top: 49%;
  color: var(--color);
  font-size: 1.35rem;
  font-style: normal;
  animation: particle-burst 1.35s var(--delay) cubic-bezier(.2,.7,.25,1) both;
}

.celebration.give i { font-size: 1.75rem; }
.celebration.spend i { animation-name: coin-drop; }

@keyframes message-pop {
  0% { opacity: 0; transform: scale(.7); }
  16%, 72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96); }
}

@keyframes particle-burst {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), 230px) rotate(var(--r)) scale(1); }
}

@keyframes coin-drop {
  0% { opacity: 0; transform: translate(var(--x), -150px) rotate(0); }
  18% { opacity: 1; }
  72% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--x), 240px) rotate(var(--r)); }
}

@media (max-width: 760px) {
  #transactions { grid-template-columns: 1fr; }
  .activity-filters { align-items: stretch; flex-direction: column; }
  .filter-group { display: grid; grid-template-columns: repeat(4, 1fr); }
  .filter-group button { padding-inline: 7px; }
  .period-filter { justify-content: space-between; }
}