*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0;background:#f3f7fa;color:#344f60;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}
main{width:min(100% - 32px,440px);margin:32px auto;text-align:center}
.logo{display:block;object-fit:contain;margin:0 auto 24px}
.receipt{position:relative;overflow:hidden;background:white;border-radius:20px;box-shadow:0 14px 50px #224d7110;padding:32px 24px}
.topline{position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(110deg,#20b8cd,#087dbd)}
.eyebrow{font-size:11px;font-weight:650;letter-spacing:.18em;color:#708794;margin:0 0 18px}
h1{font-size:24px;letter-spacing:-.04em;margin:0 0 8px;color:#24465b}
#message{font-size:14px;color:#687e8b;margin:0}
.code{font-size:clamp(46px,14vw,76px);font-weight:750;letter-spacing:.035em;color:#0876aa;line-height:1.2;margin:26px 0 10px;overflow-wrap:anywhere}
.kind{display:inline-block;border-radius:8px;background:#edf6fb;color:#277598;padding:7px 12px;margin:0 0 26px;font-size:14px}
.issued{display:grid;gap:4px;border-top:1px solid #e9eff3;padding-top:20px;font-size:14px}.issued span{color:#7a8c97;font-size:12px}
.guidance{margin-top:24px;background:#f2f7fa;border-radius:10px;padding:16px;font-size:16px;color:#345e77}
.note,.footer{font-size:12px;color:#748793}.note{margin:16px 0 0}.footer{margin-top:24px}
.expired .code{color:#7d8c95}.expired .topline{background:#9baab3}
@media(prefers-reduced-motion:no-preference){.receipt{animation:appear .2s ease-out}@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}}