:root {
  color: #243044;
  background: #f4f6f8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-height: 100vh; background: #f4f6f8; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button, input { font: inherit; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; touch-action: manipulation; }
.redeem-stage { display: grid; min-height: 100svh; padding: 16px; place-items: center; }
.redeem-card { width: min(100%, 360px); padding: 22px 20px 20px; border: 1px solid #e3e7ec; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(30, 45, 65, .07); }
h1 { margin: 0 0 18px; color: #243044; font-size: 21px; font-weight: 700; line-height: 1.3; text-align: center; }
#code-form { display: grid; gap: 8px; }
#code-form label { color: #657184; font-size: 13px; }
#code { width: 100%; height: 46px; border: 1px solid #d4dae3; border-radius: 8px; padding: 0 12px; outline: 0; color: #243044; background: #fbfcfd; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
#code::placeholder { color: #a0a8b4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; }
#code:focus { border-color: #5574c9; background: #fff; box-shadow: 0 0 0 3px rgba(85, 116, 201, .13); }
#code-form button { min-height: 46px; margin-top: 4px; border: 0; border-radius: 8px; color: #fff; background: #5574c9; font-size: 15px; font-weight: 700; }
#code-form button:disabled { cursor: wait; opacity: .65; }
#code-form button:active { transform: translateY(1px); }
.error { min-height: 18px; margin: 9px 0 0; color: #c14747; font-size: 13px; line-height: 1.4; text-align: center; }
.browser-blocked { padding: 4px 0 2px; text-align: center; }
.browser-blocked p { margin: 0 0 18px; color: #536174; font-size: 15px; line-height: 1.6; }
@media (max-width: 420px) { .redeem-stage { padding: 12px; } .redeem-card { padding: 20px 16px 18px; } }