/* Link to QR code generator (/qr-code-generator) */
.qr-tool { padding: 22px; margin: 0 0 8px; }
.qr-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.qr-form input { width: 100%; }
.qr-tool .error { font-size: 15px; }

.qr-result { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
/* The code stays black on white in every theme: a light code on a dark background does not scan */
.qr-preview { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 6px; line-height: 0; }
.qr-preview svg { display: block; width: 100%; height: auto; }
.qr-side { min-width: 0; }
.prose .qr-caption { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.prose .qr-target { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 640px) {
  .qr-tool { padding: 16px; }
  .qr-form { grid-template-columns: 1fr; }
  .qr-form .btn-lg { width: 100%; height: 50px; }
  .qr-result { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qr-preview { width: min(240px, 100%); }
  .qr-actions { justify-content: center; }
}