* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, #eef1ff 0%, #f6f7fb 55%, #f3efff 100%);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; color: #1b2232;
}
.box { width: min(360px, 100%); background: #fff; border: 1px solid #e6e9f2; border-radius: 22px; padding: 30px 26px; box-shadow: 0 10px 40px rgba(27, 34, 50, 0.08); display: grid; gap: 12px; text-align: center; }
.logo { width: 64px; height: 64px; border-radius: 16px; justify-self: center; }
h1 { margin: 4px 0 0; font-size: 24px; letter-spacing: -0.02em; }
p { margin: 0 0 8px; color: #6b7486; font-size: 13.5px; }
input { font: inherit; font-size: 22px; letter-spacing: 0.3em; text-align: center; padding: 12px; border: 1px solid #e6e9f2; border-radius: 14px; outline: none; }
input:focus { border-color: #3b5bdb; box-shadow: 0 0 0 3px #eaefff; }
button { font: inherit; font-weight: 600; padding: 13px; border: 0; border-radius: 14px; background: #3b5bdb; color: #fff; }
.err { color: #d64545; font-size: 13px; min-height: 1em; }
small { color: #6b7486; font-size: 12px; }