/* Customer contact uses the existing Nai 5 palette and original QR images. */
.site-app .nai5-contact-entry {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 12px; border-radius:8px; color:var(--muted); font-size:13px; text-decoration:none}
.site-app .nai5-contact-entry:hover {background:var(--soft); color:var(--accent)}
.site-app .user-shell>.nai5-contact-page {width:min(920px,calc(100% - 64px)); margin:32px auto 48px; padding:32px}
.contact-heading {display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px}
.contact-heading h1 {margin:0 0 8px; font-size:30px}
.contact-heading p {margin:0; font-size:14px; color:var(--muted); line-height:1.8}
.contact-heading>a {flex-shrink:0}
.contact-cards {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start}
.contact-card {min-width:0; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--paper-muted)}
.contact-card-heading {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.contact-card-heading h2 {margin:0; font-size:20px}
.contact-card-heading>span {font-size:12px; color:var(--muted)}
.contact-account-row {display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px}
.contact-account {font:600 23px/1.4 "Bahnschrift","Microsoft YaHei UI",sans-serif; color:var(--ink); user-select:all; overflow-wrap:anywhere}
.contact-account-row>button {flex-shrink:0}
.site-app .contact-qr {display:flex; align-items:center; flex-direction:column; width:100%; margin:0; padding:0; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; color:#42465c; cursor:zoom-in}
.contact-qr-window {display:block; position:relative; width:100%; aspect-ratio:1; overflow:hidden; background:#fff}
.contact-qr-window img {display:block; position:absolute; height:auto; max-width:none}
/* Only the thumbnail viewport crops whitespace; preview and download keep the original bytes. */
.contact-qr-window-qq img {width:101.8478%; left:-.8696%; top:-50.7609%}
.contact-qr-window-wechat img {width:128.125%; left:-14.0625%; top:-51.5625%}
.contact-qr-caption {display:block; width:100%; padding:10px; background:#f4f5fa; font-size:12px; text-align:center}
.contact-download {display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; min-height:44px; text-align:center}
.contact-card>.contact-download {margin-top:16px; width:100%}
.contact-feedback {min-height:24px; margin:20px 0 0; color:var(--accent); font-size:14px; overflow-wrap:anywhere}
.contact-help {margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.8}
.site-app .contact-qr-dialog {width:min(540px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--paper-raised); color:var(--ink); overflow:auto}
.contact-qr-dialog::backdrop {background:#090d18b3}
.contact-preview-heading {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px}
.contact-preview-heading h2 {margin:0; font-size:20px; overflow-wrap:anywhere}
.contact-preview-heading form {margin:0; flex-shrink:0}
.contact-qr-dialog>img {display:block; width:auto; max-width:100%; max-height:calc(100dvh - 220px); margin:auto; object-fit:contain; background:#fff; border-radius:8px}
.contact-qr-dialog>.contact-download {margin-top:16px}
.site-app .nai5-contact-help {display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; margin-top:28px; border-top:1px solid var(--line)}
.site-app #home>.nai5-contact-help {margin:32px}
.site-app .nai5-contact-help h2 {font-size:18px; margin:0 0 6px}
.site-app .nai5-contact-help p {font-size:13px; color:var(--muted); margin:0; line-height:1.8}
.nai5-contact-help>a {flex-shrink:0}
@media(max-width:700px) {
  .site-app .site-header>.site-brand {flex:0 0 auto}
  .site-app .site-header>.site-nav {flex-wrap:nowrap; gap:8px}
  .site-app .nai5-contact-entry {width:44px; padding:0}
  .nai5-contact-entry>span {display:none}
  .site-app .user-shell>.nai5-contact-page {width:calc(100% - 32px); padding:20px; margin:20px auto 28px}
  .contact-heading {flex-wrap:wrap; gap:16px; margin-bottom:24px}
  .contact-heading h1 {font-size:26px}
  .contact-cards {grid-template-columns:1fr; gap:20px}
  .contact-card {padding:18px}
  .contact-account {font-size:22px}
  .contact-account-row {gap:8px}
  .site-app .contact-account-row>button {padding:10px 12px}
  .site-app .nai5-contact-help {align-items:flex-start; flex-direction:column; gap:16px; padding:20px 0}
  .site-app #home>.nai5-contact-help {margin:24px 16px}
}
@media(max-width:360px) {
  .site-app .header-tools>.nai5-contact-entry {display:none}
}