/* Celular: conteúdo, prévia, aparência. Computador: prévia fixa à direita. */
.qr { display: grid; gap: 26px; grid-template-areas: 'content' 'side' 'design'; }
@media (min-width: 860px) {
  .qr { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: 'content side' 'design side'; column-gap: 36px; }
  .qr-side { position: sticky; top: 16px; align-self: start; }
}
.qr-content { grid-area: content; display: grid; gap: 18px; align-content: start; min-width: 0; }
.qr-side { grid-area: side; display: grid; gap: 14px; align-content: start; }
.qr-design { grid-area: design; display: grid; gap: 18px; align-content: start; min-width: 0; }

.qr-panel { display: grid; gap: 16px; }
.qr-wide { max-width: none; width: 100%; font-size: 1.05rem; }
.qr-grid2 { display: grid; gap: 16px; }
@media (min-width: 560px) { .qr-grid2 { grid-template-columns: 1fr 1fr; } }
.qr-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; }
.qr-panel p { margin: 0; }
.qr-walink { overflow-wrap: anywhere; }

.qr-preview {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  overflow: hidden;
  background: repeating-conic-gradient(#e6e9ef 0 25%, #ffffff 0 50%) 0 0 / 16px 16px;
}
.qr-preview canvas { display: block; width: 100%; height: 100%; }
.qr-preview.is-empty canvas { opacity: 0.12; }
.qr-empty {
  position: absolute; inset: 0; margin: 0; display: none; place-items: center; text-align: center;
  padding: 24px; font-weight: 700; font-size: 1.05rem; color: #14213d;
}
.qr-preview.is-empty .qr-empty { display: grid; }

.qr-scan { margin: 0; font-size: 0.92rem; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.qr-scan::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--ok); }
.qr-scan.is-fail { color: var(--err); }
.qr-scan.is-fail::before { background: var(--err); }
.qr-side .kv-msg { margin: 0; }

.qr-download { display: grid; gap: 12px; }
.qr-download p { margin: 0; }
.qr-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.qr-design h2 { font-size: 1.1rem; font-weight: 720; padding-top: 18px; border-top: 2px solid var(--line); }
.qr-design-grid { display: grid; gap: 18px 28px; }
@media (min-width: 560px) { .qr-design-grid { grid-template-columns: 1fr 1fr; } }
.qr-design-grid fieldset { grid-column: 1 / -1; }
.qr-color {
  width: 64px; height: 44px; padding: 3px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--surface); cursor: pointer;
}
.qr-logo { display: grid; gap: 12px; }
.qr-logo p { margin: 0; }
.qr-logo .kv-drop { justify-self: start; }
.qr-logo-opts { display: grid; gap: 14px; max-width: 360px; }
.qr-logo-opts .kv-btn { justify-self: start; }