*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0f172a;color:#333;margin:0;padding:0;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center;overflow:hidden}.container{width:min(100vw,100dvh * 9 / 16);height:min(100dvh,100vw * 16 / 9);aspect-ratio:9 / 16;max-width:100%;background:#f59e0b;position:relative;overflow-y:auto;overflow-x:hidden;box-shadow:0 0 50px #00000080;border:1px solid #334155}#step1{width:100%;min-height:100%;background-image:url(/step1/step1BG.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;padding-top:35%}.agreement-text{font-size:.6rem}.step1-content{padding:0 36px;flex:1;display:flex;flex-direction:column;width:90%;margin:18% auto auto}.card{background:transparent;padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;height:100%}.form-group{margin-bottom:0}label{font-weight:700;display:block;margin-bottom:4px;color:#000;font-size:1.1rem}input[type=text],input[type=email],input[type=tel],select{width:100%;padding:10px 12px;font-size:1rem;border:none;border-radius:4px;background:#fff;color:#333;margin-bottom:2px;appearance:none;box-shadow:0 2px 4px #0000001a}.select-wrapper{position:relative}.select-wrapper:after{content:"";position:absolute;top:50%;right:12px;transform:translateY(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #f59e0b;pointer-events:none}.phone-group{display:flex;gap:8px}.phone-code-wrapper{width:35%;min-width:100px}.phone-group input{flex:1}.error{font-size:1rem;color:#ffe600;min-height:16px;font-weight:400}.agreement{margin-top:8px;font-size:.75rem;line-height:1.3;color:#333}.checkbox-container{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-weight:400;font-size:.75rem}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{height:20px;width:20px;min-width:20px;background-color:#fff;border:2px solid #000;position:relative}.checkbox-container input:checked~.checkmark{background-color:#000}.checkmark:after{content:"";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{left:6px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.step1-footer{margin-top:auto;margin-bottom:calc(40px + env(safe-area-inset-bottom));display:flex;justify-content:center}.step1-next-btn{width:80%;max-width:280px;cursor:pointer;transition:transform .1s}.step1-next-btn:active{transform:scale(.98)}.popup-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;z-index:100;display:flex;justify-content:center;align-items:center}.popup-content{position:relative;width:100%;height:100%;max-width:100%;display:flex;flex-direction:column;align-items:center}.popup-bg{width:100%;height:100%}.popup-text{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);width:80%;text-align:center;font-size:1.1rem;font-weight:700;color:#000;line-height:1.5}.popup-buttons{position:absolute;bottom:15%;width:100%;display:flex;justify-content:center;gap:16px}.popup-btn{width:35%;cursor:pointer;transition:transform .1s}.popup-btn:active{transform:scale(.98)}.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:90%;margin:30% 5%}.style-card{background:transparent;border-radius:8px;padding:8px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:all .2s;position:relative}.style-card input[type=radio]{display:none}.style-card-title{font-size:1.2rem;font-weight:900;margin-bottom:8px;color:#000}.style-card img{width:100%;height:auto;border:2px solid #000;display:block}.style-card.selected{background:#000}.style-card.selected .style-card-title{color:#fff}.step{display:none;width:100%;height:100%}.step.active{display:flex;flex-direction:column}.step:not(#step1){padding:0;background:none;height:100%;color:#333}.step:not(#step1) label{color:#fff}.step#step2{width:100%;min-height:100%;background-image:url(/step2/step2-bg.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;padding:25% 36px 0;flex-direction:column;position:relative;display:none}.step#step2.active{display:flex}.row-center{display:flex;justify-content:center;width:100%}.step3-footer{position:absolute;bottom:calc(3.5% + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:90%;height:8%;display:flex;justify-content:space-between;gap:12px;z-index:10}.step3-btn{flex:1;height:100%;background:transparent;color:transparent;border:none;cursor:pointer}.step2-next-btn{position:absolute;bottom:calc(3.5% + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:65%;height:8%;background:transparent;color:transparent;border:none;cursor:pointer;z-index:10}.step2-next-btn:disabled{cursor:not-allowed;display:none;display:block}.hidden{display:none!important}.loader{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/step4/loading-bg_04.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;z-index:100;flex-direction:column;justify-content:center;align-items:center}.loading-text{font-size:1.5rem;font-weight:900;color:#000;margin-top:15%;letter-spacing:2px;margin-left:30%}.loading-subtext{font-size:.9rem;font-weight:700;color:#000;margin-top:-4px;margin-left:30%;letter-spacing:1px}.loading-text span,.loading-subtext span{display:inline-block;animation:breathe 2s ease-in-out infinite}.loading-text span.dot-1,.loading-text span.dot-2,.loading-text span.dot-3{animation:blink 1.4s infinite both}.loading-text span.dot-1{animation-delay:.2s}.loading-text span.dot-2{animation-delay:.4s}.loading-text span.dot-3{animation-delay:.6s}@keyframes breathe{0%,to{opacity:.6;transform:scale(.98)}50%{opacity:1;transform:scale(1)}}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}.step#step3{width:100%;min-height:100%;background-image:url(/step3/HKTDC_ol_03-1.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;display:none;flex-direction:column;padding:30% 36px 0;position:relative}.step#step3.active{display:flex}.mode-tabs{position:absolute;top:25%;left:50%;transform:translate(-50%);width:60%;height:5%;display:flex;z-index:10}.mode-tab{flex:1;height:100%;cursor:pointer}.camera-wrap{position:absolute;top:32%;left:50%;transform:translate(-50%);width:78%;aspect-ratio:3/4;background:#000;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:16px;z-index:25}.upload-wrap{position:absolute;top:40%;left:50%;transform:translate(-50%);width:55%;aspect-ratio:3/4;background:transparent;display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:5}#uploadInput{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:20}.upload-btn-clicker{position:absolute;top:33%;left:50%;transform:translate(-50%);width:35%;height:6%;cursor:pointer;z-index:20}.upload-preview{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.upload-preview span{display:none}#cameraPreview{width:100%;height:100%;object-fit:cover}#cameraPreview.mirrored{transform:scaleX(-1)}#uploadPreview{width:100%;height:100%;object-fit:contain;border-radius:4px;transform-origin:center center;will-change:transform;touch-action:none}.capture-preview{margin-top:8px;font-size:.8rem;color:#000;text-align:center;font-weight:700}.step#step5{width:100%;min-height:100%;background-image:url(/step5/step5-bg.png);background-size:100% 100%;background-position:center;background-repeat:no-repeat;display:none;flex-direction:column;align-items:center;padding:10% 24px 0;position:relative}.step#step5.active{display:flex}.result-image-container{width:84%;aspect-ratio:9/16;background:transparent;border-radius:0;overflow:visible;border:none}#resultImg{width:80%;height:80%;object-fit:contain;margin-left:10%;margin-top:25%}.action-buttons{display:flex;justify-content:center;gap:20px;width:100%;margin-bottom:20px;padding:0 20px}.action-btn{width:42%;height:auto;cursor:pointer;object-fit:contain}.step5-footer{position:absolute;bottom:calc(5% + env(safe-area-inset-bottom));width:90%;display:flex;justify-content:center;align-items:center}.footer-text{width:80%;object-fit:contain}.footer-btn{width:40%;cursor:pointer;object-fit:contain}#redeemPopup{position:absolute;top:0;left:0;width:100%;height:100%;z-index:200;display:flex;justify-content:center;align-items:center}.redeem-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3}.redeem-content{position:relative;width:80%;background:#ffe600;padding:24px;border-radius:16px;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:201}.redeem-title{font-size:1.2rem;font-weight:900;margin-bottom:16px;color:#000}.qr-placeholder{width:150px;height:150px;background:#fff;padding:5px;margin:0 auto 10px;border-radius:8px;position:relative}.qr-placeholder img.qr-code{width:100%;height:100%;display:block}.redeemed-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:10}.redeemed-text{font-size:2rem;font-weight:900;color:#fff;text-shadow:-2px -2px 0 #ea580c,2px -2px 0 #ea580c,-2px 2px 0 #ea580c,2px 2px 0 #ea580c;transform:rotate(-15deg);border:4px solid #ea580c;padding:5px 10px;border-radius:8px;background:#fff3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.qr-placeholder.is-redeemed img.qr-code{opacity:.3;filter:grayscale(100%)}.qr-placeholder.is-redeemed .redeemed-overlay{display:flex}.redeemed-overlay.hidden{display:none}.redeem-note{font-size:.8rem;color:#333;margin-bottom:10px}.redeem-code-display{font-size:1.2rem;font-weight:700;color:#333;margin-bottom:5px}.redeem-hint{font-size:.9rem;color:#666;margin-bottom:20px}.redeem-confirm-btn{background:#3b82f6;color:#fff;border:none;padding:10px 30px;border-radius:20px;font-size:1rem;font-weight:700;cursor:pointer;border:2px solid #000}.switch-camera-btn{position:absolute;right:2%;top:2%;width:50px;z-index:50;cursor:pointer}.meta-hints{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:9999;display:flex;flex-direction:column;align-items:center;pointer-events:all}.meta-hints img{width:90%;max-width:400px;margin-top:20px;object-fit:contain}.meta-hints.hidden{display:none!important}