.membership-status-panel { margin-top: 24px; }
.membership-status-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.membership-status-copy { margin: 16px 0; font-size: 14px; line-height: 1.65; }
.membership-status-panel > .button { margin-top: 8px; }
.membership-preview { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.membership-preview h3 { font-size: 16px; }
.membership-preview .minor { margin-top: 8px; }
.membership-preview .filters { margin: 16px 0 0; }
.membership-dialog { border: 1px solid #d8e5eb; border-radius: 12px; padding: 0; background: var(--canvas); color: var(--ink); width: min(650px,calc(100% - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 24px 80px rgba(20,49,67,.2); }
.membership-dialog::backdrop { background: rgba(15,44,60,.46); }
.membership-dialog .dialog-header { align-items: flex-start; }
.membership-dialog h2 { font-size: 25px; }
.membership-intro { font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.membership-renew-price { margin: 24px 0; }
.membership-renew-price > strong { font-size: 21px; font-weight: 600; line-height: 1.4; }
.membership-renew-price .minor { margin-top: 12px; }
.membership-offers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 24px; gap: 24px; padding: 20px 0; border-block: 1px solid var(--line); }
.membership-offers h3 { font-size: 16px; }
.membership-offers p { font-size: 14px; margin-top: 8px; }
.membership-payment { display: grid; gap: 12px; margin-top: 24px; }
.membership-payment .minor { text-align: center; }
.membership-payment .button:disabled { cursor: not-allowed; opacity: .58; }
.membership-entry { max-width: 760px; margin: 16px auto; padding: 32px; }
.membership-entry h1 { margin-bottom: 20px; }
.membership-entry-history { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.membership-entry-history h2 { font-size: 22px; }
.membership-entry-history p { font-size: 15px; line-height: 1.7; margin-top: 12px; }
.membership-entry > .button { margin-top: 24px; }
@media(max-width:640px) {
  .membership-status-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .membership-status-panel > .button { width: 100%; }
  .membership-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .membership-dialog .dialog-header, .membership-dialog .dialog-body { padding: 20px; }
  .membership-dialog h2 { font-size: 23px; }
  .membership-offers { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .membership-entry { margin: 0; padding: 24px 20px; }
  .membership-entry h1 { font-size: 27px; }
  .membership-entry > .button { width: 100%; }
}