.premium-price-display {
  display: grid;
  gap: 8px;
  margin: 8px 0 14px;
}

.premium-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.premium-price-label {
  color: var(--muted, #66708a);
  font: 750 12px/1.3 "DM Sans", system-ui, sans-serif;
}

.premium-price-standard .premium-price-amount {
  color: var(--ink, #17213b);
  font: 700 16px/1.3 Manrope, sans-serif;
}

.premium-price-intro .premium-price-amount {
  color: var(--ink, #17213b);
  font: 800 28px/1.15 Manrope, sans-serif;
}

.premium-price-note {
  margin: 0;
  color: var(--muted, #66708a);
  font: 650 13px/1.45 "DM Sans", system-ui, sans-serif;
}

#profileView .premium-price-display,
#billingCard .premium-price-display {
  padding: 12px 0 4px;
}

/* Default midnight profile card is a dark surface. --on-light is navy ink for cream fills
   and drops to ~1:1 on --card. Use on-dark tokens there. */
body[data-theme="midnight"] #billingCard:not(.premium-active) .premium-price-label,
body[data-theme="midnight"] #billingCard:not(.premium-active) .premium-price-note,
body[data-theme="midnight"] #billingCard:not(.premium-active) #billingSummary,
body[data-theme="midnight"] #billingCard:not(.premium-active) > p {
  color: var(--on-dark-muted, rgba(243, 246, 255, .82));
}

body[data-theme="midnight"] #billingCard:not(.premium-active) .premium-price-standard .premium-price-amount,
body[data-theme="midnight"] #billingCard:not(.premium-active) .premium-price-intro .premium-price-amount,
body[data-theme="midnight"] #billingCard:not(.premium-active) #billingTitle,
body[data-theme="midnight"] #billingCard:not(.premium-active) h3 {
  color: var(--on-dark, #f3f6ff);
}

/* Premium-active card keeps the cream/gold fill, so light-surface ink stays correct. */
body[data-theme="midnight"] #billingCard.premium-active .premium-price-label,
body[data-theme="midnight"] #billingCard.premium-active .premium-price-note {
  color: var(--on-light-muted, #3d4d73);
}

body[data-theme="midnight"] #billingCard.premium-active .premium-price-standard .premium-price-amount,
body[data-theme="midnight"] #billingCard.premium-active .premium-price-intro .premium-price-amount {
  color: var(--on-light, #101a37);
}

/* Midnight --green (#9a6cff) is ~3.5:1 as a control fill. Darken only plan CTAs. */
body[data-theme="midnight"] #billingCard .primary,
body[data-theme="midnight"] #billingCard button.primary {
  background: #5b35d6;
  color: #fff;
  border-color: transparent;
}

body[data-theme="midnight"] #billingCard .secondary,
body[data-theme="midnight"] #billingCard button.secondary {
  background: transparent;
  color: var(--on-dark, #f3f6ff);
  border: 1px solid var(--border-on-dark, rgba(243, 246, 255, .4));
}

body[data-theme="midnight"] #billingCard .primary:focus-visible,
body[data-theme="midnight"] #billingCard .secondary:focus-visible {
  outline: 2px solid #d7ccff;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .premium-price-row {
    flex-direction: column;
    gap: 2px;
  }

  .premium-price-intro .premium-price-amount {
    font-size: 24px;
  }
}