/* Hallmark - pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark - genre: modern-minimal - macrostructure: Account Workbench - theme: white-neutral-teal - enrichment: none */
html, body { overflow-x: clip; }
.legacy-account-link { white-space: nowrap; }
.account-shell {
  width: min(70rem, calc(100% - 2rem));
  margin-inline: auto;
  padding-block: var(--account-space-xl) var(--account-space-2xl);
  color: var(--account-ink);
  font-family: var(--account-font-body);
  font-size: 16px;
  line-height: 1.6;
}
.account-shell *, .account-shell *::before, .account-shell *::after { box-sizing: border-box; }
.account-kicker { margin: 0 0 var(--account-space-xs); color: var(--account-accent-deep); font-size: .875rem; font-weight: 700; letter-spacing: 0; }
.account-shell--auth { width: min(30rem, calc(100% - 2rem)); padding-block: var(--account-space-xl) var(--account-space-2xl); }
.account-auth { display: block; }
.account-auth__heading { margin-bottom: var(--account-space-lg); }
.account-auth__heading h1, .account-heading h1 {
  max-width: 100%;
  margin: 0;
  color: var(--account-ink);
  font-family: var(--account-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-auth__heading > p:not(.account-kicker), .account-heading p { max-width: 52ch; margin: var(--account-space-xs) 0 0; color: var(--account-muted); }
.account-auth__form-wrap { padding: var(--account-space-lg); background: var(--account-paper); color: var(--account-ink); border: 1px solid var(--account-rule); border-radius: var(--account-radius); box-shadow: 0 1px 2px var(--account-shadow); }
.account-auth__switch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--account-space-2xs); margin-bottom: var(--account-space-lg); padding: var(--account-space-2xs); background: var(--account-paper-2); color: var(--account-ink); border-radius: var(--account-radius); }
.account-auth__switch a { display: grid; min-height: 44px; place-items: center; color: var(--account-muted); font-weight: 700; white-space: nowrap; border-radius: calc(var(--account-radius) - .1rem); }
.account-auth__switch a[aria-current="page"] { background: var(--account-paper); color: var(--account-ink); box-shadow: 0 1px 2px var(--account-shadow-strong); }
.account-auth__switch a:active { color: var(--account-accent-deep); }
.account-alert { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--account-space-sm); align-items: start; margin-bottom: var(--account-space-lg); padding: var(--account-space-sm); background: var(--account-error-paper); color: var(--account-ink); border: 1px solid var(--account-error-rule); border-radius: var(--account-radius); }
.account-alert span { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; color: var(--account-error); font-weight: 800; border: 1px solid currentColor; border-radius: 50%; }
.account-alert p { margin: 0; }
.account-form { display: grid; gap: var(--account-space-md); }
.account-field { display: grid; gap: var(--account-space-2xs); min-width: 0; }
.account-field label { color: var(--account-ink); font-weight: 700; }
.account-field label span { color: var(--account-neutral); font-size: .875rem; font-weight: 400; }
.account-field input {
  width: 100%; height: 46px; padding: 0 2.75rem 0 var(--account-space-sm);
  background: var(--account-paper); color: var(--account-ink);
  border: 1px solid var(--account-rule); border-radius: var(--account-radius);
  outline: 2px solid transparent; outline-offset: 1px;
  font: inherit;
}
.account-field input::placeholder { color: var(--account-neutral); }
.account-field input:focus-visible { outline-color: var(--account-focus); }
.account-field input[aria-invalid="true"] { border-color: var(--account-error); background: var(--account-error-field); color: var(--account-ink); }
.account-field input:disabled { opacity: .55; cursor: not-allowed; color: var(--account-neutral); }
.account-field__help { min-height: 1.5em; margin: 0; color: var(--account-neutral); font-size: .875rem; }
.account-field__help[data-state="error"] { color: var(--account-error); }
.account-button {
  display: inline-grid; min-height: 46px; padding-inline: var(--account-space-lg); place-items: center;
  border: 1px solid var(--account-rule); border-radius: var(--account-radius);
  background: var(--account-paper); color: var(--account-ink);
  font: 700 1rem/1 var(--account-font-body); white-space: nowrap; cursor: pointer;
  transition: background-color var(--account-duration) var(--account-ease-out), transform var(--account-duration) var(--account-ease-out);
}
.account-button--primary { margin-top: var(--account-space-xs); background: var(--account-accent-deep); color: var(--account-accent-ink); border-color: var(--account-accent-deep); }
.account-button--quiet { background: var(--account-paper); color: var(--account-ink); }
.account-form .account-button { width: 100%; }
.account-button:focus-visible, .account-auth__switch a:focus-visible, .account-text-link:focus-visible, .account-back:focus-visible, .account-pagination a:focus-visible { outline: 2px solid var(--account-focus); outline-offset: 2px; }
.account-button:active { transform: translateY(1px); }
.account-button[disabled], .account-button--disabled { opacity: .55; cursor: not-allowed; }
.account-button[aria-busy="true"] { cursor: wait; opacity: .78; }
.account-button[data-state="error"] { border-color: var(--account-error); background: var(--account-error-paper); color: var(--account-error); }
.account-button[data-state="success"] { border-color: var(--account-credit); background: var(--account-paper); color: var(--account-credit); }
.account-auth__footnote { margin: var(--account-space-lg) 0 0; color: var(--account-neutral); font-size: .875rem; }
.account-auth__password-link { margin-top: var(--account-space-md); }
.account-heading { display: flex; flex-wrap: wrap; gap: var(--account-space-lg); align-items: center; justify-content: space-between; padding-block-end: var(--account-space-lg); border-block-end: 1px solid var(--account-rule); }
.account-heading--compact { display: block; }
.account-heading--compact h1 { margin-top: var(--account-space-md); }
.account-back, .account-text-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--account-accent-deep); font-weight: 700; white-space: nowrap; }
.account-back:active, .account-text-link:active { color: var(--account-accent); }
.account-dashboard { display: grid; gap: var(--account-space-lg); padding-block-start: var(--account-space-lg); align-items: start; }
.account-summary { display: grid; gap: var(--account-space-md); min-width: 0; }
.account-balance { display: grid; gap: var(--account-space-md); padding: var(--account-space-lg); border-radius: var(--account-radius); background: var(--account-ink); color: var(--account-paper); }
.account-balance > p { margin: 0; color: var(--account-paper-3); }
.account-balance__value { display: flex; flex-wrap: wrap; gap: var(--account-space-xs); align-items: end; min-width: 0; }
.account-balance__value strong { color: var(--account-paper); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.account-balance__value span { padding-block-end: var(--account-space-2xs); color: var(--account-paper-3); white-space: nowrap; }
.account-balance .account-balance__note { color: var(--account-paper-3); }
.account-balance .account-balance__hint { color: var(--account-paper-3); font-size: .875rem; }
.account-balance .account-button { width: 100%; margin-top: var(--account-space-xs); }
.account-quick-links { display: grid; border: 1px solid var(--account-rule); border-radius: var(--account-radius); background: var(--account-paper); color: var(--account-ink); overflow: clip; }
.account-quick-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--account-space-md); min-height: 64px; padding: var(--account-space-sm) var(--account-space-md); align-items: center; color: var(--account-ink); }
.account-quick-links a + a { border-block-start: 1px solid var(--account-rule); }
.account-quick-links a > span { display: grid; min-width: 0; }
.account-quick-links strong { color: var(--account-ink); }
.account-quick-links small { color: var(--account-neutral); }
.account-quick-links b { color: var(--account-accent-deep); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.account-quick-links a:focus-visible { outline: 2px solid var(--account-focus); outline-offset: -3px; }
.account-quick-links a:active { background: var(--account-accent-soft); color: var(--account-ink); }
.account-index { padding-block-start: var(--account-space-xl); }
.account-activity { min-width: 0; padding: var(--account-space-lg); border: 1px solid var(--account-rule); border-radius: var(--account-radius); background: var(--account-paper); color: var(--account-ink); }
.account-section-head { display: flex; flex-wrap: wrap; gap: var(--account-space-md); align-items: start; justify-content: space-between; }
.account-section-head h2 { margin: 0; color: var(--account-ink); font-family: var(--account-font-display); font-size: 1.75rem; line-height: 1.25; }
.account-section-head p { margin: var(--account-space-2xs) 0 0; color: var(--account-neutral); }
.account-ledger { margin-top: var(--account-space-lg); border-block-start: 1px solid var(--account-rule); }
.account-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--account-space-xs) var(--account-space-md); padding-block: var(--account-space-md); border-block-end: 1px solid var(--account-rule); }
.account-ledger__main { display: grid; gap: .15rem; min-width: 0; }
.account-ledger__main strong { color: var(--account-ink); }
.account-ledger__main span, .account-ledger time, .account-ledger__balance { color: var(--account-neutral); overflow-wrap: anywhere; }
.account-ledger time { text-align: end; font-size: .875rem; font-variant-numeric: tabular-nums; }
.account-ledger__amount { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.account-ledger__amount--credit { color: var(--account-credit); }
.account-ledger__amount--debit { color: var(--account-debit); }
.account-ledger__balance { text-align: end; font-variant-numeric: tabular-nums; }
.account-empty { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--account-space-md); margin-top: var(--account-space-lg); padding-block: var(--account-space-xl); border-block: 1px solid var(--account-rule); }
.account-empty > span { display: grid; width: 3rem; height: 3rem; place-items: center; color: var(--account-neutral); border: 1px solid var(--account-rule); border-radius: 50%; font-variant-numeric: tabular-nums; }
.account-empty strong { color: var(--account-ink); }
.account-empty p { margin: var(--account-space-2xs) 0 0; color: var(--account-neutral); }
.account-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--account-space-sm); align-items: center; margin-top: var(--account-space-lg); }
.account-pagination a, .account-pagination span { display: grid; min-height: 44px; padding-inline: var(--account-space-md); place-items: center; color: var(--account-accent-deep); border: 1px solid var(--account-rule); border-radius: var(--account-radius); white-space: nowrap; }
.account-pagination a:active { background: var(--account-accent-soft); color: var(--account-accent-deep); }
.account-pagination a:last-child, .account-pagination span:last-child { justify-self: end; }
.account-pagination span[aria-disabled="true"] { color: var(--account-neutral); opacity: .65; }
.account-pagination strong { color: var(--account-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-recharge { padding-block-start: var(--account-space-xl); }
.account-recharge-form { display: grid; gap: var(--account-space-xl); margin-top: var(--account-space-lg); }
.account-recharge-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.account-recharge-form legend { margin-bottom: var(--account-space-sm); color: var(--account-ink); font-weight: 700; }
.account-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--account-space-sm); }
.account-choice-grid label, .account-provider-list label { position: relative; cursor: pointer; }
.account-choice-grid input, .account-provider-list input { position: absolute; opacity: 0; }
.account-choice-grid label > span { display: grid; min-height: 72px; padding: var(--account-space-sm); place-content: center; background: var(--account-paper); color: var(--account-ink); border: 1px solid var(--account-rule); border-radius: var(--account-radius); text-align: center; }
.account-choice-grid small, .account-provider-list small { color: var(--account-neutral); }
.account-choice-grid input:checked + span { border-color: var(--account-accent-deep); }
.account-choice-grid input:focus-visible + span, .account-provider-list input:focus-visible + .account-provider-mark { outline: 2px solid var(--account-focus); outline-offset: 2px; }
.account-custom-amount { display: grid; gap: var(--account-space-xs); min-width: 0; color: var(--account-ink); font-weight: 700; }
.account-custom-amount > div { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; border: 1px solid var(--account-rule); background: var(--account-paper); }
.account-custom-amount b { display: grid; min-width: 2.75rem; place-items: center; color: var(--account-neutral); font-weight: 700; }
.account-custom-amount input { width: 100%; min-width: 0; height: 48px; padding: 0 var(--account-space-sm) 0 0; border: 0; outline: 2px solid transparent; outline-offset: -2px; background: transparent; color: var(--account-ink); font: inherit; }
.account-custom-amount input:focus-visible { outline-color: var(--account-focus); }
.account-custom-amount input::placeholder { color: var(--account-neutral); }
.account-custom-amount > small { min-height: 1.5em; color: var(--account-neutral); font-weight: 400; }
.account-provider-list { display: grid; gap: var(--account-space-xs); }
.account-provider-list label { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 var(--account-space-sm); min-height: 64px; padding: var(--account-space-xs) var(--account-space-sm); align-items: center; border: 1px solid var(--account-rule); border-radius: var(--account-radius); }
.account-provider-list label:has(input:checked) { border-color: var(--account-accent-deep); background: var(--account-paper-2); color: var(--account-ink); }
.account-provider-mark { display: grid; grid-row: 1 / 3; width: 2.5rem; height: 2.5rem; place-items: center; background: var(--account-paper-3); color: var(--account-accent-deep); border: 1px solid var(--account-rule); border-radius: 50%; font-weight: 800; }
.account-provider-list strong { align-self: end; }
.account-provider-list small { align-self: start; }
.account-payment-note { max-width: 65ch; margin: 0; color: var(--account-neutral); font-size: .875rem; }
.account-order-list { margin-top: var(--account-space-lg); border-block-start: 1px solid var(--account-rule); }
.account-order-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--account-space-xs) var(--account-space-md); min-height: 72px; padding-block: var(--account-space-sm); align-items: center; color: var(--account-ink); border-block-end: 1px solid var(--account-rule); }
.account-order-list a > span { display: grid; min-width: 0; }
.account-order-list a strong { overflow-wrap: anywhere; }
.account-order-list small { color: var(--account-neutral); }
.account-order-list b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-order-status { grid-column: 1 / -1; color: var(--account-muted); font-style: normal; }
.account-order-status--paid { color: var(--account-credit); }
.account-order-status--failed { color: var(--account-debit); }
.account-payment-panel { display: grid; max-width: 36rem; gap: var(--account-space-md); padding-block-start: var(--account-space-xl); justify-items: start; }
.account-payment-panel h2 { margin: 0; font-family: var(--account-font-display); font-size: 1.75rem; }
.account-payment-panel p { margin: 0; color: var(--account-muted); }
.account-payment-qr { width: 244px; height: 244px; padding: 12px; background: var(--account-paper); color: var(--account-ink); border: 1px solid var(--account-rule); border-radius: var(--account-radius); }
.account-payment-qr img, .account-payment-qr canvas { display: block; width: 220px !important; height: 220px !important; }
.account-payment-wait { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid var(--account-rule); border-radius: 50%; }
.account-payment-wait span { width: 1rem; height: 1rem; background: var(--account-accent-deep); border-radius: 50%; }
.account-order-detail { display: grid; max-width: 48rem; gap: var(--account-space-xl); padding-block-start: var(--account-space-xl); }
.account-order-detail__status { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--account-space-md); align-items: center; }
.account-order-detail__status > span { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid var(--account-rule); border-radius: 50%; font-size: 1.4rem; }
.account-order-detail__status--paid > span { color: var(--account-credit); border-color: var(--account-credit); }
.account-order-detail__status strong { font-size: 1.25rem; }
.account-order-detail__status p { margin: var(--account-space-2xs) 0 0; color: var(--account-muted); }
.account-order-detail dl { margin: 0; border-block-start: 1px solid var(--account-rule); }
.account-order-detail dl div { display: grid; grid-template-columns: minmax(7rem, .5fr) minmax(0, 1fr); gap: var(--account-space-md); padding-block: var(--account-space-sm); border-block-end: 1px solid var(--account-rule); }
.account-order-detail dt { color: var(--account-neutral); }
.account-order-detail dd { margin: 0; color: var(--account-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .account-button:not([disabled]):not(.account-button--primary):hover { background: var(--account-accent-soft); color: var(--account-accent-deep); border-color: var(--account-accent-deep); }
  .account-button.account-button--primary:not([disabled]):hover { background: var(--account-accent-hover); color: var(--account-accent-ink); border-color: var(--account-accent-hover); }
  .account-auth__switch a:hover, .account-text-link:hover, .account-back:hover { color: var(--account-accent); }
  .account-field input:hover { background: var(--account-paper-2); }
  .account-quick-links a:hover { background: var(--account-accent-soft); color: var(--account-ink); }
}
@media (min-width: 48rem) {
  .account-shell { width: min(70rem, calc(100% - 4rem)); padding-block-start: var(--account-space-xl); }
  .account-shell--auth { width: min(30rem, calc(100% - 4rem)); padding-block-start: var(--account-space-2xl); }
  .account-auth__form-wrap { padding: var(--account-space-xl); }
  .account-auth__heading h1 { font-size: 2rem; }
  .account-heading h1 { font-size: 2.25rem; }
  .account-ledger__row { grid-template-columns: minmax(0, 1.4fr) minmax(9rem, .7fr) 5rem 6rem; align-items: center; }
  .account-ledger__balance { text-align: end; }
  .account-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .account-quick-amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-provider-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-order-list a { grid-template-columns: minmax(0, 1fr) 8rem 6rem; }
  .account-order-status { grid-column: auto; text-align: end; white-space: nowrap; }
}
@media (min-width: 64rem) {
  .account-dashboard { grid-template-columns: minmax(17rem, 19rem) minmax(0, 1fr); }
}
@media (max-width: 36rem) {
  .account-heading--dashboard { display: grid; }
  .account-heading--dashboard form, .account-heading--dashboard .account-button { width: 100%; }
  .account-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .account-activity { padding: var(--account-space-md); }
  .account-ledger__balance { text-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .account-shell * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Hallmark - genre: modern-minimal - macrostructure: ruled account workbench - design-system: design.md - designed-as-app
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * responsive: source pass (320/375/414/768)
 */
.account-shell {
  --account-accent-soft: var(--account-paper);
}

.account-auth__form-wrap,
.account-auth__switch,
.account-auth__switch a,
.account-alert,
.account-field input,
.account-button,
.account-balance,
.account-quick-links,
.account-activity,
.account-pagination a,
.account-pagination span,
.account-choice-grid label > span,
.account-custom-amount > div,
.account-provider-list label,
.account-payment-qr {
  border-radius: 0;
  box-shadow: none;
}

.account-auth__form-wrap {
  border-block-start: 2px solid var(--account-accent);
  background: var(--account-paper);
}

.account-auth__switch {
  gap: 0;
  padding: 0;
  border: 1px solid var(--account-rule);
  background: var(--account-paper);
}

.account-auth__switch a + a {
  border-inline-start: 1px solid var(--account-rule);
}

.account-auth__switch a[aria-current="page"] {
  border-block-end: 2px solid var(--account-accent);
  background: var(--account-paper);
  color: var(--account-accent-deep);
  box-shadow: none;
}

.account-balance {
  border: 1px solid var(--account-rule);
  border-block-start: 2px solid var(--account-accent);
  background: var(--account-paper);
  color: var(--account-ink);
}

.account-balance > p,
.account-balance__value span,
.account-balance .account-balance__note,
.account-balance .account-balance__hint {
  color: var(--account-neutral);
}

.account-balance__value strong {
  color: var(--account-ink);
}

.account-activity,
.account-quick-links,
.account-provider-list label:has(input:checked) {
  background: var(--account-paper);
}

.account-section-head h2 {
  font-size: 1.5rem;
}

@media (hover: hover) and (pointer: fine) {
  .account-field input:hover,
  .account-quick-links a:hover,
  .account-auth__switch a:hover {
    background: var(--account-paper);
    color: var(--account-accent-deep);
  }
}

@media (min-width: 48rem) {
  .account-heading h1 {
    font-size: 2rem;
  }
}

/* Hallmark - genre: modern-minimal - macrostructure: account operations ledger - design-system: design.md - designed-as-app
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * responsive: 320/375/414/768 source pass
 */
.account-shell {
  width: min(72rem, calc(100% - 2rem));
  padding-block: var(--account-space-xl) var(--account-space-2xl);
  line-height: 1.55;
}

.account-shell--auth {
  width: min(72rem, calc(100% - 2rem));
}

.account-shell--payment {
  width: min(46rem, calc(100% - 2rem));
}

.account-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--account-space-md);
  align-items: end;
  padding-block-end: var(--account-space-lg);
}

.account-heading h1,
.account-auth__intro h1 {
  min-width: 0;
  margin: 0;
  color: var(--account-ink);
  font-family: var(--account-font-display);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.account-heading p,
.account-auth__intro > p {
  max-width: 58ch;
  margin: var(--account-space-xs) 0 0;
  color: var(--account-muted);
}

.account-heading .account-kicker,
.account-auth__intro .account-kicker {
  margin: 0 0 var(--account-space-xs);
  color: var(--account-accent-deep);
  font-size: .875rem;
}

.account-heading .account-back + .account-kicker {
  margin-top: var(--account-space-md);
}

.account-heading--compact h1 {
  margin-top: 0;
}

.account-order-number {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.account-auth {
  display: grid;
  gap: var(--account-space-lg);
  align-items: start;
}

.account-auth__intro {
  min-width: 0;
  padding-block: var(--account-space-lg);
  border-block: 1px solid var(--account-rule);
  border-block-start: 2px solid var(--account-accent);
}

.account-auth__notice {
  padding-block-start: var(--account-space-lg);
  border-block-start: 1px solid var(--account-rule);
  font-size: .875rem;
}

.account-auth__form-wrap {
  min-width: 0;
  padding: var(--account-space-lg);
  border: 1px solid var(--account-rule);
  border-block-start: 2px solid var(--account-accent);
  background: var(--account-paper);
}

.account-auth__switch {
  margin-bottom: var(--account-space-lg);
  border: 1px solid var(--account-rule);
}

.account-auth__switch a {
  min-width: 0;
  min-height: 46px;
}

.account-auth__switch a[aria-current="page"] {
  border-block-end: 2px solid var(--account-accent);
}

.account-form {
  gap: var(--account-space-lg);
}

.account-field {
  gap: var(--account-space-xs);
}

.account-field input {
  height: 48px;
  padding-inline: var(--account-space-sm);
  background: var(--account-paper);
}

.account-field input:focus-visible,
.account-custom-amount input:focus-visible {
  border-color: var(--account-focus);
  outline: 2px solid var(--account-focus);
  outline-offset: 1px;
}

.account-button {
  min-height: 46px;
  border-radius: 0;
  box-shadow: none;
}

.account-button--primary {
  background: var(--account-accent-deep);
  border-color: var(--account-accent-deep);
  color: var(--account-accent-ink);
}

.account-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 0 var(--account-space-lg);
  background: var(--account-paper);
  border-block-end: 1px solid var(--account-rule);
}

.account-tabs a {
  display: grid;
  min-width: 0;
  min-height: 46px;
  padding-inline: var(--account-space-xs);
  place-items: center;
  color: var(--account-muted);
  font-weight: 700;
  white-space: nowrap;
}

.account-tabs a + a {
  border-inline-start: 1px solid var(--account-rule);
}

.account-tabs a[aria-current="page"] {
  border-block-end: 2px solid var(--account-accent);
  color: var(--account-accent-deep);
}

.account-tabs a:focus-visible {
  outline: 2px solid var(--account-focus);
  outline-offset: -3px;
}

.account-overview {
  display: grid;
  min-width: 0;
  margin-block-end: var(--account-space-lg);
  border: 1px solid var(--account-rule);
  border-block-start: 2px solid var(--account-accent);
  background: var(--account-paper);
}

.account-overview__balance,
.account-overview__action {
  min-width: 0;
  padding: var(--account-space-lg);
}

.account-overview__balance > p,
.account-overview__action p {
  margin: 0;
  color: var(--account-neutral);
}

.account-overview__action {
  display: grid;
  gap: var(--account-space-md);
  align-content: center;
  border-block-start: 1px solid var(--account-rule);
}

.account-overview__action .account-button {
  width: 100%;
  margin: 0;
}

.account-balance__value {
  margin-block: var(--account-space-sm);
}

.account-balance__value strong {
  color: var(--account-ink);
  font-size: 2.75rem;
}

.account-balance__value span {
  color: var(--account-neutral);
}

.account-index,
.account-activity,
.account-recharge {
  min-width: 0;
  margin-top: var(--account-space-lg);
  padding: var(--account-space-lg);
  border: 1px solid var(--account-rule);
  border-block-start: 2px solid var(--account-accent);
  background: var(--account-paper);
}

.account-activity {
  margin-top: 0;
}

.account-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--account-space-sm);
  align-items: end;
}

