From af3539914d2eba10170cff179f1e43a6949ee87a Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Wed, 26 Aug 2026 22:50:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BA=86=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E5=B0=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/frontend/cms-download.css          | 702 ++++++++++++++++++
 assets/img/pay-alipay-logo.svg                |   4 +
 assets/img/pay-balance-logo.svg               |   6 +
 assets/img/pay-paypal-logo.svg                |   5 +
 assets/img/pay-stripe-logo.svg                |   3 +
 assets/img/pay-wechat-logo.svg                |   3 +
 assets/js/cms-download.js                     | 332 +++++----
 src/Core/ScriptsPart1b.php                    |   8 +
 .../widget-system/pay-card-contract.test.cjs  |  28 +
 9 files changed, 956 insertions(+), 135 deletions(-)
 create mode 100644 assets/css/frontend/cms-download.css
 create mode 100644 assets/img/pay-alipay-logo.svg
 create mode 100644 assets/img/pay-balance-logo.svg
 create mode 100644 assets/img/pay-paypal-logo.svg
 create mode 100644 assets/img/pay-stripe-logo.svg
 create mode 100644 assets/img/pay-wechat-logo.svg

diff --git a/assets/css/frontend/cms-download.css b/assets/css/frontend/cms-download.css
new file mode 100644
index 00000000..e22ca51a
--- /dev/null
+++ b/assets/css/frontend/cms-download.css
@@ -0,0 +1,702 @@
+.aksrt-dl-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: none;
+}
+
+.aksrt-dl-modal.is-open {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.aksrt-dl-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 55%);
+}
+
+.aksrt-dl-modal__dialog {
+  position: relative;
+  z-index: 1;
+  width: 400px;
+  max-width: calc(100% - 20px);
+  margin: 0 auto;
+}
+
+.aksrt-dl-modal__panel {
+  position: relative;
+  width: 100%;
+  max-height: calc(100vh - 20px);
+  overflow: hidden auto;
+  color: var(--main-color, #111827);
+  background: var(--main-bg-color, #fff);
+  border: 0;
+  border-radius: var(--main-radius, 8px);
+  box-shadow: 0 24px 56px rgb(15 23 42 / 24%);
+}
+
+.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel {
+  padding: 26px 28px 24px;
+}
+
+.aksrt-dl-modal__close,
+.aksrt-cashier__close {
+  appearance: none;
+  position: absolute;
+  z-index: 9;
+  top: 10px;
+  right: 12px;
+  padding: 0;
+  color: var(--muted-color, #6b7280);
+  font: 400 24px/1 sans-serif;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.aksrt-dl-modal.is-cashier > .aksrt-dl-modal__dialog > .aksrt-dl-modal__panel > .aksrt-dl-modal__close {
+  display: none;
+}
+
+.aksrt-dl-modal__title {
+  margin: 0 28px 18px 0;
+  color: var(--main-color, #111827);
+  font: 700 20px/1.3 inherit;
+}
+
+.aksrt-dl-modal__msg {
+  margin: 0 0 18px;
+  color: var(--muted-color, #4b5563);
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.aksrt-dl-modal__msg--warn {
+  padding: 12px 0;
+  color: #92400e;
+  background: transparent;
+  border: 0;
+  border-top: 1px solid #fde68a;
+  border-bottom: 1px solid #fde68a;
+}
+
+.aksrt-dl-modal__row {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) 72px;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 0;
+  margin: 0 0 18px;
+  border-top: 1px solid var(--main-border-color, #e5e7eb);
+  border-bottom: 1px solid var(--main-border-color, #e5e7eb);
+}
+
+.aksrt-dl-modal__label {
+  color: var(--muted-color, #6b7280);
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.aksrt-dl-modal__code {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--main-color, #111827);
+  font: 800 18px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  letter-spacing: 0.06em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aksrt-dl-modal__copy {
+  appearance: none !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 72px !important;
+  height: 32px !important;
+  padding: 0 !important;
+  overflow: visible !important;
+  color: #2563eb !important;
+  font-family: inherit !important;
+  font-size: 0 !important;
+  font-weight: 700 !important;
+  line-height: 1 !important;
+  text-indent: 0 !important;
+  white-space: nowrap !important;
+  cursor: pointer !important;
+  visibility: visible !important;
+  background: #eff6ff !important;
+  border: 1px solid #bfdbfe !important;
+  border-radius: 8px !important;
+  opacity: 1 !important;
+  -webkit-text-fill-color: #2563eb !important;
+}
+
+.aksrt-dl-modal__copy::before,
+.aksrt-dl-modal__copy::after {
+  display: none !important;
+  content: none !important;
+}
+
+.aksrt-dl-modal__copy:hover {
+  color: #1d4ed8 !important;
+  background: #dbeafe !important;
+  border-color: #93c5fd !important;
+  -webkit-text-fill-color: #1d4ed8 !important;
+}
+
+.aksrt-dl-modal__copy-text {
+  position: relative !important;
+  z-index: 2 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  color: #2563eb !important;
+  font-family: inherit !important;
+  font-size: 13px !important;
+  font-weight: 700 !important;
+  line-height: 1 !important;
+  text-indent: 0 !important;
+  white-space: nowrap !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  -webkit-text-fill-color: #2563eb !important;
+}
+
+.aksrt-dl-modal__copy:hover .aksrt-dl-modal__copy-text {
+  color: #1d4ed8 !important;
+  -webkit-text-fill-color: #1d4ed8 !important;
+}
+
+.aksrt-dl-modal__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  padding-top: 4px;
+}
+
+.aksrt-dl-modal__download {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 0 18px;
+  text-decoration: none;
+  cursor: pointer;
+  border: 0;
+  border-radius: 9px;
+}
+
+.aksrt-dl-modal__balance {
+  margin-left: auto;
+  color: var(--muted-color, #6b7280);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.aksrt-dl-modal.is-cashier .aksrt-dl-modal__body {
+  position: relative;
+  min-height: 120px;
+}
+
+.aksrt-dl-modal .modal-colorful-header,
+.aksrt-dl-modal .colorful-bg {
+  position: relative;
+  overflow: hidden;
+  color: var(--this-color);
+  background: var(--this-bg);
+  background-size: 120%;
+}
+
+.aksrt-dl-modal .modal-colorful-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
+}
+
+.aksrt-dl-modal .colorful-bg > .colorful-make,
+.aksrt-dl-modal .colorful-bg > .colorful-make::before,
+.aksrt-dl-modal .colorful-bg > .colorful-make::after {
+  position: absolute;
+  color: var(--this-color);
+  background: var(--this-bg);
+  border-radius: 100%;
+  content: '';
+}
+
+.aksrt-dl-modal .colorful-bg > .colorful-make {
+  top: 60%;
+  bottom: 0;
+  width: 323px;
+  height: 290px;
+  animation: aksrt-cashier-colorful 120s linear infinite;
+}
+
+.aksrt-dl-modal .colorful-bg > .colorful-make::before {
+  top: -325px;
+  right: -558px;
+  bottom: 0;
+  width: 677px;
+  height: 300px;
+  opacity: 0.6;
+  transform: rotate(341deg);
+}
+
+.aksrt-dl-modal .colorful-bg > .colorful-make::after {
+  top: -170px;
+  bottom: 0;
+  left: -262px;
+  width: 402px;
+  height: 214px;
+  opacity: 0.4;
+  transform: rotate(326deg);
+}
+
+.aksrt-dl-modal .colorful-bg > .colorful-make + * {
+  position: relative;
+}
+
+.aksrt-dl-modal .aksrt-cashier__close {
+  color: var(--this-color, #fff);
+  font-size: 18px;
+  opacity: 0.6;
+}
+
+.aksrt-dl-modal .modal-pay-body {
+  padding: 15px;
+  margin-top: 120px;
+}
+
+.aksrt-cashier__loading {
+  min-height: 70px;
+  margin: 0;
+  line-height: 70px;
+  text-align: center;
+}
+
+.aksrt-dl-modal .text-center {
+  text-align: center;
+}
+
+.aksrt-dl-modal .em2x {
+  font-size: 2em;
+}
+
+.aksrt-dl-modal .em09 {
+  font-size: 0.9em;
+}
+
+.aksrt-dl-modal .em12 {
+  font-size: 1.2em;
+}
+
+.aksrt-dl-modal .em14 {
+  font-size: 1.4em;
+}
+
+.aksrt-dl-modal .mt6 {
+  margin-top: 6px;
+}
+
+.aksrt-dl-modal .mt10 {
+  margin-top: 10px;
+}
+
+.aksrt-dl-modal .mb6 {
+  margin-bottom: 6px;
+}
+
+.aksrt-dl-modal .mb10 {
+  margin-bottom: 10px;
+}
+
+.aksrt-dl-modal .mb20 {
+  margin-bottom: 20px;
+}
+
+.aksrt-dl-modal .mr6 {
+  margin-right: 6px;
+}
+
+.aksrt-dl-modal .ml6 {
+  margin-left: 6px;
+}
+
+.aksrt-dl-modal .ml10 {
+  margin-left: 10px;
+}
+
+.aksrt-dl-modal .px12 {
+  font-size: 12px;
+}
+
+.aksrt-dl-modal .padding-h6 {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.aksrt-dl-modal .padding-h10 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.aksrt-dl-modal .padding-w10 {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.aksrt-dl-modal .line-16 {
+  line-height: 1.6;
+}
+
+.aksrt-dl-modal .flex {
+  display: flex;
+}
+
+.aksrt-dl-modal .flex.jsb {
+  justify-content: space-between;
+}
+
+.aksrt-dl-modal .flex.jc {
+  justify-content: center;
+}
+
+.aksrt-dl-modal .flex.ac {
+  align-items: center;
+}
+
+.aksrt-dl-modal .flex.ab {
+  align-items: baseline;
+}
+
+.aksrt-dl-modal .flex.hh {
+  flex-direction: column;
+}
+
+.aksrt-dl-modal .flex-auto {
+  flex: auto;
+}
+
+.aksrt-dl-modal .pointer {
+  cursor: pointer;
+}
+
+.aksrt-dl-modal .font-bold {
+  font-weight: 700;
+}
+
+.aksrt-dl-modal .muted-2-color {
+  color: var(--muted-2-color, #8b93a7);
+}
+
+.aksrt-dl-modal .muted-3-color {
+  color: var(--muted-3-color, #a9afbe);
+}
+
+.aksrt-dl-modal .c-red {
+  color: #ff5473;
+}
+
+.aksrt-dl-modal .c-green {
+  color: #20b759;
+}
+
+.aksrt-dl-modal .c-blue-2 {
+  color: #5c7cff;
+}
+
+.aksrt-dl-modal .muted-box {
+  padding: 10px;
+  background: var(--muted-border-color, rgb(132 145 165 / 10%));
+  border-radius: 4px;
+}
+
+.aksrt-dl-modal .pay-tag {
+  display: inline-block;
+  padding: 2px 7px;
+  color: #2997f7;
+  font-size: 12px;
+  line-height: 1.4;
+  background: rgb(41 151 247 / 10%);
+  border-radius: 4px;
+}
+
+.aksrt-cashier__price-row {
+  gap: 12px;
+  min-height: 27px;
+}
+
+.aksrt-cashier__regular-price {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.aksrt-dl-modal .original-price {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  padding-right: 2px;
+  padding-left: 1px;
+  color: var(--muted-color, #7d8496);
+  font-size: 14px;
+}
+
+.aksrt-dl-modal .original-price::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: #ff343b;
+  transform: rotate(8deg);
+  transform-origin: center;
+  content: '';
+}
+
+.aksrt-cashier__vip-mark {
+  display: inline-block;
+  padding: 0 4px;
+  margin-left: 3px;
+  color: #866127;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 16px;
+  vertical-align: 1px;
+  background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
+  border-radius: 4px;
+}
+
+.aksrt-cashier__asset-icon {
+  width: 1.2em;
+  margin-right: 6px;
+  color: #5c7cff;
+  text-align: center;
+}
+
+.aksrt-dl-modal .payment-method-radio {
+  min-width: 0;
+  padding: 5px;
+  text-align: center;
+  border: 1px solid var(--main-border-color, rgb(132 145 165 / 20%));
+  border-radius: 4px;
+}
+
+.aksrt-dl-modal .payment-method-radio > * {
+  margin: 3px;
+}
+
+.aksrt-dl-modal .payment-method-radio img {
+  width: auto;
+  max-width: 68px;
+  height: 35px;
+  object-fit: contain;
+}
+
+.aksrt-dl-modal .payment-method-radio + .payment-method-radio {
+  margin-left: 10px;
+}
+
+.aksrt-dl-modal .hollow-radio.active {
+  color: var(--focus-color, #2997f7);
+  background: var(--focus-color-opacity1, rgb(41 151 247 / 10%));
+  border-color: var(--focus-color, #2997f7);
+}
+
+.aksrt-dl-modal .payment-method-radio:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+.aksrt-cashier__balance[hidden] {
+  display: none;
+}
+
+.aksrt-dl-modal .form-control {
+  display: block;
+  width: 100%;
+  min-height: 36px;
+  padding: 6px 92px 6px 10px;
+  color: var(--main-color, #111827);
+  font: inherit;
+  background: var(--main-bg-color, #fff);
+  border: 1px solid var(--main-border-color, #e5e7eb);
+  border-radius: 4px;
+}
+
+.aksrt-dl-modal .relative {
+  position: relative;
+}
+
+.aksrt-dl-modal .abs-right {
+  position: absolute;
+  top: 50%;
+  right: 3px;
+  transform: translateY(-50%);
+}
+
+.aksrt-dl-modal .coupon-submit {
+  padding: 0.3em 0.8em;
+}
+
+.aksrt-cashier__coupon-desc,
+.aksrt-cashier__coupon-ok {
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.aksrt-cashier__coupon-ok {
+  color: #20b759;
+}
+
+.aksrt-cashier__warn {
+  padding: 8px 10px;
+  color: #ff5473;
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+  background: rgb(255 84 115 / 10%);
+  border-radius: 4px;
+}
+
+.aksrt-dl-modal .but.initiate-pay {
+  padding: 0.6em 1em;
+}
+
+.aksrt-dl-modal .modal-buts.but-average {
+  overflow: hidden;
+  border-top: 1px solid var(--main-border-color, #e5e7eb);
+  border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px);
+}
+
+.aksrt-dl-modal .modal-buts.but-average > .but {
+  flex: auto;
+  padding: 0.8em;
+  margin: 0 !important;
+  background: transparent;
+  border-radius: 0;
+}
+
+.aksrt-dl-modal .modal-buts.but-average > .but + .but {
+  border-left: 1px solid var(--main-border-color, #e5e7eb);
+}
+
+.aksrt-cashier__recharge {
+  display: block;
+  text-decoration: none;
+}
+
+.resource-download-box__attrs {
+  display: grid;
+  gap: 6px;
+  padding: 0;
+  margin: 10px 0 0;
+  list-style: none;
+}
+
+.resource-download-box__attrs-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.resource-download-box__attrs-name {
+  flex: 0 0 auto;
+}
+
+.resource-download-box__attrs-value {
+  color: #111827;
+  text-align: right;
+}
+
+.resource-download-box__paid-badge {
+  color: #047857 !important;
+  background: #ecfdf5 !important;
+}
+
+.resource-download-box__paid-meta {
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px;
+  margin: 8px 0 12px;
+  color: #166534;
+  font-size: 12px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 10px;
+}
+
+body.aksrt-dl-modal-open {
+  overflow: hidden;
+}
+
+@keyframes aksrt-cashier-colorful {
+  from {
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
+  }
+
+  20% {
+    transform: translate3d(-30px, -20px, 50px) rotate(87deg) scale(0.9);
+  }
+
+  65% {
+    transform: translate3d(-80px, -40px, 0) rotate(156deg) scale(0.6);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0) rotate(360deg) scale(1);
+  }
+}
+
+@media (max-width: 480px) {
+  .aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel {
+    padding: 24px 20px 22px;
+  }
+
+  .aksrt-dl-modal__row {
+    grid-template-columns: 1fr 72px;
+    gap: 8px 12px;
+  }
+
+  .aksrt-dl-modal__label {
+    grid-column: 1 / -1;
+  }
+
+  .aksrt-dl-modal__code {
+    font-size: 17px;
+  }
+
+  .aksrt-dl-modal__actions {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .aksrt-dl-modal__download {
+    width: 100%;
+  }
+
+  .aksrt-dl-modal__balance {
+    margin-left: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aksrt-dl-modal .colorful-bg > .colorful-make {
+    animation: none;
+  }
+}
diff --git a/assets/img/pay-alipay-logo.svg b/assets/img/pay-alipay-logo.svg
new file mode 100644
index 00000000..ca409961
--- /dev/null
+++ b/assets/img/pay-alipay-logo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Alipay">
+  <path fill="#0096d7" d="M496.246 768c-66.954 27.57-137.846 51.2-224.492 27.57-78.77-19.693-137.846-70.893-129.97-169.355C149.663 527.754 256 496.246 338.709 496.246s244.184 55.139 244.184 55.139 11.816-27.57 23.631-63.016 15.754-63.015 15.754-63.015h-334.77v-31.508h165.416v-66.954h-204.8V283.57h204.8v-90.584H563.2v98.461h224.492v43.323H563.2v59.077h181.17s-3.94 35.446-23.632 98.462c-23.63 63.015-47.261 90.584-47.261 90.584l275.692 90.585V248.123c0-98.461-78.769-177.23-177.23-177.23H256c-98.462 0-177.23 78.769-177.23 177.23v523.815C78.77 870.4 157.537 949.17 256 949.17h523.815c78.77 0 145.723-55.138 169.354-129.969L630.154 665.6c-3.939 0-66.954 70.892-133.908 102.4z"/>
+  <path fill="#0096d7" d="M307.2 555.323c-102.4 7.877-126.03 51.2-126.03 90.585s23.63 98.461 141.784 98.461 224.492-122.092 224.492-122.092-141.784-70.892-240.246-66.954z"/>
+</svg>
diff --git a/assets/img/pay-balance-logo.svg b/assets/img/pay-balance-logo.svg
new file mode 100644
index 00000000..403f949a
--- /dev/null
+++ b/assets/img/pay-balance-logo.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Balance">
+  <path fill="#fc6b2a" d="M659.042 671.895c-90.413 0-163.95-75.403-163.95-168.109 0-92.706 73.537-168.109 163.95-168.109h299.061V232.728c0-70.832-55.986-128.238-125.065-128.238H191.91c-69.08 0-125.065 57.404-125.065 128.238v548.655c0 70.832 55.986 128.238 125.065 128.238h641.128c69.08 0 125.065-57.406 125.065-128.238v-109.43H659.042z"/>
+  <path fill="#ff7e3e" d="M659.042 399.217c-56.211 0-101.983 46.932-101.983 104.569 0 57.638 45.797 102.887 101.983 104.57h299.061V399.216H659.042zm4.12 143.11c-20.769 0-37.588-17.245-37.588-38.541s16.819-38.541 37.588-38.541 37.587 17.245 37.587 38.541-16.818 38.54-37.587 38.54z"/>
+  <path fill="#ff9654" d="M191.91 104.49c-69.08 0-125.065 57.406-125.065 128.238v443.334c10.328.463 20.769.752 31.21.752 149.954 0 288.733-49.246 401.777-132.693-3.104-12.905-4.797-26.388-4.797-40.277 0-92.706 73.757-168.109 163.95-168.109h28.388c41.312-70.021 70.998-148.029 86.518-231.186H191.91z"/>
+  <path fill="#ffae79" d="M502.992 104.49H191.91c-69.08 0-125.065 57.387-125.065 128.238v179.278C249.194 372.829 405.017 259.637 502.992 104.49z"/>
+</svg>
diff --git a/assets/img/pay-paypal-logo.svg b/assets/img/pay-paypal-logo.svg
new file mode 100644
index 00000000..72f0fcb8
--- /dev/null
+++ b/assets/img/pay-paypal-logo.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="PayPal">
+  <path fill="#009de2" d="M467.539 288.503h242.129c130.06 0 178.932 67.519 171.386 166.852-12.464 163.788-108.976 254.352-236.997 254.352H579.43c-17.871 0-29.345 11.889-34.12 44.217l-27.718 187.769c-1.806 12.182-8.047 19.356-17.453 20.219H348.316c-14.421 0-19.366-11.21-15.629-35.503l92.721-602.275c3.702-24.146 16.577-35.631 42.149-35.631z"/>
+  <path fill="#113984" d="M316.182 81.23H558.56c68.296 0 149.23 2.276 203.396 51.282 36.176 32.732 55.15 84.894 50.786 140.909-14.914 189.842-124.77 296.22-274.031 296.22H419.167c-20.35 0-33.834 13.816-39.574 51.282l-33.351 217.712c-2.146 14.127-8.137 22.457-19.027 23.448H177.914c-16.559 0-22.442-12.99-18.115-41.154l107.51-698.38c4.291-27.998 19.223-41.318 48.873-41.318z"/>
+  <path fill="#172c70" d="m383.08 598.98 42.328-274.846c3.702-24.146 16.577-35.631 42.149-35.631h242.11c40.092 0 72.46 6.422 97.836 18.255-24.32 168.981-130.06 262.884-270.365 262.884H417.647c-15.737 0-27.486 8.256-34.549 29.337z"/>
+</svg>
diff --git a/assets/img/pay-stripe-logo.svg b/assets/img/pay-stripe-logo.svg
new file mode 100644
index 00000000..fe5086be
--- /dev/null
+++ b/assets/img/pay-stripe-logo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2468 1024" role="img" aria-label="Stripe">
+  <path fill="#6772e5" d="M2164.736 477.696c5.12-80.896 26.624-118.784 68.096-118.784 40.96 0 61.952 38.912 65.024 118.784h-133.12zm303.616 48.128c0-90.112-19.456-161.792-58.368-211.968-39.424-50.688-98.304-76.8-173.056-76.8-153.6 0-249.344 113.664-249.344 295.424 0 102.4 25.6 178.688 75.776 227.328 45.568 43.52 110.08 65.536 194.048 65.536 76.8 0 148.48-17.92 194.048-48.128L2432 653.312c-44.032 24.064-96.256 37.376-154.624 37.376-34.816 0-58.88-7.168-76.288-22.528-18.944-15.872-30.208-41.984-33.28-79.36h299.52c-.512-9.216 1.024-50.176 1.024-62.976zm-722.944 122.368c-14.848 27.648-37.376 41.984-63.488 41.984-17.92 0-34.304-3.584-48.64-10.752V409.6c30.72-32.256 58.368-35.328 68.096-35.328 46.08 0 68.096 49.664 68.096 146.432.512 55.296-7.168 98.304-24.064 127.488zm150.016-349.696c-32.256-41.472-76.288-61.952-133.12-61.952-52.224 0-98.304 22.016-141.312 67.584l-9.216-56.832h-159.232V1024l180.736-30.208v-181.76c27.648 8.704 56.32 13.312 81.408 13.312 45.568 0 111.104-11.264 161.792-67.072 48.64-53.248 73.728-135.68 73.728-244.224 0-96.256-18.432-168.96-54.784-215.552zm-695.296-51.2h181.248V814.08h-181.248V247.296zm91.136-55.808c52.224 0 94.72-43.008 94.72-95.744C1385.984 42.496 1344 0 1291.264 0c-53.248 0-95.744 41.984-95.744 95.744 0 52.736 41.984 95.744 95.744 95.744zm-169.472 48.64c-50.688 0-91.648 26.624-107.52 74.752l-10.752-67.072H845.824V814.08h180.736V446.464c22.528-27.648 54.784-37.888 98.304-37.888 9.216 0 19.456 0 32.256 2.048v-166.4c-13.312-3.072-24.576-4.096-35.328-4.096zM775.168 381.44l22.016-133.632h-115.2V84.48l-155.136 25.6-22.528 137.216L449.536 256l-19.968 124.928h74.752v262.656c0 68.096 17.408 115.712 53.248 144.896 30.208 24.064 72.704 35.328 133.12 35.328 46.592 0 74.752-8.192 94.72-13.312V668.672c-10.752 2.56-35.328 8.192-52.224 8.192-35.328 0-50.688-17.92-50.688-59.392V381.44h92.672zM258.048 461.312c-53.248-19.968-82.432-35.328-82.432-59.392 0-19.968 16.896-32.256 46.592-32.256 54.272.512 110.592 21.504 148.992 39.936l22.016-135.168c-30.72-14.848-93.184-38.912-179.712-38.912-61.44 0-112.128 15.872-148.48 46.08-38.4 31.744-57.856 76.8-57.856 131.584C7.168 512 67.584 554.496 166.4 590.336c63.488 22.528 84.48 38.912 84.48 63.488 0 24.064-19.968 37.888-57.344 37.888-46.08 0-121.856-22.528-171.008-51.712L0 776.704c41.984 24.064 120.832 48.64 202.752 48.64 65.024 0 118.784-15.36 155.136-44.032 40.96-32.256 61.952-79.36 61.952-140.288 0-102.4-61.952-144.384-161.792-179.712z"/>
+</svg>
diff --git a/assets/img/pay-wechat-logo.svg b/assets/img/pay-wechat-logo.svg
new file mode 100644
index 00000000..c9c5fdd9
--- /dev/null
+++ b/assets/img/pay-wechat-logo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="WeChat Pay">
+  <path fill="#09bb07" d="M373.646 629.76c-4.665 2.39-9.444 3.527-15.246 3.527-12.97 0-23.552-7.054-29.468-17.636l-2.39-4.664-92.956-202.525c-1.138-2.389-1.138-4.665-1.138-7.054 0-9.444 7.054-16.498 16.498-16.498 3.527 0 7.054 1.138 10.581 3.527l109.454 77.71c8.192 4.665 17.636 8.193 28.217 8.193 5.916 0 11.719-1.138 17.636-3.527l513.251-228.352C836.267 134.144 684.487 63.488 512.569 63.488 232.448 63.488 4.096 253.042 4.096 487.196c0 127.09 68.267 242.46 175.332 320.17 8.192 5.917 14.108 16.498 14.108 27.08 0 3.526-1.138 7.054-2.39 10.58-8.192 31.745-22.414 83.627-22.414 85.903-1.138 3.527-2.39 8.192-2.39 12.97 0 9.444 7.055 16.498 16.498 16.498 3.527 0 7.054-1.137 9.444-3.527l110.592-64.74c8.192-4.664 17.635-8.192 27.079-8.192 4.665 0 10.581 1.138 15.246 2.39 51.769 15.246 108.316 23.552 166.002 23.552 280.12 0 508.472-189.554 508.472-423.708 0-70.656-21.162-137.672-57.685-196.608L377.173 627.37l-3.527 2.39z"/>
+</svg>
diff --git a/assets/js/cms-download.js b/assets/js/cms-download.js
index 38da0f35..b95fb8d4 100644
--- a/assets/js/cms-download.js
+++ b/assets/js/cms-download.js
@@ -15,6 +15,7 @@
 
 	if (!window.aksrtData) return;
 	const REST_BASE = window.aksrtData.siteUrl ? window.aksrtData.siteUrl.replace(/\/$/, '') + '/wp-json/aksrt/v1' : '/wp-json/aksrt/v1';
+	const PAY_CONTENT_PATH = '/pay/content/';
 
 	function tt(key, zh) { return zh; }
 
@@ -75,14 +76,16 @@
 		modal.setAttribute('aria-labelledby', 'aksrt-dl-modal-title');
 		modal.innerHTML =
 			'<div class="aksrt-dl-modal__backdrop" data-close></div>' +
-			'<div class="aksrt-dl-modal__panel" role="document" tabindex="-1">' +
-			'  <button type="button" class="aksrt-dl-modal__close" aria-label="' + tt('close', '关闭') + '" data-close>×</button>' +
-			'  <div class="aksrt-dl-modal__body" data-body></div>' +
+			'<div class="aksrt-dl-modal__dialog modal-mini">' +
+			'  <div class="aksrt-dl-modal__panel modal-content" role="document" tabindex="-1">' +
+			'    <button type="button" class="aksrt-dl-modal__close" aria-label="' + tt('close', '关闭') + '" data-close>×</button>' +
+			'    <div class="aksrt-dl-modal__body" data-body></div>' +
+			'  </div>' +
 			'</div>';
 		document.body.appendChild(modal);
 
 		modal.addEventListener('click', function (e) {
-			if (e.target.matches('[data-close]')) close();
+			if (e.target.closest('[data-close]')) close();
 		});
 		modal.addEventListener('keydown', function (e) {
 			if (e.key === 'Escape' && modal.classList.contains('is-open')) {
@@ -95,14 +98,16 @@
 		return modal;
 	}
 
-	function open(html, returnFocusEl) {
+	function open(html, returnFocusEl, variant) {
 		// 记录调用方按钮以便关闭后回焦
 		lastFocusedElement = returnFocusEl || document.activeElement;
 
 		const modal = buildModal();
 		const body = modal.querySelector('[data-body]');
-		// 给标题加 id，与 aria-labelledby 联动
-		body.innerHTML = html.replace(/aksrt-dl-modal__title/, 'aksrt-dl-modal__title" id="aksrt-dl-modal-title');
+		modal.classList.toggle('is-cashier', variant === 'cashier');
+		body.innerHTML = html;
+		const title = body.querySelector('.aksrt-dl-modal__title, .aksrt-cashier__title');
+		if (title) title.id = 'aksrt-dl-modal-title';
 		modal.classList.add('is-open');
 		modal.setAttribute('aria-hidden', 'false');
 		document.body.classList.add('aksrt-dl-modal-open');
@@ -252,6 +257,25 @@
 		return card.getAttribute('data-captcha') === '1';
 	}
 
+	function cashierHeader() {
+		return '<div class="modal-colorful-header colorful-bg jb-blue">' +
+			'<button type="button" class="close aksrt-cashier__close" aria-label="' + tt('close', '关闭') + '" data-close>×</button>' +
+			'<div class="colorful-make"></div>' +
+			'<div class="text-center">' +
+			'  <div class="em2x"><i class="fa fas fa-cart-plus" aria-hidden="true"></i></div>' +
+			'  <div class="aksrt-cashier__title mt10 em12 padding-w10">' + tt('confirm_buy', '确认购买') + '</div>' +
+			'</div>' +
+			'</div>';
+	}
+
+	function openCashierContent(content, returnFocusEl) {
+		open(
+			cashierHeader() + '<div class="modal-pay-body box-body">' + content + '</div>',
+			returnFocusEl,
+			'cashier'
+		);
+	}
+
 	function ensureCaptchaThen(sourceEl, callback) {
 		if (!isCaptchaActive(sourceEl)) { callback(); return; }
 		const state = window.AKSRTCaptchaState;
@@ -362,13 +386,8 @@
 		return headers;
 	}
 
-	function payApiBase(apiKind) {
-		return '/pay/content/';
-	}
-
-	function buildPreviewUrl(postId, priceType, couponCode, apiKind) {
-		apiKind = apiKind || 'content';
-		var previewUrl = REST_BASE + payApiBase(apiKind) + postId;
+	function buildPreviewUrl(postId, priceType, couponCode) {
+		var previewUrl = REST_BASE + PAY_CONTENT_PATH + postId;
 		var qs = [];
 		if (priceType) qs.push('price_type=' + encodeURIComponent(priceType));
 		if (couponCode) qs.push('coupon_code=' + encodeURIComponent(couponCode));
@@ -376,8 +395,8 @@
 		return previewUrl;
 	}
 
-	function fetchPreview(postId, priceType, couponCode, apiKind) {
-		return fetch(buildPreviewUrl(postId, priceType, couponCode, apiKind), {
+	function fetchPreview(postId, priceType, couponCode) {
+		return fetch(buildPreviewUrl(postId, priceType, couponCode), {
 			method: 'GET',
 			credentials: 'same-origin',
 			headers: restHeaders(),
@@ -386,18 +405,16 @@
 		});
 	}
 
-	function openCashier(postId, returnFocusEl, priceType, couponCode, apiKind) {
+	function openCashier(postId, returnFocusEl, priceType, couponCode) {
 		if (!postId) return;
 		priceType = priceType || '';
 		couponCode = couponCode || '';
-		apiKind = apiKind || 'content';
-		open(
-			'<h3 class="aksrt-dl-modal__title">' + tt('cashier_loading', '确认购买') + '</h3>' +
-			'<p class="aksrt-dl-modal__msg">' + tt('loading', '加载中…') + '</p>',
+		openCashierContent(
+			'<p class="aksrt-cashier__loading muted-2-color">' + tt('loading', '加载中…') + '</p>',
 			returnFocusEl
 		);
 
-		fetchPreview(postId, priceType, couponCode, apiKind)
+		fetchPreview(postId, priceType, couponCode)
 			.then(function (r) {
 				if (!r.ok || (r.json && r.json.code)) {
 					const code = r.json && r.json.code ? r.json.code : '';
@@ -420,7 +437,6 @@
 				var prev = r.json || {};
 				if (priceType) prev._price_type = priceType;
 				if (couponCode) prev._coupon_code = couponCode;
-				prev._api_kind = apiKind;
 				renderCashier(prev, returnFocusEl);
 			})
 			.catch(function () {
@@ -428,6 +444,35 @@
 			});
 	}
 
+	function formatAssetLabel(preview, value) {
+		const currency = escapeHtml(preview.currency || (preview.pay_modo === 'points' ? '积分' : '￥'));
+		const amount = escapeHtml(value == null ? '' : value);
+		return preview.pay_modo === 'points' ? amount + currency : currency + amount;
+	}
+
+	function paymentMethodLogo(methodId) {
+		const logoNames = {
+			balance: 'pay-balance-logo.svg',
+			alipay: 'pay-alipay-logo.svg',
+			epay_alipay: 'pay-alipay-logo.svg',
+			wechatpay: 'pay-wechat-logo.svg',
+			epay_wxpay: 'pay-wechat-logo.svg',
+			paypal: 'pay-paypal-logo.svg',
+			stripe: 'pay-stripe-logo.svg',
+		};
+		const logo = logoNames[methodId];
+		if (!logo) return '';
+		const themeUrl = String(window.aksrtData.themeUrl || '').replace(/\/$/, '');
+		return '<img src="' + escapeAttr(themeUrl + '/assets/img/' + logo) + '" alt="">';
+	}
+
+	function cashierPriceRow(label, value, className) {
+		return '<div class="flex jsb ab aksrt-cashier__price-row">' +
+			'<span class="muted-2-color">' + label + '</span>' +
+			'<div class="' + (className || '') + '">' + value + '</div>' +
+			'</div>';
+	}
+
 	function renderCashier(preview, returnFocusEl) {
 		if (!preview) return;
 		if (preview.need_login && !preview.allow_guest) {
@@ -450,7 +495,6 @@
 
 		const isPoints = preview.pay_modo === 'points';
 		const priceType = (preview._price_type || preview.price_type || '');
-		const apiKind = preview._api_kind || 'content';
 
 		let amountLabel = escapeHtml(preview.amount_label || '');
 		let baseLabel = escapeHtml(preview.base_label || '');
@@ -470,51 +514,78 @@
 
 		let priceRows = '';
 		if (!preview.pay_limit) {
-			priceRows += '<div class="aksrt-cashier__row"><span>' + tt('price', '价格') + '</span><b>' + baseLabel + '</b></div>';
+			let regularPrice = '<span class="em14">' + baseLabel + '</span>';
+			if (!isPoints && Number(preview.original) > Number(preview.base)) {
+				regularPrice = '<span class="original-price">' + formatAssetLabel(preview, preview.original) + '</span>' + regularPrice;
+			}
+			priceRows += cashierPriceRow(tt('price', '价格'), regularPrice, 'aksrt-cashier__regular-price');
 		}
-		// VIP list price row when VIP reduced list amount.
 		if (preview.list_amount !== preview.base) {
-			priceRows += '<div class="aksrt-cashier__row"><span>' + tt('vip_price', '会员价') + '</span><b class="is-sale">' + listLabel + '</b></div>';
+			priceRows += cashierPriceRow(
+				tt('vip_price', '会员价') + '<span class="aksrt-cashier__vip-mark">VIP' + escapeHtml(preview.vip_level || '') + '</span>',
+				'<span class="em14">' + listLabel + '</span>',
+				'c-red'
+			);
 		} else if (preview.amount !== preview.base && !preview.rebate_discount && !preview.coupon_discount) {
-			priceRows += '<div class="aksrt-cashier__row"><span>' + tt('vip_price', '会员价') + '</span><b class="is-sale">' + amountLabel + '</b></div>';
+			priceRows += cashierPriceRow(
+				tt('vip_price', '会员价') + '<span class="aksrt-cashier__vip-mark">VIP' + escapeHtml(preview.vip_level || '') + '</span>',
+				'<span class="em14">' + amountLabel + '</span>',
+				'c-red'
+			);
 		}
 		if (preview.rebate_discount > 0) {
-			priceRows += '<div class="aksrt-cashier__row"><span>' + tt('rebate_discount', '推广折扣') + '</span><b class="is-sale">' + escapeHtml(preview.rebate_discount_label || ('-' + preview.rebate_discount)) + '</b></div>';
+			priceRows += cashierPriceRow(
+				tt('rebate_discount', '推广折扣'),
+				'<span class="em14">' + escapeHtml(preview.rebate_discount_label || ('-' + preview.rebate_discount)) + '</span>'
+			);
 		}
 		if (preview.coupon_discount > 0) {
-			priceRows += '<div class="aksrt-cashier__row"><span>' + tt('coupon_discount', '优惠码') + '</span><b class="is-sale">' + escapeHtml(preview.coupon_discount_label || ('-' + preview.coupon_discount)) + '</b></div>';
+			priceRows += cashierPriceRow(
+				tt('coupon_discount', '优惠码'),
+				'<span class="em14">' + escapeHtml(preview.coupon_discount_label || ('-' + preview.coupon_discount)) + '</span>'
+			);
+		}
+		if (preview.amount !== preview.base || preview.rebate_discount > 0 || preview.coupon_discount > 0) {
+			priceRows += cashierPriceRow(
+				tt('pay_amount', '支付金额'),
+				'<span class="em14">' + amountLabel + '</span>',
+				'font-bold c-red'
+			);
 		}
-		priceRows += '<div class="aksrt-cashier__row"><span>' + tt('pay_amount', '支付金额') + '</span><b class="is-sale">' + amountLabel + '</b></div>';
 
 		let body = '';
-		body += '<div class="aksrt-cashier__product"><span class="aksrt-cashier__tag">' + typeLabel + '</span><span>' + title + '</span></div>';
-		body += '<div class="aksrt-cashier__box">' + priceRows + '</div>';
+		body += '<div class="mb10 order-type-' + escapeAttr(preview.pay_type || '') + '">' +
+			'<span class="pay-tag badg badg-sm mr6">' + typeLabel + '</span><span>' + title + '</span>' +
+			'</div>';
+		body += '<div class="mb10 muted-box padding-h6 line-16">' + priceRows + '</div>';
 
 		if (isPoints) {
-			body += '<div class="aksrt-cashier__box"><div class="aksrt-cashier__row"><span>' + tt('my_points', '我的积分') + '</span><b class="is-ok">' + balance + '</b></div></div>';
+			body += '<div class="mb10 muted-box padding-h10">' +
+				'<div class="flex jsb ac"><span class="muted-2-color">' +
+				'<i class="fa fas fa-database aksrt-cashier__asset-icon" aria-hidden="true"></i>' + tt('my_points', '我的积分') +
+				'</span><div class="c-green"><span class="em14">' + balance + '</span></div></div></div>';
 			if (!preview.balance_enough) {
-				body += '<div class="aksrt-cashier__warn">' + tt('points_short', '抱歉，您的积分不足，暂时无法支付') + '</div>';
-				body += '<div class="aksrt-dl-modal__actions">';
+				body += '<div class="badg c-red btn-block mb20 aksrt-cashier__warn">' + tt('points_short', '抱歉，您的积分不足，暂时无法支付') + '</div>';
+				body += '<div class="modal-buts but-average">';
 				if (preview.credits_url) {
-					body += '<a class="btn-primary btn-sm" href="' + escapeAttr(preview.credits_url) + '">' + tt('my_points', '我的积分') + '</a>';
+					body += '<a class="but padding-lg" href="' + escapeAttr(preview.credits_url) + '">' + tt('my_points', '我的积分') + '</a>';
 				}
 				body += '</div>';
-				open('<h3 class="aksrt-dl-modal__title">' + tt('confirm_buy', '确认购买') + '</h3>' + body, returnFocusEl);
+				openCashierContent(body, returnFocusEl);
 				return;
 			}
-			body += '<div class="aksrt-dl-modal__actions">';
-			body += '<button type="button" class="btn-primary aksrt-dl-modal__download" data-aksrt-pay-submit data-mode="points" data-price-type="' + escapeAttr(priceType) + '">' + tt('pay_now', '立即支付') + ' ' + amountLabel + '</button>';
-			body += '</div>';
+			body += '<button type="button" class="mt6 but jb-red initiate-pay btn-block radius" data-aksrt-pay-submit data-mode="points" data-price-type="' + escapeAttr(priceType) + '">' +
+				tt('pay_now', '立即支付') + '<span class="pay-price-text ml10">' + amountLabel + '</span></button>';
 		} else {
 			if (couponAllowed) {
-				body += '<div class="aksrt-cashier__coupon">';
-				body += '<div class="aksrt-cashier__methods-title">' + tt('use_coupon', '使用优惠码') + '</div>';
-				body += '<div class="aksrt-cashier__coupon-row">';
-				body += '<input type="text" class="aksrt-cashier__coupon-input" name="aksrt_coupon_code" value="' + couponCodeVal + '" placeholder="' + escapeAttr(tt('enter_coupon', '请输入优惠码')) + '" autocomplete="off">';
-				body += '<button type="button" class="btn-sm" data-aksrt-check-coupon>' + tt('check_coupon', '检查优惠码') + '</button>';
+				body += '<div class="mb10 coupon-input-box">';
+				body += '<div class="muted-2-color em09 mb6">' + tt('use_coupon', '使用优惠码') + '</div>';
+				body += '<div class="relative">';
+				body += '<input type="text" class="form-control coupon-input" name="aksrt_coupon_code" value="' + couponCodeVal + '" placeholder="' + escapeAttr(tt('enter_coupon', '请输入优惠码')) + '" autocomplete="off">';
+				body += '<span class="abs-right"><button type="button" class="but c-blue coupon-submit" data-aksrt-check-coupon>' + tt('check_coupon', '检查优惠码') + '</button></span>';
 				body += '</div>';
 				if (preview.coupon_desc) {
-					body += '<div class="aksrt-cashier__coupon-desc">' + escapeHtml(preview.coupon_desc) + '</div>';
+					body += '<div class="muted-3-color px12 mt6 aksrt-cashier__coupon-desc">' + escapeHtml(preview.coupon_desc) + '</div>';
 				}
 				if (preview.coupon_error) {
 					body += '<div class="aksrt-cashier__warn">' + escapeHtml(preview.coupon_error) + '</div>';
@@ -524,42 +595,56 @@
 				body += '</div>';
 			}
 			const walletBal = typeof preview.wallet_balance === 'string'
-					? preview.wallet_balance
-					: (typeof preview.balance === 'string' ? preview.balance : '0.00');
-				const hasBalanceMethod = methods.some(function (m) { return (m && m.id) === 'balance'; });
-				if (hasBalanceMethod) {
-					body += '<div class="aksrt-cashier__box"><div class="aksrt-cashier__row"><span>' + tt('my_wallet', '我的余额') + '</span><b class="is-ok">￥' + escapeHtml(walletBal) + '</b></div></div>';
-					if (preview.balance_enough === false) {
-						body += '<div class="aksrt-cashier__warn">' + tt('wallet_short', '余额不足，请先充值或选择其他支付方式') + '</div>';
-						if (preview.credits_url) {
-							body += '<div class="aksrt-dl-modal__actions"><a class="btn-sm" href="' + escapeAttr(preview.credits_url) + '">' + tt('go_recharge', '去充值') + '</a></div>';
-						}
+				? preview.wallet_balance
+				: (typeof preview.balance === 'string' ? preview.balance : '0.00');
+			const hasBalanceMethod = methods.some(function (m) { return (m && m.id) === 'balance'; });
+			let methodHtml = '';
+			methods.forEach(function (m, idx) {
+				const rawId = String((m && m.id) || '');
+				const id = escapeAttr(rawId);
+				const name = escapeHtml((m && m.name) || rawId);
+				methodHtml += '<div class="flex jc hh payment-method-radio hollow-radio flex-auto pointer' + (idx === 0 ? ' active' : '') + '"' +
+					' role="radio" aria-checked="' + (idx === 0 ? 'true' : 'false') + '" tabindex="0" data-aksrt-payment-method="' + id + '">' +
+					paymentMethodLogo(rawId) + '<div>' + name + '</div></div>';
+			});
+			if (methods.length > 1) {
+				body += '<div class="muted-2-color em09 mb6">' + tt('pay_method', '请选择支付方式') + '</div>' +
+					'<div class="flex mb10 aksrt-cashier__methods" role="radiogroup">' + methodHtml + '</div>';
+			}
+			if (methods.length) {
+				body += '<input type="hidden" name="aksrt_pay_method" value="' + escapeAttr(methods[0].id || '') + '">';
+			}
+			if (hasBalanceMethod) {
+				const balanceSelected = methods[0] && methods[0].id === 'balance';
+				body += '<div class="mb10 muted-box padding-h10 aksrt-cashier__balance" data-aksrt-balance-box' + (balanceSelected ? '' : ' hidden') + '>' +
+					'<div class="flex jsb ac"><span class="muted-2-color">' +
+					'<i class="fa fas fa-wallet aksrt-cashier__asset-icon" aria-hidden="true"></i>' + tt('my_wallet', '我的余额') +
+					'</span><div class="c-blue-2"><span class="em14">￥' + escapeHtml(walletBal) + '</span></div></div>';
+				if (preview.balance_enough === false) {
+					if (preview.credits_url) {
+						body += '<a class="but c-red block mt6 aksrt-cashier__recharge" href="' + escapeAttr(preview.credits_url) + '">' +
+							tt('wallet_short', '抱歉！余额不足，请先充值') + ' <i class="ml6 fa fa-angle-right em12" aria-hidden="true"></i></a>';
+					} else {
+						body += '<div class="c-red mt6 aksrt-cashier__recharge">' + tt('wallet_short', '抱歉！余额不足，请先充值') + '</div>';
 					}
 				}
-				let methodHtml = '';
-				methods.forEach(function (m, idx) {
-					const id = escapeAttr(m.id || '');
-					const name = escapeHtml(m.name || id);
-					methodHtml += '<label class="aksrt-cashier__method"><input type="radio" name="aksrt_pay_method" value="' + id + '"' + (idx === 0 ? ' checked' : '') + '> <span>' + name + '</span></label>';
-				});
-				if (methodHtml) {
-					body += '<div class="aksrt-cashier__methods"><div class="aksrt-cashier__methods-title">' + tt('pay_method', '支付方式') + '</div>' + methodHtml + '</div>';
-				} else {
-					body += '<div class="aksrt-cashier__warn">' + tt('no_pay_method', '暂无可用支付方式，请联系站长配置收款接口') + '</div>';
-				}
-				body += '<div class="aksrt-dl-modal__actions">';
-				if (methodHtml) {
-					body += '<button type="button" class="btn-primary aksrt-dl-modal__download" data-aksrt-pay-submit data-mode="cash" data-price-type="' + escapeAttr(priceType) + '">' + tt('pay_now', '立即支付') + ' ' + amountLabel + '</button>';
-				}
 				body += '</div>';
+			}
+			if (methods.length) {
+				body += '<button type="button" class="mt6 but jb-red initiate-pay btn-block radius" data-aksrt-pay-submit data-mode="cash" data-price-type="' + escapeAttr(priceType) + '">' +
+					tt('pay_now', '立即支付') + '<span class="pay-price-text ml10">' + amountLabel + '</span></button>';
+			} else {
+				body += '<div class="badg c-red btn-block aksrt-cashier__warn">' + tt('no_pay_method', '暂无可用支付方式，请联系站长配置收款接口') + '</div>';
+			}
 		}
 
-		open('<h3 class="aksrt-dl-modal__title">' + tt('confirm_buy', '确认购买') + '</h3>' + body, returnFocusEl);
+		openCashierContent(body, returnFocusEl);
+		const modal = document.getElementById('aksrt-dl-modal');
 
-		const checkBtn = document.querySelector('[data-aksrt-check-coupon]');
+		const checkBtn = modal && modal.querySelector('[data-aksrt-check-coupon]');
 		if (checkBtn) {
 			checkBtn.addEventListener('click', function () {
-				const input = document.querySelector('input[name="aksrt_coupon_code"]');
+				const input = modal.querySelector('input[name="aksrt_coupon_code"]');
 				const code = input ? String(input.value || '').trim() : '';
 				if (!code) {
 					if (input) input.focus();
@@ -568,7 +653,7 @@
 				checkBtn.disabled = true;
 				const old = checkBtn.innerHTML;
 				checkBtn.innerHTML = tt('checking', '检查中…');
-				fetchPreview(preview.post_id, priceType, code, apiKind)
+				fetchPreview(preview.post_id, priceType, code)
 					.then(function (r) {
 						checkBtn.disabled = false;
 						checkBtn.innerHTML = old;
@@ -579,7 +664,6 @@
 						var prev = r.json || {};
 						if (priceType) prev._price_type = priceType;
 						prev._coupon_code = code;
-						prev._api_kind = apiKind;
 						renderCashier(prev, returnFocusEl);
 					})
 					.catch(function () {
@@ -590,23 +674,47 @@
 			});
 		}
 
-		const submitBtn = document.querySelector('[data-aksrt-pay-submit]');
+		if (modal) {
+			const methodCards = modal.querySelectorAll('[data-aksrt-payment-method]');
+			const methodInput = modal.querySelector('input[name="aksrt_pay_method"]');
+			const balanceBox = modal.querySelector('[data-aksrt-balance-box]');
+			const selectMethod = function (card) {
+				const method = card.getAttribute('data-aksrt-payment-method') || '';
+				methodCards.forEach(function (item) {
+					const active = item === card;
+					item.classList.toggle('active', active);
+					item.setAttribute('aria-checked', active ? 'true' : 'false');
+				});
+				if (methodInput) methodInput.value = method;
+				if (balanceBox) balanceBox.hidden = method !== 'balance';
+			};
+			methodCards.forEach(function (card) {
+				card.addEventListener('click', function () { selectMethod(card); });
+				card.addEventListener('keydown', function (event) {
+					if (event.key === 'Enter' || event.key === ' ') {
+						event.preventDefault();
+						selectMethod(card);
+					}
+				});
+			});
+		}
+
+		const submitBtn = modal && modal.querySelector('[data-aksrt-pay-submit]');
 		if (submitBtn) {
 			submitBtn.addEventListener('click', function () {
 				const mode = submitBtn.getAttribute('data-mode') || (isPoints ? 'points' : 'cash');
 				let paymentMethod = 'balance';
-				const checked = document.querySelector('input[name="aksrt_pay_method"]:checked');
-				if (checked) paymentMethod = checked.value;
-				const input = document.querySelector('input[name="aksrt_coupon_code"]');
+				const selected = modal.querySelector('input[name="aksrt_pay_method"]');
+				if (selected) paymentMethod = selected.value;
+				const input = modal.querySelector('input[name="aksrt_coupon_code"]');
 				const code = input ? String(input.value || '').trim() : (preview.coupon_code || preview._coupon_code || '');
-				submitPurchase(preview.post_id, mode, paymentMethod, submitBtn, returnFocusEl, code, apiKind);
+				submitPurchase(preview.post_id, mode, paymentMethod, submitBtn, returnFocusEl, code);
 			});
 		}
 	}
 
-	function submitPurchase(postId, mode, paymentMethod, button, returnFocusEl, couponCode, apiKind) {
+	function submitPurchase(postId, mode, paymentMethod, button, returnFocusEl, couponCode) {
 		if (!postId) return;
-		apiKind = apiKind || 'content';
 		const original = button.innerHTML;
 		button.disabled = true;
 		button.innerHTML = tt('processing', '处理中…');
@@ -620,7 +728,7 @@
 		if (!button.dataset.aksrtOperationKey) {
 			button.dataset.aksrtOperationKey = window.AksrtRequest.createIdempotencyKey();
 		}
-		fetch(REST_BASE + payApiBase(apiKind) + postId, {
+		fetch(REST_BASE + PAY_CONTENT_PATH + postId, {
 			method: 'POST',
 			credentials: 'same-origin',
 			headers: restHeaders(button.dataset.aksrtOperationKey),
@@ -687,7 +795,7 @@
 				10
 			);
 			const priceType = buyBtn.getAttribute('data-price-type') || '';
-			if (postId) openCashier(postId, buyBtn, priceType, '', 'content');
+			if (postId) openCashier(postId, buyBtn, priceType);
 			return;
 		}
 
@@ -695,7 +803,7 @@
 		if (cashierLink && cashierLink.hasAttribute('data-aksrt-pay-content')) {
 			e.preventDefault();
 			const postId = parseInt(cashierLink.getAttribute('data-aksrt-pay-content') || '0', 10);
-			if (postId) openCashier(postId, cashierLink, '', '', 'content');
+			if (postId) openCashier(postId, cashierLink);
 			return;
 		}
 
@@ -707,54 +815,8 @@
 	});
 
 	// Public cashier bridge (content pay).
-	window.aksrtOpenCashier = function (postId, returnFocusEl, priceType, couponCode, apiKind) {
-		openCashier(postId, returnFocusEl || null, priceType || '', couponCode || '', apiKind || 'content');
+	window.aksrtOpenCashier = function (postId, returnFocusEl, priceType, couponCode) {
+		openCashier(postId, returnFocusEl || null, priceType || '', couponCode || '');
 	};
 
-	// ===== 注入 modal 基础样式（避免必须额外加载 CSS）=====
-	const style = document.createElement('style');
-	style.textContent =
-		'.aksrt-dl-modal{position:fixed;inset:0;z-index:10000;display:none;}' +
-		'.aksrt-dl-modal.is-open{display:flex;align-items:center;justify-content:center;}' +
-		'.aksrt-dl-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);}' +
-		'.aksrt-dl-modal__panel{position:relative;background:#fff;border-radius:14px;padding:26px 28px 24px;width:min(420px,calc(100vw - 32px));box-shadow:0 24px 56px rgba(15,23,42,.24);color:#111827;}' +
-		'.aksrt-dl-modal__close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:24px;line-height:1;cursor:pointer;color:#6b7280;}' +
-		'.aksrt-dl-modal__title{font:700 20px/1.3 inherit;margin:0 28px 18px 0;color:#111827;}' +
-		'.aksrt-dl-modal__msg{margin:0 0 18px;color:#4b5563;font-size:14px;line-height:1.65;}' +
-		'.aksrt-dl-modal__msg--warn{color:#92400e;background:transparent;border:0;border-top:1px solid #fde68a;border-bottom:1px solid #fde68a;padding:12px 0;}' +
-		'.aksrt-dl-modal__row{display:grid;grid-template-columns:64px minmax(0,1fr) 72px;align-items:center;gap:12px;margin:0 0 18px;padding:12px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;}' +
-		'.aksrt-dl-modal__label{font-size:13px;font-weight:600;color:#6b7280;white-space:nowrap;}' +
-		'.aksrt-dl-modal__code{display:block;min-width:0;color:#111827;font:800 18px/1.25 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}' +
-		'.aksrt-dl-modal__copy{appearance:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:72px!important;height:32px!important;background:#eff6ff!important;border:1px solid #bfdbfe!important;border-radius:8px!important;padding:0!important;cursor:pointer!important;color:#2563eb!important;-webkit-text-fill-color:#2563eb!important;font-size:0!important;font-weight:700!important;line-height:1!important;font-family:inherit!important;text-indent:0!important;opacity:1!important;visibility:visible!important;white-space:nowrap!important;overflow:visible!important;}' +
-		'.aksrt-dl-modal__copy::before,.aksrt-dl-modal__copy::after{content:none!important;display:none!important;}' +
-		'.aksrt-dl-modal__copy:hover{background:#dbeafe!important;border-color:#93c5fd!important;color:#1d4ed8!important;-webkit-text-fill-color:#1d4ed8!important;}' +
-		'.aksrt-dl-modal__copy-text{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;z-index:2!important;color:#2563eb!important;-webkit-text-fill-color:#2563eb!important;font-size:13px!important;font-weight:700!important;line-height:1!important;font-family:inherit!important;text-indent:0!important;opacity:1!important;visibility:visible!important;white-space:nowrap!important;}' +
-		'.aksrt-dl-modal__copy:hover .aksrt-dl-modal__copy-text{color:#1d4ed8!important;-webkit-text-fill-color:#1d4ed8!important;}' +
-		'.aksrt-dl-modal__actions{display:flex;align-items:center;gap:12px;padding-top:4px;flex-wrap:wrap;}' +
-		'.aksrt-dl-modal__download{min-height:40px;padding:0 18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;cursor:pointer;}' +
-		'.aksrt-dl-modal__balance{font-size:13px;color:#6b7280;margin-left:auto;white-space:nowrap;}' +
-		'.aksrt-cashier__product{margin:0 0 12px;font-size:14px;line-height:1.5;}' +
-		'.aksrt-cashier__tag{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:6px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:700;}' +
-		'.aksrt-cashier__box{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;margin:0 0 12px;}' +
-		'.aksrt-cashier__row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:#6b7280;padding:4px 0;}' +
-		'.aksrt-cashier__row b{color:#111827;font-size:15px;}' +
-		'.aksrt-cashier__row b.is-sale{color:#dc2626;}' +
-		'.aksrt-cashier__row b.is-ok{color:#059669;}' +
-		'.aksrt-cashier__warn{background:#fef2f2;color:#b91c1c;border-radius:8px;padding:10px 12px;margin:0 0 12px;font-size:13px;}' +
-		'.aksrt-cashier__methods{margin:0 0 14px;}' +
-		'.aksrt-cashier__methods-title{font-size:13px;font-weight:600;color:#374151;margin:0 0 8px;}' +
-		'.aksrt-cashier__method{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;margin:0 0 6px;cursor:pointer;font-size:13px;}' +
-		'.aksrt-cashier__coupon{margin:0 0 14px;}' +
-		'.aksrt-cashier__coupon-row{display:flex;gap:8px;align-items:center;}' +
-		'.aksrt-cashier__coupon-input{flex:1;min-width:0;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;}' +
-		'.aksrt-cashier__coupon-desc{margin-top:6px;font-size:12px;color:#9ca3af;line-height:1.5;}' +
-		'.aksrt-cashier__coupon-ok{margin-top:6px;font-size:12px;color:#059669;}' +
-		'.resource-download-box__attrs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;}' +
-		'.resource-download-box__attrs-item{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#6b7280;}' +
-		'.resource-download-box__attrs-name{flex:0 0 auto;}' +
-		'.resource-download-box__attrs-value{color:#111827;text-align:right;}' +
-		'.resource-download-box__paid-badge{background:#ecfdf5!important;color:#047857!important;}.resource-download-box__paid-meta{display:grid;gap:4px;margin:8px 0 12px;padding:10px 12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;font-size:12px;color:#166534;}' +
-		'@media(max-width:480px){.aksrt-dl-modal__panel{padding:24px 20px 22px;}.aksrt-dl-modal__row{grid-template-columns:1fr 72px;gap:8px 12px;}.aksrt-dl-modal__label{grid-column:1 / -1;}.aksrt-dl-modal__code{font-size:17px;}.aksrt-dl-modal__actions{align-items:flex-start;flex-direction:column;}.aksrt-dl-modal__download{width:100%;}.aksrt-dl-modal__balance{margin-left:0;}}' +
-		'body.aksrt-dl-modal-open{overflow:hidden;}';
-	document.head.appendChild(style);
 })();
diff --git a/src/Core/ScriptsPart1b.php b/src/Core/ScriptsPart1b.php
index 4883c2b7..d5d7934a 100644
--- a/src/Core/ScriptsPart1b.php
+++ b/src/Core/ScriptsPart1b.php
@@ -611,6 +611,14 @@ trait ScriptsPart1b {
 
         // 单篇资源 / 付费内容 / 独立下载页：下载 + 收银台脚本
         if ($is_single_resource || $is_paid_content_single || $is_download_file_page) {
+			$cms_download_css_path = get_template_directory() . '/assets/css/frontend/cms-download.css';
+			wp_enqueue_style(
+				'aksrt-cms-download',
+				$base_uri . '/assets/css/frontend/cms-download.css',
+				[$core_dep],
+				file_exists($cms_download_css_path) ? (string) filemtime($cms_download_css_path) : $version
+			);
+
             $cms_download_js_path = get_template_directory() . '/assets/js/cms-download.js';
             wp_enqueue_script(
                 'aksrt-cms-download',
diff --git a/tests/widget-system/pay-card-contract.test.cjs b/tests/widget-system/pay-card-contract.test.cjs
index 7767da5d..c26271ec 100644
--- a/tests/widget-system/pay-card-contract.test.cjs
+++ b/tests/widget-system/pay-card-contract.test.cjs
@@ -79,3 +79,31 @@ test('the purchase card owns one direct stylesheet and no retired paywall path',
   assert.doesNotMatch(pay + download, /安全检测|支持 VIP 权益|支持积分结算/);
   assert.doesNotMatch(download, /function_exists\('aksrt_get_pay_service_html'\)/);
 });
+
+test('the article cashier uses the reference modal contract and one direct asset path', () => {
+  const cashier = read('assets/js/cms-download.js');
+  const css = read('assets/css/frontend/cms-download.css');
+  const assets = read('src/Core/ScriptsPart1b.php');
+
+  assert.match(cashier, /modal-colorful-header colorful-bg jb-blue/);
+  assert.match(cashier, /modal-pay-body box-body/);
+  assert.match(cashier, /pay-tag badg badg-sm mr6/);
+  assert.match(cashier, /muted-box padding-h6 line-16/);
+  assert.match(cashier, /payment-method-radio hollow-radio flex-auto pointer/);
+  assert.match(cashier, /mt6 but jb-red initiate-pay btn-block radius/);
+  assert.match(cashier, /data-aksrt-payment-method/);
+  assert.match(cashier, /pay-(?:balance|alipay|wechat|paypal|stripe)-logo\.svg/);
+  assert.doesNotMatch(cashier, /document\.createElement\(['"]style['"]\)/);
+  assert.doesNotMatch(cashier, /apiKind|_api_kind|payApiBase/);
+  assert.doesNotMatch(cashier, /\/(?:shop|forum|bbs)\//i);
+
+  assert.match(css, /\.aksrt-dl-modal \.modal-colorful-header/);
+  assert.match(css, /\.aksrt-dl-modal \.payment-method-radio/);
+  assert.match(css, /\.aksrt-dl-modal \.but\.initiate-pay/);
+  assert.match(assets, /assets\/css\/frontend\/cms-download\.css/);
+  assert.match(assets, /filemtime\(\$cms_download_css_path\)/);
+
+  for (const logo of ['balance', 'alipay', 'wechat', 'paypal', 'stripe']) {
+    assert.equal(fs.existsSync(path.join(root, `assets/img/pay-${logo}-logo.svg`)), true);
+  }
+});