/* Shared WeChat support surface. Keep original QR pixels on plain white. */
.customer-support-modal,
.customer-support-dialog {
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border: 1px solid #e1e7f1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(26, 42, 79, .18);
  overflow: hidden;
}
.customer-support-modal > header,
.customer-support-dialog header {
  padding: 17px 24px;
  border-bottom: 1px solid #edf0f6;
  background: #fff;
  color: #1d2e4a;
}
.customer-support-modal > header strong { font-size: 14px; font-weight: 600; }
.customer-support-modal > header button,
.customer-support-close {
  min-height: 32px; padding: 5px 12px; border: 1px solid #e6ebf4;
  border-radius: 9px; background: #f7f9fc; color: #61718a;
  font-size: 12px; font-weight: 500; cursor: pointer;
}
.customer-support-modal > header button:hover,
.customer-support-close:hover { background: #edf1ff; color: #4e5cc7; }
.customer-support-modal .modal-body { padding: 0; background: #fff; min-height: 0; overflow-y: auto; }
.customer-support-panel,
.customer-support-content {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  padding: 24px; gap: 22px; min-height: 0;
  background: linear-gradient(145deg, #f6f8ff 0%, #fff 48%);
}
.customer-support-panel > .support-intro { display: flex; align-items: center; gap: 14px; }
.support-brand-icon {
  display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
  background: #fff; border: 1px solid #e7ebf7; border-radius: 14px;
  box-shadow: 0 4px 12px #3545a308;
}
.support-brand-icon img { width: 34px; height: 34px; object-fit: contain; }
.support-intro-copy { min-width: 0; }
.support-intro-copy > span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 600; color: #6c73bc; }
.customer-support-panel .support-intro h3 { margin: 0; color: #1d2e4a; font-size: 21px; line-height: 1.45; font-weight: 650; letter-spacing: -.02em; }
.customer-support-panel .support-intro p,
.customer-support-details > p { margin: 7px 0 0; color: #7b879b; font-size: 12px; line-height: 1.7; }
.customer-support-qrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.customer-support-qrs figure {
  margin: 0; min-width: 0; padding: 18px 16px 16px;
  border: 1px solid #e4e9f3; border-radius: 16px; background: #fff; text-align: center;
  box-shadow: 0 4px 16px #34487804;
}
.customer-support-qrs img { display: block; width: 100%; max-width: 200px; height: auto; aspect-ratio: 1; margin: 0 auto; object-fit: contain; background: #fff; }
.customer-support-qrs figcaption { margin: 12px 0 8px; color: #263957; font-size: 14px; font-weight: 600; }
.support-save-qr { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 14px; border: 1px solid #e7eafa; border-radius: 8px; color: #5c66ba; background: #f7f8ff; font-size: 12px; text-decoration: none; }
.support-save-qr:hover { color: #414fa9; background: #edf0ff; border-color: #d6ddf8; }
.support-save-qr:focus-visible { outline: 2px solid #7c87dd; outline-offset: 3px; }
.customer-support-panel .support-contact-hint,
.customer-support-content .support-contact-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding-top: 16px; border-top: 1px solid #edf0f6; color: #8a95a7; font-size: 11px; line-height: 1.7; }
.support-contact-hint > span { display: inline-grid; place-items: center; width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; border: 1px solid #bdc7d8; border-radius: 50%; font-size: 10px; font-style: normal; }
.customer-support-dialog-inner { display: grid; max-height: calc(100dvh - 34px); grid-template-rows: auto minmax(0, 1fr); }
.customer-support-content { overflow-y: auto; }
.customer-support-dialog header span { color: #6c73bc; font-weight: 600; }
.customer-support-dialog h2 { color: #1d2e4a; font-weight: 650; }
@media (max-width: 520px) {
  .customer-support-modal,.customer-support-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  .customer-support-modal > header,.customer-support-dialog header { padding: 14px 18px; }
  .customer-support-panel,.customer-support-content { padding: 20px 18px; gap: 18px; }
  .customer-support-panel .support-intro h3 { font-size: 19px; }
  .support-brand-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .customer-support-panel > .support-intro { gap: 11px; }
  .customer-support-qrs { grid-template-columns: minmax(0, 1fr); }
  .customer-support-qrs figure { width: min(260px, 100%); justify-self: center; box-sizing: border-box; }
  .customer-support-qrs img { max-width: 188px; }
}