labeled-field {
  display: grid;
  gap: 0.35rem;
  font: 0.9rem/1.3 system-ui, sans-serif;
}
labeled-field label { display: grid; gap: 0.35rem; }
labeled-field .field-label { font-weight: 600; color: var(--ink, #1d1d29); }
labeled-field[required] .field-label::after { content: ' *'; color: #e5484d; }
labeled-field input {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--line, #d9d9e3);
  border-radius: 10px;
  background: var(--field, #fff);
  color: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
labeled-field input:focus {
  outline: none;
  border-color: #7c5cff;
  box-shadow: 0 0 0 4px rgb(124 92 255 / 18%);
}
labeled-field .field-hint { color: var(--muted, #6b6b7b); min-height: 1.3em; }
labeled-field:state(invalid) input { border-color: #e5484d; }
labeled-field:state(invalid) input:focus { box-shadow: 0 0 0 4px rgb(229 72 77 / 18%); }
labeled-field:state(invalid) .field-hint { color: #e5484d; }