.qr-workbench{--qr-primary:#6366f1;--qr-text:#1e293b;--qr-muted:#64748b;--qr-line:#dce3ef;--qr-surface:#f8fafc;padding:20px;border:1px solid var(--qr-line);border-radius:12px;background:#fff;color:var(--qr-text);font-size:13px;line-height:1.5}.qr-workbench *,.qr-workbench :after,.qr-workbench :before{box-sizing:border-box}.qr-workbench button{cursor:pointer;font:inherit}.qr-workbench button,.qr-workbench input,.qr-workbench select,.qr-workbench summary,.qr-workbench textarea{transition:border-color .15s,background-color .15s,color .15s,box-shadow .15s}.qr-workbench :is(button,input,select,textarea,summary):focus-visible{outline:2px solid var(--qr-primary);outline-offset:3px}.qr-workbench svg{flex-shrink:0}.qr-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.qr-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border:1px solid transparent;border-radius:999px;background:#fff;color:var(--qr-muted);font-size:12px;font-weight:500;white-space:nowrap}.qr-tabs button svg{opacity:.7}.qr-tabs button:hover{color:var(--qr-primary);border-color:#c7c7fd;background:#f7f7ff}.qr-tabs button[aria-pressed=true]{background:var(--qr-primary);border-color:var(--qr-primary);color:#fff;box-shadow:0 2px 8px #6366f140}.qr-tabs button[aria-pressed=true] svg{opacity:1}.qr-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"form preview" "customize preview";align-items:start;gap:24px 32px}.qr-controls{display:contents}.qr-input{grid-area:form}.qr-customize{grid-area:customize;display:grid;gap:24px;min-width:0}.qr-card{min-width:0;overflow:hidden;border:1px solid var(--qr-line);border-radius:14px;background:#fff;box-shadow:0 1px 3px #00000014}.qr-card h2{margin:0;padding:14px 18px;border-bottom:1px solid var(--qr-line);color:var(--qr-text);font-size:13px;font-weight:600}.qr-card-body{padding:16px 18px}.qr-export-label,.qr-workbench label{display:block;color:var(--qr-muted);font-size:12px;font-weight:500}.qr-workbench :is(textarea,select,input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file])){display:block;width:100%;min-width:0;min-height:38px;margin-top:7px;padding:9px 12px;border:1px solid var(--qr-line);border-radius:10px;background:var(--qr-surface);color:var(--qr-text);font:inherit;font-weight:400}.qr-workbench select{cursor:pointer}.qr-workbench textarea{min-height:104px;margin-top:0;padding:12px 14px;resize:vertical;font:13px/1.7 ui-monospace,monospace}.qr-workbench :is(textarea,input,select):focus{border-color:#a5a6f6;box-shadow:0 0 0 3px #6366f114}.qr-workbench :is(textarea,input)::placeholder{color:#94a3b8}.qr-input small{display:block;margin-top:8px;color:var(--qr-muted);font-size:11px;text-align:right}.qr-fields{display:grid;gap:14px}.qr-check{display:flex!important;align-items:center;gap:7px}.qr-workbench input[type=checkbox]{accent-color:var(--qr-primary)}.qr-workbench summary{display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 12px;list-style:none;border-radius:9px;background:var(--qr-surface);color:var(--qr-text);font-size:13px;font-weight:600;cursor:pointer}.qr-workbench summary::-webkit-details-marker{display:none}.qr-workbench summary>svg:first-child{box-sizing:content-box;padding:5px;width:14px;height:14px;border-radius:6px;color:var(--qr-primary);background:#6366f11a}.qr-workbench summary>svg:last-child{margin-left:auto;color:#94a3b8;transition:transform .15s}.qr-workbench details[open]>summary{color:var(--qr-primary);background:#6366f10f}.qr-workbench details[open]>summary>svg:last-child{transform:rotate(180deg)}.qr-workbench summary:hover{color:var(--qr-primary);background:#6366f10b}.qr-templates{padding:5px}.qr-template-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:280px;margin:10px 7px 8px;padding:2px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.qr-template-grid button{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:7px 5px;border:1px solid var(--qr-line);border-radius:10px;background:var(--qr-surface);color:var(--qr-muted)}.qr-template-grid button:hover{border-color:#b2b1fb;box-shadow:0 2px 6px #0000000a}.qr-template-grid button[aria-pressed=true]{border-color:var(--qr-primary);box-shadow:0 0 0 1px var(--qr-primary);background:#f5f5ff}.qr-template-grid button[aria-pressed=true]:after{content:"✓";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--qr-primary);color:#fff;font-size:10px;line-height:16px;text-align:center}.qr-template-grid svg{display:block;width:100%;aspect-ratio:1;padding:4px;border-radius:6px}.qr-template-grid span{max-width:100%;font-size:10px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qr-options{display:grid;gap:10px;padding:14px 18px}.qr-options details{overflow:hidden;border:1px solid var(--qr-line);border-radius:10px}.qr-option-body{display:grid;gap:12px;padding:12px 13px 15px}.qr-row{display:flex;gap:14px}.qr-row>*{flex:1 1;min-width:0}.qr-option-body>button,.qr-workbench .qr-shapes button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 10px;border:1px solid var(--qr-line);border-radius:9px;background:var(--qr-surface);color:var(--qr-muted)}.qr-shapes{gap:8px;margin-top:-5px}.qr-workbench .qr-shapes button[aria-pressed=true]{border-color:var(--qr-primary);box-shadow:0 0 0 2px #6366f11a;color:var(--qr-primary)}.qr-color-control{display:flex;align-items:center;gap:8px;min-height:40px;margin-top:7px;padding:5px 9px;border:1px solid var(--qr-line);border-radius:9px;background:var(--qr-surface)}.qr-workbench input[type=color]{width:25px;height:25px;padding:0;border:0;border-radius:5px;background:transparent;cursor:pointer}.qr-workbench input[type=color]::-webkit-color-swatch-wrapper{padding:0}.qr-workbench input[type=color]::-webkit-color-swatch{border:1px solid #00000012;border-radius:5px}.qr-color-control code{color:var(--qr-text);font:11px ui-monospace,monospace;text-transform:uppercase}.qr-workbench input[type=range]{display:block;width:100%;margin:12px 0 4px;accent-color:var(--qr-primary);cursor:pointer}.qr-upload{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:100px;padding:16px;border:1px dashed #bfc8dd;border-radius:10px;background:var(--qr-surface);cursor:pointer;text-align:center}.qr-upload:focus-within,.qr-upload:hover{border-color:var(--qr-primary);background:#f6f5ff}.qr-upload>svg{color:var(--qr-primary)}.qr-upload span{color:var(--qr-text);font-size:12px}.qr-upload small{color:#94a3b8;font-size:10px;font-weight:400}.qr-upload input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.qr-logo-preview{width:36px;height:36px;object-fit:contain}.qr-preview{grid-area:preview;position:sticky;top:86px}.qr-preview-main{padding:32px 20px 16px}.qr-image{display:flex;align-items:center;justify-content:center;width:min(100%,290px);aspect-ratio:1;margin:0 auto 44px;padding:12px;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 4px 12px #0000001a}.qr-image img{display:block;width:100%;height:100%;object-fit:contain}.qr-image p{margin:0;padding:20px;color:#94a3b8;text-align:center;line-height:1.8}.qr-image[aria-busy=true] img{opacity:.6}.qr-notice{display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid #b7ecdb;border-radius:10px;background:#edfaf5;color:#20ad83;font-size:11px;line-height:1.6}.qr-error{border-color:#fecdd3;background:#fff1f2;color:#be3b50}.qr-export{padding:16px 20px;border-top:1px solid var(--qr-line)}.qr-formats{display:flex;gap:3px;margin-top:7px;padding:3px;border-radius:9px;background:var(--qr-surface)}.qr-formats button{flex:1 1;min-height:25px;padding:4px 5px;border:0;border-radius:6px;background:transparent;color:var(--qr-muted);font-size:10px;font-weight:600;letter-spacing:.02em}.qr-formats button:hover{color:var(--qr-primary)}.qr-formats button[aria-pressed=true]{background:#fff;color:var(--qr-primary);box-shadow:0 1px 3px #00000014}.qr-export select{min-height:32px;padding:6px 10px}.qr-export-buttons{gap:10px;margin-top:14px}.qr-export-buttons button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:10px 16px;border:1px solid var(--qr-line);border-radius:10px;background:var(--qr-surface);color:var(--qr-text);font-weight:600}.qr-export-buttons button:first-child{flex:0 0 88px}.qr-workbench .qr-primary{border-color:var(--qr-primary);background:var(--qr-primary);color:#fff;box-shadow:0 2px 8px #6366f140}.qr-workbench .qr-primary:hover:not(:disabled){background:#5558e8;box-shadow:0 4px 12px #6366f14d}.qr-export-buttons button:disabled{opacity:.5;cursor:not-allowed}.qr-export>p{margin:12px 0 0;color:var(--qr-muted);font-size:11px;overflow-wrap:anywhere}.qr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.tool-page[data-tool=qrcode]{--tool-content-width:1000px}.tool-page[data-tool=qrcode]>:is(.tool-intro,.tool-workspace,.tool-doc,.tool-details){width:calc(100% - 48px);max-width:var(--tool-content-width);margin-left:auto;margin-right:auto}.tool-page[data-tool=qrcode]>:is(.tool-intro,.tool-details){padding-left:0;padding-right:0}@media (max-width:768px){.qr-workbench{padding:16px}.qr-columns{grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "preview" "customize";gap:24px}.qr-preview{position:static}.qr-preview-main{padding:24px 16px 12px}.qr-image{width:min(100%,280px);margin-bottom:28px}.qr-export{padding:14px 16px}}@media (max-width:640px){.qr-tabs{flex-wrap:nowrap;overflow-x:auto;padding:3px 2px 6px;margin:-3px -2px 18px;scrollbar-width:none}.qr-tabs::-webkit-scrollbar{display:none}.qr-tabs button{flex-shrink:0;min-height:36px;padding:8px 12px;font-size:12px}}@media (max-width:480px){.tool-page[data-tool=qrcode]>:is(.tool-intro,.tool-workspace,.tool-doc,.tool-details){width:calc(100% - 24px)}.qr-workbench{padding:12px}.qr-card h2,.qr-card-body{padding:12px 16px}.qr-options{padding:12px}.qr-template-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:270px}.qr-preview-main{padding:20px 16px 12px}.qr-image{width:min(100%,260px)}.qr-workbench :is(textarea,select,input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file])){font-size:16px}.qr-export>.qr-row:first-child{flex-direction:column;gap:12px}.qr-export-buttons button{min-height:44px}.qr-color-control{gap:5px;padding:5px 7px}}@media (prefers-reduced-motion:reduce){.qr-workbench *{transition:none!important}}.qr-template-art{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;overflow:hidden;border-radius:6px}.qr-template-art img{display:block;width:100%;height:100%;object-fit:contain}.qr-template-art>span{color:#94a3b8;font-size:32px}.qr-template-grid{scroll-padding:4px}.qr-template-grid button{padding:8px 5px}.qr-options,.qr-options details:has(.qr-style-picker){overflow:visible}.qr-style-picker{position:relative;min-width:0}.qr-style-trigger{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;margin-top:7px;padding:8px 12px;border:1px solid var(--qr-line);border-radius:10px;background:var(--qr-surface);color:var(--qr-text);text-align:left}.qr-style-trigger>svg{margin-left:auto;color:var(--qr-muted)}.qr-style-trigger[aria-expanded=true]{border-color:#7666ff;box-shadow:0 0 0 2px #6366f10a}.qr-style-trigger[aria-expanded=true]>svg{transform:rotate(180deg)}.qr-style-symbol{display:block;width:24px;height:24px;flex:0 0 24px}.qr-style-symbol svg{display:block;width:100%;height:100%}.qr-style-popover{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;max-height:300px;padding:6px 8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;border:1px solid var(--qr-line);border-radius:11px;background:#fff;box-shadow:0 8px 24px #1e293b24}.qr-style-group{padding:8px 0 5px}.qr-style-group+.qr-style-group{border-top:1px solid var(--qr-line)}.qr-style-group h3{margin:0 7px 5px;color:var(--qr-muted);font-size:10px;font-weight:500}.qr-style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:3px}.qr-style-grid button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:6px 2px;border:1px solid transparent;border-radius:7px;background:transparent;color:#64748b}.qr-style-grid button>span:last-child{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;line-height:1.3}.qr-style-warm .qr-style-grid button{color:#f59e0b}.qr-style-grid button:hover{background:#f5f5ff;color:var(--qr-primary)}.qr-style-grid button[aria-checked=true]{border-color:#7666ff;box-shadow:0 0 0 1px #7666ff;background:#f7f6ff;color:#7666ff}@media(max-width:480px){.qr-style-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}.qr-style-popover{max-height:280px}}.qr-finder-picker .qr-style-popover{padding:6px;max-height:300px}.qr-finder-picker .qr-style-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.qr-finder-picker .qr-style-group{padding:2px}.qr-finder-picker .qr-style-grid button{min-height:52px;padding:5px 2px}.qr-finder-picker .qr-style-symbol{width:26px;height:26px;flex-basis:26px}.qr-finder-picker .qr-style-trigger{gap:7px;padding:8px 10px}.qr-finder-picker .qr-finder-warm{color:#f59e0b}.qr-finder-picker:has(.qr-style-trigger[aria-expanded=true]){z-index:31}.qr-colors{gap:14px}.qr-color-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}.qr-color-presets button{display:grid;place-items:center;width:32px;height:32px;padding:4px;border:1px solid var(--qr-line);border-radius:8px;background:#fff}.qr-color-presets button>span{display:block;width:22px;height:22px;border:1px solid var(--swatch);border-radius:4px;background:var(--swatch);box-shadow:inset 0 0 0 4px #fff}.qr-color-presets button[aria-pressed=true]{border-color:#7565ff;box-shadow:0 0 0 2px #6366f122}.qr-colors .qr-color-control{gap:7px;height:39px;padding:5px 8px}.qr-colors input[type=color]{flex:0 0 27px;width:27px;height:27px}.qr-workbench .qr-colors .qr-color-control input[type=text]{min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:13px ui-monospace,monospace}.qr-colors select{min-height:39px}.qr-color-toggle{position:relative;display:inline-flex!important;align-items:center;gap:9px;width:fit-content;min-height:24px;cursor:pointer;font-size:12px!important}.qr-color-toggle input{position:absolute;left:0;width:32px;height:20px;margin:0;opacity:0;cursor:pointer}.qr-color-toggle>span{width:32px;height:19px;border-radius:20px;background:#e2e8f0;transition:background .15s}.qr-color-toggle>span:after{content:"";display:block;width:15px;height:15px;margin:2px;border-radius:50%;background:#fff;transition:transform .15s}.qr-color-toggle input:checked+span{background:#6960f5}.qr-color-toggle input:checked+span:after{transform:translateX(13px)}.qr-color-toggle input:focus-visible+span{outline:2px solid var(--qr-primary);outline-offset:3px}.qr-image.qr-transparent{background-color:#fff;background-image:conic-gradient(#e8ecf1 25%,transparent 0 50%,#e8ecf1 0 75%,transparent 0);background-size:16px 16px}.qr-export .qr-export-hint{margin:10px 0 0;font-size:11px;color:var(--qr-muted)}.qr-workbench .qr-shapes button{height:36px;min-height:36px;padding:9px}.qr-shapes button>svg{display:block;width:14px;height:14px;flex:0 0 14px}.qr-frame-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.qr-frame-grid button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:8px 3px;border:1px solid var(--qr-line);border-radius:8px;background:#fff;color:#64748b}.qr-frame-grid svg{display:block;width:100%;max-width:70px;aspect-ratio:1}.qr-frame-grid span{font-size:10px}.qr-frame-grid button:hover{border-color:#aaa3ff;background:#fafaff}.qr-frame-grid button[aria-pressed=true]{border-color:#7666ff;color:#6b60ff;box-shadow:0 0 0 2px #6366f126}.qr-levels{display:flex;gap:8px;margin-top:9px}.qr-levels button{flex:1 1;padding:8px;border:1px solid var(--qr-line);border-radius:10px;background:var(--qr-surface);color:var(--qr-muted)}.qr-levels button[aria-pressed=true]{border-color:#7666ff;background:#f5f4ff;color:#6b60ff}.qr-level-hint{margin:10px 0 0;padding:6px 9px;border-radius:7px;background:#f8f7fd;color:#7b88a1;font-size:10px;line-height:1.7}.qr-setting-range{display:flex;align-items:center;gap:16px;margin-top:7px}.qr-setting-range input[type=range]{flex:1 1;min-width:0;margin:8px 0}.qr-setting-range output{min-width:20px;color:#25334a;font-size:13px;text-align:center}.qr-content-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.qr-content-fields>*{min-width:0}.qr-content-full{grid-column:1/-1}.qr-content-fields textarea{margin-top:7px;min-height:100px;font:inherit}.qr-password-field{position:relative}.qr-workbench .qr-password-field input{padding-right:40px}.qr-password-field button{position:absolute;top:0;right:0;display:grid;place-items:center;width:38px;height:100%;border:0;border-radius:8px;background:transparent;color:#64748b}.qr-hidden-network{align-self:end;min-height:38px;margin:0}.qr-content-fields input:disabled{opacity:.55}@media(max-width:420px){.qr-content-half:has(input[type=datetime-local]){grid-column:1/-1}}