.billing-page {min-width: 0}
.billing-header {max-width: 1120px; margin: auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px}
.billing-brand {display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700}
.billing-main {max-width: 1120px; margin: auto; padding: 24px; display: block}
.billing-main h1 {margin: 0 0 16px}
#status {position: sticky; top: 8px; z-index: 1; background: var(--bg); padding: 8px 0}
#status:empty {display: none}
.billing-main h3 {margin: 20px 0 8px}
.billing-card {display: grid; gap: 12px; padding: 20px; margin: 0 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px}
.billing-card p {color: var(--muted); margin: 0}
.billing-card #access-code {color: var(--text); overflow-wrap: anywhere}
.billing-fields {display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 4px 0 12px}
.billing-fields label {flex: 1 1 155px}
.billing-card label {display: grid; gap: 5px}
.billing-card input, .billing-card select {width: 100%}
.billing-actions, .billing-tabs {display: flex; flex-wrap: wrap; align-items: center; gap: 10px}
.billing-tabs {margin: 0 0 18px}
.billing-tabs a {padding: 8px 10px}
.billing-tabs button {margin-left: auto}
.billing-status {color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap}
.billing-status.error {color: #ff9ca9}
.billing-table {overflow: auto}
.billing-table table {width: 100%; text-align: left; border-collapse: collapse}
.billing-table td, .billing-table th {padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle}
.billing-table td button {margin: 2px 4px 2px 0}
#login {max-width: 420px}
@media (max-width: 560px) {
  .billing-main, .billing-header {padding: 12px}
  .billing-card {padding: 12px}
}