.billing-page { padding-top: 56px; padding-bottom: 64px; }
.billing-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 16px; }
.billing-card { padding: 28px; margin: 24px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.billing-card > p { color: var(--text-secondary); }
.billing-card label { display: block; color: var(--text-secondary); font-size: 0.9rem; margin: 18px 0 6px; }
.billing-card input, .billing-card select { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; color: var(--text); font: inherit; }
.billing-card :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.billing-card button { cursor: pointer; font: inherit; }
.billing-card button.button { border: 1px solid transparent; font-weight: 650; }
.billing-card button.is-secondary { border-color: var(--border); }
.billing-card button:disabled { cursor: wait; opacity: 0.6; }
.billing-card form > .button { margin-top: 18px; }
.billing-fields { display: flex; gap: 16px; align-items: end; }
.billing-fields > * { flex: 1; min-width: 0; }
.billing-hint { color: var(--text-secondary); font-size: 0.88rem; margin-top: 16px; }
.billing-login { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.billing-login summary { cursor: pointer; }
.billing-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.billing-details { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; margin: 24px 0; }
.billing-details dt { color: var(--text-secondary); }
.billing-details dd { overflow-wrap: anywhere; }
.billing-details code { font-size: 0.82rem; }
.billing-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.billing-warning { color: var(--accent) !important; font-size: 0.9rem; margin: 16px 0; }
#billing-message:not(:empty), #login-message:not(:empty) { padding: 16px; border: 1px solid var(--border); border-radius: 8px; margin: 20px 0; overflow-wrap: anywhere; }
#billing-message[data-error="true"], #login-message[data-error="true"] { color: var(--bad); }
#billing-history { list-style: none; }
#billing-history li { padding: 14px 0; border-bottom: 1px solid var(--border); }
#billing-history a { display: block; font-size: 0.85rem; }
.billing-support { color: var(--text-secondary); font-size: 0.9rem; }
@media (max-width: 600px) {
  .billing-body .nav_logo { white-space: normal; font-size: 0.9rem; line-height: 1.3; }
  .billing-card { padding: 22px 18px; }
  .billing-fields { flex-direction: column; align-items: stretch; }
  .billing-details { grid-template-columns: 1fr; gap: 4px; }
  .billing-details dd { margin-bottom: 12px; }
}
