*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:#1a1a1a;color:#dadada;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.55}
body:before{content:"";position:fixed;z-index:-1;top:-260px;left:50%;width:720px;height:520px;transform:translateX(-50%);border-radius:50%;background:#00b67a;opacity:.07}
.page{width:92%;max-width:800px;margin:0 auto;padding:32px 0 56px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:38px;color:#fff;font-size:22px;font-weight:800}
.brand img{width:34px;height:34px;border-radius:9px}
.hero{text-align:center;margin-bottom:28px}
.eyebrow,.success-label{display:inline-block;margin-bottom:12px;color:#00b67a;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
h1{margin:0 0 12px;color:#fff;font-size:44px;line-height:1.08;letter-spacing:-1.7px}
.hero p{max-width:600px;margin:0 auto;color:#888;font-size:16px}
.panel{margin-bottom:20px;padding:24px;background:#242424;border:1px solid #333;border-radius:12px}
form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
label{display:none}
input{width:100%;min-width:0;padding:13px 15px;background:#1a1a1a;color:#dadada;border:1px solid #3b3b3b;border-radius:8px;font:inherit;outline:none}
input:focus{border-color:#00b67a;box-shadow:0 0 0 3px rgba(0,182,122,.12)}
input::placeholder{color:#666}
button{padding:13px 27px;background:#00b67a;color:#fff;border:0;border-radius:8px;font:inherit;font-size:14px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;cursor:pointer}
button:hover,button:focus{background:#009a66}
button:disabled{background:#555;cursor:not-allowed}
.loading{display:flex;justify-content:center;align-items:center;gap:12px;color:#888}
.spinner{width:27px;height:27px;border:3px solid #444;border-top-color:#00b67a;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
h2{margin:0 0 10px;color:#fff;font-size:22px}
.code{text-align:center;margin:15px 0 7px;color:#00b67a;font-size:46px;font-weight:800;letter-spacing:11px;font-variant-numeric:tabular-nums}
.expiry{text-align:center;margin:0 0 18px;color:#888;font-variant-numeric:tabular-nums}
.expiry.expired{color:#ef4444}
.steps{margin:0 0 18px;padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;padding:12px 8px 12px 43px;border-bottom:1px solid #333;counter-increment:step}
.steps li:last-child{border-bottom:0}
.steps li:before{content:counter(step);position:absolute;left:3px;top:10px;width:27px;height:27px;border-radius:50%;background:#00b67a;color:#fff;font-size:13px;font-weight:800;line-height:27px;text-align:center}
.note{margin:0 0 18px;color:#888;font-size:13px}
.secondary{display:block;margin:0 auto;background:transparent;color:#00b67a;border:1px solid #00b67a}
.secondary:hover,.secondary:focus{background:#173c31}
.success-panel{text-align:center}
.check{display:inline-grid;place-items:center;width:48px;height:48px;margin-bottom:13px;border-radius:50%;background:#00b67a;color:#fff;font-size:28px;font-weight:800}
.success-panel p{color:#888}
.success-panel .secondary{margin-top:18px}
.error-panel{border-color:#603232}
.error-panel h2,.error-panel p{color:#ef9999}
@media(max-width:680px){
  .page{padding-top:22px}
  .brand{margin-bottom:28px}
  h1{font-size:35px;letter-spacing:-1px}
  .panel{padding:20px}
  form{grid-template-columns:1fr}
  button{width:100%}
  .code{font-size:36px;letter-spacing:7px}
}