.page-qr{--qr-ink:#284936;--qr-muted:#55745d;--qr-border:#bfd0b8}
.page-qr .qr-hero{padding:55px clamp(20px,5vw,90px) 64px;background:#ecf3e6;color:var(--qr-ink);border-bottom:1px solid var(--qr-border)}
.page-qr .qr-kicker,.page-qr .qr-overline,.page-qr .qr-workspace-tag{font:800 10px/1.5 'DM Sans',Arial,sans-serif;letter-spacing:.12em;color:#628265}
.page-qr .qr-kicker{display:flex;align-items:center;gap:10px}
.page-qr .qr-signal{width:9px;height:9px;border-radius:50%;background:#df8b6b}
.page-qr .qr-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;gap:45px}
.page-qr .qr-hero h1{max-width:950px;margin:22px 0;font:650 clamp(46px,6vw,94px)/1.02 'DM Sans',Arial,sans-serif;letter-spacing:-.065em}
.page-qr .qr-hero h1 em{font-style:normal;color:#d17b5e}
.page-qr .qr-hero p{max-width:690px;color:#617a65;font:400 16px/1.7 'DM Sans',Arial,sans-serif}
.page-qr .qr-hero-stamp{display:grid;justify-items:center;gap:10px;color:#6d906c;padding:19px;border:1px dashed #aac4a2;border-radius:25px;transform:rotate(7deg)}
.page-qr .qr-hero-stamp span,.page-qr .qr-hero-stamp b{font:700 10px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.09em}
.page-qr .qr-hero-stamp svg{width:93px;height:93px;fill:#6b9c76}
.page-qr .qr-workspace{padding:clamp(58px,7vw,95px) clamp(20px,5vw,90px) 100px;background:#f5f7ec;color:var(--qr-ink)}
.page-qr .qr-workspace-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px}
.page-qr .qr-workspace-heading h2{margin:8px 0 0;font:650 clamp(35px,4vw,64px)/1.1 'DM Sans',Arial,sans-serif;letter-spacing:-.05em}
.page-qr .qr-editor-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:clamp(18px,3vw,42px)}
.page-qr .qr-editor,.page-qr .qr-result{min-width:0;padding:clamp(20px,2.5vw,37px);border-radius:27px;border:1px solid var(--qr-border);background:#fffcf4;box-shadow:0 16px 40px #395a3910}
.page-qr .qr-fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
.page-qr .qr-fieldset legend{font:750 15px/1.5 'DM Sans',Arial,sans-serif;color:#2b4a36;padding:0 0 11px}
.page-qr .qr-type-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.page-qr .qr-type-switch label{cursor:pointer;position:relative;display:block}
.page-qr .qr-type-switch input{position:absolute;opacity:0;inset:0}
.page-qr .qr-type-switch label>span{display:flex;justify-content:center;align-items:center;gap:10px;padding:16px;border-radius:15px;border:1.5px solid #bed3b9;background:#f2f6eb;color:#466e50;font:750 13px/1.4 'DM Sans',Arial,sans-serif;min-height:65px}
.page-qr .qr-type-switch label svg{height:22px;width:22px;flex:none}
.page-qr .qr-type-switch input:checked+span{background:#e0eee0;border-color:#528565;box-shadow:inset 0 0 0 1px #528565;color:#295e41}
.page-qr .qr-type-switch input:focus-visible+span{outline:3px solid #ca866a;outline-offset:3px}
.page-qr .qr-fields-group{display:grid;gap:10px;margin-bottom:30px}
.page-qr .qr-fields-group[hidden]{display:none!important}
.page-qr .qr-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font:750 13px/1.5 'DM Sans',Arial,sans-serif;color:#294f36}
.page-qr .qr-label span{font-size:10px;color:#8a927f;font-weight:600}
.page-qr .qr-fields-group input:not([type=checkbox]),.page-qr .qr-fields-group select,.page-qr .qr-design select{
 display:block;min-width:0;width:100%;min-height:49px;
 border:1px solid #b7ccb7;background:#f8f9f0;color:#2e4f3a;border-radius:13px;
 padding:12px 14px;font:500 14px/1.4 'DM Sans',Arial,sans-serif;
}
.page-qr .qr-fields-group input:focus,.page-qr .qr-fields-group select:focus,.page-qr .qr-design select:focus{outline:3px solid #bad1b1;outline-offset:2px;border-color:#6a9575}
.page-qr .qr-fields-group .qr-hint,.page-qr .qr-privacy{font:400 11px/1.7 'DM Sans',Arial,sans-serif;color:#667e68;margin:0}
.page-qr .qr-password-row{display:flex;gap:7px}
.page-qr .qr-password-row button{min-height:47px;border-radius:12px;border:1px solid #aec8ad;background:#e6eee1;color:#426648;padding:8px 13px;cursor:pointer;font:700 11px 'DM Sans',sans-serif}
.page-qr #qr-password-field{display:grid;gap:9px}
.page-qr #qr-password-field[hidden]{display:none}
.page-qr .qr-check{display:flex;align-items:center;gap:10px;min-height:38px;color:#426148;font:600 12px 'DM Sans',Arial,sans-serif}
.page-qr .qr-check input{accent-color:#3c7552;width:17px;height:17px}
.page-qr .qr-design{border-top:1px solid var(--qr-border);padding-top:25px;margin-bottom:0}
.page-qr .qr-presets{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 18px}
.page-qr .qr-presets button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:42px;border-radius:30px;padding:9px 13px;border:1px solid #b9cdb7;background:#f7f8ef;color:#41634a;font:700 11px/1.2 'DM Sans',Arial,sans-serif}
.page-qr .qr-presets button.is-active{background:#e3eedf;border-color:#598563}
.page-qr .qr-swatch{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid #ffffffa0;box-shadow:0 0 0 1px #80978980}
.page-qr .qr-swatch-bloom{background:linear-gradient(135deg,#234934 50%,#fff 50%)}
.page-qr .qr-swatch-ink{background:linear-gradient(135deg,#152a3b 50%,#fff 50%)}
.page-qr .qr-swatch-coral{background:linear-gradient(135deg,#97422e 50%,#fff7e9 50%)}
.page-qr .qr-design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:19px}
.page-qr .qr-color-control{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-radius:12px;background:#f1f5e9;border:1px solid #c0d1be;color:#45644a;font:700 11px/1.35 'DM Sans',Arial,sans-serif}
.page-qr .qr-color-control input{border:0;cursor:pointer;background:none;width:36px;height:32px}
.page-qr .qr-design select{margin-top:10px}
.page-qr .qr-error{min-height:0;margin:12px 0 0;color:#aa4334;font:650 12px/1.5 'DM Sans',Arial,sans-serif}
.page-qr .qr-result{position:sticky;top:25px}
.page-qr .qr-preview-heading,.page-qr .qr-preview-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font:800 10px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:.06em;color:#678068}
.page-qr .qr-preview-heading #qr-state{padding:5px 9px;border-radius:15px;background:#e6f0e1;color:#447450}
.page-qr .qr-preview-heading #qr-state.is-invalid{background:#f7e4dd;color:#ab5847}
.page-qr .qr-preview-surface{margin:17px 0 19px;min-height:220px;aspect-ratio:1;display:grid;place-items:center;border:1px solid #c8d8c0;border-radius:20px;padding:clamp(10px,3vw,26px);background:#eaf0e5}
.page-qr #qr-canvas[hidden],.page-qr #qr-placeholder[hidden]{display:none!important}
.page-qr #qr-canvas{display:block;width:100%;height:auto;max-width:560px;aspect-ratio:1;image-rendering:auto;border-radius:3px}
.page-qr .qr-preview-placeholder{color:#6b7c69;font:600 14px/1.6 'DM Sans',Arial,sans-serif;text-align:center}
.page-qr .qr-downloads{display:grid;gap:10px;margin:20px 0}
.page-qr .qr-downloads button{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #9eb69e;border-radius:13px;background:#e8efe3;color:#345741;cursor:pointer;min-height:50px;padding:13px 17px;font:800 12px/1.3 'DM Sans',Arial,sans-serif}
.page-qr .qr-downloads button#qr-download-png{background:#345f47;border-color:#345f47;color:#fff8ee}
.page-qr .qr-downloads button:disabled{opacity:.45;cursor:not-allowed}
.page-qr .qr-downloads button:not(:disabled):hover{filter:brightness(.95)}
.page-qr .qr-downloads button:focus-visible,.page-qr .qr-presets button:focus-visible,.page-qr .qr-password-row button:focus-visible{outline:3px solid #c98366;outline-offset:3px}
.page-qr .qr-status{min-height:1.3em;margin:10px 0 0;color:#356947;font:650 12px/1.5 'DM Sans',Arial,sans-serif}
@media(max-width:1000px){.page-qr .qr-editor-grid{grid-template-columns:1fr;max-width:780px}.page-qr .qr-result{position:static}}
@media(max-width:650px){.page-qr .qr-hero{padding:48px 19px}.page-qr .qr-hero-grid{grid-template-columns:1fr}.page-qr .qr-hero-stamp{display:none}.page-qr .qr-workspace{padding:50px 18px 80px}.page-qr .qr-workspace-heading{align-items:flex-start;flex-direction:column}.page-qr .qr-editor,.page-qr .qr-result{padding:20px;border-radius:21px}.page-qr .qr-design-grid{grid-template-columns:1fr}.page-qr .qr-type-switch label>span{min-height:56px}.page-qr .qr-hero h1{font-size:clamp(43px,11vw,64px)}}
@media(prefers-reduced-motion:reduce){.page-qr *, .page-qr *::before{animation:none!important;transition:none!important}}

.page-qr .qr-no-js{padding:20px clamp(20px,5vw,90px);color:#964b39;background:#fff3e9;font:700 14px/1.6 'DM Sans',Arial,sans-serif}