*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  width:100vw;height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
  background:#0a0c10;
  position:fixed;top:0;left:0;right:0;bottom:0;
}
.bg{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;
  background:url('bg.jpg') center center/cover no-repeat;
}
.ov{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(8,10,16,.72) 0%,
    rgba(8,10,16,.28) 38%,
    rgba(8,10,16,.28) 62%,
    rgba(8,10,16,.92) 100%);
}
.page{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;
  max-width:430px;margin:0 auto;
}
/* TOPBAR */
.topbar{padding:16px 18px 0;flex-shrink:0}
.back{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;
}
.back svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.back.inv{visibility:hidden}
/* DOTS */
.dots{display:flex;justify-content:center;gap:6px;padding:10px 0 16px;flex-shrink:0}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.20)}
.dot.on{width:20px;border-radius:4px;background:#4a9eff}
.dot.done{background:rgba(255,255,255,.52)}
/* KEYPAD */
.kp{flex-shrink:0;background:rgba(20,23,33,.97);border-radius:22px 22px 0 0;padding:14px 14px 36px}
.kg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kb{
  height:62px;border-radius:14px;border:none;
  background:rgba(255,255,255,.10);color:#fff;
  font-size:28px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-user-select:none;user-select:none;
}
.kb:active{background:rgba(255,255,255,.22);transform:scale(.93)}
.kcancel{background:transparent!important;color:rgba(255,255,255,.36)!important;font-size:14px!important;font-weight:500!important}
.kdone{background:#1a5c32!important;color:#fff!important;font-size:16px!important;font-weight:700!important}
.sp{flex:1;min-height:0}