*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  color:#141414;-webkit-font-smoothing:antialiased;line-height:1.45;
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(255,106,0,.18), transparent 60%),
    radial-gradient(700px 360px at -10% 110%, rgba(245,196,81,.18), transparent 60%),
    #fffaf5;
  min-height:100%;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
.wrap{
  width:min(440px,100%);
  background:#fff;border:1px solid #ebebeb;border-radius:22px;
  padding:36px 28px;box-shadow:0 30px 80px -40px rgba(0,0,0,.25);
  position:relative;overflow:hidden;
}
.wrap::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,#ff6a00,#f5c451,#ff6a00);
}
.ico{
  width:64px;height:64px;border-radius:18px;margin:0 auto 16px;
  background:linear-gradient(135deg,#ff6a00,#ff9a3c);
  color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(255,106,0,.6);
}
h1{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
h1.ok{color:#0a6638}
h1.err{color:#9a1c1c}
.hint{font-size:14px;color:#575757;margin:0 0 18px;line-height:1.55;min-height:42px}
.spinner{
  width:32px;height:32px;border-radius:50%;margin:6px auto 4px;
  border:3px solid #eee;border-top-color:#ff6a00;
  animation:spin .8s linear infinite;
}
.spinner.hide{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.btn{
  appearance:none;cursor:pointer;border:none;margin-top:14px;
  padding:13px 22px;border-radius:12px;color:#fff;
  font:700 14px/1.2 inherit;letter-spacing:.005em;
  background:linear-gradient(180deg,#ff6a00,#e05a00);
  box-shadow:0 12px 24px -12px rgba(255,106,0,.6);
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}