/* QR code generator styles — single column at every width (DESIGN.md 4.3). */
.kw-qr { display: grid; gap: var(--kw-space-5); }

.kw-qr__input { display: grid; gap: var(--kw-space-2); }
.kw-qr__input .kw-textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--kw-space-3) var(--kw-space-4);
  border: 1px solid var(--kw-line-strong);
  border-radius: var(--kw-radius-md);
  background: var(--kw-surface);
  color: var(--kw-text);
  font: inherit;
  resize: vertical;
}
.kw-qr__input .kw-textarea:focus-visible {
  outline: 2px solid var(--kw-focus);
  outline-offset: 1px;
}
.kw-qr__counter {
  margin: 0;
  color: var(--kw-muted);
  font-variant-numeric: tabular-nums;
}

.kw-qr__export { display: grid; gap: var(--kw-space-4); }
.kw-qr__export .kw-hint { margin: 0; min-height: 1.5em; }

.kw-qr__preview {
  margin: 0;
  display: grid;
  place-items: center;
  padding: var(--kw-space-5);
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius-lg);
  background: var(--kw-surface);
  /* Checkerboard-free: the QR carries its own white quiet zone. */
}
.kw-qr__preview svg {
  width: min(320px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  /* Soft edge so the white quiet zone doesn't sit hard on dark mode (Lens). */
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.14);
}

.kw-qr__live { display: grid; gap: var(--kw-space-3); }
.kw-qr__live .kw-alert p { margin: 0; }

@media (max-width: 767px) {
  /* Both downloads full width, stacked — no lonely half-width button. */
  .kw-qr__export .kw-actions > * { width: 100%; }
}