#goal {
  position: absolute; left: 90px; width: 900px;
  padding: 22px 28px 26px;
  background: linear-gradient(115deg, var(--slab), var(--slab-2));
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
  transform-origin: 50% 50%;
}
body[data-kind="like"] #goal { top: 200px; }
body[data-kind="gift"] #goal { top: 356px; }

#goal .head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
#goal .icon { font-size: 34px; line-height: 1; color: var(--hot); }
#goal .label {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 800 30px/1.1 var(--display); letter-spacing: .01em; text-transform: uppercase;
}
#goal .nums { font: 800 34px/1 var(--body); font-variant-numeric: tabular-nums; }
#goal .nums .cur { color: var(--accent); font-family: var(--display); }
#goal .nums .sep { margin: 0 8px; color: var(--ink-soft); }
#goal .nums .tgt { color: var(--ink-soft); }

#goal .track { position: relative; height: 34px; border-radius: 999px; background: var(--track); }
#goal .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px; background: var(--accent); overflow: hidden;
  box-shadow: var(--glow);
}
#goal .stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 28px, transparent 28px 56px);
  background-size: 112px 100%;
}
#goal .spark {
  position: absolute; top: 50%; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, var(--accent) 30%, transparent 70%);
}
#goal .done {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 18px; text-align: center; opacity: 0;
  font: 800 52px/1 var(--display); color: var(--accent); text-shadow: 0 4px 24px rgba(0,0,0,.5);
}