/* 充值与邀请返现：沿用前台纸色 / 后台浅色变量，独立约束交易表单和响应式。 */
.recharge-card { margin-top: 16px; }
.commerce-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.commerce-head h2 { font-size: 20px; }
.commerce-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.recharge-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.recharge-option {
  appearance: none; font: inherit; text-align: left; cursor: pointer; padding: 18px;
  border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--card);
  display: flex; flex-direction: column; gap: 5px; transition: border-color .15s, background .15s;
}
.recharge-option:hover { border-color: var(--pri); background: var(--pri-soft); }
.recharge-option:disabled { opacity: .65; cursor: wait; }
.recharge-option .offer-name { color: var(--muted); font-size: 12px; }
.recharge-option .offer-credits { font-size: 27px; font-weight: 700; line-height: 1.3; }
.recharge-option .offer-credits small { font-size: 12px; font-weight: 400; margin-left: 5px; }
.recharge-option .offer-price { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--pri); }
body.front .recharge-option .offer-credits { font-family: var(--serif); }
body.front .recharge-option:hover { border-color: var(--gold); background: var(--gold-soft); }
.checkout { text-align: center; }
.checkout-price { font-size: 32px; line-height: 1.3; font-weight: 700; color: var(--pri); }
.checkout-credits { color: var(--muted); margin-top: 5px; }
.checkout-code { display: block; width: 224px; max-width: 100%; height: auto; margin: 18px auto 12px; border-radius: 8px; image-rendering: pixelated; }
.checkout-expired .checkout-code { opacity: .18; }
.checkout-state { padding: 10px 14px; border-radius: 10px; margin-top: 14px; background: var(--pri-soft); }
.checkout-error { color: var(--danger); min-height: 20px; font-size: 12px; margin-top: 12px; }
.checkout-order { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; margin-top: 12px; }
.checkout-success img { width: 120px; height: 120px; object-fit: contain; margin: 8px auto 12px; }
.checkout-success h3 { font-size: 24px; margin-bottom: 8px; }
.referral-hero { padding: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 22px; align-items: center; }
.referral-hero h2 { font-size: 28px; line-height: 1.35; margin: 7px 0 10px; }
.referral-hero img { width: 120px; height: 120px; object-fit: contain; }
.referral-link { display: flex; gap: 8px; margin-top: 20px; }
.referral-link input { min-width: 0; flex: 1; }
.referral-code { font-size: 12px; color: var(--muted); margin-top: 8px; }
.referral-code strong { color: var(--ink); letter-spacing: 1px; }
.referral-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.referral-stat { border: 1px solid var(--line); border-radius: 14px; padding: 17px 20px; background: var(--card); }
.referral-stat .v { font-size: 28px; font-weight: 700; line-height: 1.4; }
.referral-stat .k { font-size: 12px; color: var(--muted); }
body.front .referral-stat .v { font-family: var(--serif); }
body.front .referral-stat:last-child { background: var(--gold-soft); border-color: var(--gold); }
.referral-rules { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.referral-tabs { margin: 22px 0 12px; }
.finance-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.finance-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.finance-stats .stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.finance-stats .k { font-size: 12px; color: var(--muted); }
.finance-stats .v { font-size: 26px; font-weight: 700; margin-top: 4px; }
.finance-settings { margin-bottom: 18px; }
.finance-settings summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.finance-settings[open] summary { margin-bottom: 18px; }
.finance-settings .commerce-note { margin: 8px 0 14px; }
.finance-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.referral-settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-form-grid .field { min-width: 0; }
.finance-form-grid label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.finance-form-grid .span-two { grid-column: 1 / -1; }
.finance-form-grid textarea { width: 100%; min-height: 94px; resize: vertical; font-size: 12px; }
.finance-package { display: grid; grid-template-columns: minmax(90px, 1fr) 100px 110px auto; gap: 8px; align-items: end; margin: 10px 0; }
.finance-package label { display: block; font-size: 11px; margin-bottom: 4px; color: var(--muted); }
.finance-package input { width: 100%; }
.finance-packages-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.finance-save { display: flex; justify-content: flex-end; margin-top: 18px; }
.finance-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.finance-filters input { min-width: 180px; flex: 1; }
.finance-filters select { width: auto; }
.finance-inline-error { color: var(--danger); font-size: 12px; min-height: 20px; margin-top: 8px; }
.finance-table-count { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.finance-person { font-weight: 600; }
.finance-person small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; overflow-wrap: anywhere; }
.finance-positive { color: var(--ok); font-weight: 700; }
.invite-feedback { font-size: 12px; color: var(--muted); margin-top: 6px; }
.invite-feedback.invalid { color: var(--danger); }
@media (max-width: 700px) {
  .finance-form-grid { grid-template-columns: minmax(0, 1fr); }
  .finance-form-grid .span-two { grid-column: auto; }
  .finance-stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-package { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .finance-package > :first-child { grid-column: 1 / -1; }
  .finance-package > button { justify-self: end; }
}
@media (max-width: 540px) {
  body.front .zone-tabs .tab { font-size: 14px; padding: 10px 5px; min-width: 0; }
  .recharge-offers { grid-template-columns: minmax(0, 1fr); }
  .recharge-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 16px; }
  .recharge-option .offer-credits { font-size: 24px; }
  .recharge-option .offer-price { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .referral-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .referral-hero h2 { font-size: 24px; }
  .referral-hero > img { display: none; }
  .referral-link { flex-wrap: wrap; }
  .referral-link input { flex-basis: 100%; }
  .referral-link .btn { width: 100%; }
  .referral-stat { padding: 14px 9px; }
  .referral-stat .v { font-size: 23px; }
  .referral-stat .k { font-size: 11px; }
  .finance-stats { gap: 8px; }
  .finance-stats .stat { padding: 14px 10px; }
  .finance-stats .v { font-size: 22px; }
  .checkout-code { width: 208px; }
}