:root{font:17px/1.55 system-ui,sans-serif;color:#eaf3f4;background:#07171e;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:540px;margin:0 auto;padding:36px 24px}header{display:flex;gap:14px;align-items:center;margin-bottom:34px}header strong{letter-spacing:.12em;font-size:18px}small{display:block;letter-spacing:.19em;font-size:12px;color:#9bb4bc}.mark{background:#adf350;color:#10210a;padding:10px;border-radius:12px;font-size:24px}.badge{color:#b9f97a;font-size:12px;letter-spacing:.1em}h1{font-size:44px;line-height:1.07;letter-spacing:-.04em;margin:24px 0}p{color:#b9cbd1}section{margin-top:28px;padding:24px;background:#102832;border:1px solid #244451;border-radius:18px}label{display:block;margin-bottom:8px;font-weight:650}input,button{font:inherit;border-radius:10px;width:100%;padding:14px}input{border:1px solid #53737f;background:#07171e;color:white}button{margin-top:16px;background:#adf350;color:#142708;border:0;font-weight:750;cursor:pointer}button:disabled{opacity:.55;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid white;outline-offset:3px}.hint{font-size:14px;margin-bottom:0}#status{min-height:28px;overflow-wrap:anywhere}#status.error{color:#ffb7ac}footer{font-size:13px;color:#90aab3;margin-top:30px}[hidden]{display:none!important}@media(max-width:360px){h1{font-size:36px}main{padding:24px 18px}section{padding:18px}}

.barcode-wrap{background:white;color:#111;text-align:center;border-radius:12px;padding:8px 8px 16px;margin:20px 0}.barcode-wrap svg{width:100%;height:auto;display:block}#customer-code{letter-spacing:.12em}#punches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:18px}#punches span{aspect-ratio:1;display:grid;place-items:center;border:1px solid #53737f;border-radius:50%;color:#9bb4bc}#punches .earned{background:#adf350;color:#142708}.inactive{border-top:1px solid #53737f;padding-top:16px;font-size:13px;color:#b9f97a}#success h2{margin:0}#identity{overflow-wrap:anywhere}