/* QR Code Generator : colour pickers, preset swatches and the live preview stage. */
.qr-presets { display:flex; flex-wrap:wrap; gap:8px; }
.qr-preset { width:40px; height:40px; padding:0; border:2px solid var(--tn-border); border-radius:10px; background:var(--b,#fff); cursor:pointer; }
.qr-preset span { display:block; width:18px; height:18px; margin:9px auto; border-radius:4px; background:var(--f,#000); }
.qr-preset:hover { border-color:var(--tn-primary); }
.qr-color { display:flex; gap:8px; align-items:center; }
.qr-color input[type="color"] { width:46px; height:42px; padding:3px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; cursor:pointer; }
.qr-color .tk-input { flex:1; min-width:0; }
.qr-result { text-align:center; }
.qr-stage { display:flex; align-items:center; justify-content:center; min-height:260px; padding:18px; border-radius:16px; background:repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 22px 22px; }
.qr-preview { width:260px; max-width:100%; }
.qr-preview svg { display:block; width:100%; height:auto; border-radius:6px; }
.qr-empty { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--tn-muted); font-size:14px; }
.qr-empty i { font-size:40px; opacity:.4; }
.qr-encoded-label { margin:16px 0 2px; color:var(--tn-muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.qr-encoded { margin:0 0 6px; padding:8px 12px; border-radius:8px; background:#f1f5f9; color:#111827; font-size:14px; word-break:break-all; }