:root {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: #122033;
  background: #eef3f8;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(39, 101, 171, .14), transparent 35%),
    radial-gradient(circle at 80% 85%, rgba(15, 118, 110, .12), transparent 35%),
    #eef3f8;
}
.login-card {
  width: min(430px, 100%);
  background: #fff;
  border: 1px solid #dbe4ee;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(25, 49, 78, .14);
  padding: 38px;
}
.mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #163e6d;
  color: white;
  font: 700 30px/1 Georgia, serif;
  margin-bottom: 28px;
}
.heading > span { color: #50708f; font-size: 11px; letter-spacing: .16em; font-weight: 800; }
h1 { font-size: 30px; margin: 8px 0 8px; letter-spacing: -.03em; }
.heading p { color: #66798d; margin: 0 0 28px; line-height: 1.55; }
label span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
label small { color: #8090a0; font-weight: 500; }
.otp-field { display: block; margin-top: 15px; }
input {
  width: 100%;
  border: 1px solid #c9d6e3;
  border-radius: 11px;
  padding: 13px 14px;
  font: inherit;
  outline: none;
}
input:focus { border-color: #2765ab; box-shadow: 0 0 0 3px rgba(39, 101, 171, .12); }
button {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 13px 16px;
  margin-top: 16px;
  background: #163e6d;
  color: #fff;
  font: 700 15px/1.2 inherit;
  cursor: pointer;
}
button:hover { background: #0f3158; }
button:disabled { opacity: .65; cursor: wait; }
.error { min-height: 20px; margin: 12px 0 0; color: #b42332; font-size: 13px; }
footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid #e5ebf1; color: #8090a0; font-size: 12px; text-align: center; }