:root{
  --fg:#f2f4f8;
  --muted:#8a90a0;
  --accent:#e23535;
  --accent-hi:#ff4545;
  --ok:#3ec27a;
  --err:#e14b4b;
  --key-bg:rgba(255,255,255,.09);
  --key-bg-active:rgba(255,255,255,.18);
  --key-border:rgba(255,255,255,.08);
  --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;padding:0;
  background:#0a0c10;
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  min-height:100vh;
  overflow:hidden;
}
.wrap{
  max-width:440px;margin:0 auto;padding:24px 22px;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
}
.screen{
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:22px;width:100%;
  text-align:center;
}
.screen.active{display:flex}

h1{
  font-size:19px;font-weight:700;margin:0;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--fg);
}

.icon-lg{width:110px;height:110px;object-fit:contain}
.icon-md{width:72px;height:72px;object-fit:contain}

.float{animation:float 2.2s ease-in-out infinite}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.loading-text{font-size:17px;color:var(--muted);letter-spacing:.04em}
.dots span{
  display:inline-block;opacity:.3;
  animation:dot 1.2s infinite;
}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{
  0%,60%,100%{opacity:.3}
  30%{opacity:1}
}

.primary{
  width:100%;max-width:280px;
  padding:16px 22px;border:0;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(226,53,53,.35);
  transition:transform .08s ease, box-shadow .15s ease, opacity .15s;
}
.primary:active{transform:translateY(1px);box-shadow:0 4px 14px rgba(226,53,53,.45)}
.primary:disabled{opacity:.5;cursor:default;box-shadow:none}

input{
  width:100%;max-width:280px;
  padding:14px 16px;border-radius:var(--radius);
  border:1px solid var(--key-border);
  background:rgba(255,255,255,.05);
  color:var(--fg);font-size:16px;
  outline:none;
}
input:focus{border-color:var(--accent)}

.code-display{
  width:100%;max-width:280px;min-height:56px;
  padding:14px;
  border-radius:var(--radius);
  border:1px solid var(--key-border);
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:700;letter-spacing:.5em;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s;
}
.code-display.error{border-color:var(--err);animation:shake .3s}
.code-display.success{border-color:var(--ok)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

.keypad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  width:100%;max-width:224px;
}
.keypad button{
  padding:14px 0;
  border:1px solid var(--key-border);
  border-radius:12px;
  background:var(--key-bg);
  color:var(--fg);
  font-size:20px;font-weight:500;
  cursor:pointer;
  transition:background .1s, transform .08s;
}
.keypad button:active{background:var(--key-bg-active);transform:scale(.96)}
.keypad .del{background:rgba(225,75,75,.12);color:#ffb3b3}
.keypad .del:active{background:rgba(225,75,75,.22)}
.keypad .empty{visibility:hidden;pointer-events:none}

.check-link{
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  margin-top:4px;
  cursor:pointer;
  border-bottom:1px dashed rgba(255,255,255,.15);
  padding-bottom:2px;
  transition:color .15s, border-color .15s;
}
.check-link:hover{color:var(--fg);border-color:var(--fg)}

.status{
  position:fixed;bottom:16px;left:0;right:0;
  text-align:center;
  color:var(--muted);font-size:12.5px;
  min-height:16px;
  padding:0 16px;
  pointer-events:none;
}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}