.subscription-settings .badge { margin-bottom: var(--space-2); }
.subscription-settings > .btn { margin-top: var(--space-3); }
.subscription-overview, .subscription-pending, .subscription-history { display: grid; gap: var(--space-3); padding: var(--space-4); box-shadow: none; }
.subscription-status, .subscription-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.subscription-status { justify-content: space-between; }
.subscription-overview h2, .subscription-pending h2, .subscription-history h2, .subscription-plans-section h2 { font-size: 20px; }
.subscription-overview > p, .subscription-pending > p, .subscription-plan > p { color: var(--muted); line-height: 1.65; }
.subscription-overview dl.review-list { margin: 0; }
.subscription-overview .review-row { gap: var(--space-3); }
.subscription-overview .review-row > * { min-width: 0; overflow-wrap: anywhere; }
.subscription-error { display: grid; justify-items: start; gap: var(--space-2); }
.subscription-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.subscription-plan { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); box-shadow: none; }
.subscription-plan h3 { font-size: 17px; }
.subscription-plan .subscription-price { display: grid; gap: var(--space-1); color: var(--brand-dark); font-size: 24px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.subscription-price > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.subscription-plan > .btn { margin-top: auto; }
.subscription-plan-note { margin-top: var(--space-3); }
.subscription-pending .btn { justify-self: start; }
.subscription-pending .field { min-width: 0; width: 100%; }
.subscription-pending textarea { overflow-wrap: anywhere; word-break: break-all; }
.subscription-pix-qr { width: 192px; max-width: 100%; height: auto; background: white; }
.subscription-payments { display: grid; gap: var(--space-3); }
.subscription-payment { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--space-3); min-width: 0; }
.subscription-payment-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); align-items: start; }
.subscription-payment-heading h3 { font-size: 14px; min-width: 0; }
.subscription-payment .badge { white-space: normal; }
.subscription-payment > strong { color: var(--brand-dark); font-size: 18px; font-variant-numeric: tabular-nums; }
.subscription-payment > p { display: flex; align-items: start; gap: var(--space-2); color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.subscription-payment > p > span { min-width: 0; }
.subscription-payment > p svg { flex: 0 0 auto; margin-top: var(--space-1); }
.subscription-history .section-title { margin-bottom: 0; }
@media (min-width: 768px) {
  .subscription-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .subscription-overview, .subscription-pending, .subscription-history, .subscription-plan { padding: var(--space-5); }
}
@media (max-width: 767px) {
  .subscription-page > * + * { margin-top: var(--space-3); }
  .subscription-overview, .subscription-pending, .subscription-history, .subscription-plan { padding: var(--space-3); }
  .subscription-overview h2, .subscription-pending h2, .subscription-history h2, .subscription-plans-section h2 { font-size: var(--mobile-font-section, 18px); }
  .subscription-plan h3 { font-size: var(--mobile-font-card, 16px); }
  .subscription-overview > p, .subscription-pending > p, .subscription-plan > p:not(.subscription-price) { font-size: var(--mobile-font-body, 14px); }
}