.account-section-head h2,
.account-payment-panel h2 {
  min-width: 0;
  margin: 0;
  color: var(--account-ink);
  font-family: var(--account-font-display);
  font-size: 1.375rem;
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.account-section-head p {
  margin: var(--account-space-2xs) 0 0;
}

.account-ledger,
.account-order-list {
  margin-top: var(--account-space-lg);
  border-block-start: 1px solid var(--account-rule);
}

.account-ledger__header,
.account-order-list__header {
  display: none;
}

.account-ledger__row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--account-space-xs) var(--account-space-sm);
  padding-block: var(--account-space-md);
}

.account-ledger__main span,
.account-ledger time,
.account-ledger__balance {
  overflow-wrap: anywhere;
}

.account-ledger__amount,
.account-ledger__balance {
  white-space: nowrap;
}

.account-empty {
  grid-template-columns: 2.75rem minmax(0, 1fr);
  padding-block: var(--account-space-xl);
}

.account-empty > span {
  width: 2.75rem;
  height: 2.75rem;
}

.account-pagination {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.account-pagination a,
.account-pagination span {
  min-width: 0;
  padding-inline: var(--account-space-sm);
}

.account-recharge-form {
  gap: 0;
  margin-top: var(--account-space-lg);
  border-block-start: 1px solid var(--account-rule);
}

.account-recharge-block {
  padding-block: var(--account-space-lg) !important;
  border-block-end: 1px solid var(--account-rule) !important;
}

.account-recharge-form legend {
  margin-bottom: 0;
  font-size: 1.125rem;
}

.account-field-caption {
  margin: var(--account-space-2xs) 0 var(--account-space-md);
  color: var(--account-neutral);
}

.account-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--account-space-xs);
}

