:root{--font-family:"Sarabun", sans-serif;--bg-page:#0b1628;--bg-card:#122040;--bg-elevated:#1a2d52;--gold:#c9a84c;--gold-hover:#d4b85a;--gold-text:#e8c97a;--gold-muted:#c9a84cb3;--gold-subtle:#c9a84c0f;--text-primary:#fff;--text-secondary:#ffffff8c;--text-muted:#fff6;--text-placeholder:#ffffff4d;--border-default:#ffffff1f;--border-subtle:#ffffff0f;--border-hover:#fff3;--surface-input:#ffffff0a;--surface-hover:#ffffff0d;--error:#ff6b6b;--success:#4caf82;--radius-sm:8px;--radius-md:12px;--radius-lg:16px}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-family);background-color:var(--bg-page);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}@keyframes stepEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes successDraw{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.progress-bar-track{border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:#ffffff14;height:3px;position:absolute;top:0;left:0;right:0;overflow:hidden}.progress-bar-fill{background:var(--gold);height:100%;transition:width .35s}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:3px solid #c9a84c33;border-top-color:var(--gold);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}.upload-zone{text-align:center;cursor:pointer;background:#ffffff05;border:2px dashed #c9a84c4d;border-radius:12px;padding:32px;transition:border-color .2s,background .2s}.upload-zone:hover,.upload-zone.dragover{background:#c9a84c0a;border-color:#c9a84cb3}.upload-zone .upload-preview{display:inline-block;position:relative}.upload-zone .upload-preview img{object-fit:cover;border:1px solid #c9a84c4d;border-radius:8px;width:120px;height:120px}.upload-zone .remove-btn{color:#fff;cursor:pointer;background:#ff6b6b;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;line-height:1;display:flex;position:absolute;top:-8px;right:-8px}.buc-code-display{text-align:center;background:#c9a84c14;border:1px solid #c9a84c4d;border-radius:12px;margin:20px 0;padding:20px 24px}.buc-code-display .label{text-transform:uppercase;letter-spacing:.1em;color:#ffffff80;margin-bottom:8px;font-size:11px;display:block}.buc-code-display .code{color:#c9a84c;letter-spacing:.05em;font-family:Courier New,monospace;font-size:32px;font-weight:700;display:block}.buc-code-display .amount{color:#fff9;margin-top:8px;font-size:13px;display:block}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes fillBar{0%{width:0}to{width:100%}}.redirect-fill{background:var(--gold);border-radius:2px;height:100%;animation:3s linear forwards fillBar}.checkmark-circle{width:72px;height:72px;margin:0 auto 20px}.checkmark-circle circle{stroke:#c9a84c;stroke-width:2px;fill:none;stroke-dasharray:226;stroke-dashoffset:226px;animation:.6s forwards stroke}.checkmark-circle path{stroke:#c9a84c;stroke-width:2px;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48px;animation:.3s .6s forwards stroke}.buc-badge{text-align:center;color:#ffffff80;margin-top:12px;font-size:12px}.buc-badge span{color:#c9a84c;font-family:Courier New,monospace;font-weight:600}.validating-screen,.invalid-buc-screen{color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;padding:24px;display:flex}.invalid-buc-screen .error-icon{color:#ff6b6b;background:#ff6b6b1a;border:2px solid #ff6b6b;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:28px;display:flex}.invalid-buc-screen a{color:#c9a84c;margin-top:8px;font-size:14px;text-decoration:none}@media (width<=520px){.form-card{padding:28px 20px!important}.step-circle{width:28px!important;height:28px!important;font-size:12px!important}.btn-primary,.btn-secondary{height:48px!important}.card-option{padding:10px 12px!important}}