/* ==========================================================================
 *  一店一档二维码面板 + 门贴卡片（v11.6）
 *  —— 屏幕预览 / 打印门贴 / 导出 PNG 共用同一套卡片样式
 * ========================================================================== */

/* ---------- 面板 ---------- */
.qc-mask {
  position: fixed; inset: 0; z-index: 910;
  background: rgba(9, 26, 56, .55);
  display: none; align-items: center; justify-content: center;
  padding: 26px;
}
.qc-mask.show { display: flex; }

.qc-wrap {
  width: min(1080px, 96vw);
  height: min(720px, 92vh);
  background: #f6f8fc; border-radius: 12px;
  box-shadow: 0 24px 70px rgba(6, 24, 56, .38);
  display: flex; flex-direction: column; overflow: hidden;
}
.qc-hd {
  height: 54px; flex: none; background: #fff;
  border-bottom: 1px solid #e7edf6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
}
.qc-tt b { font-size: 16px; color: #0b3d91; letter-spacing: .5px; }
.qc-tt span { font-size: 12px; color: #7a8699; margin-left: 10px; }
.qc-btns { display: flex; gap: 8px; }
.qc-btn {
  height: 30px; padding: 0 14px; border: 1px solid #cfd9e8; border-radius: 6px;
  background: #fff; color: #35506f; font-size: 12px; cursor: pointer; font-family: inherit;
}
.qc-btn:hover { border-color: #14539a; color: #14539a; }
.qc-btn.primary { background: #14539a; border-color: #14539a; color: #fff; }
.qc-btn.primary:hover { background: #0b3d91; }
.qc-btn:disabled { color: #b9c3d2; border-color: #e7edf6; cursor: default; }

.qc-main { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 14px 18px; }

/* 左：选择门店 */
.qc-side {
  width: 306px; flex: none; display: flex; flex-direction: column; gap: 10px;
}
.qc-search { position: relative; }
.qc-search input {
  width: 100%; height: 34px; border: 1px solid #d5dfec; border-radius: 6px;
  padding: 0 30px 0 10px; font-size: 13px; color: #22354d; font-family: inherit;
}
.qc-search input:focus { outline: none; border-color: #14539a; }
.qc-search .ico { position: absolute; right: 10px; top: 8px; color: #9aa7ba; font-size: 13px; }
.qc-list {
  flex: 1; overflow-y: auto; background: #fff; border: 1px solid #e7edf6;
  border-radius: 8px; padding: 6px;
}
.qc-item {
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.qc-item:hover { background: #f4f8ff; }
.qc-item.on { background: #eef5ff; border-color: #14539a; }
.qc-item b { display: block; font-size: 13px; color: #17325a; font-weight: 600; }
.qc-item span { display: block; font-size: 11.5px; color: #8794a8; margin-top: 2px; }
.qc-hint {
  font-size: 11.5px; color: #8a97ab; line-height: 1.65;
  background: #fff; border: 1px dashed #dbe4f0; border-radius: 8px; padding: 9px 11px;
}
.qc-hint b { color: #a4421b; }

/* 右：卡片预览 */
.qc-stage {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: #eef2f8; border: 1px solid #e7edf6; border-radius: 8px;
  padding: 16px;
}
.qc-card {
  width: 460px; max-width: 100%;
  background: #fff; border-radius: 10px;
  border: 1px solid #dbe4f0;
  box-shadow: 0 6px 18px rgba(15, 45, 90, .10);
  overflow: hidden;
}
.qc-card-hd {
  height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: linear-gradient(90deg, #0b3d91, #1a64b8);
  color: #fff;
}
.qc-card-hd .lg {
  width: 20px; height: 20px; border-radius: 4px; flex: none;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .4);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.qc-card-hd b { font-size: 12.5px; letter-spacing: .5px; font-weight: 600; }
.qc-card-hd span { margin-left: auto; font-size: 10.5px; opacity: .8; }

.qc-card-bd { display: flex; gap: 14px; padding: 14px; }
.qc-qr { flex: none; width: 132px; text-align: center; }
.qc-qr canvas { width: 124px !important; height: 124px !important; display: block; margin: 0 auto; }
.qc-qr em { display: block; font-size: 10px; color: #8794a8; font-style: normal; margin-top: 5px; }
.qc-info { flex: 1; min-width: 0; }
.qc-info h3 {
  font-size: 15px; color: #10243e; font-weight: 600; line-height: 1.35;
  margin-bottom: 6px; word-break: break-all;
}
.qc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.qc-tag {
  font-size: 10.5px; padding: 1px 7px; border-radius: 3px;
  background: #eef5ff; color: #14539a; border: 1px solid #d5e5fb;
}
.qc-tag.cat { color: #fff; border: none; }
.qc-row { font-size: 11.5px; color: #5b6b80; line-height: 1.7; }
.qc-row b { color: #26405f; font-weight: 500; }

.qc-card-ft {
  border-top: 1px dashed #e2e9f4; padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; color: #93a0b4;
}
.qc-card-ft b { color: #c0392b; font-weight: 600; }
.qc-stage-tip { font-size: 11.5px; color: #8794a8; text-align: center; line-height: 1.6; }

.qc-ft {
  flex: none; padding: 8px 18px; font-size: 11px; color: #94a1b5;
  background: #fff; border-top: 1px solid #eef2f8; line-height: 1.6;
}

/* ---------- 门店弹窗底部：插入「二维码」后共 4 个按钮，压缩间距避免挤压 ---------- */
.iw-ft.has-qr { gap: 6px; padding-left: 10px; padding-right: 10px; }
.iw-ft.has-qr button { font-size: 11.5px; padding: 0 2px; letter-spacing: -.2px; }
.iw-ft button.qr { border-color: #0f7a6c; background: #e9f7f4; color: #0f7a6c; }
.iw-ft button.qr:hover { background: #0f7a6c; color: #fff; }
@media (max-width: 768px) {
  .iw-ft.has-qr button { font-size: 12px; padding: 8px 4px; }
}

/* ---------- 打印：门贴（A4 2×2，每张 90×60mm） ---------- */
.qc-print { display: none; }
@media print {
  body > *:not(.qc-print) { display: none !important; }
  .qc-print { display: block !important; }
  @page { size: A4; margin: 8mm; }
  .qc-print-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4mm;
  }
  .qc-print-grid .qc-pcard {
    width: 92mm; height: 62mm; box-sizing: border-box;
    border: 1px dashed #b9c3d2; border-radius: 3mm;
    padding: 3mm; overflow: hidden;
    page-break-inside: avoid;
  }
  .qc-pcard .p-hd { font-size: 8.5pt; color: #0b3d91; font-weight: 700; letter-spacing: .3pt; }
  .qc-pcard .p-hd em { font-style: normal; font-weight: 400; color: #7a8699; font-size: 7pt; margin-left: 4pt; }
  .qc-pcard .p-bd { display: flex; gap: 3mm; margin-top: 2mm; }
  .qc-pcard .p-qr { width: 30mm; height: 30mm; flex: none; }
  .qc-pcard .p-qr img { width: 30mm; height: 30mm; display: block; }
  .qc-pcard .p-tx { flex: 1; min-width: 0; }
  .qc-pcard .p-name { font-size: 10pt; font-weight: 700; color: #10243e; line-height: 1.25; word-break: break-all; }
  .qc-pcard .p-meta { font-size: 7.5pt; color: #5b6b80; line-height: 1.5; margin-top: 1.5mm; }
  .qc-pcard .p-ft { font-size: 7pt; color: #93a0b4; margin-top: 1.5mm; }
  .qc-pcard .p-ft b { color: #c0392b; }
}

/* 手机端 */
@media (max-width: 860px) {
  .qc-mask { padding: 0; }
  .qc-wrap { width: 100vw; height: 100vh; border-radius: 0; }
  .qc-main { flex-direction: column; padding: 10px 12px; }
  .qc-side { width: auto; flex: none; max-height: 44vh; }
  .qc-card { width: 100%; }
  .qc-qr { width: 110px; }
  .qc-qr canvas { width: 102px !important; height: 102px !important; }
  .qc-ft { display: none; }
}