:root {
  --ink: #18312f;
  --green: #173b36;
  --lime: #d7e36a;
  --paper: #f6f3ec;
  --muted: #657876;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, sans-serif;
}
.card {
  width: min(100%, 440px);
  padding: 34px;
  border: 1px solid #d9ded8;
  border-radius: 26px;
  background: #fffdf8;
  box-shadow: 0 18px 55px rgba(31, 58, 53, .10);
}
.mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 14px;
  background: var(--lime);
  font-weight: 800;
}
h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.03em; }
p { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
label { display: block; margin: 15px 0 7px; font-size: 13px; font-weight: 700; }
input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #cbd8d3;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
input:focus { outline: 3px solid rgba(215, 227, 106, .45); border-color: #8b9b35; }
button {
  width: 100%;
  margin-top: 22px;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.back { display: block; margin-top: 18px; text-align: center; color: var(--green); font-size: 13px; }
.alert { margin: 0 0 18px; padding: 11px 13px; border-radius: 11px; background: #fff0ea; color: #934322; font-size: 13px; }