@import url("/payment-trust.css?v=IRecwNN_R_YZ");
body:has(#account-credit-purchase-card:not(.hidden)) { overflow: hidden; }
html:has(#account-credit-purchase-card:not(.hidden)) { overflow: hidden; scrollbar-gutter: auto; }
body:has(#account-credit-purchase-card:not(.hidden)) #account-main-grid > #account-sidebar {
  position: fixed; inset: 0; z-index: 100; display: grid !important; place-items: center;
  width: 100%; max-width: none; padding: 24px !important;
  background: #142c2466; backdrop-filter: blur(9px); overflow-y: auto;
}
body #account-main-grid #account-sidebar #account-credit-purchase-card {
  position: relative; width: min(720px, 100%); max-height: calc(100dvh - 48px);
  overflow-y: auto; overflow-x: hidden; gap: 24px; padding: 30px;
  border: 0; border-radius: 30px; background: #fff;
  box-shadow: 0 24px 80px #13282030; color: #1c2032;
  font-family: "Inter", sans-serif;
}
#account-credit-purchase-card *, #account-credit-purchase-card button { font-family: inherit; }
#account-credit-purchase-card > .section-heading::before,
#account-credit-purchase-card > .section-heading::after { display: none !important; }
#account-credit-purchase-card .section-heading > div { min-width: 0; flex: 1; }
#account-credit-purchase-card .section-heading p { white-space: normal; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer:focus-within:not(:has(input:focus-visible)) { outline: none; }
body #account-sidebar #account-credit-purchase-card .section-heading {
  display: flex; align-items: center; gap: 18px; padding: 0 28px 10px 0; border: 0;
}
body #account-sidebar #account-credit-purchase-card .section-heading h2 {
  font: 750 clamp(24px, 2.3vw, 32px)/1.15 "Inter", sans-serif;
  letter-spacing: -.035em; color: #1c2032;
  max-width: none; width: auto;
}
#account-credit-purchase-card .section-heading p { margin: 8px 0 0; font-size: 18px; line-height: 1.35; color: #858b99; }
#account-credit-purchase-card .credit-heart { color: #0eb47a; }
.credit-heading-icon { display: grid; place-items: center; flex: 0 0 72px; height: 72px; border-radius: 50%; background: #e1f6ef; color: #008361; font-size: 46px; }
:is(#account-credit-purchase-card, #credit-required-dialog) :is(#account-credit-offers, #credit-required-offers) { display: grid; grid-template-columns: 1fr; gap: 20px; }
body :is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 132px;
  position: relative; align-items: center; column-gap: 24px; min-height: 150px;
  padding: 22px; border: 1px solid #e6e9ed; border-radius: 21px;
  background: #fff; box-shadow: 0 8px 24px #203c2c05; cursor: pointer;
}
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer:has(input:checked) { border-color: #08a55c !important; background: #f0faf5 !important; box-shadow: 0 0 0 1px #08a55c; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer input { appearance: none; display: block; position: static; opacity: 1; width: 30px; height: 30px; margin: 0; border: 2px solid #999faa; border-radius: 50%; background: #fff; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer input:checked { border-color: #078550; background: #088751; box-shadow: inset 0 0 0 4px white; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer:focus-within { outline: 3px solid #92d9b5; outline-offset: 3px; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer::after { position: absolute; right: 15px; top: 50%; width: 10px; height: 6px; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer-copy { gap: 10px; padding: 0; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer-copy > strong { font-size: 28px; font-weight: 750; line-height: 1.15; color: #1c2032; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer-copy .credit-usage { display: block; font-size: 17px; font-weight: 400; line-height: 1.35; white-space: normal; color: #858b99; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer-copy .credit-package-tag { display: inline-flex; justify-self: start; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 14px; background: #e1f6ec; color: #09814f; font-size: 14px; font-weight: 600; white-space: normal; }
.credit-package-tag > span { font-size: 20px; line-height: 1; }
.credit-discount { position: absolute; top: 22px; right: 178px; padding: 7px 11px; border-radius: 18px; background: #ff3672; color: white; font-size: 18px; font-weight: 700; line-height: 1; }
.credit-price { display: grid; gap: 10px; align-content: center; padding-right: 10px; white-space: nowrap; }
.credit-price del { color: #969ca7; font-size: 22px; font-weight: 500; }
.credit-price strong { font-size: 30px; font-weight: 750; color: #08754d; line-height: 1.1; }
body :is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-purchase-actions { display: grid; grid-template-columns: 1fr 2.25fr; gap: 20px; margin: 6px 0 0; }
body :is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-purchase-actions button { min-width: 0; min-height: 66px; height: auto; padding: 12px; border-radius: 18px; font-size: 19px; font-weight: 650; gap: 10px; box-shadow: none; }
:is(#account-credit-purchase-card, #credit-required-dialog) :is(#account-credit-purchase-button, #credit-required-account) { background: linear-gradient(110deg,#108554,#21b975); color: white; }
#account-credit-purchase-card #account-credit-back-button { color: #0c8051; background: #fff; border: 1px solid #e4e9e6; }
#account-credit-purchase-card .account-credit-purchase-status.credit-status-default { display: none; }
.credit-trust-row { display: grid; grid-template-columns: 1.2fr 1fr .9fr; gap: 18px; margin-top: 8px; color: #858c9b; font-size: 13px; line-height: 1.35; }
.credit-trust-row > span { display: flex; align-items: center; gap: 10px; }
.credit-trust-row img { width: 27px; height: 27px; }
.credit-trust-row svg { width: 27px; height: 27px; flex: 0 0 27px; fill: none; stroke: #128663; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.credit-trust-row strong { color: #616a7a; font-weight: 600; }
.credit-trust-card, .credit-trust-flash { font-size: 30px; color: #128663; line-height: 1; }
/* Keep one composition and scale the whole card to the available viewport. */
body:has(#account-credit-purchase-card:not(.hidden)) #account-main-grid > #account-sidebar {
  padding: 0 !important; overflow: hidden; width: 100vw; height: 100dvh; box-sizing: border-box; scrollbar-gutter: auto !important;
  zoom: var(--credit-overlay-zoom, 1);
}
body #account-main-grid #account-sidebar #account-credit-purchase-card {
  width: 720px; min-width: 720px; max-width: none; height: auto; max-height: none;
  overflow: visible; zoom: var(--credit-card-scale, .45); align-self: center; justify-self: center;
}
body #account-sidebar #account-credit-purchase-card .section-heading h2 { font-size: 36px; }
/* Reference typography, in the same unscaled 720px coordinate system. */
body #account-sidebar #account-credit-purchase-card .section-heading { gap: 20px; padding-right: 26px; }
#account-credit-purchase-card .section-heading p { font-size: 22px; }
body :is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer {
  min-height: 170px; grid-template-columns: 34px minmax(0, 1fr) 162px; column-gap: 22px;
}
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer-copy > strong { font-size: 33px; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer-copy .credit-usage { font-size: 20px; white-space: nowrap; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer-copy .credit-package-tag { font-size: 18px; white-space: nowrap; }
:is(#account-credit-purchase-card, #credit-required-dialog) .credit-discount { top: 24px; right: 232px; font-size: 21px; font-weight: 700; color: #fff; }
:is(#account-credit-purchase-card, #credit-required-dialog) .credit-price { padding-left: 4px; }
:is(#account-credit-purchase-card, #credit-required-dialog) .credit-price del { font-size: 26px; }
:is(#account-credit-purchase-card, #credit-required-dialog) .credit-price strong { font-size: 35px; }
body :is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-purchase-actions button {
  min-height: 80px; font-size: 25px; gap: 16px;
}
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-purchase-actions button::before,
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-purchase-actions button::after { width: 26px; height: 26px; flex: 0 0 26px; }
:is(#account-credit-purchase-card, #credit-required-dialog) .credit-trust-row { font-size: 15px; margin-top: 16px; }

/* First purchase adds activation details; ordinary top-ups keep their layout. */
body #account-sidebar #account-credit-purchase-card.is-new-account-purchase .section-heading h2 { font-size:31px; line-height:1.18; letter-spacing:-.7px; white-space:nowrap; }
#account-credit-purchase-card.is-new-account-purchase .section-heading p { font-size:19px; line-height:1.35; }
#account-credit-purchase-card.is-new-account-purchase .account-credit-offer { min-height:155px; padding-bottom:46px; }
#account-credit-purchase-card.is-new-account-purchase .account-credit-offer-copy { gap:7px; }
#account-credit-purchase-card.is-new-account-purchase .credit-included-song { display:inline-flex; align-items:center; gap:9px; justify-self:start; border-radius:22px; padding:6px 12px; background:#e1f6ec; color:#005c38; font-size:18px; font-weight:650; white-space:nowrap; }
#account-credit-purchase-card.is-new-account-purchase .credit-included-song svg { width:23px; height:23px; flex:none; }
#account-credit-purchase-card.is-new-account-purchase .credit-package-tag { position:absolute; right:20px; bottom:14px; font-size:15px; padding:6px 12px; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer:nth-child(2) .credit-package-tag { background:#ffe9f5; color:#ed0088; }
:is(#account-credit-purchase-card, #credit-required-dialog) .account-credit-offer:nth-child(3) .credit-package-tag { background:#e0f3ff; color:#0075ff; }
#account-credit-purchase-card.is-new-account-purchase .account-credit-offer:nth-child(4) .credit-package-tag { background:#fff0d0; color:#ad6900; }
#account-credit-purchase-card .credit-activation-benefits[hidden] { display:none; }
#account-credit-purchase-card .credit-activation-benefits { display:grid; grid-template-columns:1.2fr 1fr 1.05fr; gap:10px; padding:8px 0; color:#101c31; font-size:16px; line-height:1.35; }
#account-credit-purchase-card .credit-activation-benefits>span { display:flex; align-items:center; gap:12px; min-width:0; }
#account-credit-purchase-card .credit-activation-benefits>span+span { border-left:1px solid #e1e5e7; padding-left:12px; }
#account-credit-purchase-card .credit-activation-benefits i { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; flex:none; background:linear-gradient(135deg,#e5f8ef,#def6ef); color:#00865d; font-style:normal; }
#account-credit-purchase-card .credit-activation-benefits svg { display:block; width:30px; height:30px; }

#account-credit-purchase-card.is-new-account-purchase .credit-included-song { position:absolute; left:86px; bottom:14px; }

body #account-sidebar #account-credit-purchase-card.is-new-account-purchase .section-heading { padding-right:0; gap:16px; }

/* Shared desktop composition for both membership states. Browser zoom preserves its layout. */
body:has(#account-credit-purchase-card:not(.hidden)) #account-main-grid > #account-sidebar.credit-purchase-desktop {
  overflow: auto; display: grid !important; place-items: safe center; padding: 12px !important;
}
body #account-main-grid #account-sidebar.credit-purchase-desktop #account-credit-purchase-card {
  box-sizing: border-box; max-height: none; zoom: calc(var(--credit-card-scale, 1) * .7); display: grid; grid-template-rows: auto 1fr auto auto; width: 1000px; min-width: 1000px; max-width: 1000px; min-height: 0; margin: auto; background: radial-gradient(ellipse at 20% 95%,#dff6ee 0,transparent 36%),#fff; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); border-radius: 20px; column-gap: 28px; row-gap: 20px; padding: 40px 32px 28px;
}
body #account-sidebar.credit-purchase-desktop #account-credit-purchase-card > .section-heading {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 0; min-width: 0; gap: 22px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .section-heading > div {
  width: 100%;
}
body #account-sidebar.credit-purchase-desktop #account-credit-purchase-card .section-heading h2 {
  line-height: 1.12; white-space: normal; font-size: 32px; letter-spacing: -1px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .section-heading p {
  line-height: 1.4; font-size: 16px; margin-top: 12px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-heading-icon {
  flex-basis: auto; width: 56px; height: 56px; border-radius: 18px; font-size: 36px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card #account-credit-offers {
  grid-column: 2; grid-row: 1 / 3; align-content: start; gap: 10px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-offer {
  border-radius: 13px; grid-template-columns: 24px minmax(0,1fr) 130px; column-gap: 12px; padding: 13px 14px 32px; min-height: 104px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-offer-copy > strong {
  font-size: 22px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-usage {
  font-size: 13px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-price del {
  font-size: 14px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-price strong {
  font-size: 30px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-discount {
  top: 13px; right: 162px; padding: 4px 8px; font-size: 14px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-included-song {
  gap: 4px; padding: 3px 7px; left: 230px; bottom: 8px; font-size: 12px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-package-tag {
  gap: 4px; padding: 3px 7px; position: absolute; left: 50px; right: auto; bottom: 8px; font-size: 11px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-activation-benefits {
  grid-column: 1; grid-row: 2; grid-template-columns: 1fr; align-content: start; font-size: 15px; gap: 16px; padding: 6px 0 0;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-activation-benefits>span {
  gap: 16px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-activation-benefits>span+span {
  border: 0; padding: 0;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-activation-benefits i {
  width: 46px; height: 46px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-purchase-actions {
  grid-column: 2; grid-row: 3; border-top: 1px solid #e4e9ed; margin: 0; gap: 12px; padding-top: 20px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-purchase-actions button {
  gap: 8px; border-radius: 10px; min-height: 48px; font-size: 17px; padding: 10px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .payment-trust {
  display: contents;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .payment-trust-secure {
  grid-column: 1; grid-row: 3; border-top: 1px solid #e4e9ed; align-self: start; padding-top: 20px; font-size: 12px; gap: 10px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .payment-trust-brands {
  grid-column: 2; grid-row: 4; max-width: 100%; border: 0; padding: 0; justify-self: center; width: 260px; min-height: 24px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-purchase-status:not(.credit-status-default) {
  grid-column: 2; grid-row: 5;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-offer input {
  width: 22px; height: 22px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-offer-copy {
  gap: 4px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-price {
  padding: 0; gap: 6px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-included-song svg {
  width: 16px; height: 16px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-package-tag>span {
  font-size: 13px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .credit-activation-benefits svg {
  width: 28px; height: 28px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-purchase-actions button::before,
  #account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-purchase-actions button::after {
  width: 20px; height: 20px; flex-basis: 20px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .payment-trust-secure svg {
  width: 28px; height: 28px; flex-basis: 28px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .payment-trust-brands img {
  height: 24px;
}
#account-sidebar.credit-purchase-desktop #account-credit-purchase-card .account-credit-offer:nth-child(4) .credit-package-tag {
  background: #fff0d0; color: #ad6900;
}