/* Design v9 manual top-up (boards AdminTeams and AdminTeamDetail, dialog
   人工充值; FE9-SEL-A1): the page head, then the form card (at most 640
   wide) beside the chosen team's balance card (under it below 1280px). In
   the card: the team select, the amount (a dollar affix) beside the
   transfer reference, the reason with its counter, the fold of the
   receiving version, evidence and payer notice on gray-25, the gray
   summary of the balance before and after, and the six code boxes; the
   foot holds the duplicate-credit note and the actions. The write status
   is red when refused, amber while the outcome is unknown (retry shown),
   green with the receipt. Local layout only; no outside assets. */
.funding-head { margin: 0; }
.funding-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(240px, 320px); gap: 16px; align-items: start; }
.funding-card { overflow: visible; }
#funding-form { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: none; }
.funding-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.funding-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.funding-field > label, .funding-set > legend { color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.funding-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.funding-team .ctl-label { font-weight: 500; }
.funding-money > .affix { color: var(--text-3); font-size: 14px; }
#funding-amount { font-variant-numeric: tabular-nums; }
#funding-reference { font-family: var(--font-mono); font-size: 13px; }
#funding-reason { min-height: 96px; }
.funding-under { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.funding-under > .counter { margin-left: auto; }
.funding-reason-help { color: var(--text-3); font-size: 13px; line-height: 20px; text-wrap: pretty; }
.counter.is-over { color: var(--danger-fg); }
.funding-error { margin: 0; color: var(--danger-fg); font-size: 12px; line-height: 16px; text-wrap: pretty; }
.funding-error[hidden] { display: none; }
.funding-help { margin: -8px 0 0; color: var(--warning-fg); font-size: 13px; line-height: 20px; }
.funding-help[hidden] { display: none; }
.funding-money:has(input[aria-invalid="true"]), .select.ctl-trigger[aria-invalid="true"] { border-color: var(--danger-solid); box-shadow: var(--ring-danger); }
.funding-fold { margin: -4px 0 0; }
.funding-fold > .btn.btn-link { max-width: 100%; font-size: 13px; line-height: 20px; white-space: normal; text-align: left; }
.funding-fold > .btn.btn-link > .glyph { flex: none; width: 12px; height: 12px; }
.funding-fold > .btn[aria-expanded="true"] > .glyph { transform: rotate(45deg); }
.funding-extra { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--r-8); background: var(--gray-25); }
.funding-extra[hidden] { display: none; }
.funding-switch .ctl-switch { font-size: 13px; }
.funding-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; min-width: 0; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; }
.funding-set > legend { float: left; grid-column: 1 / -1; width: 100%; margin: 0; padding: 0; }
.funding-set > .funding-wide { grid-column: 1 / -1; }
.funding-set .textarea { min-height: 72px; }

/* The summary: the balance before and after, who records it. */
.funding-sum { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 16px; border-radius: var(--r-8); background: var(--gray-25); }
.funding-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; }
.funding-sum-row > dt { min-width: 0; color: var(--text-2); }
.funding-sum-row > dd { margin: 0; color: var(--text-1); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.funding-after { font-weight: 500; }

/* The code: one field over six boxes, 40 by 48 with 8 between them and 8
   more after the third (44 by 52, 6 and 6 on phones). The box the next
   digit goes to wears the focus ring; an empty field shows no digit. */
.funding-otp { position: relative; display: block; width: 288px; max-width: 100%; height: 48px; }
#funding-code { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 0 0 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font: 500 20px/48px var(--font-mono); letter-spacing: 0; text-align: left; }
#funding-code::selection { background: transparent; color: transparent; }
#funding-code:focus, #funding-code:focus-visible { outline: none; box-shadow: none; }
.funding-boxes { position: absolute; inset: 0; display: flex; gap: 8px; pointer-events: none; }
.funding-boxes > span { display: grid; flex: none; place-items: center; width: 40px; height: 48px; border: 1px solid var(--gray-200); border-radius: var(--r-8); background: var(--gray-0); box-shadow: var(--shadow-control); color: var(--text-1); font: 500 20px/28px var(--font-mono); transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); }
.funding-boxes > span:nth-child(4) { margin-left: 8px; }
.funding-otp:hover .funding-boxes > span { border-color: var(--gray-300); }
#funding-code:focus:not([aria-invalid="true"]) + .funding-boxes > .is-next { border-color: var(--violet-600); box-shadow: var(--ring-input); }
#funding-code[aria-invalid="true"] + .funding-boxes > span { border-color: var(--danger-solid); box-shadow: var(--ring-danger); }
#funding-code:placeholder-shown + .funding-boxes > span { color: transparent; }
#funding-code:disabled + .funding-boxes > span { border-color: var(--gray-150); background: var(--gray-25); box-shadow: none; }

