.billing-shell .reader-workspace-content { max-width: 1060px; }
.billing-shell .reader-menu-link[aria-current="page"] { background: #171717; border-color: #343434; color: var(--text); }
.billing-shell .reader-menu-link[aria-current="page"]::after { content: ""; width: 5px; height: 5px; flex: 0 0 5px; margin-left: auto; border-radius: 50%; background: var(--urgent); }
.billing-sandbox { display: flex; align-items: flex-start; gap: 16px; border: 1px solid #47302c; padding: 18px 20px; margin: 26px 0; background: #120d0b; }
.billing-sandbox p { color: #c2b8b3; font-size: .8rem; line-height: 1.6; margin: 0; }
.billing-sandbox strong { color: var(--text); font-weight: 500; }
.billing-test-mark, .billing-plan-label { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 4px; padding: 5px 7px; font-size: .55rem; letter-spacing: .1em; white-space: nowrap; }
.billing-test-mark { border-color: #744439; color: #ffab99; flex-shrink: 0; margin-top: 1px; }
.billing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.billing-plan, .billing-current { min-width: 0; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 9px; }
.billing-plan { background: linear-gradient(135deg, #151515, #080808 75%); border-color: #41413e; }
.billing-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.billing-card-heading .eyebrow { margin: 0; font-size: .59rem; }
.billing-plan-label { color: var(--muted); }
.billing-plan h2 { font-size: 3.2rem; font-weight: 450; letter-spacing: -.055em; margin: 26px 0 18px; }
.billing-period-toggle { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.billing-period-toggle button { border: 1px solid var(--line-strong); background: transparent; color: var(--muted); padding: 9px 11px; font: inherit; font-size: .58rem; letter-spacing: .07em; cursor: pointer; }
.billing-period-toggle button[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: var(--surface-2); }
.billing-period-toggle button:disabled { cursor: default; opacity: .55; }
.billing-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 20px; }
#billing-price { font-size: 2.65rem; font-weight: 450; letter-spacing: -.05em; overflow-wrap: anywhere; }
#billing-interval { color: var(--muted); font-size: .82rem; }
.billing-plan-note, .billing-help, .billing-empty p { color: #aaa9a4; font-size: .84rem; line-height: 1.65; }
.billing-plan-note { margin: 0 0 27px; }
.billing-help { margin: 16px 0 0; font-size: .75rem; }
.billing-current > .eyebrow { font-size: .59rem; margin: 7px 0 24px; }
.billing-current h2, .billing-empty h2 { font-size: 1.6rem; font-weight: 450; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 24px; }
.billing-details { margin: 0 0 27px; }
.billing-details > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 7px 18px; border-bottom: 1px solid var(--line); padding: 15px 0; font-size: .84rem; line-height: 1.5; }
.billing-details dt { color: var(--muted); }
.billing-details dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
#billing-plan { font-weight: 550; }
#billing-refresh { display: block; margin-top: 15px; min-height: 44px; }
.billing-shell .reader-primary:disabled { opacity: .45; cursor: default; }
.billing-shell button:disabled { cursor: default; }
.billing-empty { padding: 38px 0; max-width: 640px; }
.billing-empty h2 { margin-bottom: 16px; }
.billing-empty .reader-secondary { margin-top: 18px; }
.billing-shell .reader-message { overflow-wrap: anywhere; }
.billing-annual-switch { margin-top: 20px; min-height: 44px; }
.billing-pro-next { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.billing-pro-next h3 { margin: 0 0 18px; font-size: 1rem; font-weight: 500; line-height: 1.4; }
.billing-pro-next .reader-primary { white-space: normal; text-align: center; }
.billing-pro-next-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 18px; }
.billing-pro-next-links a { color: var(--text); font-size: .8rem; line-height: 1.6; text-underline-offset: 4px; }
.billing-annual-preview { min-width: 0; margin-top: 22px; padding: clamp(22px, 3vw, 36px); border: 1px solid #41413e; border-radius: 9px; background: var(--surface-2); }
.billing-annual-preview > .eyebrow { font-size: .59rem; margin: 0 0 20px; }
.billing-annual-preview h2 { font-size: 1.6rem; font-weight: 450; letter-spacing: -.035em; margin: 0; }
.billing-annual-totals { margin: 14px 0 0; }
.billing-annual-totals dd { font-variant-numeric: tabular-nums; }
.billing-annual-due dt, .billing-annual-due dd { color: var(--text); font-weight: 550; }
.billing-annual-payment-note { margin-bottom: 22px; }
.billing-annual-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.billing-annual-actions button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.billing-history { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); }
.billing-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.billing-history-heading .eyebrow { font-size: .59rem; margin: 0 0 14px; }
.billing-history h2 { font-size: 1.6rem; font-weight: 450; letter-spacing: -.035em; margin: 0; }
.billing-history-heading button { min-height: 44px; flex-shrink: 0; }
.billing-history-message, .billing-history-empty { color: var(--muted); font-size: .84rem; line-height: 1.6; }
.billing-history-message:empty { display: none; }
.billing-history-message[data-error="true"] { color: #ffab99; }
.billing-history-empty { padding: 24px 0; margin: 0; }
.billing-history-items { padding: 0; margin: 24px 0 0; list-style: none; }
.billing-payment { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .7fr) minmax(130px, auto); gap: 20px; align-items: center; padding: 21px 0; border-top: 1px solid var(--line); font-size: .83rem; }
.billing-payment-date, .billing-payment-number { display: block; overflow-wrap: anywhere; }
.billing-payment-date { color: var(--text); }
.billing-payment-number { margin-top: 6px; color: var(--muted); font-size: .72rem; }
.billing-payment-status { color: var(--muted); overflow-wrap: anywhere; }
.billing-payment-status[data-status="completed"] { color: #b6cbb4; }
.billing-payment-status[data-status="past_due"] { color: #ffab99; }
.billing-payment-total { text-align: right; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.billing-payment-action { text-align: right; }
.billing-invoice-download { min-height: 44px; white-space: nowrap; }
.billing-invoice-unavailable { color: var(--muted); font-size: .72rem; }
#billing-history-more { min-height: 44px; margin-top: 22px; }
@media (max-width: 1050px) { .billing-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .billing-shell .reader-menu > .reader-menu-link { border-color: var(--line); padding: 10px; font-size: .77rem; gap: 8px; }
  .billing-shell .reader-sidebar-account { flex-wrap: wrap; }
  .billing-sandbox { display: block; padding: 16px; }
  .billing-sandbox p { margin-top: 10px; }
  .billing-plan, .billing-current { padding: 24px 20px; }
  .billing-annual-preview { padding: 24px 20px; }
  .billing-annual-actions { flex-direction: column; }
  .billing-annual-switch, .billing-annual-actions button { width: 100%; white-space: normal; }
  .billing-shell .reader-primary, .billing-current > .reader-secondary { width: 100%; min-height: 44px; }
  .billing-card-heading { gap: 8px; }
  .billing-card-heading .eyebrow { font-size: .52rem; letter-spacing: .1em; }
  .billing-payment { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .billing-payment-status { grid-column: 1; grid-row: 2; font-size: .76rem; }
  .billing-payment-total { grid-column: 2; grid-row: 1; }
  .billing-payment-action { grid-column: 2; grid-row: 2; }
  .billing-history-heading { align-items: flex-end; gap: 8px; }
  .billing-history h2 { font-size: 1.4rem; }
  .billing-invoice-download { padding: 10px 12px; font-size: .67rem; }
}