*{box-sizing:border-box}body{margin:0;background:#f5f6fa;color:#17182a;font:16px system-ui,-apple-system,sans-serif}main{max-width:620px;margin:24px auto;padding:24px;background:white;border-radius:20px;box-shadow:0 6px 30px #14152a12}header{display:flex;justify-content:space-between;gap:10px;color:#4039b5}header span,.note{color:#73768b;font-size:13px}h1{font-size:26px;margin:28px 0 16px}label{display:block;margin:14px 0}input{width:100%;padding:14px;border:1px solid #cbd0dc;border-radius:10px;margin-top:7px;font-size:16px}button{border:0;border-radius:12px;padding:14px 20px;background:#4542c8;color:white;font-size:16px;font-weight:700;cursor:pointer;margin:10px 0;width:100%}.secondary{background:#e9eaf6;color:#282a4b}a{color:#4542c8}.loyalty{background:linear-gradient(130deg,#b92e70,#752b91);color:white;border-radius:18px;padding:24px;margin:20px 0}.count{font-size:34px;font-weight:800}.dots{display:flex;gap:5px;flex-wrap:wrap;margin:20px 0}.dots span{width:20px;height:20px;border-radius:50%;background:#ffffff60}.dots span.on{background:white}#qrcode{background:white;padding:14px;width:max-content;border-radius:10px;max-width:100%}#qrcode img,#qrcode canvas{max-width:100%}.error{padding:12px;background:#ffe7e7;color:#8b1212;border-radius:8px}.success{padding:12px;background:#e4faea;color:#176b37;border-radius:8px}video{width:100%;max-height:350px;background:#141521;border-radius:14px} @media(max-width:650px){main{margin:0;border-radius:0;min-height:100vh;padding:20px}}