/* The write status and the receipt. */
.funding-status { margin: 0; padding: 10px 12px 10px 16px; border: 1px solid var(--danger-border); border-radius: var(--r-8); background: var(--danger-tint); color: var(--danger-fg); font-size: 14px; line-height: 20px; }
.funding-status:empty { display: none; }
#funding-form:has(#funding-receipt:not(:empty)) .funding-status { border-color: var(--success-border); background: var(--success-tint); color: var(--success-fg); }
#funding-form:has(#funding-retry:not([hidden])) .funding-status { border-color: var(--warning-border); background: var(--warning-tint); color: var(--warning-fg); }
.funding-receipt:empty { display: none; }
.funding-receipt { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--success-border); border-radius: var(--r-8); background: var(--gray-0); }
.funding-receipt-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--success-fg); font: 500 14px/20px var(--font-sans); }
.funding-receipt dl { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.funding-receipt dt { color: var(--text-2); font-size: 13px; line-height: 20px; }
.funding-receipt dd { min-width: 0; margin: 0; color: var(--text-1); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.funding-receipt-links { margin: 0; font-size: 13px; line-height: 20px; }
.funding-receipt-links > a { color: var(--violet-600); font-weight: 500; }

/* The foot: the duplicate-credit note at the left, the actions at the
   right; one primary action. */
.funding-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px 24px; border-top: 1px solid var(--line-soft); }
.funding-note { flex: 1 1 260px; min-width: 0; margin: 0; color: var(--text-3); font-size: 13px; line-height: 20px; text-wrap: pretty; }
.funding-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 0 auto; }
.funding-actions > .btn[hidden] { display: none; }

/* The team's balance card. */
.funding-side { display: flex; flex-direction: column; gap: 4px; padding: 20px; }
.funding-side[hidden] { display: none; }
.funding-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.funding-side-title { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.funding-side-name { margin: 0; color: var(--text-1); font: 500 14px/20px var(--font-sans); overflow-wrap: anywhere; }
.funding-side-id { margin: 0; color: var(--text-3); font: 400 12px/16px var(--font-mono); overflow-wrap: anywhere; }
.funding-side-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 12px 0 0; }
.funding-side-stats[hidden] { display: none; }
.funding-side-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.funding-side-stat > dt { color: var(--text-2); font-size: 13px; line-height: 20px; }
.funding-side-stat > dd { margin: 0; color: var(--text-1); font: 500 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.funding-side-stat:first-child > dd { font-size: 20px; line-height: 28px; font-weight: 600; }
.funding-side-note { margin: 12px 0 0; color: var(--text-3); font-size: 13px; line-height: 20px; }
.funding-side-note[hidden] { display: none; }
.funding-side-foot { margin: 12px 0 0; }
.funding-side-foot > .btn.btn-link { font-size: 13px; line-height: 20px; }

@media (max-width: 1279px) {
  .funding-grid { grid-template-columns: minmax(0, 1fr); }
  .funding-card { max-width: 640px; }
  .funding-side { max-width: 640px; }
}
@media (max-width: 767px) {
  .funding-body { padding: 16px; }
  .funding-foot { padding: 12px 16px; }
  .funding-pair, .funding-set { grid-template-columns: minmax(0, 1fr); }
  .funding-actions { width: 100%; }
  .funding-actions > .btn { flex: 1 1 auto; height: 44px; }
  .funding-sum-row { flex-direction: column; align-items: stretch; gap: 2px; }
  .funding-sum-row > dd { text-align: left; }
  .funding-body :is(.input, .textarea), #funding-amount { font-size: 16px; }
  .funding-otp { width: 300px; height: 52px; }
  #funding-code { font-size: 16px; line-height: 52px; }
  .funding-boxes { gap: 6px; }
  .funding-boxes > span { width: 44px; height: 52px; }
  .funding-boxes > span:nth-child(4) { margin-left: 6px; }
  .funding-receipt dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .funding-receipt dd { margin-bottom: 6px; }
}