.qr-tool{display:grid;gap:16px}.qr-surface{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr);gap:16px;align-items:start}.qr-preview-card,.qr-controls,.qr-output{border:1px solid rgba(0,109,119,.14);border-radius:8px;background:#fbfefe;padding:14px}.qr-preview-card{display:grid;gap:12px;justify-items:center}.qr-canvas-wrap{display:grid;width:min(100%,380px);aspect-ratio:1;align-items:center;justify-items:center;border-radius:8px;background:var(--mist);padding:14px}.qr-canvas-wrap canvas{display:block;max-width:100%;height:auto;border-radius:4px;background:#fff}.qr-controls,.qr-fields,.qr-output{display:grid;gap:14px}.qr-field{display:grid;gap:8px;color:var(--ink);font-weight:800}.qr-input,.qr-select,.qr-textarea{width:100%;min-height:44px;border:1px solid rgba(0,109,119,.18);border-radius:8px;background:#fbfefe;color:var(--ink);padding:10px 12px;font:.95rem/1.45 ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace}.qr-textarea{min-height:150px;resize:vertical;white-space:pre-wrap}.qr-input:focus,.qr-select:focus,.qr-textarea:focus{outline:none;box-shadow:var(--tool-focus)}.qr-actions{display:flex;flex-wrap:wrap;gap:10px}.qr-actions .button{min-height:44px}.qr-check{display:flex;gap:10px;align-items:center;color:var(--ink);font-weight:800}.qr-check input{width:18px;height:18px;accent-color:var(--deep-teal)}.qr-meta{margin:0;border-radius:8px;padding:12px;background:#edf6f9db;color:var(--muted);font-weight:800}.qr-meta.is-valid{background:#83c5be38;color:var(--deep-teal)}.qr-meta.is-invalid{background:var(--peach);color:#613224}.qr-output h3{margin:0;color:var(--ink);font-size:1rem}.qr-payload{width:100%;min-height:112px;resize:vertical;border:1px solid rgba(0,109,119,.14);border-radius:8px;background:var(--mist);color:var(--ink);padding:14px;font:.92rem/1.55 ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;white-space:pre-wrap}@media (max-width: 900px){.qr-surface{grid-template-columns:1fr}}@media (max-width: 720px){.qr-preview-card,.qr-controls,.qr-output{padding:12px}.qr-actions{display:grid;grid-template-columns:1fr}.qr-textarea{min-height:130px}}