.input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d1d5db; /* gray-300 */
  background: transparent;
  color: #111827; /* gray-900 */
  padding: 0.5rem 0;
  transition: border-color .15s ease;
}
.input::placeholder { color: #9ca3af; }          /* gray-400 */
.input:focus {
  outline: none;
  border-bottom-color: #4f46e5;                  /* indigo-600 */
}

.btn-add {
  padding: 0.75rem;
  border-radius: 0.75rem; /* rounded-xl */
  border: 1px solid #9ca3af; /* gray-400 */
  background: transparent;
  color: #374151; /* gray-700 */
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.btn-add:hover   { background: #f9fafb; }         /* gray-50  */
.btn-add:active  { background: #f3f4f6; }         /* gray-100 */
.btn-add:focus   { outline: 2px solid #c7d2fe; }  /* indigo-200 */

.btn-submit {
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: #6366f1; /* indigo-500 */
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: background .15s ease;
}
.btn-submit:hover  { background: #4f46e5; } /* indigo-600 */
.btn-submit:active { background: #4338ca; } /* indigo-700 */
.btn-submit:focus  { outline: 2px solid #c7d2fe; }

.link-add {
  color: #4f46e5; /* indigo-600 */
  transition: color .15s ease;
}
.link-add:hover { color: #3730a3; } /* indigo-800 */