form {
  display: grid;
  gap: 10px;
  font-size: 0.85rem;
}

label {
  color: var(--muted);
  margin-bottom: 2px;
  display: block;
}

input,
textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text);
  padding: 7px 9px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 36px;
}

input::placeholder,
textarea::placeholder {
  color: #999999;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #999999;
}

.form-row-inline {
  display: grid;
  gap: 8px;
}

@media (min-width: 720px) {
  .form-row-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form-footer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}