.qr-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .qr-layout { grid-template-columns: 1fr; } }
.qr-side { position: sticky; top: calc(var(--header-h) + 12px); }
@media (max-width: 860px) { .qr-side { position: static; } }
#qr-canvas { width: min(100%, 320px); height: auto; display: block; image-rendering: pixelated; border-radius: 6px; }
.qr-preview { min-height: 260px; }
.qr-colors { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.qr-colors .field { grid-template-columns: auto; }
.qr-logo .drop { padding: 16px; }
.qr-logo .drop svg { width: 26px; height: 26px; }
#qr-payload { max-height: 160px; font-size: 0.8rem; }
#qr-payload:empty { display: none; }