* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #e8e8e8;
  font: 14px/1.65 system-ui, "Microsoft YaHei", sans-serif;
}
form { width: min(320px, 80vw); text-align: center; }
input {
  width: 100%;
  padding: 11px 12px;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #f2f2f2;
  font: inherit;
}
input:focus { outline: none; border-color: #4a4a4a; }
button {
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  color: #ededed;
  font: inherit;
  cursor: pointer;
}
button:hover { background: #242424; }
button:disabled { opacity: .55; cursor: default; }
#lock-error { min-height: 1.65em; margin: 10px 0 0; color: #ff9aa2; }