.subscription-page { min-width: 0; display: grid; gap: 24px; }
.subscription-page .heading { margin-bottom: 0; }
.subscription-summary, .subscription-pending, .subscription-history { min-width: 0; padding: 24px; overflow-wrap: anywhere; }
.subscription-current, .subscription-usage > div { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.subscription-current h2 { margin: 6px 0; font-size: 24px; }
.subscription-current p, .subscription-copy, .subscription-usage p, .subscription-pending p, .subscription-history p { color: var(--muted); line-height: 1.6; }
.subscription-status, .subscription-current-label { display: inline-flex; align-items: center; padding: 6px 10px; color: var(--text-subtle); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; text-transform: capitalize; }
.subscription-status[data-status='ACTIVE'] { color: var(--success); background: var(--success-soft); }
.subscription-status:is([data-status='EXPIRED'], [data-status='SUSPENDED'], [data-status='CANCELED']) { color: var(--warning); background: var(--warning-soft); }
.subscription-usage { margin-top: 20px; }
.subscription-usage > div { color: var(--text-subtle); font-size: 14px; }
.subscription-usage progress { display: block; width: 100%; height: 10px; margin-top: 12px; accent-color: var(--brand); border: 0; border-radius: 8px; overflow: hidden; }
.subscription-usage progress::-webkit-progress-bar { background: var(--surface-soft); }
.subscription-usage progress::-webkit-progress-value { background: var(--brand); }
.subscription-usage p { margin-bottom: 0; font-size: 12px; }
.subscription-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 18px; margin: 18px 0 0; border-top: 1px solid var(--border); }
.subscription-details dt { color: var(--muted); font-size: 12px; }
.subscription-details dd { color: var(--text); margin: 6px 0 0; overflow-wrap: anywhere; }
.subscription-notice { padding: 14px 16px; color: var(--text-subtle); background: var(--surface-soft); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 8px; line-height: 1.6; overflow-wrap: anywhere; }
.subscription-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.subscription-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.subscription-plan { display: flex; flex-direction: column; min-width: 0; padding: 22px; }
.subscription-plan[data-current='true'] { border-color: var(--brand); }
.subscription-plan h3 { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 17px; }
.subscription-current-label { color: var(--brand); background: var(--brand-soft); padding: 3px 8px; font-size: 10px; }
.subscription-plan p { color: var(--muted); }
.subscription-price { margin-bottom: 22px; color: var(--text); font-size: 18px; line-height: 1.5; }
.subscription-plan button { width: 100%; min-height: 44px; margin-top: auto; }
.subscription-history h2, .subscription-pending h2 { margin: 0 0 16px; font-size: 18px; }
.subscription-history ol { list-style: none; padding: 0; margin: 0; }
.subscription-history li { padding: 16px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.subscription-history li:last-child { padding-bottom: 0; border-bottom: 0; }
.subscription-history li > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.subscription-history strong { text-transform: capitalize; }
.subscription-history time, .subscription-history small { color: var(--muted); font-size: 12px; }
.subscription-history p { margin: 8px 0; }
.subscription-dialog { width: min(860px, calc(100vw - 32px)); }
.subscription-dialog .modal-head h2 { min-width: 0; overflow-wrap: anywhere; font-size: 18px; }
.subscription-dialog .modal-body { overflow-y: auto; }
.subscription-dialog form > label:not(.subscription-confirm), .subscription-form-grid > label, .subscription-dialog [data-payment-fields] > label:not(.subscription-confirm) { display: grid; align-content: start; min-width: 0; gap: 8px; margin-top: 18px; color: var(--text-subtle); }
.subscription-dialog :is(input, textarea, select) { min-width: 0; width: 100%; min-height: 44px; padding: 11px 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px; }
.subscription-dialog textarea { resize: vertical; }
.subscription-dialog .subscription-confirm { display: flex; align-items: flex-start; min-width: 0; gap: 10px; margin-top: 18px; color: var(--text-subtle); line-height: 1.6; cursor: pointer; }
.subscription-confirm input[type='checkbox'] { width: 18px; min-height: 18px; height: 18px; padding: 0; margin: 3px 0 0; flex: 0 0 18px; accent-color: var(--brand); }
.subscription-dialog p { line-height: 1.6; }
.subscription-dialog .error { color: var(--danger); }
.subscription-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; margin-top: 18px; }
.subscription-form-grid > label { margin-top: 0; }
.subscription-form-grid small { color: var(--muted); font-size: 12px; }
.subscription-admin { min-width: 0; display: grid; gap: 20px; }
.subscription-admin form { padding: 20px 0; border-top: 1px solid var(--border); }
.subscription-dialog [hidden] { display: none !important; }
.subscription-message { padding: 24px; }
@media (max-width: 1100px) { .subscription-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .subscription-plans, .subscription-form-grid, .subscription-details { grid-template-columns: minmax(0, 1fr); }
    .subscription-page .heading { flex-wrap: wrap; align-items: flex-start; }
    .subscription-summary, .subscription-pending, .subscription-history, .subscription-plan { padding: 18px; }
    .subscription-dialog .modal-body { padding: 18px 16px; }
    .subscription-dialog .modal-actions { flex-wrap: wrap; margin-inline: -16px; padding-inline: 16px; }
    .subscription-dialog .modal-actions > button { flex: 1 1 180px; min-height: 44px; }
}