/* ============================================================
 * 商户收款码控件样式 v2
 *  - 用户端：申请提现页「提现方式」下方的内联上传控件（.pq-inline）
 *  - 后台：结算管理表格行内的小按钮（.pq-row-btn）与大图弹层（#pq-modal）
 *  - 强调色统一取系统主色变量 var(--el-color-primary)，
 *    因此后台保持原版视觉、用户端跟随前端新配色，均不做额外换肤。
 * ============================================================ */

/* ---------------- 用户端：提现页内联控件 ---------------- */
.pq-inline {
  margin: 4px 0 18px;
  border: 1px solid var(--el-border-color-lighter, #ebeef5);
  border-radius: 10px;
  background: var(--el-bg-color, #fff);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  max-width: 720px;
}
.pq-inline * { box-sizing: border-box; }

.pq-inline-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  background: var(--el-fill-color-light, #f5f7fa);
  border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
  font-size: 13px;
}
.pq-inline-title { font-weight: 600; color: var(--el-text-color-primary, #303133); }
.pq-inline-req {
  padding: 1px 7px; border-radius: 4px; font-size: 11px;
  color: #fff; background: #f56c6c;
}
.pq-inline-state { margin-left: auto; font-size: 12px; color: var(--el-text-color-secondary, #909399); }
.pq-inline-state.ok { color: #18a058; font-weight: 600; }
.pq-inline-state.warn { color: #e6a23c; font-weight: 600; }

.pq-inline-body { padding: 14px; }
.pq-inline-pick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 15px; cursor: pointer;
  border: 1.5px dashed var(--el-color-primary, #409eff);
  border-radius: 9px;
  background: var(--el-color-primary-light-9, #ecf5ff);
  transition: opacity .15s, background .15s;
  outline: none;
}
.pq-inline-pick:hover { opacity: .82; }
.pq-inline-pick:focus-visible { box-shadow: 0 0 0 2px var(--el-color-primary-light-7, #b3d8ff); }
.pq-inline-plus {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 19px; line-height: 1;
  background: var(--el-color-primary, #409eff);
}
.pq-inline-slogan {
  font-size: 14px; font-weight: 600;
  color: var(--el-color-primary, #409eff);
  word-break: break-all;
}
.pq-inline-sub { font-size: 11.5px; color: var(--el-text-color-secondary, #909399); margin-left: auto; }

.pq-inline-preview { margin-top: 12px; text-align: center; }
.pq-inline-preview:empty { display: none; }
.pq-inline-preview img {
  max-width: 100%; max-height: 210px; border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter, #ebeef5);
  background: #fff;
}

.pq-inline-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pq-confirm {
  min-width: 88px; padding: 8px 20px; border: none; border-radius: 7px;
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--el-color-primary, #409eff);
  transition: opacity .15s;
}
.pq-confirm:hover { opacity: .88; }
.pq-confirm:disabled { opacity: .55; cursor: not-allowed; }
.pq-inline-tip { font-size: 11.5px; color: var(--el-text-color-secondary, #909399); }

.pq-inline-msg { margin-top: 9px; min-height: 16px; font-size: 12.5px; text-align: center; }
.pq-inline-msg.ok { color: #18a058; }
.pq-inline-msg.err { color: #f56c6c; }

/* ---------------- 后台：结算管理表格行内按钮 ---------------- */
.pq-row-btn {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 4px; font-size: 11px; line-height: 18px;
  color: #fff; text-decoration: none; cursor: pointer;
  background: #18a058; vertical-align: middle;
  white-space: nowrap; user-select: none;
}
.pq-row-btn:hover { opacity: .85; color: #fff; text-decoration: none; }

/* ---------------- 后台：收款码大图弹层（body 直属，脱离 Vue 子树） ---------------- */
#pq-modal-mask {
  position: fixed; inset: 0; z-index: 2147483000; display: none;
  background: rgba(0, 0, 0, .48);
}
#pq-modal-mask.open { display: block; }
#pq-modal {
  position: fixed; z-index: 2147483001; left: 50%; top: 50%;
  width: 380px; max-width: calc(100vw - 32px); max-height: 86vh; overflow: auto;
  transform: translate(-50%, -48%) scale(.97); opacity: 0; pointer-events: none;
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  transition: transform .2s, opacity .2s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #303133;
}
#pq-modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.pq-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; color: #fff;
  background: var(--el-color-primary, #409eff);
}
.pq-modal-hd b { font-size: 15px; }
.pq-modal-hd a { color: #fff; font-size: 23px; line-height: 1; text-decoration: none; opacity: .85; }
.pq-modal-hd a:hover { opacity: 1; }
.pq-modal-body { padding: 18px; text-align: center; }
.pq-modal-img { display: block; text-align: center; }
.pq-modal-img img {
  max-width: 100%; max-height: 340px; border-radius: 10px;
  border: 1px solid #ebeef5; background: #fff;
}
.pq-modal-meta {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f2f5;
  text-align: left; font-size: 12.5px; line-height: 1.9; color: #606266;
}
.pq-modal-meta b { color: #303133; }
.pq-modal-open {
  display: inline-block; margin-top: 12px; font-size: 12.5px;
  color: var(--el-color-primary, #409eff); text-decoration: none;
}
.pq-modal-empty { padding: 20px 0; font-size: 14px; color: #909399; }
.pq-modal-empty small { display: block; margin-top: 8px; font-size: 12px; color: #b0b3b8; }
.pq-modal-ft { padding: 0 18px 16px; text-align: center; }
.pq-modal-ft a { font-size: 12px; color: #909399; text-decoration: none; }
.pq-modal-ft a:hover { color: var(--el-color-primary, #409eff); }

/* ---------------- 深色模式 ---------------- */
html.dark .pq-inline {
  background: #1d1e20; border-color: #35363a;
}
html.dark .pq-inline-hd { background: #26272a; border-color: #35363a; }
html.dark .pq-inline-title { color: #e5eaf3; }
html.dark .pq-inline-state { color: #a3a6ad; }
html.dark .pq-inline-pick { background: #202a38; }
html.dark .pq-inline-sub,
html.dark .pq-inline-tip { color: #a3a6ad; }
html.dark #pq-modal { background: #1d1e20; color: #e5eaf3; }
html.dark .pq-modal-meta { border-color: #35363a; color: #a3a6ad; }
html.dark .pq-modal-meta b { color: #e5eaf3; }
html.dark .pq-modal-img img { border-color: #35363a; }

/* ---------------- 窄屏 ---------------- */
@media (max-width: 600px) {
  .pq-inline { margin-left: 0; margin-right: 0; }
  .pq-inline-sub { width: 100%; margin-left: 36px; }
  .pq-inline-tip { width: 100%; }
}