.ombox-qrcode{--qrcode-size:208px;display:grid;grid-template-columns:minmax(0,var(--qrcode-size)) minmax(0,1fr);align-items:center;gap:28px;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:24px;border:1px solid var(--color-border,#d8dee8);border-radius:var(--radius-lg,12px);background:var(--color-white,#fff);color:var(--color-text-primary,#172033)}
.ombox-qrcode-frame{display:grid;place-items:center;position:relative;box-sizing:border-box;width:100%;max-width:var(--qrcode-size);aspect-ratio:1;min-width:0;padding:12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#475569;overflow:hidden}
.ombox-qrcode-frame img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}
.ombox-qrcode-state{padding:12px;font-size:14px;line-height:1.6;text-align:center;overflow-wrap:anywhere}
.ombox-qrcode[data-qrcode-state="ready"] .ombox-qrcode-state{display:none}
.ombox-qrcode:not([data-qrcode-state="ready"]) .ombox-qrcode-frame img,.ombox-qrcode:not([data-qrcode-state="ready"]) .ombox-qrcode-open{display:none}
.ombox-qrcode-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;overflow-wrap:anywhere}
.ombox-qrcode-copy strong{font-size:18px;line-height:1.5;font-weight:600}
.ombox-qrcode-copy p{margin:0;font-size:14px;line-height:1.7;color:var(--color-text-secondary,#475569)}
.ombox-qrcode-copy small{font-size:13px;line-height:1.6;color:var(--color-text-muted,#64748b)}
.ombox-qrcode-open{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.ombox-qrcode[data-qrcode-surface="tablet"],body:is(.device-tablet,.shell-variant-tablet) .ombox-qrcode[data-qrcode-surface="auto"]{--qrcode-size:256px;grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px;padding:28px}
.ombox-qrcode[data-qrcode-surface="mobile"],body:is(.device-mobile,.shell-variant-mobile) .ombox-qrcode[data-qrcode-surface="auto"]{--qrcode-size:224px;grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px;padding:16px}
.ombox-qrcode:is([data-qrcode-surface="tablet"],[data-qrcode-surface="mobile"]) .ombox-qrcode-copy,body:is(.device-tablet,.shell-variant-tablet,.device-mobile,.shell-variant-mobile) .ombox-qrcode[data-qrcode-surface="auto"] .ombox-qrcode-copy{align-items:center;text-align:center}
.ombox-qrcode:is([data-qrcode-surface="tablet"],[data-qrcode-surface="mobile"]) .ombox-qrcode-open{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 20px}
@media(max-width:1023.98px){body:not(.device-desktop):not(.shell-variant-desktop) .ombox-qrcode[data-qrcode-surface="auto"]{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}body:not(.device-desktop):not(.shell-variant-desktop) .ombox-qrcode[data-qrcode-surface="auto"] .ombox-qrcode-copy{align-items:center;text-align:center}body:not(.device-desktop):not(.shell-variant-desktop) .ombox-qrcode[data-qrcode-surface="auto"] .ombox-qrcode-open{min-height:44px}}
@media(max-width:767.98px){body:not(.device-desktop):not(.shell-variant-desktop):not(.device-tablet):not(.shell-variant-tablet) .ombox-qrcode[data-qrcode-surface="auto"]{--qrcode-size:224px;padding:16px;gap:16px}}
body.eye-protection .ombox-qrcode{background:#faf8f3;border-color:#d9cbb8;color:#4a3c28}
body.eye-protection .ombox-qrcode-copy :is(p,small){color:#6b5d4f}
/* Keep the code itself white and high-contrast in every reading theme. */
body.eye-protection .ombox-qrcode-frame{background:#fff;color:#475569}