/* Page heading, breadcrumb and outer spacing reuse the existing gallery detail layout. */
#zjknit-preview .zj-contact-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; max-width:840px; align-items:start; }
#zjknit-preview .zj-contact-channel { min-width:0; }
#zjknit-preview .zj-contact-channel h2 { margin:0 0 20px; font-size:24px; line-height:1.5; font-weight:500; }
#zjknit-preview .zj-contact-channel figure { width:100%; margin:0; }
#zjknit-preview .zj-contact-qr { display:block; width:240px; max-width:100%; height:auto; border-radius:12px; background:#fff; }
#zjknit-preview .zj-contact-layout figcaption { display:flex; align-items:center; gap:6px; min-height:44px; margin-top:12px; color:var(--quiet); font-size:14px; line-height:1.8; }
#zjknit-preview #contact-wechat { color:var(--ink); user-select:all; }
#zjknit-preview #copy-wechat { display:inline-grid; place-items:center; flex:none; width:44px; height:44px; padding:10px; border:0; border-radius:50%; background:transparent; color:var(--brand-red); cursor:pointer; }
#zjknit-preview #copy-wechat[hidden] { display:none; }
#zjknit-preview #copy-wechat .zj-icon { width:20px; height:20px; }
#zjknit-preview #copy-wechat:hover { background:#f0f0f0; }
#zjknit-preview #copy-wechat:focus-visible { outline:2px solid var(--brand-red); outline-offset:4px; }
#zjknit-preview .zj-contact-status { min-height:24px; margin-top:12px; color:var(--quiet); font-size:13px; line-height:1.8; }
#zjknit-preview .zj-contact-save-hint { display:none; }
@container (max-width:620px) {
 #zjknit-preview .zj-contact-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
 #zjknit-preview .zj-contact-channel h2 { font-size:20px; margin-bottom:16px; }
 #zjknit-preview .zj-contact-save-hint { display:block; margin-top:24px; color:var(--quiet); font-size:13px; line-height:1.8; }
}
/* Align QR groups to column starts, with all labels contained by the code width. */
#zjknit-preview .zj-contact-channel { width:min(100%,240px); justify-self:start; text-align:center; }
#zjknit-preview .zj-contact-channel h2 { width:100%; text-align:left; }
#zjknit-preview .zj-contact-channel figure { width:100%; }
#zjknit-preview .zj-contact-layout figcaption { justify-content:center; width:calc(100% * 37 / 45); margin-inline:auto; }
#zjknit-preview .zj-contact-layout figcaption:has(#copy-wechat) { width:100%; justify-content:center; gap:4px; }
#zjknit-preview #copy-wechat { position:static; }

/* Align the visible code edge, keeping the original downloadable PNG untouched. */
#zjknit-preview .zj-contact-qr-frame { position:relative; width:calc(240px * 37 / 45); max-width:100%; aspect-ratio:1; overflow:hidden; background:#fff; }
#zjknit-preview .zj-contact-qr-frame .zj-contact-qr { position:absolute; width:calc(100% * 45 / 37); max-width:none; height:auto; left:calc(-100% * 4 / 37); top:calc(-100% * 4 / 37); border-radius:0; }
#zjknit-preview .zj-contact-layout figcaption,
#zjknit-preview .zj-contact-layout figcaption:has(#copy-wechat) { width:calc(100% * 37 / 45); margin:6px 0 0; justify-content:center; }
/* Center the handle text itself; keep the copy action in the right-hand track. */
#zjknit-preview .zj-contact-layout figcaption:has(#copy-wechat) { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:4px; }
#zjknit-preview .zj-contact-layout figcaption:has(#copy-wechat) > span { grid-column:2; }
#zjknit-preview .zj-contact-layout figcaption #copy-wechat { grid-column:3; justify-self:start; }