.qr-types { margin-bottom: 16px; }
.qr-layout { display: grid; gap: 20px; }
@media (min-width: 760px) { .qr-layout { grid-template-columns: 1fr 300px; align-items: start; } }
.qr-preview { text-align: center; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }
.qr-preview canvas { width: 256px; height: 256px; max-width: 100%; image-rendering: pixelated; background: #fff; border-radius: 6px; }
.qr-preview .tool-actions { justify-content: center; }
.qr-colors label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .925rem; color: var(--ink-2); }
.qr-colors input[type=color] { width: 44px; height: 36px; padding: 2px; border: 1px solid #cdd6e0; border-radius: 8px; background: #fff; cursor: pointer; }