/* 充值弹窗 · 玫瑰/琥珀改深空金，微信支付绿保留 */

.pay-kicker { color: #c9b88f; }
.pay-title { letter-spacing: -0.02em; }
.pay-bal b,
.pay-rate b,
.pay-custom-prefix,
.pay-pkg .r {
  color: #8a6d1f;
}
html.theme-dark .pay-bal b,
html.studio-theme-dark .pay-bal b,
html.theme-dark .pay-rate b,
html.studio-theme-dark .pay-rate b,
html.theme-dark .pay-custom-prefix,
html.studio-theme-dark .pay-custom-prefix,
html.theme-dark .pay-pkg .r,
html.studio-theme-dark .pay-pkg .r {
  color: #f2e3ad;
}

.pay-pkg:hover,
.pay-pkg.on,
.pay-custom.on {
  border-color: rgba(138, 109, 31, 0.45);
  background: rgba(242, 227, 173, 0.16);
}
html.theme-dark .pay-pkg:hover,
html.theme-dark .pay-pkg.on,
html.theme-dark .pay-custom.on,
html.studio-theme-dark .pay-pkg:hover,
html.studio-theme-dark .pay-pkg.on,
html.studio-theme-dark .pay-custom.on {
  border-color: rgba(242, 227, 173, 0.4);
  background: rgba(242, 227, 173, 0.1);
}

.pay-pkg.on .r,
.pay-pkg:hover .r {
  background: linear-gradient(135deg, #f2e3ad, #dcc899);
  color: #14100a;
  border-color: transparent;
}

.pay-btn-primary {
  background: linear-gradient(135deg, #f2e3ad, #dcc899);
  color: #14100a;
  font-weight: 800;
  border-radius: 999px;
}
.pay-spin { border-top-color: #c9b88f; }

.pay-warn {
  background: rgba(242, 227, 173, 0.14);
  border-color: rgba(138, 109, 31, 0.4);
}
html.theme-dark .pay-warn,
html.studio-theme-dark .pay-warn {
  background: rgba(242, 227, 173, 0.08);
}
.pay-warn b { color: #8a6d1f; }
html.theme-dark .pay-warn b,
html.studio-theme-dark .pay-warn b { color: #f2e3ad; }

.wb-stat.credits:hover {
  border-color: #c9b88f;
  box-shadow: inset 0 0 0 1px #c9b88f;
}
.wb-stat.credits .rc-tag,
.wb-stat.credits .d b { color: #8a6d1f; border-color: #c9b88f; }
html.theme-dark .wb-stat.credits .rc-tag,
html.theme-dark .wb-stat.credits .d b { color: #f2e3ad; }
.wb-stat.credits:hover .rc-tag {
  background: linear-gradient(135deg, #f2e3ad, #dcc899);
  color: #14100a;
}


/* ============================================================
   充值弹窗 · 对齐设计稿（白底圆角 / 2 列档位 / ✓已选 / 金色支付钮）
   ============================================================ */
body .pay-widget, body .pay-modal, body [class*="pay-mask"] > * {
  border-radius: 22px !important;
}
body .pay-overlay { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
body .pay-head { text-align: left !important; border-bottom: 0 !important; padding-bottom: 4px !important; }
body .pay-kicker { display: none !important; }
body .pay-title { font-size: 17px !important; font-weight: 800 !important; text-align: left !important; }
body .pay-sub { font-size: 12px !important; color: #6b6456 !important; margin: 6px 0 10px !important; line-height: 1.6 !important; }
html.theme-dark body .pay-sub, html.studio-theme-dark body .pay-sub { color: rgba(242, 241, 234, 0.6) !important; }
body .pay-bal { text-align: left !important; font-size: 12px !important; margin-top: 2px !important; }
body .pay-bal b { color: #8a6d1f !important; }
body .pay-rate { font-size: 11px !important; opacity: .55 !important; margin-top: 4px !important; }
body .pay-pkg .p { color: #8a6d1f !important; }
html.theme-dark body .pay-pkg .p, html.studio-theme-dark body .pay-pkg .p { color: #8a6d1f !important; }

body .pay-pkg-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
body .pay-pkg {
  position: relative !important;
  display: block !important;
  text-align: left !important;
  background: #fff !important;
  border: 1.5px solid rgba(28, 26, 23, 0.14) !important;
  border-radius: 14px !important;
  padding: 16px 16px 13px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.theme-dark body .pay-pkg, html.studio-theme-dark body .pay-pkg {
  background: #1a1814 !important;
  border-color: rgba(242, 227, 173, 0.18) !important;
  color: #f2f1ea !important;
}
body .pay-pkg .l { display: flex; flex-direction: column; gap: 4px; }
body .pay-pkg .p { font-size: 18px !important; font-weight: 900 !important; color: #8a6d1f !important; }
html.theme-dark body .pay-pkg .p, html.studio-theme-dark body .pay-pkg .p { color: #8a6d1f !important; }
body .pay-pkg .c { font-size: 12px !important; opacity: .6 !important; }
body .pay-pkg .r {
  position: absolute !important; top: 8px !important; right: 10px !important;
  background: transparent !important; color: #8a6d1f !important;
  font-size: 9.5px !important; font-weight: 700 !important; padding: 0 !important;
}
/* 推荐角标：纯文字金色（对照原型 hot 常显） */
body .pay-pkg .r { visibility: visible !important; font-size: 9.5px !important; font-weight: 700 !important; }
/* 选中：金色边框 + ✓已选 */
body .pay-pkg.on {
  border-color: #8a6d1f !important;
  border-width: 1.5px !important;
  background: rgba(138, 109, 31, 0.09) !important;
  box-shadow: none !important;
}
body .pay-pkg.on::before {
  content: "✓ 已选";
  position: absolute; top: 8px; left: 10px;
  background: transparent;
  color: #8a6d1f; font-size: 9.5px; font-weight: 700;
  padding: 0;
}
html.theme-dark body .pay-pkg.on::before, html.studio-theme-dark body .pay-pkg.on::before {
  color: #f2e3ad;
}
body .pay-pkg.on .r { color: #8a6d1f; }
html.theme-dark body .pay-pkg.on .r, html.studio-theme-dark body .pay-pkg.on .r { color: #f2e3ad; }

/* 自定义金额行 */
body .pay-custom {
  margin-top: 12px !important;
  border: 1.5px solid rgba(28, 26, 23, 0.14) !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 12px 16px !important;
}
html.theme-dark body .pay-custom, html.studio-theme-dark body .pay-custom {
  background: #1a1814 !important;
  border-color: rgba(242, 227, 173, 0.18) !important;
  color: #f2f1ea !important;
}
body .pay-custom.on { border-color: #8a6d1f !important; border-width: 1.5px !important; background: rgba(138, 109, 31, 0.09) !important; }
body .pay-custom-lab { font-size: 12px !important; opacity: .65 !important; }
body .pay-custom-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 6px !important; }
body .pay-custom-prefix { font-weight: 800 !important; color: #8a6d1f !important; }
body .pay-custom-input { border: 0 !important; background: none !important; outline: none !important; font-size: 15px !important; font-weight: 700 !important; width: 100% !important; color: inherit !important; }
body .pay-custom-preview { font-size: 11.5px !important; opacity: .6 !important; margin-top: 4px !important; }

/* 支付按钮与底部提示 */
body .pay-actions { margin-top: 16px !important; }
body .pay-btn-primary {
  width: 100% !important;
  background: linear-gradient(135deg, #ecd9a0, #d3ba82) !important;
  color: #14100a !important;
  font-size: 14px !important; font-weight: 800 !important;
  border-radius: 999px !important; padding: 13px 0 !important;
  border: 0 !important; cursor: pointer;
  box-shadow: 0 8px 22px rgba(201, 169, 98, 0.3) !important;
}
html.theme-dark body .pay-btn-primary, html.studio-theme-dark body .pay-btn-primary {
  background: linear-gradient(135deg, #f2e3ad, #dcc899) !important;
}
body .pay-foot, body .pay-note {
  font-size: 11px !important; opacity: .55 !important; text-align: center !important; margin-top: 10px !important;
}

/* 卡片内部布局修正：价格 + 到账两行完整显示 */
body .pay-pkg {
  display: block !important;
  min-height: 86px !important;
  padding: 28px 16px 13px !important;
}
body .pay-pkg .l {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
}
body .pay-pkg .p {
  display: block !important;
  font-family: "Space Grotesk", inherit !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: #8a6d1f !important;
}
html.theme-dark body .pay-pkg .p,
html.studio-theme-dark body .pay-pkg .p { color: #8a6d1f !important; }
body .pay-pkg .c {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
body .pay-pkg .r {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  left: auto !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-family: "Space Grotesk", inherit !important;
}
body .pay-pkg.on .r { background: transparent !important; color: #8a6d1f !important; }
html.theme-dark body .pay-pkg.on .r, html.studio-theme-dark body .pay-pkg.on .r { color: #8a6d1f !important; }

/* 白天 = 图4 奶油弹窗；黑夜 = 图3 深底金边 */
body .pay-overlay { z-index: 14000 !important; }
body .pay-kicker,
body .pay-bal,
body .pay-rate { display: none !important; }
body .pay-modal {
  background: rgba(250, 248, 242, 0.97) !important;
  color: #1c1914 !important;
  border: 1px solid rgba(138, 109, 31, 0.38) !important;
  box-shadow: 0 40px 130px rgba(80, 70, 40, 0.3) !important;
}
body .pay-title { color: #1c1914 !important; }
body .pay-sub { color: #6b6456 !important; }
body .pay-pkg,
body .pay-custom {
  background: #fff !important;
  border-color: rgba(28, 26, 23, 0.14) !important;
  color: #1c1914 !important;
}
body .pay-pkg .p { color: #8a6d1f !important; }
body .pay-x {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(28, 26, 23, 0.14) !important;
  background: #fff !important;
  color: #3a342c !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(20, 18, 16, 0.12);
}
body .pay-x:hover {
  background: #f4efe3 !important;
  color: #14100a !important;
}

html.theme-dark body .pay-modal,
html.studio-theme-dark body .pay-modal {
  background: #14120e !important;
  color: #f2f1ea !important;
  border: 1px solid rgba(242, 227, 173, 0.35) !important;
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.6) !important;
}
html.theme-dark body .pay-title,
html.studio-theme-dark body .pay-title { color: #f2f1ea !important; }
html.theme-dark body .pay-sub,
html.studio-theme-dark body .pay-sub { color: rgba(242, 227, 173, 0.62) !important; }
html.theme-dark body .pay-pkg,
html.studio-theme-dark body .pay-pkg,
html.theme-dark body .pay-custom,
html.studio-theme-dark body .pay-custom {
  background: #1a1814 !important;
  border-color: rgba(242, 227, 173, 0.18) !important;
  color: #f2f1ea !important;
}
html.theme-dark body .pay-pkg.on,
html.studio-theme-dark body .pay-pkg.on,
html.theme-dark body .pay-custom.on,
html.studio-theme-dark body .pay-custom.on {
  border-color: #f2e3ad !important;
  background: rgba(242, 227, 173, 0.1) !important;
}
html.theme-dark body .pay-pkg .p,
html.studio-theme-dark body .pay-pkg .p { color: #f2e3ad !important; }
html.theme-dark body .pay-pkg .c,
html.studio-theme-dark body .pay-pkg .c,
html.theme-dark body .pay-custom-preview,
html.studio-theme-dark body .pay-custom-preview { color: rgba(242, 241, 234, 0.55) !important; }
html.theme-dark body .pay-custom-prefix,
html.studio-theme-dark body .pay-custom-prefix { color: #f2e3ad !important; }
html.theme-dark body .pay-custom-input,
html.studio-theme-dark body .pay-custom-input { color: #f2f1ea !important; background: transparent !important; }
html.theme-dark body .pay-custom-row,
html.studio-theme-dark body .pay-custom-row {
  background: #14120e !important;
  border: 1px solid rgba(242, 227, 173, 0.22) !important;
  border-radius: 9px !important;
}
html.theme-dark body .pay-custom-input:-webkit-autofill,
html.studio-theme-dark body .pay-custom-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #14120e inset !important;
  -webkit-text-fill-color: #f2f1ea !important;
  caret-color: #f2e3ad;
}
html.theme-dark body .pay-x,
html.studio-theme-dark body .pay-x {
  background: #1a1814 !important;
  border-color: rgba(242, 227, 173, 0.28) !important;
  color: #f2e3ad !important;
  box-shadow: none;
}
html.theme-dark body .pay-x:hover,
html.studio-theme-dark body .pay-x:hover {
  background: #2a261c !important;
  color: #fffdf8 !important;
}
html.theme-dark body .pay-foot,
html.studio-theme-dark body .pay-foot { color: rgba(242, 241, 234, 0.4) !important; }