/* Billing v2 (public/billing-v2.js): Admin › Plan & usage and the sign-up
   plan choice. Built on the existing plan hero, credit panel and plan cards;
   colour only for meaning (green paid, red failed, amber attention). */
.billing-v2 .billing-hero { align-items:center; }
.billing-hero-side { display:flex; align-items:center; gap:var(--space-3, 12px); flex-wrap:wrap; justify-content:flex-end; }
.billing-status.bad { color:var(--red); background:var(--red-soft); border-color:transparent; }
.billing-status.warn { color:var(--amber); background:var(--amber-soft); border-color:transparent; }
.billing-note { display:flex; align-items:flex-start; gap:var(--space-3, 12px); }
.billing-note > div { flex:1; }
.billing-note.ok { color:var(--green); }
.billing-split { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3, 12px) var(--space-6, 24px); margin:var(--space-4, 16px) 0 0; }
.billing-split dt { font-size:var(--text-sm, 13px); color:var(--ink-3); }
.billing-split dd { margin:var(--space-1, 4px) 0 0; font-size:var(--text-md, 14px); color:var(--ink); font-variant-numeric:tabular-nums; }
.billing-actions { display:flex; flex-wrap:wrap; gap:var(--space-2, 8px); margin-top:var(--space-4, 16px); padding-top:var(--space-4, 16px); border-top:1px solid var(--line); }
.billing-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4, 16px); margin:var(--space-4, 16px) 0; padding:var(--space-4, 16px) var(--space-5, 20px); border:1px solid var(--line); border-radius:var(--radius-lg, 16px); background:var(--panel); }
.billing-row h3, .billing-receipts h3 { margin:0 0 var(--space-1, 4px); font-size:var(--text-md, 14px); }
.billing-row .sub { margin:0; }
.billing-row .btn { flex:none; }
.billing-plans { margin-top:var(--space-4, 16px); }
.billing-plans-note { margin:0 0 var(--space-3, 12px); }
.billing-plan-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.billing-plan-grid .plan-card .btn { margin-top:auto; }
.billing-receipts { margin:var(--space-6, 24px) 0 var(--space-3, 12px); }
.billing-receipts-wrap { overflow-x:auto; }
.billing-receipt-table { width:100%; border-collapse:collapse; font-size:var(--text-sm, 13px); }
.billing-receipt-table th, .billing-receipt-table td { padding:var(--space-2, 8px); border-top:1px solid var(--line); text-align:left; vertical-align:top; }
.billing-receipt-table thead th { color:var(--ink-3); font-weight:500; border-top:0; }
.billing-receipt-table tbody th { font-weight:500; color:var(--ink); white-space:nowrap; }
.billing-receipt-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.billing-receipt-table a { color:var(--ink); text-underline-offset:3px; }
.billing-receipt-state.ok { color:var(--green); }
.billing-receipt-state.warn { color:var(--amber); }
.billing-cancel { display:flex; flex-wrap:wrap; gap:var(--space-2, 8px); align-items:baseline; }
.billing-cancel .link-btn { color:var(--red); }
.billing-dialog-note { margin:var(--space-3, 12px) 0 0; }
.billing-auto-form .field { margin-top:var(--space-3, 12px); }
.billing-switch { display:flex; align-items:center; gap:var(--space-2, 8px); font-weight:500; cursor:pointer; }
/* Sign-up: the plan choice replaces "Included in your beta". */
.signup-plans { border:0; margin:28px 0 0; padding:0; display:grid; gap:10px; }
.signup-plans legend h2 { margin:0 0 6px; }
.signup-plan { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid rgba(255,255,255,.16); border-radius:14px; cursor:pointer; }
.signup-plan.selected { border-color:#fff; box-shadow:0 0 0 1px #fff inset; }
.signup-plan input { accent-color:#fff; width:16px; height:16px; flex:none; }
.signup-plan-copy { display:grid; gap:2px; flex:1; min-width:0; }
.signup-plan-copy small { color:rgba(255,255,255,.62); }
.signup-plan-price { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.signup-plan-price small { font-weight:500; color:rgba(255,255,255,.62); }
@media (max-width:1100px) { .billing-plan-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) {
  .billing-plan-grid, .billing-split { grid-template-columns:1fr; }
  .billing-hero-side { justify-content:flex-start; }
  .billing-row { flex-direction:column; align-items:flex-start; }
  .billing-actions .btn { flex:1 1 100%; justify-content:center; }
  .billing-receipt-table th, .billing-receipt-table td { padding:var(--space-2, 8px) var(--space-1, 4px); }
  .billing-receipt-table th:nth-child(4), .billing-receipt-table td:nth-child(4) { display:none; }
  .billing-hero-side { width:100%; }
}
.billing-switch input { accent-color:var(--ink); width:16px; height:16px; }
:root .modal.dialog .dialog-actions:has(> [data-billing-auto-save], > [data-billing-storage-confirm], > [data-dlg-close]) { display:flex; justify-content:flex-end; align-items:center; }