.quick-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.history-record-button {
  padding: 7px 9px;
  border: 1px solid #aebca9;
  border-radius: 9px;
  background: #f7f9f4;
  color: #456237;
  cursor: pointer;
  font: 700 12px inherit;
}

.history-record-panel {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #cdd8c8;
  border-radius: 14px;
  background: #edf3e7;
}

.history-record-panel > label {
  display: block;
  margin-bottom: 8px;
  color: #547047;
  font-size: 12px;
  font-weight: 800;
}

.history-record-panel > div {
  display: flex;
  gap: 8px;
}

.history-record-panel input {
  height: 40px;
  border-radius: 9px;
  background: #fff;
}

.history-record-panel button {
  flex: 0 0 auto;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font: 700 12px inherit;
}

.celebration-layer {
  position: fixed;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.celebration-layer i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 17px;
  border-radius: 2px;
  background: #d4f05a;
  opacity: 0;
  --delay: 0s;
  --duration: 3.7s;
  --burst-x: 0px;
  --burst-y: -180px;
  --drift: 20px;
  --turn: 540deg;
}

.celebration-layer.active i {
  animation: green-confetti var(--duration) cubic-bezier(.16, .72, .28, 1) var(--delay) forwards;
}

.celebration-layer i:nth-child(21n + 1) { --burst-x: -255px; --burst-y: -105px; --turn: -620deg; }
.celebration-layer i:nth-child(21n + 2) { --burst-x: -205px; --burst-y: -225px; --turn: 760deg; }
.celebration-layer i:nth-child(21n + 3) { --burst-x: -165px; --burst-y: -145px; --turn: -470deg; }
.celebration-layer i:nth-child(21n + 4) { --burst-x: -120px; --burst-y: -280px; --turn: 680deg; }
.celebration-layer i:nth-child(21n + 5) { --burst-x: -82px; --burst-y: -180px; --turn: -810deg; }
.celebration-layer i:nth-child(21n + 6) { --burst-x: -38px; --burst-y: -245px; --turn: 430deg; }
.celebration-layer i:nth-child(21n + 7) { --burst-x: 8px; --burst-y: -305px; --turn: -690deg; }
.celebration-layer i:nth-child(21n + 8) { --burst-x: 42px; --burst-y: -170px; --turn: 850deg; }
.celebration-layer i:nth-child(21n + 9) { --burst-x: 88px; --burst-y: -255px; --turn: -520deg; }
.celebration-layer i:nth-child(21n + 10) { --burst-x: 135px; --burst-y: -135px; --turn: 710deg; }
.celebration-layer i:nth-child(21n + 11) { --burst-x: 178px; --burst-y: -235px; --turn: -780deg; }
.celebration-layer i:nth-child(21n + 12) { --burst-x: 225px; --burst-y: -155px; --turn: 560deg; }
.celebration-layer i:nth-child(21n + 13) { --burst-x: 270px; --burst-y: -70px; --turn: -640deg; }
.celebration-layer i:nth-child(21n + 14) { --burst-x: -230px; --burst-y: 15px; --turn: 730deg; }
.celebration-layer i:nth-child(21n + 15) { --burst-x: -145px; --burst-y: -35px; --turn: -580deg; }
.celebration-layer i:nth-child(21n + 16) { --burst-x: -65px; --burst-y: 45px; --turn: 820deg; }
.celebration-layer i:nth-child(21n + 17) { --burst-x: 25px; --burst-y: -55px; --turn: -740deg; }
.celebration-layer i:nth-child(21n + 18) { --burst-x: 95px; --burst-y: 35px; --turn: 490deg; }
.celebration-layer i:nth-child(21n + 19) { --burst-x: 155px; --burst-y: -20px; --turn: -860deg; }
.celebration-layer i:nth-child(21n + 20) { --burst-x: 215px; --burst-y: 55px; --turn: 650deg; }
.celebration-layer i:nth-child(21n) { --burst-x: 285px; --burst-y: 5px; --turn: -530deg; }

.celebration-layer i:nth-child(7n + 1) { background: #d4f05a; }
.celebration-layer i:nth-child(7n + 2) { background: #9acb5a; }
.celebration-layer i:nth-child(7n + 3) { background: #4b8a50; }
.celebration-layer i:nth-child(7n + 4) { background: #1d5136; }
.celebration-layer i:nth-child(7n + 5) { background: #e5f7a4; }
.celebration-layer i:nth-child(7n + 6) { background: #6eaa46; }
.celebration-layer i:nth-child(7n) { background: #bddd75; }

.celebration-layer i:nth-child(4n + 1) { width: 6px; height: 15px; }
.celebration-layer i:nth-child(4n + 2) { width: 10px; height: 10px; border-radius: 50%; }
.celebration-layer i:nth-child(4n + 3) { width: 7px; height: 21px; }

.celebration-layer i:nth-child(5n + 1) { --delay: .04s; --duration: 3.35s; --drift: -55px; }
.celebration-layer i:nth-child(5n + 2) { --delay: .18s; --duration: 4.1s; --drift: 72px; }
.celebration-layer i:nth-child(5n + 3) { --delay: .31s; --duration: 3.7s; --drift: -24px; }
.celebration-layer i:nth-child(5n + 4) { --delay: .11s; --duration: 4.35s; --drift: 38px; }
.celebration-layer i:nth-child(5n) { --delay: .26s; --duration: 3.9s; --drift: -76px; }

@keyframes green-confetti {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(0) scale(.25);
  }
  8% {
    opacity: 1;
  }
  42% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y)), 0) rotate(var(--turn)) scale(1);
  }
  70% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--burst-x) + var(--drift)), calc(-50% + var(--burst-y) + 62vh), 0) rotate(calc(var(--turn) + 540deg)) scale(.8);
  }
}

@media (max-width: 480px) {
  #workoutPanel .section-heading {
    align-items: flex-start;
  }

  .quick-actions {
    flex-direction: column;
    align-items: flex-end;
  }

  .history-record-panel > div {
    flex-direction: column;
  }

  .history-record-panel button {
    height: 40px;
  }
}