/* 仅作用于升级付款选择器，不改站点主题、普通商品结算或资金逻辑。 */
.up-payment-panel {
  --up-ink: var(--ui-text-primary); --up-muted: var(--ui-text-muted); --up-accent: var(--ui-accent);
  --up-line: var(--ui-border); --up-surface: var(--ui-bg-elevated); --up-soft: var(--ui-bg-soft); --up-selected: var(--ui-accent-soft);
  box-sizing: border-box; padding: clamp(20px, 3vw, 36px); margin: 0 0 24px;
  color: var(--up-ink); background: var(--up-surface); border: 1px solid var(--up-line);
  border-radius: var(--ui-radius-xl); box-shadow: var(--ui-shadow-soft); font-size: 14px; line-height: 1.6;
}
.up-payment-panel *, .up-payment-panel *::before, .up-payment-panel *::after { box-sizing: border-box; }
.up-payment-panel p, .up-payment-panel h3 { margin: 0; }
.up-payment-panel svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.up-pay-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.up-pay-eyebrow { display: inline-flex; background: var(--up-selected); color: var(--ui-accent-hover); border-radius: 20px; padding: 3px 11px; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.up-payment-panel .up-pay-heading { margin: 8px 0 4px; font-size: clamp(23px, 2.5vw, 30px); font-weight: 750; line-height: 1.4; letter-spacing: -.02em; }
.up-payment-panel .up-pay-subtitle { color: var(--up-muted); font-size: 14px; }
.up-payment-panel .up-pay-link { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-height: 44px; padding: 4px 2px; border: 0; background: transparent; color: var(--up-accent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.up-payment-panel .up-pay-link:hover:not(:disabled) { color: var(--ui-accent-hover); text-decoration: underline; text-underline-offset: 4px; }
.up-pay-refresh { white-space: nowrap; flex-shrink: 0; }
.up-payment-panel button:disabled { cursor: not-allowed; opacity: .5; }
.up-payment-panel :is(button, a, input, summary):focus-visible { outline: 3px solid var(--up-accent); outline-offset: 4px; }
.up-pay-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.up-pay-card { position: relative; display: flex; align-items: flex-start; gap: 18px; min-width: 0; min-height: 190px; padding: 26px 46px 24px 24px; border: 1px solid var(--up-line); border-radius: var(--ui-radius-lg); background: var(--up-surface); cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.up-pay-card:not(.is-unavailable):hover { border-color: var(--up-accent); box-shadow: 0 4px 16px var(--ui-accent-soft); }
.up-pay-card.is-selected { border-color: var(--up-accent); box-shadow: inset 0 0 0 1px var(--up-accent); background: var(--up-selected); }
.up-pay-card.is-unavailable { cursor: not-allowed; }
.up-pay-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.up-pay-card:has(input:focus-visible) { outline: 3px solid var(--up-accent); outline-offset: 4px; }
.up-pay-radio { position: absolute; right: 18px; top: 21px; display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid var(--ui-border-strong); border-radius: 50%; color: var(--ui-text-on-accent); font-size: 15px; font-weight: 800; line-height: 1; }
.is-selected .up-pay-radio { border-color: var(--up-accent); background: var(--up-accent); }
.up-pay-icon { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--ui-radius-lg); background: var(--up-soft); color: var(--up-ink); }
.up-pay-icon svg { width: 33px; height: 33px; }
.up-pay-icon.is-usdt { border-radius: 50%; color: var(--ui-bg-page); background: var(--ui-success); font-size: 36px; line-height: 1; font-weight: 500; }
.up-pay-content { display: flex; align-items: flex-start; flex-direction: column; min-width: 0; gap: 7px; overflow-wrap: anywhere; hyphens: auto; }
.up-pay-title { font-size: 20px; line-height: 1.4; font-weight: 750; color: var(--up-ink); }
.up-pay-balance { color: var(--up-muted); font-size: 14px; }
.up-pay-balance b { color: var(--up-ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.up-pay-badge { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.up-pay-badge.is-warning { color: var(--ui-warning); background: var(--ui-warning-soft); }
.up-pay-badge.is-ready { color: var(--ui-success); background: var(--ui-success-soft); }
.up-pay-badge.is-selected { color: var(--ui-accent-hover); background: var(--up-selected); }
.up-pay-description { color: var(--up-muted); font-size: 13px; line-height: 1.65; }
.up-payment-panel .up-pay-notice { display: flex; align-items: center; gap: 10px; margin: 18px 0 24px; padding: 12px 16px; background: var(--up-selected); border-radius: var(--ui-radius-md); font-size: 13px; }
.up-pay-notice svg { color: var(--up-accent); }
.up-pay-recharge { position: relative; border-top: 1px solid var(--up-line); }
.up-pay-recharge[hidden] { display: none !important; }
.up-pay-networks { margin: 18px 0 22px; padding-top: 18px; border-top: 1px solid var(--up-line); }
.up-pay-networks > div { min-width: 0; }
.up-payment-panel .up-pay-networks p { color: var(--up-muted); font-size: 12px; line-height: 1.7; }
.up-pay-networks button { min-width: 0; border-radius: var(--ui-radius-md); overflow-wrap: anywhere; }
.up-pay-networks button:not(.theme-selected-surface) { background: var(--up-soft); border-color: var(--up-line); }
.up-pay-networks button.theme-selected-surface { background: var(--up-selected); border-color: var(--up-accent); }
.up-pay-recharge > .up-pay-link { position: absolute; top: 15px; right: 38px; z-index: 1; font-size: 13px; max-width: 40%; text-align: end; }
.up-pay-summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 20px 45% 20px 0; cursor: pointer; position: relative; }
.up-pay-summary::-webkit-details-marker { display: none; }
.up-pay-gift-icon { display: grid; place-items: center; height: 43px; width: 43px; border-radius: var(--ui-radius-md); background: var(--up-selected); color: var(--up-accent); flex-shrink: 0; }
.up-pay-gift-icon svg { width: 25px; height: 25px; }
.up-pay-summary-copy { display: flex; flex-direction: column; min-width: 0; }
.up-pay-summary-copy strong { font-size: 16px; }
.up-pay-summary-copy > span { color: var(--up-muted); font-size: 12px; margin-top: 2px; }
.up-pay-chevron { position: absolute; right: 0; color: var(--up-accent); transition: transform .18s; }
.up-pay-disclosure[open] .up-pay-chevron { transform: rotate(180deg); }
.up-pay-form { display: grid; gap: 15px; padding: 20px; background: var(--up-soft); border: 1px solid var(--up-line); border-radius: var(--ui-radius-lg); margin-bottom: 20px; }
.up-pay-field { display: flex; flex-direction: column; gap: 8px; font-weight: 600; }
.up-payment-panel .up-pay-input { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--up-line); border-radius: var(--ui-radius-md); background: var(--up-surface); color: var(--up-ink); font-size: 16px; font-weight: 400; line-height: 1.5; }
.up-pay-input::placeholder { color: var(--up-muted); opacity: .8; }
.up-pay-captcha { display: grid; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.up-pay-captcha > div { max-width: 100%; }
.up-pay-form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.up-pay-redeem { min-height: 44px; padding: 9px 21px; border: 1px solid var(--up-accent); border-radius: 24px; background: var(--up-surface); color: var(--up-accent); font: inherit; font-weight: 650; cursor: pointer; }
.up-pay-redeem:hover:not(:disabled) { background: var(--up-selected); }
.up-payment-panel .up-pay-form-hint { color: var(--up-muted); font-size: 12px; line-height: 1.7; }
.up-payment-panel .up-pay-footer { padding-top: 14px; border-top: 1px solid var(--up-line); color: var(--up-muted); font-size: 12px; }
/* 原页面已经有标题；该状态使用卡片内的完整标题，避免重复。 */
[data-upgrade-role="channels"]:has(.up-pay-choices) > h2 { display: none; }
@media (max-width: 800px) {
  .up-pay-card { flex-direction: column; gap: 12px; padding: 20px; }
  .up-pay-title { font-size: 18px; }
  .up-pay-header { gap: 12px; }
  .up-pay-refresh { font-size: 12px !important; }
}
@media (max-width: 560px) {
  [data-upgrade-role="channels"]:has(.up-pay-choices) { padding: 0; }
  .up-payment-panel { padding: 18px; border-radius: var(--ui-radius-lg); }
  .up-pay-header { align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; gap: 6px; }
  .up-pay-choices { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .up-pay-card { flex-direction: row; align-items: flex-start; min-height: 145px; padding: 18px 42px 18px 16px; }
  .up-pay-icon { width: 42px; height: 42px; border-radius: var(--ui-radius-md); }
  .up-pay-icon svg { width: 28px; height: 28px; }
  .up-pay-icon.is-usdt { font-size: 30px; }
  .up-pay-content { gap: 5px; }
  .up-pay-radio { right: 14px; top: 18px; width: 21px; height: 21px; }
  .up-pay-recharge { display: flex; flex-direction: column; }
  .up-pay-recharge > .up-pay-link { position: static; align-self: flex-start; order: 1; margin: -8px 0 10px 55px; max-width: calc(100% - 55px); text-align: start; }
  .up-pay-summary { padding-right: 27px; }
  .up-pay-form { padding: 12px; margin: 0 0 18px; }
  .up-pay-captcha { overflow-x: auto; }
  .up-pay-form-actions { gap: 14px; }
  .up-payment-panel .up-pay-notice { align-items: flex-start; padding: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .up-pay-card, .up-pay-chevron { transition: none; } }