*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: #F5F6F8;
  color: #1E2329;
  -webkit-font-smoothing: antialiased;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bg-deco { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.bg-deco span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.bg-deco span:nth-child(1) { width: 520px; height: 520px; background: #FFD9D6; top: -160px; left: -120px; }
.bg-deco span:nth-child(2) { width: 460px; height: 460px; background: #FFE9C9; bottom: -180px; right: -100px; }
.bg-deco span:nth-child(3) { width: 320px; height: 320px; background: #E4E9FF; top: 40%; right: 20%; opacity: .35; }

.wrap { position: relative; z-index: 1; width: 380px; padding: 20px; }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; padding-left: 6px; }
.logo { width: 46px; height: 46px; border-radius: 13px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(222,58,49,.14), 0 12px 28px -14px rgba(222,58,49,.4); }
.logo svg { width: 30px; height: 30px; }
.brand-txt h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: .5px; font-weight: 650; }
.brand-txt p { margin: 0; font-size: 12.5px; color: #8A929E; letter-spacing: .3px; }

.card { background: #fff; border-radius: 18px; padding: 26px 24px 22px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 48px -24px rgba(16,24,40,.18);
  border: 1px solid rgba(255,255,255,.8); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; color: #5A626E; margin-bottom: 7px; font-weight: 500; }
.field input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #E3E6EB; border-radius: 10px;
  font-size: 14px; color: #1E2329; background: #FAFBFC; transition: .18s; font-family: inherit; }
.field input:focus { outline: none; border-color: #DE3A31; background: #fff; box-shadow: 0 0 0 3px rgba(222,58,49,.1); }
.err { color: #DE3A31; font-size: 12.5px; height: 16px; margin-bottom: 8px; }
button { width: 100%; height: 46px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #E8433A, #D32F26); color: #fff; font-size: 15px; font-weight: 600;
  letter-spacing: 2px; font-family: inherit; box-shadow: 0 6px 16px -6px rgba(222,58,49,.6); transition: .18s; }
button:hover { filter: brightness(1.05); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .7; cursor: default; }
.hint { margin-top: 14px; text-align: center; font-size: 11.5px; color: #A6ADB8; }