/* Keep the real interface readable. Never crop, stretch or fake a device screen. */
.sup-qr-grid { max-width:860px; margin:0 auto; align-items:stretch; }
.sup-qr-grid .support-card { padding:26px; }
.wx-contact-header { display:flex; align-items:center; gap:12px; text-align:left; }
.wx-contact-header h3 { margin:0; font-size:18px; line-height:1.5; }
.wx-contact-header p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.wx-contact-avatar { position:relative; display:block; width:48px; height:48px; flex:0 0 48px; border-radius:50%; overflow:hidden; background:white; border:1px solid #e8edf3; }
.wx-contact-description { margin:20px 0 18px; color:var(--muted); font-size:13px; text-align:center; }
.wx-contact-image { max-width:220px; margin:0 auto; border:1px solid #e8edf3; border-radius:10px; overflow:hidden; background:#fff; }
.wx-contact-qr { display:block; position:relative; width:100%; aspect-ratio:1; overflow:hidden; }
.wx-contact-avatar img,.wx-contact-qr img { position:absolute; display:block; max-width:none; height:auto; max-height:none; margin:0; border:0; border-radius:0; }
.wx-contact-image .wx-image-caption { justify-content:center; font-size:11px; color:#63748c; background:#f7f9fc; border-top:1px solid #e8edf3; }
.wx-contact-hint { margin:16px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.wx-model-policy { max-width:920px; margin:22px 0; padding:16px 20px; border-left:3px solid #8ba4ef; background:rgba(117,145,209,.08); color:inherit; font-size:14px; line-height:1.9; text-align:left; }
.hn-hero-main { grid-template-columns:minmax(0,1fr); gap:28px; }
.hn-hero-shot { animation:none; width:100%; }
.hn-shot-body { display:block; }
.hn-shot { min-width:0; }
a.wx-image-link { display:block; width:100%; color:inherit; text-decoration:none; cursor:zoom-in; }
a.wx-image-link:focus-visible { outline:3px solid #61a3ff; outline-offset:4px; }
.wx-image-link img.wx-screenshot,
.hn-shot-body img.wx-screenshot,
.doc-content img.wx-screenshot {
  display:block; width:100%; max-width:100%; height:auto; max-height:none;
  aspect-ratio:auto; object-fit:contain; margin:0; border:0; border-radius:0;
  box-shadow:none; background:#f6f8fb;
}
.doc-content a.wx-image-link { margin:22px 0 30px; border:1px solid #dce3ed; border-radius:6px; overflow:hidden; }
.wx-image-caption { display:flex; align-items:center; gap:6px; padding:9px 14px; font-size:12px; line-height:1.4; color:#a9b7ca; background:#0c1729; }
.wx-image-caption small { margin-left:auto; font-size:11px; opacity:.7; font-variant-numeric:tabular-nums; }
.hn-page--light .wx-image-caption,.doc-content .wx-image-caption { background:#f7f9fc; color:#56667c; border-top:1px solid #e8edf3; }
.wx-missing-note { font-size:13px; color:#8793a3; padding:12px 16px; border-left:2px solid #8793a355; margin:20px 0; line-height:1.7; }
.wx-image-dialog {
  box-sizing:border-box; width:calc(100vw - 32px); max-width:none; height:calc(100dvh - 32px); max-height:none;
  margin:auto; padding:0; border:1px solid #334259; border-radius:12px; color:#eff3fa;
  background:#0d1420; box-shadow:0 24px 100px #0007; overflow:hidden;
}
.wx-image-dialog[open] { display:flex; flex-direction:column; }
.wx-image-dialog::backdrop { background:#03070ded; backdrop-filter:blur(5px); }
.wx-viewer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 20px; border-bottom:1px solid #283344; flex-shrink:0; }
.wx-viewer-info { display:flex; flex-direction:column; min-width:0; gap:5px; }
.wx-viewer-info strong { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-viewer-count { font-size:11px; color:#92a1b6; font-variant-numeric:tabular-nums; }
.wx-viewer-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.wx-viewer-actions button,.wx-viewer-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:7px 12px; color:#eff3fa; background:#1a2638; border:1px solid #354359; border-radius:6px; cursor:pointer; font:12px/1.4 Arial,"Microsoft YaHei",sans-serif; white-space:nowrap; text-decoration:none; }
.wx-viewer-actions :is(button,a):hover { background:#2a3b55; }
.wx-viewer-actions :is(button,a):focus-visible { outline:2px solid #7badf7; outline-offset:2px; }
.wx-viewer-stage { flex:1; min-height:0; min-width:0; overflow:auto; padding:20px; display:flex; align-items:center; justify-content:center; overscroll-behavior:contain; }
.wx-viewer-stage img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:0; cursor:zoom-in; flex-shrink:0; }
.wx-image-dialog[data-zoom="actual"] .wx-viewer-stage { display:block; }
.wx-image-dialog[data-zoom="actual"] .wx-viewer-stage img { max-width:none; max-height:none; width:auto; height:auto; margin:0 auto; cursor:zoom-out; }
.wx-viewer-help { margin:0; padding:9px 16px; color:#92a1b6; text-align:center; font-size:11px; border-top:1px solid #283344; flex-shrink:0; }
@media(max-width:640px) {
  .help-side { max-height:260px; overflow:auto; overscroll-behavior:contain; }
  .wx-image-dialog { width:100vw; height:100dvh; margin:0; border:0; border-radius:0; }
  .wx-viewer-toolbar { flex-wrap:wrap; gap:10px; padding:12px; }
  .wx-viewer-info { flex-basis:100%; }
  .wx-viewer-actions { width:100%; gap:6px; justify-content:space-between; }
  .wx-viewer-actions button,.wx-viewer-actions a { padding:8px; min-height:42px; font-size:11px; }
  .wx-viewer-stage { padding:8px; }.wx-viewer-help { font-size:10px; }
  .wx-image-caption { padding:8px 10px; font-size:11px; }
  .doc-content a.wx-image-link { margin:16px 0 24px; }
}
