@layer components{.page-account-payments{& .page-account-payments__top{display:grid;gap:var(--space-s);@media(min-width:768px){grid-template-columns: 1fr 1fr;}}& .page-account-payments__balance{margin-block-start:var(--space-2xs);font-size:var(--size-step-2)}& .page-account-payments__balance-note, & .page-account-payments__card-note{margin-block-start:var(--space-3xs);color:var(--color-text-muted);font-size:var(--size-step--1)}& .page-account-payments__pay{margin-block-start:var(--space-m)}& .page-account-payments__card{display:flex;gap:var(--space-2xs);align-items:center;margin-block-start:var(--space-s);font-weight:600;& svg{color:var(--color-accent-strong)}}& .page-account-payments__card-actions{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-block-start:var(--space-m)}& .page-account-payments__history{margin-block-start:var(--space-s);& h2{margin-block-end:var(--space-s);font-size:var(--size-step-1)}}& .page-account-payments__table-wrap{overflow-x:auto}& .page-account-payments__table{inline-size:100%;border-collapse:collapse;text-align:start;& th, & td{padding:var(--space-xs)var(--space-s)var(--space-xs)0;border-block-end:1px solid var(--color-border);white-space:nowrap}& thead th{color:var(--color-text-muted);font-size:var(--size-step--2);font-weight:600;letter-spacing:var(--tracking-caption);text-transform:uppercase}}& .page-account-payments__state{display:inline-flex;gap:var(--space-3xs);align-items:center;font-size:var(--size-step--1);font-weight:600;& svg{color:var(--color-accent-strong)}}& [data-state=failed]{padding:var(--space-3xs)var(--space-2xs);border-radius:var(--radius-pill);background:var(--color-accent-surface);color:var(--color-accent-deep)}& .page-account-payments__failed{margin-block-start:var(--space-m);color:var(--color-text-muted);font-size:var(--size-step--1)}}}