.billing-page { width: min(100%, 640px); margin: 0 auto; padding: var(--ui-space-8) var(--ui-space-4); display: grid; gap: var(--ui-space-4); }
.billing-header { display: grid; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
.billing-page .billing-header h1 { margin: 0; font-size: calc(var(--ui-text-section) + 6px); font-weight: 700; line-height: 1.2; }
.billing-header p { margin: 0; color: var(--secondary); }
.billing-page .ui-notice { margin: 0; }
.billing-card { display: grid; gap: var(--ui-space-4); padding: var(--ui-space-6); border: 1px solid var(--line-strong); border-radius: var(--ui-radius-panel); background: var(--paper); box-shadow: 0 4px 20px rgb(0 0 0 / .035); }
.billing-card h2 { margin: 0; font-size: var(--ui-text-body); font-weight: 650; }
.billing-card p { margin: 0; }
.billing-balance { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-3); flex-wrap: wrap; }
.billing-card .billing-label { color: var(--secondary); font-size: var(--ui-text-control); font-weight: 500; }
.billing-amount { margin-top: var(--ui-space-1) !important; font-size: var(--ui-text-display); font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.billing-amount span { margin-left: var(--ui-space-2); color: var(--muted); font-size: var(--ui-text-control); font-weight: 400; }
.billing-form { display: grid; gap: var(--ui-space-4); }
.billing-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.billing-preset { margin: 0; cursor: pointer; }
.billing-preset span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--ui-radius-control); background: var(--paper); color: var(--ink); font-size: calc(var(--ui-text-control) + 1px); font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s; }
.billing-preset:hover span { background: var(--raised); }
.billing-preset input:checked + span { border-color: var(--ink); background: var(--raised); box-shadow: inset 0 0 0 1px var(--ink); }
.billing-preset input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.billing-amount-field { position: relative; }
.billing-amount-field > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.billing-page .billing-amount-field .ui-input { padding-left: 30px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.billing-amount-field .ui-input::-webkit-inner-spin-button, .billing-amount-field .ui-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.billing-summary { display: grid; gap: var(--ui-space-2); margin: 0; padding: var(--ui-space-4); border-radius: var(--ui-radius-control); background: var(--raised); font-size: var(--ui-text-control); }
.billing-summary div { display: flex; justify-content: space-between; gap: var(--ui-space-3); }
.billing-summary dt { color: var(--secondary); }
.billing-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.billing-summary .billing-summary-total { padding-top: var(--ui-space-2); border-top: 1px solid var(--line-strong); font-weight: 600; }
.billing-summary .billing-summary-total dt { color: var(--ink); }
.billing-page .billing-form > .ui-button { width: 100%; margin: 0; }
.billing-secure { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: var(--ui-text-caption); text-align: center; }
.billing-secure .ui-navigation-icon { --ui-navigation-size: 13px; flex: 0 0 13px; }
.billing-history { display: grid; margin: 0; padding: 0; list-style: none; }
.billing-history li { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-3) 0; border-top: 1px solid var(--line); }
.billing-history li:first-child { border-top: 0; padding-top: 0; }
.billing-history li:last-child { padding-bottom: 0; }
.billing-history li > div { display: grid; gap: 2px; }
.billing-history li > div:last-child { text-align: right; }
.billing-history span { font-weight: 550; }
.billing-history time, .billing-history small { color: var(--muted); font-size: var(--ui-text-caption); font-variant-numeric: tabular-nums; }
.billing-history strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.billing-credit { color: var(--success-ink); }
.billing-debit { color: var(--ink); }
.billing-empty { color: var(--muted); font-size: var(--ui-text-control); }
.billing-plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); flex-wrap: wrap; }
.billing-plan-price { font-size: calc(var(--ui-text-section) + 4px); font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.billing-plan-price span { margin-left: var(--ui-space-2); color: var(--muted); font-size: var(--ui-text-control); font-weight: 400; }
.billing-plan-features { display: grid; gap: var(--ui-space-2); margin: 0; padding-left: 1.25rem; color: var(--secondary); font-size: calc(var(--ui-text-control) + 1px); }
.billing-accept { display: flex; align-items: flex-start; gap: var(--ui-space-2); font-size: var(--ui-text-control); color: var(--secondary); cursor: pointer; }
.billing-accept input { margin-top: 3px; flex: 0 0 auto; }
.billing-plan-note { color: var(--muted); font-size: calc(var(--ui-text-caption) + 1px); }
@media (max-width: 820px) {
  .billing-page { padding: var(--ui-space-6) var(--ui-space-4); }
  .billing-card { padding: var(--ui-space-4); }
  .billing-amount { font-size: calc(var(--ui-text-display) - 4px); }
}
.billing-secure [data-ui-navigation-icon="lock"] { --ui-navigation-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E"); }
.pricing-page { width: min(100%, 860px); }
.pricing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); }
.pricing-plans .billing-card { align-content: start; }
@media (max-width: 640px) { .pricing-plans { grid-template-columns: 1fr; } }
.pricing-rates { width: 100%; border-collapse: collapse; font-size: var(--ui-text-control); font-variant-numeric: tabular-nums; }
.pricing-rates th, .pricing-rates td { padding: var(--ui-space-2) 0; border-bottom: 1px solid var(--line); text-align: right; }
.pricing-rates th:first-child, .pricing-rates td:first-child { text-align: left; }
.pricing-rates th { color: var(--secondary); font-weight: 500; }