.billing-page { max-width: 1050px; margin: 0 auto; padding: 1.5rem 0; overflow-x: auto; }
.billing-page h1 { font-size: 28px; font-weight: 550; }
.billing-balance { font-size: 2rem; font-weight: 600; margin: 24px 0 8px; }
.billing-page p { line-height: 1.7; color: var(--muted); }
.billing-topups { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
.billing-page :is(button, input[type=submit]) { padding: 10px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); color: var(--bg); font: inherit; font-size: 14px; cursor: pointer; }
.billing-page :is(button, input[type=submit]):hover { opacity: .85; }
.billing-custom { margin-bottom: 48px; }
.billing-custom label { display: block; margin-bottom: 8px; font-size: 14px; }
.billing-custom > div { display: flex; flex-wrap: wrap; gap: 10px; }
.billing-custom input[type=number] { width: 160px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.billing-custom small { display: block; margin-top: 10px; color: var(--muted); }
.billing-page h2 { font-size: 19px; margin-top: 36px; }
.billing-page table { width: 100%; border-collapse: collapse; margin: 20px 0 32px; font-size: 13px; }
.billing-page th, .billing-page td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.billing-page th { font-weight: 600; }
.billing-explanation { padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.billing-explanation summary { cursor: pointer; font-size: 15px; }
.billing-offer { margin: 28px 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.billing-offer h2 { margin-top: 0; }
.billing-offer .billing-custom { margin-bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.billing-offer input[type=text] { padding: 10px 12px; max-width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.billing-offer-preview { padding-top: 12px; border-top: 1px solid var(--line); }
.billing-offer-preview dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; max-width: 500px; }
.billing-offer-preview dd { margin: 0; text-align: right; }
.billing-pending { padding: 12px 0; border-bottom: 1px solid var(--line); }
.billing-pending form { display: inline-block; margin: 0 8px 8px 0; }
.invitation-page { margin: 0; background: #f4f6f4; color: #18251e; font-family: system-ui, sans-serif; line-height: 1.6; }
.invitation-card { max-width: 540px; margin: 8vh auto; padding: 32px; background: #fff; border: 1px solid #d8e1db; border-radius: 16px; }
.invitation-card h1 { font-size: 30px; line-height: 1.2; }
.invitation-card a { color: #236441; }
.invitation-card label { display: block; }
.invitation-card input[type=email] { width: 100%; box-sizing: border-box; padding: 12px; margin: 8px 0 16px; font: inherit; border: 1px solid #a6b8ab; border-radius: 8px; }
.invitation-card :is(button, input[type=submit]) { padding: 12px 20px; margin-bottom: 12px; font: inherit; color: #fff; background: #236441; border: 0; border-radius: 8px; cursor: pointer; }
.invitation-amount { font-size: 26px; font-weight: 600; }
.invitation-card [role=alert] { color: #922b21; }
@media (max-width: 600px) { .invitation-card { margin: 20px 12px; padding: 24px; } .billing-offer { padding: 14px; } }
/* One primary action: preset amounts are outlined, "Add funds" stays filled. */
.billing-page .billing-balance { color: var(--ink); }
.billing-page .billing-topups { margin: 12px 0 18px; }
.billing-page .billing-topups button { min-width: 76px; background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--line) 50%, var(--muted)); }
.billing-page .billing-topups button:hover { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.billing-page .billing-explanation { margin-bottom: 8px; }
.billing-page p a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }