.qr{align-items:start;gap:var(--space-4);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.qr__controls{gap:var(--space-4);flex-direction:column;min-width:0;display:flex}.qr__output{top:calc(56px + var(--space-4));min-width:0;position:sticky}.qr__colors{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.qr__logo-preview{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-4);background:var(--section);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;display:flex}.qr__logo-preview img{object-fit:contain;background:#fff;border-radius:4px;flex-shrink:0;width:32px;height:32px}.qr__logo-preview span{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.qr__logo-preview .btn{padding:var(--space-1) var(--space-3);font-size:.8rem}.qr__preview{min-height:260px;padding:var(--space-4);background:var(--section);border:1px solid var(--border);border-radius:var(--radius);background-image:linear-gradient(45deg,#00000030 25%,#0000 25%),linear-gradient(-45deg,#00000030 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#00000030 75%),linear-gradient(-45deg,#0000 75%,#00000030 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;justify-content:center;align-items:center;display:flex}#qr-canvas{max-width:100%;height:auto;image-rendering:pixelated;border-radius:4px;display:block}.qr__status{min-height:1.4em;margin-block:var(--space-3);color:var(--text-dim);font-size:.85rem}.qr__status--error{color:var(--error)}.qr__note{margin-top:var(--space-3)}@media (width<=860px){.qr{grid-template-columns:1fr}.qr__output{order:-1;position:static}}