.utility-workspace:has(.qr-designer){padding:0;overflow:hidden}.qr-designer{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);min-height:720px}.qr-controls{display:grid;align-content:start;gap:18px;padding:clamp(22px,3vw,38px);border-right:1px solid #dae7eb}.qr-section-heading{display:flex;align-items:center;gap:12px;margin-top:4px}.qr-section-heading>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#102c3b;color:#f6e7c1;font-size:.73rem;font-weight:900}.qr-section-heading div{display:grid;gap:2px}.qr-section-heading strong{color:#173b4a}.qr-section-heading small{color:#6b7f89}.qr-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.qr-presets button{display:grid;place-items:center;gap:6px;min-height:68px;padding:8px;border:1px solid #d5e2e7;border-radius:11px;background:#fff;color:#49616e;font-size:.67rem;font-weight:750;cursor:pointer}.qr-presets button i{display:block;width:30px;height:30px;border:5px solid var(--qr-light,#fff);border-radius:50%;background:var(--qr-dark,#111)}.qr-presets button:nth-child(1) i{--qr-dark:#111827;--qr-light:#f6e7c1}.qr-presets button:nth-child(2) i{--qr-dark:#0b1f3a;--qr-light:#eaf2ff}.qr-presets button:nth-child(3) i{--qr-dark:#063f34;--qr-light:#ecfdf5}.qr-presets button:nth-child(4) i{--qr-dark:#581c2c;--qr-light:#fff1f2}.qr-presets button:nth-child(5) i{--qr-dark:#09090b;--qr-light:#fff}.qr-presets button.active{border-color:#176b87;background:#edf8fb;color:#176b87;box-shadow:0 0 0 2px #176b8720}.qr-controls input[type=color]{height:50px;padding:5px;cursor:pointer}.qr-contrast{min-height:40px;padding:10px 12px;border-radius:9px;background:#edf8f1;color:#28623d;font-size:.84rem}.qr-contrast.warning{background:#fff4e5;color:#8a4b0f}.qr-generate{width:100%;justify-self:stretch}.qr-preview-panel{display:grid;align-content:start;gap:18px;padding:clamp(22px,3vw,36px);background:radial-gradient(circle at top,#f5ead0 0,#102c3b 52%,#091c27 100%);color:#fff}.qr-preview-top{display:flex;justify-content:space-between;gap:10px}.qr-preview-top span{font-weight:800}.qr-preview-top small{color:#c8d5da}.qr-stage{display:grid;place-items:center;min-height:390px;padding:24px;border:1px solid #ffffff29;border-radius:20px;background:#ffffff12;box-shadow:inset 0 1px #ffffff20,0 18px 40px #0003;backdrop-filter:blur(10px)}.qr-stage canvas{display:block;width:min(100%,430px);height:auto;border-radius:10px;box-shadow:0 16px 35px #0006}.qr-empty{display:grid;place-items:center;gap:9px;color:#d8e3e7;text-align:center}.qr-empty i{font-size:4rem;color:#f6e7c1}.qr-empty strong{font-size:1.05rem}.qr-empty span{font-size:.82rem;color:#afc0c7}.qr-download{width:100%;justify-self:stretch;background:linear-gradient(135deg,#f6e7c1,#d8b968)!important;color:#182d38!important;box-shadow:0 8px 20px #0004!important}.qr-download:disabled{opacity:.45;cursor:not-allowed}.qr-preview-panel>p{display:flex;gap:8px;margin:0;color:#afc0c7;font-size:.78rem;line-height:1.5}.qr-preview-panel>p i{margin-top:2px;color:#f6e7c1}@media(max-width:900px){.qr-designer{grid-template-columns:1fr}.qr-controls{border-right:0;border-bottom:1px solid #dae7eb}.qr-preview-panel{min-height:650px}.qr-stage{min-height:360px}}@media(max-width:620px){.qr-presets{grid-template-columns:repeat(2,1fr)}.qr-presets button:last-child{grid-column:1/-1}.qr-preview-panel{padding:20px}.qr-stage{min-height:300px;padding:14px}}
