.credit-purchase-strip {
  align-items: center;
  background: linear-gradient(110deg, rgba(242, 184, 75, .13), rgba(111, 53, 189, .17));
  border: 1px solid rgba(242, 184, 75, .23);
  border-radius: 22px;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  margin-top: 18px;
  padding: 24px;
}

.credit-purchase-strip h3 {
  font-size: 1.35rem;
  margin: 6px 0 8px;
}

.credit-purchase-strip p:last-child {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}

.credit-purchase-strip button,
.credit-purchase-strip .credit-purchase-link {
  flex: 0 0 auto;
}

.payment-notice {
  background: rgba(242, 184, 75, .1);
  border: 1px solid rgba(242, 184, 75, .3);
  border-radius: 14px;
  color: #f6d99f;
  margin: 18px 0 0;
  padding: 14px 18px;
}

.payment-notice.success {
  background: rgba(61, 184, 128, .13);
  border-color: rgba(61, 184, 128, .35);
  color: #91e3ba;
}

.credit-dialog {
  max-width: 560px;
}

.credit-pack-list {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.credit-pack-list > .loader {
  margin: 12px auto;
}

.credit-pack-list > .list-empty {
  text-align: center;
}

.credit-pack-list article {
  align-items: center;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 16px;
}

.credit-pack-list article div {
  display: grid;
  gap: 6px;
}

.credit-pack-list article strong {
  font-size: 1.05rem;
}

.credit-pack-list article span {
  color: var(--gold);
  font-weight: 800;
}

.credit-pack-list article button {
  padding: 10px 17px;
}

.payment-mode {
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 750;
  margin: 18px 0 0;
  padding: 10px 13px;
}

.payment-mode.test {
  background: rgba(87, 199, 216, .11);
  border: 1px solid rgba(87, 199, 216, .28);
  color: #86dce7;
}

.payment-mode.live {
  background: rgba(61, 184, 128, .12);
  border: 1px solid rgba(61, 184, 128, .3);
  color: #91e3ba;
}

@media (max-width: 820px) {
  .credit-purchase-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .credit-purchase-strip button,
  .credit-purchase-strip .credit-purchase-link {
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .credit-purchase-strip { border-radius: 18px; gap: 15px; padding: 17px; }
  .credit-purchase-strip h3 { font-size: 1.18rem; }
  .payment-notice { font-size: .85rem; padding: 12px 14px; }
  .credit-pack-list { gap: 9px; margin: 18px 0; }
  .credit-pack-list article {
    align-items: stretch;
    border-radius: 14px;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }

  .credit-pack-list article button {
    width: 100%;
  }
}