/* PROP / TEST STYLES: markings and decorative code views. */
.prop-band{background:#323b32;color:#fff;text-align:center;font-size:12px;letter-spacing:.6px;font-weight:700;padding:12px 7px;line-height:1.3;position:sticky;top:63px;z-index:14}
.fictional-brand{font-size:12px;line-height:1.2;display:flex;align-items:center;gap:6px}
.fictional-brand svg{width:25px;height:25px}
.card-prop{background:#fffbdc;padding:11px;text-align:center;font-size:12px;font-weight:bold;color:#514b28;border-top:1px solid #a3ac8d}
.prop-band{top:70px;background:#323b32;padding:9px 7px;font-size:12px;letter-spacing:.4px}
.fictional-brand{font-size:3.6cqw;line-height:1;letter-spacing:-.5px;font-weight:500}
.prop-code-graphic{width:240px;max-width:100%;aspect-ratio:1;margin:18px auto 12px;background:#fff}
.qr-art{display:block;width:100%;height:100%;fill:initial;stroke:none;shape-rendering:crispEdges}
.modal .prop-countdown{text-align:center;font-size:16px;font-variant-numeric:tabular-nums;color:#303641;margin:0 0 16px;font-weight:600}
.modal:has(.prop-code-graphic)>p:not(.prop-countdown){text-align:center;font-size:12px;font-weight:700;color:#514b28;background:#fffbdc;padding:10px;border-radius:5px;margin-bottom:16px}
.qr-expired{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #e3e6e1;border-radius:10px;background:#f3f5f2;text-align:center;color:#626b63}
.qr-expired>span{font-size:22px;font-weight:600}
.qr-expired small{max-width:180px;font-size:13px;line-height:1.5}
#prop-code-refresh{margin:0 0 14px}
.stage-barcode{display:block;width:100%;height:60px;margin-top:8px;stroke:none;fill:initial;shape-rendering:crispEdges}
body.has-qr-screen{overflow:hidden}
.qr-screen-shade{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;background:#ececee}
.qr-screen{width:100%;max-width:430px;height:100dvh;overflow-y:auto;background:#fff;color:#292e3e}
.qr-screen-header{position:sticky;top:0;z-index:2;height:60px;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;background:white;padding:0 16px}
.qr-screen-header h2{font-size:18px;font-weight:650;letter-spacing:-.3px;text-align:center;white-space:nowrap}
.qr-close{justify-self:end;min-height:44px;padding:0 4px;font-size:16px;font-weight:400;color:#222936}
.qr-screen-mark{position:sticky;top:60px;z-index:2;padding:9px 7px;background:#323b32;color:white;text-align:center;font-size:12px;font-weight:700;letter-spacing:.4px;line-height:1.3}
.qr-screen-content{padding:8px 20px 28px}
.qr-screen .prop-code-graphic{width:100%;max-width:none;margin:0 auto;aspect-ratio:1}
.qr-screen .prop-countdown{text-align:center;font-size:16px;font-weight:400;color:#999;font-variant-numeric:tabular-nums;margin:19px 0 22px}
.qr-screen .prop-countdown strong{font-weight:650;color:#292e3e}
.qr-explanation{font-size:14px;line-height:23.5px;color:#262c30;margin:0}
.qr-screen-content h3{font-size:14px;line-height:23px;margin:23px 0 8px;font-weight:650}
.qr-screen-content ul{list-style:none;padding:0;margin:0;font-size:14px;line-height:25px;color:#262c30}
.qr-screen-content li:before{content:'•';padding-right:9px}
.qr-screen{overflow:hidden;display:flex;flex-direction:column}
.qr-screen-header,.qr-screen-mark{position:static;flex-shrink:0}
.qr-screen-content{flex:1;min-height:0;overflow-y:auto}
@media print{.prop-band{position:static}}