.account-choice-grid label > span {
  min-height: 72px;
  padding: var(--account-space-sm);
  border: 1px solid var(--account-rule);
  background: var(--account-paper);
}

.account-choice-grid input:checked + span {
  border: 2px solid var(--account-accent-deep);
  color: var(--account-ink);
}

.account-choice-grid input:focus-visible + span,
.account-provider-list input:focus-visible + .account-provider-mark {
  outline: 2px solid var(--account-focus);
  outline-offset: 2px;
}

.account-custom-amount {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--account-space-sm);
  width: 100%;
  min-width: 0;
  margin-top: var(--account-space-md);
  padding: var(--account-space-md);
  border: 1px solid var(--account-rule);
  background: var(--account-paper-3);
}

.account-custom-amount__label {
  display: grid;
  gap: var(--account-space-2xs);
  min-width: 0;
}

.account-custom-amount__label strong {
  color: var(--account-ink);
}

.account-custom-amount__label small {
  min-height: 1.5em;
  color: var(--account-neutral);
  font-weight: 400;
}

.account-custom-amount__label small[data-state="error"] {
  color: var(--account-error);
}

.account-custom-amount__control {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--account-rule);
  background: var(--account-paper);
}

.account-custom-amount__control b {
  display: grid;
  min-width: 0;
  place-items: center;
  color: var(--account-muted);
  border-inline-end: 1px solid var(--account-rule);
  font-weight: 700;
}

