.cs-received-gift {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 126px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #e8d5f7;
  border-radius: 20px;
  background: radial-gradient(circle at 20% 15%, #fff2fa, transparent 42%), linear-gradient(145deg, #fbf4ff, #fff);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.cs-received-gift:hover,
.cs-received-gift:focus-visible {
  transform: translateY(-4px) rotate(-1deg);
  border-color: #d87ce6;
  box-shadow: 0 14px 28px #9d38b52b;
  outline: none;
}

.cs-received-gift-art {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px #38144a24);
  transition: transform .25s cubic-bezier(.2, 1.8, .4, 1);
}

.cs-received-gift:hover .cs-received-gift-art {
  transform: scale(1.12) rotate(5deg);
}

.cs-received-gift-count {
  display: inline-flex;
  min-width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4fa0, #9b44dc 58%, #4d6bff);
  box-shadow: 0 5px 14px #9b44dc55;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.cs-gift-modal {
  position: relative;
  display: flex;
  min-height: 520px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px 30px 34px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 10%, #fbe1ff 0, transparent 44%),
    radial-gradient(ellipse at 90% 85%, #dffaff 0, transparent 38%),
    #fff;
  text-align: center;
  animation: csGiftModalEnter .85s cubic-bezier(.16, 1.35, .35, 1) both;
}

.cs-gift-modal:before,
.cs-gift-modal:after {
  position: absolute;
  z-index: 0;
  top: 140px;
  left: 50%;
  width: 240px;
  height: 240px;
  border: 1px solid #c84dd02b;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: csGiftRing 1.15s cubic-bezier(.16, 1, .3, 1) both;
}

.cs-gift-modal:after {
  width: 330px;
  height: 330px;
  border-color: #258dce25;
  animation-delay: .12s;
}

.cs-gift-modal-burst {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 0;
  width: 300px;
  height: 300px;
  margin-left: -150px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0, #fff8 8%, #ff72d188 20%, #9c47db34 43%, transparent 69%),
    conic-gradient(from 0deg, transparent 0 8deg, #fff6 8deg 10deg, transparent 10deg 23deg, #ff84d46b 23deg 25deg, transparent 25deg 43deg, #fff6 43deg 45deg, transparent 45deg 68deg, #70dfff70 68deg 70deg, transparent 70deg 87deg, #fff6 87deg 89deg, transparent 89deg);
  opacity: 0;
  filter: blur(.35px);
  animation: csGiftBurst 1.2s cubic-bezier(.16, 1, .3, 1) both;
  pointer-events: none;
}

.cs-gift-modal-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
}

.cs-gift-modal-art-wrap,
.cs-gift-modal-copy,
.cs-gift-modal-form {
  position: relative;
  z-index: 1;
}

.cs-gift-modal-art-wrap {
  display: grid;
  width: 196px;
  height: 196px;
  place-items: center;
  margin-bottom: 19px;
  animation: csGiftHero .9s .05s cubic-bezier(.16, 1.7, .35, 1) both;
}

.cs-gift-modal-art {
  position: relative;
  z-index: 2;
  width: 146px;
  height: 146px;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px #48136042);
  animation: csGiftFloat 3.5s 1s ease-in-out infinite;
}

.cs-gift-modal-orbit {
  position: absolute;
  border: 1px solid #b44cc44f;
  border-radius: 50%;
  transform: rotate(-22deg);
}

.cs-gift-modal-orbit-one {
  width: 190px;
  height: 68px;
}

.cs-gift-modal-orbit-two {
  width: 178px;
  height: 100px;
  border-color: #32a9d44a;
  transform: rotate(48deg);
}

.cs-gift-modal-name {
  margin: 0 auto 10px;
  color: #21102c;
  font-size: clamp(30px, 7vw, 46px);
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: .98;
  text-transform: uppercase;
  text-wrap: balance;
}

.cs-gift-modal-description {
  max-width: 440px;
  margin: 0 auto 22px;
  color: #605569;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.65;
  text-wrap: balance;
}

.cs-gift-modal-form {
  width: 100%;
}

.cs-gift-modal-form .btn {
  min-height: 48px;
  padding: 10px 22px;
  border: 0;
  background: linear-gradient(110deg, #e83d91, #963ed2 55%, #4f6ced);
  box-shadow: 0 9px 24px #993bbd42;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cs-gift-modal-form .btn:hover {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 13px 28px #993bbd58;
}

@keyframes csGiftModalEnter {
  0% { opacity: 0; transform: scale(.72) translateY(58px) rotate(-4deg); }
  52% { opacity: 1; transform: scale(1.04) translateY(-8px) rotate(1deg); }
  72% { transform: scale(.985) translateY(2px) rotate(-.4deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}

@keyframes csGiftHero {
  0% { opacity: 0; transform: translateY(34px) scale(.08) rotate(-220deg); filter: blur(12px); }
  58% { opacity: 1; transform: translateY(-12px) scale(1.2) rotate(18deg); filter: blur(0); }
  78% { transform: translateY(4px) scale(.94) rotate(-7deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes csGiftFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes csGiftRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(-22deg); }
  35% { opacity: .85; }
  100% { opacity: .42; transform: translate(-50%, -50%) scale(1.08) rotate(18deg); }
}

@keyframes csGiftBurst {
  0% { opacity: 0; transform: scale(.22) rotate(-35deg); }
  42% { opacity: .92; }
  100% { opacity: .3; transform: scale(1.12) rotate(28deg); }
}

body.night-mode .cs-received-gift {
  border-color: #5b3a70;
  background: radial-gradient(circle at 20% 15%, #633b63, transparent 42%), linear-gradient(145deg, #312b3a, #253341);
}

body.night-mode .cs-gift-modal {
  background:
    radial-gradient(ellipse at 50% 10%, #633b63 0, transparent 44%),
    radial-gradient(ellipse at 90% 85%, #214c5a 0, transparent 38%),
    #253341;
}

body.night-mode .cs-gift-modal-name { color: #fff; }
body.night-mode .cs-gift-modal-description { color: #d4c9dc; }

@media (max-width: 575px) {
  .cs-gift-modal { min-height: 460px; padding: 40px 20px 28px; }
  .cs-gift-modal-art-wrap { width: 170px; height: 170px; }
  .cs-gift-modal-art { width: 128px; height: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-gift-modal,
  .cs-gift-modal:before,
  .cs-gift-modal:after,
  .cs-gift-modal-burst,
  .cs-gift-modal-art {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}