/* ---- 解析输入区：链接 / 提取码拆分；未激活时灰白不可编辑 ---- */
/* 覆盖 style.css:546 的 .paste-box{display:flex}，这里要纵向分块布局 */
#pasteBox { display: flex; flex-direction: column; align-items: stretch; }
#pasteBox .paste-field input { flex: none; width: 100%; box-sizing: border-box; }
.paste-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.paste-actions { margin-top: 10px; align-items: center; }
.paste-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.paste-f-url { flex: 1 1 420px; }
.paste-f-pwd { flex: 0 1 200px; }
.paste-lbl { font-size: 12px; color: var(--muted, #5d6b62); font-weight: 600; letter-spacing: .2px; }
.paste-btns { margin-left: auto; }
.paste-hint { margin-top: 8px; line-height: 1.7; }

/* 锁定态：灰白 + 明确提示「点这里开始输入」 */
.paste-box.locked .paste-field input {
  background: #e8ede9; color: #a3afa8; border-color: #d6ded8;
  cursor: pointer; opacity: .8; filter: grayscale(1);
}
.paste-box.locked .paste-field input::placeholder { color: #a9b4ad; }
.paste-box.locked::after {
  content: '点这里解锁输入';
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 4px 10px; border-radius: 999px;
  background: #e8ede9; border: 1px solid #d6ded8; color: #6f7d75;
  font-size: 12px; font-weight: 600; align-self: flex-start;
  animation: pasteHintPulse 1.8s ease-in-out infinite;
}
@keyframes pasteHintPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }
.paste-box.armed::after { content: none; }
/* 激活态：正常可编辑 */
.paste-box.armed .paste-field input {
  background: #fff; color: var(--text, #16211a); border-color: var(--line, #d9e2dc);
  cursor: text; opacity: 1; filter: none;
}
.paste-box.armed .paste-field input::placeholder { color: #9aa8a0; }
.paste-box.armed .paste-f-url input:focus,
.paste-box.armed .paste-f-pwd input:focus {
  border-color: #3D8A63; outline: 2px solid rgba(61, 138, 99, .18);
}

@media (max-width: 560px) {
  .paste-f-url, .paste-f-pwd { flex: 1 1 100%; }
  .paste-btns { margin-left: 0; width: 100%; }
  .paste-btns .btn { flex: 1; }
}
/* ============================================================
   支付弹窗：独立 modal，含二维码、金额、注意事项、取消/已完成付款
   ============================================================ */
.pay-modal-mask {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10, 14, 12, .58);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; overflow: auto;
  animation: payMaskIn .16s ease-out;
}
@keyframes payMaskIn { from { opacity: 0; } to { opacity: 1; } }

.pay-modal {
  width: 100%; max-width: 720px;
  background: var(--panel, #fff);
  color: var(--text, #16211a);
  border: 1px solid var(--line, #d9e2dc);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .34);
  animation: payModalIn .2s cubic-bezier(.2, .8, .3, 1);
  overflow: hidden;
}
@keyframes payModalIn { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.pay-modal-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line, #d9e2dc);
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
}
.pay-modal-hd h3 { margin: 0; font-size: 16px; font-weight: 700; }
.pay-modal-hd .sub { font-size: 12px; color: var(--muted, #5d6b62); margin-top: 2px; }
.pay-modal-x {
  border: 1px solid var(--line, #d9e2dc); background: transparent; color: var(--muted, #5d6b62);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1;
  flex: 0 0 auto;
}
.pay-modal-x:hover { background: rgba(0,0,0,.05); color: var(--text, #16211a); }

.pay-modal-bd { padding: 18px; }

.pay-grid { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.pay-qrcol { flex: 0 0 268px; max-width: 100%; text-align: center; }
.pay-qrframe {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px; border: 1px solid var(--line, #d9e2dc); border-radius: 12px;
  background: #fff;
}
.pay-qrframe img, .pay-qrframe canvas { width: 240px; height: 240px; display: block; image-rendering: pixelated; }
.pay-qrframe .fallback { width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; padding: 12px; color: #8a5a2b; font-size: 13px; text-align: center; }
.pay-amount { font-size: 22px; font-weight: 800; color: #b4530a; letter-spacing: .3px; }
.pay-scan-tip { font-size: 12px; color: var(--muted, #5d6b62); }
.pay-ordno { font-size: 11px; color: var(--muted, #5d6b62); word-break: break-all; }

.pay-infocol { flex: 1 1 300px; min-width: 260px; }
.pay-price-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 10px;
  background: rgba(180, 83, 10, .08); border: 1px solid rgba(180, 83, 10, .22);
}
.pay-price-line .lbl { font-size: 13px; color: #7a4a12; }
.pay-price-line .val { font-size: 20px; font-weight: 800; color: #b4530a; }

.pay-notice {
  border: 1px solid rgba(180, 83, 10, .3); background: rgba(180, 83, 10, .07);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.pay-notice h4 { margin: 0 0 6px; font-size: 13px; color: #7a4a12; }
.pay-notice ul { margin: 0; padding-left: 18px; }
.pay-notice li { font-size: 12.5px; line-height: 1.7; color: #5c4526; }
.pay-notice li b { color: #b4530a; }

.pay-kv { font-size: 12px; color: var(--muted, #5d6b62); line-height: 1.9; word-break: break-all; }
.pay-kv .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

.pay-modal-ft {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  padding: 14px 18px; border-top: 1px solid var(--line, #d9e2dc);
  background: rgba(0,0,0,.015);
}
.pay-modal-ft .btn { min-width: 128px; }
.pay-modal-ft .btn.primary { min-width: 160px; font-weight: 700; }
.pay-modal-ft .btn.danger { border-color: rgba(180, 40, 40, .4); color: #a02020; }

.pay-link-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .pay-modal-bd { padding: 14px; }
  .pay-qrcol { flex: 1 1 100%; }
  .pay-qrframe img, .pay-qrframe canvas, .pay-qrframe .fallback { width: 210px; height: 210px; }
  .pay-modal-ft { flex-direction: column-reverse; }
  .pay-modal-ft .btn { width: 100%; min-width: 0; }
}