.account-recharge-form .account-custom-amount input {
  width: 100%;
  min-width: 0;
  height: 50px;
  margin: 0;
  padding-inline: var(--account-space-sm);
  border: 0;
  border-radius: 0;
  background: var(--account-paper);
  color: var(--account-ink);
  font: 700 1.125rem/1 var(--account-font-body);
  appearance: textfield;
}

.account-recharge-form .account-custom-amount input::-webkit-inner-spin-button,
.account-recharge-form .account-custom-amount input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.account-provider-list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--account-space-xs);
}

.account-provider-list label {
  min-width: 0;
  min-height: 68px;
  padding: var(--account-space-sm);
  background: var(--account-paper);
}

.account-provider-list label:has(input:checked) {
  border: 2px solid var(--account-accent-deep);
}

.account-provider-list strong,
.account-provider-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-recharge-submit {
  display: grid;
  gap: var(--account-space-sm);
  padding-block-start: var(--account-space-lg);
}

.account-recharge-submit .account-button {
  width: 100%;
  margin: 0;
}

.account-payment-note {
  margin: 0;
}

.account-order-list a,
.account-order-list__header {
  min-width: 0;
}

.account-order-list a {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--account-space-xs) var(--account-space-sm);
  padding-block: var(--account-space-md);
}

