.bill-shell { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }
.bill-header { text-align: center; margin-bottom: 32px; }
.bill-header h1 { font-size: 28px; margin-bottom: 8px; }
.bill-header p { color: var(--rd-ink-600); }

.segmented { display: inline-flex; background: var(--rd-ink-100); border-radius: 999px; padding: 4px; gap: 2px; }
.segmented a { padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--rd-ink-600); }
.segmented a.is-active { background: #fff; color: var(--rd-primary-600); box-shadow: 0 1px 3px rgba(16,17,25,0.1); }
.segmented .save-tag { font-size: 10px; font-weight: 700; color: var(--rd-success-text); margin-left: 4px; }

.bill-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 12px; }
.bill-auto-label { font-size: 12px; color: var(--rd-ink-500); }

.bill-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0 40px; }
@media (max-width: 640px) { .bill-plans { grid-template-columns: 1fr; } }

.bill-history-table { background: #fff; border: 1px solid var(--rd-ink-200); border-radius: var(--rd-radius-card); overflow: hidden; }
.bill-history-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 0.6fr; padding: 12px 18px; align-items: center; font-size: 13px; border-bottom: 1px solid var(--rd-ink-100); }
.bill-history-row:last-child { border-bottom: none; }
.bill-history-row.head { background: var(--rd-ink-50); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rd-ink-500); }

/* 5 fixed columns with no per-cell labels in the markup - same situation
   as the admin data tables. Scrolling horizontally keeps every column at
   a legible width instead of crushing invoice numbers/amounts/status. */
@media (max-width: 560px) {
  .bill-history-table { overflow-x: auto; }
  .bill-history-row { min-width: 480px; }
}