.hat-form-feedback {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 20px;
  background: #eff6ff;
  color: #1e3a8a;
  line-height: 1.6;
}
.hat-form-feedback[hidden] { display: none; }
.hat-form-feedback--success {
  border-color: #86efac;
  background: #f0fdf4;
  color: #14532d;
}
.hat-form-feedback--error {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}
.hat-form-feedback p { margin: 0; }
.hat-form-feedback p + p { margin-top: 8px; }
.hat-form-feedback .hat-form-feedback__title { font-size: 18px; font-weight: 700; }
.hat-form-feedback .hat-form-feedback__reference { font-weight: 600; }
.hat-form-feedback:focus { outline: 3px solid #1e3a8a; outline-offset: 3px; }