.account-order-list a > span,
.account-order-list a strong,
.account-order-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-order-status {
  grid-column: 1 / -1;
}

.account-payment-panel,
.account-order-detail {
  max-width: none;
  margin-top: var(--account-space-lg);
  padding: var(--account-space-lg);
  border: 1px solid var(--account-rule);
  border-block-start: 2px solid var(--account-accent);
  background: var(--account-paper);
}

.account-payment-panel {
  justify-items: stretch;
}

.account-payment-panel > h2,
.account-payment-panel > p,
.account-payment-panel > .account-text-link,
.account-payment-panel > form {
  width: 100%;
}

.account-payment-panel > form .account-button {
  width: 100%;
}

.account-payment-qr {
  max-width: 100%;
  justify-self: center;
}

.account-payment-wait {
  border-radius: 0;
}

.account-order-detail {
  gap: var(--account-space-lg);
}

.account-order-detail__status {
  grid-template-columns: 2.75rem minmax(0, 1fr);
}

.account-order-detail__status > span {
  width: 2.75rem;
  height: 2.75rem;
}

.account-order-detail dl div {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--account-space-2xs);
}

.account-order-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--account-space-md);
  align-items: center;
}

.account-order-detail__actions .account-button {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .account-tabs a:hover,
  .account-auth__switch a:hover,
  .account-text-link:hover,
  .account-back:hover {
    color: var(--account-accent-deep);
  }

  .account-choice-grid label:hover > span,
  .account-provider-list label:hover {
    border-color: var(--account-accent-deep);
  }
}

