.msr-form {
  --msr-primary: #141414;
  --msr-secondary: #ebe5dc;
  --msr-text: #7a7a7a;
  --msr-accent: #fdf5e6;
  --msr-bg: #f6f5f1;
  --msr-border: rgba(20, 20, 20, 0.18);
}

.msr-form {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--msr-border);
  border-radius: 16px;
  background: var(--msr-bg);
}

.msr-form__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  color: var(--msr-primary);
}

.msr-form__notice {
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 12px;
}
.msr-form__notice.is-success {
  background: rgba(235, 229, 220, 0.75);
  border: 1px solid rgba(20, 20, 20, 0.18);
  color: var(--msr-primary);
}
.msr-form__notice.is-error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #7f1d1d;
}

.msr-form__form {
  display: grid;
  gap: 12px;
}

.msr-form__field {
  display: grid;
  gap: 6px;
}

.msr-form__field > span {
  font-weight: 800;
  font-size: 13px;
  color: var(--msr-primary);
}

.msr-form__field input,
.msr-form__field textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--msr-border);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: var(--msr-accent);
  color: var(--msr-primary);
}

.msr-form__field input:focus,
.msr-form__field textarea:focus {
  border-color: rgba(20, 20, 20, 0.35);
}

.msr-form__submit {
  justify-self: start;
  border: 1px solid var(--msr-primary);
  background: var(--msr-primary);
  color: var(--msr-accent);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}

.msr-form__submit:hover {
  opacity: 0.92;
}

.msr-form__field input::placeholder,
.msr-form__field textarea::placeholder {
  color: var(--msr-text);
}