:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #162a43; background: #edf3fa; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 2.5rem 1rem; }
.card { max-width: 28rem; margin: auto; padding: 1.75rem; border: 1px solid #d9e4f0; border-radius: 1.25rem; background: white; }
h1 { margin: 0; font-size: 1.8rem; text-align: center; letter-spacing: -.025em; }
p { margin: .6rem 0; line-height: 1.5; }
.intro, #status, .expiry, .remaining { text-align: center; }
.intro { margin-bottom: 1.2rem; color: #53677f; }
.qr { display: block; width: min(100%, 17.5rem); height: auto; margin: 1rem auto; aspect-ratio: 1; background: white; }
.expiry { font-size: 1rem; font-weight: 600; }
.remaining { margin-top: .2rem; color: #53677f; font-size: .875rem; }
.button { display: block; margin: 1.25rem 0; padding: .9rem; border-radius: .7rem; background: #0b64d8; color: white; text-decoration: none; text-align: center; font-weight: 650; line-height: 1.5; }
.button:hover { background: #0854b7; }
.clipboard-buffer { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.copy { display: block; width: 100%; min-height: 2.75rem; margin-top: .5rem; background: white; border: 1px solid #b5cbe5; border-radius: .6rem; color: #085cc9; font: inherit; cursor: pointer; }
.copy-status { font-size: .875rem; text-align: center; }
.note, details p { font-size: .875rem; color: #53677f; }
.note { margin-top: 1.25rem; }
details { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #d9e4f0; }
summary { cursor: pointer; color: #085cc9; min-height: 2rem; line-height: 1.5; }
:focus-visible { outline: 3px solid #b36a00; outline-offset: 3px; }
@media (max-width: 420px) { body { padding: 1rem .7rem; } .card { padding: 1.25rem; } }