@media (min-width: 48rem) {
  .account-shell,
  .account-shell--auth,
  .account-shell--payment {
    width: min(72rem, calc(100% - 4rem));
  }

  .account-shell--payment {
    width: min(46rem, calc(100% - 4rem));
  }

  .account-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .account-heading--compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-heading--dashboard form,
  .account-heading--dashboard .account-button {
    width: auto;
  }

  .account-auth {
    grid-template-columns: minmax(0, .8fr) minmax(24rem, 1.2fr);
    gap: var(--account-space-xl);
  }

  .account-auth__intro {
    position: sticky;
    top: var(--account-space-lg);
  }

  .account-overview {
    grid-template-columns: minmax(0, 1.5fr) minmax(15rem, .7fr);
  }

  .account-overview__action {
    border-block-start: 0;
    border-inline-start: 1px solid var(--account-rule);
  }

  .account-section-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .account-ledger__header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(9rem, .7fr) 5rem 6rem;
    gap: var(--account-space-md);
    padding-block: var(--account-space-sm);
    color: var(--account-neutral);
    border-block-end: 1px solid var(--account-rule);
    font-size: .875rem;
  }

  .account-ledger__row {
    grid-template-columns: minmax(0, 1.4fr) minmax(9rem, .7fr) 5rem 6rem;
    align-items: center;
  }

  .account-ledger__header span:nth-child(n+2) {
    text-align: end;
  }

  .account-quick-amount-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .account-custom-amount {
    grid-template-columns: minmax(10rem, .55fr) minmax(16rem, 1fr);
    align-items: center;
  }

  .account-provider-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-recharge-submit .account-button {
    width: min(18rem, 100%);
  }

  .account-order-list__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem 6rem;
    gap: var(--account-space-md);
    padding-block: var(--account-space-sm);
    color: var(--account-neutral);
    border-block-end: 1px solid var(--account-rule);
    font-size: .875rem;
  }

  .account-order-list__header span:nth-child(n+2) {
    text-align: end;
  }

  .account-order-list a {
    grid-template-columns: minmax(0, 1fr) 8rem 6rem;
    gap: var(--account-space-md);
  }

  .account-order-status {
    grid-column: auto;
  }

  .account-order-detail dl div {
    grid-template-columns: minmax(9rem, .45fr) minmax(0, 1fr);
    gap: var(--account-space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-shell * {
    scroll-behavior: auto !important;
  }
}