.history-workbench-host { width: 100%; min-width: 0; box-sizing: border-box; padding: 0 clamp(20px, 5vw, 96px) 32px; grid-column: 1 / -1; grid-row: 3; }
.recharge-history { container-type: inline-size; container-name: recharge-workbench; min-width: 0; padding: 28px; border: 1px solid #e0e9f3; border-radius: 22px; color: #193b59; background: #fff; box-shadow: 0 12px 36px rgba(31, 62, 101, .045); font-family: inherit; text-align: left; box-sizing: border-box; }
.recharge-history *, .recharge-history *::before, .recharge-history *::after { box-sizing: border-box; }
.rh-head, .rh-heading, .rh-toolbar, .rh-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.rh-head { align-items: flex-start; flex-wrap: wrap; }
.rh-intro { min-width: 0; }
.rh-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: #3777bd; font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .12em; }
.rh-eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: #4a92df; box-shadow: 0 0 0 3px #edf5ff; content: ""; }
.rh-heading { justify-content: flex-start; gap: 12px; }
.recharge-history .rh-heading h3 { margin: 0; color: #183654; font-size: 25px; line-height: 1.4; font-weight: 800; letter-spacing: -.03em; }
.rh-count { padding: 4px 9px; border: 1px solid #e3ebf5; border-radius: 7px; color: #6a8098; background: #f5f8fc; font-size: 11px; line-height: 1.5; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.recharge-history .rh-description { margin: 8px 0 0; color: #8795a6; font-size: 12px; line-height: 1.7; }
.rh-toolbar { justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.recharge-history .rh-button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: auto; min-height: 36px; margin: 0; padding: 7px 11px; border: 1px solid #e3ebf4; border-radius: 8px; background: #fff; box-shadow: none; color: #667f99; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer; transform: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.recharge-history .rh-button:hover { color: #246db8; border-color: #cbdff4; background: #f0f7ff; transform: none; box-shadow: none; }
.recharge-history .rh-button:focus-visible { outline: 2px solid #3289e9; outline-offset: 3px; }
.recharge-history .rh-button:disabled { cursor: default; opacity: .45; }
.recharge-history .rh-refresh { border-color: #cfe2f9; color: #397fc8; background: #f0f7ff; }
.recharge-history .rh-clear { border-color: transparent; background: transparent; color: #8b97a7; }
.recharge-history .rh-clear:hover { border-color: #f0dedf; background: #fff5f4; color: #ac6c6f; }
.rh-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.rh-stat { display: grid; min-width: 0; gap: 8px; padding: 17px 20px 16px; border: 1px solid #e5edf6; border-radius: 13px; background: #f7faff; }
.rh-stat-label { color: #6f87a2; font-size: 12px; line-height: 1.5; }
.rh-stat-value { color: #3c7fc7; font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif; font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rh-stat-hint { color: #91a0b1; font-size: 11px; line-height: 1.5; }
.rh-stat-processing { border-color: #f0e9d9; background: #fffcf5; }
.rh-stat-processing .rh-stat-value { color: #c29640; }
.rh-stat-success { border-color: #dceee6; background: #f5fbf8; }
.rh-stat-success .rh-stat-value { color: #56a18b; }
.rh-stat-attention { border-color: #f1e3e5; background: #fff9fa; }
.rh-stat-attention .rh-stat-value { color: #bc838b; }
.rh-list { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 14px; max-height: 620px; padding: 1px 4px 3px 1px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cedae7 transparent; }
.rh-row { display: flex; min-width: 0; flex-direction: column; padding: 20px 21px 13px; border: 1px solid #e1eaf3; border-radius: 14px; background: #fff; box-shadow: 0 2px 5px rgba(37, 74, 109, .018); }
.rh-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 20px; }
.rh-meta { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: 7px 12px; }
.rh-plan { padding: 4px 8px; border: 1px solid #dfeaf8; border-radius: 6px; color: #5385b6; background: #f2f7fe; font-size: 12px; line-height: 1.5; font-weight: 700; }
.rh-time { color: #99a5b3; font-size: 11px; line-height: 1.6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rh-status { flex: 0 1 auto; max-width: 165px; padding: 5px 9px; border-radius: 7px; font-size: 11px; font-weight: 600; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.rh-status-pending { color: #b48a36; background: #fff5dd; }
.rh-status-success { color: #47917d; background: #eaf7f0; }
.rh-status-attention { color: #b9787e; background: #fff0f1; }
.rh-identity, .rh-account { display: grid; min-width: 0; gap: 6px; }
.rh-account { margin-top: 15px; margin-bottom: 19px; }
.rh-field-label { color: #94a1b1; font-size: 11px; line-height: 1.5; }
.rh-code { display: block; min-width: 0; color: #25425f; font-family: "Cascadia Code", "Cascadia Mono", Consolas, monospace; font-size: 14px; font-weight: 600; line-height: 1.7; letter-spacing: .025em; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; user-select: text; }
.rh-email { display: block; min-width: 0; color: #61758c; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; user-select: text; }
.rh-email-empty { color: #a2aebb; }
.rh-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid #eef2f7; }
.recharge-history .rh-copy, .recharge-history .rh-remove { border-color: transparent; background: transparent; }
.recharge-history .rh-copy { color: #5c8abb; }
.recharge-history .rh-remove { color: #99a5b3; }
.recharge-history .rh-remove:hover { color: #b9787e; background: #fff3f3; }
.rh-footer { margin-top: 17px; align-items: flex-start; flex-wrap: wrap; gap: 8px 20px; }
.rh-update { min-width: 0; color: #8a9bb0; font-size: 11px; line-height: 1.7; }
.rh-update::before { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #7baeb0; vertical-align: 2px; content: ""; }
.rh-update-error { color: #ad823d; }
.rh-update-error::before { background: #c6a46d; }
.recharge-history .rh-note { margin: 0; color: #a2acb9; font-size: 11px; line-height: 1.7; }
.rh-empty { grid-column: 1 / -1; padding: 44px 18px; border: 1px dashed #dce6f0; border-radius: 12px; background: #fafcfe; text-align: center; color: #8a9bae; font-size: 13px; line-height: 1.8; }
.vip-page .rh-plan { color: #aa8750; border-color: #eee4d3; background: #fcf8f0; }
#accountContent [data-recharge-history] { min-width: 0; margin: 20px 24px; }
@container recharge-workbench (min-width: 660px) {
  .rh-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container recharge-workbench (min-width: 720px) {
  .rh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .vip-page .cdk-card { grid-template-rows: auto minmax(0, 1fr) auto 48px; }
  .vip-page .history-workbench-host { padding: 30px 44px 32px; border-top: 1px solid #e3ebf4; }
  .vip-page .cdk-card-footer { grid-row: 4; }
}
@media (max-width: 700px) {
  .history-workbench-host { padding: 0 20px 24px; }
  .recharge-history { padding: 20px; border-radius: 17px; }
  .recharge-history .rh-heading h3 { font-size: 23px; }
  .rh-toolbar { justify-content: flex-start; padding-top: 0; }
  .rh-stats { gap: 10px; margin: 20px 0; }
  .rh-stat { padding: 15px; }
  .rh-stat-value { font-size: 29px; }
  .rh-row { padding: 17px 17px 11px; }
  .rh-list { max-height: 590px; }
  .rh-card-head { gap: 10px; margin-bottom: 17px; }
  .rh-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rh-status { max-width: 125px; }
}
@media (max-width: 420px) {
  .history-workbench-host { padding-right: 12px; padding-left: 12px; }
  .recharge-history { padding: 16px 13px; }
  .recharge-history .rh-heading h3 { font-size: 22px; }
  .rh-head { gap: 15px; }
  .rh-toolbar { width: 100%; gap: 5px; }
  .recharge-history .rh-toolbar .rh-button { flex: 1 1 auto; min-height: 36px; padding: 7px 6px; font-size: 11px; }
  .rh-stat { gap: 7px; padding: 13px 12px; }
  .rh-stat-hint { font-size: 10px; }
  .rh-row { padding: 15px 13px 9px; }
  .rh-code { font-size: 13px; }
  .rh-status { max-width: 108px; }
  .rh-count { font-size: 10px; }
  #accountContent [data-recharge-history] { margin-right: 12px; margin-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .recharge-history .rh-button { transition: none; }
}