html,body{width:100%;height:100%}
body{
  margin:0;background:#f2f4f8;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex;align-items:center;justify-content:center;color:#222;
}
.wrap{width:100%;max-width:480px;padding:0 18px;text-align:center}
.card{
  background:#fff;border-radius:18px;
  padding:36px 24px calc(36px + env(safe-area-inset-bottom));
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.locator{position:relative;width:72px;height:72px;margin:0 auto 28px}
.locator span{
  position:absolute;top:50%;left:50%;
  width:16px;height:16px;background:#2d6cdf;border-radius:50%;
  transform:translate(-50%,-50%);
}
.locator span:nth-child(1){animation:pulse 1.8s infinite}
.locator span:nth-child(2){animation:pulse 1.8s infinite .6s}
.locator span:nth-child(3){animation:pulse 1.8s infinite 1.2s}
@keyframes pulse{
  0%{width:16px;height:16px;opacity:.8}
  100%{width:72px;height:72px;opacity:0}
}
h2{margin:0 0 12px;font-size:22px}
p{margin:0;font-size:15px;line-height:1.6;color:#555}
.btn{
  display:none;margin-top:26px;width:100%;padding:16px;
  font-size:16px;font-weight:600;border-radius:14px;
  border:none;background:#2d6cdf;color:#fff;
}
.card.is-error .btn{display:block}
.error-icon{
  position:relative;width:72px;height:72px;margin:0 auto 28px;
}
.error-icon .ring{
  position:absolute;inset:0;border:3px solid #d93025;border-radius:50%;
}
.error-icon .mark{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-55%);
  font-size:34px;font-weight:700;color:#d93025;
}