.qr-tool{max-width:1100px;margin:0 auto;padding:24px 16px}.qr-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:24px}.qr-tool fieldset{border:1px solid var(--border,#9ca3af);border-radius:12px;padding:18px;margin:16px 0}.qr-tool label{display:block;margin:12px 0}.qr-tool input:not([type=checkbox]),.qr-tool select,.qr-tool textarea{display:block;width:100%;max-width:100%;padding:8px;box-sizing:border-box;color:inherit;background:var(--surface,#fff);border:1px solid #888;border-radius:5px}.qr-tool input[type=color]{height:44px}.qr-tool textarea{min-height:110px;resize:vertical}.qr-preview{position:sticky;top:20px;align-self:start;border:1px solid #888;border-radius:12px;padding:20px}.qr-preview canvas{display:block;max-width:100%;height:auto;margin:auto}.qr-tool [hidden]{display:none!important}.qr-actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.qr-actions button{padding:10px 16px}.qr-tool :focus-visible{outline:3px solid #7157e8;outline-offset:3px}.qr-tool #qr-status{overflow-wrap:anywhere;min-height:3em}.qr-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:700px){.qr-layout{grid-template-columns:1fr}.qr-preview{position:static}.qr-pair{grid-template-columns:1fr}}@media(prefers-color-scheme:dark){.qr-tool{--surface:#202532}}

.qr-tabs{display:flex;flex-wrap:wrap;gap:6px}.qr-tabs button{padding:9px 12px;border:1px solid #888;border-radius:6px;color:inherit;background:transparent}.qr-tabs [aria-selected=true]{background:#5540b8;color:#fff}